Can import family data from UI

geneit_app/src/routes/family/FamilySettingsRoute.tsx

@@ -1,8 +1,9 @@
+import DownloadIcon from "@mui/icons-material/Download";
+import UploadIcon from "@mui/icons-material/Upload";
 import {
   Alert,
   Box,
   Button,
-  Card,
   CardActions,
   CardContent,
   TextField,
@@ -10,17 +11,16 @@ import {
 } from "@mui/material";
 import React from "react";
 import { useNavigate } from "react-router-dom";
+import { DataApi } from "../../api/DataApi";
 import { FamilyApi } from "../../api/FamilyApi";
 import { ServerApi } from "../../api/ServerApi";
 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";
+import { downloadBlob, selectFileToUpload } from "../../utils/files_utils";
+import { useFamily } from "../../widgets/BaseFamilyRoute";
+import { FamilyCard } from "../../widgets/FamilyCard";
+import { formatDate } from "../../widgets/TimeWidget";
 
 export function FamilySettingsRoute(): React.ReactElement {
   const alert = useAlert();
@@ -154,6 +154,7 @@ function FamilySettingsCard(): React.ReactElement {
 
 function FamilyExportCard(): React.ReactElement {
   const loading = useLoadingMessage();
+  const confirm = useConfirm();
   const alert = useAlert();
 
   const family = useFamily();
@@ -169,6 +170,8 @@ function FamilyExportCard(): React.ReactElement {
 
       const blob = await DataApi.ExportData(family.familyId);
       downloadBlob(blob, `Export-${new Date().getTime()}.zip`);
+
+      setSuccess("Export des données effectué avec succès !");
     } catch (e) {
       console.error(e);
       setError("Echec de l'export des données de la famille !");
@@ -176,6 +179,35 @@ function FamilyExportCard(): React.ReactElement {
     loading.hide();
   };
 
+  const importData = async () => {
+    try {
+      if (
+        !(await confirm(
+          "Attention ! Cette opération a pour effet d'effacer toutes les données existantes en base ! Voulez-vous vraiment poursuivre l'opération ?"
+        ))
+      )
+        return;
+
+      const file = await selectFileToUpload({
+        allowedTypes: ["application/zip"],
+      });
+      if (file === null) return;
+
+      loading.show("Restauration des données de la famille en cours...");
+
+      await DataApi.ImportData(family.familyId, file);
+
+      family.reloadFamilyInfo();
+
+      alert("Import des données de la famille effectué avec succès !");
+    } catch (e) {
+      console.error(e);
+      setError(`Echec de l'import des données de la famille ! (${e})`);
+    }
+
+    loading.hide();
+  };
+
   return (
     <FamilyCard error={error} success={success}>
       <CardContent>
@@ -201,9 +233,23 @@ function FamilyExportCard(): React.ReactElement {
           variant="outlined"
           fullWidth
           onClick={exportData}
+          size={"large"}
+          style={{ marginBottom: "10px" }}
         >
           Exporter les données de la famille
         </Button>
+
+        <Button
+          startIcon={<UploadIcon />}
+          variant="outlined"
+          color="warning"
+          fullWidth
+          onClick={importData}
+          disabled={!family.family.is_admin}
+          size={"large"}
+        >
+          Importer les données de la famille
+        </Button>
       </CardContent>
     </FamilyCard>
   );