From 7e3ed6cf94409118d02dd38b1f7ad301f967a2c5 Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Fri, 15 Aug 2025 22:39:18 -0300
Subject: [PATCH] feat(export): improve export flow by using HTMX

---
 .../export_app/fragments/export.html          |  2 +-
 app/templates/includes/sidebar.html           |  2 +-
 frontend/src/application/_htmx.js             | 64 +++++++++++++++++++
 3 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/app/templates/export_app/fragments/export.html b/app/templates/export_app/fragments/export.html
index 241dd2f..8a41a9f 100644
--- a/app/templates/export_app/fragments/export.html
+++ b/app/templates/export_app/fragments/export.html
@@ -6,7 +6,7 @@
 
 {% block body %}
   <div class="container p-3">
-    <form method="post" action="{% url 'export_form' %}" id="export-form" class="show-loading px-1" _="on submit trigger hide_offcanvas" target="_blank">
+    <form hx-post="{% url 'export_form' %}" hx-ext="htmx-download" hx-swap="none" id="export-form" class="show-loading px-1" target="_blank">
       {% crispy form %}
     </form>
   </div>
diff --git a/app/templates/includes/sidebar.html b/app/templates/includes/sidebar.html
index b71fdc2..29c57ad 100644
--- a/app/templates/includes/sidebar.html
+++ b/app/templates/includes/sidebar.html
@@ -261,7 +261,7 @@
         </div>
       {% endif %}
 
-      <div class="btn-group w-100" role="group">
+      <div class="btn-group w-100 sidebar-item" role="group">
         <button type="button" class="btn btn-secondary btn-sm" data-bs-toggle="tooltip"
                 data-bs-title="{% trans "Calculator" %}"
                 _="on click trigger show on #calculator">
diff --git a/frontend/src/application/_htmx.js b/frontend/src/application/_htmx.js
index 2cd43d0..63ad684 100644
--- a/frontend/src/application/_htmx.js
+++ b/frontend/src/application/_htmx.js
@@ -1,2 +1,66 @@
 import htmx from "htmx.org";
+
 window.htmx = htmx;
+
+htmx.defineExtension('htmx-download', {
+    onEvent: function (name, evt) {
+
+        if (name === 'htmx:beforeRequest') {
+            // Set the responseType to 'arraybuffer' to handle binary data
+            evt.detail.xhr.responseType = 'arraybuffer';
+        }
+
+        if (name === 'htmx:beforeSwap') {
+            const xhr = evt.detail.xhr;
+
+            if (xhr.status === 200) {
+                // Parse headers
+                const headers = {};
+                const headerStr = xhr.getAllResponseHeaders();
+                const headerArr = headerStr.trim().split(/[\r\n]+/);
+                headerArr.forEach((line) => {
+                    const parts = line.split(": ");
+                    const header = parts.shift().toLowerCase();
+                    const value = parts.join(": ");
+                    headers[header] = value;
+                });
+
+                // Extract filename
+                let filename = 'downloaded_file.xlsx';
+                if (headers['content-disposition']) {
+                    const filenameMatch = headers['content-disposition'].match(/filename\*?=(?:UTF-8'')?"?([^;\n"]+)/i);
+                    if (filenameMatch && filenameMatch[1]) {
+                        filename = decodeURIComponent(filenameMatch[1].replace(/['"]/g, ''));
+                    }
+                }
+
+                // Determine MIME type
+                const mimetype = headers['content-type'] || 'application/octet-stream';
+
+                // Create Blob
+                const blob = new Blob([xhr.response], {type: mimetype});
+                const url = URL.createObjectURL(blob);
+
+                // Trigger download
+                const link = document.createElement("a");
+                link.style.display = "none";
+                link.href = url;
+                link.download = filename;
+                document.body.appendChild(link);
+                link.click();
+
+                // Cleanup
+                setTimeout(() => {
+                    URL.revokeObjectURL(url);
+                    link.remove();
+                }, 100);
+
+            } else {
+                console.warn(`[htmx-download] Unexpected response status: ${xhr.status}`);
+            }
+
+            // Prevent htmx from swapping content
+            evt.detail.shouldSwap = false;
+        }
+    },
+});