dynamic modal

front/src/applications/operationalStudies/Home.tsx

@@ -16,6 +16,7 @@ import { Spinner } from 'common/Loaders';
 import SelectionToolbar from 'common/SelectionToolbar';
 import ProjectCard from 'modules/project/components/ProjectCard';
 import ProjectCardEmpty from 'modules/project/components/ProjectCardEmpty';
+import { cleanScenarioLocalStorage } from 'modules/scenario/helpers/utils';
 import { getUserSafeWord } from 'reducers/user/userSelectors';
 import { getLogo } from 'utils/logo';
 
@@ -29,24 +30,47 @@ type SortOptions =
   | 'LastModifiedAsc'
   | 'LastModifiedDesc';
 
-export default function HomeOperationalStudies() {
+const HomeOperationalStudies = () => {
   const { t } = useTranslation('operationalStudies/home');
   const safeWord = useSelector(getUserSafeWord);
   const [sortOption, setSortOption] = useState<SortOptions>('LastModifiedDesc');
   const [filter, setFilter] = useState('');
   const [filterChips, setFilterChips] = useState('');
   const [deleteProject] = osrdEditoastApi.endpoints.deleteProjectsByProjectId.useMutation();
 
+  const [getStudies] = osrdEditoastApi.endpoints.getProjectsByProjectIdStudies.useLazyQuery();
+  const [getScenarios] =
+    osrdEditoastApi.endpoints.getProjectsByProjectIdStudiesAndStudyIdScenarios.useLazyQuery();
+
   const {
     selectedItemIds: selectedProjectIds,
     setSelectedItemIds: setSelectedProjectIds,
     items: projectsList,
     setItems: setProjectsList,
     toggleSelection: toggleProjectSelection,
     deleteItems,
-  } = useMultiSelection<ProjectWithStudies | SearchResultItemProject>((projectId) => {
+  } = useMultiSelection<ProjectWithStudies | SearchResultItemProject>(async (projectId) => {
+    // For each scenario in the selected projects, clean the local storage if a manchette is saved
+    const { data: studies } = await getStudies({ projectId });
+    if (studies) {
+      const promisedScenarios = studies.results.map(async (study) => {
+        const { data } = await getScenarios({
+          projectId,
+          studyId: study.id,
+        });
+        return data?.results;
+      });
+
+      const scenarios = await Promise.all(promisedScenarios);
+
+      scenarios.flat().forEach((scenario) => {
+        if (scenario) cleanScenarioLocalStorage(scenario.timetable_id);
+      });
+    }
+
     deleteProject({ projectId });
   });
+
   const handleDeleteProjects = () => {
     if (selectedProjectIds.length > 0) {
       deleteItems();
@@ -187,4 +211,6 @@ export default function HomeOperationalStudies() {
       </main>
     </>
   );
-}
+};
+
+export default HomeOperationalStudies;

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

@@ -22,6 +22,7 @@ import OptionsSNCF from 'common/BootstrapSNCF/OptionsSNCF';
 import { Loader, Spinner } from 'common/Loaders';
 import SelectionToolbar from 'common/SelectionToolbar';
 import AddOrEditProjectModal from 'modules/project/components/AddOrEditProjectModal';
+import { cleanScenarioLocalStorage } from 'modules/scenario/helpers/utils';
 import StudyCard from 'modules/study/components/StudyCard';
 import StudyCardEmpty from 'modules/study/components/StudyCardEmpty';
 import { budgetFormat } from 'utils/numbers';
@@ -40,7 +41,7 @@ type ProjectParams = {
   projectId: string;
 };
 
-export default function Project() {
+const Project = () => {
   const { t } = useTranslation(['operationalStudies/project']);
   const { openModal } = useModal();
   const [filter, setFilter] = useState('');
@@ -61,15 +62,46 @@ export default function Project() {
     [urlProjectId]
   );
 
+  const {
+    data: project,
+    isError: isProjectError,
+    error: projectError,
+  } = osrdEditoastApi.endpoints.getProjectsByProjectId.useQuery(
+    { projectId: +projectId! },
+    {
+      skip: !projectId,
+    }
+  );
+
+  const { data: projectStudies } = osrdEditoastApi.endpoints.getProjectsByProjectIdStudies.useQuery(
+    {
+      projectId: Number(projectId),
+      ordering: sortOption,
+      pageSize: 1000,
+    },
+    { skip: !projectId }
+  );
+
+  const [getScenarios] =
+    osrdEditoastApi.endpoints.getProjectsByProjectIdStudiesAndStudyIdScenarios.useLazyQuery();
+
   const {
     selectedItemIds: selectedStudyIds,
     setSelectedItemIds: setSelectedStudyIds,
     items: studiesList,
     setItems: setStudiesList,
     toggleSelection: toggleStudySelection,
     deleteItems,
-  } = useMultiSelection<StudyWithScenarios>((studyId) => {
+  } = useMultiSelection<StudyWithScenarios>(async (studyId) => {
     deleteStudy({ projectId: projectId!, studyId });
+
+    // For each scenario in the selected studies, clean the local storage if a manchette is saved
+    const { data: scenarios } = await getScenarios({ projectId: projectId!, studyId });
+    if (scenarios) {
+      scenarios.results.forEach((scenario) => {
+        cleanScenarioLocalStorage(scenario.timetable_id);
+      });
+    }
   });
 
   const handleDeleteStudy = () => {
@@ -88,26 +120,6 @@ export default function Project() {
     },
   ];
 
-  const {
-    data: project,
-    isError: isProjectError,
-    error: projectError,
-  } = osrdEditoastApi.endpoints.getProjectsByProjectId.useQuery(
-    { projectId: +projectId! },
-    {
-      skip: !projectId,
-    }
-  );
-
-  const { data: projectStudies } = osrdEditoastApi.endpoints.getProjectsByProjectIdStudies.useQuery(
-    {
-      projectId: Number(projectId),
-      ordering: sortOption,
-      pageSize: 1000,
-    },
-    { skip: !projectId }
-  );
-
   const updateImage = async () => {
     if (project?.image) {
       const image = await getDocument(project.image);
@@ -226,7 +238,11 @@ export default function Project() {
                           type="button"
                           onClick={() =>
                             openModal(
-                              <AddOrEditProjectModal editionMode project={project} />,
+                              <AddOrEditProjectModal
+                                editionMode
+                                project={project}
+                                projectStudies={projectStudies?.results}
+                              />,
                               'xl',
                               'no-close-modal'
                             )
@@ -330,4 +346,6 @@ export default function Project() {
       </main>
     </>
   );
-}
+};
+
+export default Project;

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

@@ -69,7 +69,11 @@ const SimulationResults = ({
     infraId
   );
 
-  const projectedOperationalPoints = useGetProjectedTrainOperationalPoints(
+  const {
+    operationalPoints: projectedOperationalPoints,
+    filteredOperationalPoints,
+    setFilteredOperationalPoints,
+  } = useGetProjectedTrainOperationalPoints(
     projectionData?.trainSchedule,
     projectionData?.trainSchedule.id,
     infraId
@@ -153,6 +157,11 @@ const SimulationResults = ({
                   operationalPoints={projectedOperationalPoints}
                   projectPathTrainResult={projectPathTrainResult}
                   selectedTrainScheduleId={selectedTrainSchedule?.id}
+                  waypointsModalData={{
+                    filteredOperationalPoints,
+                    setFilteredOperationalPoints,
+                    projectedTrainPath: projectionData.trainSchedule.path,
+                  }}
                 />
               </div>
             </div>

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

@@ -22,6 +22,7 @@ import { Loader, Spinner } from 'common/Loaders';
 import SelectionToolbar from 'common/SelectionToolbar';
 import ScenarioCard from 'modules/scenario/components/ScenarioCard';
 import ScenarioCardEmpty from 'modules/scenario/components/ScenarioCardEmpty';
+import { cleanScenarioLocalStorage } from 'modules/scenario/helpers/utils';
 import AddOrEditStudyModal from 'modules/study/components/AddOrEditStudyModal';
 import { budgetFormat } from 'utils/numbers';
 
@@ -40,7 +41,7 @@ type studyParams = {
   studyId: string;
 };
 
-export default function Study() {
+const Study = () => {
   const { t } = useTranslation(['operationalStudies/study']);
   const { openModal } = useModal();
   const { projectId: urlProjectId, studyId: urlStudyId } = useParams() as studyParams;
@@ -98,6 +99,10 @@ export default function Study() {
     deleteItems,
   } = useMultiSelection<ScenarioWithDetails>((scenarioId) => {
     deleteScenario({ projectId: projectId!, studyId: studyId!, scenarioId });
+
+    // For each scenarios, clean the local storage if a manchette is saved
+    const deletedScenario = scenarios!.results.find((scenario) => scenario.id === scenarioId);
+    cleanScenarioLocalStorage(deletedScenario!.timetable_id);
   });
   const handleDeleteScenario = () => {
     if (selectedScenarioIds.length > 0 && studyId && projectId) {
@@ -247,7 +252,11 @@ export default function Study() {
                     type="button"
                     onClick={() =>
                       openModal(
-                        <AddOrEditStudyModal editionMode study={study} />,
+                        <AddOrEditStudyModal
+                          editionMode
+                          study={study}
+                          scenarios={scenarios?.results}
+                        />,
                         'xl',
                         'no-close-modal'
                       )
@@ -370,4 +379,6 @@ export default function Study() {
       </main>
     </>
   );
-}
+};
+
+export default Study;

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

@@ -14,7 +14,11 @@ import remarkGfm from 'remark-gfm';
 import PictureUploader from 'applications/operationalStudies/components/Project/PictureUploader';
 import { postDocument } from 'common/api/documentApi';
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
-import type { ProjectWithStudies, ProjectCreateForm } from 'common/api/osrdEditoastApi';
+import type {
+  ProjectWithStudies,
+  ProjectCreateForm,
+  StudyWithScenarios,
+} from 'common/api/osrdEditoastApi';
 import ChipsSNCF from 'common/BootstrapSNCF/ChipsSNCF';
 import InputSNCF from 'common/BootstrapSNCF/InputSNCF';
 import { ConfirmModal } from 'common/BootstrapSNCF/ModalSNCF';
@@ -24,6 +28,7 @@ import ModalHeaderSNCF from 'common/BootstrapSNCF/ModalSNCF/ModalHeaderSNCF';
 import { ModalContext } from 'common/BootstrapSNCF/ModalSNCF/ModalProvider';
 import TextareaSNCF from 'common/BootstrapSNCF/TextareaSNCF';
 import { useOsrdConfActions } from 'common/osrdContext';
+import { cleanScenarioLocalStorage } from 'modules/scenario/helpers/utils';
 import { setFailure, setSuccess } from 'reducers/main';
 import { getUserSafeWord } from 'reducers/user/userSelectors';
 import { useAppDispatch } from 'store';
@@ -53,12 +58,14 @@ type AddOrEditProjectModalProps = {
   editionMode?: boolean;
   project?: ProjectWithStudies;
   getProject?: (v: boolean) => void;
+  projectStudies?: StudyWithScenarios[];
 };
 
 export default function AddOrEditProjectModal({
   editionMode,
   project,
   getProject,
+  projectStudies,
 }: AddOrEditProjectModalProps) {
   const { t } = useTranslation(['operationalStudies/project', 'translation']);
   const { closeModal, isOpen } = useContext(ModalContext);
@@ -70,6 +77,8 @@ export default function AddOrEditProjectModal({
   const navigate = useNavigate();
   const safeWord = useSelector(getUserSafeWord);
 
+  const [getScenarios] =
+    osrdEditoastApi.endpoints.getProjectsByProjectIdStudiesAndStudyIdScenarios.useLazyQuery();
   const [postProject] = osrdEditoastApi.endpoints.postProjects.useMutation();
   const [patchProject] = osrdEditoastApi.endpoints.patchProjectsByProjectId.useMutation();
   const [deleteProject] = osrdEditoastApi.endpoints.deleteProjectsByProjectId.useMutation();
@@ -204,30 +213,46 @@ export default function AddOrEditProjectModal({
   };
 
   const removeProject = async () => {
-    if (project) {
-      await deleteProject({ projectId: project.id })
-        .unwrap()
-        .then(() => {
-          dispatch(updateProjectID(undefined));
-          navigate(`/operational-studies/projects/`);
-          closeModal();
-          dispatch(
-            setSuccess({
-              title: t('projectDeleted'),
-              text: t('projectDeletedDetails', { name: project.name }),
-            })
-          );
-        })
-        .catch((e) => {
-          dispatch(
-            setFailure(
-              castErrorToFailure(e, {
-                name: t('error.unableToDeleteProject'),
-              })
-            )
-          );
+    if (projectStudies) {
+      // For each scenario in the project, clean the local storage if a manchette is saved
+      const promisedScenarios = projectStudies.map(async (study) => {
+        const { data } = await getScenarios({
+          projectId: project!.id,
+          studyId: study.id,
         });
+        return data?.results;
+      });
+
+      const scenarios = await Promise.all(promisedScenarios);
+
+      scenarios.flat().forEach((scenario) => {
+        if (scenario) cleanScenarioLocalStorage(scenario.timetable_id);
+      });
     }
+
+    await deleteProject({ projectId: project!.id })
+      .unwrap()
+      .then(async () => {
+        dispatch(updateProjectID(undefined));
+
+        navigate(`/operational-studies/projects/`);
+        closeModal();
+        dispatch(
+          setSuccess({
+            title: t('projectDeleted'),
+            text: t('projectDeletedDetails', { name: project!.name }),
+          })
+        );
+      })
+      .catch((e) => {
+        dispatch(
+          setFailure(
+            castErrorToFailure(e, {
+              name: t('error.unableToDeleteProject'),
+            })
+          )
+        );
+      });
   };
 
   const debouncedObjectives = useDebounce(currentProject.objectives, 500);