npatterson
/
servicetrade-toolbox-wmv
1
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity
Browse Source

chore: added overlay to doc removal

document-upload-removal-layout-update
nic 10 months ago
parent
35f2f2f853
commit
8bdcc822e2
3 changed files with 52 additions and 41 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 78
      templates/partials/document_remove.html
  2. 7
      templates/partials/document_remove_form.html
  3. 8
      templates/partials/job_attachments.html

78
templates/partials/document_remove.html
View File

@ -2,6 +2,15 @@
<h2>Document Removal</h2> <h2>Document Removal</h2>
<div class="upload-container"> <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 --> <!-- Step 1: CSV Upload -->
<div class="content"> <div class="content">
<h3 class="submenu-header">Step 1: Upload CSV file with Job IDs</h3> <h3 class="submenu-header">Step 1: Upload CSV file with Job IDs</h3>
@ -22,8 +31,8 @@
</div> </div>
<div id="bulk-removal-tab" style="display: none;"> <div id="bulk-removal-tab" style="display: none;">
<form id="bulk-removal-form" hx-post="/documents/remove/bulk" hx-target="#removal-results" <form id="bulk-remove-form" hx-post="/documents/remove/bulk" hx-target="#removal-results"
hx-indicator="#bulk-loading-indicator"> hx-indicator=".upload-overlay">
<div class="form-group"> <div class="form-group">
<label>Document Types to Remove:</label> <label>Document Types to Remove:</label>
<div class="checkbox-group"> <div class="checkbox-group">
@ -65,41 +74,35 @@
<option value="365">365 Days</option> <option value="365">365 Days</option>
</select> </select>
</div> </div>
</div>
<input type="hidden" id="bulk-job-ids" name="jobIDs">
<div class="form-actions"> <input type="hidden" id="bulk-job-ids" name="jobIDs">
<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;"> <div class="form-actions">
<span>Processing Document Removal...</span> <button type="submit" class="warning-button" id="bulk-remove-btn" disabled>
<div class="loading-indicator"></div> Remove All Matching Documents
</div> </button>
</div>
</form>
</div> </div>
</form>
</div>
<!-- Job IDs container moved inside the form for better structure --> <!-- Job IDs container moved inside the form for better structure -->
<div id="job-ids-removal-container" style="display: none;"> <div id="job-ids-removal-container" style="display: none;">
<!-- Hidden input placeholder for job IDs --> <!-- Hidden input placeholder for job IDs -->
</div> </div>
<div id="job-results" class="job-selection"> <div id="job-results" class="job-selection">
<!-- Jobs and document selection will appear here --> <!-- Jobs and document selection will appear here -->
</div>
</div> </div>
</div>
<!-- Step 3: Results --> <!-- Step 3: Results -->
<div class="content"> <div class="content">
<h3 class="submenu-header">Step 3: Removal Results</h3> <h3 class="submenu-header">Step 3: Removal Results</h3>
<div id="removal-results" class="upload-results"> <div id="removal-results" class="upload-results">
<!-- Results will appear here after removing documents --> <!-- Results will appear here after removing documents -->
</div>
</div> </div>
</div> </div>
</div>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { 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> </script>
{{end}} {{end}}

7
templates/partials/document_remove_form.html
View File

@ -1,17 +1,12 @@
{{define "document_remove_form"}} {{define "document_remove_form"}}
<div id="document-selection-container"> <div id="document-selection-container">
<form id="job-selection-form" hx-post="/documents/remove/job-selection" hx-target="#job-results" <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 --> <!-- 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"> <button type="submit" id="load-jobs-btn" class="btn-primary">
Load Jobs Load Jobs
</button> </button>
<div id="job-loading-indicator" class="htmx-indicator" style="display: none;">
<span>Loading jobs...</span>
<div class="loading-indicator"></div>
</div>
</form> </form>
<div id="document-rows-container" class="document-rows"> <div id="document-rows-container" class="document-rows">

8
templates/partials/job_attachments.html
View File

@ -6,8 +6,7 @@
<div class="error-message">Error: {{.Error}}</div> <div class="error-message">Error: {{.Error}}</div>
{{else}} {{else}}
{{if len .Attachments}} {{if len .Attachments}}
<form hx-post="/documents/remove/job/{{.JobID}}" hx-target="#removal-results" <form hx-post="/documents/remove/job/{{.JobID}}" hx-target="#removal-results" hx-indicator=".upload-overlay">
hx-indicator="#delete-loading-indicator-{{.JobID}}">
<div class="attachments-list"> <div class="attachments-list">
{{range .Attachments}} {{range .Attachments}}
<div class="attachment-item"> <div class="attachment-item">
@ -24,11 +23,6 @@
</div> </div>
<button type="submit" class="btn btn-danger">Delete Selected Documents</button> <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> </form>
{{else}} {{else}}
<div class="info-message">No attachments found for this job.</div> <div class="info-message">No attachments found for this job.</div>

Write Preview
Loading…
Cancel
Save