refactor: handle can edit employee

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

@@ -3,6 +3,7 @@ import { ref, onMounted, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import { QTableProps } from 'quasar';
+import { useRoute } from 'vue-router';
 
 import { baseUrl } from 'src/stores/utils';
 import useCustomerStore from 'stores/customer';
@@ -42,6 +43,7 @@ import { formatAddress } from 'src/utils/address';
 import PaginationPageSize from 'src/components/PaginationPageSize.vue';
 import { nextTick } from 'vue';
 
+const route = useRoute();
 const flowStore = useFlowStore();
 const customerStore = useCustomerStore();
 const employeeFormStore = useEmployeeForm();
@@ -74,6 +76,7 @@ const maxPageBranch = ref<number>(1);
 const pageSizeBranch = ref<number>(30);
 
 const statusEmployeeCreate = defineModel<boolean>('statusEmployeeCreate');
+const statusEmployeeEdit = defineModel<boolean>('statusEmployeeEdit');
 
 const prop = withDefaults(
   defineProps<{
@@ -103,11 +106,8 @@ defineEmits<{
 }>();
 
 onMounted(async () => {
-  const url = window.location.href;
+  customerBranchFormState.value.currentCustomerId = route.params
-  const parts = url.split('/');
+    .customerId as string;
-
-  customerBranchFormState.value.currentCustomerId = parts[4];
-
   await fetchList();
 
   branch.value?.forEach((v) => {
@@ -244,9 +244,9 @@ watch([customerId, inputSearch, currentStatus, pageSizeBranch], async () => {
   await fetchList();
 });
 watch(
-  () => statusEmployeeCreate.value,
+  () => [statusEmployeeCreate.value, statusEmployeeEdit.value],
   async () => {
-    if (statusEmployeeCreate.value) {
+    if (!statusEmployeeCreate.value || !statusEmployeeEdit.value) {
       await fetchEmployee({
         branchId: currentBranchEmployee.value,
         pageSize: 999,
@@ -255,7 +255,7 @@ watch(
       const br = branch.value?.find(
         (v) => v.id === currentBranchEmployee.value,
       );
-      if (br) br._count.employee += 1;
+      if (br) br._count.employee = listEmployee.value.length;
     }
   },
 );
@@ -407,6 +407,7 @@ watch(
     <NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />
 
     <div style="width: 100%" v-else>
+      {{ console.log(branch) }}
       <q-table
         v-if="branch"
         flat

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

@@ -220,8 +220,10 @@ watch(
     }
     if (tabName === 'employee') {
       currentPageEmployee.value = 1;
-      await fetchListEmployee(true);
+      await fetchListEmployee({ fetchStats: true });
     }
+
+    customerFormState.value.currentCustomerId = undefined;
     flowStore.rotate();
   },
 );
@@ -392,10 +394,16 @@ async function fetchListCustomer(fetchStats = false) {
   }
 }
 
-async function fetchListEmployee(fetchStats = false) {
+async function fetchListEmployee(opt?: {
+  fetchStats?: boolean;
+  page?: number;
+  pageSize?: number;
+  customerId?: string;
+}) {
   const resultListEmployee = await employeeStore.fetchList({
-    page: currentPageEmployee.value,
+    customerId: opt?.customerId,
-    pageSize: pageSize.value,
+    page: opt && opt.page ? opt.page : currentPageEmployee.value,
+    pageSize: opt && opt.pageSize ? opt.pageSize : pageSize.value,
     status:
       currentStatus.value === 'All'
         ? undefined
@@ -413,7 +421,8 @@ async function fetchListEmployee(fetchStats = false) {
     listEmployee.value = resultListEmployee.result;
   }
 
-  if (fetchStats) employeeStats.value = await employeeStore.getStatsEmployee();
+  if (opt && opt.fetchStats)
+    employeeStats.value = await employeeStore.getStatsEmployee();
 }
 
 async function triggerChangeStatus(id: string, status: string) {
@@ -505,10 +514,21 @@ async function deleteEmployeeById(opts: {
         }
       }
 
-      await fetchListEmployee(true);
+      if (route.name !== 'CustomerBranchManagement') {
+        await fetchListEmployee(
+          currentTab.value === 'employer'
+            ? {
+                page: 1,
+                pageSize: 999,
+                customerId: customerFormState.value.currentCustomerId,
+              }
+            : { fetchStats: true },
+        );
 
-      flowStore.rotate();
+        flowStore.rotate();
+      }
     },
+
     cancel: () => {},
   });
 }
@@ -1344,25 +1364,24 @@ const emptyCreateDialog = ref(false);
                             flat
                             @click.stop="
                               async () => {
-                                const res = await employeeStore.fetchList({
+                                if (!currentBtnOpen[props.rowIndex]) {
-                                  customerId: props.row.id,
+                                  customerFormState.currentCustomerId =
-                                  pageSize: 999,
+                                    props.row.id;
-                                  passport: true,
-                                  visa: true,
-                                });
 
-                                if (res) {
+                                  await fetchListEmployee({
-                                  listEmployee = res.result;
+                                    customerId: props.row.id,
+                                    page: 1,
+                                    pageSize: 9999,
+                                  });
 
                                   currentBtnOpen.map((v, i) => {
                                     if (i !== props.rowIndex) {
                                       currentBtnOpen[i] = false;
                                     }
                                   });
-
-                                  currentBtnOpen[props.rowIndex] =
-                                    !currentBtnOpen[props.rowIndex];
                                 }
+                                currentBtnOpen[props.rowIndex] =
+                                  !currentBtnOpen[props.rowIndex];
                               }
                             "
                           >
@@ -1814,6 +1833,7 @@ const emptyCreateDialog = ref(false);
     >
       <BranchPage
         v-model:status-employee-create="statusEmployeeCreate"
+        v-model:status-employee-edit="employeeFormState.drawerModal"
         v-if="currentCustomer"
         :customer-type="currentCustomer.customerType"
         :current-customer-name="
@@ -2298,7 +2318,19 @@ const emptyCreateDialog = ref(false);
         statusEmployeeCreate = true;
         employeeFormState.isEmployeeEdit = false;
 
-        await fetchListEmployee(true);
+        if (route.name !== 'CustomerBranchManagement') {
+          await fetchListEmployee(
+            currentTab === 'employer'
+              ? {
+                  page: 1,
+                  pageSize: 999,
+                  customerId: customerFormState.currentCustomerId,
+                }
+              : { fetchStats: true },
+          );
+
+          flowStore.rotate();
+        }
       }
     "
     :show="
@@ -4184,7 +4216,18 @@ const emptyCreateDialog = ref(false);
         if (employeeFormState.currentTab === 'other') {
           await employeeFormStore.submitOther();
         }
-        await fetchListEmployee();
+
+        if (route.name !== 'CustomerBranchManagement') {
+          await fetchListEmployee(
+            currentTab === 'employer'
+              ? {
+                  page: 1,
+                  pageSize: 999,
+                  customerId: customerFormState.currentCustomerId,
+                }
+              : undefined,
+          );
+        }
 
         employeeFormState.isEmployeeEdit = false;
       }
@@ -4227,7 +4270,7 @@ const emptyCreateDialog = ref(false);
             }
           "
           :active="currentFromDataEmployee.status !== 'INACTIVE'"
-          :use-toggle="currentTab === 'employee'"
+          use-toggle
           color="white"
           icon="mdi-account-outline"
           :bg-color="
@@ -4428,7 +4471,6 @@ const emptyCreateDialog = ref(false);
               >
                 <template v-slot:btn-drawer-passport>
                   <q-btn
-                    v-if="currentTab === 'employee'"
                     id="form-add-passport"
                     dense
                     flat
@@ -4443,7 +4485,6 @@ const emptyCreateDialog = ref(false);
 
                 <template v-slot:btn-drawer-visa>
                   <q-btn
-                    v-if="currentTab === 'employee'"
                     id="form-add-visa"
                     dense
                     flat
@@ -4457,7 +4498,6 @@ const emptyCreateDialog = ref(false);
 
                 <template v-slot:btn-drawer-employee-checkup>
                   <q-btn
-                    v-if="currentTab === 'employee'"
                     id="form-add-checkup"
                     dense
                     flat
@@ -4471,7 +4511,6 @@ const emptyCreateDialog = ref(false);
 
                 <template v-slot:btn-drawer-employee-work-history>
                   <q-btn
-                    v-if="currentTab === 'employee'"
                     id="form-add-work-history"
                     dense
                     flat
@@ -4498,10 +4537,7 @@ const emptyCreateDialog = ref(false);
               <div
                 class="rounded row q-py-sm q-mx-lg q-px-md"
                 style="position: absolute; z-index: 999; right: 0; top: 0"
-                v-if="
+                v-if="currentFromDataEmployee.status !== 'INACTIVE'"
-                  currentTab === 'employee' &&
-                  currentFromDataEmployee.status !== 'INACTIVE'
-                "
               >
                 <div class="surface-1 row rounded">
                   <UndoButton
@@ -5304,10 +5340,7 @@ const emptyCreateDialog = ref(false);
                   prefix-id="drawer-employee"
                   dense
                   outlined
-                  :hide-action="
+                  :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
-                    currentTab !== 'employee' ||
-                    currentFromDataEmployee.status === 'INACTIVE'
-                  "
                   v-model:current-index="employeeFormState.currentIndexCheckup"
                   v-model:employee-checkup="
                     currentFromDataEmployee.employeeCheckup
@@ -5393,10 +5426,7 @@ const emptyCreateDialog = ref(false);
                   id="drawer-work-history"
                   prefix-id="drawer-employee"
                   dense
-                  :hide-action="
+                  :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
-                    currentTab !== 'employee' ||
-                    currentFromDataEmployee.status === 'INACTIVE'
-                  "
                   outlined
                   v-model:current-index="
                     employeeFormState.currentIndexWorkHistory
@@ -5454,11 +5484,7 @@ const emptyCreateDialog = ref(false);
             </template>
             <template v-if="employeeFormState.currentTab === 'other'">
               <FormEmployeeOther
-                :readonly="currentTab !== 'employee'"
+                :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
-                :hide-action="
-                  currentTab !== 'employee' ||
-                  currentFromDataEmployee.status === 'INACTIVE'
-                "
                 v-if="employeeFormState.currentTab === 'other'"
                 id="drawer-other"
                 prefix-id="drawer-employee"

src/pages/03_customer-management/form.ts

@@ -53,6 +53,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     treeFile: { label: string; file: { label: string }[] }[];
     formDataOcr: Record<string, any>;
     isImageEdit: boolean;
+    currentCustomerId?: string;
   }>({
     dialogType: 'info',
     dialogOpen: false,