refactor: update screen.sm pagination display for various management pages

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: {

src/i18n/tha.ts

@@ -146,6 +146,7 @@ export default {
     quotationLabor: 'ใช้แสดงรายชื่อลูกจ้าง',
     quotationPayment: 'ใช้แสดงรายละเอียดในการชำระเงิน',
     orderDetail: 'เพื่อแสดงรายชื่อลูกจ้างในสินค้านั้นๆ',
+    ofPage: '{current} จาก {total}',
   },
 
   menu: {

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">

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">

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>
 

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">