feat: enhance export and import workflows with improved error handling and notifications

static/js/exports.js

@@ -39,20 +39,67 @@ document.addEventListener("DOMContentLoaded", () => {
     const formData = new FormData(form);
     const format = formData.get("format") || "csv";
 
-    const response = await fetch(submitUrl, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        format,
-        include_metadata: formData.get("include_metadata") === "true",
-        filters: null,
-      }),
-    });
+    const submitBtn = form.querySelector("button[type='submit']");
+    if (submitBtn) {
+      submitBtn.disabled = true;
+      submitBtn.classList.add("loading");
+    }
+
+    let response;
+    try {
+      response = await fetch(submitUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          format,
+          include_metadata: formData.get("include_metadata") === "true",
+          filters: null,
+        }),
+      });
+    } catch (error) {
+      console.error(error);
+      NotificationCenter.show({
+        message: "Network error during export.",
+        level: "error",
+      });
+      const errorContainer = form.querySelector("[data-export-error]");
+      if (errorContainer) {
+        errorContainer.textContent = "Network error during export.";
+        errorContainer.classList.remove("hidden");
+      }
+      submitBtn?.classList.remove("loading");
+      submitBtn?.removeAttribute("disabled");
+      return;
+    }
 
     if (!response.ok) {
-      alert("Export failed. Please try again.");
+      let detail = "Export failed. Please try again.";
+      try {
+        const payload = await response.json();
+        if (payload?.detail) {
+          detail = Array.isArray(payload.detail)
+            ? payload.detail.map((item) => item.msg || item).join("; ")
+            : payload.detail;
+        }
+      } catch (error) {
+        // ignore JSON parse issues
+      }
+
+      NotificationCenter.show({
+        message: detail,
+        level: "error",
+      });
+
+      const errorContainer = form.querySelector("[data-export-error]");
+      if (errorContainer) {
+        errorContainer.textContent = detail;
+        errorContainer.classList.remove("hidden");
+      }
+
+      submitBtn?.classList.remove("loading");
+      submitBtn?.removeAttribute("disabled");
       return;
     }
 
@@ -79,6 +126,14 @@ document.addEventListener("DOMContentLoaded", () => {
     if (modal) {
       closeModal(modal);
     }
+
+    NotificationCenter.show({
+      message: `Export ready: ${filename}`,
+      level: "success",
+    });
+
+    submitBtn?.classList.remove("loading");
+    submitBtn?.removeAttribute("disabled");
   }
 
   document.querySelectorAll("[data-export-trigger]").forEach((button) => {
@@ -90,7 +145,10 @@ document.addEventListener("DOMContentLoaded", () => {
         await loadModal(dataset);
       } catch (error) {
         console.error(error);
-        alert("Unable to open export dialog.");
+        NotificationCenter.show({
+          message: "Unable to open export dialog.",
+          level: "error",
+        });
       }
     });
   });