pierre/GeneIT
1
0
Fork 0
Code Issues Pull Requests 7 Packages Projects Releases Wiki Activity

Can access member page from basic family tree

Browse Source
This commit is contained in:
Pierre HUBERT 2023-08-22 11:59:56 +02:00
parent 51dbd04f7d
commit cae70ee738
1 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
geneit_app/src/widgets/BasicFamilyTree.tsx
View File

@ -1,13 +1,15 @@
import { TreeItem, TreeView } from "@mui/lab";
import { FamilyTreeNode } from "../utils/family_tree";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import React from "react";
import { MemberPhoto } from "./MemberPhoto";
import { Member, fmtDate } from "../api/MemberApi";
import Icon from "@mdi/react";
import { mdiBabyCarriage, mdiCross } from "@mdi/js";
import Icon from "@mdi/react";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { TreeItem, TreeView } from "@mui/lab";
import React from "react";
import { useNavigate } from "react-router-dom";
import { Couple } from "../api/CoupleApi";
import { Member, fmtDate } from "../api/MemberApi";
import { FamilyTreeNode } from "../utils/family_tree";
import { useFamily } from "./BaseFamilyRoute";
import { MemberPhoto } from "./MemberPhoto";
export function BasicFamilyTree(p: {
tree: FamilyTreeNode;
@ -65,8 +67,14 @@ function BasicFamilyMemberItem(p: {
primary?: boolean;
couple?: Couple;
}): React.ReactElement {
const family = useFamily();
const n = useNavigate();
return (
<div style={{ display: "flex", alignItems: "center" }}>
<div
style={{ display: "flex", alignItems: "center" }}
onDoubleClick={() => n(family.family.memberURL(p.member))}
>
<MemberPhoto member={p.member} />
<span style={{ width: "10px" }}></span>
<div style={{ display: "flex", flexDirection: "column" }}>
@ -74,6 +82,8 @@ function BasicFamilyMemberItem(p: {
{p.member.fullName} {p.couple?.state && `(${p.couple.stateFr}) `}
{p.member?.dead && <Icon path={mdiCross} size={"1rem"} />}
</span>
{/* secondary information */}
<span style={{ display: "inline-flex", alignItems: "center" }}>
{p.member.dateOfBirth && (
<>