feat: refacto accordion title and add selectAll toggle. TODO: add res…

…ults number and styling title

frontend/src/features/Dashboard/components/DashboardForm/Accordion.tsx

@@ -7,7 +7,7 @@ type AccordionProps = {
   isExpanded: boolean
   name?: string
   setExpandedAccordion: () => void
-  title: string | ReactNode
+  title: ReactNode
   titleRef?: ForwardedRef<HTMLDivElement>
 }
 
@@ -20,9 +20,7 @@ export function Accordion({ children, isExpanded, name, setExpandedAccordion, ti
         aria-expanded={isExpanded}
         onClick={setExpandedAccordion}
       >
-        <TitleContainer>
-          <Title>{title}</Title>
-        </TitleContainer>
+        {title}
         <StyledIconButton
           $isExpanded={isExpanded}
           accent={Accent.TERTIARY}
@@ -38,26 +36,26 @@ export function Accordion({ children, isExpanded, name, setExpandedAccordion, ti
   )
 }
 
-const AccordionContainer = styled.div`
+export const AccordionContainer = styled.div`
   box-shadow: 0px 3px 6px #70778540;
   width: 100%;
 `
-const StyledIconButton = styled(IconButton)<{ $isExpanded: boolean }>`
+export const StyledIconButton = styled(IconButton)<{ $isExpanded: boolean }>`
   transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(180deg)' : 'rotate(0deg)')};
   transition: transform 0.3s;
 `
-const AccordionHeader = styled.header`
+export const AccordionHeader = styled.header`
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   padding: 21px 24px;
 `
-const TitleContainer = styled.div`
+export const TitleContainer = styled.div`
   align-items: center;
   display: flex;
   gap: 16px;
 `
-const Title = styled.h2`
+export const Title = styled.h2`
   font-size: 16px;
   font-weight: 700;
 `

frontend/src/features/Dashboard/components/DashboardForm/Amps/index.tsx

@@ -1,18 +1,21 @@
 import { useGetAMPsQuery } from '@api/ampsAPI'
-import { getOpenedPanel } from '@features/Dashboard/slice'
+import { dashboardActions, getOpenedPanel } from '@features/Dashboard/slice'
 import { Dashboard } from '@features/Dashboard/types'
+import { getSelectionState, handleSelection } from '@features/Dashboard/utils'
 import { LayerSelector } from '@features/layersSelector/utils/LayerSelector.style'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { pluralize } from '@mtes-mct/monitor-ui'
 import { groupBy } from 'lodash'
-import { forwardRef, useEffect, useState } from 'react'
+import { forwardRef, useEffect, useMemo, useState } from 'react'
 import styled from 'styled-components'
 
-import { Accordion } from '../Accordion'
+import { Accordion, Title, TitleContainer } from '../Accordion'
 import { SelectedAccordion } from '../SelectedAccordion'
+import { SelectedLayerList } from '../style'
 import { ListLayerGroup } from './ListLayerGroup'
 import { AmpPanel } from './Panel'
-import { SelectedLayerList } from '../style'
+import { ToggleSelectAll } from '../ToggleSelectAll'
 
 import type { AMP, AMPFromAPI } from 'domain/entities/AMPs'
 
@@ -26,6 +29,7 @@ type AmpsProps = {
 }
 export const Amps = forwardRef<HTMLDivElement, AmpsProps>(
   ({ amps, columnWidth, isExpanded, isSelectedAccordionOpen, selectedAmpIds, setExpandedAccordion }, ref) => {
+    const dispatch = useAppDispatch()
     const openPanel = useAppSelector(state => getOpenedPanel(state.dashboard, Dashboard.Block.AMP))
 
     const [isExpandedSelectedAccordion, setExpandedSelectedAccordion] = useState(false)
@@ -47,10 +51,43 @@ export const Amps = forwardRef<HTMLDivElement, AmpsProps>(
       }
     }, [isSelectedAccordionOpen])
 
+    const selectionState = useMemo(
+      () =>
+        getSelectionState(
+          selectedAmpIds,
+          amps.map(amp => amp.id)
+        ),
+      [amps, selectedAmpIds]
+    )
+
     return (
       <div>
         {openPanel && !!columnWidth && <StyledPanel $marginLeft={columnWidth} layerId={openPanel.id} />}
-        <Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Zones AMP" titleRef={ref}>
+        <Accordion
+          isExpanded={isExpanded}
+          setExpandedAccordion={setExpandedAccordion}
+          title={
+            <TitleContainer>
+              <Title>Zones AMP</Title>
+              {amps.length !== 0 && (
+                <ToggleSelectAll
+                  onSelection={() =>
+                    handleSelection({
+                      allIds: amps.map(amp => amp.id),
+                      onRemove: payload => dispatch(dashboardActions.removeItems(payload)),
+                      onSelect: payload => dispatch(dashboardActions.addItems(payload)),
+                      selectedIds: selectedAmpIds,
+                      selectionState,
+                      type: Dashboard.Block.AMP
+                    })
+                  }
+                  selectionState={selectionState}
+                />
+              )}
+            </TitleContainer>
+          }
+          titleRef={ref}
+        >
           <StyledLayerList
             $baseLayersLength={Object.values(ampsByLayerName).length}
             $maxHeight={100}

frontend/src/features/Dashboard/components/DashboardForm/ControlUnits/SelectedControlUnits/index.tsx

@@ -1,4 +1,3 @@
-import { useAppSelector } from '@hooks/useAppSelector'
 import { ControlUnit, pluralize } from '@mtes-mct/monitor-ui'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components'
@@ -7,20 +6,15 @@ import { ControlUnitAccordion } from './ControlUnitAccordion'
 import { SelectedAccordion } from '../../SelectedAccordion'
 
 export function SelectedControlUnits({
-  controlUnits,
-  isSelectedAccordionOpen
+  isSelectedAccordionOpen,
+  selectedControlUnits
 }: {
-  controlUnits: ControlUnit.ControlUnit[]
   isSelectedAccordionOpen: boolean
+  selectedControlUnits: ControlUnit.ControlUnit[]
 }) {
   const [isExpandedSelectedAccordion, setExpandedSelectedAccordion] = useState(false)
   const [controlUnitIdExpanded, setControlUnitIdExpanded] = useState<number | undefined>(undefined)
 
-  const activeDashboardId = useAppSelector(state => state.dashboard.activeDashboardId)
-  const selectedControlUnitIds = useAppSelector(state =>
-    activeDashboardId ? state.dashboard.dashboards?.[activeDashboardId]?.dashboard.controlUnitIds : []
-  )
-
   const expandedControlUnit = id => {
     if (id === controlUnitIdExpanded) {
       setControlUnitIdExpanded(undefined)
@@ -40,23 +34,21 @@ export function SelectedControlUnits({
     <StyledSelectedAccordion
       className="control-units-selected-accordion"
       isExpanded={isExpandedSelectedAccordion}
-      isReadOnly={selectedControlUnitIds?.length === 0}
+      isReadOnly={selectedControlUnits?.length === 0}
       setExpandedAccordion={() => setExpandedSelectedAccordion(!isExpandedSelectedAccordion)}
-      title={`${selectedControlUnitIds?.length ?? 0} ${pluralize(
-        'unité',
-        selectedControlUnitIds?.length ?? 0
-      )} ${pluralize('sélectionnée', selectedControlUnitIds?.length ?? 0)}`}
+      title={`${selectedControlUnits?.length ?? 0} ${pluralize('unité', selectedControlUnits?.length ?? 0)} ${pluralize(
+        'sélectionnée',
+        selectedControlUnits?.length ?? 0
+      )}`}
     >
-      {controlUnits
-        .filter(controlUnit => selectedControlUnitIds?.includes(controlUnit.id))
-        .map(controlUnit => (
-          <ControlUnitAccordion
-            key={controlUnit.id}
-            controlUnit={controlUnit}
-            controlUnitIdExpanded={controlUnitIdExpanded}
-            expandUnit={expandedControlUnit}
-          />
-        ))}
+      {selectedControlUnits.map(controlUnit => (
+        <ControlUnitAccordion
+          key={controlUnit.id}
+          controlUnit={controlUnit}
+          controlUnitIdExpanded={controlUnitIdExpanded}
+          expandUnit={expandedControlUnit}
+        />
+      ))}
     </StyledSelectedAccordion>
   )
 }

frontend/src/features/Dashboard/components/DashboardForm/ControlUnits/index.tsx

@@ -17,10 +17,10 @@ import { isNotArchived } from '@utils/isNotArchived'
 import { forwardRef, useMemo } from 'react'
 import styled from 'styled-components'
 
-import { Item } from './Item'
-import { SelectedControlUnits } from './SelectedControlUnits'
 import { Accordion } from '../Accordion'
 import { dashboardFiltersActions } from '../slice'
+import { Item } from './Item'
+import { SelectedControlUnits } from './SelectedControlUnits'
 
 type ControlUnitsProps = {
   controlUnits: ControlUnit.ControlUnit[]
@@ -36,6 +36,10 @@ export const ControlUnits = forwardRef<HTMLDivElement, ControlUnitsProps>(
     const filters = useAppSelector(state =>
       activeDashboardId ? state.dashboardFilters.dashboards[activeDashboardId]?.controlUnitFilters : undefined
     )
+    const selectedControlUnitIds = useAppSelector(state =>
+      activeDashboardId ? state.dashboard.dashboards?.[activeDashboardId]?.dashboard.controlUnitIds : []
+    )
+    const selectedControlUnits = controlUnits.filter(controlUnit => selectedControlUnitIds?.includes(controlUnit.id))
 
     const controlUnitResults = useMemo(() => {
       if (!filters) {
@@ -162,7 +166,10 @@ export const ControlUnits = forwardRef<HTMLDivElement, ControlUnitsProps>(
             </ResultList>
           </Wrapper>
         </Accordion>
-        <SelectedControlUnits controlUnits={controlUnits} isSelectedAccordionOpen={isSelectedAccordionOpen} />
+        <SelectedControlUnits
+          isSelectedAccordionOpen={isSelectedAccordionOpen}
+          selectedControlUnits={selectedControlUnits}
+        />
       </div>
     )
   }

frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/index.tsx

@@ -1,18 +1,21 @@
 import { useGetRegulatoryLayersQuery } from '@api/regulatoryLayersAPI'
-import { getOpenedPanel } from '@features/Dashboard/slice'
+import { dashboardActions, getOpenedPanel } from '@features/Dashboard/slice'
 import { Dashboard } from '@features/Dashboard/types'
+import { getSelectionState, handleSelection } from '@features/Dashboard/utils'
 import { LayerSelector } from '@features/layersSelector/utils/LayerSelector.style'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { pluralize } from '@mtes-mct/monitor-ui'
 import { groupBy } from 'lodash'
-import { forwardRef, useEffect, useState } from 'react'
+import { forwardRef, useEffect, useMemo, useState } from 'react'
 import styled from 'styled-components'
 
-import { Accordion } from '../Accordion'
+import { Accordion, Title, TitleContainer } from '../Accordion'
 import { SelectedAccordion } from '../SelectedAccordion'
+import { SelectedLayerList } from '../style'
+import { ToggleSelectAll } from '../ToggleSelectAll'
 import { ListLayerGroup } from './ListLayerGroup'
 import { RegulatoryPanel } from './Panel'
-import { SelectedLayerList } from '../style'
 
 import type { RegulatoryLayerCompactFromAPI } from 'domain/entities/regulatory'
 
@@ -36,6 +39,7 @@ export const RegulatoryAreas = forwardRef<HTMLDivElement, RegulatoriesAreasProps
     },
     ref
   ) => {
+    const dispatch = useAppDispatch()
     const openPanel = useAppSelector(state => getOpenedPanel(state.dashboard, Dashboard.Block.REGULATORY_AREAS))
     const [isExpandedSelectedAccordion, setExpandedSelectedAccordion] = useState(false)
 
@@ -56,14 +60,42 @@ export const RegulatoryAreas = forwardRef<HTMLDivElement, RegulatoriesAreasProps
       }
     }, [isSelectedAccordionOpen])
 
+    const selectionState = useMemo(
+      () =>
+        getSelectionState(
+          selectedRegulatoryAreaIds,
+          regulatoryAreas.map(amp => amp.id)
+        ),
+      [regulatoryAreas, selectedRegulatoryAreaIds]
+    )
+
     return (
       <div>
         {openPanel && !!columnWidth && <StyledPanel $marginLeft={columnWidth} layerId={openPanel.id} />}
 
         <Accordion
           isExpanded={isExpanded}
           setExpandedAccordion={setExpandedAccordion}
-          title="Zones réglementaires"
+          title={
+            <TitleContainer>
+              <Title>Zones réglementaires</Title>
+              {regulatoryAreas.length !== 0 && (
+                <ToggleSelectAll
+                  onSelection={() =>
+                    handleSelection({
+                      allIds: regulatoryAreas.map(amp => amp.id),
+                      onRemove: payload => dispatch(dashboardActions.removeItems(payload)),
+                      onSelect: payload => dispatch(dashboardActions.addItems(payload)),
+                      selectedIds: selectedRegulatoryAreaIds,
+                      selectionState,
+                      type: Dashboard.Block.REGULATORY_AREAS
+                    })
+                  }
+                  selectionState={selectionState}
+                />
+              )}
+            </TitleContainer>
+          }
           titleRef={ref}
         >
           <StyledLayerList

frontend/src/features/Dashboard/components/DashboardForm/Reportings/index.tsx

@@ -1,12 +1,17 @@
 import { useGetReportingsByIdsQuery } from '@api/reportingsAPI'
+import { dashboardActions } from '@features/Dashboard/slice'
+import { Dashboard } from '@features/Dashboard/types'
+import { getSelectionState, handleSelection } from '@features/Dashboard/utils'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 import { pluralize } from '@mtes-mct/monitor-ui'
-import { forwardRef, useEffect, useState } from 'react'
+import { forwardRef, useEffect, useMemo, useState } from 'react'
 import styled from 'styled-components'
 
-import { Accordion } from '../Accordion'
+import { Accordion, Title, TitleContainer } from '../Accordion'
 import { SelectedAccordion } from '../SelectedAccordion'
 import { Filters } from './Filters'
 import { Layer } from './Layer'
+import { ToggleSelectAll } from '../ToggleSelectAll'
 
 import type { Reporting } from 'domain/entities/reporting'
 
@@ -19,6 +24,7 @@ type ReportingsProps = {
 }
 export const Reportings = forwardRef<HTMLDivElement, ReportingsProps>(
   ({ isExpanded, isSelectedAccordionOpen, reportings, selectedReportingIds, setExpandedAccordion }, ref) => {
+    const dispatch = useAppDispatch()
     const [isExpandedSelectedAccordion, setExpandedSelectedAccordion] = useState(false)
 
     useEffect(() => {
@@ -29,12 +35,40 @@ export const Reportings = forwardRef<HTMLDivElement, ReportingsProps>(
 
     const { data: selectedReportings } = useGetReportingsByIdsQuery(selectedReportingIds)
 
+    const selectionState = useMemo(
+      () =>
+        getSelectionState(
+          selectedReportingIds,
+          reportings.map(reporting => +reporting.id)
+        ),
+      [selectedReportingIds, reportings]
+    )
+
     return (
       <div>
         <Accordion
           isExpanded={isExpanded}
           setExpandedAccordion={setExpandedAccordion}
-          title="Signalements"
+          title={
+            <TitleContainer>
+              <Title>Signalements</Title>
+              {reportings.length !== 0 && (
+                <ToggleSelectAll
+                  onSelection={() =>
+                    handleSelection({
+                      allIds: reportings.map(reporting => +reporting.id),
+                      onRemove: payload => dispatch(dashboardActions.removeItems(payload)),
+                      onSelect: payload => dispatch(dashboardActions.addItems(payload)),
+                      selectedIds: selectedReportingIds,
+                      selectionState,
+                      type: Dashboard.Block.REPORTINGS
+                    })
+                  }
+                  selectionState={selectionState}
+                />
+              )}
+            </TitleContainer>
+          }
           titleRef={ref}
         >
           <StyledFilters $isExpanded={isExpanded} />