diff --git a/geneit_app/src/api/FamilyApi.ts b/geneit_app/src/api/FamilyApi.ts index 1b93ce3..f43bf2f 100644 --- a/geneit_app/src/api/FamilyApi.ts +++ b/geneit_app/src/api/FamilyApi.ts @@ -64,6 +64,15 @@ export class Family implements FamilyAPI { ); } + /** + * Get family tree URL for member + */ + familyTreeURL(member: Member | number): string { + return `/family/${this.family_id}/tree/${ + typeof member === "number" ? member : member.id + }`; + } + /** * Get application URL for couple page */ diff --git a/geneit_app/src/routes/family/FamilyMemberRoute.tsx b/geneit_app/src/routes/family/FamilyMemberRoute.tsx index a7c7171..62e6b3e 100644 --- a/geneit_app/src/routes/family/FamilyMemberRoute.tsx +++ b/geneit_app/src/routes/family/FamilyMemberRoute.tsx @@ -37,6 +37,8 @@ import { PropSelect } from "../../widgets/forms/PropSelect"; import { SexSelection } from "../../widgets/forms/SexSelection"; import { UploadPhotoButton } from "../../widgets/forms/UploadPhotoButton"; import { useQuery } from "../../hooks/useQuery"; +import { mdiFamilyTree } from "@mdi/js"; +import Icon from "@mdi/react"; /** * Create a new member route @@ -150,6 +152,7 @@ export function FamilyMemberRoute(): React.ReactElement { couples={family.couples.getAllOf(member!)} creating={false} editing={false} + onrequestOpenTree={() => n(family.family.familyTreeURL(member!))} onRequestDelete={deleteMember} onRequestEdit={() => n(family.family.URL(`member/${member!.id}/edit`)) @@ -234,6 +237,7 @@ export function MemberPage(p: { onRequestEdit?: () => void; onRequestDelete?: () => void; onForceReload?: () => void; + onrequestOpenTree?: () => void; }): React.ReactElement { const confirm = useConfirm(); const snackbar = useSnackbar(); @@ -308,6 +312,17 @@ export function MemberPage(p: { } /> + {/* Family tree button */} + {p.onrequestOpenTree && ( + + )} {/* Edit button */} {p.onRequestEdit && (