Save housing precisions

frontend/src/App.scss

@@ -1,3 +1,4 @@
+@use "reset";
 @use "colors";
 @use "dsfr-fix";
 @use "src/components/Map/housing-popup-overrides";

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="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="d-block fr-mb-1w"
+                    className="d-block fr-m-1w"
                   >
                     {vacancyReason.split(OptionTreeSeparator).reverse()[0]}
                   </Tag>

frontend/src/components/HousingEdition/HousingEditionSideMenu.tsx

@@ -7,16 +7,21 @@ import Grid from '@mui/material/Unstable_Grid2';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { fromJS } from 'immutable';
+import fp from 'lodash/fp';
 import { FormProvider, useController, useForm } from 'react-hook-form';
 import { ElementOf } from 'ts-essentials';
 import * as yup from 'yup';
+import styles from './housing-edition.module.scss';
 
 import {
   HOUSING_STATUS_VALUES,
   HousingStatus,
+  isPrecisionBlockingPointCategory,
+  isPrecisionEvolutionCategory,
+  isPrecisionMechanismCategory,
   Occupancy,
   OCCUPANCY_VALUES,
-  PRECISION_MECHANISM_CATEGORY_VALUES,
+  Precision,
   PrecisionCategory
 } from '@zerologementvacant/models';
 import { Housing, HousingUpdate } from '../../models/Housing';
@@ -34,6 +39,11 @@ import AppTextInputNext from '../_app/AppTextInput/AppTextInputNext';
 import { useCreateNoteByHousingMutation } from '../../services/note.service';
 import { useUpdateHousingNextMutation } from '../../services/housing.service';
 import { useNotification } from '../../hooks/useNotification';
