[Dashboard] Fix tags in form

MTES-MCT · Jan 17, 2025 · 10bf82c · 10bf82c
1 parent b00b1b4
commit 10bf82c
Show file tree

Hide file tree

Showing 3 changed files with 165 additions and 126 deletions.
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Toolbar/Filters/FiltersTags.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Toolbar/Filters/FiltersTags.tsx
@@ -0,0 +1,97 @@
+import { CustomPeriodContainer, CustomPeriodLabel } from '@components/style'
+import { ReinitializeFiltersButton } from '@features/commonComponents/ReinitializeFiltersButton'
+import { VigilanceArea } from '@features/VigilanceArea/types'
+import { useAppDispatch } from '@hooks/useAppDispatch'
+import { useAppSelector } from '@hooks/useAppSelector'
+import { DateRangePicker, SingleTag, type DateAsStringRange } from '@mtes-mct/monitor-ui'
+import styled from 'styled-components'
+
+import { dashboardFiltersActions } from '../../slice'
+
+import type { DashboardType } from '@features/Dashboard/slice'
+
+type FiltersTagsProps = {
+  dashboard: DashboardType
+}
+
+export function FiltersTags({ dashboard }: FiltersTagsProps) {
+  const dispatch = useAppDispatch()
+
+  const { id } = dashboard.dashboard
+
+  const filters = useAppSelector(state => state.dashboardFilters.dashboards[id]?.filters)
+
+  const setFilteredRegulatoryThemes = (value: string[] | undefined) => {
+    dispatch(dashboardFiltersActions.setFilters({ filters: { regulatoryThemes: value }, id }))
+  }
+
+  const setFilteredAmpTypes = (value: string[] | undefined) => {
+    dispatch(dashboardFiltersActions.setFilters({ filters: { amps: value }, id }))
+  }
+
+  const deleteRegulatoryTheme = (regulatoryThemeToDelete: string) => {
+    setFilteredRegulatoryThemes(filters?.regulatoryThemes?.filter(theme => theme !== regulatoryThemeToDelete))
+  }
+
+  const deleteAmpType = (ampTypeToDelete: string) => {
+    setFilteredAmpTypes(filters?.amps?.filter(type => type !== ampTypeToDelete))
+  }
+
+  const updateDateRangeFilter = (dateRange: DateAsStringRange | undefined) => {
+    dispatch(dashboardFiltersActions.setFilters({ filters: { specificPeriod: dateRange }, id }))
+  }
+
+  const resetFilters = () => {
+    dispatch(dashboardFiltersActions.resetDashboardFilters({ id }))
+  }
+
+  const hasFilters = !!(
+    (filters?.regulatoryThemes && filters?.regulatoryThemes.length > 0) ||
+    (filters?.amps && filters?.amps.length > 0) ||
+    filters?.vigilanceAreaPeriod
+  )
+  if (!hasFilters && filters?.vigilanceAreaPeriod !== VigilanceArea.VigilanceAreaFilterPeriod.SPECIFIC_PERIOD) {
+    return null
+  }
+
+  return (
+    <TagsContainer data-cy="dashboard-filter-tags">
+      {filters?.vigilanceAreaPeriod === VigilanceArea.VigilanceAreaFilterPeriod.SPECIFIC_PERIOD && (
+        <CustomPeriodContainer>
+          <CustomPeriodLabel>Période spécifique</CustomPeriodLabel>
+          <DateRangePicker
+            key="dateRange"
+            defaultValue={filters?.specificPeriod ?? undefined}
+            isLabelHidden
+            isStringDate
+            label="Période spécifique"
+            name="dateRange"
+            onChange={updateDateRangeFilter}
+          />
+        </CustomPeriodContainer>
+      )}
+      {filters?.regulatoryThemes?.map(theme => (
+        <SingleTag key={theme} onDelete={() => deleteRegulatoryTheme(theme)} title={theme}>
+          {theme}
+        </SingleTag>
+      ))}
+
+      {filters?.amps?.map(type => (
+        <SingleTag key={type} onDelete={() => deleteAmpType(type)} title={type}>
+          {type}
+        </SingleTag>
+      ))}
+
+      <ReinitializeFiltersButton onClick={resetFilters} />
+    </TagsContainer>
+  )
+}
+
+const TagsContainer = styled.div`
+  align-items: end;
+  display: flex;
+  gap: 16px;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: 100%;
+`
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Toolbar/Filters/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Toolbar/Filters/index.tsx
@@ -1,19 +1,14 @@
-import { CustomPeriodContainer, CustomPeriodLabel } from '@components/style'
-import { ReinitializeFiltersButton } from '@features/commonComponents/ReinitializeFiltersButton'
 import { type DashboardType } from '@features/Dashboard/slice'
 import { VigilanceArea } from '@features/VigilanceArea/types'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
 import {
   CheckPicker,
   CustomSearch,
-  DateRangePicker,
   getOptionsFromLabelledEnum,
   Icon,
   Select,
-  SingleTag,
   THEME,
-  type DateAsStringRange,
   type OptionValueType
 } from '@mtes-mct/monitor-ui'
 import { getAmpsAsOptions } from '@utils/getAmpsAsOptions'
