Rename EventDetails page component files

2026-03-12 14:55:28 +01:00
parent bd9c05f583
commit fc298084cf
8 changed files with 9 additions and 9 deletions
@@ -0,0 +1,116 @@
+import styles from "../../EventDetail.module.css";
+import Button from "../../../../components/ui/Button/Button";
+import {useContext, useState} from "react";
+import TextInput from "../../../../components/ui/Input/Input";
+import Modal from "../../../../components/ui/Modal/Modal";
+import createTaskApi from "../../../../utils/tasks/createTask.js";
+import {EventDetailContext} from "../../../../contexts/EventDetail/EventDetailContext.js";
+
+export default function CreateTaskBtn({ id }) {
+
+    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("");
+
+    const { updateEventInfo } = useContext(EventDetailContext)
+
+    const createTask = async () => {
+        const data = await createTaskApi({
+            eventId: id,
+            name: taskName,
+            description: taskDescription,
+            start: startTime,
+            end: endTime,
+            location: taskLocation,
+            maxParticipants,
+        });
+
+        if (data?.status === 200) {
+            setOpenTaskModal(false);
+            setTaskName("");
+            setTaskDescription("");
+            setTaskLocation("");
+            setMaxParticipants("");
+            setStartTime("");
+            setEndTime("");
+
+            updateEventInfo(id)
+        } else {
+            console.log("⚠️ Échec de la création de la task");
+        }
+    };
+
+    return <>
+
+        <Button variant={"default"} className={styles.manageBtn} onClick={() => setOpenTaskModal(true)}>Créer tâche</Button>
+
+        <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>
+
+    </>
+}
@@ -0,0 +1,42 @@
+import styles from "../../EventDetail.module.css";
+import Button from "../../../../components/ui/Button/Button";
+import Modal from "../../../../components/ui/Modal/Modal";
+import { useContext, useState } from "react";
+import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext.js";
+import { EventContext } from "../../../../contexts/Events/EventContext.js";
+import { useNavigate } from "react-router";
+
+export default function DeleteEventBtn({ id }) {
+
+    const { eventInfo } = useContext(EventDetailContext)
+    const { removeEvent } = useContext(EventContext)
+    const [open, setOpen] = useState(false);
+    const navigate = useNavigate();
+
+    const handleDelete = () => {
+        setOpen(true);
+    }
+
+    const delEvent = async () => {
+        const result = await removeEvent(id);
+
+        if (result.status === 200 || result.status === 204) {
+            setOpen(false);
+            navigate("/events");
+        }
+    }
+
+    return <>
+
+        <Button variant={"danger"} className={styles.manageBtn} onClick={handleDelete}>Supprimer</Button>
+
+        <Modal open={open} onClose={() => setOpen(false)} title={"Suppression"}>
+            <div className={styles.modalContent}>
+                <p>Etes-vous sur de vouloir supprimer l'événement {eventInfo?.name} ?</p>
+
+                <Button variant={"default"} onClick={delEvent}>Confirmer</Button>
+            </div>
+        </Modal>
+
+    </>
+}
@@ -0,0 +1,28 @@
+import { useContext } from "react";
+import { AuthContext } from "../../../../contexts/Auth/AuthContext.js";
+import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext.js";
+import Button from "../../../../components/ui/Button/Button";
+import { useState } from "react";
+import Modal from "../../../../components/ui/Modal/Modal";
+import styles from "../../EventDetail.module.css";
+
+export default function DeleteTaskBtn({ taskId, eventId, taskName }) {
+
+    const { user } = useContext(AuthContext)
+    const { deleteTask } = useContext(EventDetailContext)
+
+    const [openModal, setOpenModal] = useState(false);
+
+    if(!user?.isAdmin) return null;
+
+    return <>
+        <Button variant={"danger"} onClick={() => setOpenModal(true)}> Supprimer </Button>
+
+        <Modal open={openModal} onClose={setOpenModal} title={"Suppression"}>
+            <div className={styles.modalContent}>
+                <p className={styles.modalContent}>Etes-vous sur de vouloir supprimer la tâche {taskName} ? </p>
+                <Button variant={"danger"} onClick={() => { deleteTask(taskId, eventId); setOpenModal(false) }}> Confirmer </Button>
+            </div>
+        </Modal>
+    </>
+}
@@ -0,0 +1,98 @@
+import styles from "./EventTask.module.css";
+import { formatDateLetter } from "../../../../utils/date/formatDateLetter.js";
+import Button from "../../../../components/ui/Button/Button";
+import assign from "../../../../utils/tasks/assign.js";
+import unAssign from "../../../../utils/tasks/unAssign.js";
+import { useContext, useEffect, useState } from "react";
+import isAssigned from "../../../../utils/tasks/isAssigned.js";
+import Modal from "../../../../components/ui/Modal/Modal";
+import { AuthContext } from "../../../../contexts/Auth/AuthContext.js";
+import DeleteTaskBtn from "../DeleteTaskBtn/DeleteTaskBtn.jsx";
+
+export default function EventTask({ task, index, eventId }) {
+
+    const { update } = useContext(AuthContext)
+
+    const [assigned, setAssigned] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [title, setTitle] = useState("");
+    const [message, setMessage] = useState("");
+
+    async function checkAssign() {
+        const data = await isAssigned(task.id);
+        setAssigned(data?.data.assigned);
+    }
+
+    useEffect(() => {
+        checkAssign();
+    }, [])
+
+
+    const handleRegisterBtn = async () => {
+        const res = await assign(task.id);
+
+        switch (res.status) {
+            case 200:
+                update()
+                setTitle("Inscription réussie")
+                setMessage(`Vous êtes maintenant inscrit à la tâche ${task.name}`);
+                setOpen(true);
+                setAssigned(true);
+                break;
+
+            case 409:
+                setTitle("Erreur lors de l'inscription")
+                setMessage("Vous êtes déjà inscrit à cette tâche")
+                setOpen(true);
+                break;
+
+            case 403:
+                setTitle("Erreur lors de l'inscription")
+                setMessage("Le nombre maximum d'inscription pour cette tâche à été atteint")
+                setOpen(true);
+                break;
+        }
+    };
+
+    const handleUnassign = async () => {
+        const res = await unAssign(task.id);
+
+        switch (res.status) {
+            case 200:
+                update()
+                setTitle("Désinscription réussie")
+                setMessage(`Vous n'êtes plus inscrit à la tâche ${task.name}`);
+                setOpen(true);
+                setAssigned(false);
+                break;
+
+            case 409:
+                setTitle("Erreur lors de la désinscription")
+                setMessage(`Vous n'êtes pas inscrit à cette tâche`);
+                setOpen(true);
+                break;
+        }
+    };
+
+    return <div style={{"--i": index}} key={index} className={styles.content}>
+        <div className={styles.task}>
+            <div>
+                <span><strong>{task.name}</strong></span>
+                <p className={styles.taskDate}> {formatDateLetter(task.start)} - {formatDateLetter(task.end)} </p>
+                <p>{task.description}</p>
+            </div>
+            <div className={styles.manageTaskBtn}>
+                {assigned ?
+                    <Button variant={"danger"} onClick={() => handleUnassign()}> Se désinscrire </Button>
+                    :
+                    <Button onClick={() => handleRegisterBtn()}> S’inscrire </Button>
+                }
+                <DeleteTaskBtn eventId={eventId} taskId={task.id} taskName={task.name} />
+            </div>
+        </div>
+
+        <Modal open={open} onClose={setOpen} title={title}>
+            <p className={styles.modalContent}>{message}</p>
+        </Modal>
+    </div>
+}
@@ -0,0 +1,54 @@
+.task {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.taskDate {
+    opacity: 0.5;
+}
+
+.manageTaskBtn {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
+.content {
+    margin: 16px 0px 16px 0px;
+    padding: 10px 20px 10px 20px;
+    border-radius: 20px;
+    border: none;
+    background: transparent;
+    box-shadow:
+            inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
+            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
+            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
+            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
+    opacity: 0;
+    animation: fadeInUp 0.6s ease-out forwards;
+    animation-delay: calc(var(--i) * 0.1s);
+}
+
+.modalContent {
+    text-align: center;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@media screen and (max-width: 768px) {
+
+    .task {
+        flex-direction: column;
+    }
+}