+import { toNewPrecision } from '../../models/Precision';
+import createPrecisionModalNext from '../Precision/PrecisionModalNext';
+import React, { useState } from 'react';
+import { PrecisionTabId } from '../Precision/PrecisionTabs';
+import { useFindPrecisionsQuery } from '../../services/precision.service';
 
 interface HousingEditionSideMenuProps {
   housing: Housing | null;
@@ -43,6 +53,7 @@ interface HousingEditionSideMenuProps {
 }
 
 const WIDTH = '700px';
+const DISPLAY_TAGS = 6;
 
 const schema = yup.object({
   occupancy: yup
@@ -65,14 +76,20 @@ const schema = yup.object({
 
 type FormSchema = yup.InferType<typeof schema>;
 
+const precisionModal = createPrecisionModalNext();
+
 function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
   const { housing, expand, onClose } = props;
+  const [showAllMechanisms, setShowAllMechanisms] = useState(false);
+  const [showAllBlockingPoints, setShowAllBlockingPoints] = useState(false);
+  const [showAllEvolutions, setShowAllEvolutions] = useState(false);
+
   const form = useForm<FormSchema>({
     values: {
       occupancy: props.housing?.occupancy ?? Occupancy.UNKNOWN,
       occupancyIntended: props.housing?.occupancyIntended ?? Occupancy.UNKNOWN,
       status: props.housing?.status ?? HousingStatus.NEVER_CONTACTED,
-      subStatus: props.housing?.subStatus ?? '',
+      subStatus: props.housing?.subStatus ?? null,
       note: ''
     },
     mode: 'onSubmit',
@@ -105,6 +122,18 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
     }
   });
 
+  const { data } = useFindPrecisionsQuery();
+  const precisionOptions = data ?? [];
+  const precisions =
+    housing?.precisions?.length && precisionOptions.length
+      ? housing.precisions
+          .concat(housing?.vacancyReasons ?? [])
+          // Only keep the well formed precisions and vacancy reasons
+          // like `Dispositifs > Dispositifs incitatifs > Réserve personnelle ou pour une autre personne`
+          .filter((precision) => precision.split(' > ').length === 3)
+          .map((precision) => toNewPrecision(precisionOptions, precision))
+      : [];
+
   function submit() {
     if (housing) {
       const { note, ...payload } = form.getValues();
@@ -120,7 +149,8 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
           occupancy: payload.occupancy as Occupancy,
           occupancyIntended: payload.occupancyIntended as Occupancy | null,
           status: payload.status as HousingStatus,
-          subStatus: payload.subStatus
+          subStatus: payload.subStatus,
+          precisions: precisions.map((p) => p.id)
         });
       }
 
@@ -136,6 +166,30 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
     form.reset();
   }
 
+  interface UseFilteredPrecisionsResult {
+    totalCount: number;
+    filteredItems: Precision[];
+    remainingCount: number;
+  }
+
+  function useFilteredPrecisions(
+    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)
+    };
+  }
+
   function OccupationTab(): ElementOf<TabsProps.Uncontrolled['tabs']> {
     return {
       content: (
@@ -160,18 +214,58 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
   }
 
   function MobilisationTab(): ElementOf<TabsProps.Uncontrolled['tabs']> {
-    // TODO: fetch `GET /precisions`
-    const precisions: ReadonlyArray<PrecisionCategory> = [];
-    const mechanisms = precisions.filter((precision) =>
-      PRECISION_MECHANISM_CATEGORY_VALUES.includes(precision)
+    const {
+      totalCount: totalMechanisms,
+      filteredItems: filteredMechanisms,
+      remainingCount: moreMechanisms
+    } = useFilteredPrecisions(isPrecisionMechanismCategory, showAllMechanisms);
+
+    const {
+      totalCount: totalBlockingPoints,
+      filteredItems: filteredBlockingPoints,
+      remainingCount: moreBlockingPoints
+    } = useFilteredPrecisions(
+      isPrecisionBlockingPointCategory,
+      showAllBlockingPoints
     );
 
+    const {
+      totalCount: totalEvolutions,
+      filteredItems: filteredEvolutions,
+      remainingCount: moreEvolutions
+    } = useFilteredPrecisions(isPrecisionEvolutionCategory, showAllEvolutions);
+
+    interface ToggleShowAllProps {
+      setShowAll: React.Dispatch<React.SetStateAction<boolean>>;
+    }
+
+    function toggleShowAll({ setShowAll }: ToggleShowAllProps): void {
+      setShowAll((prev) => !prev);
+    }
+
+    const [tab, setTab] = useState<PrecisionTabId>('dispositifs');
+
     const { field: statusField, fieldState: statusFieldState } =
       useController<FormSchema>({
         name: 'status',
         control: form.control
       });
 
+    // Immediately save the selected precisions
+    function savePrecisions(precisions: Precision[]) {
+      if (housing) {
+        updateHousing({
+          ...housing,
+          occupancy: housing.occupancy as Occupancy,
+          occupancyIntended: housing.occupancyIntended as Occupancy,
+          precisions: precisions.map((p) => p.id)
+        });
+      }
+    }
+
+    const subStatusDisabled =
+      getSubStatusOptions(statusField.value as HousingStatus) === undefined;
+
     return {
       content: (
         <Grid component="section" container sx={{ rowGap: 2 }}>
@@ -196,10 +290,7 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
               }}
             />
             <AppSelectNext
-              disabled={
-                getSubStatusOptions(statusField.value as HousingStatus) ===
-                undefined
-              }
+              disabled={subStatusDisabled}
               label="Sous-statut de suivi"
               name="subStatus"
               multiple={false}
@@ -227,16 +318,40 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
                   fontWeight: 700
                 }}
               >
-                Dispositifs ({mechanisms.length})
+                Dispositifs ({totalMechanisms})
               </Typography>
-              <Button priority="secondary" title="Modifier les dispositifs">
+              <Button
+                priority="secondary"
+                title="Modifier les dispositifs"
+                onClick={() => {
+                  setTab('dispositifs');
+                  precisionModal.open();
+                }}
+              >
                 Modifier
               </Button>
             </Grid>
             <Grid>
-              <Tag>Ma Prime Renov’</Tag>
-              <Tag>Aides aux travaux</Tag>
+              {filteredMechanisms.map((precision) => (
+                <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>
+              </Grid>
+            )}
           </Grid>
 
           <Grid
@@ -257,22 +372,46 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
                   fontWeight: 700
                 }}
               >
-                Points de blocages (0)
+                Points de blocages ({totalBlockingPoints})
               </Typography>
               <Button
                 priority="secondary"
                 title="Modifier les points de blocage"
+                onClick={() => {
+                  setTab('points-de-blocage');
+                  precisionModal.open();
+                }}
               >
                 Modifier
               </Button>
             </Grid>
-            <Grid>Badges</Grid>
+            <Grid>
+              {filteredBlockingPoints.map((precision) => (
+                <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>
+              </Grid>
+            )}
           </Grid>
 
           <Grid
             component="article"
             container
-            sx={{ alignItems: 'center', columnGap: 2 }}
+            sx={{ alignItems: 'center', columnGap: 2, rowGap: 1 }}
             xs={12}
           >
             <Grid
@@ -283,19 +422,50 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
                 component="h3"
                 sx={{ fontSize: '1.125rem', fontWeight: 700 }}
               >
-                Évolutions du logement (1)
+                Évolutions du logement ({totalEvolutions})
               </Typography>
               <Button
                 priority="secondary"
                 title="Modifier les évolutions du logement"
+                onClick={() => {
+                  setTab('evolutions');
+                  precisionModal.open();
+                }}
               >
                 Modifier
               </Button>
             </Grid>
             <Grid>
-              <Tag>Travaux : en cours</Tag>
+              {filteredEvolutions.map((precision) => (
+                <Tag key={precision.id} className={styles.tag}>
+                  {fp.startCase(precision.category.replace('-', ' '))} :&nbsp;
+                  {precision.label.toLowerCase()}
+                </Tag>
+              ))}
             </Grid>
+            {moreEvolutions > 0 && (
+              <Grid component="footer">
+                <Button
+                  priority="tertiary"
+                  onClick={() =>
+                    toggleShowAll({ setShowAll: setShowAllEvolutions })
+                  }
+                >
+                  {showAllEvolutions
+                    ? 'Afficher moins'
+                    : `Afficher plus (${moreEvolutions})`}
+                </Button>
+              </Grid>
+            )}
           </Grid>
+
+          <precisionModal.Component
+            tab={tab}
+            options={precisionOptions}
+            value={precisions}
+            onSubmit={savePrecisions}
+            onTabChange={setTab}
+          />
         </Grid>
       ),
       label: 'Mobilisation'

frontend/src/components/HousingEdition/HousingStatusSelect.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useId, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { SelectOption } from '../../models/SelectOption';
@@ -34,16 +34,21 @@ const HousingStatusSelect = ({
     setShowOptions(false);
   };
 
+  const inputId = useId();
+
   return (
     <div className="select-single-input" ref={wrapperRef}>
       <div
         className={classNames({
           [`fr-select-group--${messageType}`]: messageType
         })}
       >
-        <label className="fr-label">Statut de suivi</label>
+        <label className="fr-label" htmlFor={inputId}>
+          Statut de suivi
+        </label>
         <button
           className="fr-select"
+          id={inputId}
           title={showOptions ? 'Masquer les options' : 'Afficher les options'}
           onClick={() => setShowOptions(!showOptions)}
         >