Rework housing update side menu

frontend/src/components/Aside/AsideNext.tsx

@@ -0,0 +1,75 @@
+import { fr } from '@codegouvfr/react-dsfr';
+import Button from '@codegouvfr/react-dsfr/Button';
+import ButtonsGroup from '@codegouvfr/react-dsfr/ButtonsGroup';
+import Drawer, { DrawerProps } from '@mui/material/Drawer';
+import Grid from '@mui/material/Unstable_Grid2';
+import { ReactNode } from 'react';
+
+interface AsideProps {
+  drawerProps?: Omit<DrawerProps, 'open' | 'onClose'>;
+  header?: ReactNode;
+  main?: ReactNode;
+  footer?: ReactNode;
+  open: boolean;
+  onClose(): void;
+  onSave(): void;
+}
+
+function Aside(props: AsideProps) {
+  return (
+    <Drawer
+      anchor="right"
+      open={props.open}
+      onClose={props.onClose}
+      slotProps={{
+        backdrop: {
+          invisible: true
+        }
+      }}
+      {...props.drawerProps}
+    >
+      <Grid container sx={{ flexDirection: 'column' }} xs>
+        <Grid container sx={{ justifyContent: 'space-between', mb: 3 }}>
+          {props.header && <Grid xs>{props.header}</Grid>}
+
+          <Grid xs="auto">
+            <Button
+              iconId="fr-icon-close-line"
+              priority="tertiary no outline"
+              onClick={props.onClose}
+            >
+              Fermer
+            </Button>
+          </Grid>
+        </Grid>
+
+        <Grid sx={{ overflowY: 'auto' }} xs>
+          {props.main}
+        </Grid>
+
+        <Grid className={fr.cx('fr-mt-3w', 'fr-mb-1w')}>
+          <hr style={{ margin: `0 -${fr.spacing('3w')}` }} />
+          {props.footer ?? (
+            <ButtonsGroup
+              buttons={[
+                {
+                  priority: 'secondary',
+                  children: 'Annuler',
+                  onClick: props.onClose
+                },
+                {
+                  priority: 'primary',
+                  children: 'Enregistrer',
+                  onClick: props.onSave
+                }
+              ]}
+              inlineLayoutWhen="always"
+            />
+          )}
+        </Grid>
+      </Grid>
+    </Drawer>
+  );
+}
+
+export default Aside;

frontend/src/components/HousingDetails/HousingDetailsCard.tsx

@@ -8,20 +8,17 @@ import classNames from 'classnames';
 import { useState } from 'react';
 
 import styles from './housing-details-card.module.scss';
-import { Housing, HousingUpdate } from '../../models/Housing';
+import { Housing } from '../../models/Housing';
 import HousingDetailsSubCardBuilding from './HousingDetailsSubCardBuilding';
 import HousingDetailsSubCardProperties from './HousingDetailsSubCardProperties';
 import HousingDetailsSubCardLocation from './HousingDetailsSubCardLocation';
 import EventsHistory from '../EventsHistory/EventsHistory';
 import { Event } from '../../models/Event';
 import HousingEditionSideMenu from '../HousingEdition/HousingEditionSideMenu';
-import { useFindNotesByHousingQuery } from '../../services/note.service';
-import { useFindEventsByHousingQuery } from '../../services/event.service';
 import { Note } from '../../models/Note';
 import HousingDetailsCardOccupancy from './HousingDetailsSubCardOccupancy';
 import HousingDetailsCardMobilisation from './HousingDetailsSubCardMobilisation';
 import { Campaign } from '../../models/Campaign';
-import { useUpdateHousingMutation } from '../../services/housing.service';
 import AppLink from '../_app/AppLink/AppLink';
 import { useUser } from '../../hooks/useUser';
 
