cmc-sales/go/templates/documents/index.html

65 lines
2.4 KiB
HTML

{{define "content"}}
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title">Documents</h1>
<p class="subtitle">Manage your documents (Quotes, Invoices, Purchase Orders, etc.)</p>
</div>
<div class="column is-narrow">
<div class="field has-addons">
<div class="control">
<div class="select">
<select id="type-filter" onchange="filterDocuments()">
<option value="">All Types</option>
<option value="quote" {{if eq .DocType "quote"}}selected{{end}}>Quotes</option>
<option value="invoice" {{if eq .DocType "invoice"}}selected{{end}}>Invoices</option>
<option value="purchaseOrder" {{if eq .DocType "purchaseOrder"}}selected{{end}}>Purchase Orders</option>
<option value="orderAck" {{if eq .DocType "orderAck"}}selected{{end}}>Order Acknowledgements</option>
<option value="packingList" {{if eq .DocType "packingList"}}selected{{end}}>Packing Lists</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div class="field">
<div class="control">
<input class="input" type="text" id="search-input" placeholder="Search by reference, filename, or user..."
hx-get="/documents/search"
hx-target="#document-table"
hx-trigger="keyup changed delay:500ms, search"
hx-include="#type-filter">
</div>
</div>
</div>
</div>
<div id="document-table">
{{template "document-table" .}}
</div>
</div>
<script>
function filterDocuments() {
const typeFilter = document.getElementById('type-filter');
const searchInput = document.getElementById('search-input');
let url = '/documents';
if (typeFilter.value) {
url += '?type=' + encodeURIComponent(typeFilter.value);
}
// Clear search when changing type filter
searchInput.value = '';
// Update the table via HTMX
htmx.ajax('GET', url, {
target: '#document-table',
headers: {'HX-Request': 'true'}
});
}
</script>
{{end}}