Start to build edit member form

geneit_app/src/widgets/PropEdit.tsx

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

geneit_app/src/widgets/PropertiesBox.tsx

@@ -0,0 +1,14 @@
+import { Paper, Typography } from "@mui/material";
+
+export function PropertiesBox(
+  p: React.PropsWithChildren<{ title: string }>
+): React.ReactElement {
+  return (
+    <Paper elevation={3} style={{ padding: "15px" }}>
+      <Typography variant="h5" style={{ marginBottom: "15px" }}>
+        {p.title}
+      </Typography>
+      {p.children}
+    </Paper>
+  );
+}

geneit_app/src/widgets/SexSelection.tsx

@@ -0,0 +1,28 @@
+import {
+  FormControl,
+  FormLabel,
+  RadioGroup,
+  FormControlLabel,
+  Radio,
+} from "@mui/material";
+import { Sex } from "../api/MemberApi";
+
+export function SexSelection(p: {
+  current?: Sex;
+  onChange: (s: Sex) => void;
+}): React.ReactElement {
+  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>
+  );
+}