71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
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>
|
|
</>
|
|
} |