Can set date of birth and date of death

geneit_app/src/api/ServerApi.ts

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

geneit_app/src/routes/family/FamilyMemberRoute.tsx

@@ -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>

geneit_app/src/widgets/forms/DateInput.tsx

@@ -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;
+}

geneit_app/src/widgets/forms/PropCheckbox.tsx

@@ -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}
+    />
+  );
+}

geneit_app/src/widgets/forms/PropEdit.tsx

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

geneit_app/src/widgets/forms/SexSelection.tsx

@@ -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;