ปรับ filter KPI Devalopment

src/modules/14_KPI/views/mainDetail.vue

@@ -20,7 +20,14 @@ interface ListMain {
 const profileId = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { messageError, findOrgName, showLoader, hideLoader, date2Thai } = mixin;
+const {
+  messageError,
+  findOrgName,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  onSearchDataTable,
+} = mixin;
 
 const mode = ref<any>($q.screen.gt.xs);
 const profileImg = ref<string>("");
@@ -41,6 +48,7 @@ const sizeImg = ref<string>("");
 
 /** Table */
 const rows = ref<ListMain[]>([]);
+const rowsMain = ref<ListMain[]>([]);
 const filter = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
@@ -150,6 +158,7 @@ async function getList(id: string) {
     .then(async (res) => {
       const data = await res.data.result;
       rows.value = data;
+      rowsMain.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -208,6 +217,14 @@ function onDetail(id: string) {
   router.push(`/probation/detail/${profileId.value}/${id}`);
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   await getMain();
 });
@@ -225,6 +242,11 @@ onMounted(async () => {
       @click="router.go(-1)"
     />
     รายละเอียดงานที่ได้รับมอบหมาย
+    {{
+      formData.firstName
+        ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+        : ""
+    }}
   </div>
   <div class="row q-col-gutter-md">
     <div v-if="$q.screen.gt.xs" class="col-12">
@@ -236,6 +258,7 @@ onMounted(async () => {
               : "-"
           }}</span>
         </div>
+        <q-separator />
         <q-resize-observer @resize="onResize" />
         <q-card-section class="q-pa-md">
           <div class="row">
@@ -324,31 +347,21 @@ onMounted(async () => {
         </q-list>
       </q-card>
     </div>
+
     <div class="col-12 row">
       <q-card bordered class="col-12 q-pa-md">
         <div class="row">
           <q-space />
           <q-input
-            class="inputgreen"
             outlined
             dense
             v-model="filter"
             label="ค้นหา"
             :style="mode ? `max-width: 200px` : `max-width: 150px`"
+            @keydown.enter.pervent="serchDataTable"
           >
             <template v-slot:append>
-              <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="filter = ''"
-              />
-              <q-icon
-                v-else
-                name="search"
-                class="cursor-pointer"
-                @click="filter = ''"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
           <q-select
@@ -359,7 +372,6 @@ onMounted(async () => {
             outlined
             emit-value
             map-options
-            
             options-dense
             option-value="name"
             style="min-width: 140px"
@@ -378,7 +390,6 @@ onMounted(async () => {
             :rows="rows"
             :columns="columns"
             :grid="!$q.screen.gt.xs"
-            :filter="filter.trim()"
             :rows-per-page-options="[10, 25, 50, 100]"
             :visible-columns="visibleColumns"
             :virtual-scroll-sticky-size-start="48"