feat: ต่อ api ลบ

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

@@ -5,6 +5,7 @@ import { Icon } from '@iconify/vue';
 
 import useBranchStore from 'stores/branch';
 
+import { dialog } from 'src/stores/utils';
 import AppBox from 'components/app/AppBox.vue';
 import AddButton from 'components/AddButton.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
@@ -25,7 +26,7 @@ const { t } = useI18n();
 const modal = ref<boolean>(false);
 
 const profileFile = ref<File | undefined>(undefined);
-const imageUrl = ref<string | null>('');
+const qrCodeimageUrl = ref<string | null>('');
 
 const inputFile = (() => {
   const element = document.createElement('input');
@@ -34,7 +35,7 @@ const inputFile = (() => {
 
   const reader = new FileReader();
   reader.addEventListener('load', () => {
-    if (typeof reader.result === 'string') imageUrl.value = reader.result;
+    if (typeof reader.result === 'string') qrCodeimageUrl.value = reader.result;
   });
 
   element.addEventListener('change', () => {
@@ -141,6 +142,38 @@ function openDialog() {
   modal.value = true;
 }
 
+async function fetchBranchById(id: string) {
+  const res = await branchStore.fetchById(id);
+
+  if (res) {
+    qrCodeimageUrl.value = res.qrCodeImageUrl;
+    formData.value = {
+      headOfficeId: res.headOfficeId,
+      taxNo: res.taxNo,
+      nameEN: res.nameEN,
+      name: res.name,
+      addressEN: res.addressEN,
+      address: res.address,
+      zipCode: res.zipCode,
+      email: res.email,
+      contactName: res.contactName,
+      contact: '',
+      telephoneNo: res.telephoneNo,
+      longitude: res.longitude,
+      latitude: res.latitude,
+      subDistrictId: res.subDistrictId,
+      districtId: res.districtId,
+      provinceId: res.provinceId,
+      lineId: res.lineId,
+    };
+  }
+}
+
+function clearData() {
+  formData.value = structuredClone(defaultFormData);
+  profileFile.value = undefined;
+}
+
 function triggerCreate(type: string, id?: string, code?: string) {
   clearData();
 
@@ -159,7 +192,60 @@ function triggerCreate(type: string, id?: string, code?: string) {
   openDialog();
 }
 
+function triggerEdit(type: string, id: string, code?: string) {
+  fetchBranchById(id);
+  if (id && code) {
+    codeHq.value = {
+      id: id,
+      code: code,
+    };
+  }
+  if (type === 'subBranch' && id && code) {
+    formTypeBranch.value = 'subBranch';
+  } else {
+    formTypeBranch.value = 'headOffice';
+  }
+
+  formType.value = 'edit';
+
+  openDialog();
+}
+
+function triggerDelete(id: string) {
+  fetchBranchById(id);
+  if (id) {
+    dialog({
+      color: 'negative',
+      icon: 'mdi-alert',
+      title: 'ยืนยังการลบข้อมูล',
+      actionText: 'ตกลง',
+      persistent: true,
+      message: 'ท่านต้องการลบข้อมูลหรือมั้ย',
+      action: async () => {
+        await branchStore.deleteById(id);
+        await branchStore.fetchList({ pageSize: 99999 });
+      },
+      cancel: () => {},
+    });
+  }
+}
+
 async function onSubmit() {
+  if (formType.value === 'edit') {
+    if (!profileFile) {
+      await branchStore.editById(codeHq.value.id, formData.value);
+    } else {
+      await branchStore.editById(
+        codeHq.value.id,
+        formData.value,
+        profileFile.value,
+      );
+    }
+
+    await branchStore.fetchList({ pageSize: 99999 });
+    modal.value = false;
+  }
+
   if (formTypeBranch.value === 'headOffice') {
     if (formType.value === 'create' && profileFile.value) {
       await branchStore.create({
@@ -169,7 +255,9 @@ async function onSubmit() {
       await branchStore.fetchList({ pageSize: 99999 });
       modal.value = false;
     }
-  } else if (formTypeBranch.value === 'subBranch') {
+  }
+
+  if (formTypeBranch.value === 'subBranch') {
     if (formType.value === 'create' && profileFile.value) {
       formData.value.headOfficeId = codeHq.value.id;
 
@@ -183,11 +271,6 @@ async function onSubmit() {
   }
 }
 
-function clearData() {
-  formData.value = structuredClone(defaultFormData);
-  profileFile.value = undefined;
-}
-
 function changeTitle(
   formType: 'edit' | 'create' | 'delete',
   typeBranch: 'headOffice' | 'subBranch',
@@ -336,6 +419,23 @@ function changeTitle(
                               dense
                               class="row q-py-sm"
                               style="white-space: nowrap"
+                              @click="
+                                () => {
+                                  if (node.isHeadOffice) {
+                                    triggerEdit(
+                                      'headOffice',
+                                      node.id,
+                                      node.code,
+                                    );
+                                  } else {
+                                    triggerEdit(
+                                      'subBranch',
+                                      node.id,
+                                      node.code,
+                                    );
+                                  }
+                                }
+                              "
                             >
                               <q-icon
                                 name="mdi-pencil-outline"
@@ -352,6 +452,7 @@ function changeTitle(
                               clickable
                               class="row"
                               style="white-space: nowrap"
+                              @click="triggerDelete(node.id)"
                             >
                               <q-icon
                                 name="mdi-trash-can-outline"
@@ -568,7 +669,7 @@ function changeTitle(
       <FormQr
         title="Qr code"
         :separator="true"
-        :qr="imageUrl"
+        :qr="qrCodeimageUrl"
         @upload="
           () => {
             inputFile.click();