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
Split 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>
<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}}

7
templates/partials/document_remove_form.html
View File

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

8
templates/partials/job_attachments.html
View File

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

Write Preview
Loading…
Cancel
Save