File size: 3,906 Bytes
35765b5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
import { useState } from 'react';
import type { Task } from '../types';
interface TaskCompleteModalProps {
task: Task;
onClose: () => void;
onComplete: (taskId: string, whatIDid: string, codeSnippet?: string) => Promise<void>;
}
export function TaskCompleteModal({ task, onClose, onComplete }: TaskCompleteModalProps) {
const [whatIDid, setWhatIDid] = useState('');
const [codeSnippet, setCodeSnippet] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState('');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!whatIDid.trim()) {
setError('Please describe what you did');
return;
}
setIsSubmitting(true);
setError('');
try {
await onComplete(task.id, whatIDid.trim(), codeSnippet.trim() || undefined);
onClose();
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to complete task');
} finally {
setIsSubmitting(false);
}
};
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
{/* Backdrop */}
<div
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
onClick={onClose}
/>
{/* Modal */}
<div className="relative bg-slate-900 border border-white/20 rounded-xl w-full max-w-lg mx-4 shadow-2xl">
{/* Header */}
<div className="px-6 py-4 border-b border-white/10">
<h2 className="text-xl font-bold text-white">Complete Task</h2>
<p className="text-purple-300/70 text-sm mt-1 truncate">{task.title}</p>
</div>
{/* Form */}
<form onSubmit={handleSubmit} className="p-6 space-y-4">
{error && (
<div className="p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-200 text-sm">
{error}
</div>
)}
<div>
<label className="block text-white text-sm font-medium mb-2">
What did you do? <span className="text-red-400">*</span>
</label>
<textarea
value={whatIDid}
onChange={(e) => setWhatIDid(e.target.value)}
placeholder="Describe what you accomplished..."
rows={3}
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-purple-500 resize-none"
autoFocus
/>
</div>
<div>
<label className="block text-white text-sm font-medium mb-2">
Code snippet (optional)
</label>
<textarea
value={codeSnippet}
onChange={(e) => setCodeSnippet(e.target.value)}
placeholder="Paste any relevant code..."
rows={4}
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-purple-500 resize-none font-mono text-sm"
/>
</div>
{/* Actions */}
<div className="flex gap-3 pt-2">
<button
type="button"
onClick={onClose}
disabled={isSubmitting}
className="flex-1 px-4 py-3 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-all"
>
Cancel
</button>
<button
type="submit"
disabled={isSubmitting || !whatIDid.trim()}
className="flex-1 px-4 py-3 bg-green-600 hover:bg-green-700 disabled:bg-green-800 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-all"
>
{isSubmitting ? 'Completing...' : 'Complete Task'}
</button>
</div>
</form>
</div>
</div>
);
}
|