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

fix: updated styles/workflow/small ui tweaks

document-upload-removal-layout-update
nic 9 months ago
parent
cfc1d6af61
commit
d240270144
6 changed files with 52 additions and 105 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. 16
      internal/handlers/web/document_remove.go
  2. 28
      internal/handlers/web/documents.go
  3. 41
      static/css/styles.css
  4. 11
      templates/partials/document_remove.html
  5. 23
      templates/partials/document_remove_form.html
  6. 38
      templates/partials/document_upload_form.html

16
internal/handlers/web/document_remove.go
View File

@ -137,25 +137,19 @@ func ProcessRemoveCSVHandler(w http.ResponseWriter, r *http.Request) {
// Create a hidden input with the job IDs
jobsValue := strings.Join(jobIDs, ",")
jobSampleDisplay := getJobSampleDisplay(jobIDs)
// Generate HTML for the main response (hidden input for job-ids-removal-container)
var responseHTML bytes.Buffer
responseHTML.WriteString(fmt.Sprintf(`<input type="hidden" name="jobIDs" value="%s">`, jobsValue))
responseHTML.WriteString(fmt.Sprintf(`<p>Found <strong>%d</strong> job(s) in the CSV file</p>`, totalJobs))
responseHTML.WriteString(fmt.Sprintf(`<div class="csv-sample"><p>Sample job IDs: %s</p></div>`, jobSampleDisplay))
// Generate out-of-band swap for the preview section
// Generate out-of-band swap for the preview section - simplified version
responseHTML.WriteString(fmt.Sprintf(`
<div id="csv-preview-removal" class="fade-me-out" style="display: block !important; margin-top: 1rem;" hx-swap-oob="true">
<h4>Detected Jobs</h4>
<div id="csv-preview-content-removal" class="job-list">
<div class="csv-sample">
<p>Sample job IDs: %s</p>
</div>
</div>
<div id="csv-preview-removal" class="fade-me-out csv-preview-active" hx-swap-oob="true">
<h4>✓ Jobs Detected</h4>
<p>Remove from <strong>%d</strong> job(s)</p>
</div>
`, jobSampleDisplay))
`, totalJobs))
// Send the response with the hidden input and preview
w.Header().Set("Content-Type", "text/html")

28
internal/handlers/web/documents.go
View File

@ -147,42 +147,24 @@ func ProcessCSVHandler(w http.ResponseWriter, r *http.Request) {
// Create a hidden input with the job IDs
jobsValue := strings.Join(jobNumbers, ",")
jobSampleDisplay := getJobSampleDisplay(jobNumbers)
// Generate HTML for the main response (hidden input for job-ids-container)
var responseHTML bytes.Buffer
responseHTML.WriteString(fmt.Sprintf(`<input type="hidden" name="jobNumbers" value="%s">`, jobsValue))
responseHTML.WriteString(fmt.Sprintf(`<p>Found <strong>%d</strong> job(s) in the CSV file</p>`, totalJobs))
responseHTML.WriteString(fmt.Sprintf(`<div class="csv-sample"><p>Sample job IDs: %s</p></div>`, jobSampleDisplay))
// Generate out-of-band swap for the preview section
// Generate out-of-band swap for the preview section - simplified version
responseHTML.WriteString(fmt.Sprintf(`
<div id="csv-preview" class="fade-me-out" style="display: block !important; margin-top: 1rem;" hx-swap-oob="true">
<h4>Detected Jobs</h4>
<div id="csv-preview-content" class="job-list">
<p>Found <strong>%d</strong> job(s) in the CSV file</p>
<div class="csv-sample">
<p>Sample job IDs: %s</p>
</div>
</div>
<div id="csv-preview" class="fade-me-out csv-preview-active" hx-swap-oob="true">
<h4>✓ Jobs Detected</h4>
<p>Upload to <strong>%d</strong> job(s)</p>
</div>
`, totalJobs, jobSampleDisplay))
`, totalJobs))
w.Header().Set("Content-Type", "text/html")
w.Write(responseHTML.Bytes())
}
// Helper function to show sample job IDs with a limit
func getJobSampleDisplay(jobIDs []string) string {
const maxSamples = 5
if len(jobIDs) <= maxSamples {
return strings.Join(jobIDs, ", ")
}
sample := append([]string{}, jobIDs[:maxSamples]...)
return strings.Join(sample, ", ") + fmt.Sprintf(" and %d more...", len(jobIDs)-maxSamples)
}
// UploadDocumentsHandler handles document uploads to jobs
func UploadDocumentsHandler(w http.ResponseWriter, r *http.Request) {
session, ok := r.Context().Value(middleware.SessionKey).(*api.Session)

41
static/css/styles.css
View File

@ -862,4 +862,45 @@ html {
font-size: 18px;
margin: 0;
}
}
#csv-preview,
#csv-preview-removal {
background-color: var(--dashboard-bg);
border-radius: 4px;
margin-top: 15px;
box-shadow: var(--dashboard-shadow);
text-align: center;
padding: 12px 15px 10px 15px;
display: inline-block;
width: 85%;
margin-left: auto;
margin-right: auto;
}
#csv-preview h4,
#csv-preview-removal h4 {
margin-top: 0;
margin-bottom: 8px;
font-size: 15px;
color: var(--dashboard-header-color);
font-weight: 600;
}
.job-list {
background-color: transparent;
padding: 0;
font-size: 14px;
}
#csv-preview-content p,
#csv-preview-content-removal p {
margin: 0;
font-weight: 500;
color: var(--btn-primary-bg);
}
/* Class for the CSV preview to display properly when initialized */
.csv-preview-active {
display: block;
}

