From 93c4fb91395794bb3794a68c3213070e8997de2d Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 3 Apr 2024 16:26:02 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20paging?=
 =?UTF-8?q?=20=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4=20=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B8=95=E0=B8=B3?=
 =?UTF-8?q?=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87=E0=B8=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4=E0=B9=83=E0=B8=AB=E0=B8=A1=E0=B9=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_registry/components/TableProfile.vue   | 23 ++++++-----
 .../04_registryNew/components/TableView.vue   | 39 ++++++++-----------
 src/modules/04_registryNew/views/list.vue     |  3 ++
 3 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/src/modules/04_registry/components/TableProfile.vue b/src/modules/04_registry/components/TableProfile.vue
index 3b689d0b8..89485a106 100644
--- a/src/modules/04_registry/components/TableProfile.vue
+++ b/src/modules/04_registry/components/TableProfile.vue
@@ -14,8 +14,8 @@
     :pagination-label="paginationLabel"
     v-model:pagination="pagination"
   >
-  <template v-slot:pagination="scope">
-    ทั้งหมด {{ props.total }} รายการ
+    <template v-slot:pagination="scope">
+      ทั้งหมด {{ props.total }} รายการ
       <q-pagination
         v-model="currentPage"
         active-color="primary"
@@ -24,7 +24,8 @@
         size="sm"
         boundary-links
         direction-links
-        ></q-pagination>
+        :max-pages="5"
+      ></q-pagination>
     </template>
 
     <template v-slot:top="props">
@@ -450,7 +451,7 @@
   <PopupADdEmployee v-model:modal="modalEmployee" />
 </template>
 <script setup lang="ts">
-import { ref, useAttrs, reactive,watch } from "vue";
+import { ref, useAttrs, reactive, watch } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 import type { DataOption } from "@/modules/04_registry/components/profileType";
 import PopupHistory from "./PopupHistory.vue";
@@ -461,7 +462,6 @@ const maxPage = ref<number>(1);
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(50);
 
-
 const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
@@ -470,7 +470,7 @@ const searchPanel = ref<boolean>(true);
 /**
  *pagination ของตาราง
  */
- const pagination = ref({
+const pagination = ref({
   descending: false,
   page: page.value,
   rowsPerPage: rowsPerPage.value,
@@ -681,11 +681,14 @@ watch(
   }
 );
 
-watch(()=>props.page,()=>{
-  if(props.page){
-    currentPage.value = props.page
+watch(
+  () => props.page,
+  () => {
+    if (props.page) {
+      currentPage.value = props.page;
+    }
   }
-})
+);
 </script>
 <style lang="scss">
 .icon-color {
diff --git a/src/modules/04_registryNew/components/TableView.vue b/src/modules/04_registryNew/components/TableView.vue
index e2383e665..e362344f2 100644
--- a/src/modules/04_registryNew/components/TableView.vue
+++ b/src/modules/04_registryNew/components/TableView.vue
@@ -22,6 +22,7 @@ const props = defineProps({
   rows: { type: Array },
   fetchData: { type: Function },
   fetchType: { type: Function },
+  total: { type: Number },
 });
 
 const columns = ref<QTableProps["columns"]>([
@@ -74,7 +75,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "สายงาน",
     sortable: true,
-    field: (v) => (v.posType ? v.posType.posTypeName : "-"),
+    field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -85,7 +86,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ระดับตำแหน่ง",
     sortable: true,
-    field: (v) => (v.posLevel ? v.posLevel.posLevelName : "-"),
+    field: "posLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -282,12 +283,8 @@ watch(
       </q-tr>
     </template>
     <template v-slot:body="props" v-if="store.mode === 'table'">
-      <q-tr :props="props" class="cursor-pointer">
-        <q-td
-          v-for="col in props.cols"
-          :key="col.id"
-          @click="onClickViewDetail(props.row.id)"
-        >
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.id">
           <div v-if="col.name === 'no'">
             {{
               (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
@@ -311,7 +308,11 @@ watch(
                   </q-avatar>
                 </q-item-section>
                 <q-item-section>
-                  <div class="text-weight-medium">
+                  <div
+                    class="text-weight-medium text-primary cursor-pointer"
+                    @click="onClickViewDetail(props.row.id)"
+                  >
+                    <q-tooltip>ดูทะเบียนประวัติ</q-tooltip>
                     {{
                       `${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
                     }}
@@ -329,18 +330,13 @@ watch(
     </template>
     <template v-slot:item="props" v-else>
       <div class="col-xs-12 col-sm-4 col-md-3">
-        <q-card
-          flat
-          bordered
-          class="cardRO"
-          @click="onClickViewDetail(props.row.id)"
-        >
+        <q-card flat bordered class="">
           <q-card-section class="text-center q-pb-none">
             <q-avatar size="80px">
               <img src="@/assets/avatar_user.jpg" />
             </q-avatar>
 
-            <div class="text-weight-medium q-mt-md textName">
+            <div class="text-weight-medium q-mt-md">
               {{
                 `${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
               }}
@@ -384,7 +380,7 @@ watch(
                   <q-item-section>
                     <q-item-label caption class="text-black">
                       {{
-                        props.row.posType ? props.row.posType.posTypeName : "-"
+                        props.row.posType ? props.row.posType : "-"
                       }}</q-item-label
                     >
                   </q-item-section>
@@ -397,9 +393,7 @@ watch(
                   <q-item-section>
                     <q-item-label caption class="text-black">
                       {{
-                        props.row.posLevel
-                          ? props.row.posLevel.posLevelName
-                          : "-"
+                        props.row.posLevel ? props.row.posLevel : "-"
                       }}</q-item-label
                     >
                   </q-item-section>
@@ -407,18 +401,19 @@ watch(
               </q-list>
             </q-card>
           </q-card-section>
-          <!-- <q-separator inset />
+          <q-separator inset />
           <q-btn
             flat
             color="black"
             label="ดูเพิ่มเติม"
             class="hover-button full-width q-pa-md"
             @click="onClickViewDetail(props.row.id)"
-          /> -->
+          />
         </q-card>
       </div>
     </template>
     <template v-slot:pagination="scope">
+      ทั้งหมด {{ props.total }} รายการ
       <q-pagination
         v-model="formFilter.page"
         active-color="primary"
diff --git a/src/modules/04_registryNew/views/list.vue b/src/modules/04_registryNew/views/list.vue
index b155cd921..02ba0a9f3 100644
--- a/src/modules/04_registryNew/views/list.vue
+++ b/src/modules/04_registryNew/views/list.vue
@@ -109,6 +109,7 @@ function fetchYearOption() {
   }
 }
 
+const total = ref<number>(0);
 async function fetchDataPerson(search: boolean = false) {
   showLoader();
 
@@ -150,6 +151,7 @@ async function fetchDataPerson(search: boolean = false) {
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       dataPersonMain.value = res.data.result.data;
+      total.value = res.data.result.total;
     })
     .catch((err) => {
       messageError($q, err);
@@ -603,6 +605,7 @@ onMounted(async () => {
         v-model:maxPage="maxPage"
         :fetchData="fetchDataPerson"
         :fetchType="fetchType"
+        :total="total"
       />
     </q-card-section>
   </q-card>