@@ -57,115 +52,60 @@ export function DashboardFilters({ dashboard }: FiltersProps) {
     dispatch(dashboardFiltersActions.setFilters({ filters: { vigilanceAreaPeriod: value }, id }))
   }
 
-  const deleteRegulatoryTheme = (regulatoryThemeToDelete: string) => {
-    setFilteredRegulatoryThemes(filters?.regulatoryThemes?.filter(theme => theme !== regulatoryThemeToDelete))
-  }
-
-  const deleteAmpType = (ampTypeToDelete: string) => {
-    setFilteredAmpTypes(filters?.amps?.filter(type => type !== ampTypeToDelete))
-  }
-
-  const updateDateRangeFilter = (dateRange: DateAsStringRange | undefined) => {
-    dispatch(dashboardFiltersActions.setFilters({ filters: { specificPeriod: dateRange }, id }))
-  }
-
-  const resetFilters = () => {
-    dispatch(dashboardFiltersActions.resetDashboardFilters({ id }))
-  }
-
   const showSelectedItems = () => {
     dispatch(dashboardFiltersActions.setFilters({ filters: { previewSelection: true }, id }))
   }
 
-  const hasFilters = !!(
-    (filters?.regulatoryThemes && filters?.regulatoryThemes.length > 0) ||
-    (filters?.amps && filters?.amps.length > 0) ||
-    filters?.vigilanceAreaPeriod
-  )
-
   return (
-    <>
-      <FiltersContainer>
-        <div>
-          <CheckPicker
-            customSearch={regulatoryThemesAsOption.length > 10 ? regulatoryThemesCustomSearch : undefined}
-            isLabelHidden
-            isTransparent
-            label="Thématique réglementaire"
-            name="regulatoryThemes"
-            onChange={setFilteredRegulatoryThemes}
-            options={regulatoryThemesAsOption}
-            placeholder="Thématique réglementaire"
-            renderValue={() =>
-              filters?.regulatoryThemes && (
-                <OptionValue>{`Thématique réglementaire (${filters?.regulatoryThemes.length})`}</OptionValue>
-              )
-            }
-            style={{ width: '310px' }}
-            value={filters?.regulatoryThemes}
-          />
-          <Select
-            isLabelHidden
-            isTransparent
-            label="Période de vigilance"
-            name="periodOfVigilanceArea"
-            onChange={setFilteredVigilancePeriod}
-            options={vigilanceAreaPeriodOptions}
-            placeholder="Période de vigilance"
-            style={{ width: '310px' }}
-            value={filters?.vigilanceAreaPeriod}
-          />
-          <CheckPicker
-            customSearch={ampsAsOptions.length > 10 ? AMPCustomSearch : undefined}
-            isLabelHidden
-            isTransparent
-            label="Type d'AMP"
-            name="ampTypes"
-            onChange={setFilteredAmpTypes}
-            options={ampsAsOptions}
-            placeholder="Type d'AMP"
-            renderValue={() => filters?.amps && <OptionValue>{`Type d'AMP (${filters?.amps.length})`}</OptionValue>}
-            style={{ width: '310px' }}
-            value={filters?.amps}
-          />
-        </div>
-        <StyledButton onClick={showSelectedItems} type="button">
-          <Icon.Pin color={THEME.color.slateGray} />
-          Prévisualiser la sélection
-        </StyledButton>
-      </FiltersContainer>
-      {(hasFilters || filters?.vigilanceAreaPeriod === VigilanceArea.VigilanceAreaFilterPeriod.SPECIFIC_PERIOD) && (
-        <TagsContainer data-cy="dashboard-filter-tags">
-          {filters?.vigilanceAreaPeriod === VigilanceArea.VigilanceAreaFilterPeriod.SPECIFIC_PERIOD && (
-            <CustomPeriodContainer>
-              <CustomPeriodLabel>Période spécifique</CustomPeriodLabel>
-              <DateRangePicker
-                key="dateRange"
-                defaultValue={filters?.specificPeriod ?? undefined}
-                isLabelHidden
-                isStringDate
-                label="Période spécifique"
-                name="dateRange"
-                onChange={updateDateRangeFilter}
-              />
-            </CustomPeriodContainer>
-          )}
-          {filters?.regulatoryThemes?.map(theme => (
-            <SingleTag key={theme} onDelete={() => deleteRegulatoryTheme(theme)} title={theme}>
-              {theme}
-            </SingleTag>
-          ))}
-
-          {filters?.amps?.map(type => (
-            <SingleTag key={type} onDelete={() => deleteAmpType(type)} title={type}>
-              {type}
-            </SingleTag>
-          ))}
-
-          <ReinitializeFiltersButton onClick={resetFilters} />
-        </TagsContainer>
-      )}
-    </>
+    <FiltersContainer>
+      <div>
+        <CheckPicker
+          customSearch={regulatoryThemesAsOption.length > 10 ? regulatoryThemesCustomSearch : undefined}
+          isLabelHidden
+          isTransparent
+          label="Thématique réglementaire"
+          name="regulatoryThemes"
+          onChange={setFilteredRegulatoryThemes}
+          options={regulatoryThemesAsOption}
+          placeholder="Thématique réglementaire"
+          renderValue={() =>
+            filters?.regulatoryThemes && (
+              <OptionValue>{`Thématique réglementaire (${filters?.regulatoryThemes.length})`}</OptionValue>
+            )
+          }
+          style={{ width: '310px' }}
+          value={filters?.regulatoryThemes}
+        />
+        <Select
+          isLabelHidden
+          isTransparent
+          label="Période de vigilance"
+          name="periodOfVigilanceArea"
+          onChange={setFilteredVigilancePeriod}
+          options={vigilanceAreaPeriodOptions}
+          placeholder="Période de vigilance"
+          style={{ width: '310px' }}
+          value={filters?.vigilanceAreaPeriod}
+        />
+        <CheckPicker
+          customSearch={ampsAsOptions.length > 10 ? AMPCustomSearch : undefined}
+          isLabelHidden
+          isTransparent
+          label="Type d'AMP"
+          name="ampTypes"
+          onChange={setFilteredAmpTypes}
+          options={ampsAsOptions}
+          placeholder="Type d'AMP"
+          renderValue={() => filters?.amps && <OptionValue>{`Type d'AMP (${filters?.amps.length})`}</OptionValue>}
+          style={{ width: '310px' }}
+          value={filters?.amps}
+        />
+      </div>
+      <StyledButton onClick={showSelectedItems} type="button">
+        <Icon.Pin color={THEME.color.slateGray} />
+        Prévisualiser la sélection
+      </StyledButton>
+    </FiltersContainer>
   )
 }
 
