Merge pull request #994 from MTES-MCT/fix-update-owner-details

Refactor owner view
MTES-MCT · Nov 12, 2024 · d89e658 · d89e658
2 parents 4ac155c + c3f97f8
commit d89e658
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 42 deletions.
diff --git a/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx b/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
@@ -80,7 +80,6 @@ const OwnerEditionModal = ({ owner, onCancel }: Props) => {
     <>
       {!isVisitor && (
         <Button
-          className="float-right fr-pr-0"
           iconId="fr-icon-edit-fill"
           priority="tertiary no outline"
           title="Modifier le propriétaire"

diff --git a/frontend/src/hooks/useOwner.tsx b/frontend/src/hooks/useOwner.tsx
@@ -3,28 +3,40 @@ import { useFindEventsByOwnerQuery } from '../services/event.service';
 import { useGetOwnerQuery } from '../services/owner.service';
 import {
   useCountHousingQuery,
-  useFindHousingQuery,
+  useFindHousingQuery
 } from '../services/housing.service';
 
-export function useOwner() {
+interface UseOwnerOptions {
+  include?: ReadonlyArray<'events' | 'housings'>;
+}
+
+export function useOwner(options?: UseOwnerOptions) {
   const { ownerId } = useParams<{ ownerId: string }>();
 
   const { data: owner } = useGetOwnerQuery(ownerId);
 
-  const { data: events } = useFindEventsByOwnerQuery(ownerId);
-
-  const { data: paginatedHousing } = useFindHousingQuery({
-    filters: { ownerIds: [ownerId] },
+  const { data: events } = useFindEventsByOwnerQuery(ownerId, {
+    skip: !options?.include?.includes('events')
   });
 
-  const { data: count } = useCountHousingQuery({
-    ownerIds: [ownerId],
-  });
+  const { data: paginatedHousing } = useFindHousingQuery(
+    {
+      filters: { ownerIds: [ownerId] }
+    },
+    { skip: !options?.include?.includes('housings') }
+  );
+
+  const { data: count } = useCountHousingQuery(
+    {
+      ownerIds: [ownerId]
+    },
+    { skip: !options?.include?.includes('housings') }
+  );
 
   return {
     events,
     paginatedHousing,
     owner,
-    count,
+    count
   };
 }
diff --git a/frontend/src/views/Owner/OwnerView.tsx b/frontend/src/views/Owner/OwnerView.tsx
@@ -1,17 +1,21 @@
+import Tag from '@codegouvfr/react-dsfr/Tag';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Unstable_Grid2';
 import { useState } from 'react';
-import { Col, Row } from '../../components/_dsfr';
+
 import styles from './owner.module.scss';
 import { useOwner } from '../../hooks/useOwner';
 import OwnerCard from '../../components/OwnerCard/OwnerCard';
 import OwnerHousingCard from '../../components/OwnerHousingCard/OwnerHousingCard';
 import { useDocumentTitle } from '../../hooks/useDocumentTitle';
 import OwnerEditionModal from '../../components/modals/OwnerEditionModal/OwnerEditionModal';
 import MainContainer from '../../components/MainContainer/MainContainer';
-import Tag from '@codegouvfr/react-dsfr/Tag';
-import Typography from '@mui/material/Typography';
+import { fr } from '@codegouvfr/react-dsfr';
 
-const OwnerView = () => {
-  const { count, owner, paginatedHousing } = useOwner();
+function OwnerView() {
+  const { count, owner, paginatedHousing } = useOwner({
+    include: ['housings']
+  });
   useDocumentTitle(
     owner ? `Fiche propriétaire - ${owner.fullName}` : 'Page non trouvée'
   );
@@ -22,13 +26,13 @@ const OwnerView = () => {
   );
 
   if (!owner || !paginatedHousing) {
-    return <></>;
+    return <Loading />;
   }
 
   return (
     <MainContainer grey>
-      <Row alignItems="top" gutters>
-        <Col n="4">
+      <Grid container columnSpacing={3} alignItems="flex-start">
+        <Grid xs={4}>
           <OwnerCard
             owner={owner}
             housingCount={housingCount}
@@ -40,25 +44,37 @@ const OwnerView = () => {
               />
             }
           />
-        </Col>
-        <Col n="8">
-          <header className={styles.header}>
-            <Typography component="h3" variant="h6" mb={0}>
-              <span className="fr-mr-1w">Tous les logements</span>
-              <Tag className={styles.tag}>{housingCount}</Tag>
-            </Typography>
-          </header>
-          <Row gutters>
-            {paginatedHousing.entities.map((housing) => (
-              <Col n="6" key={`col-${housing.id}`}>
-                <OwnerHousingCard housing={housing} />
-              </Col>
-            ))}
-          </Row>
-        </Col>
-      </Row>
+        </Grid>
+
+        <Grid container xs={8} spacing={2}>
+          <Grid component="header" xs={12}>
+            <Grid
+              component="section"
+              sx={{
+                backgroundColor:
+                  fr.colors.decisions.background.default.grey.default,
+                padding: fr.spacing('2w')
+              }}
+            >
+              <Typography component="h3" variant="h6" mb={0}>
+                <span className="fr-mr-1w">Tous les logements</span>
+                <Tag className={styles.tag}>{housingCount}</Tag>
+              </Typography>
+            </Grid>
+          </Grid>
+          {paginatedHousing.entities.map((housing) => (
+            <Grid component="article" xs={6} key={`col-${housing.id}`}>
+              <OwnerHousingCard housing={housing} />
+            </Grid>
+          ))}
+        </Grid>
+      </Grid>
     </MainContainer>
   );
-};
+}
+
+function Loading() {
+  return null;
+}
 
 export default OwnerView;
diff --git a/frontend/src/views/Owner/owner.module.scss b/frontend/src/views/Owner/owner.module.scss
@@ -14,11 +14,6 @@
 
 .header {
   background-color: var(--white-1000);
-  padding: 1rem;
-  margin-bottom: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
 }
 
 .tag {