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>