Create update task component

2026-03-27 16:37:03 +01:00
parent f6208cf95d
commit 2c1da8e93f
2 changed files with 127 additions and 0 deletions
@@ -0,0 +1,124 @@
+import { useContext, useEffect, useState } from "react";
+import { AuthContext } from "../../../../contexts/Auth/AuthContext";
+import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext";
+import Button from "../../../../components/ui/Button/Button";
+import Modal from "../../../../components/ui/Modal/Modal";
+import TextInput from "../../../../components/ui/Input/Input";
+import styles from "../../EventDetailPage.module.css";
+import updateTask from "../../../../utils/tasks/updateTask";
+
+type EditTaskBtnProps = {
+    taskId: number;
+    eventId: number | string;
+};
+
+export default function EditTaskBtn({ taskId, eventId }: EditTaskBtnProps) {
+    const { user } = useContext(AuthContext) as any;
+    const { tasks, updateEventInfo } = useContext(EventDetailContext) as any;
+    const task = tasks?.find((t: any) => t.id === taskId);
+
+    const [open, setOpen] = useState(false);
+    const [name, setName] = useState<string>("");
+    const [description, setDescription] = useState<string>("");
+    const [start, setStart] = useState<string>("");
+    const [end, setEnd] = useState<string>("");
+    const [location, setLocation] = useState<string>("");
+    const [maxParticipants, setMaxParticipants] = useState<string>("");
+
+    useEffect(() => {
+        if (open && task) {
+            setName(task.name ?? "");
+            setDescription(task.description ?? "");
+            setStart(task.start ? task.start.slice(0, 16) : "");
+            setEnd(task.end ? task.end.slice(0, 16) : "");
+            setLocation(task.location ?? "");
+            setMaxParticipants(task.max_participants?.toString() ?? "");
+        }
+    }, [open, task]);
+
+    if (!user?.isAdmin) return null;
+
+    const handleSubmit = async () => {
+        await updateTask(taskId, {
+            name,
+            description,
+            start,
+            end,
+            location,
+            max_participants: Number(maxParticipants),
+        });
+        await updateEventInfo(eventId);
+        setOpen(false);
+    };
+
+    return (
+        <>
+            <Button variant={"default"} onClick={() => setOpen(true)}>
+                Modifier
+            </Button>
+
+            <Modal open={open} onClose={() => setOpen(false)} title={"Modifier la tâche"}>
+                <div className={styles.modalContent}>
+                    <div>
+                        <p>Nom</p>
+                        <TextInput
+                            value={name}
+                            onChange={(e: any) => setName(e.target.value)}
+                            placeholder="Nom de la tâche"
+                        />
+                    </div>
+
+                    <div>
+                        <p>Description</p>
+                        <TextInput
+                            value={description}
+                            onChange={(e: any) => setDescription(e.target.value)}
+                            placeholder="Description"
+                        />
+                    </div>
+
+                    <div>
+                        <p>Lieu</p>
+                        <TextInput
+                            value={location}
+                            onChange={(e: any) => setLocation(e.target.value)}
+                            placeholder="Lieu"
+                        />
+                    </div>
+
+                    <div>
+                        <p>Participants max</p>
+                        <TextInput
+                            type="number"
+                            value={maxParticipants}
+                            onChange={(e: any) => setMaxParticipants(e.target.value)}
+                            placeholder="Participants max"
+                        />
+                    </div>
+
+                    <div>
+                        <p>Début</p>
+                        <TextInput
+                            type="datetime-local"
+                            value={start}
+                            onChange={(e: any) => setStart(e.target.value)}
+                        />
+                    </div>
+
+                    <div>
+                        <p>Fin</p>
+                        <TextInput
+                            type="datetime-local"
+                            value={end}
+                            onChange={(e: any) => setEnd(e.target.value)}
+                        />
+                    </div>
+
+                    <Button variant="default" onClick={handleSubmit}>
+                        Confirmer
+                    </Button>
+                </div>
+            </Modal>
+        </>
+    );
+}
@@ -10,6 +10,7 @@ import { AuthContext } from "../../../../contexts/Auth/AuthContext";
 import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext";
 import DeleteTaskBtn from "../DeleteTaskBtn/DeleteTaskBtn";
 import AssignUserBtn from "../AssignUserBtn/AssignUserBtn";
+import EditTaskBtn from "../EditTaskBtn/EditTaskBtn";

 type EventTaskProps = {
    taskId: number;
@@ -135,6 +136,8 @@ export default function EventTask({ taskId, index }: EventTaskProps) {
                        </Button>
                    )}

+                    <EditTaskBtn taskId={task.id} eventId={eventId} />
+
                    <DeleteTaskBtn
                        eventId={eventId}
                        taskId={task.id}