refactor: cleanup

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

@@ -75,29 +75,56 @@ async function init() {
 }
 onMounted(init);
 
+// NOTE: Page Data
+const currentCustomer = ref<Customer>();
+const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
+const listEmployee = ref<Employee[]>([]);
+const hideStats = ref(false);
+const statsCustomerType = ref<CustomerStats>({
+  CORP: 0,
+  PERS: 0,
+});
+
+// NOTE: Page State
 const currentTab = ref<'employer' | 'employee'>('employer');
 const inputSearch = ref('');
 const currentStatus = ref<Status | 'All'>('All');
-
+const customerTypeSelected = ref<{
-watch(() => route.name, init);
+  label: string;
-watch([currentTab, currentStatus, inputSearch], async ([name]) => {
+  value: 'all' | 'customerLegalEntity' | 'customerNaturalPerson';
-  if (name === 'employer') {
+}>({
-    currentPageCustomer.value = 1;
-    await fetchListCustomer(true);
-  }
-  if (name === 'employee') {
-    currentPageEmployee.value = 1;
-    await fetchListEmployee(true);
-  }
-  flowStore.rotate();
-});
-
-const { fetchList } = customerStore;
-
-const fieldSelectedCustomer = ref<{ label: string; value: string }>({
   label: t('all'),
   value: 'all',
 });
+const employeeStats = ref(0);
+const gridView = ref(false);
+const splitPercent = ref(15); // Customer only
+
+watch(() => route.name, init);
+watch(
+  [currentTab, currentStatus, inputSearch, customerTypeSelected],
+  async ([tabName]) => {
+    if (tabName === 'employer') {
+      currentPageCustomer.value = 1;
+      await fetchListCustomer(true);
+    }
+    if (tabName === 'employee') {
+      currentPageEmployee.value = 1;
+      await fetchListEmployee(true);
+    }
+    flowStore.rotate();
+  },
+);
+watch(locale, () => {
+  customerTypeSelected.value = {
+    label: `${customerTypeSelected.value.label}`,
+    value: customerTypeSelected.value?.value,
+  };
+});
+watch(
+  () => $q.screen.lt.md,
+  () => $q.screen.lt.md && (gridView.value = true),
+);
 
 const fieldDisplayEmployer = ref<{ label: string; value: string }[]>([
   { label: 'corporation', value: 'customerName' },
@@ -161,26 +188,8 @@ const fieldSelected = ref<
   'action',
 ]);
 
-const splitPercent = ref(15);
-const gridView = ref(false);
-const statsEmployee = ref(0);
-const hideStat = ref(false);
-
 const registerAbleBranchOption = ref<{ id: string; name: string }[]>();
 
-const statusToggle = ref<boolean>(false);
-const statsCustomerType = ref<CustomerStats>({
-  CORP: 0,
-  PERS: 0,
-});
-const currentCustomerId = ref<string>('');
-const currentCustomer = ref<Customer>();
-
-const currentBranch = ref<{ name: string; code: string }>({
-  name: '',
-  code: '',
-});
-
 const branch = ref<CustomerBranch[]>();
 
 const currentPageCustomer = ref<number>(1);
@@ -190,23 +199,17 @@ const pageSize = ref<number>(10);
 const currentPageEmployee = ref<number>(1);
 const maxPageEmployee = ref<number>(1);
 
-const currentBranchId = ref<string>('');
-
-const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
-const listEmployee = ref<Employee[]>([]);
-
 const customerStats = [
   { id: 1, count: 2, name: 'CORP' },
   { id: 2, count: 3, name: 'PERS' },
 ];
 
-const fieldCustomer = ref([
+const fieldCustomer = [
   'all',
   'customerLegalEntity',
   'customerNaturalPerson',
-]);
+] as const;
 
-const infoDrawerBranch = ref<boolean>(false);
 const customerType = ref<CustomerType>('CORP');
 const employeeHistoryDialog = ref(false);
 const employeeHistory = ref<EmployeeHistory[]>();
@@ -251,7 +254,7 @@ async function fetchListOfOptionBranch() {
 }
 
 async function fetchListCustomer(fetchStats = false) {
-  const resultList = await fetchList({
+  const resultList = await customerStore.fetchList({
     includeBranch: true,
     page: currentPageCustomer.value,
     pageSize: pageSize.value,
@@ -262,6 +265,13 @@ async function fetchListCustomer(fetchStats = false) {
           ? 'ACTIVE'
           : 'INACTIVE',
     query: inputSearch.value,
+    customerType: (
+      {
+        all: undefined,
+        customerLegalEntity: 'CORP',
+        customerNaturalPerson: 'PERS',
+      } as const
+    )[customerTypeSelected.value.value],
   });
 
   if (resultList) {
@@ -296,7 +306,7 @@ async function fetchListEmployee(fetchStats = false) {
     listEmployee.value = resultListEmployee.result;
   }
 
-  if (fetchStats) statsEmployee.value = await employeeStore.getStatsEmployee();
+  if (fetchStats) employeeStats.value = await employeeStore.getStatsEmployee();
 }
 
 async function triggerChangeStatus(id: string, status: string) {
@@ -365,36 +375,7 @@ async function openHistory(id: string) {
   employeeHistoryDialog.value = true;
 }
 
-watch(locale, () => {
-  fieldSelectedCustomer.value = {
-    label: `${fieldSelectedCustomer.value.label}`,
-    value: fieldSelectedCustomer.value?.value,
-  };
-});
-
-watch(fieldSelectedCustomer, async () => {
-  const resultList = await fetchList({
-    includeBranch: true,
-    customerType: (
-      {
-        all: undefined,
-        cusomterLegalEnity: 'CORP',
-        customerNaturalPerson: 'PERS',
-      } as const
-    )[fieldSelectedCustomer.value.value],
-  });
-
-  if (resultList) listCustomer.value = resultList.result;
-
-  flowStore.rotate();
-});
-
 // TODO: When in employee form, if select address same as customer then auto fill
-
-watch(
-  () => $q.screen.lt.md,
-  () => $q.screen.lt.md && (gridView.value = true),
-);
 </script>
 
 <template>
@@ -440,7 +421,7 @@ watch(
         :style="{
           color: 'white',
           'background-color':
-            customerType === 'CORP'
+            currentCustomer?.customerType === 'CORP'
               ? 'hsla(var(--violet-11-hsl))'
               : 'hsla(var(--pink-6-hsl))',
         }"
@@ -481,8 +462,8 @@ watch(
           flat
           dense
           rounded
-          @click="hideStat = !hideStat"
+          @click="hideStats = !hideStats"
-          :style="hideStat ? 'rotate: 90deg' : ''"
+          :style="hideStats ? 'rotate: 90deg' : ''"
           style="transition: 0.1s ease-in-out"
         />
       </div>
@@ -490,7 +471,7 @@ watch(
       <div class="row full-width">
         <!-- stat -->
         <transition name="slide">
-          <div v-if="!hideStat" class="col-12 q-mb-md">
+          <div v-if="!hideStats" class="col-12 q-mb-md">
             <div class="scroll">
               <StatCardComponent
                 v-if="customerStats"
@@ -516,7 +497,7 @@ watch(
                     : [
                         {
                           label: 'EMPLOYEE',
-                          count: statsEmployee,
+                          count: employeeStats,
                           icon: 'mdi-account',
                           color: 'pink',
                         },
@@ -730,8 +711,8 @@ watch(
                   dense
                   class="no-padding items-center rounded full-width"
                   active-class="employer-active"
-                  :active="fieldSelectedCustomer.value === v"
+                  :active="customerTypeSelected.value === v"
-                  @click="fieldSelectedCustomer = { label: v, value: v }"
+                  @click="customerTypeSelected = { label: v, value: v }"
                 >
                   <span class="q-px-md ellipsis">
                     {{ $t(v) }}
@@ -896,12 +877,6 @@ watch(
                                 await fetchListOfOptionBranch();
                                 const { branch, ...payload } = props.row;
                                 currentCustomer = payload;
-
-                                currentCustomerId = props.row.id;
-                                customerType = props.row.customerType;
-
-                                // assignFormData(props.row.id);
-                                // openDialogInputForm('INFO', props.row.id);
                               }
                             "
                           />
@@ -925,7 +900,6 @@ watch(
                                       const { branch, ...payload } = props.row;
                                       currentCustomer = payload;
 
-                                      currentCustomerId = props.row.id;
                                       customerType = props.row.customerType;
                                       // assignFormData(props.row.id);
                                       // openDialogInputForm('INFO', props.row.id);
@@ -1161,7 +1135,7 @@ watch(
               <!-- employee -->
               <template
                 v-if="
-                  listEmployee && statsEmployee > 0 && currentTab === 'employee'
+                  listEmployee && employeeStats > 0 && currentTab === 'employee'
                 "
               >
                 <div
@@ -1569,7 +1543,7 @@ watch(
                     {{
                       $t('recordsPage', {
                         resultcurrentPage: listEmployee.length,
-                        total: statsEmployee,
+                        total: employeeStats,
                       })
                     }}
                   </div>
@@ -1593,7 +1567,7 @@ watch(
                 v-if="
                   (statsCustomerType.CORP + statsCustomerType.PERS === 0 &&
                     currentTab === 'employer') ||
-                  (statsEmployee === 0 && currentTab === 'employee')
+                  (employeeStats === 0 && currentTab === 'employee')
                 "
               >
                 <TooltipComponent