Can set date of birth and date of death
This commit is contained in:
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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
35
geneit_app/src/widgets/forms/PropEdit.tsx
Normal file
35
geneit_app/src/widgets/forms/PropEdit.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import { TextField } from "@mui/material";
|
||||
import { LenConstraint } from "../../api/ServerApi";
|
||||
|
||||
/**
|
||||
* Couple / Member property edition
|
||||
*/
|
||||
export function PropEdit(p: {
|
||||
label: string;
|
||||
editable: boolean;
|
||||
value?: string;
|
||||
onValueChange: (newVal: string | undefined) => void;
|
||||
size: LenConstraint;
|
||||
}): React.ReactElement {
|
||||
if (((!p.editable && p.value) ?? "") === "") return <></>;
|
||||
|
||||
return (
|
||||
<TextField
|
||||
label={p.label}
|
||||
value={p.value}
|
||||
onChange={(e) =>
|
||||
p.onValueChange(
|
||||
e.target.value.length === 0 ? undefined : e.target.value
|
||||
)
|
||||
}
|
||||
inputProps={{
|
||||
maxLength: p.size.max,
|
||||
}}
|
||||
InputProps={{
|
||||
readOnly: !p.editable,
|
||||
}}
|
||||
variant={p.editable ? "filled" : "standard"}
|
||||
style={{ width: "100%", marginBottom: "15px" }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
44
geneit_app/src/widgets/forms/SexSelection.tsx
Normal file
44
geneit_app/src/widgets/forms/SexSelection.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import {
|
||||
FormControl,
|
||||
FormLabel,
|
||||
RadioGroup,
|
||||
FormControlLabel,
|
||||
Radio,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import { Sex } from "../../api/MemberApi";
|
||||
|
||||
export function SexSelection(p: {
|
||||
readonly?: boolean;
|
||||
current?: Sex;
|
||||
onChange: (s: Sex) => void;
|
||||
}): React.ReactElement {
|
||||
if (p.readonly) {
|
||||
if (p.current === undefined || p.current === null) return <></>;
|
||||
|
||||
return (
|
||||
<Typography
|
||||
variant="body2"
|
||||
display="block"
|
||||
style={{ marginBottom: "15px" }}
|
||||
>
|
||||
Sexe : {p.current === "M" ? "Homme" : "Femme"}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<FormControl style={{ marginBottom: "15px" }}>
|
||||
<FormLabel id="sex-label">Sexe</FormLabel>
|
||||
<RadioGroup
|
||||
row
|
||||
aria-labelledby="sex-label"
|
||||
value={p.current}
|
||||
onChange={(e) => p.onChange(e.target.value as Sex)}
|
||||
>
|
||||
<FormControlLabel value="M" control={<Radio />} label="Homme" />
|
||||
<FormControlLabel value="F" control={<Radio />} label="Femme" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user