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[]