tigor/Redmage
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

view: devices: refactor filter bar

Browse source
This commit is contained in:
Tigor Hutasuhut 2024-05-29 15:37:03 +07:00
parent c2f17fbe9f
commit 6f78182f5c
1 changed files with 37 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
views/devices/filter.templ
View file

@ -1,5 +1,7 @@
package devices
import "github.com/tigorlazuardi/redmage/api"
templ filter(data Data) {
<div
id="filter-bar"
@ -10,39 +12,41 @@ templ filter(data Data) {
hx-select="main"
hx-swap="outerHTML"
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">
<input
id="search"
type="text"
class="grow"
placeholder="Search"
name="q"
value={ data.Params.Q }
/>
<svg
onclick="htmx.trigger('#filter-bar', 'change')"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
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">
<option value="">*No Filter</option>
<option value="1" selected?={ data.Params.Status == 1 }>Enabled</option>
<option value="0" selected?={ data.Params.Status == 0 }>Disabled</option>
</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>
@searchInput(data.Params)
@statusInput(data.Params)
@limitInput(data.Params)
</div>
}
templ searchInput(params api.DevicesListParams) {
<label for="search" class="label">Search</label>
<input
id="search"
type="text"
class="input input-bordered w-full sm:col-span-3"
placeholder="Search"
name="q"
value={ params.Q }
/>
}
templ statusInput(params api.DevicesListParams) {
<label for="status" class="label">Status</label>
<select id="status" name="status" class="select select-bordered w-full">
<option value="">*No Filter</option>
<option value="1" selected?={ params.Status == 1 }>Enabled</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>
}