From 560e9dc27285c42ba4ce33e4fc2b3d2bf830a957 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Tue, 13 Aug 2024 12:52:25 +0700
Subject: [PATCH] feat: customer form code abbrev

---
 src/pages/03_customer-management/MainPage.vue |  2 +-
 .../employer/EmployerFormBasicInfo.vue        | 40 ++++++++++++++++++-
 src/pages/03_customer-management/form.ts      | 12 +++++-
 src/stores/customer/index.ts                  |  7 +---
 src/stores/customer/types.ts                  |  1 +
 5 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index fa1fa7fd..9dfadf52 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1952,6 +1952,7 @@ watch(
                   deleteCustomerById(customerFormState.editCustomerId)
               "
               :customer-type="customerFormData.customerType"
+              v-model:code="customerFormData.code"
               v-model:tax-no="customerFormData.taxNo"
               v-model:customer-name="customerFormData.customerName"
               v-model:customer-name-en="customerFormData.customerNameEN"
@@ -2724,7 +2725,6 @@ watch(
             v-model:entry-date="currentFromDataEmployee.entryDate"
           />
         </div>
-
         <div class="col-10 q-pa-md q-gutter-y-xl" v-else>
           <FormEmployeeHealthCheck
             v-if="employeeFormState.currentTab === 'healthCheck'"
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue b/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
index 981e3247..eb8b94b4 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
@@ -25,6 +25,7 @@ defineEmits<{
   (e: 'cancel'): void;
 }>();
 
+const code = defineModel<string>('code', { required: true });
 const personName = defineModel<string>('personName', { required: true });
 const customerName = defineModel<string>('customerName', { required: true });
 const customerNameEN = defineModel<string>('customerNameEn', {
@@ -64,10 +65,15 @@ watch(
     );
   },
 );
+
+function formatCode(input: string | undefined, type: 'code' | 'number') {
+  if (!input) return;
+  return input.slice(...(type === 'code' ? [0, -6] : [-6]));
+}
 </script>
 
 <template>
-  <div class="row q-col-gutter-sm">
+  <div class="row q-col-gutter-sm q-mb-sm">
     <div class="col-12 text-weight-bold text-body1 row items-center">
       <q-icon
         flat
@@ -104,6 +110,7 @@ watch(
       <SaveButton
         icon-only
         v-if="!readonly"
+        :class="{ 'q-ml-auto': create }"
         @click="$emit('save')"
         :disabled="actionDisabled"
       />
@@ -151,6 +158,37 @@ watch(
         </q-item>
       </template>
     </q-select>
+    <q-input
+      lazy-rules="ondemand"
+      dense
+      outlined
+      :disable="!readonly && !create"
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-12 col-md-4"
+      :label="$t('customer.form.codeAbbrev')"
+      for="input-abbreviation"
+      :model-value="!create ? formatCode(code, 'code') : code"
+      :rules="[
+        (val: string) =>
+          (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
+          $t('formDialogInputHqAbbreviation'),
+      ]"
+      @update:model-value="(v: string) => (code = v)"
+    />
+    <q-input
+      lazy-rules="ondemand"
+      dense
+      outlined
+      readonly
+      :disable="!readonly"
+      hide-bottom-space
+      class="col-12 col-md-4"
+      :label="$t('customer.form.codeNumber')"
+      for="input-code"
+      :model-value="!create ? formatCode(code, 'number') : ''"
+      @update:model-value="(v: string) => (code = v)"
+    />
     <q-input
       lazy-rules="ondemand"
       dense
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 0d00d035..242888c6 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -15,6 +15,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
   const branchStore = useMyBranch();
 
   const defaultFormData: CustomerCreate = {
+    code: '',
     status: 'CREATED',
     personName: '',
     customerType: 'CORP',
@@ -106,6 +107,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     state.value.customerImageUrl = `${apiBaseUrl}/customer/${id}/image`;
 
     resetFormData.registeredBranchId = data.registeredBranchId;
+    resetFormData.code = data.code;
     resetFormData.status = data.status;
     resetFormData.customerType = data.customerType;
     resetFormData.customerName = data.customerName;
@@ -190,7 +192,11 @@ export const useCustomerForm = defineStore('form-customer', () => {
     if (state.value.dialogType === 'info') return;
 
     if (state.value.dialogType === 'create') {
-      return await customerStore.create(currentFormData.value);
+      const _data = await customerStore.create(currentFormData.value);
+
+      if (_data) await assignFormData(_data.id);
+
+      return;
     }
 
     if (!state.value.editCustomerId) {
@@ -199,8 +205,10 @@ export const useCustomerForm = defineStore('form-customer', () => {
       );
     }
 
+    const { code: _, ...payload } = currentFormData.value;
+
     const _data = await customerStore.editById(state.value.editCustomerId, {
-      ...currentFormData.value,
+      ...payload,
       status:
         currentFormData.value.status !== 'CREATED'
           ? currentFormData.value.status
diff --git a/src/stores/customer/index.ts b/src/stores/customer/index.ts
index 5c12e578..d0b50eb2 100644
--- a/src/stores/customer/index.ts
+++ b/src/stores/customer/index.ts
@@ -182,11 +182,6 @@ const useCustomerStore = defineStore('api-customer', () => {
 
     const attachment = payload.customerBranch?.map((v) => v.file);
 
-    payload.customerBranch = payload.customerBranch?.map((v) => {
-      delete v['code'];
-      return { ...v };
-    });
-
     if (payload.customerBranch?.length) {
       for (let i = 0; i < payload.customerBranch?.length; i++) {
         delete payload.customerBranch[i].file;
@@ -240,7 +235,7 @@ const useCustomerStore = defineStore('api-customer', () => {
     const attachment = payload.customerBranch?.map((v) => v.file);
 
     payload.customerBranch = payload.customerBranch?.map((v) => {
-      const { code, ...rest } = v;
+      const { code: _code, ...rest } = v;
       return { ...rest };
     });
 
diff --git a/src/stores/customer/types.ts b/src/stores/customer/types.ts
index 1995bf7b..9268e52d 100644
--- a/src/stores/customer/types.ts
+++ b/src/stores/customer/types.ts
@@ -96,6 +96,7 @@ export type CustomerBranchCreate = {
 };
 
 export type CustomerCreate = {
+  code: string;
   customerBranch?: (CustomerBranchCreate & { id?: string })[];
   taxNo?: string | null;
   customerNameEN: string;