Show couple state in basic family tree

geneit_app/src/api/CoupleApi.ts

@@ -1,5 +1,6 @@
 import { APIClient } from "./ApiClient";
 import { DateValue, Member } from "./MemberApi";
+import { ServerApi } from "./ServerApi";
 
 interface CoupleApiInterface {
   id: number;
@@ -103,6 +104,13 @@ export class Couple implements CoupleApiInterface {
   otherPersonID(id: number): number | undefined {
     return id === this.wife ? this.husband : this.wife;
   }
+
+  get stateFr(): string {
+    return (
+      ServerApi.Config.couples_states.find((c) => c.code === this.state)?.fr ??
+      ""
+    );
+  }
 }
 
 export class CouplesList {

geneit_app/src/widgets/BasicFamilyTree.tsx

@@ -6,7 +6,8 @@ import React from "react";
 import { MemberPhoto } from "./MemberPhoto";
 import { Member, fmtDate } from "../api/MemberApi";
 import Icon from "@mdi/react";
-import { mdiCross } from "@mdi/js";
+import { mdiBabyCarriage, mdiCross } from "@mdi/js";
+import { Couple } from "../api/CoupleApi";
 
 export function BasicFamilyTree(p: {
   tree: FamilyTreeNode;
@@ -46,7 +47,7 @@ function FamilyTreeItem(p: { n: FamilyTreeNode }): React.ReactElement {
                 marginLeft: "20px",
               }}
             >
-              <BasicFamilyMemberItem member={c.member} />
+              <BasicFamilyMemberItem member={c.member} couple={c.couple} />
             </span>
           ))}
         </div>
@@ -62,6 +63,7 @@ function FamilyTreeItem(p: { n: FamilyTreeNode }): React.ReactElement {
 function BasicFamilyMemberItem(p: {
   member: Member;
   primary?: boolean;
+  couple?: Couple;
 }): React.ReactElement {
   return (
     <div style={{ display: "flex", alignItems: "center" }}>
@@ -69,12 +71,26 @@ function BasicFamilyMemberItem(p: {
       <span style={{ width: "10px" }}></span>
       <div style={{ display: "flex", flexDirection: "column" }}>
         <span style={{ fontWeight: p.primary ? "bold" : "unset" }}>
-          {p.member.fullName}{" "}
+          {p.member.fullName} {p.couple?.state && `(${p.couple.stateFr}) `}
           {p.member?.dead && <Icon path={mdiCross} size={"1rem"} />}
         </span>
-        {(p.member.dateOfBirth || p.member.dateOfDeath) &&
+        <span style={{ display: "inline-flex", alignItems: "center" }}>
-          fmtDate(p.member.dateOfBirth) +
+          {p.member.dateOfBirth && (
-            (p.member.dateOfDeath ? " - " + fmtDate(p.member.dateOfDeath) : "")}
+            <>
+              <Icon path={mdiBabyCarriage} size={"1rem"} />{" "}
+              {fmtDate(p.member.dateOfBirth)}
+            </>
+          )}
+
+          <span style={{ width: "10px" }}></span>
+
+          {p.member.dateOfDeath && (
+            <>
+              <Icon path={mdiCross} size={"1rem"} />
+              {fmtDate(p.member.dateOfDeath)}
+            </>
+          )}
+        </span>
       </div>
     </div>
   );