fix(ui-commons): display a popup to warn of unsaved modifications on …

…Form (#2071)
AntaresSimulatorTeam · Jun 18, 2024 · 3da72c1 · 3da72c1
1 parent 605713d
commit 3da72c1
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/webapp/public/locales/en/main.json b/webapp/public/locales/en/main.json
@@ -123,6 +123,7 @@
   "maintenance.error.maintenanceError": "Unable to retrieve maintenance status",
   "form.submit.error": "Error while submitting",
   "form.submit.inProgress": "The form is being submitted. Are you sure you want to leave the page?",
+  "form.changeNotSaved": "The form has not been saved. Are you sure you want to leave the page?",
   "form.asyncDefaultValues.error": "Failed to get values",
   "form.field.required": "Field required",
   "form.field.duplicate": "Value already exists",

diff --git a/webapp/public/locales/fr/main.json b/webapp/public/locales/fr/main.json
@@ -123,6 +123,7 @@
   "maintenance.error.maintenanceError": "Impossible de récupérer le status de maintenance de l'application",
   "form.submit.error": "Erreur lors de la soumission",
   "form.submit.inProgress": "Le formulaire est en cours de soumission. Etes-vous sûr de vouloir quitter la page ?",
+  "form.changeNotSaved": "Le formulaire n'a pas été sauvegardé. Etes-vous sûr de vouloir quitter la page ?",
   "form.asyncDefaultValues.error": "Impossible d'obtenir les valeurs",
   "form.field.required": "Champ requis",
   "form.field.duplicate": "Cette valeur existe déjà",

diff --git a/webapp/src/components/common/Form/index.tsx b/webapp/src/components/common/Form/index.tsx
@@ -115,10 +115,12 @@ function Form<TFieldValues extends FieldValues, TContext>(
   const enqueueErrorSnackbar = useEnqueueErrorSnackbar();
   const { t } = useTranslation();
   const autoSubmitConfig = toAutoSubmitConfig(autoSubmit);
+
   const [showAutoSubmitLoader, setShowAutoSubmitLoader] = useDebouncedState(
     false,
     750,
   );
+
   const fieldAutoSubmitListeners = useRef<
     Record<string, ((v: any) => any | Promise<any>) | undefined>
   >({});
@@ -129,6 +131,7 @@ function Form<TFieldValues extends FieldValues, TContext>(
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   const submitSuccessfulCb = useRef(() => {});
   const preventClose = useRef(false);
+
   const contextValue = useMemo(
     () => ({ isAutoSubmitEnabled: autoSubmitConfig.enable }),
     [autoSubmitConfig.enable],
@@ -224,6 +227,9 @@ function Form<TFieldValues extends FieldValues, TContext>(
       if (preventClose.current) {
         // eslint-disable-next-line no-param-reassign
         event.returnValue = t("form.submit.inProgress");
+      } else if (isDirty) {
+        // eslint-disable-next-line no-param-reassign
+        event.returnValue = t("form.changeNotSaved");
       }
     };
 
@@ -232,13 +238,14 @@ function Form<TFieldValues extends FieldValues, TContext>(
     return () => {
       window.removeEventListener("beforeunload", listener);
     };
-  }, [t]);
+  }, [t, isDirty]);
 
   useUpdateEffect(() => onStateChange?.(formState), [formState]);
 
   useEffect(() => setRef(apiRef, formApiPlus));
 
   usePrompt(t("form.submit.inProgress"), preventClose.current);
+  usePrompt(t("form.changeNotSaved"), isDirty);
 
   ////////////////////////////////////////////////////////////////
   // Submit