@@ -185,14 +125,6 @@ const FiltersContainer = styled.div`
     gap: 16px;
   }
 `
-const TagsContainer = styled.div`
-  align-items: end;
-  display: flex;
-  gap: 16px;
-  flex-direction: row;
-  flex-wrap: wrap;
-  max-width: 100%;
-`
 
 const StyledButton = styled.button`
   background-color: ${p => p.theme.color.white};

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Toolbar/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Toolbar/index.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components'
 
 import { EditArea } from './EditArea'
 import { DashboardFilters } from './Filters'
+import { FiltersTags } from './Filters/FiltersTags'
 
 import type { DashboardType } from '@features/Dashboard/slice'
 import type { GeoJSON } from 'domain/types/GeoJSON'
@@ -20,14 +21,18 @@ export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
 
     return (
       <Wrapper ref={ref}>
-        <EditArea
-          dashboardKey={key}
-          geometry={geometry}
-          onValidate={geometryToSave => {
-            dispatch(editDashboardArea(geometryToSave, key))
-          }}
-        />
-        <DashboardFilters dashboard={dashboard} />
+        <FirstLine>
+          <EditArea
+            dashboardKey={key}
+            geometry={geometry}
+            onValidate={geometryToSave => {
+              dispatch(editDashboardArea(geometryToSave, key))
+            }}
+          />
+          <DashboardFilters dashboard={dashboard} />
+        </FirstLine>
+
+        <FiltersTags dashboard={dashboard} />
       </Wrapper>
     )
   }
@@ -37,8 +42,13 @@ const Wrapper = styled.div`
   background-color: ${p => p.theme.color.white};
   box-shadow: 0pc 3px 6px #00000029;
   display: flex;
+  flex-direction: column;
   flex-wrap: wrap;
   gap: 16px;
   padding: 16px 24px;
-  align-items: center;
+`
+const FirstLine = styled.div`
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
 `