view: devices: refactor filter bar
This commit is contained in:
parent
c2f17fbe9f
commit
6f78182f5c
|
@ -1,5 +1,7 @@
|
||||||
package devices
|
package devices
|
||||||
|
|
||||||
|
import "github.com/tigorlazuardi/redmage/api"
|
||||||
|
|
||||||
templ filter(data Data) {
|
templ filter(data Data) {
|
||||||
<div
|
<div
|
||||||
id="filter-bar"
|
id="filter-bar"
|
||||||
|
@ -10,39 +12,41 @@ templ filter(data Data) {
|
||||||
hx-select="main"
|
hx-select="main"
|
||||||
hx-swap="outerHTML"
|
hx-swap="outerHTML"
|
||||||
hx-push-url="true"
|
hx-push-url="true"
|
||||||
class="grid md:grid-cols-[1fr,3fr] lg:grid-cols-2 gap-4"
|
class="grid grid-cols-[1fr,4fr] sm:grid-cols-[1fr,4fr,1fr,4fr] gap-4"
|
||||||
>
|
>
|
||||||
<label class="input input-bordered flex items-center gap-2">
|
@searchInput(data.Params)
|
||||||
|
@statusInput(data.Params)
|
||||||
|
@limitInput(data.Params)
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
templ searchInput(params api.DevicesListParams) {
|
||||||
|
<label for="search" class="label">Search</label>
|
||||||
<input
|
<input
|
||||||
id="search"
|
id="search"
|
||||||
type="text"
|
type="text"
|
||||||
class="grow"
|
class="input input-bordered w-full sm:col-span-3"
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
name="q"
|
name="q"
|
||||||
value={ data.Params.Q }
|
value={ params.Q }
|
||||||
/>
|
/>
|
||||||
<svg
|
}
|
||||||
onclick="htmx.trigger('#filter-bar', 'change')"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
templ statusInput(params api.DevicesListParams) {
|
||||||
viewBox="0 0 16 16"
|
<label for="status" class="label">Status</label>
|
||||||
fill="currentColor"
|
|
||||||
class="w-4 h-4 opacity-70"
|
|
||||||
><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg>
|
|
||||||
</label>
|
|
||||||
<div class="grid grid-cols-[1fr,3fr] sm:grid-cols-[1fr,3fr,1fr,3fr] items-center gap-4">
|
|
||||||
<label for="status">Status</label>
|
|
||||||
<select id="status" name="status" class="select select-bordered w-full">
|
<select id="status" name="status" class="select select-bordered w-full">
|
||||||
<option value="">*No Filter</option>
|
<option value="">*No Filter</option>
|
||||||
<option value="1" selected?={ data.Params.Status == 1 }>Enabled</option>
|
<option value="1" selected?={ params.Status == 1 }>Enabled</option>
|
||||||
<option value="0" selected?={ data.Params.Status == 0 }>Disabled</option>
|
<option value="0" selected?={ params.Status == 0 }>Disabled</option>
|
||||||
|
</select>
|
||||||
|
}
|
||||||
|
|
||||||
|
templ limitInput(params api.DevicesListParams) {
|
||||||
|
<label for="limit" class="label">Limit</label>
|
||||||
|
<select id="limit" name="limit" class="select select-bordered w-full">
|
||||||
|
<option value="25" selected?={ params.Limit == 25 }>25</option>
|
||||||
|
<option value="50" selected?={ params.Limit == 50 }>50</option>
|
||||||
|
<option value="75" selected?={ params.Limit == 75 }>75</option>
|
||||||
|
<option value="100" selected?={ params.Limit == 100 }>100</option>
|
||||||
</select>
|
</select>
|
||||||
<label for="limit">Limit</label>
|
|
||||||
<select id="limit" name="limit" class="select select-bordered w-full">
|
|
||||||
<option value="25" selected?={ data.Params.Limit == 25 }>25</option>
|
|
||||||
<option value="50" selected?={ data.Params.Limit == 50 }>50</option>
|
|
||||||
<option value="75" selected?={ data.Params.Limit == 75 }>75</option>
|
|
||||||
<option value="100" selected?={ data.Params.Limit == 100 }>100</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue