67 lines
2.4 KiB
HTML
67 lines
2.4 KiB
HTML
|
{{define "title"}}Products - CMC Sales{{end}}
|
||
|
|
|
||
|
|
{{define "content"}}
|
||
|
|
<div class="level">
|
||
|
|
<div class="level-left">
|
||
|
|
<div class="level-item">
|
||
|
|
<h1 class="title">Products</h1>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="level-right">
|
||
|
|
<div class="level-item">
|
||
|
|
<a href="/products/new" class="button is-primary">
|
||
|
|
<span class="icon">
|
||
|
|
<i class="fas fa-plus"></i>
|
||
|
|
</span>
|
||
|
|
<span>New Product</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Search and Filter Box -->
|
||
|
|
<div class="box">
|
||
|
|
<div class="columns">
|
||
|
|
<div class="column">
|
||
|
|
<div class="field has-addons">
|
||
|
|
<div class="control has-icons-left is-expanded">
|
||
|
|
<input class="input" type="text" placeholder="Search products..."
|
||
|
|
name="search" id="product-search"
|
||
|
|
hx-get="/products/search"
|
||
|
|
hx-trigger="keyup changed delay:500ms"
|
||
|
|
hx-target="#product-table-container">
|
||
|
|
<span class="icon is-left">
|
||
|
|
<i class="fas fa-search"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<button class="button is-info" onclick="document.getElementById('product-search').value=''; document.getElementById('product-search').dispatchEvent(new Event('keyup'))">
|
||
|
|
Clear
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="column is-narrow">
|
||
|
|
<div class="field">
|
||
|
|
<div class="control">
|
||
|
|
<div class="select">
|
||
|
|
<select name="category"
|
||
|
|
hx-get="/products/filter"
|
||
|
|
hx-trigger="change"
|
||
|
|
hx-target="#product-table-container">
|
||
|
|
<option value="">All Categories</option>
|
||
|
|
<option value="1">Category 1</option>
|
||
|
|
<option value="2">Category 2</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Product Table Container -->
|
||
|
|
<div id="product-table-container">
|
||
|
|
{{template "product-table" .}}
|
||
|
|
</div>
|
||
|
|
{{end}}
|