64 lines
2.2 KiB
React
64 lines
2.2 KiB
React
import Button from "../ui/button/button.jsx";
|
|
import Modal from "../ui/modal/modal.jsx";
|
|
import { useState, useEffect } from "react";
|
|
import styles from "./manageMember.module.css"
|
|
import DeleteMemberBtn from "./deleteMember/deleteMemberBtn.jsx";
|
|
import getRoles from "../../utils/getRoles.js"
|
|
import modifyRole from "../../utils/users/modifyRole.js";
|
|
|
|
export default function ManageMember({ user }) {
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const [roles, setRoles] = useState([]);
|
|
const [selectedRole, setSelectedRole] = useState(3);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
|
|
getRoles().then(data => {
|
|
if (data) setRoles(data);
|
|
});
|
|
}, [open]);
|
|
|
|
const handleRoleUpdate = async () => {
|
|
const res = await modifyRole(selectedRole, user.id);
|
|
console.log(res);
|
|
};
|
|
|
|
return <>
|
|
<Button onClick={() => setOpen(true)} variant={"default"} className={styles.manageBtn}>
|
|
<img src="/icons/tools.svg" alt="tools icon" className={styles.icon} />
|
|
<p>Gérer</p>
|
|
</Button>
|
|
|
|
<Modal open={open} onClose={() => setOpen(false)} title={`Gestion de l'utilisateur ${user.name}`}>
|
|
|
|
<div className={styles.manageSection}>
|
|
<h3>Supprimer le compte</h3>
|
|
<DeleteMemberBtn name={user.name} id={user.id} className={styles.manageBlockContent} />
|
|
</div>
|
|
|
|
<div className={styles.manageSection}>
|
|
<h3>Modifier le rôle</h3>
|
|
|
|
<div className={`${styles.manageBlockContent} ${styles.modifyRole}`}>
|
|
<select
|
|
value={selectedRole}
|
|
onChange={(e) => setSelectedRole(e.target.value)}
|
|
className={styles.select}
|
|
>
|
|
{roles.map((role, index) => (
|
|
<option key={index} value={index+1}>
|
|
{role}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
<Button onClick={handleRoleUpdate} variant={"default"}>
|
|
Enregistrer
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</>
|
|
} |