[Mission] Résolution du bug de sauvegarde de mission durant la naviga…

…tion avec les signalements (#874)

- Resolve #733

frontend/cypress/e2e/side_window/mission_list/missions_navigation.spec.ts

@@ -30,6 +30,10 @@ context('Mission', () => {
     cy.get('[data-cy="mission-1"] > svg').first().click({ force: true }).wait(250)
     cy.clickButton("Retourner à l'édition")
 
+    // navigate between reportings and missions
+    cy.clickButton('signalements')
+    cy.clickButton('missions')
+
     // we want to check whether the second mission has been saved correctly
     cy.get('[data-cy="mission-2"]').first().forceClick().wait(250)
     cy.get('*[data-cy="add-control-administration"]').contains('DIRM / DM')

frontend/src/domain/use_cases/missions/saveMissionInLocalStore.ts

@@ -0,0 +1,27 @@
+import { multiMissionsActions } from '../../shared_slices/MultiMissions'
+
+export const saveMissionInLocalStore = () => async (dispatch, getState) => {
+  const {
+    missionState: { isFormDirty, missionState },
+    multiMissions: { selectedMissions }
+  } = getState()
+  if (!missionState) {
+    return
+  }
+
+  const missionsUpdated = [...selectedMissions]
+  const missionIndex = missionsUpdated.findIndex(mission => mission.mission.id === missionState?.id)
+
+  // We want to save the active form before navigate to another page in side window
+  const missionFormatted = {
+    isFormDirty,
+    mission: missionState
+  }
+  if (missionIndex !== -1) {
+    missionsUpdated[missionIndex] = missionFormatted
+  } else {
+    missionsUpdated.push(missionFormatted)
+  }
+
+  await dispatch(multiMissionsActions.setSelectedMissions(missionsUpdated))
+}

frontend/src/features/Reportings/ReportingsButton/SearchReportings.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 
 import { sideWindowPaths } from '../../../domain/entities/sideWindow'
 import { setDisplayedItems, ReportingContext } from '../../../domain/shared_slices/Global'
+import { saveMissionInLocalStore } from '../../../domain/use_cases/missions/saveMissionInLocalStore'
 import { addReporting } from '../../../domain/use_cases/reporting/addReporting'
 import { useAppSelector } from '../../../hooks/useAppSelector'
 import { sideWindowActions } from '../../SideWindow/slice'
@@ -28,7 +29,8 @@ export function SearchReportings() {
     dispatch(addReporting(ReportingContext.MAP))
   }
 
-  const toggleReportingsWindow = () => {
+  const toggleReportingsWindow = async () => {
+    await dispatch(saveMissionInLocalStore())
     dispatch(sideWindowActions.focusAndGoTo(sideWindowPaths.REPORTINGS))
   }
 

frontend/src/features/SideWindow/index.tsx

@@ -10,8 +10,9 @@ import { StyledRouteContainer, Wrapper } from './style'
 import { ErrorBoundary } from '../../components/ErrorBoundary'
 import { sideWindowPaths } from '../../domain/entities/sideWindow'
 import { ReportingContext } from '../../domain/shared_slices/Global'
+import { switchTab } from '../../domain/use_cases/missions/switchTab'
 import { useAppSelector } from '../../hooks/useAppSelector'
-import { isMissionOrMissionsPage, isReportingsPage } from '../../utils/routes'
+import { isMissionOrMissionsPage, isMissionPage, isReportingsPage } from '../../utils/routes'
 import { Mission } from '../missions/MissionForm'
 import { Missions } from '../missions/MissionsList'
 import { MissionsNavBar } from '../missions/MissionsNavBar'
@@ -34,7 +35,13 @@ function SideWindowWithRef(_, ref: ForwardedRef<HTMLDivElement | null>) {
   const isReportingsButtonIsActive = useMemo(() => isReportingsPage(currentPath), [currentPath])
 
   const navigate = nextPath => {
-    if (nextPath) {
+    if (!nextPath) {
+      return
+    }
+    const isCurrentPathIsMissionPage = isMissionPage(currentPath)
+    if (isCurrentPathIsMissionPage) {
+      dispatch(switchTab(nextPath))
+    } else {
       dispatch(sideWindowActions.setCurrentPath(nextPath))
     }
   }
@@ -83,7 +90,9 @@ function SideWindowWithRef(_, ref: ForwardedRef<HTMLDivElement | null>) {
             </StyledRouteContainer>
           </NewWindowContext.Provider>
         )}
-        <Reportings key="reportings-on-side-window" context={ReportingContext.SIDE_WINDOW} />
+        {isReportingsButtonIsActive && (
+          <Reportings key="reportings-on-side-window" context={ReportingContext.SIDE_WINDOW} />
+        )}
         <ToastContainer containerId="sideWindow" enableMultiContainer />
       </Wrapper>
     </ErrorBoundary>

frontend/src/features/missions/MissionsButton/index.tsx

@@ -6,6 +6,7 @@ import styled from 'styled-components'
 import { sideWindowPaths } from '../../../domain/entities/sideWindow'
 import { setDisplayedItems, ReportingContext, VisibilityState } from '../../../domain/shared_slices/Global'
 import { addMission } from '../../../domain/use_cases/missions/addMission'
+import { saveMissionInLocalStore } from '../../../domain/use_cases/missions/saveMissionInLocalStore'
 import { reduceReportingFormOnMap } from '../../../domain/use_cases/reporting/reduceReportingFormOnMap'
 import { useAppSelector } from '../../../hooks/useAppSelector'
 import { isMissionOrMissionsPage } from '../../../utils/routes'
@@ -24,12 +25,15 @@ export function MissionsMenu() {
     [sideWindow.currentPath, sideWindow.status]
   )
 
-  const toggleMissionsWindow = () => {
-    dispatch(sideWindowActions.focusAndGoTo(sideWindowPaths.MISSIONS))
+  const toggleMissionsWindow = async () => {
+    await dispatch(saveMissionInLocalStore())
+    await dispatch(sideWindowActions.focusAndGoTo(sideWindowPaths.MISSIONS))
   }
+
   const toggleMissionsLayer = () => {
     dispatch(setDisplayedItems({ displayMissionsLayer: !displayMissionsLayer }))
   }
+
   const toggleMissionsMenu = e => {
     e.preventDefault()
     dispatch(

frontend/src/features/missions/MissionsNavBar.tsx

@@ -6,8 +6,8 @@ import styled from 'styled-components'
 
 import { getMissionStatus, missionStatusLabels } from '../../domain/entities/missions'
 import { sideWindowPaths } from '../../domain/entities/sideWindow'
-import { deleteTab } from '../../domain/use_cases/navigation/deleteTab'
-import { switchTab } from '../../domain/use_cases/navigation/switchTab'
+import { deleteTab } from '../../domain/use_cases/missions/deleteTab'
+import { switchTab } from '../../domain/use_cases/missions/switchTab'
 import { useAppDispatch } from '../../hooks/useAppDispatch'
 import { useAppSelector } from '../../hooks/useAppSelector'
 import { getMissionTitle } from '../../utils/getMissionTitle'
@@ -53,15 +53,17 @@ export function MissionsNavBar() {
   }, [selectedMissions])
 
   const selectTab = nextPath => {
-    if (nextPath) {
-      dispatch(switchTab(nextPath))
+    if (!nextPath) {
+      return
     }
+    dispatch(switchTab(nextPath))
   }
 
   const removeTab = nextPath => {
-    if (nextPath) {
-      dispatch(deleteTab(nextPath))
+    if (!nextPath) {
+      return
     }
+    dispatch(deleteTab(nextPath))
   }
 
   return (

frontend/src/utils/routes.ts

@@ -11,16 +11,17 @@ export function getMissionPageRoute(path: string) {
     path as string
   )
 }
-
-export function isMissionOrMissionsPage(path: string) {
-  const isMissionPage = !!matchPath<'id', string>(
+export function isMissionPage(path: string) {
+  return !!matchPath<'id', string>(
     {
       end: true,
       path: sideWindowPaths.MISSION
     },
     path as string
   )
+}
 
+export function isMissionOrMissionsPage(path: string) {
   const isMissionsPage = !!matchPath(
     {
       end: true,
@@ -29,7 +30,7 @@ export function isMissionOrMissionsPage(path: string) {
     path as string
   )
 
-  return isMissionPage || isMissionsPage
+  return isMissionPage(path) || isMissionsPage
 }
 
 export function isReportingsPage(path: string) {