✨ Validation popup on rules modifying

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

@@ -163,6 +163,7 @@ export default function CollaboratorInformations(props: IProps) {
 								label: "Nommer administrateur de l'office",
 							}}
 							toolTip="blabla"
+							checked={userSelected?.office_role?.name! === "admin"}
 						/>
 					</div>
 				</div>

src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx

@@ -158,7 +158,7 @@ export default function DeedTypesInformations(props: IProps) {
 				</div>
 				<div className={classes["delete-container"]}>
 					<Button variant={EButtonVariant.GHOST} onClick={openDeleteModal}>
-						Archiver
+						Supprimer
 					</Button>
 				</div>
 				<Confirm
@@ -166,12 +166,12 @@ export default function DeedTypesInformations(props: IProps) {
 					onClose={closeDeleteModal}
 					onAccept={deleteDeedType}
 					closeBtn
-					header={"Archiver le type d'acte ?"}
+					header={"Supprimer le type d'acte ?"}
 					confirmText={"Valider"}
 					cancelText={"Annuler"}>
 					<div className={classes["modal-content"]}>
 						<Typography typo={ITypo.P_16} className={classes["text"]}>
-							Êtes-vous sûr de vouloir archiver ce type d'acte ?
+							Êtes-vous sûr de vouloir supprimer ce type d'acte ?
 						</Typography>
 					</div>
 				</Confirm>

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

@@ -3,11 +3,13 @@ import Rules from "@Front/Api/LeCoffreApi/Admin/Rules/Rules";
 import Button from "@Front/Components/DesignSystem/Button";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
 import Form from "@Front/Components/DesignSystem/Form";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultRoleDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard";
 import { Role, Rule } from "le-coffre-resources/dist/Admin";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
+import React from "react";
 
 import classes from "./classes.module.scss";
 
@@ -22,6 +24,17 @@ export default function RolesInformations(props: IProps) {
 	const [roleSelected, setRoleSelected] = useState<Role | null>(null);
 	const [rulesCheckboxes, setRulesCheckboxes] = useState<RuleCheckbox[]>([]);
 	const [selectAll, setSelectAll] = useState<boolean>(false);
+
+	const [isConfirmModalOpened, setIsConfirmModalOpened] = useState<boolean>(false);
+
+	const openConfirmModal = useCallback(() => {
+		setIsConfirmModalOpened(true);
+	}, []);
+
+	const closeConfirmModal = useCallback(() => {
+		setIsConfirmModalOpened(false);
+	}, []);
+
 	useEffect(() => {
 		setSelectAll(false);
 		async function getUser() {
@@ -64,20 +77,17 @@ export default function RolesInformations(props: IProps) {
 		[rulesCheckboxes],
 	);
 
-	const onSubmitHandler = useCallback(
+	const modifyRules = useCallback(async () => {
-		async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
+		if (!roleSelected || !roleSelected.uid) return;
-			if (!roleSelected || !roleSelected.uid) return;
+		const rules = rulesCheckboxes.filter((rule) => rule.checked)?.map((rule) => Rule.hydrate<Rule>(rule));
-			const rules = rulesCheckboxes.filter((rule) => rule.checked)?.map((rule) => Rule.hydrate<Rule>(rule));
+		const role = await Roles.getInstance().put(roleSelected.uid, {
-			const role = await Roles.getInstance().put(roleSelected.uid, {
+			rules,
-				rules,
+		});
-			});
+		if (!role) return;
-			if (!role) return;
+		setRoleSelected(role);
-			setRoleSelected(role);
+		if (!role.rules) return;
-			if (!role.rules) return;
+		setRulesCheckboxes(role.rules.map((rule) => ({ ...rule, checked: false })));
-			setRulesCheckboxes(role.rules.map((rule) => ({ ...rule, checked: false })));
+	}, [roleSelected, rulesCheckboxes]);
-		},
-		[roleSelected, rulesCheckboxes],
-	);
 
 	return (
 		<DefaultRoleDashboard mobileBackText={"Liste des rôles"}>
@@ -103,7 +113,7 @@ export default function RolesInformations(props: IProps) {
 							checked={selectAll}
 						/>
 					</div>
-					<Form onSubmit={onSubmitHandler}>
+					<Form>
 						<div className={classes["rights"]}>
 							{rulesCheckboxes.map((rule) => (
 								<div className={classes["right"]} key={rule.uid}>
@@ -112,10 +122,24 @@ export default function RolesInformations(props: IProps) {
 							))}
 						</div>
 						<div className={classes["save-container"]}>
-							<Button type="submit">Enregistrer</Button>
+							<Button onClick={openConfirmModal}>Enregistrer</Button>
 						</div>
 					</Form>
 				</div>
+				<Confirm
+					isOpen={isConfirmModalOpened}
+					onClose={closeConfirmModal}
+					onAccept={modifyRules}
+					closeBtn
+					header={"Êtes-vous sûr d'enregistrer ?"}
+					confirmText={"Valider"}
+					cancelText={"Annuler"}>
+					<div className={classes["modal-content"]}>
+						<Typography typo={ITypo.P_16} className={classes["text"]}>
+							En enregistrant vous modifier les droits des rôles.
+						</Typography>
+					</div>
+				</Confirm>
 			</div>
 		</DefaultRoleDashboard>
 	);