11
templates/partials/document_remove.html
View File

@ -21,16 +21,7 @@
<div id="step2-removal" class="content" style="display: none;">
<h3 class="submenu-header">Step 2: Select Documents to Remove</h3>
<div class="tab-buttons">
<button id="individual-tab-btn" class="tab-button active">Individual Selection</button>
<button id="bulk-tab-btn" class="tab-button">Bulk Removal</button>
</div>
<div id="individual-selection-tab">
{{template "document_remove_form" .}}
</div>
<div id="bulk-removal-tab" style="display: none;">
<div id="bulk-removal-tab">
<form id="bulk-remove-form" hx-post="/documents/remove/bulk" hx-target="#removal-results"
hx-indicator=".removal-overlay">
<div class="form-group">

23
templates/partials/document_remove_form.html
View File

@ -1,23 +0,0 @@
{{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=".removal-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>
</form>
<div id="document-rows-container" class="document-rows">
<!-- The job list will be loaded here after clicking "Load Jobs" -->
<p>After uploading a CSV and clicking "Load Jobs", you'll see jobs here.</p>
</div>
<div class="document-actions">
<button type="button" id="remove-selected-btn" class="btn warning-button" disabled>
Remove Selected Documents
</button>
</div>
</div>
{{end}}

38
templates/partials/document_upload_form.html
View File

@ -1,38 +0,0 @@
{{define "document_upload_form"}}
<div class="content">
<h3 class="submenu-header">Step 2: Upload Documents</h3>
<div id="document-upload-container">
<div class="document-row" id="document-row-1">
<div class="document-field">
<label>Select Document:</label>
<input class="card-input" type="file" id="document-file-1" name="document-file-1">
</div>
<div class="document-field-row">
<div class="document-field document-name-field">
<label>Document Name (optional):</label>
<input class="card-input" type="text" id="document-name-1" name="document-name-1"
placeholder="Document Name">
</div>
<div class="document-field document-type-field">
<label>Document Type:</label>
<select class="card-input" id="document-type-1" name="document-type-1">
<option value="">Select Document Type</option>
<option value="1" selected>Job Paperwork</option>
<option value="2">Job Vendor Bill</option>
<option value="4">Generic Attachment</option>
<option value="7">Blank Paperwork</option>
<option value="14">Job Invoice</option>
</select>
</div>
</div>
<button type="button" class="remove-document warning-button" hx-get="/document-field-remove?id=1"
hx-target="#document-row-1" hx-swap="outerHTML" style="display: none;">Remove</button>
</div>
</div>
<button type="button" id="add-document" class="caution-button" hx-get="/document-field-add"
hx-target="#document-upload-container" hx-swap="beforeend">Add Another Document</button>
</div>
{{end}}
Write Preview
Loading…
Cancel
Save