Show couple state in basic family tree

This commit is contained in:
Pierre HUBERT 2023-08-22 11:55:57 +02:00
parent 365b71ba2d
commit 51dbd04f7d
2 changed files with 12 additions and 2 deletions

View File

@ -1,5 +1,6 @@
import { APIClient } from "./ApiClient"; import { APIClient } from "./ApiClient";
import { DateValue, Member } from "./MemberApi"; import { DateValue, Member } from "./MemberApi";
import { ServerApi } from "./ServerApi";
interface CoupleApiInterface { interface CoupleApiInterface {
id: number; id: number;
@ -103,6 +104,13 @@ export class Couple implements CoupleApiInterface {
otherPersonID(id: number): number | undefined { otherPersonID(id: number): number | undefined {
return id === this.wife ? this.husband : this.wife; 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 { export class CouplesList {

View File

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