Can set date of birth and date of death

2023-08-10 09:21:57 +02:00
parent 359dd2f9ee
commit 10e8f339cc
6 changed files with 216 additions and 7 deletions
--- a/geneit_app/src/widgets/forms/DateInput.tsx
+++ b/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;
+}