Can create a family from the GUI

2023-06-27 17:13:12 +02:00
parent 378761f6d5
commit 5b06886c71
6 changed files with 325 additions and 0 deletions
--- a/geneit_app/src/routes/FamiliesListRoute.tsx
+++ b/geneit_app/src/routes/FamiliesListRoute.tsx
@@ -0,0 +1,104 @@
+import React from "react";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { Family } from "../api/FamilyApi";
+import { Button, Typography } from "@mui/material";
+import { CreateFamilyDialog } from "../dialogs/CreateFamilyDialog";
+
+export function FamiliesListRoute(): React.ReactElement {
+  const loadKey = React.useRef(1);
+
+  const [families, setFamilies] = React.useState<Family[] | null>(null);
+
+  const [createFamily, setCreateFamily] = React.useState(false);
+
+  const load = async () => {
+    // TODO : implement
+    setFamilies([]);
+  };
+
+  const reload = () => {
+    loadKey.current += 1;
+  };
+
+  const onRequestCreateFamily = async () => {
+    setCreateFamily(true);
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={loadKey.current}
+      load={load}
+      errMsg="Echec du chargement de la liste des familles"
+      build={() => (
+        <>
+          {families!!.length === 0 ? (
+            <NoFamilyWidget onRequestCreateFamily={onRequestCreateFamily} />
+          ) : (
+            <HasFamilysWidget onReload={reload} families={families!} />
+          )}
+
+          {/** Create family dialog anchor */}
+          <CreateFamilyDialog
+            open={createFamily}
+            onClose={() => setCreateFamily(false)}
+            onCreated={() => {
+              setCreateFamily(false);
+              reload();
+            }}
+          />
+        </>
+      )}
+    />
+  );
+}
+
+function NoFamilyWidget(p: {
+  onRequestCreateFamily: () => void;
+}): React.ReactElement {
+  return (
+    <div style={{ flex: 1, display: "flex", alignItems: "center" }}>
+      <Typography variant="h3" style={{ flex: 1, textAlign: "center" }}>
+        Vous n'appartenez à aucune famille !
+      </Typography>
+
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}
+      >
+        <NoFamilyButton
+          label="Créer une famille"
+          onClick={p.onRequestCreateFamily}
+        />
+
+        <NoFamilyButton label="Rejoindre une famille" onClick={() => {}} />
+      </div>
+    </div>
+  );
+}
+
+function NoFamilyButton(p: {
+  label: string;
+  onClick: () => void;
+}): React.ReactElement {
+  return (
+    <Button
+      variant="outlined"
+      size="large"
+      style={{ width: "300px", marginBottom: "10px" }}
+      onClick={p.onClick}
+    >
+      {p.label}
+    </Button>
+  );
+}
+
+function HasFamilysWidget(p: {
+  families: Family[];
+  onReload: () => void;
+}): React.ReactElement {
+  return <p>todo has families</p>;
+}