front: fix project/study/scenario modal closing

front/public/locales/en/translation.json

@@ -19,6 +19,7 @@
     "help-display": "Show help",
     "help-legend": "Show legend",
     "itinerary": "Route",
+    "leaveEditionMode":"You are about to exit edit mode, any unsaved changes will be lost.",
     "loading": "Loading...",
     "next": "Next",
     "no": "No",

front/public/locales/fr/rollingstock.json

@@ -52,7 +52,6 @@
   "legend": "Légende",
   "length": "Longueur",
   "listDisabled": "Veuillez quitter l'éditeur pour modifier la séléction",
-  "leaveEditionMode": "Vous êtes sur le point de quitter le mode édition. Toute modification non sauvegardée sera perdue.",
   "loadingGauge": "Gabarit",
   "locked": "Verrouillé",
   "mass": "Masse",

front/public/locales/fr/translation.json

@@ -19,6 +19,7 @@
     "help-display": "Afficher l'aide",
     "help-legend": "Afficher la légende",
     "itinerary": "Itinéraire",
+    "leaveEditionMode": "Vous êtes sur le point de quitter le mode édition, toute modification non sauvegardée sera perdue.",
     "loading": "Chargement…",
     "next": "Suivant",
     "no": "Non",

front/src/applications/editor/components/InfraErrors/InfraErrorsList.tsx

