fix(01): edit image profile

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

@@ -23,7 +23,6 @@ import FormBranchInformation from 'components/01_branch-management/FormBranchInf
 import FormLocation from 'components/01_branch-management/FormLocation.vue';
 import FormQr from 'components/01_branch-management/FormQr.vue';
 import FormBranchContact from 'components/01_branch-management/FormBranchContact.vue';
-import FormImage from 'components/01_branch-management/FormImage.vue';
 import DrawerInfo from 'components/DrawerInfo.vue';
 import InfoForm from 'components/02_personnel-management/InfoForm.vue';
 import TreeCompoent from 'src/components/TreeCompoent.vue';
@@ -103,32 +102,14 @@ const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
   },
 ]);
 
+const refImageUpload = ref();
 const isImageEdit = ref(false);
-const profileFileImg = ref<File | null>(null);
-const imageUrl = ref<string | null>('');
+const profileFileImg = ref<File | undefined>(undefined);
+const imageUrl = ref<string>('');
+const prevImageUrl = ref<string>('');
 const currentNode = ref<BranchWithChildren>();
 const imageDialog = ref(false);
 
-const inputFileImg = (() => {
-  const element = document.createElement('input');
-  element.type = 'file';
-  element.accept = 'image/*';
-
-  const reader = new FileReader();
-  reader.addEventListener('load', () => {
-    if (typeof reader.result === 'string') imageUrl.value = reader.result;
-  });
-
-  element.addEventListener('change', () => {
-    profileFileImg.value = element.files?.[0];
-    if (profileFileImg.value) {
-      reader.readAsDataURL(profileFileImg.value);
-    }
-  });
-
-  return element;
-})();
-
 const profileFile = ref<File | undefined>(undefined);
 const qrCodeimageUrl = ref<string | null>('');
 
@@ -311,6 +292,7 @@ async function fetchBranchById(id: string) {
   if (res) {
     qrCodeimageUrl.value = res.qrCodeImageUrl;
     imageUrl.value = res.imageUrl;
+    prevImageUrl.value = res.imageUrl;
 
     formData.value = {
       headOfficeId: res.headOfficeId,
@@ -337,7 +319,7 @@ async function fetchBranchById(id: string) {
 
 function clearData() {
   formData.value = structuredClone(defaultFormData);
-  imageUrl.value = null;
+  imageUrl.value = '';
   qrCodeimageUrl.value = null;
   currentEdit.value = {
     id: '',
@@ -348,6 +330,7 @@ function clearData() {
 
 async function undo() {
   formType.value = 'view';
+  imageUrl.value = prevImageUrl.value;
   formData.value = prevFormData.value;
 }
 
@@ -493,8 +476,8 @@ async function onSubmit() {
     );
 
     await branchStore.fetchList({ pageSize: 99999 });
+    if (!imageDialog.value) modalDrawer.value = false;
     modal.value = false;
-    modalDrawer.value = false;
   }
 
   if (formType.value === 'create') {
@@ -567,16 +550,16 @@ function handleHold(node: BranchWithChildren) {
   };
 }
 
-function openImageDialog(isEdit?: boolean) {
-  if (isEdit) isImageEdit.value = true;
-  else isImageEdit.value = false;
-  imageDialog.value = true;
-}
-
-function handleImageUpload(file: File | null, url: string | null) {
-  imageUrl.value = url;
+async function handleImageUpload(file: File | null, url: string | null) {
+  if (formType.value === 'view') {
+    formType.value = 'edit';
+    await onSubmit();
+    formType.value = 'view';
+  }
+  if (formType.value === 'edit') {
+    await onSubmit();
+  }
   imageDialog.value = false;
-  // profileFileImg = file;
 }
 
 watch(
@@ -1448,21 +1431,25 @@ watch(currentHq, () => {
         onSubmit();
       }
     "
-    :close="() => ((modal = false), (profileFileImg = null))"
+    :close="
+      () => (
+        (modal = false), (profileFileImg = undefined), (isImageEdit = false)
+      )
+    "
   >
     <div class="q-mx-lg q-mt-lg">
       <!-- title="บริษัทจ๊อบส์ เวิร์คเกอร์ เซอร์วิส จำกัด"
       caption="Jobs Worker Service Co., Ltd." -->
       <ProfileBanner
         active
+        v-model:cover-url="imageUrl"
         :hideFade="imageUrl === '' || imageUrl === null"
         :img="imageUrl || null"
-        :cover="imageUrl || null"
         icon="mdi-office-building-outline"
         color="hsla(var(--pink-6-hsl)/1)"
         bgColor="hsla(var(--pink-6-hsl)/0.15)"
-        @view="openImageDialog"
-        @edit="inputFileImg.click()"
+        @view="imageDialog = true"
+        @edit="refImageUpload && refImageUpload.browse()"
         :menu="formMenuIcon"
       />
     </div>
@@ -1596,14 +1583,17 @@ watch(currentHq, () => {
     :editData="() => drawerEdit()"
     :submit="() => onSubmit()"
     :delete-data="() => triggerDelete(currentEdit.id)"
-    :close="() => ((modalDrawer = false), flowStore.rotate())"
+    :close="
+      () => ((modalDrawer = false), flowStore.rotate(), (isImageEdit = false))
+    "
     :statusBranch="formData.status"
   >
     <InfoForm>
       <div class="q-mx-lg q-mt-lg">
         <ProfileBanner
           active
-          hideFade
+          v-model:cover-url="imageUrl"
+          :hideFade="imageUrl === '' || imageUrl === null"
           :img="imageUrl || null"
           :cover="imageUrl || null"
           :title="formData.name"
@@ -1611,8 +1601,8 @@ watch(currentHq, () => {
           icon="mdi-office-building-outline"
           color="hsla(var(--pink-6-hsl)/1)"
           bgColor="hsla(var(--pink-6-hsl)/0.15)"
-          @view="openImageDialog"
-          @edit="inputFileImg.click()"
+          @view="imageDialog = true"
+          @edit="refImageUpload && refImageUpload.browse()"
           :readonly="formType === 'view'"
           :menu="formMenuIcon"
         />
@@ -1872,8 +1862,9 @@ watch(currentHq, () => {
   </q-dialog>
 
   <ImageUploadDialog
+    ref="refImageUpload"
     v-model:dialogState="imageDialog"
-    v-model:file="profileFileImg"
+    v-model:file="profileFileImg as File"
     v-model:image-url="imageUrl"
     :hiddenFooter="!isImageEdit"
     clearButton