feat: add filter to dashboard list and map panel

frontend/cypress/e2e/side_window/dashboard_list/filters.spec.ts

@@ -0,0 +1,105 @@
+import { customDayjs } from '@mtes-mct/monitor-ui'
+
+import { getUtcDateInMultipleFormats } from '../../utils/getUtcDateInMultipleFormats'
+import { visitSideWindow } from '../../utils/visitSideWindow'
+
+context('Side Window > Dashboard List > Filter Bar', () => {
+  beforeEach(() => {
+    cy.viewport(1280, 1024)
+    visitSideWindow()
+    cy.clickButton('Tableaux de bord')
+  })
+
+  it('Should filter dashboard for today', () => {
+    cy.fill('Date de mise à jour', 'Aujourd’hui')
+
+    cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
+
+    cy.clickButton('Réinitialiser les filtres')
+  })
+
+  it('Should filter dashboard for the last week', () => {
+    cy.fill('Date de mise à jour', 'Une semaine')
+
+    cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
+
+    cy.clickButton('Réinitialiser les filtres')
+  })
+
+  it('Should filter dashboard for the last month', () => {
+    cy.fill('Date de mise à jour', 'Un mois')
+
+    cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
+  })
+
+  it('Should filter dashboard for the current year', () => {
+    cy.fill('Date de mise à jour', 'Année en cours')
+
+    cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
+
+    cy.clickButton('Réinitialiser les filtres')
+  })
+
+  it('Should filter dashboards by specific period', () => {
+    cy.fill('Date de mise à jour', 'Période spécifique')
+
+    const expectedStartDate = getUtcDateInMultipleFormats('2024-01-01T00:00:00.000Z')
+    const expectedEndDate = getUtcDateInMultipleFormats(customDayjs().toISOString())
+
+    cy.fill('Période spécifique de la date de mise à jour', [
+      expectedStartDate.asDatePickerDate,
+      expectedEndDate.asDatePickerDate
+    ])
+
+    cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
+
+    cy.clickButton('Réinitialiser les filtres')
+  })
+
+  it('Should filter dashboard by sea front', () => {
+    cy.wait(200)
+    cy.fill('Façade', ['NAMO'])
+
+    cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
+    cy.get('.Table-SimpleTable tr').each((row, index) => {
+      if (index === 0) {
+        return
+      }
+
+      cy.wrap(row).should('contain', 'NAMO')
+    })
+
+    cy.clickButton('Réinitialiser les filtres')
+  })
+
+  it('Should filter dashboard by regulatory themes', () => {
+    cy.wait(200)
+    cy.fill('Thématique réglementaire', ['RNN'])
+
+    cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
+    cy.get('.Table-SimpleTable tr').each((row, index) => {
+      if (index === 0) {
+        return
+      }
+
+      cy.wrap(row).should('contain', 'RNN Iroise')
+    })
+
+    cy.clickButton('Réinitialiser les filtres')
+  })
+
+  it('Should filter dashboards by units', () => {
+    cy.fill('Unité', ['DML'])
+
+    cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
+    cy.get('.Table-SimpleTable tr').each((row, index) => {
+      if (index === 0) {
+        return
+      }
+
+      cy.wrap(row).should('contain', 'DML 2A (DDTM)')
+    })
+
+    cy.clickButton('Réinitialiser les filtres')
+  })
+})

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

