From 8bdcc822e2be7c8611af097d5f0f7788de58fac7 Mon Sep 17 00:00:00 2001
From: nic <npatterson@marmicfire.com>
Date: Thu, 10 Apr 2025 17:37:51 -0400
Subject: [PATCH] chore: added overlay to doc removal

---
 templates/partials/document_remove.html      | 78 +++++++++++++-------
 templates/partials/document_remove_form.html |  7 +-
 templates/partials/job_attachments.html      |  8 +-
 3 files changed, 52 insertions(+), 41 deletions(-)

diff --git a/templates/partials/document_remove.html b/templates/partials/document_remove.html
index ebf13cd..52b3cb3 100644
--- a/templates/partials/document_remove.html
+++ b/templates/partials/document_remove.html
@@ -2,6 +2,15 @@
 <h2>Document Removal</h2>
 
 <div class="upload-container">
+    <!-- Loading Overlay -->
+    <div class="upload-overlay htmx-indicator">
+        <div class="upload-overlay-content">
+            <div class="overlay-spinner"></div>
+            <h3>Removing Documents</h3>
+            <p>Please wait while your documents are being removed...</p>
+        </div>
+    </div>
+
     <!-- Step 1: CSV Upload -->
     <div class="content">
         <h3 class="submenu-header">Step 1: Upload CSV file with Job IDs</h3>
@@ -22,8 +31,8 @@
         </div>
 
         <div id="bulk-removal-tab" style="display: none;">
-            <form id="bulk-removal-form" hx-post="/documents/remove/bulk" hx-target="#removal-results"
-                hx-indicator="#bulk-loading-indicator">
+            <form id="bulk-remove-form" hx-post="/documents/remove/bulk" hx-target="#removal-results"
+                hx-indicator=".upload-overlay">
                 <div class="form-group">
                     <label>Document Types to Remove:</label>
                     <div class="checkbox-group">
@@ -65,41 +74,35 @@
                         <option value="365">365 Days</option>
                     </select>
                 </div>
-        </div>
-
-        <input type="hidden" id="bulk-job-ids" name="jobIDs">
 
-        <div class="form-actions">
-            <button type="submit" class="warning-button" id="bulk-remove-btn" disabled>
-                Remove All Matching Documents
-            </button>
+                <input type="hidden" id="bulk-job-ids" name="jobIDs">
 
-            <div id="bulk-loading-indicator" class="htmx-indicator" style="display: none;">
-                <span>Processing Document Removal...</span>
-                <div class="loading-indicator"></div>
-            </div>
+                <div class="form-actions">
+                    <button type="submit" class="warning-button" id="bulk-remove-btn" disabled>
+                        Remove All Matching Documents
+                    </button>
+                </div>
+            </form>
         </div>
-        </form>
-    </div>
 
-    <!-- Job IDs container moved inside the form for better structure -->
-    <div id="job-ids-removal-container" style="display: none;">
-        <!-- Hidden input placeholder for job IDs -->
-    </div>
+        <!-- Job IDs container moved inside the form for better structure -->
+        <div id="job-ids-removal-container" style="display: none;">
+            <!-- Hidden input placeholder for job IDs -->
+        </div>
 
-    <div id="job-results" class="job-selection">
-        <!-- Jobs and document selection will appear here -->
+        <div id="job-results" class="job-selection">
+            <!-- Jobs and document selection will appear here -->
+        </div>
     </div>
-</div>
 
-<!-- Step 3: Results -->
-<div class="content">
-    <h3 class="submenu-header">Step 3: Removal Results</h3>
-    <div id="removal-results" class="upload-results">
-        <!-- Results will appear here after removing documents -->
+    <!-- Step 3: Results -->
+    <div class="content">
+        <h3 class="submenu-header">Step 3: Removal Results</h3>
+        <div id="removal-results" class="upload-results">
+            <!-- Results will appear here after removing documents -->
+        </div>
     </div>
 </div>
-</div>
 
 <script>
     document.addEventListener('DOMContentLoaded', function () {
@@ -143,6 +146,25 @@
                 }
             }
         });
+
+        // Add event listeners for the removal overlay
+        document.querySelectorAll('form').forEach(form => {
+            form.addEventListener('htmx:beforeRequest', function (evt) {
+                if (evt.detail.pathInfo.requestPath.includes('/documents/remove')) {
+                    document.querySelector('.upload-overlay').style.display = 'flex';
+                }
+            });
+
+            form.addEventListener('htmx:afterRequest', function (evt) {
+                if (evt.detail.pathInfo.requestPath.includes('/documents/remove')) {
+                    document.querySelector('.upload-overlay').style.display = 'none';
+                }
+            });
+
+            form.addEventListener('htmx:error', function (evt) {
+                document.querySelector('.upload-overlay').style.display = 'none';
+            });
+        });
     });
 </script>
 {{end}}
\ No newline at end of file
diff --git a/templates/partials/document_remove_form.html b/templates/partials/document_remove_form.html
index 41c8762..8b011ff 100644
--- a/templates/partials/document_remove_form.html
+++ b/templates/partials/document_remove_form.html
@@ -1,17 +1,12 @@
 {{define "document_remove_form"}}
 <div id="document-selection-container">
     <form id="job-selection-form" hx-post="/documents/remove/job-selection" hx-target="#job-results"
-        hx-indicator="#job-loading-indicator" hx-include="#job-ids-removal-container">
+        hx-indicator=".upload-overlay" hx-include="#job-ids-removal-container">
         <!-- The hidden input with jobIDs will be inserted into job-ids-removal-container by the CSV process -->
 
         <button type="submit" id="load-jobs-btn" class="btn-primary">
             Load Jobs
         </button>
-
-        <div id="job-loading-indicator" class="htmx-indicator" style="display: none;">
-            <span>Loading jobs...</span>
-            <div class="loading-indicator"></div>
-        </div>
     </form>
 
     <div id="document-rows-container" class="document-rows">
diff --git a/templates/partials/job_attachments.html b/templates/partials/job_attachments.html
index 33e775a..2bc41b1 100644
--- a/templates/partials/job_attachments.html
+++ b/templates/partials/job_attachments.html
@@ -6,8 +6,7 @@
     <div class="error-message">Error: {{.Error}}</div>
     {{else}}
     {{if len .Attachments}}
-    <form hx-post="/documents/remove/job/{{.JobID}}" hx-target="#removal-results"
-        hx-indicator="#delete-loading-indicator-{{.JobID}}">
+    <form hx-post="/documents/remove/job/{{.JobID}}" hx-target="#removal-results" hx-indicator=".upload-overlay">
         <div class="attachments-list">
             {{range .Attachments}}
             <div class="attachment-item">
@@ -24,11 +23,6 @@
         </div>
 
         <button type="submit" class="btn btn-danger">Delete Selected Documents</button>
-
-        <div id="delete-loading-indicator-{{.JobID}}" class="htmx-indicator">
-            <div class="spinner"></div>
-            <span>Deleting documents...</span>
-        </div>
     </form>
     {{else}}
     <div class="info-message">No attachments found for this job.</div>