Can set date of birth and date of death
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { APIClient } from "./ApiClient";
|
||||
|
||||
interface NumberConstraint {
|
||||
export interface NumberConstraint {
|
||||
min: number;
|
||||
max: number;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
131
geneit_app/src/widgets/forms/DateInput.tsx
Normal file
131
geneit_app/src/widgets/forms/DateInput.tsx
Normal 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;
|
||||
}
|
||||
25
geneit_app/src/widgets/forms/PropCheckbox.tsx
Normal file
25
geneit_app/src/widgets/forms/PropCheckbox.tsx
Normal 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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { TextField } from "@mui/material";
|
||||
import { LenConstraint } from "../api/ServerApi";
|
||||
import { LenConstraint } from "../../api/ServerApi";
|
||||
|
||||
/**
|
||||
* Couple / Member property edition
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user