[Dashboard] fix after rebase

MTES-MCT · Sep 24, 2024 · 4cc4966 · 4cc4966
1 parent 90b4877
commit 4cc4966
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 41 deletions.
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/Layer.tsx b/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/Layer.tsx
@@ -66,7 +66,7 @@ export function Layer({ dashboardId, isSelected, layerId }: RegulatoryLayerProps
  }
 
  return (
- <StyledLayer ref={ref} onClick={toggleZoneMetadata}>
+ <StyledLayer ref={ref} $isSelected={isSelected} onClick={toggleZoneMetadata}>
  <LayerLegend
  layerType={MonitorEnvLayers.REGULATORY_ENV}
  legendKey={layer?.entity_name ?? 'aucun'}
@@ -101,7 +101,16 @@ export function Layer({ dashboardId, isSelected, layerId }: RegulatoryLayerProps
  )
 }
 
-const StyledLayer = styled(LayerSelector.Layer)`
+const StyledLayer = styled(LayerSelector.Layer)<{ $isSelected: boolean }>`
+ background-color: ${p => p.theme.color.white};
  padding-left: 24px;
  padding-right: 24px;
+ ${p =>
+ p.$isSelected &&
+ `
+ padding-left: 20px;
+ padding-right: 20px;
+ margin-left: 4px;
+ margin-right: 4px;
+ `}
 `
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/ListLayerGroup.tsx b/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/ListLayerGroup.tsx
@@ -54,7 +54,11 @@ export function ListLayerGroup({ dashboardId, groupName, isSelected = false, lay
 
  return (
  <>
- <StyledGroupWrapper $isOpen={forceZonesAreOpen || zonesAreOpen} onClick={clickOnGroupZones}>
+ <StyledGroupWrapper
+ $isOpen={forceZonesAreOpen || zonesAreOpen}
+ $isSelected={isSelected}
+ onClick={clickOnGroupZones}
+ >
  <LayerSelector.GroupName data-cy="result-group" title={groupName}>
  {getTitle(groupName) ?? ''}
  </LayerSelector.GroupName>
@@ -90,7 +94,17 @@ export function ListLayerGroup({ dashboardId, groupName, isSelected = false, lay
  )
 }
 
-const StyledGroupWrapper = styled(LayerSelector.GroupWrapper)`
+const StyledGroupWrapper = styled(LayerSelector.GroupWrapper)<{ $isSelected: boolean }>`
+ background-color: ${p => p.theme.color.white};
  padding-left: 24px;
  padding-right: 24px;
+
+ ${p =>
+ p.$isSelected &&
+ `
+ padding-left: 20px;
+ padding-right: 20px;
+ margin-left: 4px;
+ margin-right: 4px;
+ `}
 `
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/index.tsx
@@ -1,4 +1,3 @@
-import { useGetRegulatoryLayersQuery } from '@api/regulatoryLayersAPI'
 import { Dashboard } from '@features/Dashboard/types'
 import { LayerSelector } from '@features/layersSelector/utils/LayerSelector.style'
 import { useAppSelector } from '@hooks/useAppSelector'
@@ -12,34 +11,32 @@ import { RegulatoryPanel } from './Panel'
 import { Accordion } from '../Accordion'
 import { SmallAccordion } from '../SmallAccordion'
 
+import type { RegulatoryLayerCompactFromAPI } from 'domain/entities/regulatory'
+
 type RegulatoriesAreasProps = {
  dashboardId: number
  isExpanded: boolean
+ regulatoryAreas: RegulatoryLayerCompactFromAPI[] | undefined
  setExpandedAccordion: () => void
 }
