Modify role

src/components/manageMember/ManageMember.jsx

@@ -1,13 +1,29 @@
 import Button from "../ui/button/button.jsx";
 import Modal from "../ui/modal/modal.jsx";
-import { useState } from "react";
+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}>
@@ -21,6 +37,28 @@ export default function ManageMember({ user }) {
                 <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>
     </>
 }

src/components/manageMember/manageMember.module.css

@@ -16,4 +16,28 @@
 
 .manageBlockContent {
     margin: 0.5em;
+}
+
+.modifyRole {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+.select {
+    width: 70%;
+    padding: 10px 14px;
+
+    font-size: 14px;
+    font-weight: 500;
+    color: #1d1d1f;
+
+    background-color: #ffffff;
+    border: 1px solid #d2d2d7;
+    border-radius: 10px;
+
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
 }

src/utils/getRoles.js

@@ -0,0 +1,21 @@
+export default async function getRoles() {
+    try {
+        const res = await fetch(`${import.meta.env.VITE_API_URL}/api/roles`, {
+            method: 'GET',
+            credentials: 'include',
+            headers: {
+                'Accept': 'application/json'
+            }
+        });
+
+        if (!res.ok) {
+            throw new Error(`Erreur serveur : ${res.status}`);
+        }
+
+        const data = await res.json();
+        return data;
+    } catch (err) {
+        console.error('Erreur :', err);
+        return null;
+    }
+}

src/utils/users/modifyRole.js

@@ -0,0 +1,30 @@
+import getXSRFToken from "../getXSRF.js";
+
+export default async function modifyRole(role, userId) {
+
+    const csrfToken = await getXSRFToken();
+
+    try {
+        const res = await fetch(`${import.meta.env.VITE_API_URL}/api/users/${userId}/role`, {
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+                'Accept': 'application/json',
+                'X-XSRF-TOKEN': csrfToken,
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                role: role,
+            })
+        });
+
+        if (!res.ok) {
+            throw new Error(`Erreur serveur : ${res.status}`);
+        }
+
+        return await res.json();
+    } catch (err) {
+        console.error('Erreur :', err);
+        return null;
+    }
+}