Can update family settings

2023-07-12 17:44:39 +02:00
parent 6cd9b29178
commit 4be127f58e
4 changed files with 130 additions and 0 deletions
--- a/geneit_app/src/routes/family/FamilySettingsRoute.tsx
+++ b/geneit_app/src/routes/family/FamilySettingsRoute.tsx
@ -0,0 +1,105 @@
+import {
+  Alert,
+  Box,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  TextField,
+  Typography,
+} from "@mui/material";
+import React from "react";
+import { FamilyApi } from "../../api/FamilyApi";
+import { ServerApi } from "../../api/ServerApi";
+import { useAlert } from "../../context_providers/AlertDialogProvider";
+import { useFamily } from "../../widgets/BaseFamilyRoute";
+import { formatDate } from "../../widgets/TimeWidget";
+
+export function FamilySettingsRoute(): React.ReactElement {
+  const family = useFamily();
+  const alert = useAlert();
+
+  const [newName, setNewName] = React.useState(family.family.name);
+
+  const canEdit = family.family.is_admin;
+
+  const [error, setError] = React.useState<string | null>(null);
+  const [success, setSuccess] = React.useState<string | null>(null);
+
+  const updateFamily = async () => {
+    try {
+      setError(null);
+      setSuccess(null);
+
+      await FamilyApi.UpdateFamily({
+        id: family.family.family_id,
+        name: newName,
+      });
+
+      family.reloadFamilyInfo();
+
+      alert("Les paramètres de la famille ont été mis à jour avec succès !");
+    } catch (e) {
+      console.error(e);
+      setError("Echec de la mise à jour des paramètres de la famille !");
+    }
+  };
+
+  return (
+    <>
+      <Card style={{ margin: "10px auto", maxWidth: "450px" }}>
+        {error && <Alert severity="error">{error}</Alert>}
+        {success && <Alert severity="success">{success}</Alert>}
+
+        <CardContent>
+          <Typography gutterBottom variant="h5" component="div">
+            Paramètres de la famille
+          </Typography>
+
+          <Box
+            component="form"
+            sx={{
+              "& .MuiTextField-root": { my: 1 },
+            }}
+            noValidate
+            autoComplete="off"
+          >
+            <TextField
+              disabled
+              fullWidth
+              label="Identifiant"
+              value={family.family.family_id}
+            />
+
+            <TextField
+              disabled
+              fullWidth
+              label="Création de la famille"
+              value={formatDate(family.family.time_create)}
+            />
+
+            <TextField
+              fullWidth
+              label="Nom de la famille"
+              value={newName}
+              disabled={!canEdit}
+              onChange={(e) => setNewName(e.target.value)}
+              inputProps={{
+                maxLength: ServerApi.Config.constraints.family_name_len.max,
+              }}
+            />
+          </Box>
+        </CardContent>
+        <CardActions>
+          <Button
+            onClick={updateFamily}
+            disabled={!canEdit}
+            style={{ marginLeft: "auto" }}
+          >
+            Enregistrer
+          </Button>
+        </CardActions>
+      </Card>
+    </>
+  );
+}