[Carte] Résolution du bug sur le lien Sémaphore/ Signalements (#1496)

- Je n'affiche le lien entre le sémaphore et les signalements que pour les sémaphores visibles (suivant les filtres appliqués) - Je ferme les menu sdu sélecteur de layer quand j'ouvre le menu des résultats de recherches des AMPS ou des zones règlementaires (voir commentaire d'Adeline en bas du ticket 1445) ## Related Pull Requests & Issues - Resolve #1445 - Resolve #1399 ---- - [ ] Tests E2E (Cypress)
MTES-MCT · Jun 24, 2024 · f41f0fb · f41f0fb
2 parents d118379 + 251a73e
commit f41f0fb
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 43 deletions.
diff --git a/frontend/src/domain/shared_slices/LayerSidebar.ts b/frontend/src/domain/shared_slices/LayerSidebar.ts
@@ -1,16 +1,20 @@
-import { createSlice } from '@reduxjs/toolkit'
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
 
 type LayerSidebarSliceState = {
   administrativeZonesIsOpen: boolean
+  areAmpsResultsOpen: boolean
   areRegFiltersOpen: boolean
+  areRegulatoryResultsOpen: boolean
   baselayerIsOpen: boolean
   myAmpsIsOpen: boolean
   myRegulatoryZonesIsOpen: boolean
 }
 
 const initialState: LayerSidebarSliceState = {
   administrativeZonesIsOpen: false,
+  areAmpsResultsOpen: false,
   areRegFiltersOpen: false,
+  areRegulatoryResultsOpen: false,
   baselayerIsOpen: false,
   myAmpsIsOpen: false,
   myRegulatoryZonesIsOpen: false
@@ -29,6 +33,12 @@ export const layerSidebarSlice = createSlice({
         administrativeZonesIsOpen: !state.administrativeZonesIsOpen
       }
     },
+    toggleAmpResults(state, action: PayloadAction<boolean | undefined>) {
+      return {
+        ...initialState,
+        areAmpsResultsOpen: action?.payload ?? !state.areAmpsResultsOpen
+      }
+    },
     toggleBaseLayer(state) {
       return {
         ...initialState,
@@ -52,6 +62,12 @@ export const layerSidebarSlice = createSlice({
         ...initialState,
         areRegFiltersOpen: !state.areRegFiltersOpen
       }
+    },
+    toggleRegulatoryResults(state, action: PayloadAction<boolean | undefined>) {
+      return {
+        ...initialState,
+        areRegulatoryResultsOpen: action?.payload ?? !state.areRegulatoryResultsOpen
+      }
     }
   }
 })

diff --git a/frontend/src/features/Reportings/components/ReportingLayer/Reporting/SelectedReporting.tsx b/frontend/src/features/Reportings/components/ReportingLayer/Reporting/SelectedReporting.tsx
@@ -19,7 +19,8 @@ export function SelectedReportingLayer({ map }: BaseMapChildrenProps) {
   const { selectedReporting } = useGetReportingsQuery(undefined, {
     selectFromResult: ({ data }) => ({
       selectedReporting: selectedReportingIdOnMap && data?.entities[selectedReportingIdOnMap]
-    })
+    }),
+    skip: !selectedReportingIdOnMap
   })
 
   const hasNoReportingConflict = useMemo(() => {

diff --git a/frontend/src/features/Reportings/components/ReportingOverlay/Reporting/ReportingCard.tsx b/frontend/src/features/Reportings/components/ReportingOverlay/Reporting/ReportingCard.tsx
@@ -99,7 +99,7 @@ export function ReportingCard({
   const targetName = useMemo(() => {
     if (targetDetails.length > 1) {
       if (vehicleType) {
-        return `${targetDetails.length} ${vehicleTypeLabels[vehicleType].label}s`
+        return `${targetDetails.length} ${vehicleTypeLabels[vehicleType].label.toLowerCase()}s`
       }
 
       return `${targetDetails.length} ${ReportingTargetTypeLabels[targetType]}s`

diff --git a/frontend/src/features/Reportings/hooks/useGetFilteredReportingsQuery.ts b/frontend/src/features/Reportings/hooks/useGetFilteredReportingsQuery.ts
@@ -55,7 +55,8 @@ export const useGetFilteredReportingsQuery = () => {
     const startedBeforeDate = startedBefore ?? undefined
     switch (periodFilter) {
       case ReportingDateRangeEnum.DAY:
-        startedAfterDate = customDayjs().utc().subtract(24, 'hour').toISOString()
+        // to prevent refeteching every second we don't send seconds in query
+        startedAfterDate = `${customDayjs().utc().subtract(24, 'hour').format('YYYY-MM-DDTHH:mm')}:00.000Z`
 
         break
 

diff --git a/frontend/src/features/Semaphore/components/Layer/SelectedSemaphoreLayer.tsx b/frontend/src/features/Semaphore/components/Layer/SelectedSemaphoreLayer.tsx
@@ -1,4 +1,4 @@
-import { useGetReportingsQuery } from '@api/reportingsAPI'
+import { useGetFilteredReportingsQuery } from '@features/Reportings/hooks/useGetFilteredReportingsQuery'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 import { useEffect, useMemo, useRef, type MutableRefObject } from 'react'
@@ -20,7 +20,6 @@ export function SelectedSemaphoreLayer({ map }: BaseMapChildrenProps) {
   const { displaySemaphoresLayer } = useAppSelector(state => state.global)
   const isSemaphoreHighlighted = useAppSelector(state => state.semaphoresSlice.isSemaphoreHighlighted)
   const selectedSemaphoreId = useAppSelector(state => state.semaphoresSlice.selectedSemaphoreId)
-
   const overlayCoordinates = useAppSelector(state => state.global.overlayCoordinates)
   // we don't want to display sempahores on the map if the user so decides (displaySemaphoresLayer variable)
   // or if user have interaction on map (edit mission zone, attach reporting or mission)
@@ -31,7 +30,7 @@ export function SelectedSemaphoreLayer({ map }: BaseMapChildrenProps) {
   )
 
   const { data: semaphores } = useGetSemaphoresQuery()
-  const { data: reportings } = useGetReportingsQuery()
+  const { reportings } = useGetFilteredReportingsQuery()
 
   const semaphore = useMemo(() => {
     const semaphoresList = semaphores?.entities

diff --git a/frontend/src/features/Semaphore/components/Layer/index.ts b/frontend/src/features/Semaphore/components/Layer/index.ts
@@ -1,4 +1,4 @@
-import { useGetReportingsQuery } from '@api/reportingsAPI'
+import { useGetFilteredReportingsQuery } from '@features/Reportings/hooks/useGetFilteredReportingsQuery'
 import { convertToFeature } from 'domain/types/map'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
@@ -32,7 +32,7 @@ export function SemaphoresLayer({ map, mapClickEvent }: BaseMapChildrenProps) {
 
   const { data: semaphores } = useGetSemaphoresQuery()
 
-  const { data: reportings } = useGetReportingsQuery()
+  const { reportings } = useGetFilteredReportingsQuery()
 
   const semaphoresPoint = useMemo(() => getSemaphoresPoint(semaphores, reportings), [semaphores, reportings])
 

diff --git a/frontend/src/features/Semaphore/components/Layer/utils.ts b/frontend/src/features/Semaphore/components/Layer/utils.ts
@@ -7,7 +7,7 @@ import type { Feature } from 'ol'
 
 export function getReportingsBySemaphoreId(reportings) {
   return reduce(
-    reportings?.entities,
+    reportings,
     (reportingsBySemaphore, reporting) => {
       const reports = cloneDeep(reportingsBySemaphore)
       if (reporting && reporting.semaphoreId) {

diff --git a/frontend/src/features/layersSelector/search/ResultsList/index.tsx b/frontend/src/features/layersSelector/search/ResultsList/index.tsx
@@ -1,5 +1,6 @@
 import { closeMetadataPanel } from '@features/layersSelector/metadataPanel/slice'
 import { Checkbox } from '@mtes-mct/monitor-ui'
+import { layerSidebarActions } from 'domain/shared_slices/LayerSidebar'
 import _ from 'lodash'
 import styled from 'styled-components'
 
@@ -9,12 +10,7 @@ import { useGetAMPsQuery } from '../../../../api/ampsAPI'
 import { useGetRegulatoryLayersQuery } from '../../../../api/regulatoryLayersAPI'
 import { useAppDispatch } from '../../../../hooks/useAppDispatch'
 import { useAppSelector } from '../../../../hooks/useAppSelector'
-import {
-  setIsAmpSearchResultsExpanded,
-  setIsAmpSearchResultsVisible,
-  setIsRegulatorySearchResultsExpanded,
-  setIsRegulatorySearchResultsVisible
-} from '../slice'
+import { setIsAmpSearchResultsVisible, setIsRegulatorySearchResultsVisible } from '../slice'
 
 type ResultListProps = {
   searchedText: string
@@ -24,11 +20,11 @@ export function ResultList({ searchedText }: ResultListProps) {
   const dispatch = useAppDispatch()
 
   const ampsSearchResult = useAppSelector(state => state.layerSearch.ampsSearchResult)
-  const isAmpSearchResultsExpanded = useAppSelector(state => state.layerSearch.isAmpSearchResultsExpanded)
   const isAmpSearchResultsVisible = useAppSelector(state => state.layerSearch.isAmpSearchResultsVisible)
-  const isRegulatorySearchResultsExpanded = useAppSelector(state => state.layerSearch.isRegulatorySearchResultsExpanded)
   const isRegulatorySearchResultsVisible = useAppSelector(state => state.layerSearch.isRegulatorySearchResultsVisible)
   const regulatoryLayersSearchResult = useAppSelector(state => state.layerSearch.regulatoryLayersSearchResult)
+  const areRegulatoryResultsOpen = useAppSelector(state => state.layerSidebar.areRegulatoryResultsOpen)
+  const areAmpsResultsOpen = useAppSelector(state => state.layerSidebar.areAmpsResultsOpen)
 
   const { data: regulatoryLayers } = useGetRegulatoryLayersQuery()
   const { data: amps } = useGetAMPsQuery()
@@ -44,27 +40,30 @@ export function ResultList({ searchedText }: ResultListProps) {
       dispatch(setIsRegulatorySearchResultsVisible(true))
     }
     dispatch(closeMetadataPanel())
-    dispatch(setIsRegulatorySearchResultsExpanded(!isRegulatorySearchResultsExpanded))
-    dispatch(setIsAmpSearchResultsExpanded(false))
+    dispatch(layerSidebarActions.toggleRegulatoryResults())
   }
   const toggleAMPs = () => {
     if (!isAmpSearchResultsVisible) {
       dispatch(setIsAmpSearchResultsVisible(true))
     }
     dispatch(closeMetadataPanel())
-    dispatch(setIsRegulatorySearchResultsExpanded(false))
-    dispatch(setIsAmpSearchResultsExpanded(!isAmpSearchResultsExpanded))
+    dispatch(layerSidebarActions.toggleAmpResults())
   }
 
-  const toggleAMPVisibility = () => {
+  const toggleAMPVisibility = (isChecked: boolean | undefined) => {
+    if (!isChecked) {
+      dispatch(layerSidebarActions.toggleAmpResults(false))
+    }
     dispatch(closeMetadataPanel())
-    dispatch(setIsAmpSearchResultsExpanded(false))
-    dispatch(setIsAmpSearchResultsVisible(!isAmpSearchResultsVisible))
+    dispatch(setIsAmpSearchResultsVisible(!!isChecked))
   }
-  const toggleRegulatoryVisibility = () => {
+
+  const toggleRegulatoryVisibility = (isChecked: boolean | undefined) => {
+    if (!isChecked) {
+      dispatch(layerSidebarActions.toggleRegulatoryResults(false))
+    }
     dispatch(closeMetadataPanel())
-    dispatch(setIsRegulatorySearchResultsExpanded(false))
-    dispatch(setIsRegulatorySearchResultsVisible(!isRegulatorySearchResultsVisible))
+    dispatch(setIsRegulatorySearchResultsVisible(!!isChecked))
   }
 
   return (
@@ -83,7 +82,7 @@ export function ResultList({ searchedText }: ResultListProps) {
               <NumberOfResults>({regulatoryLayersSearchResult?.length || '0'} résultats)</NumberOfResults>
             </Title>
           </Header>
-          <SubList $isExpanded={isRegulatorySearchResultsExpanded}>
+          <SubList $isExpanded={areRegulatoryResultsOpen}>
             {Object.entries(regulatoryLayersByLayerName).map(([layerGroupName, layerIdsInGroup]) => (
               <RegulatoryLayerGroup
                 key={layerGroupName}
@@ -108,7 +107,7 @@ export function ResultList({ searchedText }: ResultListProps) {
               ZONES AMP &nbsp;<NumberOfResults> ({ampsSearchResult?.length || '0'} résultats)</NumberOfResults>
             </Title>
           </HeaderAMP>
-          <SubListAMP $isExpanded={isAmpSearchResultsExpanded} data-cy="amp-result-list">
+          <SubListAMP $isExpanded={areAmpsResultsOpen} data-cy="amp-result-list">
             {Object.entries(ampResulstsByAMPName).map(([ampName, ampIdsInGroup]) => (
               <AMPLayerGroup key={ampName} groupName={ampName} layerIds={ampIdsInGroup} searchedText={searchedText} />
             ))}

diff --git a/frontend/src/features/layersSelector/search/slice.ts b/frontend/src/features/layersSelector/search/slice.ts
@@ -5,9 +5,7 @@ type LayerSearchState = {
   filteredAmpTypes: string[]
   filteredRegulatoryThemes: string[]
   globalSearchText: string
-  isAmpSearchResultsExpanded: boolean
   isAmpSearchResultsVisible: boolean
-  isRegulatorySearchResultsExpanded: boolean
   isRegulatorySearchResultsVisible: boolean
   regulatoryLayersSearchResult: number[] | undefined
   searchExtent: number[] | undefined
@@ -18,9 +16,7 @@ const initialState: LayerSearchState = {
   filteredAmpTypes: [],
   filteredRegulatoryThemes: [],
   globalSearchText: '',
-  isAmpSearchResultsExpanded: false,
   isAmpSearchResultsVisible: true,
-  isRegulatorySearchResultsExpanded: false,
   isRegulatorySearchResultsVisible: true,
   regulatoryLayersSearchResult: undefined,
   searchExtent: undefined,
@@ -54,17 +50,10 @@ const layerSearchSlice = createSlice({
       state.globalSearchText = action.payload
     },
 
-    setIsAmpSearchResultsExpanded(state, action: PayloadAction<boolean>) {
-      state.isAmpSearchResultsExpanded = action.payload
-    },
-
     setIsAmpSearchResultsVisible(state, action: PayloadAction<boolean>) {
       state.isAmpSearchResultsVisible = action.payload
     },
 
-    setIsRegulatorySearchResultsExpanded(state, action: PayloadAction<boolean>) {
-      state.isRegulatorySearchResultsExpanded = action.payload
-    },
     setIsRegulatorySearchResultsVisible(state, action: PayloadAction<boolean>) {
       state.isRegulatorySearchResultsVisible = action.payload
     },
@@ -86,9 +75,7 @@ export const {
   setFilteredAmpTypes,
   setFilteredRegulatoryThemes,
   setGlobalSearchText,
-  setIsAmpSearchResultsExpanded,
   setIsAmpSearchResultsVisible,
-  setIsRegulatorySearchResultsExpanded,
   setIsRegulatorySearchResultsVisible,
   setRegulatoryLayersSearchResult,
   setSearchExtent,