@@ -151,7 +151,7 @@ const InfraErrorsList: React.FC<InfraErrorsListProps> = ({ infraID, onErrorClick
                   <InfraErrorBox error={item.information} index={index + 1}>
                     {EDITOAST_TYPES.includes(item.information.obj_type) && (
                       <button
-                        className="dropdown-item no-close-modal"
+                        className="dropdown-item"
                         type="button"
                         title={t('Editor.infra-errors.list.goto-error')}
                         onClick={() => {

front/src/applications/operationalStudies/views/Project.tsx

@@ -196,7 +196,11 @@ export default function Project() {
                           className="project-details-title-modify-button"
                           type="button"
                           onClick={() =>
-                            openModal(<AddOrEditProjectModal editionMode project={project} />, 'xl')
+                            openModal(
+                              <AddOrEditProjectModal editionMode project={project} />,
+                              'xl',
+                              'no-close-modal'
+                            )
                           }
                         >
                           <span className="project-details-title-modify-button-text">

front/src/applications/operationalStudies/views/Scenario.tsx

@@ -236,7 +236,11 @@ export default function Scenario() {
                         className="scenario-details-modify-button"
                         type="button"
                         onClick={() =>
-                          openModal(<AddAndEditScenarioModal editionMode scenario={scenario} />)
+                          openModal(
+                            <AddAndEditScenarioModal editionMode scenario={scenario} />,
+                            'xl',
+                            'no-close-modal'
+                          )
                         }
                         title={t('editScenario')}
                       >

front/src/applications/operationalStudies/views/Study.tsx

@@ -229,7 +229,8 @@ export default function Study() {
                             } as StudyForm
                           }
                         />,
-                        'xl'
+                        'xl',
+                        'no-close-modal'
                       )
                     }
                   >

front/src/applications/rollingStockEditor/views/RollingStockEditor.tsx

@@ -133,7 +133,7 @@ export default function RollingStockEditor({ rollingStocks }: RollingStockEditor
             onClick={() => {
               openModal(
                 <RollingStockEditorFormModal
-                  mainText={t('leaveEditionMode')}
+                  mainText={t('translation:common.leaveEditionMode')}
                   request={() => {
                     setIsAdding(false);
                     setIsEditing(false);

front/src/common/BootstrapSNCF/ModalSNCF/ModalProvider.tsx

@@ -12,6 +12,7 @@ import React, {
 } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import cx from 'classnames';
+import useOutsideClick from 'utils/hooks/useOutsideClick';
 
 /**
  * Type of the modal context
@@ -48,27 +49,7 @@ export const ModalSNCF: FC = () => {
   const modalRef = useRef<HTMLDivElement | null>(null);
   const { isOpen, content, closeModal, size, className } = useContext(ModalContext);
 
-  /**
-   * Register click outside event to close the modal.
-   */
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        event.target &&
-        isOpen &&
-        modalRef.current &&
-        !(event.target as HTMLElement).classList.contains('no-close-modal') &&
-        !modalRef.current.contains(event.target as HTMLElement)
-      ) {
-        closeModal();
-      }
-    };
-
-    document.body.addEventListener('mousedown', handleClickOutside);
-    return function cleanup() {
-      document.body.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen, closeModal]);
+  useOutsideClick(modalRef, closeModal, isOpen);
 
   if (!content) {
     return null;

front/src/modules/project/components/AddOrEditProjectModal.tsx

@@ -31,8 +31,12 @@ import type { ProjectWithStudies, ProjectCreateForm } from 'common/api/osrdEdito
 import { setFailure, setSuccess } from 'reducers/main';
 import { getUserSafeWord } from 'reducers/user/userSelectors';
 import useModalFocusTrap from 'utils/hooks/useModalFocusTrap';
+import { ConfirmModal } from 'common/BootstrapSNCF/ModalSNCF';
+import useInputChange from 'utils/hooks/useInputChange';
+import useOutsideClick from 'utils/hooks/useOutsideClick';
 
 const emptyProject: ProjectCreateForm = {
+  budget: undefined,
   description: '',
   funders: '',
   image: null,
@@ -56,8 +60,8 @@ export default function AddOrEditProjectModal({
   project,
   getProject,
 }: AddOrEditProjectModalProps) {
-  const { t } = useTranslation('operationalStudies/project');
-  const { closeModal } = useContext(ModalContext);
+  const { t } = useTranslation(['operationalStudies/project', 'translation']);
+  const { closeModal, isOpen } = useContext(ModalContext);
   const [currentProject, setCurrentProject] = useState<ProjectForm>(project || emptyProject);
   const [tempProjectImage, setTempProjectImage] = useState<Blob | null | undefined>();
 
@@ -72,20 +76,36 @@ export default function AddOrEditProjectModal({
 
   const { updateProjectID } = useOsrdConfActions();
 
-  const modalRef = useRef<HTMLDivElement>(null);
+  const initialValuesRef = useRef<ProjectForm | null>(null);
+
+  const modalRef = useRef<HTMLDivElement | null>(null);
+
+  const { clickedOutside, setHasChanges, resetClickedOutside } = useOutsideClick(
+    modalRef,
+    closeModal,
+    isOpen
+  );
+
+  const handleProjectInputChange = useInputChange(
+    initialValuesRef,
+    setCurrentProject,
+    setHasChanges
+  );
 
   const removeTag = (idx: number) => {
     if (!currentProject.tags) return;
     const newTags = Array.from(currentProject.tags);
     newTags.splice(idx, 1);
     setCurrentProject({ ...currentProject, tags: newTags });
+    handleProjectInputChange('tags', newTags);
   };
 
   const addTag = (tag: string) => {
     if (!currentProject.tags) return;
     const newTags = Array.from(currentProject.tags);
     newTags.push(tag);
     if (currentProject) setCurrentProject({ ...currentProject, tags: newTags });
+    handleProjectInputChange('tags', newTags);
   };
 
   const uploadImage = async (image: Blob): Promise<number | null> => {
@@ -214,6 +234,14 @@ export default function AddOrEditProjectModal({
 
   const debouncedObjectives = useDebounce(currentProject.objectives, 500);
 
+  useEffect(() => {
+    if (project) {
+      initialValuesRef.current = { ...project };
+    } else {
+      initialValuesRef.current = { ...emptyProject };
+    }
+  }, [project]);
+
   useEffect(() => {
     if (safeWord !== '') {
       addTag(safeWord);
@@ -224,6 +252,18 @@ export default function AddOrEditProjectModal({
 
   return (
     <div className="project-edition-modal" ref={modalRef}>
+      {clickedOutside && (
+        <div className="confirm-modal">
+          <div className="confirm-modal-content">
+            <ConfirmModal
+              title={t('common.leaveEditionMode', { ns: 'translation' })}
+              onConfirm={closeModal}
+              onCancel={resetClickedOutside}
+              withCloseButton={false}
+            />
+          </div>
+        </div>
+      )}
       <ModalHeaderSNCF withCloseButton withBorderBottom>
         <h1 className="project-edition-modal-title">
           {editionMode ? t('projectModificationTitle') : t('projectCreationTitle')}
@@ -257,7 +297,7 @@ export default function AddOrEditProjectModal({
                   </div>
                 }
                 value={currentProject.name}
-                onChange={(e) => setCurrentProject({ ...currentProject, name: e.target.value })}
+                onChange={(e) => handleProjectInputChange('name', e.target.value)}
                 isInvalid={displayErrors && !currentProject.name}
                 errorMsg={
                   displayErrors && !currentProject.name ? t('projectNameMissing') : undefined
@@ -276,9 +316,7 @@ export default function AddOrEditProjectModal({
                   </div>
                 }
                 value={currentProject.description}
-                onChange={(e) =>
-                  setCurrentProject({ ...currentProject, description: e.target.value })
-                }
+                onChange={(e) => handleProjectInputChange('description', e.target.value)}
                 placeholder={t('projectDescriptionPlaceholder')}
                 rows={3}
               />
@@ -299,9 +337,7 @@ export default function AddOrEditProjectModal({
                   </div>
                 }
                 value={currentProject.objectives}
-                onChange={(e) =>
-                  setCurrentProject({ ...currentProject, objectives: e.target.value })
-                }
+                onChange={(e) => handleProjectInputChange('objectives', e.target.value)}
               />
             </div>
           </div>
@@ -336,12 +372,7 @@ export default function AddOrEditProjectModal({
                 </div>
               }
               value={currentProject.funders}
-              onChange={(e) =>
-                setCurrentProject({
-                  ...currentProject,
-                  funders: e.target.value,
-                })
-              }
+              onChange={(e) => handleProjectInputChange('funders', e.target.value)}
             />
           </div>
           <div className="col-lg-4">
@@ -361,10 +392,10 @@ export default function AddOrEditProjectModal({
               }
               value={currentProject.budget !== undefined ? currentProject.budget : ''}
               onChange={(e) =>
-                setCurrentProject({
-                  ...currentProject,
-                  budget: e.target.value !== '' ? +e.target.value : undefined,
-                })
+                handleProjectInputChange(
+                  'budget',
+                  e.target.value !== '' ? +e.target.value : undefined
+                )
               }
               textRight
             />

front/src/modules/project/components/ProjectCardEmpty.tsx

@@ -14,7 +14,7 @@ export default function ProjectCard() {
       className="project-card empty"
       role="button"
       tabIndex={0}
-      onClick={() => openModal(<AddOrEditProjectModal />, 'xl')}
+      onClick={() => openModal(<AddOrEditProjectModal />, 'xl', 'no-close-modal')}
     >
       <FaPlus />
       <div className="legend">{t('createProject')}</div>