Show couples on members page

geneit_app/src/routes/family/FamilyMemberRoute.tsx

@@ -3,11 +3,18 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
 import FileDownloadIcon from "@mui/icons-material/FileDownload";
 import SaveIcon from "@mui/icons-material/Save";
-import { Button, Grid, Stack } from "@mui/material";
+import {
+  Button,
+  Grid,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemText,
+  Stack,
+} from "@mui/material";
 import * as EmailValidator from "email-validator";
 import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { Member, MemberApi } from "../../api/MemberApi";
+import { Member, MemberApi, fmtDate } from "../../api/MemberApi";
 import { ServerApi } from "../../api/ServerApi";
 import { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
 import { useConfirm } from "../../hooks/context_providers/ConfirmDialogProvider";
@@ -27,6 +34,8 @@ import { PropEdit } from "../../widgets/forms/PropEdit";
 import { PropSelect } from "../../widgets/forms/SelectInput";
 import { SexSelection } from "../../widgets/forms/SexSelection";
 import { UploadPhotoButton } from "../../widgets/forms/UploadPhotoButton";
+import { Couple } from "../../api/CoupleApi";
+import { CouplePhoto } from "../../widgets/CouplePhoto";
 
 /**
  * Create a new member route
@@ -129,6 +138,7 @@ export function FamilyMemberRoute(): React.ReactElement {
           member={member!}
           children={family.members.children(member!.id)}
           siblings={family.members.siblings(member!.id)}
+          couples={family.couples.getAllOf(member!)}
           creating={false}
           editing={false}
           onRequestDelete={deleteMember}
@@ -209,6 +219,7 @@ export function MemberPage(p: {
   shouldAllowLeaving?: boolean;
   children?: Member[];
   siblings?: Member[];
+  couples?: Couple[];
   onCancel?: () => void;
   onSave?: (m: Member) => void;
   onRequestEdit?: () => void;
@@ -606,12 +617,20 @@ export function MemberPage(p: {
           </Grid>
         )}
 
-        {/* Spouse */}
-        <Grid item sm={12} md={6}>
-          <PropertiesBox title={member.sex === "F" ? "Époux" : "Épouse"}>
-            TODO
-          </PropertiesBox>
-        </Grid>
+        {/* Couples */}
+        {p.couples && (
+          <Grid item sm={12} md={6}>
+            <PropertiesBox title={member.sex === "F" ? "Époux" : "Épouse"}>
+              {p.couples!.length === 0 ? (
+                <>{member.sex === "F" ? "Aucun époux" : "Aucune épouse"}</>
+              ) : (
+                p.couples.map((c) => (
+                  <CoupleItem key={c.id} currMemberId={member.id} couple={c} />
+                ))
+              )}
+            </PropertiesBox>
+          </Grid>
+        )}
 
         {/* Children */}
         {p.children && (
@@ -656,3 +675,47 @@ export function MemberPage(p: {
     </div>
   );
 }
+
+function CoupleItem(p: {
+  currMemberId: number;
+  couple: Couple;
+}): React.ReactElement {
+  const n = useNavigate();
+
+  const family = useFamily();
+
+  const statusStr = ServerApi.Config.couples_states.find(
+    (c) => c.code === p.couple.state
+  )?.fr;
+
+  const status = [];
+  if (statusStr) status.push(statusStr);
+
+  if (p.couple.dateOfWedding)
+    status.push(`Mariage : ${fmtDate(p.couple.dateOfWedding)}`);
+
+  if (p.couple.dateOfDivorce)
+    status.push(`Divorce : ${fmtDate(p.couple.dateOfDivorce)}`);
+
+  const otherSpouseID =
+    p.couple.wife === p.currMemberId ? p.couple.husband : p.couple.wife;
+  const otherSpouse = otherSpouseID
+    ? family.members.get(otherSpouseID)
+    : undefined;
+
+  return (
+    <ListItemButton onClick={() => n(family.family.coupleURL(p.couple))}>
+      <ListItemAvatar>
+        {p.couple.hasPhoto ? (
+          <CouplePhoto couple={p.couple!} />
+        ) : (
+          <MemberPhoto member={otherSpouse} />
+        )}
+      </ListItemAvatar>
+      <ListItemText
+        primary={otherSpouse ? otherSpouse.fullName : "___ ___"}
+        secondary={status.join(" - ")}
+      ></ListItemText>
+    </ListItemButton>
+  );
+}