Start to build edit member form

2023-08-08 13:55:51 +02:00
parent eacf3b0700
commit d07dfd6596
7 changed files with 322 additions and 1 deletions
--- a/geneit_app/src/routes/family/FamilyMemberRoute.tsx
+++ b/geneit_app/src/routes/family/FamilyMemberRoute.tsx
@ -0,0 +1,112 @@
+import React from "react";
+import { Member } from "../../api/MemberApi";
+import { useFamily } from "../../widgets/BaseFamilyRoute";
+import { Grid, Typography } from "@mui/material";
+import { PropertiesBox } from "../../widgets/PropertiesBox";
+import { PropEdit } from "../../widgets/PropEdit";
+import { ServerApi } from "../../api/ServerApi";
+import { SexSelection } from "../../widgets/SexSelection";
+
+/**
+ * Create a new member route
+ */
+export function FamilyCreateMemberRoute(): React.ReactElement {
+  const family = useFamily();
+  const member = new Member({
+    id: 0,
+    dead: false,
+    family_id: family.family.family_id,
+  });
+  return <MemberPage member={member} creating={true} forceEdit={true} />;
+}
+
+/**
+ * Edit existing member route
+ */
+export function FamilyMemberRoute(): React.ReactElement {
+  return <p>TODO</p>;
+}
+
+export function MemberPage(p: {
+  member: Member;
+  forceEdit: boolean;
+  creating: boolean;
+}): React.ReactElement {
+  // TODO : add confirmation when leaving page https://dev.to/bangash1996/detecting-user-leaving-page-with-react-router-dom-v602-33ni
+  const [editing, setEditing] = React.useState(p.forceEdit);
+  const [member, setMember] = React.useState(structuredClone(p.member));
+
+  const updatedMember = () => {
+    // TODO : add confirmation
+    setMember(structuredClone(member));
+  };
+
+  return (
+    <div style={{ maxWidth: "2000px", margin: "auto" }}>
+      <Typography variant="h3">Fiche de membre</Typography>
+      <Grid container spacing={2}>
+        <Grid item sm={12} md={6}>
+          <PropertiesBox title="Informations générales">
+            {/* Sex */}
+            <SexSelection
+              current={member.sex}
+              onChange={(v) => {
+                member.sex = v;
+                updatedMember();
+              }}
+            />
+
+            {/* First name */}
+            <PropEdit
+              label="Prénom"
+              editable={editing}
+              value={member.first_name}
+              onValueChange={(v) => {
+                member.first_name = v;
+                updatedMember();
+              }}
+              size={ServerApi.Config.constraints.member_first_name}
+            />
+
+            {/* Last name */}
+            <PropEdit
+              label="Nom"
+              editable={editing}
+              value={member.last_name}
+              onValueChange={(v) => {
+                member.last_name = v;
+                updatedMember();
+              }}
+              size={ServerApi.Config.constraints.member_last_name}
+            />
+            <PropEdit
+              label="Nom de naissance"
+              editable={editing}
+              value={member.birth_last_name}
+              onValueChange={(v) => {
+                member.birth_last_name = v;
+                updatedMember();
+              }}
+              size={ServerApi.Config.constraints.member_birth_last_name}
+            />
+          </PropertiesBox>
+        </Grid>
+        <Grid item sm={12} md={6}>
+          <PropertiesBox title="Contact"></PropertiesBox>
+        </Grid>
+        <Grid item sm={12} md={6}>
+          <PropertiesBox title="Photo"></PropertiesBox>
+        </Grid>
+        <Grid item sm={12} md={6}>
+          <PropertiesBox title="Biographie"></PropertiesBox>
+        </Grid>
+        <Grid item sm={12} md={6}>
+          <PropertiesBox title="Époux / Épouse">TODO</PropertiesBox>
+        </Grid>
+        <Grid item sm={12} md={6}>
+          <PropertiesBox title="Enfants">TODO</PropertiesBox>
+        </Grid>
+      </Grid>
+    </div>
+  );
+}