feat: แบ่งหน้าของ กลุ่ม และ ประเภท

src/pages/04_product-service/MainPage.vue

@@ -190,32 +190,35 @@ const serviceTab = [
 
 const workItems = ref<WorkItems[]>([]);
 const workNameRef = ref();
+const selectProduct = ref<ProductList[]>([]);
+const currentWorkIndex = ref<number>(0);
 
 const currentServiceTab = ref('serviceInformation');
 const propertiesDialog = ref<boolean>(false);
 
-const selectProduct = ref<ProductList[]>([]);
-
-const currentWorkIndex = ref<number>(0);
-
 const totalProduct = ref<number>(0);
 const totalService = ref<number>(0);
 const totalProductAndService = ref<number>(0);
 
-const currentPage = ref<number>(1);
+// แบ่งหน้า
-const maxPage = ref<number>(1);
+const currentPageGroup = ref<number>(1);
-const pageSize = ref<number>(30);
+const maxPageGroup = ref<number>(1);
+const pageSizeGroup = ref<number>(2);
+const currentPageType = ref<number>(1);
+const maxPageType = ref<number>(1);
+const pageSizeType = ref<number>(2);
 
+// เก็บ id ที่เข้ามา
 const currentId = ref<string>('');
 const currentIdType = ref<string>('');
 const currentIdService = ref<string>('');
 const currentIdProduct = ref<string>('');
 
+const currentStatus = ref<Status | 'All'>('All');
+
 const resultSearchGroup = ref<ProductGroup[]>();
 const resultSearchType = ref<(ProductGroup & { productGroupId: string })[]>();
 
-const currentStatus = ref<Status | 'All'>('All');
-
 const inputFile = (() => {
   const element = document.createElement('input');
   element.type = 'file';
@@ -308,6 +311,8 @@ async function featchStatsProduct() {
 
 async function fetchListType() {
   const res = await fetchListProductServiceType({
+    page: currentPageType.value,
+    pageSize: pageSizeType.value,
     productGroupId: currentId.value,
     status:
       currentStatus.value === 'All'
@@ -318,12 +323,16 @@ async function fetchListType() {
   });
 
   if (res) {
+    currentPageType.value = res.page;
+    maxPageType.value = Math.ceil(res.total / pageSizeType.value);
     productType.value = res.result;
   }
 }
 
 async function fetchListGroups() {
   const res = await fetchListProductService({
+    page: currentPageGroup.value,
+    pageSize: pageSizeGroup.value,
     status:
       currentStatus.value === 'All'
         ? undefined
@@ -333,6 +342,8 @@ async function fetchListGroups() {
   });
 
   if (res) {
+    currentPageGroup.value = res.page;
+    maxPageGroup.value = Math.ceil(res.total / pageSizeGroup.value);
     productGroup.value = res.result;
   }
 }
@@ -891,6 +902,14 @@ watch(currentStatus, async () => {
     await fetchListType();
   }
 });
+
+watch(currentPageGroup, async () => {
+  await fetchListGroups();
+});
+
+watch(currentPageType, async () => {
+  await fetchListType();
+});
 </script>
 
 <template>
@@ -1254,16 +1273,27 @@ watch(currentStatus, async () => {
           <NoData />
         </div>
 
-        <!-- <div class="flex justify-center">
+        <div v-if="productMode === 'group'" class="flex justify-center q-pt-xl">
           <q-pagination
             claess="pagination"
-            v-model="currentPage"
+            v-model="currentPageGroup"
-            :max="maxPage"
+            :max="maxPageGroup"
             direction-links
             active-color="primary"
             gutter="sm"
           />
-        </div> -->
+        </div>
+
+        <div v-if="productMode === 'type'" class="flex justify-center q-pt-xl">
+          <q-pagination
+            claess="pagination"
+            v-model="currentPageType"
+            :max="maxPageType"
+            direction-links
+            active-color="primary"
+            gutter="sm"
+          />
+        </div>
       </AppBox>
       <AppBox bordered v-else-if="productMode === 'service'" no-padding>
         <div class="row justify-between q-px-md">

src/stores/product-service/index.ts

@@ -55,6 +55,8 @@ const useProductServiceStore = defineStore('api-product-service', () => {
 
   async function fetchListProductServiceType(
     opts?: {
+      page?: number;
+      pageSize?: number;
       query?: string;
       productGroupId?: string;
       status?: 'CREATED' | 'ACTIVE' | 'INACTIVE';
@@ -171,7 +173,12 @@ const useProductServiceStore = defineStore('api-product-service', () => {
   }
 
   async function fetchListProductService(
-    opts?: { query?: string; status?: 'CREATED' | 'ACTIVE' | 'INACTIVE' },
+    opts?: {
+      page?: number;
+      pageSize?: number;
+      query?: string;
+      status?: 'CREATED' | 'ACTIVE' | 'INACTIVE';
+    },
     flow?: {
       sessionId?: string;
       refTransactionId?: string;