เพิ่มฟิลเตอร์

src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, reactive } from "vue";
+import { onMounted, ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRoute } from "vue-router";
@@ -46,6 +46,15 @@ const modeViewPlan = ref<string>("table"); //การแสดงผล Table,C
 const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไข
 const kpiDevelopmentId = ref<string>(""); // id การพัฒนารายบุคคล
 
+const totalIdp = ref<number>(0);
+const totalListIdp = ref<number>(1);
+const paginationIdp = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const resPerformForm = reactive<RequestItemsObject>({
   name: "",
   point1Total: 0, //ส่วนที่1 (น้ำหนัก)
@@ -242,10 +251,6 @@ const visibleColumnsPlan = ref<String[]>([
   "developmentResults",
   "developmentReport",
 ]);
-const paginationPlan = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
 
 //Table ประวัติแก้ไข
 const rowsHistory = ref<ResponseObject[]>([]);
@@ -401,13 +406,23 @@ async function fetchData() {
 /**
  * fetch รายการการพัฒนารายบุคคล (Individual Development Plan)
  */
-async function getDevelop() {
+async function getDevelop(isLoad?: boolean) {
   if (!profileId.value) return;
+  isLoad && showLoader();
   await http
-    .get(config.API.developMentPlan + `/${profileId.value}`)
+    .get(
+      config.API.developMentPlan +
+        `/${profileId.value}?page=${paginationIdp.value.page}&pageSize=${paginationIdp.value.rowsPerPage}&searchKeyword=${filterSearchPlan.value}
+`
+    )
     .then((res) => {
-      const data = res.data.result;
+      const data = res.data.result.data;
+      totalListIdp.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      totalIdp.value = res.data.result.total;
       rowsPlan.value = data;
+      isLoad && hideLoader();
     })
     .catch((e) => {
       messageError($q, e);
@@ -535,6 +550,18 @@ function openDialogDevelop(data: any) {
   kpiDevelopmentId.value = data.kpiDevelopmentId;
 }
 
+function updatePaginationIdp(newPagination: any) {
+  paginationIdp.value.page = 1;
+  paginationIdp.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+watch(
+  () => paginationIdp.value.rowsPerPage,
+  async () => {
+    await getDevelop(true);
+  }
+);
+
 onMounted(async () => {
   await fetchData();
   await getDevelop();
@@ -767,6 +794,7 @@ onMounted(async () => {
               outlined
               placeholder="ค้นหา"
               debounce="300"
+              @keydown.enter.prevent="getDevelop"
             >
               <template v-slot:append>
                 <q-icon
@@ -778,7 +806,9 @@ onMounted(async () => {
                 <q-icon
                   v-if="filterSearchPlan"
                   name="cancel"
-                  @click.stop.prevent="filterSearchPlan = ''"
+                  @click.stop.prevent="
+                    (filterSearchPlan = ''), getDevelop(true)
+                  "
                   class="cursor-pointer"
                 />
               </template>
@@ -839,15 +869,29 @@ onMounted(async () => {
             :rows="rowsPlan"
             :paging="true"
             :columns="columnsPlan"
-            :filter="filterSearchPlan"
-            v-model:pagination="paginationPlan"
             :grid="modeViewPlan === 'card'"
             :visible-columns="visibleColumnsPlan"
-            :rows-per-page-options="[20, 50, 100]"
             :card-container-class="
               modeViewPlan === 'card' ? 'q-col-gutter-md' : ''
             "
+            :rows-per-page-options="[1, 25, 50, 100]"
+            @update:pagination="updatePaginationIdp"
           >
+            <template v-slot:pagination="scope">
+              ทั้งหมด {{ totalIdp }} รายการ
+              <q-pagination
+                v-model="paginationIdp.page"
+                active-color="primary"
+                color="dark"
+                :max="Number(totalListIdp)"
+                size="sm"
+                boundary-links
+                direction-links
+                :max-pages="5"
+                @update:model-value="getDevelop"
+              ></q-pagination>
+            </template>
+
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th auto-width />
@@ -875,7 +919,7 @@ onMounted(async () => {
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
                   <div v-if="col.name == 'no'">
                     {{
-                      (paginationPlan.page - 1) * paginationPlan.rowsPerPage +
+                      (paginationIdp.page - 1) * paginationIdp.rowsPerPage +
                       props.rowIndex +
                       1
                     }}