@@ -1,3 +1,4 @@
+import { useObserverAccordion } from '@features/Dashboard/hooks/useObserverAccordion'
 import {
   getFilteredAmps,
   getFilteredRegulatoryAreas,
@@ -14,7 +15,6 @@ import { RegulatoryAreas } from '../RegulatoryAreas'
 import { VigilanceAreas } from '../VigilanceAreas'
 import { BaseColumn } from './style'
 import { type ColumnProps } from './utils'
-import { useObserverAccordion } from '../useObserverAccordion'
 
 import type { DashboardFilters } from '../slice'
 

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

@@ -1,3 +1,4 @@
+import { useObserverAccordion } from '@features/Dashboard/hooks/useObserverAccordion'
 import { getFilteredReportings, type DashboardType } from '@features/Dashboard/slice'
 import { Dashboard } from '@features/Dashboard/types'
 import { useAppSelector } from '@hooks/useAppSelector'
@@ -9,7 +10,6 @@ import { getReportingFilters } from '../slice'
 import { TerritorialPressure } from '../TerritorialPressure'
 import { BaseColumn } from './style'
 import { type ColumnProps } from './utils'
-import { useObserverAccordion } from '../useObserverAccordion'
 
 type SecondColumnProps = {
   dashboardForm: [string, DashboardType]

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

@@ -1,5 +1,6 @@
 import { RTK_DEFAULT_QUERY_OPTIONS } from '@api/constants'
 import { useGetControlUnitsQuery } from '@api/controlUnitsAPI'
+import { useObserverAccordion } from '@features/Dashboard/hooks/useObserverAccordion'
 import { type DashboardType } from '@features/Dashboard/slice'
 import { Dashboard } from '@features/Dashboard/types'
 import { isNotArchived } from '@utils/isNotArchived'
@@ -11,7 +12,6 @@ import { Weather } from '../Weather'
 import { BaseColumn } from './style'
 import { type ColumnProps } from './utils'
 import { type BookmarkType, Bookmark } from '../Bookmark'
-import { useObserverAccordion } from '../useObserverAccordion'
 
 type ThirdColumnProps = {
   dashboardForm: [string, DashboardType]

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

@@ -1,6 +1,7 @@
 import { useGetReportingsByIdsQuery } from '@api/reportingsAPI'
 import { pluralize } from '@mtes-mct/monitor-ui'
 import { forwardRef, useEffect, useState } from 'react'
+import styled from 'styled-components'
 
 import { Accordion } from '../Accordion'
 import { SelectedAccordion } from '../SelectedAccordion'
@@ -36,7 +37,7 @@ export const Reportings = forwardRef<HTMLDivElement, ReportingsProps>(
           title="Signalements"
           titleRef={ref}
         >
-          <Filters />
+          <StyledFilters $isExpanded={isExpanded} />
           {reportings?.map(reporting => (
             <Layer key={reporting.id} isPinned={selectedReportingIds.includes(+reporting.id)} reporting={reporting} />
           ))}
@@ -58,3 +59,8 @@ export const Reportings = forwardRef<HTMLDivElement, ReportingsProps>(
     )
   }
 )
+
+const StyledFilters = styled(Filters)<{ $isExpanded: boolean }>`
+  visibility: ${({ $isExpanded }) => ($isExpanded ? 'visible' : 'hidden')};
+  transition-delay: ${({ $isExpanded }) => ($isExpanded ? '0.5s visibility' : '0')};
+`

frontend/src/features/Dashboard/components/DashboardForm/slice.ts

@@ -1,5 +1,5 @@
 import { createSelector, createSlice, type PayloadAction } from '@reduxjs/toolkit'
-import { ReportingDateRangeEnum } from 'domain/entities/dateRange'
+import { DateRangeEnum } from 'domain/entities/dateRange'
 import { StatusFilterEnum } from 'domain/entities/reporting'
 import { set } from 'lodash'
 import { persistReducer } from 'redux-persist'
@@ -14,7 +14,7 @@ const persistConfig = {
 }
 
 export type ReportingFilters = {
-  dateRange: ReportingDateRangeEnum
+  dateRange: DateRangeEnum
   period?: DateAsStringRange
   status: StatusFilterEnum[]
 }
@@ -34,6 +34,14 @@ export type DashboardFilters = {
   vigilanceAreaPeriod?: VigilanceArea.VigilanceAreaFilterPeriod | undefined
 }
 
+export type DashboardsListFilters = {
+  controlUnits: number[]
+  regulatoryThemes: string[]
+  seaFronts: string[]
+  specificPeriod?: DateAsStringRange
+  updatedAt: DateRangeEnum
+}
+
 export type DashboardFiltersType = {
   controlUnitFilters: ControlUnitFilters
   filters: DashboardFilters
@@ -44,9 +52,20 @@ type DashboardFiltersState = {
   dashboards: {
     [key: string]: DashboardFiltersType
   }
+  filters: DashboardsListFilters
+}
+
+export const INITIAL_LIST_FILTERS_STATE: DashboardsListFilters = {
+  controlUnits: [],
+  regulatoryThemes: [],
+  seaFronts: [],
+  specificPeriod: undefined,
+  updatedAt: DateRangeEnum.MONTH
 }
+
 const INITIAL_STATE: DashboardFiltersState = {
-  dashboards: {}
+  dashboards: {},
+  filters: INITIAL_LIST_FILTERS_STATE
 }
 export const dashboardFiltersSlice = createSlice({
   initialState: INITIAL_STATE,
@@ -58,7 +77,7 @@ export const dashboardFiltersSlice = createSlice({
         controlUnitFilters: {},
         filters: {},
         reportingFilters: {
-          dateRange: ReportingDateRangeEnum.MONTH,
+          dateRange: DateRangeEnum.MONTH,
           status: [StatusFilterEnum.IN_PROGRESS]
         }
       }
@@ -78,6 +97,9 @@ export const dashboardFiltersSlice = createSlice({
         state.dashboards[id].filters = {}
       }
     },
+    resetFilters(state) {
+      state.filters = INITIAL_LIST_FILTERS_STATE
+    },
     setControlUnitsFilters(
       state,
       action: PayloadAction<{
@@ -103,7 +125,7 @@ export const dashboardFiltersSlice = createSlice({
         controlUnitFilters: {},
         filters: {},
         reportingFilters: {
-          dateRange: ReportingDateRangeEnum.MONTH,
+          dateRange: DateRangeEnum.MONTH,
           status: [StatusFilterEnum.IN_PROGRESS]
         }
       }
@@ -117,6 +139,9 @@ export const dashboardFiltersSlice = createSlice({
         state.dashboards[id].filters = { ...state.dashboards[id].filters, ...filters }
       }
     },
+    setListFilters(state, action: PayloadAction<Partial<DashboardsListFilters>>) {
+      state.filters = { ...state.filters, ...action.payload }
+    },
     setReportingFilters(state, action: PayloadAction<{ filters: Partial<ReportingFilters>; id: string | undefined }>) {
       const { filters, id } = action.payload
       if (!id) {
@@ -126,6 +151,15 @@ export const dashboardFiltersSlice = createSlice({
         const { reportingFilters } = state.dashboards[id]
         state.dashboards[id].reportingFilters = { ...reportingFilters, ...filters }
       }
+    },
+    updateFilters: (
+      state,
+      action: PayloadAction<{
+        key: keyof DashboardsListFilters
+        value: any
+      }>
+    ) => {
+      state.filters[action.payload.key] = action.payload.value
     }
   }
 })