fix: แก้ function แก้ไข สร้าง

src/pages/01_branch-management/MainPage.vue

@@ -104,11 +104,6 @@ onMounted(async () => {
 
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
 
-const currentHq = ref<{ id: string; code: string }>({
-  id: '',
-  code: '',
-});
-
 const beforeBranch = ref<{ id: string; code: string }>({
   id: '',
   code: '',
@@ -158,8 +153,8 @@ const formDialogRef = ref();
 
 const formType = ref<'create' | 'edit' | 'delete' | 'view'>('create');
 const formTypeBranch = ref<'headOffice' | 'subBranch'>('headOffice');
-const codeHq = ref<{ id: string; code: string }>({ id: '', code: '' });
+const currentHq = ref<{ id: string; code: string }>({ id: '', code: '' });
-const codeSubBranch = ref<{ id: string; code: string }>({ id: '', code: '' });
+const currentEdit = ref<{ id: string; code: string }>({ id: '', code: '' });
 const formData = ref<Omit<BranchCreate, 'qrCodeImage' | 'imageUrl'>>(
   structuredClone(defaultFormData),
 );
@@ -184,10 +179,7 @@ async function fetchBranchById(id: string) {
   if (res) {
     qrCodeimageUrl.value = res.qrCodeImageUrl;
     imageUrl.value = res.imageUrl;
-    codeSubBranch.value = {
+
-      id: res.id,
-      code: res.code,
-    };
     formData.value = {
       headOfficeId: res.headOfficeId,
       taxNo: res.taxNo,
@@ -198,7 +190,7 @@ async function fetchBranchById(id: string) {
       zipCode: res.zipCode,
       email: res.email,
       contactName: res.contactName,
-      contact: res.contact[0].telephoneNo,
+      contact: res.contact.length > 0 ? res.contact[0].telephoneNo : ' ',
       telephoneNo: res.telephoneNo,
       longitude: res.longitude,
       latitude: res.latitude,
@@ -215,70 +207,30 @@ function clearData() {
   formData.value = structuredClone(defaultFormData);
   imageUrl.value = null;
   qrCodeimageUrl.value = null;
-  codeSubBranch.value = {
+  currentEdit.value = {
     id: '',
     code: '',
   };
   profileFile.value = undefined;
 }
 
-async function triggerView(
-  id: string,
-  typeBranch: 'headOffice' | 'subBranch',
-  code?: string,
-) {
-  await fetchBranchById(id);
-  if (id && code && typeBranch === 'headOffice') {
-    formTypeBranch.value = 'headOffice';
-    codeHq.value = {
-      id: id,
-      code: code,
-    };
-  }
-  if (typeBranch === 'subBranch' && id && code) {
-    formTypeBranch.value = 'subBranch';
-    codeHq.value = {
-      id: id,
-      code: code,
-    };
-  }
-
-  const currentRecord = branchData.value.result.find((x) => x.id === id);
-
-  if (!currentRecord) return;
-
-  const currentRecordHead = branchData.value.result.find(
-    (x) => x.id === currentRecord.headOfficeId,
-  );
-
-  if (currentRecordHead) {
-    codeHq.value.code = currentRecordHead.code;
-  }
-
-  formTypeBranch.value = typeBranch;
-  formType.value = 'view';
-
-  openDrawer();
-}
-
 async function undo() {
   formType.value = 'view';
   formData.value = prevFormData.value;
 }
 
-function triggerCreate(type: string, id?: string, code?: string) {
+function triggerCreate(
+  type: 'headOffice' | 'subBranch',
+  id?: string,
+  code?: string,
+) {
   clearData();
 
-  if (type === 'subBranch' && id && code) {
+  formTypeBranch.value = type;
-    formTypeBranch.value = 'subBranch';
+  currentHq.value = {
-    codeHq.value = {
+    id: id ?? '',
-      id: id,
+    code: code ?? '',
-      code: code,
+  };
-    };
-  } else {
-    formTypeBranch.value = 'headOffice';
-    codeHq.value = { id: '', code: '' };
-  }
 
   formType.value = 'create';
   openDialog();
@@ -291,39 +243,40 @@ function drawerEdit() {
   };
 }
 
-async function triggerEdit(type: string, id: string, code?: string) {
+async function triggerEdit(
+  openFormType: string,
+  id: string,
+  typeBranch: 'headOffice' | 'subBranch',
+) {
   await fetchBranchById(id);
+  if (openFormType === 'form') {
+    formType.value = 'edit';
+    openDialog();
+  }
+  if (openFormType === 'drawer') {
+    formType.value = 'view';
+    openDrawer();
+  }
 
-  if (id && code && type === 'headOffice') {
+  formTypeBranch.value = typeBranch;
-    formTypeBranch.value = 'headOffice';
-    codeHq.value = {
-      id: id,
-      code: code,
-    };
-  }
-  if (type === 'subBranch' && id && code) {
-    formTypeBranch.value = 'subBranch';
-    codeHq.value = {
-      id: id,
-      code: code,
-    };
-  }
 
   const currentRecord = branchData.value.result.find((x) => x.id === id);
 
   if (!currentRecord) return;
 
+  currentEdit.value = {
+    id: currentRecord.id,
+    code: currentRecord.code,
+  };
+
   const currentRecordHead = branchData.value.result.find(
     (x) => x.id === currentRecord.headOfficeId,
   );
 
   if (currentRecordHead) {
-    codeHq.value.code = currentRecordHead.code;
+    currentHq.value.id = currentRecordHead.id;
+    currentHq.value.code = currentRecordHead.code;
   }
-
-  formType.value = 'edit';
-
-  openDialog();
 }
 
 function triggerDelete(id: string) {
@@ -348,77 +301,34 @@ function triggerDelete(id: string) {
 
 async function onSubmit() {
   if (formType.value === 'edit') {
-    if (modalDrawer.value) {
+    await branchStore.editById(
-      dialog({
+      currentEdit.value.id,
-        color: 'primary',
+      {
-        icon: 'mdi-pencil-outline',
+        ...formData.value,
-        title: 'ยืนยันการแก้ไขข้อมูล',
+        status: undefined,
-        actionText: 'ตกลง',
+      },
-        persistent: true,
+      profileFile.value,
-        message: 'คุณต้องการแก้ไขข้อมูล ใช่หรือไม่',
+      profileFileImg.value,
-        action: async () => {
+    );
-          await branchStore.editById(
-            codeHq.value.id,
-            {
-              ...formData.value,
-              status: undefined,
-            },
-            profileFile.value,
-            profileFileImg.value,
-          );
-          await branchStore.fetchList({ pageSize: 99999 });
-          formType.value = 'view';
-        },
-        cancel: () => {},
-      });
-    } else {
-      await branchStore.editById(
-        codeHq.value.id,
-        {
-          ...formData.value,
-          status: undefined,
-        },
-        profileFile.value,
-        profileFileImg.value,
-      );
 
-      await branchStore.fetchList({ pageSize: 99999 });
+    await branchStore.fetchList({ pageSize: 99999 });
-      modal.value = false;
+    modal.value = false;
-    }
+    modalDrawer.value = false;
   }
 
-  if (formTypeBranch.value === 'headOffice') {
+  if (formType.value === 'create') {
-    if (
+    if (formTypeBranch.value === 'subBranch') {
-      formType.value === 'create' &&
+      formData.value.headOfficeId = currentHq.value.id;
-      profileFile.value &&
-      profileFileImg.value
-    ) {
-      await branchStore.create({
-        ...formData.value,
-        qrCodeImage: profileFile.value,
-        imageUrl: profileFileImg.value,
-      });
-      await branchStore.fetchList({ pageSize: 99999 });
-      modal.value = false;
     }
-  }
 
-  if (formTypeBranch.value === 'subBranch') {
+    await branchStore.create({
-    if (
+      ...formData.value,
-      formType.value === 'create' &&
+      qrCodeImage: profileFile.value,
-      profileFile.value &&
+      imageUrl: profileFileImg.value,
-      profileFileImg.value
+    });
-    ) {
-      formData.value.headOfficeId = codeHq.value.id;
 
-      await branchStore.create({
+    await branchStore.fetchList({ pageSize: 99999 });
-        ...formData.value,
+    modal.value = false;
-        qrCodeImage: profileFile.value,
-        imageUrl: profileFileImg.value,
-      });
-      await branchStore.fetchList({ pageSize: 99999 });
-      modal.value = false;
-    }
   }
 
   const _stats = await branchStore.stats();
@@ -591,9 +501,9 @@ watch(locale, () => {
                             <q-item
                               @click="
                                 if (node.isHeadOffice) {
-                                  triggerView(node.id, 'headOffice', node.code);
+                                  triggerEdit('drawer', node.id, 'headOffice');
                                 } else {
-                                  triggerView(node.id, 'subBranch', node.code);
+                                  triggerEdit('drawer', node.id, 'subBranch');
                                 }
                               "
                               clickable
@@ -619,17 +529,9 @@ watch(locale, () => {
                               @click="
                                 () => {
                                   if (node.isHeadOffice) {
-                                    triggerEdit(
+                                    triggerEdit('form', node.id, 'headOffice');
-                                      'headOffice',
-                                      node.id,
-                                      node.code,
-                                    );
                                   } else {
-                                    triggerEdit(
+                                    triggerEdit('form', node.id, 'subBranch');
-                                      'subBranch',
-                                      node.id,
-                                      node.code,
-                                    );
                                   }
                                 }
                               "
@@ -882,9 +784,9 @@ watch(locale, () => {
                 @view-detail="
                   (b) => {
                     if (b.hq) {
-                      triggerView(b.id, 'headOffice', b.branchLabelCode);
+                      triggerEdit('drawer', b.id, 'headOffice');
                     } else {
-                      triggerView(b.id, 'subBranch', b.branchLabelCode);
+                      triggerEdit('drawer', b.id, 'subBranch');
                     }
                   }
                 "
@@ -904,7 +806,7 @@ watch(locale, () => {
     v-model:province-id="formData.provinceId"
     v-model:district-id="formData.districtId"
     v-model:sub-district-id="formData.subDistrictId"
-    :title="changeTitle(formType, formTypeBranch) + ' ' + codeSubBranch.code"
+    :title="changeTitle(formType, formTypeBranch) + ' ' + currentEdit.code"
     :titleFormAddress="$t('formDialogTitleAddress')"
     :addressSeparator="true"
     :submit="
@@ -915,8 +817,8 @@ watch(locale, () => {
   >
     <template #information>
       <FormBranchInformation
-        v-model:code="codeHq.code"
+        v-model:code="currentHq.code"
-        v-model:code-sub-branch="codeSubBranch.code"
+        v-model:code-sub-branch="currentEdit.code"
         v-model:taxNo="formData.taxNo"
         v-model:name="formData.name"
         v-model:nameEN="formData.nameEN"
@@ -985,14 +887,14 @@ watch(locale, () => {
   <DrawerInfo
     ref="formDialogRef"
     v-model:drawerOpen="modalDrawer"
-    :title="changeTitle(formType, formTypeBranch) + ' ' + codeSubBranch.code"
+    :title="changeTitle(formType, formTypeBranch) + ' ' + currentEdit.code"
     :titleFormAddress="$t('formDialogTitleAddress')"
     :addressSeparator="true"
     :undo="() => undo()"
     :isEdit="formType === 'edit'"
     :editData="() => drawerEdit()"
     :submit="() => onSubmit()"
-    :delete-data="() => triggerDelete(codeSubBranch.id)"
+    :delete-data="() => triggerDelete(currentEdit.id)"
     :close="() => (modalDrawer = false)"
     :statusBranch="formData.status"
   >
@@ -1007,8 +909,8 @@ watch(locale, () => {
       >
         <template #information>
           <FormBranchInformation
-            v-model:code="codeHq.code"
+            v-model:code="currentHq.code"
-            v-model:code-sub-branch="codeSubBranch.code"
+            v-model:code-sub-branch="currentEdit.code"
             v-model:taxNo="formData.taxNo"
             v-model:name="formData.name"
             v-model:nameEN="formData.nameEN"