✨ Change roles in collaborators

src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx

@@ -1,16 +1,17 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
-import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
+import Users from "@Front/Api/LeCoffreApi/Admin/Users/Users";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
 import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultCollaboratorDashboard from "@Front/Components/LayoutTemplates/DefaultCollaboratorDashboard";
 import Module from "@Front/Config/Module";
-import User from "le-coffre-resources/dist/Notary";
+import User, { OfficeRole } from "le-coffre-resources/dist/Admin";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import classes from "./classes.module.scss";
 
@@ -22,6 +23,56 @@ export default function CollaboratorInformations(props: IProps) {
 	const [userSelected, setUserSelected] = useState<User | null>(null);
 	const [availableRoles, setAvailableRoles] = useState<IOption[]>([]);
 
+	const [roleModalOpened, setRoleModalOpened] = useState<boolean>(false);
+	const [adminModalOpened, setAdminModalOpened] = useState<boolean>(false);
+
+	const [selectedOption, setSelectedOption] = useState<IOption | null>(null);
+
+	const handleRoleChange = useCallback((option: IOption) => {
+		setSelectedOption(option);
+		setRoleModalOpened(true);
+	}, []);
+
+	const closeRoleModal = useCallback(() => {
+		setRoleModalOpened(false);
+		setSelectedOption({
+			value: userSelected?.office_role ? userSelected?.office_role?.uid : userSelected?.role?.uid,
+			label: userSelected?.office_role ? userSelected?.office_role?.name : userSelected?.role?.name!,
+		});
+	}, [userSelected?.office_role, userSelected?.role?.name, userSelected?.role?.uid]);
+
+	const changeRole = useCallback(async () => {
+		await Users.getInstance().put(
+			userSelected?.uid as string,
+			User.hydrate<User>({
+				office_role: OfficeRole.hydrate<OfficeRole>({
+					uid: selectedOption?.value as string,
+				}),
+			}),
+		);
+		setRoleModalOpened(false);
+	}, [selectedOption, userSelected]);
+
+	const changeAdmin = useCallback(async () => {
+		await Users.getInstance().put(
+			userSelected?.uid as string,
+			User.hydrate<User>({
+				office_role: OfficeRole.hydrate<OfficeRole>({
+					uid: selectedOption?.value as string,
+				}),
+			}),
+		);
+		setRoleModalOpened(false);
+	}, [selectedOption, userSelected]);
+
+	const openAdminModal = useCallback(() => {
+		setAdminModalOpened(true);
+	}, []);
+
+	const closeAdminModal = useCallback(() => {
+		setAdminModalOpened(false);
+	}, []);
+
 	useEffect(() => {
 		async function getUser() {
 			if (!collaboratorUid) return;
@@ -38,6 +89,10 @@ export default function CollaboratorInformations(props: IProps) {
 			if (!roles) return;
 			setAvailableRoles(roles.map((role) => ({ value: role.uid, label: role.name })));
 			setUserSelected(user);
+			setSelectedOption({
+				value: user?.office_role ? user?.office_role?.uid : user?.role?.uid,
+				label: user?.office_role ? user?.office_role?.name : user?.role?.name!,
+			});
 		}
 
 		getUser();
@@ -96,14 +151,13 @@ export default function CollaboratorInformations(props: IProps) {
 							placeholder="Rôle"
 							name="role"
 							options={availableRoles}
-							selectedOption={{
-								value: userSelected?.office_role ? userSelected?.office_role?.uid : userSelected?.role?.uid,
-								label: userSelected?.office_role ? userSelected?.office_role?.name : userSelected?.role?.name!,
-							}}
+							selectedOption={selectedOption!}
+							onChange={handleRoleChange}
 						/>
 					</div>
 					<div className={classes["third-line"]}>
 						<CheckBox
+							onChange={openAdminModal}
 							option={{
 								value: "1",
 								label: "Nommer administrateur de l'office",
@@ -112,6 +166,35 @@ export default function CollaboratorInformations(props: IProps) {
 						/>
 					</div>
 				</div>
+				<Confirm
+					isOpen={roleModalOpened}
+					onClose={closeRoleModal}
+					onAccept={changeRole}
+					closeBtn
+					header={"Changement de rôle"}
+					confirmText={"Valider"}
+					cancelText={"Annuler"}>
+					<div className={classes["modal-content"]}>
+						<Typography typo={ITypo.P_16} className={classes["text"]}>
+							Attributer le rôle de <span className={classes["role-name"]}>{selectedOption?.label}</span> à{" "}
+							{userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ?
+						</Typography>
+					</div>
+				</Confirm>
+				<Confirm
+					isOpen={adminModalOpened}
+					onClose={closeAdminModal}
+					onAccept={changeAdmin}
+					closeBtn
+					header={"Changement de rôle"}
+					confirmText={"Valider"}
+					cancelText={"Annuler"}>
+					<div className={classes["modal-content"]}>
+						<Typography typo={ITypo.P_16} className={classes["text"]}>
+							Attributer le rôle d'administrateur à {userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ?
+						</Typography>
+					</div>
+				</Confirm>
 			</div>
 		</DefaultCollaboratorDashboard>
 	);