feat: customer branch form

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

@@ -9,7 +9,7 @@ import { calculateAge, dateFormat } from 'src/utils/datetime';
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
 import useMyBranchStore from 'stores/my-branch';
-import useUtilsStore, { dialog } from 'stores/utils';
+import useUtilsStore, { dialog, notify } from 'stores/utils';
 import useFlowStore from 'stores/flow';
 import { Status } from 'stores/types';
 import { CustomerStats, Customer, CustomerBranch } from 'stores/customer/types';
@@ -20,7 +20,7 @@ import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
 import PersonCard from 'components/home/PersonCard.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
-import AddButton from 'components/AddButton.vue';
+import EmptyAddButton from 'components/AddButton.vue';
 import NoData from 'components/NoData.vue';
 import PaginationComponent from 'components/PaginationComponent.vue';
 import DialogForm from 'components/DialogForm.vue';
@@ -33,6 +33,7 @@ import CustomerInfoComponent from './components/CustomerBranch.vue';
 import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
 import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
 import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
+import { AddButton } from 'src/components/button';
 
 import {
   columnsCustomer,
@@ -47,6 +48,7 @@ import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormE
 import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormEmployeeWorkHistory.vue';
 import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';
 import useOptionStore from 'src/stores/options';
+import { DialogContainer, DialogHeader } from 'src/components/dialog';
 
 const { t, locale } = useI18n();
 const $q = useQuasar();
@@ -449,7 +451,7 @@ function customerConfirmUnsave(close = true) {
     message: t('form.warning.unsave'),
     action: () => {
       customerFormStore.resetForm();
-      customerFormState.value.editReadonly = true;
+      customerFormState.value.readonly = true;
       customerFormState.value.dialogModal = !close;
     },
     cancel: () => {},
@@ -461,7 +463,7 @@ function customerFormUndo(close = true) {
     return customerConfirmUnsave(close);
   }
   customerFormStore.resetForm();
-  customerFormState.value.editReadonly = true;
+  customerFormState.value.readonly = true;
 }
 
 function createCustomerForm(customerType: 'CORP' | 'PERS') {
@@ -1734,7 +1736,7 @@ watch(
                   class="row items-center justify-center"
                   style="flex-grow: 1"
                 >
-                  <AddButton
+                  <EmptyAddButton
                     :label="
                       currentTab === 'employer'
                         ? 'customerEmployerAdd'
@@ -1770,49 +1772,25 @@ watch(
     </div>
   </div>
 
-  <DialogForm
+  <DialogContainer
-    v-model:modal="customerFormState.dialogModal"
+    :model-value="customerFormState.dialogModal"
-    :title="
+    :onOpen="
-      $t(`form.title.${customerFormState.dialogType}`, {
-        name: $t('customer.employer'),
-      })
-    "
-    :edit="customerFormState.dialogType === 'edit'"
-    :isEdit="customerFormState.editReadonly === false"
-    :undo="() => customerFormUndo(false)"
-    :delete-data="
-      () =>
-        customerFormState.editCustomerId &&
-        deleteCustomerById(customerFormState.editCustomerId)
-    "
-    :editData="() => (customerFormState.editReadonly = false)"
-    :show="
-      () =>
-        fetchListOfOptionBranch().then(() => {
-          customerFormStore.resetForm(
-            customerFormState.dialogType === 'create',
-          );
-        })
-    "
-    :submit="
       async () => {
-        await customerFormStore.submitForm();
+        await fetchListOfOptionBranch();
-        await fetchListCustomer();
+        customerFormStore.resetForm(customerFormState.dialogType === 'create');
       }
     "
-    :close="() => (customerFormState.editReadonly = true)"
+    :onClose="() => (customerFormState.dialogModal = false)"
-    :before-close="
-      () => {
-        if (customerFormStore.isFormDataDifferent()) {
-          customerConfirmUnsave();
-          return true;
-        }
-        return false; // close
-      }
-    "
-    no-footer
   >
-    <div class="q-mx-lg q-mt-lg">
+    <template #header>
+      <DialogHeader
+        :title="$t(`form.title.create`, { name: $t('customer.employer') })"
+      >
+        <!-- <template #title-after>{{ customerFormState.editCustomerId }}</template> -->
+      </DialogHeader>
+    </template>
+
+    <div class="q-px-lg q-pt-lg surface-2">
       <ProfileBanner
         active
         v-model:cover-url="customerFormState.customerImageUrl"
@@ -1832,9 +1810,11 @@ watch(
       />
     </div>
     <div
-      class="col surface-1 q-ma-lg rounded bordered scroll row relative-position"
+      style="flex: 1; width: 100%; overflow-y: auto"
+      class="surface-2 q-pa-lg"
       id="customer-form"
     >
+      <div class="col surface-1 full-height rounded bordered scroll row">
         <div
           class="col"
           style="height: 100%; max-height: 100; overflow-y: auto"
@@ -1871,15 +1851,34 @@ watch(
           class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
           id="customer-form-content"
           style="height: 100%; max-height: 100%; overflow-y: auto"
+        >
+          <q-form
+            @submit.prevent="
+              async () => {
+                await customerFormStore.submitFormCustomer();
+                customerFormState.readonly = true;
+                notify('create', $t('success'));
+              }
+            "
+            :style="{
+              opacity: customerFormState.branchIndex !== -1 ? '0.5' : undefined,
+            }"
           >
             <FormBasicInfo
               class="q-mb-xl"
               :readonly="
                 customerFormState.dialogType === 'edit' &&
-            customerFormState.editReadonly === true
+                customerFormState.readonly === true
               "
+              :action-disabled="customerFormState.branchIndex !== -1"
               id="form-basic-info-customer"
-          @save="customerFormState.saveMode = 'customer'"
+              :create="customerFormState.dialogType === 'create'"
+              @edit="customerFormState.readonly = false"
+              @cancel="() => customerFormUndo(false)"
+              @delete="
+                customerFormState.editCustomerId &&
+                  deleteCustomerById(customerFormState.editCustomerId)
+              "
               :customer-type="customerFormData.customerType"
               v-model:tax-no="customerFormData.taxNo"
               v-model:customer-name="customerFormData.customerName"
@@ -1888,37 +1887,59 @@ watch(
               v-model:registered-branch-id="customerFormData.registeredBranchId"
               v-model:branch-options="registerAbleBranchOption"
             />
-        <FormBranch
+          </q-form>
-          v-if="!!customerFormState.editCustomerId"
+          <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
-          id="form-branch-customer-branch"
+            <div
-          :customer-type="customerFormData.customerType"
+              class="col-12 text-weight-bold text-body1 row items-center"
-          :editable="
+              :style="{
-            customerFormState.dialogType === 'create' ||
+                opacity:
-            customerFormState.editReadonly === false
+                  customerFormState.branchIndex !== -1 ? '0.5' : undefined,
-          "
+              }"
-          @add-branch="customerFormStore.addCurrentCustomerBranch()"
+            >
-          @save-branch="
+              <q-icon
-            (idx) => {
+                flat
-              customerFormState.saveMode = 'branch';
+                size="xs"
-              customerFormState.branchIndex = idx;
+                class="q-pa-sm rounded q-mr-xs"
-            }
+                color="info"
-          "
+                name="mdi-briefcase"
-          v-model:customer-branch="customerFormData.customerBranch"
+                style="background-color: var(--surface-3)"
+              />
+              <span>{{ $t('customer.form.group.branch') }}</span>
+              <AddButton
+                type="button"
+                class="q-ml-sm"
+                @click="customerFormStore.addCurrentCustomerBranch()"
+                v-if="customerFormState.branchIndex === -1"
+                :disabled="!customerFormState.readonly"
               />
             </div>
+            <q-form
+              @submit.prevent
+              class="full-width"
+              v-if="customerFormData.customerBranch"
+              v-for="(_, idx) in customerFormData.customerBranch"
+            >
+              <FormBranch
+                v-if="!!customerFormState.editCustomerId"
+                v-model:customer-branch="customerFormData.customerBranch[idx]"
+                :customer-type="customerFormData.customerType"
+                :action-disabled="
+                  !customerFormState.readonly ||
+                  (customerFormState.branchIndex !== -1 &&
+                    customerFormState.branchIndex !== idx)
+                "
+                :readonly="customerFormState.branchIndex !== idx"
+                @edit="() => (customerFormState.branchIndex = idx)"
+                @cancel="() => customerFormUndo(false)"
+                @delete="() => {}"
+                @save="() => {}"
+              />
+            </q-form>
           </div>
-
+        </div>
-    <!-- <q-btn -->
+      </div>
-    <!--   @click="customerFormState.saveMode = 'customer'" -->
+    </div>
-    <!--   type="submit" -->
+  </DialogContainer>
-    <!--   label="Save" -->
-    <!-- /> -->
-    <!-- <q-btn -->
-    <!--   @click="customerFormState.saveMode = 'branch'" -->
-    <!--   type="submit" -->
-    <!--   label="Save" -->
-    <!-- /> -->
-  </DialogForm>
 
   <DialogForm
     :title="$t('form.title.create', { name: 'Employee' })"

src/pages/03_customer-management/components/FormBasicInfo.vue

@@ -4,13 +4,27 @@ import { QSelect } from 'quasar';
 import { selectFilterOptionRefMod } from 'stores/utils';
 import { getRole } from 'src/services/keycloak';
 import { onMounted } from 'vue';
+import {
+  SaveButton,
+  EditButton,
+  CancelButton,
+  DeleteButton,
+} from 'src/components/button';
 
 defineProps<{
   prefixId?: string;
   outlined?: boolean;
   readonly?: boolean;
+  create?: boolean;
+  actionDisabled?: boolean;
   customerType?: 'CORP' | 'PERS';
 }>();
+defineEmits<{
+  (e: 'save'): void;
+  (e: 'edit'): void;
+  (e: 'delete'): void;
+  (e: 'cancel'): void;
+}>();
 
 const personName = defineModel<string>('personName', { required: true });
 const customerName = defineModel<string>('customerName', { required: true });
@@ -65,15 +79,32 @@ watch(
         style="background-color: var(--surface-3)"
       />
       <span>{{ $t('customer.form.group.basicInfo') }}</span>
-      <q-btn
+      <EditButton
+        v-if="readonly && !create"
+        type="button"
+        @click="$emit('edit')"
+        class="q-ml-auto"
+        :disabled="actionDisabled"
+      />
+      <DeleteButton
+        v-if="readonly && !create"
+        @click="$emit('delete')"
+        type="button"
+        class="q-ml-sm"
+        :disabled="actionDisabled"
+      />
+      <SaveButton
         v-if="!readonly"
-        type="submit"
-        dense
-        unelevated
-        color="primary"
-        :label="$t('save')"
         @click="$emit('save')"
-        class="q-px-md q-ml-auto rounded"
+        class="q-ml-auto"
+        :disabled="actionDisabled"
+      />
+      <CancelButton
+        v-if="!readonly && !create"
+        type="button"
+        class="q-ml-sm"
+        :disabled="actionDisabled"
+        @click="$emit('cancel')"
       />
     </div>
     <q-select

src/pages/03_customer-management/components/FormBranch.vue

@@ -1,106 +1,80 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
 import FormBusiness from './FormBusiness.vue';
 import { CustomerCreate } from 'src/stores/customer/types';
 import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
-import { ref, watch } from 'vue';
+import FormContact from './FormContact.vue';
+import { EditButton } from 'src/components/button';
+import DeleteButton from 'src/components/button/DeleteButton.vue';
+import SaveButton from 'src/components/button/SaveButton.vue';
+import CancelButton from 'src/components/button/CancelButton.vue';
 
-const branch = defineModel<CustomerCreate['customerBranch']>('customerBranch', {
+const item = defineModel<NonNullable<CustomerCreate['customerBranch']>[number]>(
-  default: [],
+  'customerBranch',
-});
-
-const tab = ref<
   {
-    branch: NonNullable<CustomerCreate['customerBranch']>[number];
+    required: true,
-    tab: string;
+    default: [],
-  }[]
->([]);
-
-watch(
-  branch,
-  () => {
-    tab.value =
-      branch.value?.map((a) => ({
-        branch: a,
-        tab:
-          tab.value.find((b) => (b.branch === a ? true : b.branch.id === a.id))
-            ?.tab || 'main',
-      })) || [];
   },
-  { deep: true },
 );
+const tab = ref('main');
 
 defineEmits<{
-  (e: 'addBranch'): void;
+  (e: 'edit'): void;
-  (e: 'saveBranch', i: number, v: (typeof tab.value)[number]['branch']): void;
+  (e: 'save'): void;
-  (e: 'deleteBranch', i: number, v: (typeof tab.value)[number]['branch']): void;
+  (e: 'cancel'): void;
+  (e: 'delete'): void;
 }>();
+
 defineProps<{
-  editable?: boolean;
+  readonly?: boolean;
   prefixId?: string;
+  actionDisabled?: boolean;
   customerType?: 'CORP' | 'PERS';
 }>();
 </script>
 
 <template>
-  <div class="row q-col-gutter-md">
-    <div class="col-12 text-weight-bold text-body1 row items-center">
-      <q-icon
-        flat
-        size="xs"
-        class="q-pa-sm rounded q-mr-xs"
-        color="info"
-        name="mdi-briefcase"
-        style="background-color: var(--surface-3)"
-      />
-      <span>{{ $t('customer.form.group.branch') }}</span>
-      <q-btn
-        type="button"
-        rounded
-        flat
-        dense
-        unelevated
-        color="primary"
-        @click="$emit('addBranch')"
-        v-if="editable"
-        icon="mdi-plus"
-        class="q-ml-md"
-      />
-    </div>
-
-    <template v-for="(item, idx) in branch">
   <span
-        class="col-12 text-weight-bold row items-center"
+    class="col-12 text-weight-bold row items-center q-mb-sm"
+    :style="{ opacity: actionDisabled ? '.5' : undefined }"
     :id="`form-branch-customer-no-${item.branchNo}`"
   >
     {{ $t('customer.form.branch.title', { name: item.branchNo || 0 }) }}
-        <q-btn
+    <EditButton
-          v-if="editable"
+      v-if="readonly"
+      @click="$emit('edit')"
+      class="q-ml-auto"
       type="button"
-          dense
+      :disabled="actionDisabled"
-          unelevated
-          text-color="red-9"
-          color="red-2"
-          :label="$t('delete')"
-          @click="$emit('deleteBranch', idx, item)"
-          class="q-px-md q-ml-auto rounded"
     />
-        <q-btn
+    <DeleteButton
-          v-if="editable"
+      v-if="readonly"
+      @click="$emit('delete')"
+      class="q-ml-sm"
+      type="button"
+      :disabled="actionDisabled"
+    />
+    <SaveButton
+      v-if="!readonly"
+      @click="$emit('save')"
+      class="q-ml-auto"
       type="submit"
-          dense
+      :disabled="actionDisabled"
-          unelevated
+    />
-          color="primary"
+    <CancelButton
-          :label="$t('save')"
+      v-if="!readonly"
-          @click="$emit('saveBranch', idx, item)"
+      @click="$emit('cancel')"
-          class="q-px-md q-ml-sm rounded"
+      class="q-ml-sm"
+      type="button"
+      :disabled="actionDisabled"
     />
   </span>
 
-      <div class="col-12" v-if="tab[idx]">
+  <div class="col-12" :style="{ opacity: actionDisabled ? '.5' : undefined }">
     <div class="rounded bordered">
       <q-tabs
-            v-model="tab[idx].tab"
+        v-model="tab"
         dense
         align="left"
         class="bordered-b"
@@ -110,19 +84,20 @@ defineProps<{
         <q-tab name="main" label="Main"></q-tab>
         <q-tab name="address" label="Address"></q-tab>
         <q-tab name="business" label="Business"></q-tab>
+        <q-tab name="contact" label="Contact"></q-tab>
       </q-tabs>
-          <q-tab-panels v-model="tab[idx].tab">
+      <q-tab-panels v-model="tab">
         <q-tab-panel name="main">
           <div class="row q-col-gutter-md">
             <q-input
               lazy-rules="ondemand"
               dense
               outlined
-                  :readonly="!editable"
+              :readonly="readonly"
               hide-bottom-space
               :label="$t('customerBranch.form.no')"
               v-model="item.branchNo"
-                  :for="`${prefixId}-input-branch-${idx}-branch-no`"
+              :for="`${prefixId}-input-branch-branch-no`"
               type="number"
               class="col-12 col-md-2"
             />
@@ -131,22 +106,21 @@ defineProps<{
               dense
               outlined
               readonly
-                  :disable="editable"
               hide-bottom-space
               :label="$t('customerBranch.form.code')"
               :model-value="item.code || '-'"
-                  :for="`${prefixId}-input-branch-${idx}-branch-code`"
+              :for="`${prefixId}-input-branch-branch-code`"
               class="col-12 col-md-4"
             />
             <q-input
               lazy-rules="ondemand"
               dense
               outlined
-                  :readonly="!editable"
+              :readonly="readonly"
               hide-bottom-space
               :label="$t('customerBranch.form.taxNo')"
               v-model="item.taxNo"
-                  :for="`${prefixId}-input-branch-${idx}-tax-no`"
+              :for="`${prefixId}-input-branch-tax-no`"
               type="number"
               class="col-12 col-md-4"
             />
@@ -154,22 +128,22 @@ defineProps<{
               lazy-rules="ondemand"
               dense
               outlined
-                  :readonly="!editable"
+              :readonly="readonly"
               hide-bottom-space
               :label="$t('customerBranch.form.name')"
               v-model="item.name"
-                  :for="`${prefixId}-input-branch-${idx}-tax-no`"
+              :for="`${prefixId}-input-branch-tax-no`"
               class="col-12 col-md-6"
             />
             <q-input
               lazy-rules="ondemand"
               dense
               outlined
-                  :readonly="!editable"
+              :readonly="readonly"
               hide-bottom-space
               :label="$t('customerBranch.form.nameEN')"
               v-model="item.nameEN"
-                  :for="`${prefixId}-input-branch-${idx}-tax-no`"
+              :for="`${prefixId}-input-branch-tax-no`"
               class="col-12 col-md-6"
             />
             <q-input
@@ -177,23 +151,23 @@ defineProps<{
               dense
               outlined
               v-if="customerType === 'CORP'"
-                  :readonly="!editable"
+              :readonly="readonly"
               hide-bottom-space
               :label="$t('customerBranch.form.registerName')"
               v-model="item.registerName"
-                  :for="`${prefixId}-input-branch-${idx}-register-name`"
+              :for="`${prefixId}-input-branch-register-name`"
               class="col-12 col-md-4"
             />
             <q-input
               lazy-rules="ondemand"
               dense
               outlined
-                  :readonly="!editable"
+              :readonly="readonly"
               hide-bottom-space
               v-if="customerType === 'CORP'"
               :label="$t('customerBranch.form.authorizedCapital')"
               v-model="item.authorizedCapital"
-                  :for="`${prefixId}-input-branch-${idx}-authorized-capital`"
+              :for="`${prefixId}-input-branch-authorized-capital`"
               class="col-12 col-md-4"
             />
             <VueDatePicker
@@ -206,7 +180,7 @@ defineProps<{
               :dark="$q.dark.isActive"
               :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
               :enableTimePicker="false"
-                  :disabled="!editable"
+              :disabled="readonly"
               class="col-md-4 col-12"
             >
               <template #year="{ value }">
@@ -223,26 +197,24 @@ defineProps<{
                   :label="$t('customerBranch.form.registerDate')"
                   dense
                   outlined
-                      :readonly="!editable"
+                  :readonly="readonly"
                   placeholder="DD/MM/YYYY"
-                      :mask="!editable ? '' : '##/##/####'"
+                  :mask="readonly ? '' : '##/##/####'"
                   :model-value="
                     item.registerDate
-                          ? !editable
+                      ? readonly
                         ? dateFormat(item.registerDate)
                         : dateFormat(item.registerDate, false, false, true)
                       : undefined
                   "
                   @update:model-value="
                     (v) => {
-                          if (editable && v && v.toString().length === 10) {
+                      if (readonly && v && v.toString().length === 10) {
                         const _date = parseAndFormatDate(v, $i18n.locale);
                         if (_date) {
                           item.registerDate?.setDate(_date.getDate());
                           item.registerDate?.setMonth(_date.getMonth());
-                              item.registerDate?.setFullYear(
+                          item.registerDate?.setFullYear(_date.getFullYear());
-                                _date.getFullYear(),
-                              );
                         } else {
                           item.registerDate = null;
                         }
@@ -260,7 +232,7 @@ defineProps<{
                   </template>
                   <template v-slot:append>
                     <q-icon
-                          v-if="!item.registerDate && editable"
+                      v-if="!item.registerDate && readonly"
                       name="mdi-close-circle"
                       class="cursor-pointer app-text-muted"
                       size="sm"
@@ -277,7 +249,7 @@ defineProps<{
             :prefix-id="prefixId || 'employer'"
             hide-title
             dense
-                :readonly="!editable"
+            :readonly="readonly"
             outlined
             :title="$t('form.address')"
             v-model:address="item.address"
@@ -294,7 +266,7 @@ defineProps<{
             dense
             outlined
             :prefix-id="prefixId || 'employer'"
-                :readonly="!editable"
+            :readonly="readonly"
             v-model:employment-office="item.employmentOffice"
             v-model:bussiness-type="item.bussinessType"
             v-model:bussiness-type-en="item.bussinessTypeEN"
@@ -306,9 +278,14 @@ defineProps<{
             v-model:wage-rate="item.wageRate"
           />
         </q-tab-panel>
+        <q-tab-panel name="contact">
+          <FormContact
+            :readonly="readonly"
+            v-model:email="item.email"
+            v-model:telephone="item.telephoneNo"
+          />
+        </q-tab-panel>
       </q-tab-panels>
     </div>
   </div>
-    </template>
-  </div>
 </template>

src/pages/03_customer-management/components/FormContact.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+defineProps<{
+  readonly?: boolean;
+  prefixId?: string;
+}>();
+const mail = defineModel<string>('mail');
+const telephone = defineModel<string>('telephone');
+</script>
+
+<template>
+  <div class="col-md-9 col-12 row q-col-gutter-md">
+    <q-input
+      lazy-rules="ondemand"
+      :for="`${prefixId}-input-mail`"
+      :id="`${prefixId}-input-mail`"
+      dense
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-md-6 col-12"
+      :label="$t('formDialogInputEmail')"
+      v-model="mail"
+    />
+    <q-input
+      lazy-rules="ondemand"
+      :for="`${prefixId}-input-telephone`"
+      :id="`${prefixId}-input-telephone`"
+      dense
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-md-6 col-12"
+      :label="$t('formDialogInputTelephone')"
+      v-model="telephone"
+    />
+  </div>
+</template>

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

@@ -33,11 +33,10 @@ export const useCustomerForm = defineStore('form-customer', () => {
     dialogOpen: boolean;
     dialogModal: boolean;
     branchIndex: number;
-    saveMode: 'customer' | 'branch';
     customerImageUrl: string;
     imageDialog: boolean;
     imageEdit: boolean;
-    editReadonly: boolean;
+    readonly: boolean;
     editCustomerId?: string;
     editCustomerBranchId?: string;
   }>({
@@ -45,10 +44,9 @@ export const useCustomerForm = defineStore('form-customer', () => {
     dialogOpen: false,
     dialogModal: false,
     imageDialog: false,
-    branchIndex: 0,
+    branchIndex: -1,
-    editReadonly: true,
+    readonly: true,
     imageEdit: false,
-    saveMode: 'customer',
     customerImageUrl: '',
     editCustomerId: '',
     editCustomerBranchId: '',
@@ -60,12 +58,14 @@ export const useCustomerForm = defineStore('form-customer', () => {
   );
 
   function isFormDataDifferent() {
+    console.log(resetFormData, currentFormData.value);
     return (
       JSON.stringify(resetFormData) !== JSON.stringify(currentFormData.value)
     );
   }
 
   function resetForm(clean = false) {
+    state.value.branchIndex = -1;
     if (clean) {
       defaultFormData.customerType = currentFormData.value.customerType;
       currentFormData.value = structuredClone(defaultFormData);
@@ -177,143 +177,8 @@ export const useCustomerForm = defineStore('form-customer', () => {
       payDate: new Date(),
       wageRate: 0,
     });
-  }
+    state.value.branchIndex =
-
+      (currentFormData.value.customerBranch?.length || 0) - 1;
-  async function submitForm() {
-    if (state.value.saveMode === 'customer') {
-      const _data = await submitFormCustomer();
-      if (_data) {
-        await assignFormData(_data.id);
-        state.value.dialogType = 'edit';
-        state.value.editReadonly = true;
-        state.value.editCustomerId = _data.id;
-      }
-    }
-    if (state.value.saveMode === 'branch') {
-      const _form = currentFormData.value.customerBranch?.at(
-        state.value.branchIndex,
-      );
-      if (_form) {
-        if (_form.id) {
-          const _data = await customerStore.editBranchById(_form.id, {
-            ..._form,
-            id: undefined,
-          });
-          if (
-            _data &&
-            currentFormData.value.customerBranch?.[state.value.branchIndex]
-          ) {
-            currentFormData.value.customerBranch[state.value.branchIndex] = {
-              id: _data.id,
-              code: _data.code,
-              branchNo: _data.branchNo,
-              address: _data.address,
-              addressEN: _data.addressEN,
-              provinceId: _data.provinceId,
-              districtId: _data.districtId,
-              subDistrictId: _data.subDistrictId,
-              zipCode: _data.zipCode,
-              email: _data.email,
-              telephoneNo: _data.telephoneNo,
-              name: _data.name,
-              status: undefined,
-              taxNo: _data.taxNo,
-              nameEN: _data.nameEN,
-              legalPersonNo: _data.legalPersonNo,
-              registerName: _data.registerName,
-              registerDate: new Date(_data.registerDate),
-              authorizedCapital: _data.authorizedCapital,
-              employmentOffice: _data.employmentOffice,
-              bussinessType: _data.bussinessType,
-              bussinessTypeEN: _data.bussinessTypeEN,
-              jobPosition: _data.jobPosition,
-              jobPositionEN: _data.jobPositionEN,
-              jobDescription: _data.jobDescription,
-              saleEmployee: _data.saleEmployee,
-              payDate: new Date(_data.payDate),
-              wageRate: _data.wageRate,
-            };
-            if (resetFormData.customerBranch?.[state.value.branchIndex]) {
-              resetFormData.customerBranch[state.value.branchIndex] =
-                structuredClone(
-                  toRaw(
-                    currentFormData.value.customerBranch[
-                      state.value.branchIndex
-                    ],
-                  ),
-                );
-            } else {
-              resetFormData.customerBranch?.push(
-                structuredClone(
-                  toRaw(
-                    currentFormData.value.customerBranch[
-                      state.value.branchIndex
-                    ],
-                  ),
-                ),
-              );
-            }
-            return;
-          }
-        }
-
-        if (!state.value.editCustomerId) {
-          throw new Error(
-            'Form mode is set to edit but no ID is provided. Make sure to set customer ID.',
-          );
-        }
-
-        const _data = await customerStore.createBranch({
-          ..._form,
-          customerId: state.value.editCustomerId,
-          id: undefined,
-        });
-
-        if (
-          _data &&
-          currentFormData.value.customerBranch?.[state.value.branchIndex]
-        ) {
-          currentFormData.value.customerBranch[state.value.branchIndex] = {
-            id: _data.id,
-            code: _data.code,
-            branchNo: _data.branchNo,
-            address: _data.address,
-            addressEN: _data.addressEN,
-            provinceId: _data.provinceId,
-            districtId: _data.districtId,
-            subDistrictId: _data.subDistrictId,
-            zipCode: _data.zipCode,
-            email: _data.email,
-            telephoneNo: _data.telephoneNo,
-            name: _data.name,
-            status: undefined,
-            taxNo: _data.taxNo,
-            nameEN: _data.nameEN,
-            legalPersonNo: _data.legalPersonNo,
-            registerName: _data.registerName,
-            registerDate: new Date(_data.registerDate),
-            authorizedCapital: _data.authorizedCapital,
-            employmentOffice: _data.employmentOffice,
-            bussinessType: _data.bussinessType,
-            bussinessTypeEN: _data.bussinessTypeEN,
-            jobPosition: _data.jobPosition,
-            jobPositionEN: _data.jobPositionEN,
-            jobDescription: _data.jobDescription,
-            saleEmployee: _data.saleEmployee,
-            payDate: new Date(_data.payDate),
-            wageRate: _data.wageRate,
-          };
-          if (resetFormData.customerBranch?.[state.value.branchIndex]) {
-            resetFormData.customerBranch[state.value.branchIndex] =
-              structuredClone(
-                toRaw(
-                  currentFormData.value.customerBranch[state.value.branchIndex],
-                ),
-              );
-          }
-        }
-      }
-    }
   }
 
   async function submitFormCustomer() {
@@ -329,7 +194,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
       );
     }
 
-    await customerStore.editById(state.value.editCustomerId, {
+    const _data = await customerStore.editById(state.value.editCustomerId, {
       ...currentFormData.value,
       status:
         currentFormData.value.status !== 'CREATED'
@@ -338,6 +203,13 @@ export const useCustomerForm = defineStore('form-customer', () => {
       image: currentFormData.value.image || undefined,
       customerBranch: undefined,
     });
+
+    if (_data) {
+      await assignFormData(_data.id);
+      state.value.dialogType = 'edit';
+      state.value.readonly = true;
+      state.value.editCustomerId = _data.id;
+    }
   }
 
   return {
@@ -347,7 +219,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     isFormDataDifferent,
     resetForm,
     assignFormData,
-    submitForm,
+    submitFormCustomer,
     addCurrentCustomerBranch,
   };
 });