filter ==> จัดการผู้ใช้งาน

src/modules/02_users/components/Permissions/DialogAdd.vue

@@ -23,6 +23,7 @@ const {
   messageError,
   success,
   dialogMessageNotify,
+  onSearchDataTable,
 } = useCounterMixin();
 
 /**  props*/
@@ -41,6 +42,8 @@ const props = defineProps({
 });
 
 const rows = ref<Roles[]>([]);
+const rowsMain = ref<Roles[]>([]);
+const keyword = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
     name: "roleName",
@@ -63,12 +66,12 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>(["roleName", "roleDescription"]);
 
-const keyword = ref<string>("");
 const selected = ref<Roles[]>([]);
 
 function closeDialog() {
   modal.value = false;
   selected.value = [];
+  keyword.value = "";
 }
 
 function fetchListRoles() {
@@ -78,6 +81,7 @@ function fetchListRoles() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsMain.value = data;
       const findRole = data.find(
         (e: Roles) => e.id === props.dataPosMaster.authRoleId
       );
@@ -124,6 +128,14 @@ function onSubmit() {
   }
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 watch(
   () => modal.value,
   () => {
@@ -140,9 +152,15 @@ watch(
       <q-card-section>
         <div class="row q-col-gutter-sm">
           <div class="col-12">
-            <q-input outlined dense v-model="keyword" label="ค้นหา">
+            <q-input
+              outlined
+              dense
+              v-model="keyword"
+              label="ค้นหา"
+              @keydown.enter.pervent="serchDataTable"
+            >
               <template v-slot:append>
-                <q-icon name="search" color="grey-5" />
+                <q-icon name="search" />
               </template>
             </q-input>
           </div>
@@ -151,7 +169,6 @@ watch(
               ref="table"
               :columns="columns"
               :rows="rows"
-              :filter="keyword"
               row-key="id"
               flat
               bordered
@@ -162,15 +179,6 @@ watch(
               selection="single"
               v-model:selected="selected"
             >
-              <!-- <template v-slot:header-selection="scope">
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="scope.selected"
-                  />
-                </template> -->
-
               <template v-slot:body="props">
                 <q-tr :props="props" class="cursor-pointer">
                   <q-td>

src/modules/02_users/components/RoleOrganization/DialogAddPerson.vue

@@ -208,15 +208,18 @@ watch(
                 dense
                 v-model="qurey.searchKeyword"
                 label="คำค้น"
-                clearable
+                
               >
-                <template v-slot:append v-if="!qurey.searchKeyword">
-                  <q-icon name="search" color="grey-5" />
-                </template>
+                <!-- <template v-slot:append>
+                  <q-icon name="search" />
+                </template> -->
               </q-input>
             </q-toolbar-title>
 
             <q-btn
+              outline
+              icon="search"
+              class="full-height"
               label="ค้นหา"
               color="primary"
               @click="onSearchListPerson(true)"