@@ -39,32 +36,9 @@ function HousingDetailsCard({
   housingCampaigns
 }: Props) {
   const { isVisitor } = useUser();
-  const [updateHousing] = useUpdateHousingMutation();
-
   const [isHousingListEditionExpand, setIsHousingListEditionExpand] =
     useState(false);
 
-  const { refetch: refetchHousingEvents } = useFindEventsByHousingQuery(
-    housing.id
-  );
-  const { refetch: refetchHousingNotes } = useFindNotesByHousingQuery(
-    housing.id
-  );
-
-  const submitHousingUpdate = async (
-    housing: Housing,
-    housingUpdate: HousingUpdate
-  ) => {
-    await updateHousing({
-      housing,
-      housingUpdate
-    });
-    await refetchHousingEvents();
-    await refetchHousingNotes();
-
-    setIsHousingListEditionExpand(false);
-  };
-
   return (
     <Paper component="article" elevation={0} sx={{ padding: 3 }}>
       <Grid component="header" container sx={{ mb: 2 }}>
@@ -100,7 +74,6 @@ function HousingDetailsCard({
               <HousingEditionSideMenu
                 housing={housing}
                 expand={isHousingListEditionExpand}
-                onSubmit={submitHousingUpdate}
                 onClose={() => setIsHousingListEditionExpand(false)}
               />
             </>
@@ -111,21 +84,24 @@ function HousingDetailsCard({
         <>
           <HousingDetailsCardOccupancy
             housing={housing}
-            lastOccupancyEvent={housing.source !== 'datafoncier-import' ? housingEvents.find(
-              (event) =>
-                event.category === 'Followup' &&
-                event.kind === 'Update' &&
-                event.section === 'Situation' &&
-                event.name === "Modification du statut d'occupation" &&
-                event.old.occupancy !== event.new.occupancy
-              ) :
-              housingEvents.find(
-              (event) =>
-                event.category === 'Group' &&
-                event.kind === 'Create' &&
-                event.section === 'Ajout d’un logement dans un groupe' &&
-                event.name === "Ajout dans un groupe"
-            )}
+            lastOccupancyEvent={
+              housing.source !== 'datafoncier-import'
+                ? housingEvents.find(
+                    (event) =>
+                      event.category === 'Followup' &&
+                      event.kind === 'Update' &&
+                      event.section === 'Situation' &&
+                      event.name === "Modification du statut d'occupation" &&
+                      event.old.occupancy !== event.new.occupancy
+                  )
+                : housingEvents.find(
+                    (event) =>
+                      event.category === 'Group' &&
+                      event.kind === 'Create' &&
+                      event.section === 'Ajout d’un logement dans un groupe' &&
+                      event.name === 'Ajout dans un groupe'
+                  )
+            }
           />
           <HousingDetailsCardMobilisation
             housing={housing}

frontend/src/components/HousingDetails/HousingDetailsSubCardOccupancy.tsx

@@ -3,6 +3,9 @@ import Badge from '@codegouvfr/react-dsfr/Badge';
 import Tag from '@codegouvfr/react-dsfr/Tag';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Unstable_Grid2';
+import classNames from 'classnames';
+import { getYear } from 'date-fns';
+
 import {
   getOccupancy,
   getSource,
@@ -12,10 +15,8 @@ import {
 } from '../../models/Housing';
 import HousingDetailsSubCard from './HousingDetailsSubCard';
 import DPE from '../DPE/DPE';
-import classNames from 'classnames';
 import styles from './housing-details-card.module.scss';
 import { Event } from '../../models/Event';
-import { getYear } from 'date-fns';
 import LabelNext from '../Label/LabelNext';
 
 interface Props {
@@ -57,7 +58,7 @@ function HousingDetailsCardOccupancy({ housing, lastOccupancyEvent }: Props) {
             >
               Occupation :
             </Typography>
-            <Badge className="bg-975">
+            <Badge aria-label="Occupation" className="bg-975">
               {OccupancyKindLabels[getOccupancy(housing.occupancy)]}
             </Badge>
           </Grid>