feat: ทำแบ่งของนายจ้าง / แก้ค่าของ type

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

@@ -33,6 +33,7 @@ import {
   CustomerUpdate,
   CustomerBranch,
   CustomerBranchCreate,
+  CustomerType,
 } from 'stores/customer/types';
 import { EmployeeCreate, Employee } from 'stores/employee/types';
 import { onMounted } from 'vue';
@@ -200,9 +201,13 @@ const dialogInputCustomerBranchForm = ref<boolean>(false);
 const currentCustomer = ref<Customer>();
 const branch = ref<CustomerBranch[]>();
 
+const currentPageCustomer = ref<number>(1);
+const maxPageCustomer = ref<number>(1);
+const pageSizeCustomer = ref<number>(30);
+
 const currentBranchId = ref<string>('');
 const currentCustomerName = ref<string>('');
-const currentCustomerUrlImage = ref<string>('');
+const currentCustomerUrlImage = ref<string | null>(null);
 
 const inputFile = (() => {
   const element = document.createElement('input');
@@ -230,12 +235,12 @@ const listEmployee = ref();
 const itemCard = [
   {
     icon: 'mdi:office-building',
-    text: 'customerLegalEntity',
+    text: 'CORP',
     color: 'var(--purple-8)',
   },
   {
     icon: 'heroicons:user-solid',
-    text: 'customerNaturalPerson',
+    text: 'PERS',
     color: 'var(--green-9)',
   },
 ];
@@ -244,13 +249,13 @@ const customerStats = [
   {
     id: 1,
     count: 2,
-    name: 'customerLegalEntity',
+    name: 'CORP',
   },
 
   {
     id: 2,
     count: 3,
-    name: 'customerNaturalPerson',
+    name: 'PERS',
   },
 ];
 
@@ -273,11 +278,7 @@ const employeeTab = [
   },
 ];
 
-const fieldCustomer = ref([
+const fieldCustomer = ref(['all', 'CORP', 'PERS']);
-  'all',
-  'customerLegalEntity',
-  'customerNaturalPerson',
-]);
 
 const dialogCustomerType = ref<boolean>(false);
 const dialogInputForm = ref<boolean>(false);
@@ -299,11 +300,9 @@ const selectorList = computed(() => [
   },
 ]);
 
-const customerType = ref<
+const customerType = ref<CustomerType>('CORP');
-  'customerLegalEntity' | 'customerNaturalPerson' | undefined
->('customerLegalEntity');
 
