Can set date of birth and date of death

This commit is contained in:
Pierre HUBERT 2023-08-10 09:21:57 +02:00
parent 359dd2f9ee
commit 10e8f339cc
6 changed files with 216 additions and 7 deletions

View File

@ -1,6 +1,6 @@
import { APIClient } from "./ApiClient";
interface NumberConstraint {
export interface NumberConstraint {
min: number;
max: number;
}

View File

@ -2,7 +2,7 @@ import ClearIcon from "@mui/icons-material/Clear";
import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
import SaveIcon from "@mui/icons-material/Save";
import { Button, Grid, Stack } from "@mui/material";
import { Button, Checkbox, FormControlLabel, Grid, Stack } from "@mui/material";
import React from "react";
import { useNavigate, useParams } from "react-router-dom";
import { Member, MemberApi } from "../../api/MemberApi";
@ -14,9 +14,11 @@ import { AsyncWidget } from "../../widgets/AsyncWidget";
import { useFamily } from "../../widgets/BaseFamilyRoute";
import { ConfirmLeaveWithoutSaveDialog } from "../../widgets/ConfirmLeaveWithoutSaveDialog";
import { FamilyPageTitle } from "../../widgets/FamilyPageTitle";
import { PropEdit } from "../../widgets/PropEdit";
import { PropEdit } from "../../widgets/forms/PropEdit";
import { PropertiesBox } from "../../widgets/PropertiesBox";
import { SexSelection } from "../../widgets/SexSelection";
import { SexSelection } from "../../widgets/forms/SexSelection";
import { DateInput } from "../../widgets/forms/DateInput";
import { PropCheckbox } from "../../widgets/forms/PropCheckbox";
/**
* Create a new member route
@ -321,6 +323,8 @@ export function MemberPage(p: {
}}
size={ServerApi.Config.constraints.member_last_name}
/>
{/* Birth last name */}
<PropEdit
label="Nom de naissance"
editable={p.editing}
@ -331,6 +335,53 @@ export function MemberPage(p: {
}}
size={ServerApi.Config.constraints.member_birth_last_name}
/>
{/* Birth day */}
<DateInput
label="Date de naissance"
editable={p.editing}
id="dob"
value={{
year: member.birth_year,
month: member.birth_month,
day: member.birth_day,
}}
onValueChange={(d) => {
member.birth_year = d.year;
member.birth_month = d.month;
member.birth_day = d.day;
updatedMember();
}}
/>
{/* Is dead */}
<PropCheckbox
checked={member.dead}
editable={p.editing}
label="Décédé"
onValueChange={(v) => {
member.dead = v;
updatedMember();
}}
/>
{/* Death day */}
<DateInput
label="Date de décès"
editable={p.editing}
id="dod"
value={{
year: member.death_year,
month: member.death_month,
day: member.death_day,
}}
onValueChange={(d) => {
member.death_year = d.year;
member.death_month = d.month;
member.death_day = d.day;
updatedMember();
}}
/>
</PropertiesBox>
</Grid>
<Grid item sm={12} md={6}>
@ -343,7 +394,9 @@ export function MemberPage(p: {
<PropertiesBox title="Biographie"></PropertiesBox>
</Grid>
<Grid item sm={12} md={6}>
<PropertiesBox title="Époux / Épouse">TODO</PropertiesBox>
<PropertiesBox title={member.sex === "F" ? "Époux" : "Épouse"}>
TODO
</PropertiesBox>
</Grid>
<Grid item sm={12} md={6}>
<PropertiesBox title="Enfants">TODO</PropertiesBox>

View File

@ -0,0 +1,131 @@
import { Stack, TextField, Typography } from "@mui/material";
import { NumberConstraint, ServerApi } from "../../api/ServerApi";
export interface DateValue {
year?: number;
month?: number;
day?: number;
}
export function DateInput(p: {
id: string;
label: string;
editable: boolean;
value: DateValue;
onValueChange: (newVal: DateValue) => void;
}): React.ReactElement {
if (!p.editable) {
if (!p.value.year && !p.value.month && !p.value.day) return <></>;
return (
<Typography
variant="body2"
display="block"
style={{ marginBottom: "15px" }}
>
{p.label} : {p.value.day ?? "__"} / {p.value.month ?? "__"} /{" "}
{p.value.year ?? "__"}
</Typography>
);
}
return (
<Stack direction={"row"}>
<Typography
variant="caption"
style={{ display: "flex", alignItems: "center", flex: 10 }}
>
{p.label}
</Typography>
<TextField
required
id={`${p.id}-day`}
label="Jour"
value={p.value.day}
error={isValErr(p.value.day, ServerApi.Config.constraints.date_day)}
variant="filled"
style={{ flex: 20 }}
type="number"
onChange={(e) => {
const val = Number(e.target.value);
p.onValueChange({
day: val > 0 ? val : undefined,
month: p.value.month,
year: p.value.year,
});
}}
inputProps={{
min: ServerApi.Config.constraints.date_day.min,
max: ServerApi.Config.constraints.date_day.max,
}}
/>
<Separator />
<TextField
required
id={`${p.id}-month`}
label="Mois"
value={p.value.month}
error={isValErr(p.value.month, ServerApi.Config.constraints.date_month)}
variant="filled"
style={{ flex: 20 }}
type="number"
onChange={(e) => {
const val = Number(e.target.value);
p.onValueChange({
day: p.value.day,
month: val > 0 ? val : undefined,
year: p.value.year,
});
}}
inputProps={{
min: ServerApi.Config.constraints.date_month.min,
max: ServerApi.Config.constraints.date_month.max,
}}
/>
<Separator />
<TextField
required
id={`${p.id}-year`}
label="Année"
value={p.value.year}
onChange={(e) => {
const val = Number(e.target.value);
p.onValueChange({
day: p.value.day,
month: p.value.month,
year: val > 0 ? val : undefined,
});
}}
error={isValErr(p.value.year, ServerApi.Config.constraints.date_year)}
variant="filled"
style={{ flex: 30 }}
type="number"
inputProps={{
min: ServerApi.Config.constraints.date_year.min,
max: ServerApi.Config.constraints.date_year.max,
}}
/>
</Stack>
);
}
function Separator(): React.ReactElement {
return (
<Typography
variant="body2"
style={{
margin: "2px",
display: "flex",
alignItems: "center",
flex: 2,
justifyContent: "center",
}}
>
/
</Typography>
);
}
function isValErr(val: number | undefined, c: NumberConstraint): boolean {
return (val && (val < c.min || val > c.max)) || false;
}

View File

@ -0,0 +1,25 @@
import { Checkbox, FormControlLabel, Typography } from "@mui/material";
export function PropCheckbox(p: {
editable: boolean;
label: string;
checked: boolean | undefined;
onValueChange: (v: boolean) => void;
}): React.ReactElement {
if (!p.editable && p.checked)
return <Typography variant="body2">{p.label}</Typography>;
if (!p.editable) return <></>;
return (
<FormControlLabel
control={
<Checkbox
checked={p.checked}
onChange={(e) => p.onValueChange(e.target.checked)}
/>
}
label={p.label}
/>
);
}

View File

@ -1,5 +1,5 @@
import { TextField } from "@mui/material";
import { LenConstraint } from "../api/ServerApi";
import { LenConstraint } from "../../api/ServerApi";
/**
* Couple / Member property edition

View File

@ -6,7 +6,7 @@ import {
Radio,
Typography,
} from "@mui/material";
import { Sex } from "../api/MemberApi";
import { Sex } from "../../api/MemberApi";
export function SexSelection(p: {
readonly?: boolean;