fix(01): upload image

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

@@ -45,6 +45,7 @@ import {
   UndoButton,
 } from 'components/button';
 
+const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
 const $q = useQuasar();
 const { t } = useI18n();
 const utilsStore = useUtilsStore();
@@ -122,13 +123,13 @@ const formBankBook = ref<BankBook[]>([
 
 const refImageUpload = ref();
 const isImageEdit = ref(false);
-const profileFileImg = ref<File | undefined>(undefined);
+const profileFile = ref<File | undefined>(undefined);
 const imageUrl = ref<string>('');
 const prevImageUrl = ref<string>('');
 const currentNode = ref<BranchWithChildren>();
 const imageDialog = ref(false);
 
-const profileFile = ref<File | undefined>(undefined);
+const qrFile = ref<File | undefined>(undefined);
 const qrCodeimageUrl = ref<string | null>('');
 const formBranchCount = ref<number>(0);
 
@@ -143,9 +144,9 @@ const inputFile = (() => {
   });
 
   element.addEventListener('change', () => {
-    profileFile.value = element.files?.[0];
-    if (profileFile.value) {
-      reader.readAsDataURL(profileFile.value);
+    qrFile.value = element.files?.[0];
+    if (qrFile.value) {
+      reader.readAsDataURL(qrFile.value);
     }
   });
 
@@ -326,8 +327,8 @@ async function fetchBranchById(id: string) {
   const res = await branchStore.fetchById(id, { includeContact: true });
 
   if (res) {
-    qrCodeimageUrl.value = res.qrCodeImageUrl;
-    imageUrl.value = res.imageUrl;
+    qrCodeimageUrl.value = `${apiBaseUrl}/branch/${res.id}/line-image`;
+    imageUrl.value = `${apiBaseUrl}/branch/${res.id}/branch-image`;
     prevImageUrl.value = res.imageUrl;
 
     const updatedBank = res.bank.map((item) => {
@@ -368,7 +369,7 @@ function clearData() {
     id: '',
     code: '',
   };
-  profileFile.value = undefined;
+  qrFile.value = undefined;
 
   formBankBook.value = [
     {
@@ -412,7 +413,7 @@ function triggerCreate(
     formData.value.headOfficeId = id;
     formData.value.code = code;
     formData.value.codeHeadOffice = code;
-    formBranchCount.value = count;
+    formBranchCount.value = count || 0;
   }
 
   formType.value = 'create';
@@ -558,8 +559,8 @@ async function onSubmit() {
         ...formData.value,
         status: undefined,
       },
+      qrFile.value,
       profileFile.value,
-      profileFileImg.value,
       formBankBook.value,
     );
 
@@ -573,8 +574,8 @@ async function onSubmit() {
       await branchStore.create(
         {
           ...formData.value,
-          qrCodeImage: profileFile.value,
-          imageUrl: profileFileImg.value,
+          qrCodeImage: qrFile.value,
+          imageUrl: profileFile.value,
         },
         formBankBook.value,
       );
@@ -600,7 +601,7 @@ async function onSubmit() {
           field: t('branch.form.abbrev'),
           name: formData.value.code,
         }),
-        actionText: t('agree'),
+        actionText: t('dialog.action.ok'),
         persistent: true,
         title: t('form.warning.title'),
         cancel: () => {},
@@ -657,9 +658,9 @@ function handleHold(node: BranchWithChildren) {
 }
 
 watch(
-  () => profileFileImg.value,
+  () => profileFile.value,
   () => {
-    if (profileFileImg.value !== null) isImageEdit.value = true;
+    if (profileFile.value !== null) isImageEdit.value = true;
   },
 );
 
@@ -1412,7 +1413,7 @@ watch(currentHq, () => {
       () => (
         (formBranchCount = 0),
         (modal = false),
-        (profileFileImg = undefined),
+        (profileFile = undefined),
         (isImageEdit = false),
         (isSubCreate = false)
       )
@@ -1965,7 +1966,7 @@ watch(currentHq, () => {
   <ImageUploadDialog
     ref="refImageUpload"
     v-model:dialogState="imageDialog"
-    v-model:file="profileFileImg as File"
+    v-model:file="profileFile as File"
     v-model:image-url="imageUrl"
     :hiddenFooter="!isImageEdit && !modal"
     @save="imageDialog = false"

src/pages/02_personnel-management/MainPage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, computed } from 'vue';
-import useUtilsStore, { baseUrl, dialog } from 'stores/utils';
+import useUtilsStore, { dialog } from 'stores/utils';
 import { calculateAge } from 'src/utils/datetime';
 import { useQuasar, type QTableProps } from 'quasar';
 import { storeToRefs } from 'pinia';
@@ -166,7 +166,6 @@ const fieldSelected = ref<
 ]);
 
 const refImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
-const fieldDisplay = ref();
 const hideStat = ref(false);
 const userCode = ref<string>();
 const currentUser = ref<User>();
@@ -187,9 +186,7 @@ const hqId = ref<string>();
 const brId = ref<string>();
 const formDialogRef = ref();
 const userStats = ref<BranchUserStats[]>();
-const sortedUserStats = computed(() => {
-  return userStats.value?.slice().sort((a, b) => b.count - a.count);
-});
+
 const typeStats = ref<UserTypeStats>();
 const agencyFile = ref<File[]>([]);
 const agencyFileList = ref<{ name: string; url: string }[]>([]);
@@ -290,25 +287,10 @@ const columns = [
   },
 ] satisfies QTableProps['columns'];
 
-// reader.addEventListener('load', () => {
-//   if (typeof reader.result === 'string') {
-//     urlProfile.value = reader.result;
-//   }
-
-//   if (infoDrawerEdit.value) infoPersonCard.value[0].img = urlProfile.value;
-// });
-
 watch(profileFileImg, () => {
   if (profileFileImg.value) reader.readAsDataURL(profileFileImg.value);
 });
 
-const selectorList = computed(() => [
-  { label: 'USER', count: typeStats.value?.USER || 0 },
-  { label: 'MESSENGER', count: typeStats.value?.MESSENGER || 0 },
-  { label: 'DELEGATE', count: typeStats.value?.DELEGATE || 0 },
-  { label: 'AGENCY', count: typeStats.value?.AGENCY || 0 },
-]);
-
 async function openDialog(
   action?: 'FORM' | 'INFO',
   id?: string,

src/stores/branch/index.ts

@@ -113,7 +113,7 @@ const useBranchStore = defineStore('api-branch', () => {
 
     if (imageUrl) {
       await api
-        .put(`/branch/${res.data.id}/branch-image`, qrCodeImage, {
+        .put(`/branch/${res.data.id}/branch-image`, imageUrl, {
           headers: { 'Content-Type': imageUrl.type },
           onUploadProgress: (e) => console.log(e),
         })