-function triggerCreate(type: 'customerLegalEntity' | 'customerNaturalPerson') {
+function triggerCreate(type: CustomerType) {
   customerType.value = type;
   openDialogInputForm();
   dialogCustomerType.value = false;
@@ -343,7 +342,7 @@ function onCloseBranch() {
 }
 
 function clearForm() {
-  customerType.value = undefined;
+  customerType.value = 'CORP';
   dialogInputForm.value = false;
   formData.value = {
     status: 'CREATED',
@@ -427,8 +426,7 @@ function deleteBranchId(id: string) {
 async function onSubmit() {
   await create({
     ...formData.value,
-    customerType:
+    customerType: customerType.value === 'CORP' ? 'CORP' : 'PERS',
-      customerType.value === 'customerLegalEntity' ? 'CORP' : 'PERS',
     image: profileSubmit.value ? profileFile.value ?? null : null,
   });
   clearForm();
@@ -475,6 +473,23 @@ async function searchCustomer() {
   }
 }
 
+async function fetchListCustomer() {
+  const resultList = await fetchList({
+    includeBranch: true,
+    page: currentPageCustomer.value,
+    pageSize: pageSizeCustomer.value,
+  });
+
+  if (resultList) {
+    currentPageCustomer.value = resultList.page;
+    maxPageCustomer.value = Math.ceil(
+      resultList.total / pageSizeCustomer.value,
+    );
+
+    listCustomer.value = resultList.result;
+  }
+}
+
 async function onSubmitEdit(id: string) {
   if (!formData.value) return;
 
@@ -488,6 +503,8 @@ async function onSubmitEdit(id: string) {
   };
 
   await editById(id, tempValue);
+  infoDrawer.value = false;
+  fetchListCustomer();
   clearForm();
 }
 
@@ -523,6 +540,7 @@ async function submitBranch() {
     }
   }
   infoDrawerBranch.value = false;
+
   clearForm();
 }
 
@@ -575,7 +593,11 @@ async function assignFormData(data: Customer & { branch: CustomerBranch[] }) {
 onMounted(async () => {
   const resultStats = await getStatsCustomer();
 
-  const resultList = await fetchList({ includeBranch: true });
+  const resultList = await fetchList({
+    includeBranch: true,
+    page: 1,
+    pageSize: pageSizeCustomer.value,
+  });
   const resultListEmployee = await employeeStore.fetchList();
 
   if (resultStats) statsCustomerType.value = resultStats;
@@ -590,7 +612,14 @@ onMounted(async () => {
     selectorLabel.value = 'EMPLOYER';
   }
 
-  if (resultList) listCustomer.value = resultList.result;
+  if (resultList) {
+    currentPageCustomer.value = resultList.page;
+    maxPageCustomer.value = Math.ceil(
+      resultList.total / pageSizeCustomer.value,
+    );
+    listCustomer.value = resultList.result;
+  }
+
   if (resultListEmployee) listEmployee.value = resultListEmployee.result;
 });
 
@@ -607,6 +636,30 @@ watch(locale, () => {
     value: fieldSelectedCustomer.value?.value,
   };
 });
+
+watch(currentPageCustomer, async () => {
+  fetchListCustomer();
+});
+
+watch(fieldSelectedCustomer, async () => {
+  let resultList;
+
+  if (fieldSelectedCustomer.value.value === 'all') {
+    resultList = await fetchList({ includeBranch: true });
+  }
+
+  if (fieldSelectedCustomer.value.value === 'CORP') {
+    resultList = await fetchList({ includeBranch: true, customerType: 'CORP' });
+  }
+
+  if (fieldSelectedCustomer.value.value === 'PERS') {
+    resultList = await fetchList({ includeBranch: true, customerType: 'PERS' });
+  }
+
+  if (resultList) {
+    listCustomer.value = resultList.result;
+  }
+});
 </script>
 
 <template>
@@ -656,11 +709,11 @@ watch(locale, () => {
               :branch="
                 customerStats.map((v) => ({
                   count:
-                    v.name === 'customerLegalEntity'
+                    v.name === 'CORP'
                       ? statsCustomerType?.CORP ?? 0
                       : statsCustomerType?.PERS ?? 0,
                   label: v.name,
-                  color: v.name === 'customerLegalEntity' ? 'purple' : 'green',
+                  color: v.name === 'CORP' ? 'purple' : 'green',
                 }))
               "
               :dark="$q.dark.isActive"
@@ -742,6 +795,7 @@ watch(locale, () => {
           <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="min-height: 250px"
           >
             <UsersDetailCardComponent
               v-for="i in inputSearch
@@ -750,12 +804,12 @@ watch(locale, () => {
                     if (fieldSelectedCustomer.value === 'all') return true;
 
                     if (
-                      fieldSelectedCustomer.value === 'customerLegalEntity' &&
+                      fieldSelectedCustomer.value === 'CORP' &&
                       v.customerType === 'CORP'
                     )
                       return true;
                     if (
-                      fieldSelectedCustomer.value === 'customerNaturalPerson' &&
+                      fieldSelectedCustomer.value === 'PERS' &&
                       v.customerType === 'PERS'
                     )
                       return true;
@@ -768,10 +822,7 @@ watch(locale, () => {
               :list="{
                 id: i.id,
                 imageUrl: i.imageUrl,
-                type:
+                type: i.customerType,
-                  i.customerType === 'CORP'
-                    ? 'customerLegalEntity'
-                    : 'customerNaturalPerson',
                 name: i.customerName === '' ? '-' : i.customerName,
                 code: i.code,
 
@@ -788,8 +839,12 @@ watch(locale, () => {
               }"
               @enter-card="
                 () => {
+                  customerType = i.customerType;
                   currentCustomerUrlImage = i.imageUrl;
                   currentCustomerId = i.id;
+
+                  const { branch, ...payload } = i;
+                  currentCustomer = payload;
                   isMainPage = false;
                 }
               "
@@ -807,10 +862,7 @@ watch(locale, () => {
               @view-card="
                 () => {
                   currentCustomerId = i.id;
-                  customerType =
+                  customerType = i.customerType;
-                    i.customerType === 'CORP'
-                      ? 'customerLegalEntity'
-                      : 'customerNaturalPerson';
                   assignFormData(i);
                   openDialogInputForm('INFO', i.id);
                 }
@@ -818,6 +870,14 @@ watch(locale, () => {
               @delete-card="deleteCustomerById(i.id)"
             />
           </div>
+          <div class="row flex-center q-pt-md">
+            <q-pagination
+              v-model="currentPageCustomer"
+              :max="maxPageCustomer"
+              direction-links
+              gutter="sm"
+            />
+          </div>
         </template>
 
         <template
@@ -892,20 +952,24 @@ watch(locale, () => {
     </div>
     <div v-else>
       <CustomerInfoComponent
+        :customer-type="customerType"
         :customer-id="currentCustomerId"
-        @back="isMainPage = true"
+        @back="
+          () => {
+            isMainPage = true;
+            currentCustomerUrlImage = null;
+            clearForm();
+          }
+        "
         @dialog="dialogInputCustomerBranchForm = true"
         @viewDetail="
           (v) => {
             infoDrawerBranch = true;
-            currentCustomerId = v.id;
+            currentBranchId = v[0].id;
-            currentBranchId = v.branch[0].id;
 
-            customerType =
+            if (!!currentCustomer && !!v) {
-              v.customerType === 'CORP'
+              assignFormData({ ...currentCustomer, branch: v });
-                ? 'customerLegalEntity'
+            }
-                : 'customerNaturalPerson';
-            assignFormData(v);
           }
         "
         v-model:branch="branch"
@@ -925,6 +989,7 @@ watch(locale, () => {
     <template #body>
       <div class="row q-gutter-xl q-pa-sm">
         <ItemCard
+          class="col"
           v-for="i in itemCard"
           :key="i.text"
           :icon="i.icon"
@@ -932,9 +997,7 @@ watch(locale, () => {
           :color="i.color"
           @trigger="
             () => {
-              triggerCreate(
+              triggerCreate(i.text as 'CORP' | 'PERS');
-                i.text as 'customerLegalEntity' | 'customerNaturalPerson',
-              );
             }
           "
         />
@@ -1466,7 +1529,6 @@ watch(locale, () => {
     :isEdit="infoDrawerEdit"
     :close="() => onClose()"
     :editData="() => (infoDrawerEdit = true)"
-    :data="currentCustomer"
     :submit="() => onSubmitEdit(currentCustomerId)"
     :deleteData="
       () => {
@@ -1487,7 +1549,7 @@ watch(locale, () => {
                 :metadata="{ id: '1', disabled: false }"
                 :list="{
                   id: '2',
-                  type: 'customerNaturalPerson',
+                  type: 'PERS',
                   name: 'เจมส์ บอน',
                   code: 'HQ006',
                   detail: [
@@ -1664,7 +1726,6 @@ watch(locale, () => {
     :close="() => onCloseBranch()"
     :editData="() => (infoDrawerEdit = true)"
     :deleteData="() => deleteBranchId(currentBranchId)"
-    :data="currentCustomer"
     :submit="
       () => {
         submitBranch();
@@ -1684,7 +1745,7 @@ watch(locale, () => {
                 :metadata="{ id: '1', disabled: false }"
                 :list="{
                   id: '2',
-                  type: 'customerNaturalPerson',
+                  type: 'PERS',
                   name: 'เจมส์ บอน',
                   code: 'HQ006',
                   detail: [