Create task btn

src/pages/eventDetail/eventDetail.jsx

@@ -9,6 +9,8 @@ import Modal from "../../components/ui/modal/modal.jsx";
 import { AuthContext } from "../../contexts/auth/AuthContext.js";
 import deleteEvent from "../../utils/events/deleteEvent.js";
 import { useNavigate } from "react-router";
+import TextInput from "../../components/ui/input/input.jsx";
+import createTaskApi from "../../utils/tasks/createTask.js";
 
 
 function EventDetail() {
@@ -21,6 +23,14 @@ function EventDetail() {
     const [open, setOpen] = useState(false);
     const [event, setEvent] = useState(null);
 
+    const [openTaskModal, setOpenTaskModal] = useState(false);
+    const [taskName, setTaskName] = useState("");
+    const [taskDescription, setTaskDescription] = useState("");
+    const [taskLocation, setTaskLocation] = useState("");
+    const [maxParticipants, setMaxParticipants] = useState("");
+    const [startTime, setStartTime] = useState("");
+    const [endTime, setEndTime] = useState("");
+
 
     useEffect(() => {
         (async () => {
@@ -42,6 +52,31 @@ function EventDetail() {
         }
     }
 
+    const createTask = async () => {
+        const success = await createTaskApi({
+            eventId: id,
+            name: taskName,
+            description: taskDescription,
+            start: startTime,
+            end: endTime,
+            location: taskLocation,
+            maxParticipants,
+        });
+
+        if (success) {
+            setOpenTaskModal(false);
+            setTaskName("");
+            setTaskDescription("");
+            setTaskLocation("");
+            setMaxParticipants("");
+            setStartTime("");
+            setEndTime("");
+        } else {
+            console.log("⚠️ Échec de la création de la task");
+        }
+    };
+
+
     return (
         <div className={styles.allContent}>
             <div className={`glassCard`}>
@@ -54,7 +89,10 @@ function EventDetail() {
                                 <p>{event && formatDateLetter(event.start)}</p>
                                 <p>{event?.description}</p>
                             </div>
-                            {user?.isAdmin && <Button variant={"danger"} className={styles.deleteEventBtn} onClick={handleDelete}>Supprimer</Button>}
+                            {user?.isAdmin && <div className={styles.manageEvent}>
+                                <Button variant={"danger"} className={styles.manageBtn} onClick={handleDelete}>Supprimer</Button>
+                                <Button variant={"default"} className={styles.manageBtn} onClick={() => setOpenTaskModal(true)}>Créer tâche</Button>
+                            </div>}
                         </div>
                     </div>
                 </div>
@@ -74,6 +112,70 @@ function EventDetail() {
                     <Button variant={"default"} onClick={delEvent}>Confirmer</Button>
                 </div>
             </Modal>
+
+            <Modal open={openTaskModal} onClose={() => setOpenTaskModal(false)} title={"Créer tâche"}>
+                <div className={styles.modalContent}>
+
+                    <div>
+                        <p>Nom de la tâche</p>
+                        <TextInput
+                            value={taskName}
+                            onChange={(e) => setTaskName(e.target.value)}
+                            placeholder="Nom de la tâche"
+                        />
+                    </div>
+
+                    <div>
+                        <p>Description</p>
+                        <TextInput
+                            value={taskDescription}
+                            onChange={(e) => setTaskDescription(e.target.value)}
+                            placeholder="Description de la tâche"
+                        />
+                    </div>
+
+                    <div>
+                        <p>Lieu</p>
+                        <TextInput
+                            value={taskLocation}
+                            onChange={(e) => setTaskLocation(e.target.value)}
+                            placeholder="Lieu"
+                        />
+                    </div>
+
+                    <div>
+                        <p>Nombre maximum de participants</p>
+                        <TextInput
+                            type="number"
+                            value={maxParticipants}
+                            onChange={(e) => setMaxParticipants(e.target.value)}
+                            placeholder="Participants max"
+                        />
+                    </div>
+
+                    <div>
+                        <p>Heure de début</p>
+                        <TextInput
+                            type="datetime-local"
+                            value={startTime}
+                            onChange={(e) => setStartTime(e.target.value)}
+                        />
+                    </div>
+
+                    <div>
+                        <p>Heure de fin</p>
+                        <TextInput
+                            type="datetime-local"
+                            value={endTime}
+                            onChange={(e) => setEndTime(e.target.value)}
+                        />
+                    </div>
+
+                    <Button variant="default" onClick={createTask}> Créer la tâche </Button>
+
+                </div>
+            </Modal>
+
         </div>
     );
 }

src/pages/eventDetail/eventDetail.module.css

@@ -52,7 +52,7 @@
     justify-content: space-between;
 }
 
-.deleteEventBtn {
+.manageBtn {
     height: fit-content;
 }
 
@@ -62,3 +62,9 @@
     align-items: center;
     gap: 24px;
 }
+
+.manageEvent {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}

src/utils/tasks/createTask.js

@@ -0,0 +1,49 @@
+import getXSRFToken from "../getXSRF.js";
+
+export default async function createTask({
+                                             eventId,
+                                             name,
+                                             description,
+                                             start,
+                                             end,
+                                             location,
+                                             maxParticipants,
+                                         }) {
+    const csrfToken = await getXSRFToken();
+
+    try {
+        const res = await fetch(
+            `${import.meta.env.VITE_API_URL}/api/events/task`,
+            {
+                method: "POST",
+                credentials: "include",
+                headers: {
+                    Accept: "application/json",
+                    "Content-Type": "application/json",
+                    "X-XSRF-TOKEN": csrfToken,
+                },
+                body: JSON.stringify({
+                    event_id: eventId,
+                    name,
+                    description,
+                    start,
+                    end,
+                    location,
+                    max_participants: maxParticipants,
+                }),
+            }
+        );
+
+        if (!res.ok) {
+            const errorData = await res.json();
+            return false;
+        }
+
+        const data = await res.json();
+        return true;
+
+    } catch (err) {
+        console.log("❌ Erreur réseau :", err);
+        return false;
+    }
+}