[Tableau de bord et Brief] Corrections de bugs

frontend/src/features/ControlUnit/utils.ts

@@ -11,7 +11,7 @@ import { isEmpty, uniq } from 'lodash/fp'
 import { isNotArchived } from '../../utils/isNotArchived'
 
 import type { FiltersState } from './components/ControlUnitListDialog/types'
-import type { ControlUnitFilters } from '@features/Dashboard/slice'
+import type { ControlUnitFilters } from '@features/Dashboard/components/DashboardForm/slice'
 import type { Extent } from 'ol/extent'
 
 export function addBufferToExtent(extent: Extent, bufferRatio: number) {

frontend/src/features/Dashboard/components/DashboardForm/Comments/index.tsx

@@ -1,26 +1,41 @@
 import { dashboardActions } from '@features/Dashboard/slice'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { Textarea } from '@mtes-mct/monitor-ui'
+import { debounce } from 'lodash'
+import { useState } from 'react'
 import styled from 'styled-components'
 
 import { Accordion } from '../Accordion'
 
 type CommentsProps = {
   comments: string | undefined
+  dashboardKey: string
   isExpanded: boolean
   setExpandedAccordion: () => void
 }
 
-export function Comments({ comments, isExpanded, setExpandedAccordion }: CommentsProps) {
+export function Comments({ comments, dashboardKey, isExpanded, setExpandedAccordion }: CommentsProps) {
   const dispatch = useAppDispatch()
+  const [commentsValue, setCommentsValue] = useState(comments)
+
+  const onQuery = debounce((value: string | undefined) => {
+    dispatch(dashboardActions.setComments({ comments: value, key: dashboardKey }))
+  }, 500)
 
   const updateComments = (value: string | undefined) => {
-    dispatch(dashboardActions.setComments(value))
+    setCommentsValue(value)
+    onQuery(value)
   }
 
   return (
     <Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Commentaires">
-      <StyledTextarea isLabelHidden label="Commentaires" name="comments" onChange={updateComments} value={comments} />
+      <StyledTextarea
+        isLabelHidden
+        label="Commentaires"
+        name="comments"
+        onChange={updateComments}
+        value={commentsValue}
+      />
     </Accordion>
   )
 }

frontend/src/features/Dashboard/components/DashboardForm/ControlUnits/index.tsx

@@ -2,7 +2,6 @@ import { useGetAdministrationsQuery } from '@api/administrationsAPI'
 import { RTK_DEFAULT_QUERY_OPTIONS } from '@api/constants'
 import { useGetStationsQuery } from '@api/stationsAPI'
 import { getFilters } from '@features/ControlUnit/utils'
-import { dashboardActions } from '@features/Dashboard/slice'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
 import {
@@ -20,6 +19,7 @@ import styled from 'styled-components'
 import { Item } from './Item'
 import { SelectedControlUnits } from './SelectedControlUnits'
 import { Accordion } from '../Accordion'
+import { dashboardFiltersActions } from '../slice'
 
 type ControlUnitsProps = {
   controlUnits: ControlUnit.ControlUnit[]
@@ -38,7 +38,7 @@ export function ControlUnits({
 
   const activeDashboardId = useAppSelector(state => state.dashboard.activeDashboardId)
   const filters = useAppSelector(state =>
-    activeDashboardId ? state.dashboard.dashboards?.[activeDashboardId]?.controlUnitFilters : {}
+    activeDashboardId ? state.dashboardFilters.dashboards[activeDashboardId]?.controlUnitFilters : undefined
   )
 
   const controlUnitResults = useMemo(() => {
@@ -62,19 +62,27 @@ export function ControlUnits({
   const typesAsOptions = useMemo(() => getOptionsFromLabelledEnum(ControlUnit.ControlUnitResourceTypeLabel), [])
 
   const updateQuery = (nextValue: string | undefined) => {
-    dispatch(dashboardActions.setControlUnitsFilters({ key: 'query', value: nextValue }))
+    dispatch(dashboardFiltersActions.setControlUnitsFilters({ id: activeDashboardId, key: 'query', value: nextValue }))
   }
 
   const updateAdministrationId = (nextValue: number | undefined) => {
-    dispatch(dashboardActions.setControlUnitsFilters({ key: 'administrationId', value: nextValue }))
+    dispatch(
+      dashboardFiltersActions.setControlUnitsFilters({
+        id: activeDashboardId,
+        key: 'administrationId',
+        value: nextValue
+      })
+    )
   }
 
   const updateBaseId = (nextValue: number | undefined) => {
-    dispatch(dashboardActions.setControlUnitsFilters({ key: 'stationId', value: nextValue }))
+    dispatch(
+      dashboardFiltersActions.setControlUnitsFilters({ id: activeDashboardId, key: 'stationId', value: nextValue })
+    )
   }
 
   const updateType = (nextValue: string | undefined) => {
-    dispatch(dashboardActions.setControlUnitsFilters({ key: 'type', value: nextValue }))
+    dispatch(dashboardFiltersActions.setControlUnitsFilters({ id: activeDashboardId, key: 'type', value: nextValue }))
   }
 
   const hasChildren = !!(controlUnitResults && controlUnitResults?.length > 5)

frontend/src/features/Dashboard/components/DashboardForm/DashboardForm.tsx

@@ -14,6 +14,7 @@ import { ControlUnits } from './ControlUnits'
 import { Footer } from './Footer'
 import { RegulatoryAreas } from './RegulatoryAreas'
 import { Reportings } from './Reportings'
+import { dashboardFiltersActions, getReportingFilters } from './slice'
 import { TerritorialPressure } from './TerritorialPressure'
 import { Toolbar } from './Toolbar'
 import { VigilanceAreas } from './VigilanceAreas'
@@ -33,12 +34,18 @@ type DashboardProps = {
 }
 export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: DashboardProps) {
   const dispatch = useAppDispatch()
-  const previewSelectionFilter = dashboard.filters.previewSelection ?? false
 
-  const filteredAmps = useAppSelector(state => getFilteredAmps(state.dashboard))
-  const filteredRegulatoryAreas = useAppSelector(state => getFilteredRegulatoryAreas(state.dashboard))
-  const filteredVigilanceAreas = useAppSelector(state => getFilteredVigilanceAreas(state.dashboard))
-  const filteredReportings = useAppSelector(state => getFilteredReportings(state.dashboard))
+  const filters = useAppSelector(state => state.dashboardFilters?.dashboards[key]?.filters)
+  const previewSelectionFilter = filters?.previewSelection ?? false
+
+  const filteredAmps = useAppSelector(state => getFilteredAmps(state.dashboard, filters?.amps))
+  const filteredRegulatoryAreas = useAppSelector(state =>
+    getFilteredRegulatoryAreas(state.dashboard, filters?.regulatoryThemes)
+  )
+  const filteredVigilanceAreas = useAppSelector(state => getFilteredVigilanceAreas(state.dashboard, filters))
+
+  const reportingFilters = useAppSelector(state => getReportingFilters(state.dashboardFilters, key))
+  const filteredReportings = useAppSelector(state => getFilteredReportings(state.dashboard, reportingFilters))
 
   const { data: controlUnits } = useGetControlUnitsQuery(undefined, RTK_DEFAULT_QUERY_OPTIONS)
   const activeControlUnits = useMemo(() => controlUnits?.filter(isNotArchived), [controlUnits])
@@ -102,9 +109,9 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das
       setExpandedAccordionFirstColumn(undefined)
       setExpandedAccordionSecondColumn(undefined)
       setExpandedAccordionThirdColumn(undefined)
-      dispatch(dashboardActions.setDashboardFilters({ previewSelection: false }))
+      dispatch(dashboardFiltersActions.setFilters({ filters: { previewSelection: false }, id: key }))
     }
-  }, [previewSelectionFilter, dispatch])
+  }, [previewSelectionFilter, dispatch, key])
 
   return (
     <>
@@ -163,6 +170,7 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das
               />
               <Comments
                 comments={dashboard.dashboard.comments}
+                dashboardKey={key}
                 isExpanded={expandedAccordionThirdColumn === Dashboard.Block.COMMENTS}
                 setExpandedAccordion={() => handleAccordionClick(Dashboard.Block.COMMENTS)}
               />

frontend/src/features/Dashboard/components/DashboardForm/Reportings/Filters.tsx

@@ -1,4 +1,4 @@
-import { dashboardActions, getFilteredReportings, getReportingFilters } from '@features/Dashboard/slice'
+import { getFilteredReportings } from '@features/Dashboard/slice'
 import { StyledCustomPeriodContainer, StyledSelect } from '@features/Reportings/Filters/style'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
@@ -16,10 +16,14 @@ import { StatusFilterEnum, StatusFilterLabels } from 'domain/entities/reporting'
 import { forwardRef, type ComponentProps } from 'react'
 import styled from 'styled-components'
 
+import { dashboardFiltersActions, getReportingFilters } from '../slice'
+
 export const Filters = forwardRef<HTMLDivElement, ComponentProps<'div'>>(({ ...props }, ref) => {
   const dispatch = useAppDispatch()
-  const reportingFilters = useAppSelector(state => getReportingFilters(state.dashboard))
-  const filteredReportings = useAppSelector(state => getFilteredReportings(state.dashboard)) ?? []
+  const dashboardId = useAppSelector(state => state.dashboard.activeDashboardId)
+
+  const reportingFilters = useAppSelector(state => getReportingFilters(state.dashboardFilters, dashboardId))
+  const filteredReportings = useAppSelector(state => getFilteredReportings(state.dashboard, reportingFilters)) ?? []
 
   const { newWindowContainerRef } = useNewWindow()
 
@@ -32,17 +36,19 @@ export const Filters = forwardRef<HTMLDivElement, ComponentProps<'div'>>(({ ...p
 
   const setCustomPeriodFilter = (date: DateAsStringRange | undefined) => {
     dispatch(
-      dashboardActions.setReportingFilters({
-        period: date
+      dashboardFiltersActions.setReportingFilters({
+        filters: { period: date },
+        id: dashboardId
       })
     )
   }
 
   const setPeriodFilter = (dateRange: OptionValueType | undefined) => {
     if (dateRange) {
       dispatch(
-        dashboardActions.setReportingFilters({
-          dateRange: dateRange as ReportingDateRangeEnum
+        dashboardFiltersActions.setReportingFilters({
+          filters: { dateRange: dateRange as ReportingDateRangeEnum },
+          id: dashboardId
         })
       )
     }
@@ -51,14 +57,16 @@ export const Filters = forwardRef<HTMLDivElement, ComponentProps<'div'>>(({ ...p
   const setStatusFilter = (statusOption: Option<string>, isChecked: boolean | undefined) => {
     if (isChecked) {
       dispatch(
-        dashboardActions.setReportingFilters({
-          status: [...reportingFilters.status, statusOption.value as StatusFilterEnum]
+        dashboardFiltersActions.setReportingFilters({
+          filters: { status: [...reportingFilters.status, statusOption.value as StatusFilterEnum] },
+          id: dashboardId
         })
       )
     } else {
       dispatch(
-        dashboardActions.setReportingFilters({
-          status: reportingFilters.status.filter(status => status !== statusOption.value)
+        dashboardFiltersActions.setReportingFilters({
+          filters: { status: reportingFilters.status.filter(status => status !== statusOption.value) },
+          id: dashboardId
         })
       )
     }

frontend/src/features/Dashboard/components/DashboardForm/Toolbar/Filters/index.tsx

@@ -1,7 +1,8 @@
 import { ReinitializeFiltersButton } from '@features/commonComponents/ReinitializeFiltersButton'
-import { dashboardActions, type DashboardType } from '@features/Dashboard/slice'
+import { type DashboardType } from '@features/Dashboard/slice'
 import { VigilanceArea } from '@features/VigilanceArea/types'
 import { useAppDispatch } from '@hooks/useAppDispatch'
+import { useAppSelector } from '@hooks/useAppSelector'
 import {
   CheckPicker,
   CustomSearch,
@@ -20,12 +21,17 @@ import { getRegulatoryThemesAsOptions } from '@utils/getRegulatoryThemesAsOption
 import { useMemo } from 'react'
 import styled from 'styled-components'
 
+import { dashboardFiltersActions } from '../../slice'
+
 type FiltersProps = {
   dashboard: DashboardType
 }
 export function DashboardFilters({ dashboard }: FiltersProps) {
   const dispatch = useAppDispatch()
-  const { extractedArea, filters } = dashboard
+  const { extractedArea } = dashboard
+  const { id } = dashboard.dashboard
+
+  const filters = useAppSelector(state => state.dashboardFilters.dashboards[id]?.filters)
 
   const regulatoryThemesAsOption = getRegulatoryThemesAsOptions(extractedArea?.regulatoryAreas ?? [])
   const regulatoryThemesCustomSearch = useMemo(
@@ -39,16 +45,16 @@ export function DashboardFilters({ dashboard }: FiltersProps) {
   const vigilanceAreaPeriodOptions = getOptionsFromLabelledEnum(VigilanceArea.VigilanceAreaFilterPeriodLabel)
 
   const setFilteredRegulatoryThemes = (value: string[] | undefined) => {
-    dispatch(dashboardActions.setDashboardFilters({ regulatoryThemes: value }))
+    dispatch(dashboardFiltersActions.setFilters({ filters: { regulatoryThemes: value }, id }))
   }
 
   const setFilteredAmpTypes = (value: string[] | undefined) => {
-    dispatch(dashboardActions.setDashboardFilters({ amps: value }))
+    dispatch(dashboardFiltersActions.setFilters({ filters: { amps: value }, id }))
   }
 
   const setFilteredVigilancePeriod = (nextValue: OptionValueType | undefined) => {
     const value = nextValue as VigilanceArea.VigilanceAreaFilterPeriod | undefined
-    dispatch(dashboardActions.setDashboardFilters({ vigilanceAreaPeriod: value }))
+    dispatch(dashboardFiltersActions.setFilters({ filters: { vigilanceAreaPeriod: value }, id }))
   }
 
   const deleteRegulatoryTheme = (regulatoryThemeToDelete: string) => {
@@ -60,15 +66,15 @@ export function DashboardFilters({ dashboard }: FiltersProps) {
   }
 
   const updateDateRangeFilter = (dateRange: DateAsStringRange | undefined) => {
-    dispatch(dashboardActions.setDashboardFilters({ specificPeriod: dateRange }))
+    dispatch(dashboardFiltersActions.setFilters({ filters: { specificPeriod: dateRange }, id }))
   }
 
   const resetFilters = () => {
-    dispatch(dashboardActions.resetDashboardFilters())
+    dispatch(dashboardFiltersActions.resetDashboardFilters({ id }))
   }
 
   const showSelectedItems = () => {
-    dispatch(dashboardActions.setDashboardFilters({ previewSelection: true }))
+    dispatch(dashboardFiltersActions.setFilters({ filters: { previewSelection: true }, id }))
   }
 
   const hasFilters = !!(