From ed2aedd9d4117b2434fd9bb43c9bb655c47a62f3 Mon Sep 17 00:00:00 2001 From: alexm Date: Mon, 20 Feb 2023 15:12:48 +0100 Subject: [PATCH] feat(claim_photo): drag&drop --- src/i18n/en/index.js | 5 +- src/i18n/es/index.js | 5 +- src/pages/Claim/Card/ClaimPhoto.vue | 216 +++++++++++++++++----------- 3 files changed, 140 insertions(+), 86 deletions(-) diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js index 056338b46..d9df1342f 100644 --- a/src/i18n/en/index.js +++ b/src/i18n/en/index.js @@ -296,8 +296,9 @@ export default { returnOfMaterial: 'Return of material authorization (RMA)', }, photo: { - fileDescription: - 'Reclamacion ID {claimId} del cliente {clientName} id {clientId}', + fileDescription: 'Claim id {claimId} from client {clientName} id {clientId}', + noData: 'There are no images/videos, click here or drag and drop the file', + dragDrop: 'Drag and drop it here', }, }, invoiceOut: { diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js index 1a19a329c..bdbee15a2 100644 --- a/src/i18n/es/index.js +++ b/src/i18n/es/index.js @@ -295,7 +295,10 @@ export default { returnOfMaterial: 'Autorización de retorno de materiales (RMA)', }, photo: { - fileDescription: 'Claim id {claimId} from client {clientName} id {clientId}', + fileDescription: + 'Reclamacion ID {claimId} del cliente {clientName} id {clientId}', + noData: 'No hay imágenes/videos, haz click aquí o arrastra y suelta el archivo', + dragDrop: 'Arrástralo y sueltalo aquí', }, }, invoiceOut: { diff --git a/src/pages/Claim/Card/ClaimPhoto.vue b/src/pages/Claim/Card/ClaimPhoto.vue index 3aa6fc3b4..cdf139971 100644 --- a/src/pages/Claim/Card/ClaimPhoto.vue +++ b/src/pages/Claim/Card/ClaimPhoto.vue @@ -10,7 +10,6 @@ import { useI18n } from 'vue-i18n'; import { useSession } from 'src/composables/useSession'; import FetchData from 'components/FetchData.vue'; -// import FormModel from 'components/FormModel.vue'; const router = useRouter(); const { t } = useI18n(); @@ -19,31 +18,43 @@ const token = session.getToken(); const quasar = useQuasar(); const claimId = computed(function () { - return router.currentRoute.value.params.id; + return 1; }); const claimDms = ref([]); +const client = ref({}); const claimDmsRef = ref(); const dmsType = ref({}); const config = ref({}); -const dms = ref({}); +const dragFile = ref(false); +const dragFileTimeout = ref(); const claimDmsFilter = ref({ include: [ { - relation: 'dms', + relation: 'client', + scope: { + fields: ['id', 'name'], + }, + }, + { + relation: 'claimDms', + scope: { + include: { + relation: 'dms', + scope: { + fields: ['contentType'], + }, + }, + }, }, ], - where: { claimFk: claimId.value }, + where: { id: claimId.value }, }); const multimediaDialog = ref(); const multimediaMaximizedDialog = ref(); const multimediaSlide = ref(); -function getImagePath(media) { - return `http://localhost:9000/api/Claims/${media.dmsFk}/downloadFile?access_token=${token}`; -} - function openDialog(dmsId) { multimediaSlide.value = dmsId; multimediaDialog.value = true; @@ -63,9 +74,8 @@ function viewDeleteDms(dmsId) { } async function deleteDms(index) { - console.log(index); const dmsId = claimDms.value[index].dmsFk; - await axios.post(`ClaimDms/${dmsId}/removeFile`); + // await axios.post(`ClaimDms/${dmsId}/removeFile`); quasar.notify({ message: t('globals.dataDeleted'), type: 'positive', @@ -75,11 +85,12 @@ async function deleteDms(index) { } function setClaimDms(data) { - claimDms.value = data.map((media) => { + claimDms.value = data.claimDms.map((media) => { media.isVideo = media.dms.contentType == 'video/mp4'; - media.url = getImagePath(media); + media.url = `${window.location.origin}/api/Claims/${media.dmsFk}/downloadFile?access_token=${token}`; return media; }); + client.value = data.client; } async function uploadFile() { @@ -90,42 +101,35 @@ async function uploadFile() { element.click(); element.addEventListener('change', () => { - setDefaultParams(); create(element.files).then(() => claimDmsRef.value.fetch()); }); } -function setDefaultParams() { - console.log(config.value); - console.log(dmsType.value); - console.log(claimDms.value); - dms.value = { - hasFile: false, - hasFileAttached: false, - reference: claimId.value, - warehouseId: config.value.warehouseFk, - companyId: config.value.companyFk, - dmsTypeId: dmsType.value.id, - description: t('claim.photo.fileDescription', { - claimId: claimId.value, - clientName: claimDms.value.clientName, - clientId: claimDms.value.clientFk, - }).toUpperCase(), - }; - console.log(dms.value); -} - async function create(files) { const formData = new FormData(); for (let i = 0; i < files.length; i++) formData.append(files[i].name, files[i]); const query = `claims/${claimId.value}/uploadFile`; + const dms = { + hasFile: false, + hasFileAttached: false, + reference: claimId.value, + warehouseId: config.value.warehouseFk, + companyId: config.value.companyFk, + dmsTypeId: dmsType.value.id, + description: t('claim.photo.fileDescription', { + claimId: claimId.value, + clientName: client.value.name, + clientId: client.value.id, + }).toUpperCase(), + }; + await axios({ method: 'POST', url: query, data: formData, - params: dms.value, + params: dms, }); quasar.notify({ @@ -134,12 +138,23 @@ async function create(files) { icon: 'check', }); } + +function onDrop($data) { + dragFile.value = false; + create($data.dataTransfer.files).then(() => claimDmsRef.value.fetch()); +} + +function onDrag() { + clearTimeout(dragFileTimeout.value); + dragFileTimeout.value = setTimeout(() => (dragFile.value = false), 500); + dragFile.value = true; +}