From 73034070f3e5fd042d23dd9a7320824d9c29c901 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Wed, 7 Jun 2023 17:03:45 +0700
Subject: [PATCH] =?UTF-8?q?=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20pagination?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../03_recruiting/views/01_compete/Detail.vue | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/modules/03_recruiting/views/01_compete/Detail.vue b/src/modules/03_recruiting/views/01_compete/Detail.vue
index 2dfbdf764..ce598de3f 100644
--- a/src/modules/03_recruiting/views/01_compete/Detail.vue
+++ b/src/modules/03_recruiting/views/01_compete/Detail.vue
@@ -18,7 +18,9 @@
       <q-menu>
         <q-list style="min-width: 100px">
           <q-item clickable v-close-popup @click="downloadExam()">
-            <q-item-section class="text-blue">ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section>
+            <q-item-section class="text-blue"
+              >ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section
+            >
           </q-item>
           <q-item clickable v-close-popup @click="downloadPassExam()">
             <q-item-section class="text-primary"
@@ -99,12 +101,23 @@
           </q-tr>
         </template>
       </Table>
+      <div class="row justify-center q-mt-md">
+        <q-pagination
+          v-model="pagination.page"
+          color="grey-8"
+          :max="pagesNumber"
+          :max-pages="5"
+          size="sm"
+          boundary-links
+          direction-links
+        ></q-pagination>
+      </div>
     </div>
   </q-card>
 </template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
 import Table from "@/modules/03_recruiting/components/Table.vue";
@@ -312,6 +325,16 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const pagesNumber = computed(() => {
+  return Math.ceil(rows.value.length / pagination.value.rowsPerPage);
+});
+
 onMounted(async () => {
   loaderPage(false);
   await fetchData();