From 470e30be1f945224b0e310170261947bf20595ce Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 26 Nov 2024 15:29:12 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20Filter?=
 =?UTF-8?q?=20=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=88=E0=B8=B1=E0=B8=94?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B9=83?=
 =?UTF-8?q?=E0=B8=8A=E0=B9=88=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/02_users/views/01_user.vue                | 4 +++-
 src/modules/02_users/views/02_rolesAndPermissions.vue | 4 +++-
 src/modules/02_users/views/03_permissionsView.vue     | 6 ++++--
 src/modules/02_users/views/05_responsIbilities.vue    | 6 ++++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/modules/02_users/views/01_user.vue b/src/modules/02_users/views/01_user.vue
index 08da0e36..f51311a8 100644
--- a/src/modules/02_users/views/01_user.vue
+++ b/src/modules/02_users/views/01_user.vue
@@ -383,10 +383,12 @@ onMounted(async () => {
         dense
         outlined
         v-model="keyword"
+        clearable
+        @clear="keyword = ''"
         placeholder="ค้นหา"
         @keydown.enter.prevent="(currentPage = 1), fetchListUsers()"
       >
-        <template v-slot:append>
+        <template v-slot:append v-if="keyword === ''">
           <q-icon name="search" />
         </template>
       </q-input>
diff --git a/src/modules/02_users/views/02_rolesAndPermissions.vue b/src/modules/02_users/views/02_rolesAndPermissions.vue
index cc5c0885..2f196a22 100644
--- a/src/modules/02_users/views/02_rolesAndPermissions.vue
+++ b/src/modules/02_users/views/02_rolesAndPermissions.vue
@@ -170,8 +170,10 @@ onMounted(() => {
         outlined
         v-model="keyword"
         placeholder="ค้นหา"
+        clearable
+        @clear="keyword = ''"
       >
-        <template v-slot:append>
+        <template v-slot:append v-if="keyword===''">
           <q-icon name="search" />
         </template>
       </q-input>
diff --git a/src/modules/02_users/views/03_permissionsView.vue b/src/modules/02_users/views/03_permissionsView.vue
index 3b4061fe..1138ad77 100644
--- a/src/modules/02_users/views/03_permissionsView.vue
+++ b/src/modules/02_users/views/03_permissionsView.vue
@@ -516,7 +516,7 @@ onMounted(() => {
                             class="cursor-pointer"
                             @click="filter = ''"
                           />
-                          <q-icon name="search" color="grey-5" />
+                          <q-icon name="search" color="grey-5" v-else />
                         </template>
                       </q-input>
                     </div>
@@ -624,6 +624,8 @@ onMounted(() => {
                       dense
                       v-model="reqMaster.keyword"
                       label="ค้นหา"
+                      clearable
+                      @clear="reqMaster.keyword = ''"
                       @keydown.enter.prevent="
                         (reqMaster.page = 1),
                           fetchDataTable(
@@ -633,7 +635,7 @@ onMounted(() => {
                           )
                       "
                     >
-                      <template v-slot:append>
+                      <template v-slot:append v-if="reqMaster.keyword === ''">
                         <q-icon name="search" color="grey-5" />
                       </template>
                     </q-input>
diff --git a/src/modules/02_users/views/05_responsIbilities.vue b/src/modules/02_users/views/05_responsIbilities.vue
index 76f45235..06986da6 100644
--- a/src/modules/02_users/views/05_responsIbilities.vue
+++ b/src/modules/02_users/views/05_responsIbilities.vue
@@ -447,7 +447,7 @@ onMounted(() => {
                             class="cursor-pointer"
                             @click="filter = ''"
                           />
-                          <q-icon name="search" color="grey-5" />
+                          <q-icon v-else name="search" color="grey-5" />
                         </template>
                       </q-input>
                     </div>
@@ -555,6 +555,8 @@ onMounted(() => {
                       dense
                       v-model="reqMaster.keyword"
                       label="ค้นหา"
+                      clearable
+                      @clear="reqMaster.keyword = ''"
                       @keydown.enter.prevent="
                         (reqMaster.page = 1),
                           fetchDataTable(
@@ -564,7 +566,7 @@ onMounted(() => {
                           )
                       "
                     >
-                      <template v-slot:append>
+                      <template v-slot:append v-if="reqMaster.keyword === ''">
                         <q-icon name="search" color="grey-5" />
                       </template>
                     </q-input>