134 lines
3.3 KiB
TypeScript
134 lines
3.3 KiB
TypeScript
import ClearIcon from "@mui/icons-material/Clear";
|
|
import {
|
|
Alert,
|
|
FormControl,
|
|
FormControlLabel,
|
|
FormLabel,
|
|
IconButton,
|
|
Paper,
|
|
Radio,
|
|
RadioGroup,
|
|
Tab,
|
|
Tabs,
|
|
} from "@mui/material";
|
|
import React from "react";
|
|
import { useParams } from "react-router-dom";
|
|
import {
|
|
buildAscendingTree,
|
|
buildDescendingTree,
|
|
} from "../../utils/family_tree";
|
|
import { useFamily } from "../../widgets/BaseFamilyRoute";
|
|
import { MemberItem } from "../../widgets/MemberItem";
|
|
import { RouterLink } from "../../widgets/RouterLink";
|
|
import { BasicFamilyTree } from "../../widgets/BasicFamilyTree";
|
|
import { ComplexFamilyTree } from "../../widgets/complex_family_tree/ComplexFamilyTree";
|
|
|
|
enum CurrTab {
|
|
BasicTree,
|
|
AdvancedTree,
|
|
}
|
|
|
|
enum TreeMode {
|
|
Ascending,
|
|
Descending,
|
|
}
|
|
|
|
export function FamilyMemberTreeRoute(): React.ReactElement {
|
|
const { memberId } = useParams();
|
|
|
|
const family = useFamily();
|
|
|
|
const [currTab, setCurrTab] = React.useState(CurrTab.AdvancedTree);
|
|
const [currMode, setCurrMode] = React.useState(TreeMode.Descending);
|
|
|
|
const member = family.members.get(Number(memberId));
|
|
|
|
const tree = React.useMemo(
|
|
() =>
|
|
!member
|
|
? null
|
|
: currMode === TreeMode.Ascending
|
|
? buildAscendingTree(member.id, family.members, family.couples)
|
|
: buildDescendingTree(member.id, family.members, family.couples),
|
|
[member, currMode, family.members, family.couples]
|
|
);
|
|
|
|
if (!member) {
|
|
return (
|
|
<Alert severity="error">
|
|
L'arbre ne peut pas être constuit : le membre n'existe pas !
|
|
</Alert>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
flex: "1",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
marginBottom: "10px",
|
|
}}
|
|
>
|
|
{/* parent bar */}
|
|
<div style={{ display: "flex" }}>
|
|
<MemberItem
|
|
dense
|
|
member={member}
|
|
secondary={
|
|
<RouterLink to={family.family.URL("tree")}>
|
|
<IconButton>
|
|
<ClearIcon />
|
|
</IconButton>
|
|
</RouterLink>
|
|
}
|
|
/>
|
|
<div style={{ flex: "10" }}></div>
|
|
|
|
<FormControl>
|
|
<FormLabel>Arbre</FormLabel>
|
|
<RadioGroup
|
|
row
|
|
value={currMode}
|
|
onChange={(_e, v) => setCurrMode(Number(v))}
|
|
>
|
|
<FormControlLabel
|
|
value={TreeMode.Descending}
|
|
control={<Radio />}
|
|
label="Descendant"
|
|
/>
|
|
<FormControlLabel
|
|
value={TreeMode.Ascending}
|
|
control={<Radio />}
|
|
label="Ascendant"
|
|
/>
|
|
</RadioGroup>
|
|
</FormControl>
|
|
|
|
<div style={{ flex: "2" }}></div>
|
|
|
|
<Tabs
|
|
value={currTab}
|
|
onChange={(_e, v) => setCurrTab(v)}
|
|
aria-label="basic tabs example"
|
|
>
|
|
<Tab tabIndex={CurrTab.BasicTree} label="Basique" />
|
|
<Tab tabIndex={CurrTab.AdvancedTree} label="Avancé" />
|
|
</Tabs>
|
|
</div>
|
|
|
|
{/* the tree itself */}
|
|
<Paper style={{ flex: "1" }}>
|
|
{currTab === CurrTab.BasicTree ? (
|
|
<BasicFamilyTree tree={tree!} />
|
|
) : (
|
|
<ComplexFamilyTree
|
|
tree={tree!}
|
|
isUp={currMode === TreeMode.Ascending}
|
|
/>
|
|
)}
|
|
</Paper>
|
|
</div>
|
|
);
|
|
}
|