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

src/modules/02_users/views/02_rolesAndPermissions.vue

@@ -18,11 +18,18 @@ import DialogAddRole from "@/modules/02_users/components/Roles/DialogAddRole.vue
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
-const { dialogRemove, messageError, showLoader, hideLoader, success } =
-  useCounterMixin();
+const {
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  onSearchDataTable,
+} = useCounterMixin();
 
 /** Table*/
 const rows = ref<Roles[]>([]); // รายการบทบาท
+const rowsMain = ref<Roles[]>([]); // รายการบทบาท
 const keyword = ref<string>(""); // คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
@@ -75,7 +82,6 @@ const itemMenu = ref<ItemsMenu[]>([
 
 /**
  * function fetch รายการบทบาท
- *
  * และบันทึกใน rows
  */
 async function fetchListRole() {
@@ -85,6 +91,7 @@ async function fetchListRole() {
     .then(async (res) => {
       const data = await res.data.result;
       rows.value = data;
+      rowsMain.value = data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -110,9 +117,7 @@ function onClickAction(type: string, data: Roles) {
   }
 }
 
-/**
- * เปิด  popup เพิ่มบทบาท
- */
+/** เปิด  popup เพิ่มบทบาท*/
 function openDialog() {
   modalDialogAdd.value = true;
 }
@@ -139,9 +144,16 @@ function onDeleteRole(id: string) {
   });
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * hook ทำงานเมื่อมีการเรียกใช้งาน Components
- *
  * ดึงข้อมูลบทบาท
  */
 onMounted(() => {
@@ -166,14 +178,12 @@ onMounted(() => {
       <q-input
         borderless
         dense
-        debounce="300"
         outlined
         v-model="keyword"
         placeholder="ค้นหา"
-        clearable
-        @clear="keyword = ''"
+        @keydown.enter.pervent="serchDataTable"
       >
-        <template v-slot:append v-if="keyword===''">
+        <template v-slot:append>
           <q-icon name="search" />
         </template>
       </q-input>
@@ -198,7 +208,6 @@ onMounted(() => {
         :columns="columns"
         :rows="rows"
         row-key="id"
-        :filter="keyword"
         flat
         bordered
         :paging="true"