From 6f78182f5ca153f056db4de6a9a3a59af5d69699 Mon Sep 17 00:00:00 2001
From: Tigor Hutasuhut <tigor.hutasuhut@gmail.com>
Date: Wed, 29 May 2024 15:37:03 +0700
Subject: [PATCH] view: devices: refactor filter bar

---
 views/devices/filter.templ | 70 ++++++++++++++++++++------------------
 1 file changed, 37 insertions(+), 33 deletions(-)

diff --git a/views/devices/filter.templ b/views/devices/filter.templ
index e9feeee..6f71092 100644
--- a/views/devices/filter.templ
+++ b/views/devices/filter.templ
@@ -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>
+}