feat: customer branch management

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

@@ -52,7 +52,6 @@ import FormEmployeeOther from 'src/components/03_customer-management/FormEmploye
 import useOptionStore from 'src/stores/options';
 import { DialogContainer, DialogHeader } from 'src/components/dialog';
 
-
 const { t, locale } = useI18n();
 const $q = useQuasar();
 const route = useRoute();
@@ -263,6 +262,26 @@ function deleteCustomerById(id: string) {
   });
 }
 
+async function deleteCustomerBranchById(id: string) {
+  return await new Promise((resolve) => {
+    dialog({
+      color: 'negative',
+      icon: 'mdi-alert',
+      title: t('deleteConfirmTitle'),
+      actionText: t('ok'),
+      persistent: true,
+      message: t('deleteConfirmMessage'),
+      action: async () => {
+        await customerStore.deleteBranchById(id);
+        flowStore.rotate();
+        resolve(true);
+      },
+      cancel: () => {
+        resolve(false);
+      },
+    });
+  });
+}
 async function fetchListOfOptionBranch() {
   if (registerAbleBranchOption.value) return;
 
@@ -1931,10 +1950,36 @@ watch(
               />
             </div>
             <q-form
-              @submit.prevent="async () => await fetchListCustomer()"
               class="full-width"
               v-if="customerFormData.customerBranch"
               v-for="(_, idx) in customerFormData.customerBranch"
+              @submit.prevent="
+                async () => {
+                  if (!customerFormData.customerBranch) return;
+                  if (!customerFormState.editCustomerId) return;
+
+                  if (!customerFormData.customerBranch[idx].id) {
+                    await customerStore.createBranch({
+                      ...customerFormData.customerBranch[idx],
+                      customerId: customerFormState.editCustomerId,
+                      id: undefined,
+                    });
+                  } else {
+                    await customerStore.editBranchById(
+                      customerFormData.customerBranch[idx].id,
+                      {
+                        ...customerFormData.customerBranch[idx],
+                        id: undefined,
+                      },
+                    );
+                  }
+
+                  await customerFormStore.assignFormData(
+                    customerFormState.editCustomerId,
+                  );
+                  customerFormStore.resetForm();
+                }
+              "
             >
               <EmployerFormBranch
                 v-if="!!customerFormState.editCustomerId"
@@ -1948,7 +1993,21 @@ watch(
                 :readonly="customerFormState.branchIndex !== idx"
                 @edit="() => (customerFormState.branchIndex = idx)"
                 @cancel="() => customerFormUndo(false)"
-                @delete="() => {}"
+                @delete="
+                  async () => {
+                    if (!!customerFormData.customerBranch?.[idx].id) {
+                      const action = await deleteCustomerBranchById(
+                        customerFormData.customerBranch[idx].id,
+                      );
+                      if (action) {
+                        await customerFormStore.assignFormData(
+                          customerFormState.editCustomerId,
+                        );
+                      }
+                      customerFormStore.resetForm();
+                    }
+                  }
+                "
                 @save="() => {}"
               />
             </q-form>

src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue

@@ -80,6 +80,7 @@ watch(
       />
       <span>{{ $t('customer.form.group.basicInfo') }}</span>
       <EditButton
+        icon-only
         v-if="readonly && !create"
         type="button"
         @click="$emit('edit')"
@@ -87,18 +88,21 @@ watch(
         :disabled="actionDisabled"
       />
       <DeleteButton
+        icon-only
         v-if="readonly && !create"
         @click="$emit('delete')"
         type="button"
         :disabled="actionDisabled"
       />
       <SaveButton
+        icon-only
         v-if="!readonly"
         @click="$emit('save')"
         class="q-ml-auto"
         :disabled="actionDisabled"
       />
       <CancelButton
+        icon-only
         v-if="!readonly && !create"
         type="button"
         :disabled="actionDisabled"

src/pages/03_customer-management/components/employer/EmployerFormBranch.vue

@@ -12,10 +12,7 @@ import CancelButton from 'src/components/button/CancelButton.vue';
 
 const item = defineModel<NonNullable<CustomerCreate['customerBranch']>[number]>(
   'customerBranch',
-  {
+  { required: true },
-    required: true,
-    default: [],
-  },
 );
 const tab = ref('main');
 
@@ -43,6 +40,7 @@ defineProps<{
     {{ $t('customer.form.branch.title', { name: item.branchNo || 0 }) }}
     <EditButton
       v-if="readonly"
+      style="width: 5rem"
       @click="$emit('edit')"
       class="q-ml-auto"
       type="button"
@@ -50,12 +48,14 @@ defineProps<{
     />
     <DeleteButton
       v-if="readonly"
+      style="width: 5rem"
       @click="$emit('delete')"
       type="button"
       :disabled="actionDisabled"
     />
     <SaveButton
       v-if="!readonly"
+      style="width: 5rem"
       @click="$emit('save')"
       class="q-ml-auto"
       type="submit"
@@ -63,6 +63,7 @@ defineProps<{
     />
     <CancelButton
       v-if="!readonly"
+      style="width: 5rem"
       @click="$emit('cancel')"
       type="button"
       :disabled="actionDisabled"

src/pages/03_customer-management/components/employer/EmployerFormContact.vue

@@ -3,7 +3,7 @@ defineProps<{
   readonly?: boolean;
   prefixId?: string;
 }>();
-const mail = defineModel<string>('mail');
+const mail = defineModel<string>('email');
 const telephone = defineModel<string>('telephone');
 </script>