Can export data from UI

geneit_app/src/routes/family/FamilySettingsRoute.tsx

@@ -16,6 +16,11 @@ import { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
 import { useConfirm } from "../../hooks/context_providers/ConfirmDialogProvider";
 import { useFamily } from "../../widgets/BaseFamilyRoute";
 import { formatDate } from "../../widgets/TimeWidget";
+import { FamilyCard } from "../../widgets/FamilyCard";
+import DownloadIcon from "@mui/icons-material/Download";
+import { useLoadingMessage } from "../../hooks/context_providers/LoadingMessageProvider";
+import { DataApi } from "../../api/DataApi";
+import { downloadBlob } from "../../utils/blob_utils";
 
 export function FamilySettingsRoute(): React.ReactElement {
   const alert = useAlert();
@@ -24,32 +29,6 @@ export function FamilySettingsRoute(): React.ReactElement {
 
   const family = useFamily();
 
-  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 !");
-    }
-  };
-
   const deleteFamily = async () => {
     try {
       if (
@@ -72,60 +51,8 @@ export function FamilySettingsRoute(): React.ReactElement {
 
   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>
-
+      <FamilySettingsCard />
+      <FamilyExportCard />
       <div style={{ textAlign: "center", marginTop: "50px" }}>
         <Button
           size="small"
@@ -139,3 +66,145 @@ export function FamilySettingsRoute(): React.ReactElement {
     </>
   );
 }
+
+function FamilySettingsCard(): React.ReactElement {
+  const alert = useAlert();
+
+  const family = useFamily();
+
+  const [newName, setNewName] = React.useState(family.family.name);
+
+  const canEdit = family.family.is_admin;
+
+  const [error, setError] = React.useState<string>();
+  const [success, setSuccess] = React.useState<string>();
+
+  const updateFamily = async () => {
+    try {
+      setError(undefined);
+      setSuccess(undefined);
+
+      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 (
+    <FamilyCard error={error} success={success}>
+      <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>
+    </FamilyCard>
+  );
+}
+
+function FamilyExportCard(): React.ReactElement {
+  const loading = useLoadingMessage();
+  const alert = useAlert();
+
+  const family = useFamily();
+
+  const [error, setError] = React.useState<string>();
+  const [success, setSuccess] = React.useState<string>();
+
+  const exportData = async () => {
+    loading.show("Export des données");
+    try {
+      setError(undefined);
+      setSuccess(undefined);
+
+      const blob = await DataApi.ExportData(family.familyId);
+      downloadBlob(blob, `Export-${new Date().getTime()}.zip`);
+    } catch (e) {
+      console.error(e);
+      setError("Echec de l'export des données de la famille !");
+    }
+    loading.hide();
+  };
+
+  return (
+    <FamilyCard error={error} success={success}>
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Export / import des données de la famille
+        </Typography>
+        <p>
+          Vous pouvez, à des fins de sauvegardes ou de transfert, exporter et
+          importer l'ensemble des données des membres et des couples de cette
+          famille, sous format ZIP.
+        </p>
+
+        <Alert severity="warning">
+          Attention ! La restauration des données de la famille provoque
+          préalablement l'effacement de toutes les données enregistrées dans la
+          famille ! Par ailleurs, la restauration n'est pas réversible !
+        </Alert>
+
+        <p>&nbsp;</p>
+
+        <Button
+          startIcon={<DownloadIcon />}
+          variant="outlined"
+          fullWidth
+          onClick={exportData}
+        >
+          Exporter les données de la famille
+        </Button>
+      </CardContent>
+    </FamilyCard>
+  );
+}