From 7ab9f69ef89a210512abe096b305b33a3ae50d8a Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 12 Sep 2024 16:41:09 +0700
Subject: [PATCH] refactor: img dialog => remove img function

---
 src/components/ImageUploadDialog.vue          |  13 +-
 src/pages/01_branch-management/MainPage.vue   | 122 +++++++++---------
 .../02_personnel-management/MainPage.vue      |   3 +-
 src/pages/03_customer-management/MainPage.vue |   8 +-
 src/pages/04_product-service/MainPage.vue     |  10 +-
 src/stores/product-service/index.ts           |   4 +-
 6 files changed, 82 insertions(+), 78 deletions(-)

diff --git a/src/components/ImageUploadDialog.vue b/src/components/ImageUploadDialog.vue
index bba1d632..5987567c 100644
--- a/src/components/ImageUploadDialog.vue
+++ b/src/components/ImageUploadDialog.vue
@@ -61,6 +61,7 @@ const inputFile = (() => {
 })();
 
 const selectedImg = ref('');
+const currentImag = ref('');
 const tempImage = ref<string | null>('');
 
 reader.addEventListener('load', () => {
@@ -130,20 +131,17 @@ function selectImg(name: string) {
 
 function closeCheckToDefault() {
   let imgNameList: string[];
-  let currentSelected: string;
   let inList: boolean;
 
   if (props.onCreate) {
     imgNameList = onCreateData.value.list.map((v) => v.url || '');
-    currentSelected = imageUrl.value;
   } else {
     imgNameList = dataList.value.list.map((v) => v.split('/').pop() || '');
-    currentSelected = dataList.value.selectedImage;
   }
 
-  inList = imgNameList.includes(currentSelected);
+  inList = imgNameList.includes(currentImag.value);
 
-  if (!inList && currentSelected !== '') {
+  if (!inList && currentImag.value !== '') {
     selectImg('');
     emit('submit', selectedImg.value);
   }
@@ -159,6 +157,7 @@ watch(
       } else {
         tempImage.value = `${imageUrl.value}?ts=${Date.now()}`;
         selectedImg.value = dataList.value.selectedImage;
+        currentImag.value = dataList.value.selectedImage;
       }
     } else {
       tempImage.value = '';
@@ -185,7 +184,7 @@ watch(
         <div style="width: 38.61px" />
         <div style="flex: 1"><slot name="title" /></div>
         <div>
-          <CancelButton v-close-popup icon-only @click="closeCheckToDefault" />
+          <CancelButton icon-only v-close-popup @click="closeCheckToDefault" />
         </div>
       </div>
 
@@ -378,7 +377,7 @@ watch(
         <SaveButton
           id="btn-save-img"
           outlined
-          :disabled="dataList.selectedImage === selectedImg"
+          :disabled="currentImag === selectedImg"
           :label="$t('general.apply')"
           @click="$emit('submit', selectedImg)"
         />
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 0d78e4d9..122fa8dd 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1817,66 +1817,66 @@ watch(currentHq, () => {
         </template>
 
         <template v-if="currentTab === 'attachment'">
-        <AddressForm
-          id="form-address"
-          dense
-          outlined
-          separator
-          prefix-id="default"
-          :title="'form.address'"
-          v-model:address="formData.address"
-          v-model:addressEN="formData.addressEN"
-          v-model:province-id="formData.provinceId"
-          v-model:district-id="formData.districtId"
-          v-model:sub-district-id="formData.subDistrictId"
-          v-model:zip-code="formData.zipCode"
-        />
-        <FormLocation
-          id="form-location"
-          :readonly="formType === 'view'"
-          :separator="true"
-          v-model:latitude="formData.latitude"
-          v-model:longitude="formData.longitude"
-          outlined
-          dense
-          title="branch.form.group.location"
-        />
-        <FormQr
-          id="form-qr"
-          title="QR Code"
-          :separator="true"
-          :qr="qrCodeimageUrl"
-          :readonly="formType === 'view'"
-          @view-qr="
-            () => {
-              triggerEditQrCodeLine();
-            }
-          "
-          @edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
-        />
-        <FormBank
-          id="form-bank"
-          title="branch.form.group.bankAccount"
-          dense
-          v-model:bank-book-list="formBankBook"
-          @view-qr="
-            (i) => {
-              currentIndexQrCodeBank = i;
-              triggerEditQrCodeBank();
-            }
-          "
-          @edit-qr="
-            (i) => {
-              currentIndexQrCodeBank = i;
-              refQrCodeUpload && refQrCodeUpload.browse();
-            }
-          "
-        />
-        <FormBranchAdmin
-          id="form-branch-admin-view"
-          :admin="currentBranchAdmin"
-        />
-        <!-- <FormImage
+          <AddressForm
+            id="form-address"
+            dense
+            outlined
+            separator
+            prefix-id="default"
+            :title="'form.address'"
+            v-model:address="formData.address"
+            v-model:addressEN="formData.addressEN"
+            v-model:province-id="formData.provinceId"
+            v-model:district-id="formData.districtId"
+            v-model:sub-district-id="formData.subDistrictId"
+            v-model:zip-code="formData.zipCode"
+          />
+          <FormLocation
+            id="form-location"
+            :readonly="formType === 'view'"
+            :separator="true"
+            v-model:latitude="formData.latitude"
+            v-model:longitude="formData.longitude"
+            outlined
+            dense
+            title="branch.form.group.location"
+          />
+          <FormQr
+            id="form-qr"
+            title="QR Code"
+            :separator="true"
+            :qr="qrCodeimageUrl"
+            :readonly="formType === 'view'"
+            @view-qr="
+              () => {
+                triggerEditQrCodeLine();
+              }
+            "
+            @edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
+          />
+          <FormBank
+            id="form-bank"
+            title="branch.form.group.bankAccount"
+            dense
+            v-model:bank-book-list="formBankBook"
+            @view-qr="
+              (i) => {
+                currentIndexQrCodeBank = i;
+                triggerEditQrCodeBank();
+              }
+            "
+            @edit-qr="
+              (i) => {
+                currentIndexQrCodeBank = i;
+                refQrCodeUpload && refQrCodeUpload.browse();
+              }
+            "
+          />
+          <FormBranchAdmin
+            id="form-branch-admin-view"
+            :admin="currentBranchAdmin"
+          />
+          <!-- <FormImage
           :readonly="formType === 'view'"
           v-model:image="imageUrl"
           @upload="
@@ -2355,7 +2355,7 @@ watch(currentHq, () => {
         if (!currentId) return;
         const name = v.split('/').pop() || '';
         await branchStore.deleteImageByName(currentId, name);
-        await fetchImageList(currentId, name);
+        await fetchImageList(currentId, formData.selectedImage || '');
       }
     "
     @submit="
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 7c00c480..d821233d 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1972,10 +1972,9 @@ watch(
       async (v) => {
         if (!v) return;
         if (!currentUser) return;
-
         const name = v.split('/').pop() || '';
         await userStore.deleteImageByName(currentUser?.id, name);
-        await fetchImageList(currentUser?.id, name);
+        await fetchImageList(currentUser?.id, currentUser.selectedImage || '');
       }
     "
     @submit="
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index fbb395e9..0375e36f 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2739,7 +2739,7 @@ const emptyCreateDialog = ref(false);
         );
         await fetchImageList(
           customerFormState.editCustomerId,
-          name,
+          customerFormData.selectedImage || '',
           'customer',
         );
       }
@@ -2844,7 +2844,11 @@ const emptyCreateDialog = ref(false);
         if (!currentFromDataEmployee.id) return;
         const name = v.split('/').pop() || '';
         await employeeStore.deleteImageByName(currentFromDataEmployee.id, name);
-        await fetchImageList(currentFromDataEmployee.id, name, 'employee');
+        await fetchImageList(
+          currentFromDataEmployee.id,
+          currentFromDataEmployee.selectedImage || '',
+          'employee',
+        );
       }
     "
     @submit="
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 8ea9bd18..c398ab68 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -4280,15 +4280,15 @@ watch(
     @add-image="
       async (v) => {
         if (!v) return;
-        if (!currentIdProduct) return;
+        if (!currentIdProduct && !currentIdService) return;
         const res = await productServiceStore.addImageList(
           v,
-          currentIdProduct,
+          dialogProductEdit ? currentIdProduct : currentIdService,
           Date.now(),
           dialogProductEdit ? 'product' : 'service',
         );
         await fetchImageList(
-          currentIdProduct,
+          dialogProductEdit ? currentIdProduct : currentIdService,
           res,
           dialogProductEdit ? 'product' : 'service',
         );
@@ -4308,7 +4308,9 @@ watch(
         );
         await fetchImageList(
           dialogProductEdit ? currentIdProduct : currentIdService,
-          name,
+          dialogProductEdit
+            ? formDataProduct.selectedImage || ''
+            : formDataProductService.selectedImage || '',
           type,
         );
       }
diff --git a/src/stores/product-service/index.ts b/src/stores/product-service/index.ts
index 052435e6..4393582f 100644
--- a/src/stores/product-service/index.ts
+++ b/src/stores/product-service/index.ts
@@ -586,12 +586,12 @@ const useProductServiceStore = defineStore('api-product-service', () => {
 
   async function addImageList(
     file: File,
-    userId: string,
+    id: string,
     name: string,
     type: 'product' | 'service',
   ) {
     await api
-      .put(`/${type}/${userId}/image/${name}`, file, {
+      .put(`/${type}/${id}/image/${name}`, file, {
         headers: { 'Content-Type': file.type },
         onUploadProgress: (e) => console.log(e),
       })