✨ Quitter sans enregistrer

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

@@ -3,18 +3,22 @@ import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
 import Module from "@Front/Config/Module";
 import JwtService from "@Front/Services/JwtService/JwtService";
 import { DeedType, Office } from "le-coffre-resources/dist/Admin";
 import { useRouter } from "next/router";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 
 import classes from "./classes.module.scss";
 
 type IProps = {};
 export default function DeedTypesCreate(props: IProps) {
+	const [hasChanged, setHasChanged] = useState<boolean>(false);
+	const [isConfirmModalVisible, setIsConfirmModalVisible] = useState<boolean>(false);
+
 	const router = useRouter();
 	const onSubmitHandler = useCallback(
 		async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
@@ -42,20 +46,58 @@ export default function DeedTypesCreate(props: IProps) {
 		[router],
 	);
 
+	const closeConfirmModal = useCallback(() => {
+		setIsConfirmModalVisible(false);
+	}, []);
+
+		const onFieldChange = useCallback((name: string, field: any) => {
+			setHasChanged(true);
+		}, []);
+
+		const redirect = useCallback(() => {
+			router.push(
+				Module.getInstance()
+					.get()
+					.modules.pages.DeedTypes.props.path
+			);
+		}, [router]);
+
+		const onCancel = useCallback(() => {
+			if (hasChanged) {
+				setIsConfirmModalVisible(true);
+			} else {
+				redirect();
+			}
+		}, [hasChanged, redirect]);
+
 	return (
 		<DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"} hasBackArrow title="Créer un type d'acte">
 			<div className={classes["root"]}>
 				<div className={classes["header"]}>
 					<Typography typo={ITypo.H1Bis}>Créer un type d'acte</Typography>
 				</div>
-				<Form onSubmit={onSubmitHandler} className={classes["form-container"]}>
+				<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
 					<TextField name="name" placeholder="Nom de l'acte" />
 					<TextAreaField name="description" placeholder="Description" />
 					<div className={classes["buttons-container"]}>
-						<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+						<Button variant={EButtonVariant.GHOST} onClick={onCancel}>Annuler</Button>
 						<Button type="submit">Créer le type d'acte</Button>
 					</div>
 				</Form>
+				<Confirm
+					isOpen={isConfirmModalVisible}
+					onClose={closeConfirmModal}
+					onAccept={redirect}
+					closeBtn
+					header={"Êtes-vous sur de vouloir quitter sans enregistrer ?"}
+					cancelText={"Annuler"}
+					confirmText={"Quitter"}>
+					<div className={classes["modal-content"]}>
+						<Typography typo={ITypo.P_16} className={classes["text"]}>
+							Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
+						</Typography>
+					</div>
+				</Confirm>
 			</div>
 		</DefaultDeedTypesDashboard>
 	);

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

@@ -3,6 +3,7 @@ import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
 import Module from "@Front/Config/Module";
@@ -17,8 +18,11 @@ export default function DeedTypesEdit() {
 	let { deedTypeUid } = router.query;
 
 	const [deedTypeSelected, setDeedTypeSelected] = useState<DeedType | null>(null);
+	const [hasChanged, setHasChanged] = useState<boolean>(false);
+	const [isConfirmModalVisible, setIsConfirmModalVisible] = useState<boolean>(false);
 
 	useEffect(() => {
+		setHasChanged(false);
 		async function getDeedType() {
 			if (!deedTypeUid) return;
 			const deedType = await DeedTypes.getInstance().getByUid(deedTypeUid as string, {
@@ -32,6 +36,10 @@ export default function DeedTypesEdit() {
 		getDeedType();
 	}, [deedTypeUid]);
 
+	const closeConfirmModal = useCallback(() => {
+		setIsConfirmModalVisible(false);
+	}, []);
+
 	const onSubmitHandler = useCallback(
 		async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
 			try {
@@ -55,20 +63,56 @@ export default function DeedTypesEdit() {
 		[deedTypeUid, router],
 	);
 
+	const onFieldChange = useCallback((name: string, field: any) => {
+		setHasChanged(true);
+	}, []);
+
+	const redirect = useCallback(() => {
+		router.push(
+			Module.getInstance()
+				.get()
+				.modules.pages.DeedTypes.pages.DeedTypesInformations.props.path.replace("[uid]", deedTypeUid as string),
+		);
+	}, [deedTypeUid, router]);
+
+	const onCancel = useCallback(() => {
+		if (hasChanged) {
+			setIsConfirmModalVisible(true);
+		} else {
+			redirect();
+		}
+	}, [hasChanged, redirect]);
+
 	return (
 		<DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"} hasBackArrow title="Modifier les informations d'un acte">
 			<div className={classes["root"]}>
 				<div className={classes["header"]}>
 					<Typography typo={ITypo.H1Bis}>Modifier les informations de l'acte</Typography>
 				</div>
-				<Form onSubmit={onSubmitHandler} className={classes["form-container"]}>
+				<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
 					<TextField name="name" placeholder="Nom de l'acte" defaultValue={deedTypeSelected?.name} />
 					<TextAreaField name="description" placeholder="Description" defaultValue={deedTypeSelected?.description} />
 					<div className={classes["buttons-container"]}>
-						<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+						<Button variant={EButtonVariant.GHOST} onClick={onCancel}>
+							Annuler
+						</Button>
 						<Button type="submit">Enregistrer</Button>
 					</div>
 				</Form>
+				<Confirm
+					isOpen={isConfirmModalVisible}
+					onClose={closeConfirmModal}
+					onAccept={redirect}
+					closeBtn
+					header={"Êtes-vous sur de vouloir quitter sans enregistrer ?"}
+					cancelText={"Annuler"}
+					confirmText={"Quitter"}>
+					<div className={classes["modal-content"]}>
+						<Typography typo={ITypo.P_16} className={classes["text"]}>
+							Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
+						</Typography>
+					</div>
+				</Confirm>
 			</div>
 		</DefaultDeedTypesDashboard>
 	);