แก้ไข filter รายการคำขอประเมิน

src/modules/12_evaluatePersonal/views/MainPage.vue

@@ -17,74 +17,94 @@ const mixin = useCounterMixin();
 const store = useEvalutuonStore();
 const { showLoader, hideLoader, messageError } = mixin;
 const attrs = ref<any>(useAttrs());
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
-});
+
 function Detailpage(id: string) {
   router.push(`/evaluate/detail/${id}`);
 }
 
 const currentPage = ref<number>(1);
-const maxPage = ref<number>(1);
+const maxPage = ref<number>(0);
 const page = ref<number>(1);
 const total = ref<number>(0);
 const filter = ref<string>("");
-const rowsPerPage = ref<number>(10);
+const pageSize = ref<number>(10);
+
 /**
  *pagination ของตาราง
  */
-const pagination = ref({
+const initialPagination = ref<any>({
+  sortBy: null,
   descending: false,
-  page: page.value,
-  rowsPerPage: rowsPerPage.value,
+  page: 1,
+  rowsPerPage: pageSize,
 });
 
 // Pagination - update rowsPerPage
 async function updatePagination(initialPagination: any) {
   currentPage.value = 1;
-  rowsPerPage.value = initialPagination.rowsPerPage;
+  pageSize.value = initialPagination.rowsPerPage;
   page.value = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
 }
-
+// Pagination - page & change page & get new data
 watch(
-  () => currentPage.value,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
+  [
+    () => currentPage.value,
+    () => (pageSize.value = initialPagination.value.rowsPerPage),
+  ],
+  async () => {
     getList();
   }
 );
-
+// Pagination - page & change page & get new data
 watch(
-  () => pagination.value.rowsPerPage,
+  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  async () => {
+    page.value = currentPage.value;
+    await getList();
+  }
+);
+watch(
+  () => initialPagination.value.rowsPerPage,
   () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
+    pageSize.value = initialPagination.value.rowsPerPage;
     currentPage.value = 1;
     getList();
   }
 );
 
+/**
+ * filter function
+ */
+const filterRef = ref<HTMLInputElement | null>(null);
 function filterFn() {
+  updatePagination(filter.value);
+  pageSize.value = initialPagination.value.rowsPerPage;
   getList();
 }
+const resetFilter = () => {
+  filter.value = "";
+  getList();
+  if (filterRef.value) {
+    filterRef.value.focus();
+  }
+};
+
 function getList() {
   showLoader();
   http
     .get(
-      config.API.evaluationMain(
-        currentPage.value,
-        rowsPerPage.value,
-        filter.value
-      )
+      config.API.evaluationMain(currentPage.value, pageSize.value, filter.value)
     )
     .then(async (res) => {
+      const data = res.data.result.data;
       total.value = res.data.result.total;
-      maxPage.value = await Math.ceil(total.value / rowsPerPage.value);
-      maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
       console.log(res.data.result.total);
-      console.log(rowsPerPage.value);
+      maxPage.value = await Math.ceil(total.value / pageSize.value);
+      maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
+      console.log(total.value);
+      console.log(pageSize.value);
       console.log(maxPage.value);
 
-      const data = res.data.result.data;
       store.fetchData(data);
     })
     .catch((e) => {
@@ -122,7 +142,13 @@ onMounted(async () => {
         @keydown.enter.prevent="filterFn"
       >
         <template v-slot:append>
-          <q-icon name="search" />
+          <q-icon v-if="filter == ''" name="search" />
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
         </template>
       </q-input>
 
@@ -148,16 +174,15 @@ onMounted(async () => {
         ref="table"
         :columns="store.columns"
         :rows="store.rows"
-        :filter="filter"
         row-key="interrogated"
         flat
         bordered
-        :paging="true"
+        :paging="false"
         dense
         class="custom-header-table"
         :visible-columns="store.visibleColumns"
-        v-model:pagination="pagination"
-        :rows-per-page-options="[10, 25, 50, 100]"
+        v-model:pagination="initialPagination"
+        :rows-per-page-options="[2, 25, 50, 100]"
         @update:pagination="updatePagination"
       >
         <template v-slot:pagination="scope">
@@ -208,7 +233,7 @@ onMounted(async () => {
               @click="Detailpage(props.row.id)"
             >
               <div v-if="col.name == 'no'">
-                {{ (page - 1) * rowsPerPage + props.rowIndex + 1 }}
+                {{ (page - 1) * pageSize + props.rowIndex + 1 }}
               </div>
               <div v-else>
                 {{ col.value }}