Save precisions on user confirmation

frontend/src/components/HousingDetails/DocumentRenameModal.tsx

@@ -44,10 +44,6 @@ export function createDocumentRenameModal() {
       });
 
       function onClose(): void {
-        props.onCancel();
-      }
-
-      function onOpen(): void {
         form.reset();
       }
 
@@ -65,7 +61,6 @@ export function createDocumentRenameModal() {
               {...rest}
               title="Renommer le document"
               onClose={onClose}
-              onOpen={onOpen}
               onSubmit={form.handleSubmit(onSubmit)}
             >
               {document ? (

frontend/src/components/HousingDetails/DocumentsTab.tsx

@@ -82,7 +82,6 @@ function DocumentsTab() {
 
   function onCancelRename(): void {
     setSelectedDocument(null);
-    documentRenameModal.close();
   }
 
   function rename(filename: string): void {

frontend/src/components/HousingDetails/MobilizationTab.tsx

@@ -1,20 +1,25 @@
 import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import { skipToken } from '@reduxjs/toolkit/query/react';
 import { Predicate } from 'effect';
 import { type ReactNode } from 'react';
 import { match, Pattern } from 'ts-pattern';
 
-import { lastUpdate } from '../../models/Housing';
-import { useFindCampaignsQuery } from '../../services/campaign.service';
-import { useHousing } from '../../hooks/useHousing';
+import { useHousing } from '~/hooks/useHousing';
+import { lastUpdate } from '~/models/Housing';
+import { useFindCampaignsQuery } from '~/services/campaign.service';
+import { useFindPrecisionsByHousingQuery } from '~/services/precision.service';
 import HousingStatusBadge from '../HousingStatusBadge/HousingStatusBadge';
 import PrecisionLists from '../Precision/PrecisionLists';
 import HousingAttribute from './HousingAttribute';
 
 function MobilizationTab() {
   const { housing } = useHousing();
   const findCampaignsQuery = useFindCampaignsQuery();
+  const { data: housingPrecisions } = useFindPrecisionsByHousingQuery(
+    housing ? { housingId: housing.id } : skipToken
+  );
 
   const updated = lastUpdate();
 
@@ -83,7 +88,7 @@ function MobilizationTab() {
       </Stack>
 
       <Stack component="article">
-        <PrecisionLists housingId={housing.id} />
+        <PrecisionLists writable={false} value={housingPrecisions ?? []} />
       </Stack>
     </Stack>
   );

frontend/src/components/HousingEdition/HousingEditionMobilizationTab.tsx

@@ -2,30 +2,27 @@ import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import {
   HOUSING_STATUS_VALUES,
-  HousingStatus
+  HousingStatus,
+  type Precision
 } from '@zerologementvacant/models';
 import {
   useController,
   useFormContext,
   type FieldValues
 } from 'react-hook-form';
 
-import { getSubStatusOptions } from '../../models/HousingState';
+import { getSubStatusOptions } from '~/models/HousingState';
 import HousingStatusSelect from '../HousingListFilters/HousingStatusSelect';
 import HousingSubStatusSelect from '../HousingListFilters/HousingSubStatusSelect';
 import PrecisionLists from '../Precision/PrecisionLists';
-import type { Housing } from '../../models/Housing';
-
-interface Props {
-  housingId: Housing['id'] | null;
-}
 
 interface BaseSchema extends FieldValues {
   status: HousingStatus | null;
   subStatus: string | null;
+  precisions: ReadonlyArray<Precision>;
 }
 
-function HousingEditionMobilizationTab(props: Props) {
+function HousingEditionMobilizationTab() {
   const form = useFormContext();
   const { field: statusField, fieldState: statusFieldState } = useController<
     BaseSchema,
@@ -37,6 +34,9 @@ function HousingEditionMobilizationTab(props: Props) {
     useController<BaseSchema, 'subStatus'>({
       name: 'subStatus'
     });
+  const { field: precisionField } = useController<BaseSchema, 'precisions'>({
+    name: 'precisions'
+  });
 
   const subStatusDisabled =
     statusField.value === null ||
@@ -83,7 +83,10 @@ function HousingEditionMobilizationTab(props: Props) {
           onChange={subStatusField.onChange}
         />
       </Grid>
-      {props.housingId ? <PrecisionLists housingId={props.housingId} /> : null}
+      <PrecisionLists
+        value={precisionField.value}
+        onChange={precisionField.onChange}
+      />
     </Grid>
   );
 }

frontend/src/components/HousingEdition/HousingEditionSideMenu.tsx

@@ -4,29 +4,35 @@ import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
+import { skipToken } from '@reduxjs/toolkit/query/react';
 import {
   HOUSING_STATUS_VALUES,
   HousingStatus,
   Occupancy,
-  OCCUPANCY_VALUES
+  OCCUPANCY_VALUES,
+  PRECISION_CATEGORY_VALUES
 } from '@zerologementvacant/models';
 import { fromJS } from 'immutable';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
-import { type InferType, number, object, string } from 'yup';
-import { useNotification } from '../../hooks/useNotification';
-import { HousingStates } from '../../models/HousingState';
-import { useUpdateHousingMutation } from '../../services/housing.service';
-import { useCreateNoteByHousingMutation } from '../../services/note.service';
+import { array, number, object, string, type InferType } from 'yup';
+import { useNotification } from '~/hooks/useNotification';
+import { HousingStates } from '~/models/HousingState';
+import { useUpdateHousingMutation } from '~/services/housing.service';
+import { useCreateNoteByHousingMutation } from '~/services/note.service';
+import {
+  useFindPrecisionsByHousingQuery,
+  useSaveHousingPrecisionsMutation
+} from '~/services/precision.service';
+import type { Housing, HousingUpdate } from '../../models/Housing';
 import AppLink from '../_app/AppLink/AppLink';
 import AppTextInputNext from '../_app/AppTextInput/AppTextInputNext';
-import OccupancySelect from '../HousingListFilters/OccupancySelect';
 import AsideNext from '../Aside/AsideNext';
+import OccupancySelect from '../HousingListFilters/OccupancySelect';
 import LabelNext from '../Label/LabelNext';
 import HousingEditionMobilizationTab from './HousingEditionMobilizationTab';
-import { useHousingEdition } from './useHousingEdition';
-import type { Housing, HousingUpdate } from '../../models/Housing';
 import type { HousingEditionContext } from './useHousingEdition';
+import { useHousingEdition } from './useHousingEdition';
 
 interface HousingEditionSideMenuProps {
   housing: Housing | null;
@@ -55,11 +61,19 @@ const schema = object({
     .optional()
     .default(null)
     .when('status', ([status], schema) =>
-      HousingStates.find((state) => state.status === status)?.subStatusList?.length
+      HousingStates.find((state) => state.status === status)?.subStatusList
+        ?.length
         ? schema.required('Veuillez renseigner le sous-statut de suivi')
         : schema
     ),
-  note: string().default(null)
+  note: string().default(null),
+  precisions: array(
+    object({
+      id: string().required(),
+      category: string().oneOf(PRECISION_CATEGORY_VALUES).required(),
+      label: string().required()
+    }).required()
+  ).default([])
 }).required();
 
 export type HousingEditionFormSchema = InferType<typeof schema>;
@@ -68,20 +82,27 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
   const { housing, expand, onClose } = props;
   const { tab, setTab } = useHousingEdition();
 
+  const { data: housingPrecisions } = useFindPrecisionsByHousingQuery(
+    props.housing ? { housingId: props.housing.id } : skipToken
+  );
+
   const form = useForm<HousingEditionFormSchema>({
     values: {
       occupancy: props.housing?.occupancy ?? Occupancy.UNKNOWN,
       occupancyIntended: props.housing?.occupancyIntended ?? Occupancy.UNKNOWN,
       status: props.housing?.status ?? HousingStatus.NEVER_CONTACTED,
       subStatus: props.housing?.subStatus ?? null,
-      note: ''
+      note: '',
+      precisions: housingPrecisions ?? []
     },
     mode: 'onSubmit',
     resolver: yupResolver(schema)
   });
 
   const [createNote, noteCreationMutation] = useCreateNoteByHousingMutation();
   const [updateHousing, housingUpdateMutation] = useUpdateHousingMutation();
+  const [saveHousingPrecisions, saveHousingPrecisionsMutation] =
+    useSaveHousingPrecisionsMutation();
 
   useNotification({
     toastId: 'note-creation',
@@ -106,13 +127,24 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
       success: 'Logement mis à jour !'
     }
   });
+  useNotification({
+    toastId: 'housing-precisions-update',
+    isError: saveHousingPrecisionsMutation.isError,
+    isLoading: saveHousingPrecisionsMutation.isLoading,
+    isSuccess: saveHousingPrecisionsMutation.isSuccess,
+    message: {
+      error: 'Impossible de modifier les précisions du logement',
+      loading: 'Modification des précisions du logement...',
+      success: 'Précisions du logement modifiées'
+    }
+  });
 
   function submit() {
     if (housing) {
-      const { note, ...payload } = form.getValues();
+      const { note, precisions, ...payload } = form.getValues();
 
       const hasChanges = fromJS(form.formState.dirtyFields)
-        .filterNot((_, key) => key === 'note')
+        .filterNot((_, key) => key === 'note' || key === 'precisions')
         .some((value) => !!value);
       if (hasChanges) {
         updateHousing({
@@ -126,6 +158,13 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
         });
       }
 
+      if (form.formState.dirtyFields.precisions) {
+        saveHousingPrecisions({
+          housing: housing.id,
+          precisions: precisions.map((precision) => precision.id)
+        });
+      }
+
       if (note) {
         createNote({
           id: housing.id,
@@ -169,9 +208,7 @@ function HousingEditionSideMenu(props: HousingEditionSideMenuProps) {
         />
       </Stack>
     ))
-    .with('mobilization', () => (
-      <HousingEditionMobilizationTab housingId={housing?.id ?? null} />
-    ))
+    .with('mobilization', () => <HousingEditionMobilizationTab />)
     .with('note', () => (
       <AppTextInputNext
         label="Nouvelle note"

frontend/src/components/HousingEdition/HousingListEditionSideMenu.tsx

@@ -144,7 +144,7 @@ function HousingListEditionSideMenu(props: Props) {
       </Stack>
     ))
     .with('mobilization', () => (
-      <HousingEditionMobilizationTab housingId={null} />
+      <HousingEditionMobilizationTab />
     ))
     .with('note', () => (
       <AppTextInputNext<string | null>

frontend/src/components/Precision/PrecisionColumn.tsx

@@ -14,14 +14,14 @@ import styles from './precision-modal.module.scss';
 type PrecisionColumnCommonProps = {
   category: PrecisionCategory;
   icon: FrIconClassName | RiIconClassName;
-  options: Precision[];
+  options: ReadonlyArray<Precision>;
   title: string;
 };
 
 type PrecisionColumnCheckboxProps = PrecisionColumnCommonProps & {
   input?: 'checkbox';
-  value: Precision[];
-  onChange(value: Precision[]): void;
+  value: ReadonlyArray<Precision>;
+  onChange(value: ReadonlyArray<Precision>): void;
 };
 
 type PrecisionColumnRadioProps = PrecisionColumnCommonProps & {