From 9c3c545d02d9e4d941429beaaa644f0b81b9fed7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 27 Nov 2024 09:35:15 +0700
Subject: [PATCH] =?UTF-8?q?fix=20=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B8=95=E0=B9=89?=
 =?UTF-8?q?=E0=B8=99=E0=B9=81=E0=B8=9A=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_command/views/lists.vue | 41 ++++++++++++++++++--------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/modules/05_command/views/lists.vue b/src/modules/05_command/views/lists.vue
index 93986e71..ef294800 100644
--- a/src/modules/05_command/views/lists.vue
+++ b/src/modules/05_command/views/lists.vue
@@ -73,6 +73,7 @@ const isEdit = ref<boolean>(false); //เก็บ true/false เช็คแก
 const dialogFormCommand = ref<boolean>(false); // model คำสั่ง
 const dataTemplateDetail = ref<DataTemplateDetail>();
 
+const keyword = ref<string>("");
 const page = ref<number>(1); // หน้า
 const pageSize = ref<number>(13); // จำนวนข้อมูล
 const maxPage = ref<number>(0); // จำนวนหน้า
@@ -88,6 +89,7 @@ async function fetchCommandType() {
         page: page.value,
         pageSize: pageSize.value,
         isActive: isActive.value,
+        search: keyword.value,
       },
     })
     .then(async (res) => {
@@ -272,21 +274,34 @@ onMounted(async () => {
   <div class="row q-col-gutter-sm" style="height: 85vh; display: flex">
     <div class="col-4">
       <q-card bordered style="min-height: 100%">
-        <div class="row items-center q-pa-sm">
+        <q-toolbar>
+          <q-input
+            borderless
+            dense
+            outlined
+            clearable
+            v-model="keyword"
+            placeholder="ค้นหา"
+            @clear="(keyword = ''), searchByStatus()"
+            @keydown.enter.prevent="searchByStatus()"
+          >
+            <template v-slot:append v-if="keyword === ''">
+              <q-icon name="search" />
+            </template>
+          </q-input>
+
           <q-space />
-          <div class="col-12 col-md-6 q-py-sm">
-            <div class="row items-center no-wrap justify-end">
-              <q-label
-                :class="`${isActive ? `text-primary` : `text-orange`}`"
-                >{{ `${isActive ? `ใช้งาน` : `ไม่ใช้งาน`}` }}</q-label
-              >
-              <label :class="`q-ml-lg toggle-control`">
-                <input type="checkbox" v-model="isActive" />
-                <span class="control"></span>
-              </label>
-            </div>
+          <div class="row items-center no-wrap">
+            <q-label :class="`${isActive ? `text-primary` : `text-orange`}`">{{
+              `${isActive ? `ใช้งาน` : `ไม่ใช้งาน`}`
+            }}</q-label>
+            <label :class="`q-ml-lg toggle-control`">
+              <input type="checkbox" v-model="isActive" />
+              <span class="control"></span>
+            </label>
           </div>
-        </div>
+        </q-toolbar>
+
         <q-separator />
         <q-card-section class="q-pa-sm">
           <q-list v-for="(item, index) in listOrder" bordered :key="item.id">