[Tech] use CheckPicker from monitor-ui

MTES-MCT · Oct 27, 2023 · 1426fbe · 1426fbe
1 parent 68cd6ce
commit 1426fbe
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 97 deletions.
diff --git a/frontend/src/features/Reportings/Filters/Map/index.tsx b/frontend/src/features/Reportings/Filters/Map/index.tsx
@@ -1,12 +1,12 @@
-import { DateRangePicker, Checkbox, SingleTag, Accent } from '@mtes-mct/monitor-ui'
+import { CheckPicker, DateRangePicker, Checkbox, SingleTag, Accent } from '@mtes-mct/monitor-ui'
 import { forwardRef, useRef } from 'react'
 import styled from 'styled-components'
 
 import { ReportingSourceLabels } from '../../../../domain/entities/reporting'
 import { ReportingsFiltersEnum, reportingsFiltersActions } from '../../../../domain/shared_slices/ReportingsFilters'
 import { useAppDispatch } from '../../../../hooks/useAppDispatch'
 import { useAppSelector } from '../../../../hooks/useAppSelector'
-import { OptionValue, StyledCheckPicker, StyledSelect, StyledStatusFilter } from '../style'
+import { OptionValue, StyledSelect, StyledStatusFilter } from '../style'
 
 export function MapReportingsFiltersWithRef(
   {
@@ -23,13 +23,13 @@ export function MapReportingsFiltersWithRef(
   const dispatch = useAppDispatch()
   const {
     periodFilter,
-    sourceTypeFilter,
+    sourceTypeFilter = [],
     startedAfter,
     startedBefore,
-    statusFilter,
-    subThemesFilter,
-    themeFilter,
-    typeFilter
+    statusFilter = [],
+    subThemesFilter = [],
+    themeFilter = [],
+    typeFilter = []
   } = useAppSelector(state => state.reportingFilters)
 
   const {
@@ -98,17 +98,17 @@ export function MapReportingsFiltersWithRef(
       </StyledBloc>
 
       <StyledBloc>
-        <StyledCheckPicker
-          data={sourceTypeOptions}
+        <CheckPicker
           data-cy="select-source-type-filter"
-          labelKey="label"
+          isLabelHidden
+          label="Type de source"
+          name="sourceType"
           onChange={value => updateSourceTypeFilter(value)}
+          options={sourceTypeOptions}
           placeholder="Type de source"
           renderValue={() => sourceTypeFilter && <OptionValue>{`Type (${sourceTypeFilter.length})`}</OptionValue>}
           searchable={false}
-          size="sm"
           value={sourceTypeFilter}
-          valueKey="value"
         />
 
         {sourceTypeFilter.length > 0 && (
@@ -138,15 +138,15 @@ export function MapReportingsFiltersWithRef(
         />
       </StyledBloc>
       <StyledBloc>
-        <StyledCheckPicker
-          data={themesListAsOptions}
-          labelKey="label"
+        <CheckPicker
+          isLabelHidden
+          label="Thématiques"
+          name="themes"
           onChange={value => updateSimpleFilter(value, ReportingsFiltersEnum.THEME_FILTER)}
+          options={themesListAsOptions}
           placeholder="Thématiques"
           renderValue={() => themeFilter && <OptionValue>{`Thème (${themeFilter.length})`}</OptionValue>}
-          size="sm"
           value={themeFilter}
-          valueKey="value"
         />
 
         {themeFilter.length > 0 && (
@@ -164,15 +164,14 @@ export function MapReportingsFiltersWithRef(
           </StyledTagsContainer>
         )}
 
-        <StyledCheckPicker
-          data={subThemesListAsOptions}
-          labelKey="label"
+        <CheckPicker
+          label="Sous-thématiques"
+          name="subThemes"
           onChange={value => updateSimpleFilter(value, ReportingsFiltersEnum.SUB_THEMES_FILTER)}
+          options={subThemesListAsOptions}
           placeholder="Sous-thématiques"
           renderValue={() => subThemesFilter && <OptionValue>{`Sous-thème (${subThemesFilter.length})`}</OptionValue>}
-          size="sm"
           value={subThemesFilter}
-          valueKey="value"
         />
 
         {subThemesFilter.length > 0 && (

diff --git a/frontend/src/features/Reportings/Filters/Table/index.tsx b/frontend/src/features/Reportings/Filters/Table/index.tsx
@@ -1,4 +1,4 @@
-import { DateRangePicker, useNewWindow, Checkbox, Icon } from '@mtes-mct/monitor-ui'
+import { CheckPicker, DateRangePicker, useNewWindow, Checkbox, Icon } from '@mtes-mct/monitor-ui'
 import { forwardRef } from 'react'
 import styled from 'styled-components'
 
@@ -7,7 +7,6 @@ import { ReportingsFiltersEnum } from '../../../../domain/shared_slices/Reportin
 import { useAppSelector } from '../../../../hooks/useAppSelector'
 import {
   OptionValue,
-  StyledCheckPicker,
   StyledCustomPeriodContainer,
   StyledCutomPeriodLabel,
   StyledSelect,
@@ -33,15 +32,15 @@ export function TableReportingsFiltersWithRef(
   const {
     hasFilters,
     periodFilter,
-    seaFrontFilter,
-    sourceFilter,
-    sourceTypeFilter,
+    seaFrontFilter = [],
+    sourceFilter = [],
+    sourceTypeFilter = [],
     startedAfter,
     startedBefore,
-    statusFilter,
-    subThemesFilter,
-    themeFilter,
-    typeFilter
+    statusFilter = [],
+    subThemesFilter = [],
+    themeFilter = [],
+    typeFilter = []
   } = useAppSelector(state => state.reportingFilters)
   const {
     dateRangeOptions,
@@ -88,33 +87,31 @@ export function TableReportingsFiltersWithRef(
             value={periodFilter}
           />
 
-          <StyledCheckPicker
-            container={newWindowContainerRef.current}
-            data={sourceTypeOptions}
+          <CheckPicker
             data-cy="select-source-type-filter"
-            labelKey="label"
+            isLabelHidden
+            label="Type de source"
+            name="sourceType"
             onChange={value => updateSourceTypeFilter(value)}
+            options={sourceTypeOptions}
             placeholder="Type de source"
             renderValue={() => sourceTypeFilter && <OptionValue>{`Type (${sourceTypeFilter.length})`}</OptionValue>}
             searchable={false}
-            size="sm"
             style={tagPickerStyle}
             value={sourceTypeFilter}
-            valueKey="value"
           />
 
-          <StyledCheckPicker
-            container={newWindowContainerRef.current}
-            data={sourceOptions}
+          <CheckPicker
             data-cy="select-source-filter"
-            labelKey="label"
+            isLabelHidden
+            label="Source"
+            name="source"
             onChange={value => updateSimpleFilter(value, ReportingsFiltersEnum.SOURCE_FILTER)}
+            options={sourceOptions}
             placeholder="Source"
             renderValue={() => sourceFilter && <OptionValue>{`Source (${sourceFilter.length})`}</OptionValue>}
-            size="sm"
             style={tagPickerStyle}
             value={sourceFilter}
-            valueKey="value"
           />
 
           <StyledSelect
@@ -129,42 +126,40 @@ export function TableReportingsFiltersWithRef(
             style={tagPickerStyle}
             value={typeFilter}
           />
-          <StyledCheckPicker
-            container={newWindowContainerRef.current}
-            data={themesListAsOptions}
-            labelKey="label"
+          <CheckPicker
+            isLabelHidden
+            label="Thématiques"
+            name="themes"
             onChange={value => updateSimpleFilter(value, ReportingsFiltersEnum.THEME_FILTER)}
+            options={themesListAsOptions}
             placeholder="Thématiques"
             renderValue={() => themeFilter && <OptionValue>{`Thème (${themeFilter.length})`}</OptionValue>}
-            size="sm"
             style={{ width: 311 }}
             value={themeFilter}
-            valueKey="value"
           />
-          <StyledCheckPicker
-            container={newWindowContainerRef.current}
-            data={subThemesListAsOptions}
-            labelKey="label"
+          <CheckPicker
+            isLabelHidden
+            label="Sous-thématiques"
+            name="subThemes"
             onChange={value => updateSimpleFilter(value, ReportingsFiltersEnum.SUB_THEMES_FILTER)}
+            options={subThemesListAsOptions}
             placeholder="Sous-thématiques"
             renderValue={() => subThemesFilter && <OptionValue>{`Sous-thème (${subThemesFilter.length})`}</OptionValue>}
-            size="sm"
             style={{ width: 311 }}
             value={subThemesFilter}
-            valueKey="value"
           />
-          <StyledCheckPicker
-            container={newWindowContainerRef.current}
-            data={seaFrontsOptions}
-            labelKey="label"
+          <CheckPicker
+            isLabelHidden
+            label="Facade"
+            name="seaFront"
             onChange={value => updateSimpleFilter(value, ReportingsFiltersEnum.SEA_FRONT_FILTER)}
+            options={seaFrontsOptions}
             placeholder="Facade"
             renderValue={() => seaFrontFilter && <OptionValue>{`Facade (${seaFrontFilter.length})`}</OptionValue>}
             searchable={false}
             size="sm"
             style={tagPickerStyle}
             value={seaFrontFilter}
-            valueKey="value"
           />
         </StyledFiltersSecondLine>
       </FilterWrapper>

diff --git a/frontend/src/features/Reportings/Filters/style.ts b/frontend/src/features/Reportings/Filters/style.ts
@@ -1,5 +1,4 @@
 import { Select } from '@mtes-mct/monitor-ui'
-import { CheckPicker } from 'rsuite'
 import styled from 'styled-components'
 
 export const StyledStatusFilter = styled.div`
@@ -16,11 +15,7 @@ export const StyledSelect = styled(Select)`
     top: 5px !important;
   }
 `
-export const StyledCheckPicker = styled(CheckPicker)`
-  .rs-picker-toggle-placeholder {
-    font-size: 13px !important;
-  }
-`
+
 export const StyledTagsContainer = styled.div<{ $withMargin: boolean }>`
   margin-top: ${p => (p.$withMargin ? '16px' : '0px')};
   display: flex;

diff --git a/frontend/src/features/Reportings/hooks/useGetFilteredReportingsQuery.ts b/frontend/src/features/Reportings/hooks/useGetFilteredReportingsQuery.ts
@@ -11,14 +11,14 @@ const TWO_MINUTES = 2 * 60 * 1000
 
 export const useGetFilteredReportingsQuery = () => {
   const {
-    seaFrontFilter,
-    sourceFilter,
-    sourceTypeFilter,
+    seaFrontFilter = [],
+    sourceFilter = [],
+    sourceTypeFilter = [],
     startedAfter,
     startedBefore,
     statusFilter,
-    subThemesFilter,
-    themeFilter,
+    subThemesFilter = [],
+    themeFilter = [],
     typeFilter
   } = useAppSelector(state => state.reportingFilters)
   const { data, isError, isFetching, isLoading } = useGetReportingsQuery(

diff --git a/frontend/src/features/layersSelector/search/LayerFilters.tsx b/frontend/src/features/layersSelector/search/LayerFilters.tsx
@@ -1,5 +1,5 @@
-import { Accent, SingleTag } from '@mtes-mct/monitor-ui'
-import { Button, CheckPicker } from 'rsuite'
+import { Accent, CheckPicker, SingleTag } from '@mtes-mct/monitor-ui'
+import { Button } from 'rsuite'
 import styled from 'styled-components'
 
 export function LayerFilters({
@@ -28,10 +28,12 @@ export function LayerFilters({
 
   return (
     <FiltersWrapper>
-      <StyledCheckPicker
-        data={regulatoryThemes}
-        labelKey="label"
+      <CheckPicker
+        isLabelHidden
+        label="Thématique réglementaire"
+        name="regulatoryThemes"
         onChange={handleSetFilteredRegulatoryThemes}
+        options={regulatoryThemes || []}
         placeholder="Thématique réglementaire"
         renderValue={() =>
           filteredRegulatoryThemes && (
@@ -43,8 +45,9 @@ export function LayerFilters({
         valueKey="value"
       />
       <TagWrapper>
-        {filteredRegulatoryThemes.length > 0 &&
-          filteredRegulatoryThemes.map(theme => (
+        {filteredRegulatoryThemes &&
+          filteredRegulatoryThemes?.length > 0 &&
+          filteredRegulatoryThemes?.map(theme => (
             <SingleTag
               key={theme}
               accent={Accent.SECONDARY}
@@ -56,26 +59,27 @@ export function LayerFilters({
           ))}
       </TagWrapper>
 
-      <StyledCheckPicker
-        data={ampTypes}
-        labelKey="label"
+      <CheckPicker
+        label="Type d'AMP"
+        name="ampTypes"
         onChange={handleSetFilteredAmpTypes}
+        options={ampTypes}
         placeholder="Type d'AMP"
         renderValue={() => filteredAmpTypes && <OptionValue>{`Type d'AMP (${filteredAmpTypes.length})`}</OptionValue>}
         size="sm"
         value={filteredAmpTypes}
         valueKey="value"
       />
       <TagWrapper>
-        {filteredAmpTypes.length > 0 &&
-          filteredAmpTypes.map(type => (
+        {filteredAmpTypes?.length > 0 &&
+          filteredAmpTypes?.map(type => (
             <SingleTag key={type} accent={Accent.SECONDARY} onDelete={handleDeleteAmpType(type)} title={type}>
               {type}
             </SingleTag>
           ))}
       </TagWrapper>
 
-      {(filteredRegulatoryThemes?.length > 0 || filteredAmpTypes.length > 0) && (
+      {(filteredRegulatoryThemes?.length > 0 || filteredAmpTypes?.length > 0) && (
         <ResetFilters appearance="link" onClick={handleResetFilters}>
           Réinitialiser les filtres
         </ResetFilters>
@@ -101,16 +105,6 @@ const ResetFilters = styled(Button)`
   padding: 0px;
 `
 
-const StyledCheckPicker = styled(CheckPicker)`
-  width: 100%;
-  .rs-picker-toggle {
-    background-color: ${p => p.theme.color.white} !important;
-  }
-  .rs-picker-toggle-placeholder {
-    font-size: 13px !important;
-  }
-`
-
 const OptionValue = styled.span`
   display: flex;
   overflow: hidden;

diff --git a/frontend/src/features/layersSelector/search/index.tsx b/frontend/src/features/layersSelector/search/index.tsx
@@ -86,14 +86,14 @@ export function LayerSearch({ isVisible }) {
       setTimeout(() => {
         isSearchThrottled.current = false
 
-        if (searchedText.length > 2 || ampTypes.length > 0 || geofilter) {
+        if (searchedText.length > 2 || ampTypes?.length > 0 || geofilter) {
           let searchedAMPS
           let itemSchema
-          if (searchedText.length > 2 || ampTypes.length > 0) {
+          if (searchedText.length > 2 || ampTypes?.length > 0) {
             const filterWithTextExpression =
               searchedText.length > 0 ? { $path: ['name'], $val: searchedText } : undefined
             const filterWithType =
-              ampTypes.length > 0 ? { $or: ampTypes.map(theme => ({ $path: 'type', $val: theme })) } : undefined
+              ampTypes?.length > 0 ? { $or: ampTypes.map(theme => ({ $path: 'type', $val: theme })) } : undefined
 
             const filterExpression = [filterWithTextExpression, filterWithType].filter(f => !!f) as Fuse.Expression[]