From 6d19f518ec2fe294508aa0f4fb3b58107643b14f Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Mon, 25 Dec 2023 18:51:07 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=20pagination=20=E0=B8=82=E0=B8=AD=E0=B8=87=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=84=E0=B8=B3=E0=B8=82=E0=B8=AD=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../12_evaluatePersonal/views/MainPage.vue    | 49 +++++++++++++++----
 1 file changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/modules/12_evaluatePersonal/views/MainPage.vue b/src/modules/12_evaluatePersonal/views/MainPage.vue
index f1cb849e3..58629cc7e 100644
--- a/src/modules/12_evaluatePersonal/views/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/views/MainPage.vue
@@ -25,9 +25,9 @@ function Detailpage(id: string) {
 }
 
 const currentPage = ref<number>(1);
-const pageSize = ref<number>(10);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
+const total = ref<number>(0);
 const filter = ref<string>("");
 const rowsPerPage = ref<number>(10);
 /**
@@ -39,6 +39,13 @@ const pagination = ref({
   rowsPerPage: rowsPerPage.value,
 });
 
+// Pagination - update rowsPerPage
+async function updatePagination(initialPagination: any) {
+  currentPage.value = 1;
+  rowsPerPage.value = initialPagination.rowsPerPage;
+  page.value = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
+}
+
 watch(
   () => currentPage.value,
   () => {
@@ -69,8 +76,14 @@ function getList() {
         filter.value
       )
     )
-    .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+    .then(async (res) => {
+      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);
+      console.log(maxPage.value);
+
       const data = res.data.result.data;
       store.fetchData(data);
     })
@@ -142,19 +155,27 @@ onMounted(async () => {
         :paging="true"
         dense
         class="custom-header-table"
-        v-bind="attrs"
         :visible-columns="store.visibleColumns"
         v-model:pagination="pagination"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        @update:pagination="updatePagination"
       >
+        <template v-slot:pagination="scope">
+          ทั้งหมด {{ total }} รายการ
+          <q-pagination
+            v-model="currentPage"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            size="sm"
+            boundary-links
+            direction-links
+          ></q-pagination>
+        </template>
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th auto-width></q-th>
-            <q-th
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              style="color: #000000; font-weight: 500"
-            >
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
             <q-th auto-width></q-th>
@@ -162,6 +183,14 @@ onMounted(async () => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'no'">
+                {{ (page - 1) * rowsPerPage + props.rowIndex + 1 }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
             <q-td auto-width>
               <q-icon
                 v-if="props.row.isDefault === true"