ปรับ Filter การจัดการผู้ใช่งาน

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>

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>

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>

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>