feat: xavier's UI review

MTES-MCT · Dec 17, 2024 · 3253340 · 3253340
1 parent 0a25880
commit 3253340
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 36 deletions.
diff --git a/frontend/cypress/e2e/side_window/dashboard_list/filters.spec.ts b/frontend/cypress/e2e/side_window/dashboard_list/filters.spec.ts
@@ -74,15 +74,15 @@ context('Side Window > Dashboard List > Filter Bar', () => {
 
   it('Should filter dashboard by regulatory themes', () => {
     cy.wait(200)
-    cy.fill('Thématique réglementaire', ['RNN'])
+    cy.fill('Thématique réglementaire', ['Mixte'])
 
     cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
     cy.get('.Table-SimpleTable tr').each((row, index) => {
       if (index === 0) {
         return
       }
 
-      cy.wrap(row).should('contain', 'RNN Iroise')
+      cy.wrap(row).should('contain', 'Interdiction VNM Molene')
     })
 
     cy.clickButton('Réinitialiser les filtres')

diff --git a/frontend/src/features/Dashboard/components/DashboardsList/Filters.tsx b/frontend/src/features/Dashboard/components/DashboardsList/Filters.tsx
@@ -15,11 +15,12 @@ import {
   type DateAsStringRange,
   type OptionValueType
 } from '@mtes-mct/monitor-ui'
+import { getRegulatoryThemesAsOptions } from '@utils/getRegulatoryThemesAsOptions'
 import { isNotArchived } from '@utils/isNotArchived'
 import { DateRangeEnum, dateRangeOptions } from 'domain/entities/dateRange'
 import { getTitle } from 'domain/entities/layers/utils'
 import { SeaFrontLabels } from 'domain/entities/seaFrontType'
-import { isArray, isEqual, uniq } from 'lodash'
+import { isArray, isEqual } from 'lodash'
 import { useMemo } from 'react'
 import styled from 'styled-components'
 
@@ -62,18 +63,9 @@ export function Filters({ orientation = 'row' }: { orientation?: Orientation })
     [activeControlUnitsOptions]
   )
 
-  const { data: allRegulatoryLayers } = useGetRegulatoryLayersQuery()
+  const { data: regulatoryLayers } = useGetRegulatoryLayersQuery()
 
-  const regulatoryThemesOptions = useMemo(
-    () =>
-      uniq(Object.values(allRegulatoryLayers?.entities ?? []).map(regulatoryLayer => regulatoryLayer.layer_name))
-        .sort()
-        .map(layerName => ({
-          label: getTitle(layerName),
-          value: layerName
-        })),
-    [allRegulatoryLayers]
-  )
+  const regulatoryThemesOptions = getRegulatoryThemesAsOptions(regulatoryLayers ?? [])
 
   const regulatoryThemesCustomSearch = useMemo(
     () => new CustomSearch(regulatoryThemesOptions, ['label']),
@@ -155,23 +147,8 @@ export function Filters({ orientation = 'row' }: { orientation?: Orientation })
   )
 
   return (
-    <Wrapper>
+    <Wrapper $orientation={orientation}>
       <FiltersContainer $orientation={orientation}>
-        <FilterWrapper $orientation={orientation}>
-          <StyledSelect
-            isCleanable={false}
-            isLabelHidden
-            isTransparent
-            label="Date de mise à jour"
-            name="updatedAt"
-            onChange={updateUpdatedAtFilter}
-            options={dateRangeOptions}
-            placeholder="Date de mise à jour"
-            style={{ width: 180 }}
-            value={updatedAt}
-          />
-          {orientation === 'column' && specificPeriodDatePicker}
-        </FilterWrapper>
         <FilterWrapper $orientation={orientation}>
           <CheckPicker
             isLabelHidden
@@ -187,6 +164,21 @@ export function Filters({ orientation = 'row' }: { orientation?: Orientation })
           />
           {orientation === 'column' && seaFrontTags}
         </FilterWrapper>
+        <FilterWrapper $orientation={orientation}>
+          <StyledSelect
+            isCleanable={false}
+            isLabelHidden
+            isTransparent
+            label="Période de mise à jour"
+            name="updatedAt"
+            onChange={updateUpdatedAtFilter}
+            options={dateRangeOptions}
+            placeholder="Période de mise à jour"
+            style={{ width: 180 }}
+            value={updatedAt}
+          />
+          {orientation === 'column' && specificPeriodDatePicker}
+        </FilterWrapper>
         <FilterWrapper $orientation={orientation}>
           <CheckPicker
             key={activeControlUnitsOptions?.length}
@@ -227,27 +219,27 @@ export function Filters({ orientation = 'row' }: { orientation?: Orientation })
         </FilterWrapper>
       </FiltersContainer>
       <TagsContainer>
-        {orientation === 'row' && [specificPeriodDatePicker, seaFrontTags, controlUnitTags, regulatoryThemesTags]}
+        {orientation === 'row' && [seaFrontTags, specificPeriodDatePicker, controlUnitTags, regulatoryThemesTags]}
 
-        {hasFilters && <ReinitializeFiltersButton onClick={resetFilter} />}
+        {orientation === 'row' && hasFilters && <ReinitializeFiltersButton onClick={resetFilter} />}
       </TagsContainer>
     </Wrapper>
   )
 }
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ $orientation: Orientation }>`
   display: flex;
   flex-direction: column;
   gap: 16px;
-  padding: 12px 4px;
+  ${p => p.$orientation === 'column' && 'padding: 12px 4px;'}
 `
 
 const FiltersContainer = styled.div<{ $orientation: Orientation }>`
   align-items: center;
   display: flex;
   flex-wrap: wrap;
 
-  ${p => (p.$orientation === 'column' ? 'gap: 8px;' : 'gap: 16px;')}
+  ${p => p.$orientation === 'row' && 'gap: 16px;'}
 `
 
 const FilterWrapper = styled.div<{ $orientation: Orientation }>`

diff --git a/frontend/src/features/Dashboard/useCases/filters/filterByRegulatoryThemes.ts b/frontend/src/features/Dashboard/useCases/filters/filterByRegulatoryThemes.ts
@@ -14,5 +14,5 @@ export function filterByRegulatoryThemes(
     dashboard.regulatoryAreaIds?.includes(regulatoryArea.id)
   )
 
-  return filteredRegulatoryAreas.some(reg => regulatoryThemes.includes(reg.layer_name))
+  return filteredRegulatoryAreas.some(reg => regulatoryThemes.includes(reg.thematique))
 }