From 05c1c073845b6d709e60c5601a571bcc3d670ca2 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <162551568+Methapon-Frappet@users.noreply.github.com>
Date: Thu, 31 Oct 2024 17:43:56 +0700
Subject: [PATCH] feat: add employee under employer (#35)

* refactor: btn add in table

* refactor: Emits addEmployee

* fix: visa can is null

* refactor: update data

* fix: number not update

---------

Co-authored-by: Thanaphon Frappet <thanaphon@frappet.com>
---
 .../03_customer-management/TableEmpoloyee.vue |  8 ++-
 .../03_customer-management/BranchPage.vue     | 55 ++++++++++++++-----
 src/pages/03_customer-management/MainPage.vue | 14 ++++-
 src/pages/03_customer-management/form.ts      |  2 -
 src/stores/employee/index.ts                  |  2 +-
 5 files changed, 61 insertions(+), 20 deletions(-)

diff --git a/src/components/03_customer-management/TableEmpoloyee.vue b/src/components/03_customer-management/TableEmpoloyee.vue
index f887fd1f..31cee457 100644
--- a/src/components/03_customer-management/TableEmpoloyee.vue
+++ b/src/components/03_customer-management/TableEmpoloyee.vue
@@ -7,6 +7,8 @@ import PersonCard from 'components/shared/PersonCard.vue';
 import KebabAction from '../shared/KebabAction.vue';
 import useOptionStore from 'stores/options';
 
+import { AddButton } from 'components/button';
+
 const optionStore = useOptionStore();
 const pageSize = defineModel<number>('pageSize', { default: 30 });
 const currentPage = defineModel<number>('currentPage', { default: 1 });
@@ -18,6 +20,7 @@ const prop = withDefaults(
     columnsEmployee: any[];
     fieldSelected?: string[];
     inTable?: boolean;
+    addButton?: boolean;
   }>(),
   {
     gridView: false,
@@ -37,6 +40,7 @@ const prop = withDefaults(
 );
 
 defineEmits<{
+  (e: 'add'): void;
   (e: 'view', data: any): void;
   (e: 'edit', data: any): void;
   (e: 'delete', data: any): void;
@@ -68,7 +72,9 @@ defineEmits<{
           <span v-if="col.label === 'nameEmployee'">
             {{ $t('fullname') }}
           </span>
-
+          <span v-if="col.label === '' && !!addButton">
+            <AddButton icon-only @click.stop="() => $emit('add')" />
+          </span>
           <span v-if="col.label !== ''">
             {{ $t(col.label) }}
           </span>
diff --git a/src/pages/03_customer-management/BranchPage.vue b/src/pages/03_customer-management/BranchPage.vue
index e6c4defb..1c786142 100644
--- a/src/pages/03_customer-management/BranchPage.vue
+++ b/src/pages/03_customer-management/BranchPage.vue
@@ -70,6 +70,8 @@ const currentPageBranch = ref<number>(1);
 const maxPageBranch = ref<number>(1);
 const pageSizeBranch = ref<number>(30);
 
+const statusEmployeeCreate = defineModel<boolean>('statusEmployeeCreate');
+
 const prop = withDefaults(
   defineProps<{
     index?: string | number;
@@ -84,12 +86,13 @@ const prop = withDefaults(
     color: 'green',
   },
 );
-
+const currentBranchEmployee = ref<string>('');
 const listEmployee = ref<Employee[]>([]);
 
 const customerId = defineModel<string>('customerId', { required: true });
 
 defineEmits<{
+  (e: 'addEmployee', currentBranch: CustomerBranch): void;
   (e: 'back'): void;
   (e: 'viewDetail', branch: CustomerBranch, index: number): void;
   (e: 'dialog'): void;
@@ -210,6 +213,14 @@ function openEmployerBranchForm(formType: 'create' | 'edit' | 'info') {
   customerBranchFormState.value.dialogModal = true;
 }
 
+async function fetchEmployee(branchId: string) {
+  const res = await fetchBranchEmployee(branchId);
+
+  if (res) {
+    listEmployee.value = res.data.result;
+  }
+}
+
 onMounted(async () => {
   await fetchList();
 });
@@ -217,6 +228,19 @@ onMounted(async () => {
 watch([customerId, inputSearch, currentStatus], async () => {
   await fetchList();
 });
+watch(
+  () => statusEmployeeCreate.value,
+  async () => {
+    if (statusEmployeeCreate.value) {
+      await fetchEmployee(currentBranchEmployee.value);
+
+      const br = branch.value?.find(
+        (v) => v.id === currentBranchEmployee.value,
+      );
+      if (br) br._count.employee += 1;
+    }
+  },
+);
 </script>
 
 <template>
@@ -487,20 +511,17 @@ watch([customerId, inputSearch, currentStatus], async () => {
                 flat
                 @click.stop="
                   async () => {
-                    const res = await fetchBranchEmployee(props.row.id);
+                    currentBranchEmployee = props.row.id;
+                    await fetchEmployee(currentBranchEmployee);
 
-                    if (res) {
-                      listEmployee = res.data.result;
+                    currentBtnOpen.map((v, i) => {
+                      if (i !== props.rowIndex) {
+                        currentBtnOpen[i] = false;
+                      }
+                    });
 
-                      currentBtnOpen.map((v, i) => {
-                        if (i !== props.rowIndex) {
-                          currentBtnOpen[i] = false;
-                        }
-                      });
-
-                      currentBtnOpen[props.rowIndex] =
-                        !currentBtnOpen[props.rowIndex];
-                    }
+                    currentBtnOpen[props.rowIndex] =
+                      !currentBtnOpen[props.rowIndex];
                   }
                 "
               >
@@ -537,6 +558,7 @@ watch([customerId, inputSearch, currentStatus], async () => {
             <q-td colspan="100%" style="padding: 16px">
               <div class="text-center">
                 <TableEmpoloyee
+                  add-button
                   in-table
                   :list-employee="listEmployee"
                   :columns-employee="columnsEmployee"
@@ -550,6 +572,12 @@ watch([customerId, inputSearch, currentStatus], async () => {
                     'formDialogEmployeeNRCNo',
                     'action',
                   ]"
+                  @add="
+                    () => {
+                      statusEmployeeCreate = false;
+                      $emit('addEmployee', props.row);
+                    }
+                  "
                   @history="(item) => {}"
                   @view="
                     (item) => {
@@ -627,7 +655,6 @@ watch([customerId, inputSearch, currentStatus], async () => {
     "
     @submit="
       async () => {
-        console.log('asasd');
         const res = await customerBranchFormStore.submitForm();
 
         if (res) {
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 4ef31b78..24d44fd8 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -76,6 +76,7 @@ import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOth
 import useOptionStore from 'stores/options';
 import { DialogContainer, DialogHeader } from 'components/dialog';
 import KebabAction from 'src/components/shared/KebabAction.vue';
+import { nextTick } from 'vue';
 
 const { t, locale } = useI18n();
 const $q = useQuasar();
@@ -91,6 +92,7 @@ const employeeFormStore = useEmployeeForm();
 const optionStore = useOptionStore();
 const ocrStore = useOcrStore();
 
+const statusEmployeeCreate = ref<boolean>(false);
 const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
 const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
   {
@@ -1833,6 +1835,7 @@ const emptyCreateDialog = ref(false);
       v-if="$route.name === 'CustomerBranchManagement'"
     >
       <BranchPage
+        v-model:status-employee-create="statusEmployeeCreate"
         v-if="currentCustomer"
         :customer-type="currentCustomer.customerType"
         :current-customer-name="
@@ -1850,6 +1853,13 @@ const emptyCreateDialog = ref(false);
         v-model:customer-id="currentCustomer.id"
         v-model:mode-view="gridView"
         @back="$router.push('/customer-management')"
+        @add-employee="
+          async (currentBranch) => {
+            createEmployeeForm();
+            await nextTick();
+            employeeFormState.formDataEmployeeOwner = { ...currentBranch };
+          }
+        "
         v-model:branch="branch"
         v-model:current-customer-url-image="currentCustomer.imageUrl"
       />
@@ -2301,7 +2311,7 @@ const emptyCreateDialog = ref(false);
         if (employeeFormState.currentTab === 'other') {
           await employeeFormStore.submitOther();
         }
-
+        statusEmployeeCreate = true;
         employeeFormState.isEmployeeEdit = false;
         employeeFormState.currentIndex = -1;
 
@@ -2582,7 +2592,7 @@ const emptyCreateDialog = ref(false);
               separator
               title="form.field.basicInformation"
               :readonly="!employeeFormState.isEmployeeEdit"
-              :employee-owner-option="employeeStore.ownerOption"
+              :employee-owner-option="employeeStore.ownerOption || []"
               v-model:customer-branch="employeeFormState.formDataEmployeeOwner"
               v-model:employee-id="employeeFormState.currentEmployeeCode"
               v-model:nrc-no="currentFromDataEmployee.nrcNo"
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 83473e02..ff106575 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -612,7 +612,6 @@ export const useEmployeeForm = defineStore('form-employee', () => {
           provinceId: string;
           districtId: string;
           subDistrictId: string;
-          zipCode: string;
         }
       | undefined;
     ocr: boolean;
@@ -1126,7 +1125,6 @@ export const useEmployeeForm = defineStore('form-employee', () => {
 
       currentFromDataEmployee.value = structuredClone(resetEmployeeData);
 
-
       state.value.currentIndexPassport =
         (currentFromDataEmployee.value.employeePassport?.length || 0) - 1;
 
diff --git a/src/stores/employee/index.ts b/src/stores/employee/index.ts
index 594066dc..49982094 100644
--- a/src/stores/employee/index.ts
+++ b/src/stores/employee/index.ts
@@ -45,7 +45,7 @@ const useEmployeeStore = defineStore('api-employee', () => {
     gender?: string;
     status?: Status;
     passport?: boolean;
-    visa: boolean;
+    visa?: boolean;
     zipCode?: string;
     customerId?: string;
   }) {