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

Show children on member page

Browse Source
This commit is contained in:
Pierre HUBERT
2023-08-11 11:51:59 +02:00
parent a062f27b0b
commit 44f54934cc
4 changed files with 77 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
geneit_app/src/widgets/MemberItem.tsx Normal file
View File

@ -0,0 +1,45 @@
import { mdiCross } from "@mdi/js";
import {
ListItemAvatar,
ListItemButton,
ListItemSecondaryAction,
ListItemText,
} from "@mui/material";
import { Member, fmtDate } from "../api/MemberApi";
import { MemberPhoto } from "./MemberPhoto";
import Icon from "@mdi/react";
import FemaleIcon from "@mui/icons-material/Female";
import MaleIcon from "@mui/icons-material/Male";
export function MemberItem(p: {
member?: Member;
onClick?: () => void;
secondary?: React.ReactElement;
}): React.ReactElement {
return (
<ListItemButton onClick={p.onClick}>
<ListItemAvatar>
<MemberPhoto member={p.member!} />
</ListItemAvatar>
<ListItemText
primary={
<>
{p.member?.fullName}{" "}
{p.member?.sex === "F" ? (
<FemaleIcon fontSize="small" htmlColor="pink" />
) : (
<MaleIcon fontSize="small" htmlColor="lightBlue" />
)}{" "}
{p.member?.dead && <Icon path={mdiCross} size={"1rem"} />}
</>
}
secondary={`${fmtDate(p.member?.dateOfBirth)} - ${fmtDate(
p.member?.dateOfDeath
)}`}
/>
{p.secondary && (
<ListItemSecondaryAction>{p.secondary}</ListItemSecondaryAction>
)}
</ListItemButton>
);
}

45
geneit_app/src/widgets/forms/MemberInput.tsx
View File

@ -1,21 +1,10 @@
import { mdiCross } from "@mdi/js";
import Icon from "@mdi/react";
import ClearIcon from "@mui/icons-material/Clear";
import {
Autocomplete,
IconButton,
ListItemAvatar,
ListItemButton,
ListItemSecondaryAction,
ListItemText,
TextField,
Typography,
} from "@mui/material";
import { Autocomplete, IconButton, TextField, Typography } from "@mui/material";
import React from "react";
import { useNavigate } from "react-router-dom";
import { Member, fmtDate } from "../../api/MemberApi";
import { Member } from "../../api/MemberApi";
import { useFamily } from "../BaseFamilyRoute";
import { MemberPhoto } from "../MemberPhoto";
import { MemberItem } from "../MemberItem";
export function MemberInput(p: {
editable: boolean;
@ -92,31 +81,3 @@ export function MemberInput(p: {
/>
);
}
function MemberItem(p: {
member?: Member;
onClick?: () => void;
secondary?: React.ReactElement;
}): React.ReactElement {
return (
<ListItemButton onClick={p.onClick}>
<ListItemAvatar>
<MemberPhoto member={p.member!} />
</ListItemAvatar>
<ListItemText
primary={
<>
{p.member?.fullName}{" "}
{p.member?.dead && <Icon path={mdiCross} size={"1rem"} />}
</>
}
secondary={`${fmtDate(p.member?.dateOfBirth)} - ${fmtDate(
p.member?.dateOfDeath
)}`}
/>
{p.secondary && (
<ListItemSecondaryAction>{p.secondary}</ListItemSecondaryAction>
)}
</ListItemButton>
);
}