add: tasks func()

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>
2026-09-27 00:12:54 +08:00 · 2026-05-20 13:18:44 +08:00
parent 2b1955608d
commit 8e67b84d4d
36 changed files with 3752 additions and 3 deletions
@@ -0,0 +1,186 @@
+import { useEffect, useState, useMemo } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { useAdminTask } from '@/contexts/AdminTaskContext';
+import GroupMultiSelect from '@/components/generic/GroupMultiSelect';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ArrowLeft } from 'lucide-react';
+
+export default function EditTaskList() {
+    const navigate = useNavigate();
+    const { taskListId } = useParams();
+    const { fetchTaskList, updateTaskList, assignGroups, unassignGroups, loading } = useAdminTask();
+
+    const [form, setForm] = useState(null);
+    const [errors, setErrors] = useState({});
+
+    // ── Original values to diff against ──────────────────────────────────────
+    const [original, setOriginal] = useState(null);
+    const [originalGroupIds, setOriginalGroupIds] = useState([]);
+    const [selectedGroupIds, setSelectedGroupIds] = useState([]);
+
+    useEffect(() => {
+        fetchTaskList(taskListId).then((data) => {
+            if (!data) return;
+
+            const initialForm = {
+                name: data.name ?? '',
+                description: data.description ?? '',
+            };
+
+            setForm(initialForm);
+            setOriginal(initialForm);
+
+            const ids = (data.groups ?? []).map((g) => g.group_id);
+            setOriginalGroupIds(ids);
+            setSelectedGroupIds(ids);
+        });
+    }, [taskListId]);
+
+    // ── Dirty check — true only when something actually changed ───────────────
+    const isDirty = useMemo(() => {
+        if (!form || !original) return false;
+
+        const formChanged =
+            form.name.trim() !== original.name.trim() ||
+            (form.description.trim() || null) !== (original.description.trim() || null);
+
+        const groupsChanged =
+            selectedGroupIds.length !== originalGroupIds.length ||
+            selectedGroupIds.some((id) => !originalGroupIds.includes(id));
+
+        return formChanged || groupsChanged;
+    }, [form, original, selectedGroupIds, originalGroupIds]);
+
+    const validate = () => {
+        const e = {};
+        if (!form?.name?.trim()) e.name = 'Task list name is required.';
+        setErrors(e);
+        return Object.keys(e).length === 0;
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!validate()) return;
+
+        // ── 1. Update name / description ──────────────────────────────────────
+        const updated = await updateTaskList(taskListId, {
+            name: form.name.trim(),
+            description: form.description.trim() || null,
+        });
+
+        if (!updated) return;
+
+        // ── 2. Diff groups ────────────────────────────────────────────────────
+        const toAssign   = selectedGroupIds.filter((id) => !originalGroupIds.includes(id));
+        const toUnassign = originalGroupIds.filter((id) => !selectedGroupIds.includes(id));
+
+        await Promise.all([
+            toAssign.length   ? assignGroups(taskListId, toAssign)     : Promise.resolve(),
+            toUnassign.length ? unassignGroups(taskListId, toUnassign) : Promise.resolve(),
+        ]);
+
+        navigate(`/admin/taskList/${taskListId}`);
+    };
+
+    // ── Loading skeleton ──────────────────────────────────────────────────────
+    if (!form) return (
+        <div className="max-w-xl mx-auto py-8 px-4 space-y-4">
+            <Skeleton className="h-8 w-48" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-24 w-full" />
+            <Skeleton className="h-10 w-full" />
+        </div>
+    );
+
+    return (
+        <div className="max-w-xl mx-auto py-8 px-4">
+            <div className="flex gap-2 items-center mb-4">
+                <Button
+                    variant="ghost"
+                    onClick={() => navigate('/admin/taskList')}
+                >
+                    <ArrowLeft className="size-4" />
+                </Button>
+                <div className="space-y-1">
+                    <h1 className="font-medium">Edit Task List</h1>
+                    <p className="text-sm text-muted-foreground">Update task list.</p>
+                </div>
+            </div>
+
+            <Card>
+                <CardContent>
+                    <form onSubmit={handleSubmit} className="space-y-4">
+
+                        {/* Name */}
+                        <div className="space-y-1">
+                            <Label htmlFor="name">Name *</Label>
+                            <Input
+                                id="name"
+                                value={form.name}
+                                onChange={(e) => setForm({ ...form, name: e.target.value })}
+                            />
+                            {errors.name && (
+                                <p className="text-xs text-destructive">{errors.name}</p>
+                            )}
+                        </div>
+
+                        {/* Description */}
+                        <div className="space-y-1">
+                            <Label htmlFor="description">Description</Label>
+                            <Textarea
+                                id="description"
+                                value={form.description}
+                                onChange={(e) => setForm({ ...form, description: e.target.value })}
+                                rows={3}
+                            />
+                        </div>
+
+                        {/* Groups */}
+                        <div className="space-y-1">
+                            <Label>
+                                Assigned Groups
+                                <span className="ml-1.5 text-xs text-muted-foreground font-normal">
+                                    (optional)
+                                </span>
+                            </Label>
+                            <GroupMultiSelect
+                                value={selectedGroupIds}
+                                onChange={setSelectedGroupIds}
+                                disabled={loading}
+                                placeholder="Select groups to assign…"
+                            />
+                            <p className="text-xs text-muted-foreground">
+                                Members of selected groups will be able to see and complete this task list.
+                            </p>
+                        </div>
+
+                        {/* Actions */}
+                        <div className="flex gap-2 justify-end pt-2">
+                            <Button
+                                type="button"
+                                variant="outline"
+                                onClick={() => navigate('/admin/taskList')}
+                            >
+                                Cancel
+                            </Button>
+                            <Button
+                                type="submit"
+                                disabled={loading || !isDirty}
+                            >
+                                {loading ? 'Saving…' : 'Save Changes'}
+                            </Button>
+                        </div>
+
+                    </form>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}