✨ Editing rules in roles working

src/front/Api/LeCoffreApi/Admin/Roles/Roles.ts

@@ -0,0 +1,83 @@
+import { Role } from "le-coffre-resources/dist/Admin";
+
+import BaseAdmin from "../BaseAdmin";
+
+export type IGetRolesParams = {
+	where?: {};
+	include?: {};
+	select?: {};
+};
+
+export type IPutRoleParams = {
+	uid: Role["uid"];
+	rules: Role["rules"];
+};
+
+export default class Roles extends BaseAdmin {
+	private static instance: Roles;
+	private readonly baseURl = this.namespaceUrl.concat("/roles");
+
+	private constructor() {
+		super();
+	}
+
+	public static getInstance() {
+		if (!this.instance) {
+			return new Roles();
+		} else {
+			return this.instance;
+		}
+	}
+
+	public async get(q?: IGetRolesParams): Promise<Role[]> {
+		const url = new URL(this.baseURl);
+		if (q) {
+			const query = { q };
+			Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
+		}
+		try {
+			return await this.getRequest<Role[]>(url);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+
+	public async getOne(q?: IGetRolesParams): Promise<Role | null> {
+		const url = new URL(this.baseURl);
+		if (q) {
+			const query = { q };
+			Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
+		}
+		try {
+			const res = await this.getRequest<Role[]>(url);
+			if (!res) return null;
+			if (res.length > 1) throw new Error("More than one role found");
+			return res[0] ? res[0] : null;
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+
+	public async getByUid(uid: string, q?: any): Promise<Role> {
+		const url = new URL(this.baseURl.concat(`/${uid}`));
+		if (q) Object.entries(q).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
+		try {
+			return await this.getRequest<Role>(url);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+
+	public async put(uid: string, body: IPutRoleParams): Promise<Role> {
+		const url = new URL(this.baseURl.concat(`/${uid}`));
+		try {
+			return await this.putRequest<Role>(url, body);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+}

src/front/Components/LayoutTemplates/DefaultRoleDashboard/index.tsx

@@ -90,7 +90,6 @@ export default class DefaultRoleDashboard extends React.Component<IProps, IState
 		};
 
 		const roles = await OfficeRoles.getInstance().get(query);
-		console.log(roles);
 
 		this.setState({ roles });
 	}

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

@@ -1,5 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
+import Roles from "@Front/Api/LeCoffreApi/Admin/Roles/Roles";
 import Users from "@Front/Api/LeCoffreApi/Admin/Users/Users";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
@@ -55,16 +56,23 @@ export default function CollaboratorInformations(props: IProps) {
 	}, [selectedOption, userSelected]);
 
 	const changeAdmin = useCallback(async () => {
+		const adminRole = await Roles.getInstance().getOne({
+			where: {
+				name: "admin",
+			},
+		});
+
+		if (!adminRole) return;
 		await Users.getInstance().put(
 			userSelected?.uid as string,
 			User.hydrate<User>({
-				office_role: OfficeRole.hydrate<OfficeRole>({
+				uid: userSelected?.uid as string,
-					uid: selectedOption?.value as string,
+				office_role: undefined,
-				}),
+				role: adminRole,
 			}),
 		);
 		setRoleModalOpened(false);
-	}, [selectedOption, userSelected]);
+	}, [userSelected]);
 
 	const openAdminModal = useCallback(() => {
 		setAdminModalOpened(true);
@@ -154,19 +162,22 @@ export default function CollaboratorInformations(props: IProps) {
 							options={availableRoles}
 							selectedOption={selectedOption!}
 							onChange={handleRoleChange}
+							disabled={userSelected?.role?.name === "super-admin"}
 						/>
 					</div>
-					<div className={classes["third-line"]}>
+					{userSelected?.role?.name !== "super-admin" && (
-						<CheckBox
+						<div className={classes["third-line"]}>
-							onChange={openAdminModal}
+							<CheckBox
-							option={{
+								onChange={openAdminModal}
-								value: "1",
+								option={{
-								label: "Nommer administrateur de l'office",
+									value: "1",
-							}}
+									label: "Nommer administrateur de l'office",
-							toolTip="blabla"
+								}}
-							checked={userSelected?.office_role?.name! === "admin"}
+								toolTip="blabla"
-						/>
+								checked={userSelected?.role?.name === "admin" && !userSelected.office_role}
-					</div>
+							/>
+						</div>
+					)}
 				</div>
 				<Confirm
 					isOpen={roleModalOpened}

src/front/Components/Layouts/Roles/RolesInformations/index.tsx

@@ -80,15 +80,30 @@ export default function RolesInformations(props: IProps) {
 	const modifyRules = useCallback(async () => {
 		if (!roleSelected || !roleSelected.uid) return;
 		const rules = rulesCheckboxes.filter((rule) => rule.checked)?.map((rule) => Rule.hydrate<Rule>(rule));
-		const role = await OfficeRoles.getInstance().put(roleSelected.uid, {
+		await OfficeRoles.getInstance().put(roleSelected.uid, {
 			uid: roleSelected.uid,
 			rules,
 		});
-		if (!role) return;
+
-		setRoleSelected(role);
+		const roleUpdated = await OfficeRoles.getInstance().getByUid(roleSelected.uid, {
-		if (!role.rules) return;
+			q: {
-		setRulesCheckboxes(role.rules.map((rule) => ({ ...rule, checked: false })));
+				rules: true,
-	}, [roleSelected, rulesCheckboxes]);
+			},
+		});
+		setRoleSelected(roleUpdated);
+		closeConfirmModal();
+	}, [closeConfirmModal, roleSelected, rulesCheckboxes]);
+
+	const handleRuleChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			const ruleUid = e.target.value;
+			const rule = rulesCheckboxes.find((rule) => rule.uid === ruleUid);
+			if (!rule) return;
+			rule.checked = e.target.checked;
+			setRulesCheckboxes([...rulesCheckboxes]);
+		},
+		[rulesCheckboxes],
+	);
 
 	return (
 		<DefaultRoleDashboard mobileBackText={"Liste des rôles"}>
@@ -118,7 +133,11 @@ export default function RolesInformations(props: IProps) {
 						<div className={classes["rights"]}>
 							{rulesCheckboxes.map((rule) => (
 								<div className={classes["right"]} key={rule.uid}>
-									<CheckBox option={{ label: rule.name, value: rule.uid }} checked={rule.checked} />
+									<CheckBox
+										option={{ label: rule.name, value: rule.uid }}
+										checked={rule.checked}
+										onChange={handleRuleChange}
+									/>
 								</div>
 							))}
 						</div>
@@ -137,7 +156,7 @@ export default function RolesInformations(props: IProps) {
 					cancelText={"Annuler"}>
 					<div className={classes["modal-content"]}>
 						<Typography typo={ITypo.P_16} className={classes["text"]}>
-							En enregistrant vous modifier les droits des rôles.
+							En enregistrant vous modifiez les droits des rôles.
 						</Typography>
 					</div>
 				</Confirm>