Create AssignUserBtn component

src/pages/EventDetail/components/AssignUserBtn/AssignUserBtn.module.css

@@ -0,0 +1,23 @@
+.usersList {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+.userCard {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 14px;
+    border-radius: 10px;
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.08);
+}
+
+.userName {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

src/pages/EventDetail/components/AssignUserBtn/AssignUserBtn.tsx

@@ -0,0 +1,71 @@
+import { ReactNode, useEffect, useState } from "react";
+import Button from "../../../../components/ui/Button/Button";
+import Modal from "../../../../components/ui/Modal/Modal";
+import User from "../../../Volunteers/interfaces/user.interface";
+import getAllUser from "../../../../utils/users/getAllUsers";
+import Loading from "../../../../components/ui/Loading/Loading";
+import getUserById from "../../../../utils/users/getUserById";
+import styles from "./AssignUserBtn.module.css";
+
+interface AssignUserBtnProps {
+    taskId: string | number;
+}
+
+export default function AssignUserBtn({ taskId }: AssignUserBtnProps): ReactNode {
+
+    const [open, setOpen] = useState<boolean>(false);
+    const [users, setUsers] = useState<Array<User>>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+
+    useEffect(() => {
+        (async () => {
+            setLoading(true);
+
+            const result = await getAllUser();
+
+            if (result.status !== 200 || !Array.isArray(result.data)) {
+                console.error("Erreur lors du chargement des utilisateurs", result);
+                return;
+            }
+
+            const usersData = await Promise.all(
+                result.data.map(async (id: number): Promise<User | null> => {
+                    const res = await getUserById(id);
+
+                    if (res.status === 200) {
+                        return res.data as User;
+                    }
+
+                    return null;
+                })
+            );
+
+            setUsers(usersData.filter((user): user is User => user !== null));
+            setLoading(false);
+        })();
+    }, []);
+
+    const handleAssign = async (user: User) => {
+
+    };
+
+    return <>
+        <Button variant={"default"} onClick={() => setOpen(true)}>Assigner</Button>
+
+        <Modal open={open} onClose={() => setOpen(false)} title={"Assigner un utilisateur à cette tâche"}>
+            <div className={styles.usersList}>
+                {loading ? <Loading /> : users.map((user: User, index) => (
+                    <div key={index} className={styles.userCard}>
+                        <p className={styles.userName}>
+                            {user.name} {user.lastname}
+                        </p>
+
+                        <Button onClick={() => handleAssign(user)}>
+                            Assigner
+                        </Button>
+                    </div>
+                ))}
+            </div>
+        </Modal>
+    </>
+}

src/pages/EventDetail/components/EventTask/EventTask.tsx

@@ -8,6 +8,7 @@ import isAssigned from "../../../../utils/tasks/isAssigned";
 import Modal from "../../../../components/ui/Modal/Modal";
 import { AuthContext } from "../../../../contexts/Auth/AuthContext";
 import DeleteTaskBtn from "../DeleteTaskBtn/DeleteTaskBtn";
+import AssignUserBtn from "../AssignUserBtn/AssignUserBtn";
 
 type EventTaskProps = {
     task: any;
@@ -108,6 +109,8 @@ export default function EventTask({ task, index, eventId }: EventTaskProps) {
                         taskId={task.id}
                         taskName={task.name}
                     />
+
+                    <AssignUserBtn taskId={task.id} />
                 </div>
             </div>