fix: แก้ layout ของ แบ่งหน้า

src/pages/03_customer-management/MainPage.vue

@@ -30,6 +30,7 @@ import InfoForm from 'src/components/02_personnel-management/InfoForm.vue';
 import CustomerInfoComponent from 'src/components/03_customer-management/CustomerInfoComponent.vue';
 import NoData from 'components/NoData.vue';
 import HistoryEditComponent from 'src/components/03_customer-management/HistoryEditComponent.vue';
+import PaginationComponent from 'src/components/PaginationComponent.vue';
 
 import {
   CustomerCreate,
@@ -245,11 +246,10 @@ const branch = ref<CustomerBranch[]>();
 
 const currentPageCustomer = ref<number>(1);
 const maxPageCustomer = ref<number>(1);
-const pageSizeCustomer = ref<number>(30);
+const pageSize = ref<number>(10);
 
 const currentPageEmployee = ref<number>(1);
 const maxPageEmployee = ref<number>(1);
-const pageSizeEmployee = ref<number>(30);
 
 const currentBranchId = ref<string>('');
 const currentCustomerName = ref<string>('');
@@ -683,7 +683,7 @@ async function fetchListCustomer() {
   const resultList = await fetchList({
     includeBranch: true,
     page: currentPageCustomer.value,
-    pageSize: pageSizeCustomer.value,
+    pageSize: pageSize.value,
     status:
       currentStatus.value === 'All'
         ? undefined
@@ -695,9 +695,7 @@ async function fetchListCustomer() {
 
   if (resultList) {
     currentPageCustomer.value = resultList.page;
-    maxPageCustomer.value = Math.ceil(
-      resultList.total / pageSizeCustomer.value,
-    );
+    maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
 
     listCustomer.value = resultList.result;
   }
@@ -705,8 +703,8 @@ async function fetchListCustomer() {
 
 async function fetchListEmployee() {
   const resultListEmployee = await employeeStore.fetchList({
-    page: currentPageCustomer.value,
-    pageSize: pageSizeCustomer.value,
+    page: currentPageEmployee.value,
+    pageSize: pageSize.value,
     status:
       currentStatus.value === 'All'
         ? undefined
@@ -718,7 +716,7 @@ async function fetchListEmployee() {
   });
   if (resultListEmployee) {
     maxPageEmployee.value = Math.ceil(
-      resultListEmployee.total / pageSizeEmployee.value,
+      resultListEmployee.total / pageSize.value,
     );
     listEmployee.value = resultListEmployee.result;
   }
@@ -752,7 +750,7 @@ async function onSubmitEdit(id: string) {
       personName: formData.value.personName,
     };
 
-    if(tempValue.status === 'CREATED') delete tempValue['status']
+    if (tempValue.status === 'CREATED') delete tempValue['status'];
 
     await editById(id, tempValue);
     infoDrawer.value = false;
@@ -1088,7 +1086,7 @@ onMounted(async () => {
   const resultList = await fetchList({
     includeBranch: true,
     page: 1,
-    pageSize: pageSizeCustomer.value,
+    pageSize: pageSize.value,
   });
 
   if (resultStats) {
@@ -1107,9 +1105,7 @@ onMounted(async () => {
 
   if (resultList) {
     currentPageCustomer.value = resultList.page;
-    maxPageCustomer.value = Math.ceil(
-      resultList.total / pageSizeCustomer.value,
-    );
+    maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
     listCustomer.value = resultList.result;
   }
 
@@ -1123,12 +1119,12 @@ onMounted(async () => {
 
   const resultListEmployee = await employeeStore.fetchList({
     page: 1,
-    pageSize: pageSizeEmployee.value,
+    pageSize: pageSize.value,
   });
 
   if (resultListEmployee) {
     maxPageEmployee.value = Math.ceil(
-      resultListEmployee.total / pageSizeEmployee.value,
+      resultListEmployee.total / pageSize.value,
     );
     listEmployee.value = resultListEmployee.result;
   }
@@ -1142,14 +1138,6 @@ watch(locale, () => {
   };
 });
 
-watch(currentPageCustomer, async () => {
-  await fetchListCustomer();
-});
-
-watch(currentPageEmployee, async () => {
-  await fetchListEmployee();
-});
-
 watch(fieldSelectedCustomer, async () => {
   let resultList;
 
@@ -1549,14 +1537,22 @@ watch([inputSearch, currentStatus], async () => {
             />
           </div>
 
-          <div v-if="listCustomer.length !== 0" class="row flex-center q-pt-md">
-            <q-pagination
-              claess="pagination"
-              v-model="currentPageCustomer"
-              :max="maxPageCustomer"
-              direction-links
-              active-color="primary"
-              gutter="sm"
+          <div
+            v-if="listCustomer.length !== 0"
+            class="row justify-between q-pt-md"
+          >
+            <div class="app-text-muted">
+              {{
+                $t('recordsPage', {
+                  resultcurrentPage: listCustomer.length,
+                  total: statsCustomerType.PERS + statsCustomerType.CORP,
+                })
+              }}
+            </div>
+            <PaginationComponent
+              v-model:current-page="currentPageCustomer"
+              v-model:max-page="maxPageCustomer"
+              :fetch-data="async () => await fetchListCustomer()"
             />
           </div>
         </template>
@@ -1608,14 +1604,19 @@ watch([inputSearch, currentStatus], async () => {
               @toggle-status="(id, status) => toggleStatusEmployee(id, status)"
             />
 
-            <div class="row flex-center q-pt-md">
-              <q-pagination
-                claess="pagination"
-                v-model="currentPageEmployee"
-                :max="maxPageEmployee"
-                direction-links
-                active-color="primary"
-                gutter="sm"
+            <div class="row justify-between q-pt-md">
+              <div class="app-text-muted">
+                {{
+                  $t('recordsPage', {
+                    resultcurrentPage: listEmployee.length,
+                    total: statsEmployee,
+                  })
+                }}
+              </div>
+              <PaginationComponent
+                v-model:current-page="currentPageEmployee"
+                v-model:max-page="maxPageEmployee"
+                :fetch-data="async () => await fetchListEmployee()"
               />
             </div>
           </div>