feat: add results number and styling titles

MTES-MCT · Jan 28, 2025 · c04f154 · c04f154
1 parent e7876df
commit c04f154
Show file tree

Hide file tree

Showing 19 changed files with 208 additions and 102 deletions.
diff --git a/frontend/cypress/e2e/side_window/dashboard/edit_dashboard.spec.ts b/frontend/cypress/e2e/side_window/dashboard/edit_dashboard.spec.ts
@@ -110,4 +110,31 @@ context('Side Window > Dashboard > Edit Dashboard', () => {
     // Selected controlUnits should be visible
     cy.getDataCy('dashboard-control-unit-accordion-10002').contains('DML 2A - DDTM').should('be.visible')
   })
+
+  it('Should select/deselect all in each bloc', () => {
+    const id = 'e1e99b92-1e61-4f9f-9cbf-8cfae2395d41'
+    cy.getDataCy(`edit-dashboard-${id}`).click({ force: true })
+
+    cy.intercept('GET', `/bff/v1/dashboards/${id}`).as('editDashboard')
+
+    // Tab should be visible
+    cy.getDataCy('dashboard-1').contains('Dashboard 1')
+
+    cy.wait(250)
+
+    // from partially selection to fully selected
+    cy.get('h2').contains('Zones réglementaires').parent().clickButton('Tout sélectionner', { withoutScroll: true })
+    // no button if there is no area
+    cy.get('h2').contains('Zones AMP').parent().get('Tout sélectionner').should('not.exist')
+    cy.get('h2').contains('Zones de vigilance').parent().clickButton('Tout désélectionner', { withoutScroll: true })
+    cy.get('h2').contains('Signalements').parent().clickButton('Tout sélectionner', { withoutScroll: true })
+
+    cy.clickButton('Prévisualiser la sélection', { withoutScroll: true })
+    cy.wait(250)
+    // because result list have a separator so we need to multiply the results by 2
+    cy.getDataCy('dashboard-selected-regulatory-result-group').should('have.length', 9)
+    cy.getDataCy('dashboard-selected-amp-result-group').should('not.exist')
+    cy.get('[data-cy^="dashboard-selected-vigilance-areas-zone-"]').should('not.exist')
+    cy.get('[data-cy^="dashboard-selected-reporting-"]').should('have.length', 3)
+  })
 })
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Accordion.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Accordion.tsx
@@ -53,7 +53,7 @@ export const AccordionHeader = styled.header`
 export const TitleContainer = styled.div`
   align-items: center;
   display: flex;
-  gap: 16px;
+  gap: 10px;
 `
 export const Title = styled.h2`
   font-size: 16px;

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Amps/ListLayerGroup.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Amps/ListLayerGroup.tsx
@@ -11,6 +11,7 @@ import { useState } from 'react'
 import styled from 'styled-components'
 
 import { Layer } from './Layer'
