From 5c5e9fac635f09600f64d7dd4c0b7cbcbf8710c8 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 28 Jan 2025 18:07:57 +0700
Subject: [PATCH] refactor: update screen.sm pagination display for various
 management pages

---
 src/i18n/eng.ts                               |  1 +
 src/i18n/tha.ts                               |  1 +
 .../02_personnel-management/MainPage.vue      | 13 ++++---
 .../03_customer-management/BranchPage.vue     | 13 ++++---
 src/pages/03_customer-management/MainPage.vue | 28 ++++++++++-----
 src/pages/04_flow-managment/MainPage.vue      | 19 ++++++----
 src/pages/04_product-service/MainPage.vue     | 35 +++++++++++++------
 src/pages/05_quotation/MainPage.vue           | 19 ++++++----
 src/pages/07_agencies-management/MainPage.vue | 17 ++++++---
 src/pages/08_request-list/MainPage.vue        | 17 ++++++---
 src/pages/09_task-order/MainPage.vue          | 19 ++++++----
 src/pages/10_invoice/MainPage.vue             | 17 ++++++---
 src/pages/11_credit-note/MainPage.vue         | 17 ++++++---
 src/pages/12_debit-note/MainPage.vue          | 17 ++++++---
 src/pages/13_receipt/MainPage.vue             | 17 ++++++---
 15 files changed, 181 insertions(+), 69 deletions(-)

diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 6c6c0ea1..ad494148 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -144,6 +144,7 @@ export default {
     quotationLabor: 'Used to display the list of employees',
     quotationPayment: 'Used to display payment details',
     orderDetail: 'To display the list of employees in that product',
+    ofPage: '{current} of {total}',
   },
 
   menu: {
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index fbc30320..7f5929bf 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -146,6 +146,7 @@ export default {
     quotationLabor: 'ใช้แสดงรายชื่อลูกจ้าง',
     quotationPayment: 'ใช้แสดงรายละเอียดในการชำระเงิน',
     orderDetail: 'เพื่อแสดงรายชื่อลูกจ้างในสินค้านั้นๆ',
+    ofPage: '{current} จาก {total}',
   },
 
   menu: {
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index c2b8d2c6..66d90986 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1427,10 +1427,15 @@ watch(
 
         <div class="col-4 row justify-center app-text-muted">
           {{
-            $t('general.recordsPage', {
-              resultcurrentPage: userData?.result.length,
-              total: userData?.total,
-            })
+            $q.screen.gt.sm
+              ? $t('general.recordsPage', {
+                  resultcurrentPage: userData?.result.length,
+                  total: userData?.total,
+                })
+              : $t('general.ofPage', {
+                  current: userData?.result.length,
+                  total: userData?.total,
+                })
           }}
         </div>
         <div class="col-4 row justify-end">
diff --git a/src/pages/03_customer-management/BranchPage.vue b/src/pages/03_customer-management/BranchPage.vue
index d7b0e2d0..bf1b8fd7 100644
--- a/src/pages/03_customer-management/BranchPage.vue
+++ b/src/pages/03_customer-management/BranchPage.vue
@@ -698,10 +698,15 @@ watch(
 
     <div class="col-4 flex justify-center app-text-muted">
       {{
-        $t('general.recordsPage', {
-          resultcurrentPage: branch?.length,
-          total: totalBranch,
-        })
+        $q.screen.gt.sm
+          ? $t('general.recordsPage', {
+              resultcurrentPage: branch?.length,
+              total: totalBranch,
+            })
+          : $t('general.ofPage', {
+              current: branch?.length,
+              total: totalBranch,
+            })
       }}
     </div>
     <div class="col-4 flex justify-end">
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 4a1dea6e..54f1c77f 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1749,10 +1749,17 @@ const emptyCreateDialog = ref(false);
 
                   <div class="col-4 flex justify-center app-text-muted">
                     {{
-                      $t('general.recordsPage', {
-                        resultcurrentPage: listCustomer.length,
-                        total: statsCustomerType.PERS + statsCustomerType.CORP,
-                      })
+                      $q.screen.gt.sm
+                        ? $t('general.recordsPage', {
+                            resultcurrentPage: listCustomer.length,
+                            total:
+                              statsCustomerType.PERS + statsCustomerType.CORP,
+                          })
+                        : $t('general.ofPage', {
+                            current: listCustomer.length,
+                            total:
+                              statsCustomerType.PERS + statsCustomerType.CORP,
+                          })
                     }}
                   </div>
 
@@ -1844,10 +1851,15 @@ const emptyCreateDialog = ref(false);
 
                   <div class="col-4 flex justify-center app-text-muted">
                     {{
-                      $t('general.recordsPage', {
-                        resultcurrentPage: listEmployee.length,
-                        total: employeeStats,
-                      })
+                      $q.screen.gt.sm
+                        ? $t('general.recordsPage', {
+                            resultcurrentPage: listEmployee.length,
+                            total: employeeStats,
+                          })
+                        : $t('general.ofPage', {
+                            current: listEmployee.length,
+                            total: employeeStats,
+                          })
                     }}
                   </div>
 
diff --git a/src/pages/04_flow-managment/MainPage.vue b/src/pages/04_flow-managment/MainPage.vue
index a03c3be7..5e0a8042 100644
--- a/src/pages/04_flow-managment/MainPage.vue
+++ b/src/pages/04_flow-managment/MainPage.vue
@@ -720,12 +720,19 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
           </div>
           <div class="col-4 row justify-center app-text-muted">
             {{
-              $t('general.recordsPage', {
-                resultcurrentPage: workflowData.length,
-                total: pageState.inputSearch
-                  ? workflowData.length
-                  : pageState.total,
-              })
+              $q.screen.gt.sm
+                ? $t('general.recordsPage', {
+                    resultcurrentPage: workflowData.length,
+                    total: pageState.inputSearch
+                      ? workflowData.length
+                      : pageState.total,
+                  })
+                : $t('general.ofPage', {
+                    current: workflowData.length,
+                    total: pageState.inputSearch
+                      ? workflowData.length
+                      : pageState.total,
+                  })
             }}
           </div>
           <nav class="col-4 row justify-end">
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 14668378..8dfe53ee 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -2482,10 +2482,15 @@ watch(
 
                   <div class="col-4 row justify-center app-text-muted">
                     {{
-                      $t('general.recordsPage', {
-                        resultcurrentPage: productGroup?.length,
-                        total: totalGroup,
-                      })
+                      $q.screen.gt.sm
+                        ? $t('general.recordsPage', {
+                            resultcurrentPage: productGroup?.length,
+                            total: totalGroup,
+                          })
+                        : $t('general.ofPage', {
+                            current: productGroup?.length,
+                            total: totalGroup,
+                          })
                     }}
                   </div>
 
@@ -3186,13 +3191,21 @@ watch(
 
                 <div class="col-4 row justify-center app-text-muted">
                   {{
-                    $t('general.recordsPage', {
-                      resultcurrentPage:
-                        productAndServiceTab === 'product'
-                          ? product?.length
-                          : service?.length,
-                      total: total,
-                    })
+                    $q.screen.gt.sm
+                      ? $t('general.recordsPage', {
+                          resultcurrentPage:
+                            productAndServiceTab === 'product'
+                              ? product?.length
+                              : service?.length,
+                          total: total,
+                        })
+                      : $t('general.ofPage', {
+                          current:
+                            productAndServiceTab === 'product'
+                              ? product?.length
+                              : service?.length,
+                          total: total,
+                        })
                   }}
                 </div>
                 <div class="col-4 row justify-end">
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 5a79c079..82a07861 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -736,12 +736,19 @@ async function storeDataLocal(id: string) {
           </div>
           <div class="col-4 row justify-center app-text-muted">
             {{
-              $t('general.recordsPage', {
-                resultcurrentPage: quotationData.length,
-                total: pageState.inputSearch
-                  ? quotationData.length
-                  : pageState.total,
-              })
+              $q.screen.gt.sm
+                ? $t('general.recordsPage', {
+                    resultcurrentPage: quotationData.length,
+                    total: pageState.inputSearch
+                      ? quotationData.length
+                      : pageState.total,
+                  })
+                : $t('general.ofPage', {
+                    current: quotationData.length,
+                    total: pageState.inputSearch
+                      ? quotationData.length
+                      : pageState.total,
+                  })
             }}
           </div>
           <nav class="col-4 row justify-end">
diff --git a/src/pages/07_agencies-management/MainPage.vue b/src/pages/07_agencies-management/MainPage.vue
index c0c8162d..7e1dcf5b 100644
--- a/src/pages/07_agencies-management/MainPage.vue
+++ b/src/pages/07_agencies-management/MainPage.vue
@@ -756,10 +756,19 @@ watch(
           </div>
           <div class="col-4 row justify-center app-text-muted">
             {{
-              $t('general.recordsPage', {
-                resultcurrentPage: data.length,
-                total: pageState.inputSearch ? data.length : pageState.total,
-              })
+              $q.screen.gt.sm
+                ? $t('general.recordsPage', {
+                    resultcurrentPage: data.length,
+                    total: pageState.inputSearch
+                      ? data.length
+                      : pageState.total,
+                  })
+                : $t('general.ofPage', {
+                    current: data.length,
+                    total: pageState.inputSearch
+                      ? data.length
+                      : pageState.total,
+                  })
             }}
           </div>
           <nav class="col-4 row justify-end">
diff --git a/src/pages/08_request-list/MainPage.vue b/src/pages/08_request-list/MainPage.vue
index 2ed62040..9097c43d 100644
--- a/src/pages/08_request-list/MainPage.vue
+++ b/src/pages/08_request-list/MainPage.vue
@@ -357,10 +357,19 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () =>
           </div>
           <div class="col-4 row justify-center app-text-muted">
             {{
-              $t('general.recordsPage', {
-                resultcurrentPage: data.length,
-                total: pageState.inputSearch ? data.length : pageState.total,
-              })
+              $q.screen.gt.sm
+                ? $t('general.recordsPage', {
+                    resultcurrentPage: data.length,
+                    total: pageState.inputSearch
+                      ? data.length
+                      : pageState.total,
+                  })
+                : $t('general.ofPage', {
+                    current: data.length,
+                    total: pageState.inputSearch
+                      ? data.length
+                      : pageState.total,
+                  })
             }}
           </div>
           <nav class="col-4 row justify-end">
diff --git a/src/pages/09_task-order/MainPage.vue b/src/pages/09_task-order/MainPage.vue
index 366a9fc6..ebfb54f7 100644
--- a/src/pages/09_task-order/MainPage.vue
+++ b/src/pages/09_task-order/MainPage.vue
@@ -484,12 +484,19 @@ watch(
           </div>
           <div class="col-4 row justify-center app-text-muted">
             {{
-              $t('general.recordsPage', {
-                resultcurrentPage: taskOrderList.length,
-                total: pageState.inputSearch
-                  ? taskOrderList.length
-                  : pageState.total,
-              })
+              $q.screen.gt.sm
+                ? $t('general.recordsPage', {
+                    resultcurrentPage: taskOrderList.length,
+                    total: pageState.inputSearch
+                      ? taskOrderList.length
+                      : pageState.total,
+                  })
+                : $t('general.ofPage', {
+                    current: taskOrderList.length,
+                    total: pageState.inputSearch
+                      ? taskOrderList.length
+                      : pageState.total,
+                  })
             }}
           </div>
           <nav class="col-4 row justify-end">
diff --git a/src/pages/10_invoice/MainPage.vue b/src/pages/10_invoice/MainPage.vue
index bcf27bf7..165bf911 100644
--- a/src/pages/10_invoice/MainPage.vue
+++ b/src/pages/10_invoice/MainPage.vue
@@ -413,10 +413,19 @@ watch(
           </div>
           <div class="col-4 row justify-center app-text-muted">
             {{
-              $t('general.recordsPage', {
-                resultcurrentPage: data.length,
-                total: pageState.inputSearch ? data.length : pageState.total,
-              })
+              $q.screen.gt.sm
+                ? $t('general.recordsPage', {
+                    resultcurrentPage: data.length,
+                    total: pageState.inputSearch
+                      ? data.length
+                      : pageState.total,
+                  })
+                : $t('general.ofPage', {
+                    current: data.length,
+                    total: pageState.inputSearch
+                      ? data.length
+                      : pageState.total,
+                  })
             }}
           </div>
           <nav class="col-4 row justify-end">
diff --git a/src/pages/11_credit-note/MainPage.vue b/src/pages/11_credit-note/MainPage.vue
index aa5fcb93..ee12ef7b 100644
--- a/src/pages/11_credit-note/MainPage.vue
+++ b/src/pages/11_credit-note/MainPage.vue
@@ -412,10 +412,19 @@ watch(
           </div>
           <div class="col-4 row justify-center app-text-muted">
             {{
-              $t('general.recordsPage', {
-                resultcurrentPage: data.length,
-                total: pageState.inputSearch ? data.length : pageState.total,
-              })
+              $q.screen.gt.sm
+                ? $t('general.recordsPage', {
+                    resultcurrentPage: data.length,
+                    total: pageState.inputSearch
+                      ? data.length
+                      : pageState.total,
+                  })
+                : $t('general.ofPage', {
+                    current: data.length,
+                    total: pageState.inputSearch
+                      ? data.length
+                      : pageState.total,
+                  })
             }}
           </div>
           <nav class="col-4 row justify-end">
diff --git a/src/pages/12_debit-note/MainPage.vue b/src/pages/12_debit-note/MainPage.vue
index 16c58b1e..42c7fca3 100644
--- a/src/pages/12_debit-note/MainPage.vue
+++ b/src/pages/12_debit-note/MainPage.vue
@@ -439,10 +439,19 @@ watch(
           </div>
           <div class="col-4 row justify-center app-text-muted">
             {{
-              $t('general.recordsPage', {
-                resultcurrentPage: data.length,
-                total: pageState.inputSearch ? data.length : pageState.total,
-              })
+              $q.screen.gt.sm
+                ? $t('general.recordsPage', {
+                    resultcurrentPage: data.length,
+                    total: pageState.inputSearch
+                      ? data.length
+                      : pageState.total,
+                  })
+                : $t('general.ofPage', {
+                    current: data.length,
+                    total: pageState.inputSearch
+                      ? data.length
+                      : pageState.total,
+                  })
             }}
           </div>
           <nav class="col-4 row justify-end">
diff --git a/src/pages/13_receipt/MainPage.vue b/src/pages/13_receipt/MainPage.vue
index 569a886b..742a1394 100644
--- a/src/pages/13_receipt/MainPage.vue
+++ b/src/pages/13_receipt/MainPage.vue
@@ -375,10 +375,19 @@ watch(
           </div>
           <div class="col-4 row justify-center app-text-muted">
             {{
-              $t('general.recordsPage', {
-                resultcurrentPage: data.length,
-                total: pageState.inputSearch ? data.length : pageState.total,
-              })
+              $q.screen.gt.sm
+                ? $t('general.recordsPage', {
+                    resultcurrentPage: data.length,
+                    total: pageState.inputSearch
+                      ? data.length
+                      : pageState.total,
+                  })
+                : $t('general.ofPage', {
+                    current: data.length,
+                    total: pageState.inputSearch
+                      ? data.length
+                      : pageState.total,
+                  })
             }}
           </div>
           <nav class="col-4 row justify-end">