refactor(frontend): import PrecisionCategory; replace px by rem

MTES-MCT · Feb 3, 2025 · e4fd768 · e4fd768
1 parent 2000d40
commit e4fd768
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 32 deletions.
diff --git a/frontend/src/components/HousingDetails/HousingDetailsSubCardMobilisation.tsx b/frontend/src/components/HousingDetails/HousingDetailsSubCardMobilisation.tsx
@@ -74,7 +74,7 @@ function HousingDetailsCardMobilisation({ housing, campaigns }: Props) {
                 <>Aucun dispositif indiqué</>
               ) : (
                 housing.precisions?.map((precision, index) => (
-                  <Tag key={'precision_' + index} className={`${styles.tag} "d-block fr-mb-1w"`}>
+                  <Tag key={'precision_' + index} className="d-block fr-m-1w">
                     {precision.startsWith('Dispositif')
                       ? precision.split(OptionTreeSeparator).reverse()[0]
                       : precision
@@ -97,7 +97,7 @@ function HousingDetailsCardMobilisation({ housing, campaigns }: Props) {
                 housing.vacancyReasons?.map((vacancyReason, index) => (
                   <Tag
                     key={'vacancyReason_' + index}
-                    className={`${styles.tag} "d-block fr-mb-1w"`}
+                    className="d-block fr-m-1w"
                   >
                     {vacancyReason.split(OptionTreeSeparator).reverse()[0]}
                   </Tag>

diff --git a/frontend/src/components/HousingDetails/housing-details-card.module.scss b/frontend/src/components/HousingDetails/housing-details-card.module.scss
@@ -45,7 +45,3 @@
 .titleInline {
   display: flex;
 }
-
-.tag {
-  margin: 8px;
-}
diff --git a/frontend/src/components/HousingEdition/HousingEditionSideMenu.tsx b/frontend/src/components/HousingEdition/HousingEditionSideMenu.tsx
@@ -20,7 +20,8 @@ import {
   isPrecisionMechanismCategory,
   Occupancy,
   OCCUPANCY_VALUES,
-  Precision
+  Precision,
+  PrecisionCategory
 } from '@zerologementvacant/models';
 import { Housing, HousingUpdate } from '../../models/Housing';
 import AppLink from '../_app/AppLink/AppLink';
@@ -39,7 +40,7 @@ import { useUpdateHousingNextMutation } from '../../services/housing.service';
 import { useNotification } from '../../hooks/useNotification';
 import { toNewPrecision } from '../../models/Precision';
 import createPrecisionModalNext from '../Precision/PrecisionModalNext';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { PrecisionTabId } from '../Precision/PrecisionTabs';
 import { useFindPrecisionsQuery } from '../../services/precision.service';
 
@@ -171,17 +172,20 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
   }
 
   function useFilteredPrecisions(
-      categoryFilter: (category: "dispositifs-incitatifs" | "dispositifs-coercitifs" | "hors-dispositif-public" | "blocage-involontaire" | "blocage-volontaire" | "immeuble-environnement" | "tiers-en-cause" | "travaux" | "occupation" | "mutation") => boolean,
-      showAll: boolean
-    ): UseFilteredPrecisionsResult {
+    categoryFilter: (category: PrecisionCategory) => boolean,
+    showAll: boolean
+  ): UseFilteredPrecisionsResult {
     const allItems = precisions.filter((precision) =>
       categoryFilter(precision.category)
     );
 
     return {
       totalCount: allItems.length,
-      filteredItems: allItems.slice(0, showAll ? allItems.length : DISPLAY_TAGS),
-      remainingCount: Math.max(0, allItems.length - DISPLAY_TAGS),
+      filteredItems: allItems.slice(
+        0,
+        showAll ? allItems.length : DISPLAY_TAGS
+      ),
+      remainingCount: Math.max(0, allItems.length - DISPLAY_TAGS)
     };
   }
 
@@ -209,23 +213,25 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
   }
 
   function MobilisationTab(): ElementOf<TabsProps.Uncontrolled['tabs']> {
-
     const {
       totalCount: totalMechanisms,
       filteredItems: filteredMechanisms,
-      remainingCount: moreMechanisms,
+      remainingCount: moreMechanisms
     } = useFilteredPrecisions(isPrecisionMechanismCategory, showAllMechanisms);
 
     const {
       totalCount: totalBlockingPoints,
       filteredItems: filteredBlockingPoints,
-      remainingCount: moreBlockingPoints,
-    } = useFilteredPrecisions(isPrecisionBlockingPointCategory, showAllBlockingPoints);
+      remainingCount: moreBlockingPoints
+    } = useFilteredPrecisions(
+      isPrecisionBlockingPointCategory,
+      showAllBlockingPoints
+    );
 
     const {
       totalCount: totalEvolutions,
       filteredItems: filteredEvolutions,
-      remainingCount: moreEvolutions,
+      remainingCount: moreEvolutions
     } = useFilteredPrecisions(isPrecisionEvolutionCategory, showAllEvolutions);
 
     interface ToggleShowAllProps {
@@ -256,7 +262,8 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
       }
     }
 
-    const subStatusDisabled = getSubStatusOptions(statusField.value as HousingStatus) === undefined;
+    const subStatusDisabled =
+      getSubStatusOptions(statusField.value as HousingStatus) === undefined;
 
     return {
       content: (
@@ -326,13 +333,22 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
             </Grid>
             <Grid>
               {filteredMechanisms.map((precision) => (
-                <Tag key={precision.id} className={styles.tag}>{precision.label}</Tag>
+                <Tag key={precision.id} className={styles.tag}>
+                  {precision.label}
+                </Tag>
               ))}
             </Grid>
             {moreMechanisms > 0 && (
               <Grid component="footer">
-                <Button priority="tertiary" onClick={() => toggleShowAll({ setShowAll: setShowAllMechanisms })}>
-                  {showAllMechanisms ? 'Afficher moins' : `Afficher plus (${moreMechanisms})`}
+                <Button
+                  priority="tertiary"
+                  onClick={() =>
+                    toggleShowAll({ setShowAll: setShowAllMechanisms })
+                  }
+                >
+                  {showAllMechanisms
+                    ? 'Afficher moins'
+                    : `Afficher plus (${moreMechanisms})`}
                 </Button>
               </Grid>
             )}
@@ -371,13 +387,22 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
             </Grid>
             <Grid>
               {filteredBlockingPoints.map((precision) => (
-                <Tag key={precision.id} className={styles.tag}>{precision.label}</Tag>
+                <Tag key={precision.id} className={styles.tag}>
+                  {precision.label}
+                </Tag>
               ))}
             </Grid>
             {moreBlockingPoints > 0 && (
               <Grid component="footer">
-                <Button priority="tertiary" onClick={() => toggleShowAll({ setShowAll: setShowAllBlockingPoints })}>
-                  {showAllBlockingPoints ? 'Afficher moins' : `Afficher plus (${moreBlockingPoints})`}
+                <Button
+                  priority="tertiary"
+                  onClick={() =>
+                    toggleShowAll({ setShowAll: setShowAllBlockingPoints })
+                  }
+                >
+                  {showAllBlockingPoints
+                    ? 'Afficher moins'
+                    : `Afficher plus (${moreBlockingPoints})`}
                 </Button>
               </Grid>
             )}
@@ -412,13 +437,22 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
             </Grid>
             <Grid>
               {filteredEvolutions.map((precision) => (
-                <Tag key={precision.id} className={styles.tag}>{precision.label}</Tag>
+                <Tag key={precision.id} className={styles.tag}>
+                  {precision.label}
+                </Tag>
               ))}
             </Grid>
             {moreEvolutions > 0 && (
               <Grid component="footer">
-                <Button priority="tertiary" onClick={() => toggleShowAll({ setShowAll: setShowAllEvolutions })}>
-                  {showAllEvolutions ? 'Afficher moins' : `Afficher plus (${moreEvolutions})`}
+                <Button
+                  priority="tertiary"
+                  onClick={() =>
+                    toggleShowAll({ setShowAll: setShowAllEvolutions })
+                  }
+                >
+                  {showAllEvolutions
+                    ? 'Afficher moins'
+                    : `Afficher plus (${moreEvolutions})`}
                 </Button>
               </Grid>
             )}

diff --git a/frontend/src/components/HousingEdition/housing-edition.module.scss b/frontend/src/components/HousingEdition/housing-edition.module.scss
@@ -1,4 +1,4 @@
 .tag {
-  margin-right: 8px;
-  margin-bottom: 8px;
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
diff --git a/frontend/src/components/Precision/PrecisionTabs.tsx b/frontend/src/components/Precision/PrecisionTabs.tsx
@@ -9,6 +9,7 @@ import { ElementOf } from 'ts-essentials';
 import styles from './precision-modal.module.scss';
 
 import { Precision, PrecisionCategory } from '@zerologementvacant/models';
+import classNames from 'classnames';
 
 interface PrecisionTabs {
   tab: PrecisionTabId;
@@ -54,11 +55,15 @@ function PrecisionTabs(props: PrecisionTabs) {
     return (
       <>
         <Typography sx={{ fontWeight: 700, lineHeight: '1.5rem', mb: 2 }}>
-          <span className={`${fr.cx(columnProps.icon, 'fr-mr-1w')} ${styles.icon}`} />
+          <span
+            className={classNames(
+              fr.cx(columnProps.icon, 'fr-mr-1w'),
+              styles.icon
+            )}
+          />
           {columnProps.title}
         </Typography>
         <Checkbox
-
           options={optionsByCategory.get(columnProps.category)?.map(
             (option): ElementOf<CheckboxProps['options']> => ({
               label: option.label,