-export function RegulatoryAreas({ dashboardId, isExpanded, setExpandedAccordion }: RegulatoriesAreasProps) {
+export function RegulatoryAreas({
+ dashboardId,
+ isExpanded,
+ regulatoryAreas,
+ setExpandedAccordion
+}: RegulatoriesAreasProps) {
  const ref = useRef<HTMLDivElement>(null)
  const width = ref.current?.clientWidth
 
  const selectedLayerIds = useAppSelector(
  state => state.dashboard.dashboards?.[dashboardId]?.[Dashboard.Block.REGULATORY_AREAS]
  )
-
  const [isExpandedSmallAccordion, setExpandedSmallAccordion] = useState(false)
- const { data: regulatoryLayers } = useGetRegulatoryLayersQuery()
 
- const regulatoryAreasByLayerName = groupBy(
- Object.values(regulatoryLayers?.ids ?? {}),
- (r: number) => regulatoryLayers?.entities[r]?.layer_name
- )
+ const regulatoryAreasByLayerName = groupBy(regulatoryAreas, r => r.layer_name)
 
- const selectedRegulatoryAreaIds = Object.values(regulatoryLayers?.ids ?? {}).filter(id =>
- selectedLayerIds?.includes(id)
- )
- const selectedRegulatoryAreasByLayerName = groupBy(
- selectedRegulatoryAreaIds,
- (r: number) => regulatoryLayers?.entities[r]?.layer_name
- )
+ const selectedRegulatoryAreaIds = regulatoryAreas?.filter(({ id }) => selectedLayerIds?.includes(id))
+ const selectedRegulatoryAreasByLayerName = groupBy(selectedRegulatoryAreaIds, r => r.layer_name)
 
  return (
  <div ref={ref}>
@@ -51,14 +48,18 @@ export function RegulatoryAreas({ dashboardId, isExpanded, setExpandedAccordion
  $maxHeight={100}
  $showBaseLayers={isExpanded}
  >
- {Object.entries(regulatoryAreasByLayerName).map(([layerGroupName, layerIdsInGroup]) => (
- <ListLayerGroup
- key={layerGroupName}
- dashboardId={dashboardId}
- groupName={layerGroupName}
- layerIds={layerIdsInGroup}
- />
- ))}
+ {Object.entries(regulatoryAreasByLayerName).map(([layerGroupName, layerIdsInGroup]) => {
+ const layersId = layerIdsInGroup.map((layerId: any) => layerId.id)
+
+ return (
+ <ListLayerGroup
+ key={layerGroupName}
+ dashboardId={dashboardId}
+ groupName={layerGroupName}
+ layerIds={layersId}
+ />
+ )
+ })}
  </StyledLayerList>
  </Accordion>
  <SmallAccordion
@@ -70,15 +71,19 @@ export function RegulatoryAreas({ dashboardId, isExpanded, setExpandedAccordion
  selectedLayerIds?.length ?? 0
  )}`}
  >
- {Object.entries(selectedRegulatoryAreasByLayerName).map(([layerGroupName, layerIdsInGroup]) => (
- <ListLayerGroup
- key={layerGroupName}
- dashboardId={dashboardId}
- groupName={layerGroupName}
- isSelected
- layerIds={layerIdsInGroup}
- />
- ))}
+ {Object.entries(selectedRegulatoryAreasByLayerName).map(([layerGroupName, layerIdsInGroup]) => {
+ const layersId = layerIdsInGroup.map((layerId: any) => layerId.id)
+
+ return (
+ <ListLayerGroup
+ key={layerGroupName}
+ dashboardId={dashboardId}
+ groupName={layerGroupName}
+ isSelected
+ layerIds={layersId}
+ />
+ )
+ })}
  </SmallAccordion>
  </div>
  )

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/SmallAccordion.tsx b/frontend/src/features/Dashboard/components/DashboardForm/SmallAccordion.tsx
@@ -31,7 +31,6 @@ export function SmallAccordion({
  />
  )}
  </AccordionHeader>
- <HeaderSeparator />
  <AccordionContent $isExpanded={isExpanded}>{children}</AccordionContent>
  </AccordionContainer>
  )
@@ -41,6 +40,7 @@ const AccordionContainer = styled.div`
  background-color: ${p => p.theme.color.blueGray25};
  box-shadow: 0px 3px 6px #70778540;
  cursor: pointer;
+ padding-bottom: 4px;
 `
 const StyledIconButton = styled(IconButton)<{ $isExpanded: boolean }>`
  transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(180deg)' : 'rotate(0deg)')};
@@ -63,14 +63,13 @@ const Title = styled.span`
  font-weight: 500;
 `
 
-const HeaderSeparator = styled.div`
- border-bottom: 2px solid ${p => p.theme.color.gainsboro};
- padding: -24px;
-`
 const AccordionContent = styled.div<{ $isExpanded: boolean }>`
  display: flex;
  flex-direction: column;
  max-height: ${({ $isExpanded }) => ($isExpanded ? '100vh' : '0px')};
  overflow-x: hidden;
  transition: 0.5s max-height;
+ & > :last-child {
+ border-bottom: none;
+ }
 `
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/index.tsx
@@ -1,6 +1,7 @@
 import { Dashboard } from '@features/Dashboard/types'
 import { SideWindowContent } from '@features/SideWindow/style'
 import { useAppDispatch } from '@hooks/useAppDispatch'
+import { useAppSelector } from '@hooks/useAppSelector'
 import { Accent, Icon, IconButton } from '@mtes-mct/monitor-ui'
 import { useState } from 'react'
 import styled from 'styled-components'
@@ -54,6 +55,7 @@ export function DashboardForm() {
  <RegulatoryAreas
  dashboardId={dashboardId}
  isExpanded={expandedAccordionFirstColumn === Dashboard.Block.REGULATORY_AREAS}
+ regulatoryAreas={extractedArea?.regulatoryAreas}
  setExpandedAccordion={() => handleAccordionClick(Dashboard.Block.REGULATORY_AREAS)}
  />
 

diff --git a/frontend/src/features/map/index.tsx b/frontend/src/features/map/index.tsx
@@ -214,6 +214,7 @@ export function Map({ isSuperUser }) {
  {/* DASHBOARD */}
  {/* @ts-ignore */}
  <DrawDashboardLayer />
+ {/* @ts-ignore */}
  <DashboardLayer />
  </BaseMap>
  )