feat: แบ่งหน้า สินค้า และ บริการ

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

@@ -207,6 +207,15 @@ const pageSizeGroup = ref<number>(30);
 const currentPageType = ref<number>(1);
 const maxPageType = ref<number>(1);
 const pageSizeType = ref<number>(30);
+const currentPageServiceAndProduct = ref<number>(1);
+const maxPageServiceAndProduct = ref<number>(1);
+const pageSizeServiceAndProduct = ref<number>(30);
+const currentPageProduct = ref<number>(1);
+const maxPageProduct = ref<number>(1);
+const pageSizeProduct = ref<number>(30);
+const currentPageService = ref<number>(1);
+const maxPageService = ref<number>(1);
+const pageSizeService = ref<number>(30);
 
 // เก็บ id ที่เข้ามา
 const currentId = ref<string>('');
@@ -350,6 +359,8 @@ async function fetchListGroups() {
 
 async function fetchListOfProduct(productTypeId: string) {
   const res = await fetchListProduct({
+    page: currentPageProduct.value,
+    pageSize: pageSizeProduct.value,
     status:
       currentStatus.value === 'INACTIVE'
         ? 'INACTIVE'
@@ -360,6 +371,9 @@ async function fetchListOfProduct(productTypeId: string) {
   });
 
   if (res) {
+    currentPageProduct.value = res.page;
+    maxPageProduct.value = Math.ceil(res.total / pageSizeProduct.value);
+
     product.value = res.result.map((v) => {
       return {
         ...v,
@@ -371,6 +385,8 @@ async function fetchListOfProduct(productTypeId: string) {
 
 async function fetchListOfService() {
   const res = await fetchListService({
+    page: currentPageService.value,
+    pageSize: pageSizeService.value,
     status:
       currentStatus.value === 'INACTIVE'
         ? 'INACTIVE'
@@ -381,6 +397,8 @@ async function fetchListOfService() {
   });
 
   if (res) {
+    currentPageService.value = res.page;
+    maxPageService.value = Math.ceil(res.total / pageSizeService.value);
     service.value = res.result.map((v) => {
       return {
         ...v,
@@ -469,6 +487,8 @@ async function toggleStatusGroup(id: string, status: Status) {
 
 async function fetchListOfProductAndService() {
   const res = await fetchListProductAndService({
+    page: currentPageServiceAndProduct.value,
+    pageSize: pageSizeServiceAndProduct.value,
     status:
       currentStatus.value === 'INACTIVE'
         ? 'INACTIVE'
@@ -482,6 +502,11 @@ async function fetchListOfProductAndService() {
     if (currentStatus.value === 'All') {
       totalProductAndService.value = res.total;
     }
+
+    currentPageServiceAndProduct.value = res.page;
+    maxPageServiceAndProduct.value = Math.ceil(
+      res.total / pageSizeServiceAndProduct.value,
+    );
     productAndService.value = res.result;
   }
 }
@@ -910,6 +935,18 @@ watch(currentPageGroup, async () => {
 watch(currentPageType, async () => {
   await fetchListType();
 });
+
+watch(currentPageServiceAndProduct, async () => {
+  await fetchListOfProductAndService();
+});
+
+watch(currentPageProduct, async () => {
+  await fetchListOfProduct(currentIdType.value);
+});
+
+watch(currentPageService, async () => {
+  await fetchListOfService();
+});
 </script>
 
 <template>
@@ -1277,7 +1314,10 @@ watch(currentPageType, async () => {
           <NoData />
         </div>
 
-        <div v-if="productMode === 'group'" class="flex justify-center q-pt-xl">
+        <div
+          v-if="productMode === 'group' && !inputSearch"
+          class="flex justify-center q-pt-xl"
+        >
           <q-pagination
             claess="pagination"
             v-model="currentPageGroup"
@@ -1288,7 +1328,10 @@ watch(currentPageType, async () => {
           />
         </div>
 
-        <div v-if="productMode === 'type'" class="flex justify-center q-pt-xl">
+        <div
+          v-if="productMode === 'type' && !inputSearch"
+          class="flex justify-center q-pt-xl"
+        >
           <q-pagination
             claess="pagination"
             v-model="currentPageType"
@@ -1546,6 +1589,51 @@ watch(currentPageType, async () => {
             />
           </div>
         </div>
+        <div
+          v-if="productAndServiceTab === 'all' && !inputSearchProductAndService"
+          class="row justify-center q-pb-md"
+        >
+          <q-pagination
+            claess="pagination"
+            v-model="currentPageServiceAndProduct"
+            :max="maxPageServiceAndProduct"
+            direction-links
+            active-color="primary"
+            gutter="sm"
+          />
+        </div>
+
+        <div
+          v-if="
+            productAndServiceTab === 'product' && !inputSearchProductAndService
+          "
+          class="row justify-center q-pb-md"
+        >
+          <q-pagination
+            claess="pagination"
+            v-model="currentPageProduct"
+            :max="maxPageProduct"
+            direction-links
+            active-color="primary"
+            gutter="sm"
+          />
+        </div>
+
+        <div
+          v-if="
+            productAndServiceTab === 'service' && !inputSearchProductAndService
+          "
+          class="row justify-center q-pb-md"
+        >
+          <q-pagination
+            claess="pagination"
+            v-model="currentPageService"
+            :max="maxPageService"
+            direction-links
+            active-color="primary"
+            gutter="sm"
+          />
+        </div>
       </AppBox>
     </div>
   </div>