feat: implement export functionality for projects and scenarios with CSV and Excel support

2025-11-10 18:32:24 +01:00
parent 4b33a5dba3
commit 43b1e53837
15 changed files with 906 additions and 133 deletions
--- a/static/js/exports.js
+++ b/static/js/exports.js
@@ -0,0 +1,97 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const modalContainer = document.createElement("div");
+  modalContainer.id = "export-modal-container";
+  document.body.appendChild(modalContainer);
+
+  async function loadModal(dataset) {
+    const response = await fetch(`/exports/modal/${dataset}`);
+    if (!response.ok) {
+      throw new Error(`Failed to load export modal (${response.status})`);
+    }
+    const html = await response.text();
+    modalContainer.innerHTML = html;
+    const modal = modalContainer.querySelector(".modal");
+    if (!modal) return;
+    modal.classList.add("is-active");
+
+    const closeButtons = modal.querySelectorAll("[data-dismiss='modal']");
+    closeButtons.forEach((btn) =>
+      btn.addEventListener("click", () => closeModal(modal))
+    );
+
+    const form = modal.querySelector("[data-export-form]");
+    if (form) {
+      form.addEventListener("submit", handleSubmit);
+    }
+  }
+
+  function closeModal(modal) {
+    modal.classList.remove("is-active");
+    setTimeout(() => {
+      modalContainer.innerHTML = "";
+    }, 200);
+  }
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const submitUrl = form.action;
+    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,
+      }),
+    });
+
+    if (!response.ok) {
+      alert("Export failed. Please try again.");
+      return;
+    }
+
+    const blob = await response.blob();
+    const disposition = response.headers.get("Content-Disposition");
+    let filename = "export";
+    if (disposition) {
+      const match = disposition.match(/filename=([^;]+)/i);
+      if (match) {
+        filename = match[1].replace(/"/g, "");
+      }
+    }
+
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    window.URL.revokeObjectURL(url);
+
+    const modal = modalContainer.querySelector(".modal");
+    if (modal) {
+      closeModal(modal);
+    }
+  }
+
+  document.querySelectorAll("[data-export-trigger]").forEach((button) => {
+    button.addEventListener("click", async (event) => {
+      event.preventDefault();
+      const dataset = button.getAttribute("data-export-target");
+      if (!dataset) return;
+      try {
+        await loadModal(dataset);
+      } catch (error) {
+        console.error(error);
+        alert("Unable to open export dialog.");
+      }
+    });
+  });
+});