feat: ทำแบ่งหน้าของ ลูกจ้าง

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

@@ -6,6 +6,7 @@ import { Pagination } from 'src/stores/types';
 import useCustomerStore from 'src/stores/customer';
 import useEmployeeStore from 'src/stores/employee';
 
+import AddCardCompoent from 'src/components/AddCardCompoent.vue';
 import PersonCard from 'components/home/PersonCard.vue';
 import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue';
 import SelectorList from 'components/SelectorList.vue';
@@ -225,6 +226,10 @@ const currentPageCustomer = ref<number>(1);
 const maxPageCustomer = ref<number>(1);
 const pageSizeCustomer = ref<number>(30);
 
+const currentPageEmployee = ref<number>(1);
+const maxPageEmployee = ref<number>(1);
+const pageSizeEmployee = ref<number>(30);
+
 const currentBranchId = ref<string>('');
 const currentCustomerName = ref<string>('');
 const currentCustomerUrlImage = ref<string | null>(null);
@@ -677,6 +682,17 @@ async function fetchListCustomer() {
   }
 }
 
+async function fetchListEmployee() {
+  const resultListEmployee = await employeeStore.fetchList();
+  if (resultListEmployee) {
+    currentPageEmployee.value = resultListEmployee.page;
+    maxPageEmployee.value = Math.ceil(
+      resultListEmployee.total / pageSizeEmployee.value,
+    );
+    listEmployee.value = resultListEmployee.result;
+  }
+}
+
 async function onSubmitEdit(id: string) {
   if (selectorLabel.value === 'EMPLOYER') {
     if (!formData.value) return;
@@ -990,8 +1006,17 @@ onMounted(async () => {
   const resultStatsEmployee = await employeeStore.getStatsEmployee();
   if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
 
-  const resultListEmployee = await employeeStore.fetchList();
-  if (resultListEmployee) listEmployee.value = resultListEmployee.result;
+  const resultListEmployee = await employeeStore.fetchList({
+    page: 1,
+    pageSize: pageSizeEmployee.value,
+  });
+
+  if (resultListEmployee) {
+    maxPageEmployee.value = Math.ceil(
+      resultListEmployee.total / pageSizeEmployee.value,
+    );
+    listEmployee.value = resultListEmployee.result;
+  }
 
   const resultOption = await fetch('/option/option.json');
   employeeStore.globalOption = await resultOption.json();
@@ -1012,7 +1037,11 @@ watch(locale, () => {
 });
 
 watch(currentPageCustomer, async () => {
-  fetchListCustomer();
+  await fetchListCustomer();
+});
+
+watch(currentPageEmployee, async () => {
+  await fetchListEmployee();
 });
 
 watch(fieldSelectedCustomer, async () => {
@@ -1190,9 +1219,15 @@ watch(fieldSelectedCustomer, async () => {
         >
           <div
             class="row full-width customer-row"
-            :style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '1' : $q.screen.lt.md ? '2 ' : '4'}, 1fr)`"
+            :style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '2' : $q.screen.lt.md ? '3' : $q.screen.lt.lg ? '6' : '7'}, 180px)`"
             style="min-height: 250px"
           >
+            <AddCardCompoent
+              color="cyan-6"
+              label="customerAdd"
+              img="/add-personnel.png"
+            />
+
             <UsersDetailCardComponent
               v-for="i in inputSearch ? resultSearch : listCustomer"
               :key="i.id"
@@ -1261,9 +1296,11 @@ watch(fieldSelectedCustomer, async () => {
           </div>
           <div class="row flex-center q-pt-md">
             <q-pagination
+              claess="pagination"
               v-model="currentPageCustomer"
               :max="maxPageCustomer"
               direction-links
+              active-color="primary"
               gutter="sm"
             />
           </div>
@@ -1308,6 +1345,17 @@ watch(fieldSelectedCustomer, async () => {
               @delete-card="onDelete"
             />
           </div>
+
+          <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>
         </template>
 
         <template