chore: added overlay to doc removal

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,7 +74,6 @@
                         <option value="365">365 Days</option>
                     </select>
                 </div>
-        </div>
 
                 <input type="hidden" id="bulk-job-ids" name="jobIDs">
 
@@ -73,11 +81,6 @@
                     <button type="submit" class="warning-button" id="bulk-remove-btn" disabled>
                         Remove All Matching Documents
                     </button>
-
-            <div id="bulk-loading-indicator" class="htmx-indicator" style="display: none;">
-                <span>Processing Document Removal...</span>
-                <div class="loading-indicator"></div>
-            </div>
                 </div>
             </form>
         </div>
@@ -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}}

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">

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>