chore: hide/show steps and added start over for doc removal

templates/partials/document_remove.html

@@ -12,13 +12,13 @@
     </div>
 
     <!-- Step 1: CSV Upload -->
-    <div class="content">
+    <div id="step1-removal" class="content">
         <h3 class="submenu-header">Step 1: Upload CSV file with Job IDs</h3>
         {{template "document_remove_csv" .}}
     </div>
 
     <!-- Step 2: Document Selection -->
-    <div class="content">
+    <div id="step2-removal" class="content" style="display: none;">
         <h3 class="submenu-header">Step 2: Select Documents to Remove</h3>
 
         <div class="tab-buttons">
@@ -96,12 +96,18 @@
     </div>
 
     <!-- Step 3: Results -->
-    <div class="content">
+    <div id="step3-removal" class="content" style="display: none;">
         <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>
+
+    <!-- Restart Button (initially hidden) -->
+    <div id="restart-section-removal" class="content" style="display: none;">
+        <h3 class="submenu-header">Removal Complete</h3>
+        <button type="button" class="btn-primary" onclick="restartRemoval()">Start New Removal</button>
+    </div>
 </div>
 
 <script>
@@ -144,6 +150,9 @@
                         bulkRemoveBtn.disabled = !jobIds;
                     }
                 }
+
+                // Show step 2 when job IDs are loaded
+                document.getElementById('step2-removal').style.display = 'block';
             }
         });
 
@@ -158,6 +167,14 @@
             form.addEventListener('htmx:afterRequest', function (evt) {
                 if (evt.detail.pathInfo.requestPath.includes('/documents/remove')) {
                     document.querySelector('.upload-overlay').style.display = 'none';
+
+                    // If it's a removal action and successful, show step 3 and restart section
+                    if (evt.detail.successful &&
+                        (evt.detail.pathInfo.requestPath.includes('/documents/remove/job/') ||
+                            evt.detail.pathInfo.requestPath.includes('/documents/remove/bulk'))) {
+                        document.getElementById('step3-removal').style.display = 'block';
+                        document.getElementById('restart-section-removal').style.display = 'block';
+                    }
                 }
             });
 
@@ -166,5 +183,50 @@
             });
         });
     });
+
+    // Function to restart the removal process
+    function restartRemoval() {
+        // Hide all sections except step 1
+        document.getElementById('step2-removal').style.display = 'none';
+        document.getElementById('step3-removal').style.display = 'none';
+        document.getElementById('restart-section-removal').style.display = 'none';
+
+        // Clear results
+        document.getElementById('removal-results').innerHTML = '';
+
+        // Reset CSV preview if it exists
+        const csvPreview = document.getElementById('csv-preview-removal');
+        if (csvPreview) {
+            csvPreview.style.display = 'none';
+        }
+
+        const csvPreviewContent = document.getElementById('csv-preview-content-removal');
+        if (csvPreviewContent) {
+            csvPreviewContent.innerHTML = '<p>No jobs loaded yet</p>';
+        }
+
+        // Reset job IDs container
+        document.getElementById('job-ids-removal-container').innerHTML = '';
+
+        // Reset tab selection
+        const individualTabBtn = document.getElementById('individual-tab-btn');
+        const bulkTabBtn = document.getElementById('bulk-tab-btn');
+        const individualTab = document.getElementById('individual-selection-tab');
+        const bulkTab = document.getElementById('bulk-removal-tab');
+
+        individualTabBtn.classList.add('active');
+        bulkTabBtn.classList.remove('active');
+        individualTab.style.display = 'block';
+        bulkTab.style.display = 'none';
+
+        // Show step 1
+        document.getElementById('step1-removal').style.display = 'block';
+
+        // Reset any file inputs
+        const fileInput = document.getElementById('csv-file-removal');
+        if (fileInput) {
+            fileInput.value = '';
+        }
+    }
 </script>
 {{end}}

templates/partials/document_remove_csv.html

@@ -5,7 +5,8 @@
 
     <button type="button" class="btn-primary" hx-post="/documents/remove/process-csv"
         hx-target="#job-ids-removal-container" hx-encoding="multipart/form-data" hx-include="#csv-file-removal"
-        hx-indicator="#csv-loading-indicator-removal">
+        hx-indicator="#csv-loading-indicator-removal"
+        hx-on::after-request="if(event.detail.successful) { document.getElementById('step2-removal').style.display = 'block'; }">
         Process CSV
     </button>