From 1426fbeaaca73244ff4fc745514606edb4c47634 Mon Sep 17 00:00:00 2001 From: Claire Dagan Date: Fri, 27 Oct 2023 14:33:12 +0200 Subject: [PATCH] [Tech] use CheckPicker from monitor-ui --- .../features/Reportings/Filters/Map/index.tsx | 43 ++++++----- .../Reportings/Filters/Table/index.tsx | 71 +++++++++---------- .../src/features/Reportings/Filters/style.ts | 7 +- .../hooks/useGetFilteredReportingsQuery.ts | 10 +-- .../layersSelector/search/LayerFilters.tsx | 40 +++++------ .../features/layersSelector/search/index.tsx | 6 +- 6 files changed, 80 insertions(+), 97 deletions(-) diff --git a/frontend/src/features/Reportings/Filters/Map/index.tsx b/frontend/src/features/Reportings/Filters/Map/index.tsx index 634a8721ec..2d837a2c39 100644 --- a/frontend/src/features/Reportings/Filters/Map/index.tsx +++ b/frontend/src/features/Reportings/Filters/Map/index.tsx @@ -1,4 +1,4 @@ -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' @@ -6,7 +6,7 @@ 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( - updateSourceTypeFilter(value)} + options={sourceTypeOptions} placeholder="Type de source" renderValue={() => sourceTypeFilter && {`Type (${sourceTypeFilter.length})`}} searchable={false} - size="sm" value={sourceTypeFilter} - valueKey="value" /> {sourceTypeFilter.length > 0 && ( @@ -138,15 +138,15 @@ export function MapReportingsFiltersWithRef( /> - updateSimpleFilter(value, ReportingsFiltersEnum.THEME_FILTER)} + options={themesListAsOptions} placeholder="Thématiques" renderValue={() => themeFilter && {`Thème (${themeFilter.length})`}} - size="sm" value={themeFilter} - valueKey="value" /> {themeFilter.length > 0 && ( @@ -164,15 +164,14 @@ export function MapReportingsFiltersWithRef( )} - updateSimpleFilter(value, ReportingsFiltersEnum.SUB_THEMES_FILTER)} + options={subThemesListAsOptions} placeholder="Sous-thématiques" renderValue={() => subThemesFilter && {`Sous-thème (${subThemesFilter.length})`}} - 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 index 9624a38ae3..af5ce7b13e 100644 --- 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} /> - updateSourceTypeFilter(value)} + options={sourceTypeOptions} placeholder="Type de source" renderValue={() => sourceTypeFilter && {`Type (${sourceTypeFilter.length})`}} searchable={false} - size="sm" style={tagPickerStyle} value={sourceTypeFilter} - valueKey="value" /> - updateSimpleFilter(value, ReportingsFiltersEnum.SOURCE_FILTER)} + options={sourceOptions} placeholder="Source" renderValue={() => sourceFilter && {`Source (${sourceFilter.length})`}} - size="sm" style={tagPickerStyle} value={sourceFilter} - valueKey="value" /> - updateSimpleFilter(value, ReportingsFiltersEnum.THEME_FILTER)} + options={themesListAsOptions} placeholder="Thématiques" renderValue={() => themeFilter && {`Thème (${themeFilter.length})`}} - size="sm" style={{ width: 311 }} value={themeFilter} - valueKey="value" /> - updateSimpleFilter(value, ReportingsFiltersEnum.SUB_THEMES_FILTER)} + options={subThemesListAsOptions} placeholder="Sous-thématiques" renderValue={() => subThemesFilter && {`Sous-thème (${subThemesFilter.length})`}} - size="sm" style={{ width: 311 }} value={subThemesFilter} - valueKey="value" /> - updateSimpleFilter(value, ReportingsFiltersEnum.SEA_FRONT_FILTER)} + options={seaFrontsOptions} placeholder="Facade" renderValue={() => seaFrontFilter && {`Facade (${seaFrontFilter.length})`}} searchable={false} size="sm" style={tagPickerStyle} value={seaFrontFilter} - valueKey="value" /> diff --git a/frontend/src/features/Reportings/Filters/style.ts b/frontend/src/features/Reportings/Filters/style.ts index 50d3b7db12..c2675b33e1 100644 --- 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 index 4a73b2a448..128087db3b 100644 --- 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 index 21be88c523..09802020c5 100644 --- 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 ( - filteredRegulatoryThemes && ( @@ -43,8 +45,9 @@ export function LayerFilters({ valueKey="value" /> - {filteredRegulatoryThemes.length > 0 && - filteredRegulatoryThemes.map(theme => ( + {filteredRegulatoryThemes && + filteredRegulatoryThemes?.length > 0 && + filteredRegulatoryThemes?.map(theme => ( - filteredAmpTypes && {`Type d'AMP (${filteredAmpTypes.length})`}} size="sm" @@ -67,15 +71,15 @@ export function LayerFilters({ valueKey="value" /> - {filteredAmpTypes.length > 0 && - filteredAmpTypes.map(type => ( + {filteredAmpTypes?.length > 0 && + filteredAmpTypes?.map(type => ( {type} ))} - {(filteredRegulatoryThemes?.length > 0 || filteredAmpTypes.length > 0) && ( + {(filteredRegulatoryThemes?.length > 0 || filteredAmpTypes?.length > 0) && ( Réinitialiser les filtres @@ -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 index 6ba7163692..1289ba036a 100644 --- 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[]