Can create a family from the GUI

geneit_app/src/dialogs/CreateFamilyDialog.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { TextInputDialog } from "./TextInputDialog";
+import { ServerApi } from "../api/ServerApi";
+import { FamilyApi } from "../api/FamilyApi";
+
+export function CreateFamilyDialog(p: {
+  open: boolean;
+  onClose: () => void;
+  onCreated: () => void;
+}): React.ReactElement {
+  const [name, setName] = React.useState("");
+  const [creating, setCreating] = React.useState(false);
+  const [error, setError] = React.useState(false);
+
+  const cancel = () => {
+    setName("");
+    setCreating(false);
+    setError(false);
+    p.onClose();
+  };
+
+  const createFamily = async () => {
+    setCreating(true);
+    try {
+      await FamilyApi.CreateFamily(name);
+      setName("");
+      p.onCreated();
+    } catch (e) {
+      console.error(e);
+      setError(true);
+    }
+    setCreating(false);
+  };
+
+  return (
+    <TextInputDialog
+      open={p.open}
+      title="Creation d'une famille"
+      text="Veuillez définir le nom que vous souhaitez donner à la famille créée :"
+      label="Nom de la famille"
+      minLen={ServerApi.Config.constraints.family_name_len.min}
+      maxLen={ServerApi.Config.constraints.family_name_len.max}
+      onClose={cancel}
+      onCancel={cancel}
+      submitButton="Créer la famille"
+      value={name}
+      onValueChange={setName}
+      isChecking={creating}
+      checkingMessage="Création en cours..."
+      errorIsBlocking={false}
+      error={error ? "Echec de la création de la famille !" : undefined}
+      onSubmit={createFamily}
+    />
+  );
+}

geneit_app/src/dialogs/TextInputDialog.tsx

@@ -0,0 +1,147 @@
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  TextField,
+} from "@mui/material";
+
+export function TextInputDialog(p: {
+  /**
+   * Minimum amount of text that must be entered before the text can be validated
+   */
+  minLen?: number;
+
+  /**
+   * Max len of text than can be entered
+   */
+  maxLen?: number;
+
+  /**
+   * The title of the dialog
+   */
+  title?: string;
+
+  /**
+   * The message shown above the input dialog
+   */
+  text: string;
+
+  /**
+   * The label of the text field
+   */
+  label: string;
+
+  /**
+   * The current value in the dialog
+   */
+  value: string;
+
+  /**
+   * The type of value
+   */
+  type?: React.HTMLInputTypeAttribute;
+
+  /**
+   * Function called when the value entered by the user is changed
+   */
+  onValueChange: (v: string) => void;
+
+  /**
+   * Specify whether the value is being checked
+   */
+  isChecking?: boolean;
+
+  /**
+   * The message shown while the value is checked
+   */
+  checkingMessage?: string;
+
+  /**
+   * The text of the submit button
+   */
+  submitButton?: string;
+
+  /**
+   * Callback function called when the user click on the submit button
+   */
+  onSubmit: (value: string) => void;
+
+  /**
+   * Callback function called when the user click on the submit button
+   */
+  onCancel: () => void;
+
+  /**
+   * Specify whether the dialog should be open or not
+   */
+  open: boolean;
+
+  /**
+   * Callback function called when the user click outside the dialog
+   */
+  onClose: () => void;
+
+  /**
+   * Error message to show on the input text
+   */
+  error?: string;
+
+  /**
+   * If set to true (the default), when an error is set, the submit button will be disabled
+   */
+  errorIsBlocking?: boolean;
+}): React.ReactElement {
+  const canSubmit =
+    p.value.length >= (p.minLen ?? 0) &&
+    (p.errorIsBlocking === false || p.error === undefined);
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!canSubmit) return;
+
+    p.onSubmit(p.value);
+  };
+
+  return (
+    <Dialog open={p.open} onClose={p.onClose}>
+      <Box component="form" noValidate onSubmit={handleSubmit}>
+        {p.title && <DialogTitle>{p.title}</DialogTitle>}
+        <DialogContent>
+          <DialogContentText>{p.text}</DialogContentText>
+          <TextField
+            disabled={p.isChecking}
+            autoFocus
+            margin="dense"
+            label={p.label}
+            type={p.type ?? "text"}
+            fullWidth
+            variant="standard"
+            value={p.value}
+            onChange={(e) => p.onValueChange(e.target.value)}
+            inputProps={{ maxLength: p.maxLen ?? 255 }}
+            error={p.error !== undefined}
+            helperText={p.error}
+          />
+
+          {p.isChecking && (
+            <span>
+              <CircularProgress size={15} />{" "}
+              {p.checkingMessage ?? "Contrôle en cours..."}
+            </span>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={p.onClose}>Annuler</Button>
+          <Button disabled={!canSubmit} type="submit">
+            {p.submitButton ?? "Valider"}
+          </Button>
+        </DialogActions>
+      </Box>
+    </Dialog>
+  );
+}