[Dashboard] Add porting type filter and add possibility to select all…

… regulatory_areas in filter
MTES-MCT · Jan 28, 2025 · 06674c0 · 06674c0
1 parent c897341
commit 06674c0
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 43 deletions.
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Reportings/Filters.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Reportings/Filters.tsx
@@ -10,10 +10,11 @@ import {
   useNewWindow,
   type Option,
   type DateAsStringRange,
-  type OptionValueType
+  type OptionValueType,
+  Select
 } from '@mtes-mct/monitor-ui'
 import { DateRangeEnum, ReportingDateRangeLabels } from 'domain/entities/dateRange'
-import { StatusFilterEnum, StatusFilterLabels } from 'domain/entities/reporting'
+import { ReportingTypeLabels, StatusFilterEnum, StatusFilterLabels } from 'domain/entities/reporting'
 import { forwardRef, type ComponentProps } from 'react'
 import styled from 'styled-components'
 
@@ -30,6 +31,7 @@ export const Filters = forwardRef<HTMLDivElement, ComponentProps<'div'>>(({ ...p
 
   const dateRangeOptions = getOptionsFromLabelledEnum(ReportingDateRangeLabels)
   const statusOptions = getOptionsFromLabelledEnum(StatusFilterLabels)
+  const typeOptions = getOptionsFromLabelledEnum(ReportingTypeLabels)
 
   if (!reportingFilters) {
     return null
@@ -48,7 +50,7 @@ export const Filters = forwardRef<HTMLDivElement, ComponentProps<'div'>>(({ ...p
     if (dateRange) {
       dispatch(
         dashboardFiltersActions.setReportingFilters({
-          filters: { dateRange: dateRange as DateRangeEnum },
+          filters: { dateRange: dateRange as DateRangeEnum, period: undefined },
           id: dashboardId
         })
       )
@@ -73,6 +75,15 @@ export const Filters = forwardRef<HTMLDivElement, ComponentProps<'div'>>(({ ...p
     }
   }
 
+  const setTypeFilter = (type: string | undefined) => {
+    dispatch(
+      dashboardFiltersActions.setReportingFilters({
+        filters: { type },
+        id: dashboardId
+      })
+    )
+  }
+
   return (
     <Wrapper
       // eslint-disable-next-line react/jsx-props-no-spreading
@@ -81,7 +92,7 @@ export const Filters = forwardRef<HTMLDivElement, ComponentProps<'div'>>(({ ...p
       $hasChildren={filteredReportings.length > 1}
       $hasPeriodFilter={reportingFilters.dateRange === DateRangeEnum.CUSTOM}
     >
-      <StyledDatesWrapper $hasChildren={filteredReportings.length > 1}>
+      <DateAndTypeWrapper $hasChildren={filteredReportings.length > 1}>
         <DateRangeSelect
           cleanable={false}
           isLabelHidden
@@ -93,6 +104,18 @@ export const Filters = forwardRef<HTMLDivElement, ComponentProps<'div'>>(({ ...p
           placeholder="Date de signalement depuis"
           value={reportingFilters.dateRange}
         />
+        <Select
+          isLabelHidden
+          isTransparent
+          label="Type de signalement"
+          name="Type"
+          onChange={setTypeFilter}
+          options={typeOptions}
+          placeholder="Type de signalement"
+          value={reportingFilters.type}
+        />
+      </DateAndTypeWrapper>
+      <SpecificDateAndStatusWrapper $hasChildren={filteredReportings.length > 0}>
         {reportingFilters.dateRange === DateRangeEnum.CUSTOM && (
           <CustomPeriodContainer>
             <DateRangePicker
@@ -107,27 +130,30 @@ export const Filters = forwardRef<HTMLDivElement, ComponentProps<'div'>>(({ ...p
             />
           </CustomPeriodContainer>
         )}
-      </StyledDatesWrapper>
-
-      <StatusWrapper>
-        {statusOptions.map(statusOption => (
-          <Checkbox
-            key={statusOption.label}
-            checked={reportingFilters.status.includes(statusOption.value as StatusFilterEnum)}
-            label={statusOption.label}
-            name={statusOption.label}
-            onChange={isChecked => setStatusFilter(statusOption, isChecked)}
-          />
-        ))}
-      </StatusWrapper>
+
+        <StatusWrapper>
+          {statusOptions.map(statusOption => (
+            <Checkbox
+              key={statusOption.label}
+              checked={reportingFilters.status.includes(statusOption.value as StatusFilterEnum)}
+              label={statusOption.label}
+              name={statusOption.label}
+              onChange={isChecked => setStatusFilter(statusOption, isChecked)}
+            />
+          ))}
+        </StatusWrapper>
+      </SpecificDateAndStatusWrapper>
     </Wrapper>
   )
 })
 
 const Wrapper = styled.div<{ $hasChildren: boolean; $hasPeriodFilter: boolean }>`
   padding: 16px 24px;
   ${({ $hasChildren, $hasPeriodFilter }) => $hasPeriodFilter && !$hasChildren && 'padding-bottom: 58px;'}
-  ${({ $hasChildren }) => ($hasChildren ? 'display: flex; justify-content: space-between;' : 'display: flow-root;')}
+  ${({ $hasChildren }) =>
+    $hasChildren
+      ? 'display: flex; flex-direction: column; gap: 16px; justify-content: space-between;'
+      : 'display: flow-root;'}
 `
 const StatusWrapper = styled.fieldset`
   border: none;
@@ -136,13 +162,22 @@ const StatusWrapper = styled.fieldset`
   float: right;
   padding-bottom: 16px;
 `
-
-const StyledDatesWrapper = styled.div<{ $hasChildren: boolean }>`
+const DateAndTypeWrapper = styled.div<{ $hasChildren: boolean }>`
   display: flex;
-  flex-direction: column;
   gap: 16px;
   ${p => !p.$hasChildren && 'position: absolute;'}
-  z-index: 1;
+  z-index: 2;
+`
+
+const SpecificDateAndStatusWrapper = styled.div<{ $hasChildren: boolean }>`
+  display: flex;
+  gap: 16px;
+  ${p => !p.$hasChildren && 'position: relative; top: 40px;'}
+
+  > fieldset {
+    padding-bottom: 0px;
+    padding-left: 0px;
+  }
 `
 
 const DateRangeSelect = styled(StyledSelect)`

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Toolbar/Filters/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Toolbar/Filters/index.tsx
@@ -21,6 +21,9 @@ import { dashboardFiltersActions } from '../../slice'
 type FiltersProps = {
   dashboard: DashboardType
 }
+
+const ALL_REGULATOY_AREAS = 'ALL_REGULATOY_AREAS'
+
 export function DashboardFilters({ dashboard }: FiltersProps) {
   const dispatch = useAppDispatch()
   const { extractedArea } = dashboard
@@ -40,6 +43,37 @@ export function DashboardFilters({ dashboard }: FiltersProps) {
   const vigilanceAreaPeriodOptions = getOptionsFromLabelledEnum(VigilanceArea.VigilanceAreaFilterPeriodLabel)
 
   const setFilteredRegulatoryThemes = (value: string[] | undefined) => {
+    if (filters?.regulatoryThemes?.includes(ALL_REGULATOY_AREAS) && !value?.includes(ALL_REGULATOY_AREAS)) {
+      dispatch(dashboardFiltersActions.setFilters({ filters: { regulatoryThemes: [] }, id }))
+
+      return
+    }
+
+    if (value?.includes('ALL')) {
+      // Delete one item when 'ALL_REGULATOY_AREAS' is selected
+      if (
+        filters?.regulatoryThemes &&
+        filters?.regulatoryThemes.length > 0 &&
+        filters?.regulatoryThemes.length > value?.length
+      ) {
+        const filtersWithoutAll = value?.filter(filter => filter !== ALL_REGULATOY_AREAS)
+        dispatch(dashboardFiltersActions.setFilters({ filters: { regulatoryThemes: filtersWithoutAll }, id }))
+
+        return
+      }
+
+      // Select all
+      const allRegulatoryAreasIds = regulatoryThemesAsOption.map(regulatory => regulatory.value)
+      dispatch(
+        dashboardFiltersActions.setFilters({
+          filters: { regulatoryThemes: [ALL_REGULATOY_AREAS, ...allRegulatoryAreasIds] },
+          id
+        })
+      )
+
+      return
+    }
+
     dispatch(dashboardFiltersActions.setFilters({ filters: { regulatoryThemes: value }, id }))
   }
 
@@ -66,7 +100,7 @@ export function DashboardFilters({ dashboard }: FiltersProps) {
           label="Thématique réglementaire"
           name="regulatoryThemes"
           onChange={setFilteredRegulatoryThemes}
-          options={regulatoryThemesAsOption}
+          options={[{ label: 'Tout sélectionner', value: ALL_REGULATOY_AREAS }, ...regulatoryThemesAsOption]}
           placeholder="Thématique réglementaire"
           renderValue={() =>
             filters?.regulatoryThemes && (

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/slice.ts b/frontend/src/features/Dashboard/components/DashboardForm/slice.ts
@@ -1,6 +1,6 @@
 import { createSelector, createSlice, type PayloadAction } from '@reduxjs/toolkit'
 import { DateRangeEnum } from 'domain/entities/dateRange'
-import { StatusFilterEnum } from 'domain/entities/reporting'
+import { ReportingTypeLabels, StatusFilterEnum } from 'domain/entities/reporting'
 import { set } from 'lodash'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
@@ -17,6 +17,7 @@ export type ReportingFilters = {
   dateRange: DateRangeEnum
   period?: DateAsStringRange
   status: StatusFilterEnum[]
+  type?: string
 }
 
 export type ControlUnitFilters = {
@@ -78,7 +79,8 @@ export const dashboardFiltersSlice = createSlice({
         filters: {},
         reportingFilters: {
           dateRange: DateRangeEnum.MONTH,
-          status: [StatusFilterEnum.IN_PROGRESS]
+          status: [StatusFilterEnum.IN_PROGRESS],
+          type: ReportingTypeLabels.INFRACTION_SUSPICION
         }
       }
     },

diff --git a/frontend/src/features/Dashboard/useCases/filters/filterReportings.test.ts b/frontend/src/features/Dashboard/useCases/filters/filterReportings.test.ts
@@ -8,6 +8,7 @@ import { filterReportings } from './filterReportings'
 
 describe('filterReportings', () => {
   const today = customDayjs().utc()
+  const type = ReportingTypeEnum.INFRACTION_SUSPICION
 
   describe('date range', () => {
     const status = [StatusFilterEnum.IN_PROGRESS]
@@ -18,7 +19,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status })).toEqual(true)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status, type })).toEqual(true)
     })
 
     it('should return false when reporting is not within the day', async () => {
@@ -28,7 +29,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status })).toEqual(false)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status, type })).toEqual(false)
     })
 
     it('should return true when reporting is within the week', async () => {
@@ -38,7 +39,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.WEEK, status })).toEqual(true)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.WEEK, status, type })).toEqual(true)
     })
 
     it('should return false when reporting is not within the week', async () => {
@@ -48,7 +49,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.WEEK, status })).toEqual(false)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.WEEK, status, type })).toEqual(false)
     })
     it('should return true when reporting is within the month', async () => {
       // Given
@@ -57,7 +58,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.MONTH, status })).toEqual(true)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.MONTH, status, type })).toEqual(true)
     })
 
     it('should return false when reporting is not within the month', async () => {
@@ -67,7 +68,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.MONTH, status })).toEqual(false)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.MONTH, status, type })).toEqual(false)
     })
     it('should return true when reporting is within the year', async () => {
       // Given
@@ -76,7 +77,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.YEAR, status })).toEqual(true)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.YEAR, status, type })).toEqual(true)
     })
 
     it('should return false when reporting is not within the year', async () => {
@@ -86,7 +87,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.YEAR, status })).toEqual(false)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.YEAR, status, type })).toEqual(false)
     })
 
     it('should return true when reporting is within the specific period', async () => {
@@ -100,7 +101,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.CUSTOM, period, status })).toEqual(true)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.CUSTOM, period, status, type })).toEqual(true)
     })
 
     it('should return false when reporting is not within the specific period', async () => {
@@ -114,7 +115,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.CUSTOM, period, status })).toEqual(false)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.CUSTOM, period, status, type })).toEqual(false)
     })
   })
   describe('in progress reporting', () => {
@@ -127,7 +128,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status })).toEqual(true)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status, type })).toEqual(true)
     })
 
     it('should return false when reporting is in progress and out of validity time', async () => {
@@ -138,7 +139,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status })).toEqual(false)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status, type })).toEqual(false)
     })
   })
   describe('archived reporting', () => {
@@ -151,7 +152,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status })).toEqual(true)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status, type })).toEqual(true)
     })
 
     it('should return true when reporting is archived and out of validity time', async () => {
@@ -163,7 +164,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status })).toEqual(true)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status, type })).toEqual(true)
     })
   })
 
@@ -177,7 +178,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status })).toEqual(true)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status, type })).toEqual(true)
     })
 
     it('should return true when reporting is archived and in progress and out of (archived) validity time', async () => {
@@ -189,7 +190,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status })).toEqual(true)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status, type })).toEqual(true)
     })
     it('should return true when reporting is archived and in progress and out of (in progress) validity time', async () => {
       // Given
@@ -200,7 +201,7 @@ describe('filterReportings', () => {
       })
 
       // When & then
-      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status })).toEqual(true)
+      expect(filterReportings(reporting, { dateRange: DateRangeEnum.DAY, status, type })).toEqual(true)
     })
   })
 })