From dd9c078419809f54f500560d25433eaaecf1fa74 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Mon, 24 Jun 2024 13:42:44 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=81=E0=B8=A3=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Director/Form.vue              | 61 +++++++++++++++++--
 1 file changed, 55 insertions(+), 6 deletions(-)

diff --git a/src/modules/12_evaluatePersonal/components/Director/Form.vue b/src/modules/12_evaluatePersonal/components/Director/Form.vue
index 9a7b64e7e..89565c6f4 100644
--- a/src/modules/12_evaluatePersonal/components/Director/Form.vue
+++ b/src/modules/12_evaluatePersonal/components/Director/Form.vue
@@ -14,6 +14,14 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 const $q = useQuasar();
@@ -47,10 +55,10 @@ const emit = defineEmits(["formDataReturn"]);
 //
 const idCard = ref<string>("");
 const idCardRef = ref<any>(null);
-const type = ref<string>("idcard");
+const type = ref<string>("citizenId");
 const search = ref<string>("");
 const typeOps = ref<typeOp[]>([
-  { id: "idcard", name: "เลขประจำตัวประชาชน" },
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
   { id: "firstname", name: "ชื่อ" },
   { id: "lastname", name: "นามสกุล" },
 ]);
@@ -203,12 +211,21 @@ async function searchInput() {
       keyword: search.value,
     };
     await http
-      .post(config.API.orgSearchPersonal(), body)
+      .post(
+        config.API.orgSearchPersonal() +
+          `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}`,
+        body
+      )
       .then((res) => {
-        const data = res.data.result;
+        const data = res.data.result.data;
+        totalList.value = Math.ceil(
+          res.data.result.total / pagination.value.rowsPerPage
+        );
+        total.value = res.data.result.total;
+
         const list = data.map((e: ResponsePreson) => ({
           personId: e.id,
-          idcard: e.idcard,
+          idcard: e.citizenId,
           prefix: e.prefix,
           firstName: e.firstName,
           lastName: e.lastName,
@@ -252,6 +269,17 @@ function onclickViewinfo(id: string) {
 function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    await searchInput();
+  }
+);
 </script>
 <template>
   <form @submit.prevent.stop="onValidate">
@@ -312,7 +340,24 @@ function updatemodalPersonal(modal: boolean) {
                 dense
                 class="custom-header-table"
                 :visible-columns="visibleColumnsRespondent"
+                :rows-per-page-options="[10, 25, 50, 100]"
+                @update:pagination="updatePagination"
               >
+                <template v-slot:pagination="scope">
+                  ทั้งหมด {{ total }} รายการ
+                  <q-pagination
+                    v-model="pagination.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="Number(totalList)"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                    :max-pages="5"
+                    @update:model-value="searchInput"
+                  ></q-pagination>
+                </template>
+
                 <template v-slot:header="props">
                   <q-tr :props="props">
                     <q-th
@@ -334,7 +379,11 @@ function updatemodalPersonal(modal: boolean) {
                       @click="returnDetail(props.row)"
                     >
                       <div v-if="col.name == 'no'">
-                        {{ props.rowIndex + 1 }}
+                        {{
+                          (pagination.page - 1) * pagination.rowsPerPage +
+                          props.rowIndex +
+                          1
+                        }}
                       </div>
                       <div v-else-if="col.name == 'info'">
                         <!-- <router-link