diff --git a/frontend/src/domain/shared_slices/LayerSidebar.ts b/frontend/src/domain/shared_slices/LayerSidebar.ts index 2ff28e439..7e5b492fa 100644 --- a/frontend/src/domain/shared_slices/LayerSidebar.ts +++ b/frontend/src/domain/shared_slices/LayerSidebar.ts @@ -1,8 +1,10 @@ -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 @@ -10,7 +12,9 @@ type LayerSidebarSliceState = { 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) { + 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) { + 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 index d1f3a56f5..4e7e8b336 100644 --- 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 index 2ce2bb8cd..22525b6a8 100644 --- 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 index 7fe3e18a7..c86cbc746 100644 --- 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 index 0de3196bf..6301a0098 100644 --- 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 index e1dc7f8f9..7d1920a24 100644 --- 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 index 8a3cd2029..ce03eeddd 100644 --- 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 index ed9bf2a31..765035524 100644 --- 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) { ({regulatoryLayersSearchResult?.length || '0'} résultats) - + {Object.entries(regulatoryLayersByLayerName).map(([layerGroupName, layerIdsInGroup]) => ( ({ampsSearchResult?.length || '0'} résultats) - + {Object.entries(ampResulstsByAMPName).map(([ampName, ampIdsInGroup]) => ( ))} diff --git a/frontend/src/features/layersSelector/search/slice.ts b/frontend/src/features/layersSelector/search/slice.ts index e726f2101..33fbac061 100644 --- 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) { - state.isAmpSearchResultsExpanded = action.payload - }, - setIsAmpSearchResultsVisible(state, action: PayloadAction) { state.isAmpSearchResultsVisible = action.payload }, - setIsRegulatorySearchResultsExpanded(state, action: PayloadAction) { - state.isRegulatorySearchResultsExpanded = action.payload - }, setIsRegulatorySearchResultsVisible(state, action: PayloadAction) { state.isRegulatorySearchResultsVisible = action.payload }, @@ -86,9 +75,7 @@ export const { setFilteredAmpTypes, setFilteredRegulatoryThemes, setGlobalSearchText, - setIsAmpSearchResultsExpanded, setIsAmpSearchResultsVisible, - setIsRegulatorySearchResultsExpanded, setIsRegulatorySearchResultsVisible, setRegulatoryLayersSearchResult, setSearchExtent,