+import { getPinIcon, getSelectionState } from '../ToggleSelectAll/utils'
 
 type ResultListLayerGroupProps = {
   groupName: string
@@ -25,13 +26,13 @@ export function ListLayerGroup({ groupName, isSelected = false, layerIds, select
   const totalNumberOfZones = useAppSelector(state => getNumberOfAMPByGroupName(state, groupName))
 
   const zonesSelected = intersection(selectedAmpIds, layerIds)
-  const allTopicZonesAreChecked = zonesSelected?.length === layerIds?.length
+  const topicSelectionState = getSelectionState(zonesSelected, layerIds)
 
   const handleCheckAllZones = e => {
     e.stopPropagation()
     const payload = { itemIds: layerIds, type: Dashboard.Block.AMP }
 
-    if (allTopicZonesAreChecked) {
+    if (topicSelectionState === 'ALL') {
       dispatch(dashboardActions.removeItems(payload))
     } else {
       dispatch(dashboardActions.addItems(payload))
@@ -69,14 +70,7 @@ export function ListLayerGroup({ groupName, isSelected = false, layerIds, select
               title="Supprimer la/les zone(s)"
             />
           ) : (
-            <IconButton
-              accent={Accent.TERTIARY}
-              aria-label="Sélectionner la/les zone(s)"
-              color={allTopicZonesAreChecked ? THEME.color.blueGray : THEME.color.slateGray}
-              Icon={allTopicZonesAreChecked ? Icon.PinFilled : Icon.Pin}
-              onClick={handleCheckAllZones}
-              title="Sélectionner la/les zone(s)"
-            />
+            getPinIcon(topicSelectionState, handleCheckAllZones)
           )}
         </LayerSelector.IconGroup>
       </StyledGroupWrapper>

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Amps/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Amps/index.tsx
@@ -1,7 +1,6 @@
 import { useGetAMPsQuery } from '@api/ampsAPI'
 import { dashboardActions, getOpenedPanel } from '@features/Dashboard/slice'
 import { Dashboard } from '@features/Dashboard/types'
-import { getSelectionState, handleSelection } from '@features/Dashboard/utils'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { pluralize } from '@mtes-mct/monitor-ui'
@@ -11,9 +10,11 @@ import styled from 'styled-components'
 
 import { Accordion, Title, TitleContainer } from '../Accordion'
 import { SelectedAccordion } from '../SelectedAccordion'
-import { SelectedLayerList, StyledLayerList } from '../style'
+import { ResultNumber, SelectedLayerList, StyledLayerList } from '../style'
+import { StyledToggleSelectAll } from '../ToggleSelectAll'
 import { ListLayerGroup } from './ListLayerGroup'
 import { AmpPanel } from './Panel'
+import { getSelectionState, handleSelection } from '../ToggleSelectAll/utils'
 
 import type { AMP, AMPFromAPI } from 'domain/entities/AMPs'
 
@@ -67,8 +68,9 @@ export const Amps = forwardRef<HTMLDivElement, AmpsProps>(
           title={
             <TitleContainer>
               <Title>Zones AMP</Title>
-              {amps.length !== 0 && (
-                <ToggleSelectAll
+              <ResultNumber>{`(${amps.length} ${pluralize('résultat', amps.length)})`}</ResultNumber>
+              {(amps.length !== 0 || selectedAmpIds.length !== 0) && (
+                <StyledToggleSelectAll
                   onSelection={() =>
                     handleSelection({
                       allIds: amps.map(amp => amp.id),

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Comments/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Comments/index.tsx
@@ -5,7 +5,7 @@ import { debounce } from 'lodash'
 import { forwardRef, useCallback, useMemo, useState } from 'react'
 import styled from 'styled-components'
 
-import { Accordion } from '../Accordion'
+import { Accordion, Title, TitleContainer } from '../Accordion'
 
 type CommentsProps = {
   comments: string | undefined
@@ -39,7 +39,11 @@ export const Comments = forwardRef<HTMLDivElement, CommentsProps>(
       <Accordion
         isExpanded={isExpanded}
         setExpandedAccordion={setExpandedAccordion}
-        title="Commentaires"
+        title={
+          <TitleContainer>
+            <Title>Commentaires</Title>
+          </TitleContainer>
+        }
         titleRef={ref}
       >
         <StyledTextarea

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/ControlUnits/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/ControlUnits/index.tsx
@@ -17,7 +17,7 @@ import { isNotArchived } from '@utils/isNotArchived'
 import { forwardRef, useMemo } from 'react'
 import styled from 'styled-components'
 
-import { Accordion } from '../Accordion'
+import { Accordion, Title, TitleContainer } from '../Accordion'
 import { dashboardFiltersActions } from '../slice'
 import { Item } from './Item'
 import { SelectedControlUnits } from './SelectedControlUnits'
@@ -109,7 +109,16 @@ export const ControlUnits = forwardRef<HTMLDivElement, ControlUnitsProps>(
 
     return (
       <div>
-        <Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Unités" titleRef={ref}>
+        <Accordion
+          isExpanded={isExpanded}
+          setExpandedAccordion={setExpandedAccordion}
+          title={
+            <TitleContainer>
+              <Title>Unités</Title>
+            </TitleContainer>
+          }
+          titleRef={ref}
+        >
           <Wrapper $hasChildren={hasChildren}>
             <StyledTextInput
               Icon={Icon.Search}

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/ListLayerGroup.tsx b/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/ListLayerGroup.tsx
@@ -11,6 +11,7 @@ import { useState } from 'react'
 import styled from 'styled-components'
 
 import { Layer } from './Layer'
+import { getPinIcon, getSelectionState } from '../ToggleSelectAll/utils'
 
 type ResultListLayerGroupProps = {
   groupName: string
@@ -29,13 +30,13 @@ export function ListLayerGroup({
 
   const totalNumberOfZones = useAppSelector(state => getNumberOfRegulatoryLayerZonesByGroupName(state, groupName))
   const zonesSelected = intersection(selectedRegulatoryAreaIds, layerIds)
-  const allTopicZonesAreChecked = zonesSelected?.length === layerIds?.length
+  const topicSelectionState = getSelectionState(zonesSelected, layerIds)
 
   const handleCheckAllZones = e => {
     e.stopPropagation()
     const payload = { itemIds: layerIds, type: Dashboard.Block.REGULATORY_AREAS }
 
-    if (allTopicZonesAreChecked) {
+    if (topicSelectionState === 'ALL') {
       dispatch(dashboardActions.removeItems(payload))
     } else {
       dispatch(dashboardActions.addItems(payload))
@@ -73,14 +74,7 @@ export function ListLayerGroup({
               title="Supprimer la/les zone(s)"
             />
           ) : (
-            <IconButton
-              accent={Accent.TERTIARY}
-              aria-label="Sélectionner la/les zone(s)"
-              color={allTopicZonesAreChecked ? THEME.color.blueGray : THEME.color.slateGray}
-              Icon={allTopicZonesAreChecked ? Icon.PinFilled : Icon.Pin}
-              onClick={handleCheckAllZones}
-              title="Sélectionner la/les zone(s)"
-            />
+            getPinIcon(topicSelectionState, handleCheckAllZones)
           )}
         </LayerSelector.IconGroup>
       </StyledGroupWrapper>

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/index.tsx
@@ -1,7 +1,6 @@
 import { useGetRegulatoryLayersQuery } from '@api/regulatoryLayersAPI'
 import { dashboardActions, getOpenedPanel } from '@features/Dashboard/slice'
 import { Dashboard } from '@features/Dashboard/types'
-import { getSelectionState, handleSelection } from '@features/Dashboard/utils'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { pluralize } from '@mtes-mct/monitor-ui'
@@ -11,10 +10,11 @@ import styled from 'styled-components'
 
 import { Accordion, Title, TitleContainer } from '../Accordion'
 import { SelectedAccordion } from '../SelectedAccordion'
-import { SelectedLayerList, StyledLayerList } from '../style'
-import { ToggleSelectAll } from '../ToggleSelectAll'
+import { ResultNumber, SelectedLayerList, StyledLayerList } from '../style'
 import { ListLayerGroup } from './ListLayerGroup'
 import { RegulatoryPanel } from './Panel'
+import { StyledToggleSelectAll } from '../ToggleSelectAll'
+import { getSelectionState, handleSelection } from '../ToggleSelectAll/utils'
 
 import type { RegulatoryLayerCompactFromAPI } from 'domain/entities/regulatory'
 
@@ -78,8 +78,12 @@ export const RegulatoryAreas = forwardRef<HTMLDivElement, RegulatoriesAreasProps
           title={
             <TitleContainer>
               <Title>Zones réglementaires</Title>
-              {regulatoryAreas.length !== 0 && (
-                <ToggleSelectAll
+              <ResultNumber>{`(${regulatoryAreas.length} ${pluralize(
+                'résultat',
+                regulatoryAreas.length
+              )})`}</ResultNumber>
+              {(regulatoryAreas.length !== 0 || selectedRegulatoryAreaIds.length !== 0) && (
+                <StyledToggleSelectAll
                   onSelection={() =>
                     handleSelection({
                       allIds: regulatoryAreas.map(amp => amp.id),

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Reportings/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Reportings/index.tsx
@@ -1,17 +1,18 @@
 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, useMemo, useState } from 'react'
 import styled from 'styled-components'
 
 import { Accordion, Title, TitleContainer } from '../Accordion'
 import { SelectedAccordion } from '../SelectedAccordion'
+import { ResultNumber } from '../style'
 import { Filters } from './Filters'
 import { Layer } from './Layer'
-import { ToggleSelectAll } from '../ToggleSelectAll'
+import { StyledToggleSelectAll } from '../ToggleSelectAll'
+import { getSelectionState, handleSelection } from '../ToggleSelectAll/utils'
 
 import type { Reporting } from 'domain/entities/reporting'
 
@@ -52,8 +53,9 @@ export const Reportings = forwardRef<HTMLDivElement, ReportingsProps>(
           title={
             <TitleContainer>
               <Title>Signalements</Title>
-              {reportings.length !== 0 && (
-                <ToggleSelectAll
+              <ResultNumber>{`(${reportings.length} ${pluralize('résultat', reportings.length)})`}</ResultNumber>
+              {(reportings.length !== 0 || selectedReportingIds.length !== 0) && (
+                <StyledToggleSelectAll
                   onSelection={() =>
                     handleSelection({
                       allIds: reportings.map(reporting => +reporting.id),

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/TerritorialPressure/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/TerritorialPressure/index.tsx
@@ -5,7 +5,7 @@ import { Icon } from '@mtes-mct/monitor-ui'
 import { forwardRef, useMemo } from 'react'
 import styled from 'styled-components'
 
-import { Accordion } from '../Accordion'
+import { Accordion, Title } from '../Accordion'
 
 // Id like 199, 216, 197 can be changes if dashboards in metabase changes
 const AMP_LINK = '/dashboard/199-effort-de-surveillance-et-de-controle-en-amp?'
@@ -58,7 +58,7 @@ export const TerritorialPressure = forwardRef<HTMLDivElement, TerritorialPressur
 
     const titleWithTooltip = (
       <TitleContainer>
-        <span>Pression territoriale des contrôles et surveillances</span>
+        <Title>Pression territoriale des contrôles et surveillances</Title>
         <Tooltip isSideWindow>
           Les liens suivants envoient vers des tableaux Metabase montrant la pression territoriale sur les zones REG,
           les AMP ou à l’échelle du département.

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/ToggleSelectAll/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/ToggleSelectAll/index.tsx
@@ -1,35 +1,37 @@
 import { Icon, THEME } from '@mtes-mct/monitor-ui'
+import styled from 'styled-components'
 
-import { SelectedPinButton } from '../style'
+import { SelectedPinButton } from './style'
 
 export type SelectionState = 'PARTIAL' | 'ALL' | 'NONE'
 
 type ToggleSelectAllProps = {
+  className?: string
   onSelection: () => void
   selectionState: SelectionState
 }
-export function ToggleSelectAll({ onSelection, selectionState }: ToggleSelectAllProps) {
+export function ToggleSelectAll({ className, onSelection, selectionState }: ToggleSelectAllProps) {
   const getIcon = () => {
     switch (selectionState) {
       case 'ALL':
         return (
           <>
-            <Icon.PinFilled color={THEME.color.blueGray} title="Désélectionner tous" />
-            Désélectionner tous
+            <Icon.PinFilled color={THEME.color.blueGray} />
+            Tout désélectionner
           </>
         )
       case 'PARTIAL':
         return (
           <>
-            <Icon.Pin color={THEME.color.blueGray} title="Sélectionner tous" />
-            Sélectionner tous
+            <Icon.Pin color={THEME.color.blueGray} />
+            Tout sélectionner
           </>
         )
       case 'NONE':
         return (
           <>
-            <Icon.Pin color={THEME.color.slateGray} title="Sélectionner tous" />
-            Sélectionner tous
+            <Icon.Pin color={THEME.color.slateGray} />
+            Tout sélectionner
           </>
         )
       default:
@@ -39,6 +41,7 @@ export function ToggleSelectAll({ onSelection, selectionState }: ToggleSelectAll
 
   return (
     <SelectedPinButton
+      className={className}
       onClick={e => {
         e.stopPropagation()
         onSelection()
@@ -49,3 +52,7 @@ export function ToggleSelectAll({ onSelection, selectionState }: ToggleSelectAll
     </SelectedPinButton>
   )
 }
+
+export const StyledToggleSelectAll = styled(ToggleSelectAll)`
+  margin-left: 6px;
+`
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/ToggleSelectAll/style.ts b/frontend/src/features/Dashboard/components/DashboardForm/ToggleSelectAll/style.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const SelectedPinButton = styled.button`
+  background-color: ${p => p.theme.color.white};
+  color: ${p => p.theme.color.slateGray};
+  display: flex;
+  gap: 4px;
+  text-decoration: underline;
+`