From 59436725f7e8a3f944812d5506b73deee9e597a4 Mon Sep 17 00:00:00 2001 From: puriphatt Date: Wed, 28 Aug 2024 16:33:51 +0700 Subject: [PATCH] fix(01): upload image --- src/pages/01_branch-management/MainPage.vue | 35 ++++++++++--------- .../02_personnel-management/MainPage.vue | 22 ++---------- src/stores/branch/index.ts | 2 +- 3 files changed, 21 insertions(+), 38 deletions(-) diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue index af148fcf..f39e8886 100644 --- a/src/pages/01_branch-management/MainPage.vue +++ b/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([ const refImageUpload = ref(); const isImageEdit = ref(false); -const profileFileImg = ref(undefined); +const profileFile = ref(undefined); const imageUrl = ref(''); const prevImageUrl = ref(''); const currentNode = ref(); const imageDialog = ref(false); -const profileFile = ref(undefined); +const qrFile = ref(undefined); const qrCodeimageUrl = ref(''); const formBranchCount = ref(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, () => { 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>(); -const fieldDisplay = ref(); const hideStat = ref(false); const userCode = ref(); const currentUser = ref(); @@ -187,9 +186,7 @@ const hqId = ref(); const brId = ref(); const formDialogRef = ref(); const userStats = ref(); -const sortedUserStats = computed(() => { - return userStats.value?.slice().sort((a, b) => b.count - a.count); -}); + const typeStats = ref(); const agencyFile = ref([]); 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, diff --git a/src/stores/branch/index.ts b/src/stores/branch/index.ts index d31797ab..187fe186 100644 --- a/src/stores/branch/index.ts +++ b/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), })