feat(claim_photo): drag&drop
This commit is contained in:
parent
38a6b93a5d
commit
ed2aedd9d4
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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: '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;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<fetch-data
|
||||
url="ClaimDms"
|
||||
url="Claims"
|
||||
:filter="claimDmsFilter"
|
||||
@on-fetch="(data) => setClaimDms(data)"
|
||||
@on-fetch="([data]) => setClaimDms(data)"
|
||||
limit="20"
|
||||
auto-load
|
||||
ref="claimDmsRef"
|
||||
|
|
@ -155,8 +170,38 @@ async function create(files) {
|
|||
@on-fetch="(data) => (config = data)"
|
||||
auto-load
|
||||
/>
|
||||
<div class="multimediaParent bg-transparent">
|
||||
<div v-for="(media, index) of claimDms" :key="index" class="relative-position">
|
||||
<div
|
||||
:class="['container', { dragFile }]"
|
||||
@drop.prevent="onDrop"
|
||||
@dragenter.prevent
|
||||
@dragover.prevent="onDrag"
|
||||
>
|
||||
<div
|
||||
class="flex flex-center items-center text-grey q-mt-md column"
|
||||
v-if="dragFile"
|
||||
>
|
||||
<q-icon size="xl" name="file_download" />
|
||||
<h5>
|
||||
<!-- {{ t('claim.photo.dragDrop') }} -->
|
||||
</h5>
|
||||
</div>
|
||||
<div
|
||||
class="text-center text-grey q-mt-md cursor-pointer"
|
||||
v-if="!claimDms?.length && !dragFile"
|
||||
@click="uploadFile()"
|
||||
>
|
||||
<q-icon size="xl" name="image"></q-icon>
|
||||
<q-icon size="xl" name="movie"></q-icon>
|
||||
<h5>
|
||||
<!-- {{ t('claim.photo.noData') }} -->
|
||||
</h5>
|
||||
</div>
|
||||
<div class="multimediaParent bg-transparent" v-if="claimDms?.length && !dragFile">
|
||||
<div
|
||||
v-for="(media, index) of claimDms"
|
||||
:key="index"
|
||||
class="relative-position"
|
||||
>
|
||||
<q-btn
|
||||
icon="delete"
|
||||
color="primary"
|
||||
|
|
@ -167,13 +212,12 @@ async function create(files) {
|
|||
round
|
||||
/>
|
||||
<q-icon
|
||||
name="play_arrow"
|
||||
name="play_circle"
|
||||
color="primary"
|
||||
size="xl"
|
||||
class="absolute-center zindex"
|
||||
v-if="media.isVideo"
|
||||
@click.stop="openDialog(media.dmsFk)"
|
||||
flat
|
||||
>
|
||||
<q-tooltip>Video</q-tooltip>
|
||||
</q-icon>
|
||||
|
|
@ -195,21 +239,22 @@ async function create(files) {
|
|||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<teleport-slot v-if="!quasar.platform.is.mobile" to="#header-actions">
|
||||
<!-- <teleport-slot v-if="!quasar.platform.is.mobile" to="#header-actions">
|
||||
<div class="row q-gutter-x-sm">
|
||||
<q-btn @click="uploadFile()" icon="add" color="primary" dense rounded>
|
||||
<q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
|
||||
</q-btn>
|
||||
<q-separator vertical />
|
||||
</div>
|
||||
</teleport-slot>
|
||||
</teleport-slot> -->
|
||||
|
||||
<teleport-slot to=".q-footer">
|
||||
<!-- <teleport-slot to=".q-footer">
|
||||
<q-tabs align="justify" inline-label narrow-indicator>
|
||||
<q-tab @click="uploadFile()" icon="add_circle" :label="t('globals.add')" />
|
||||
</q-tabs>
|
||||
</teleport-slot>
|
||||
</teleport-slot> -->
|
||||
|
||||
<!-- MULTIMEDIA DIALOG START-->
|
||||
<q-dialog
|
||||
|
|
@ -233,12 +278,9 @@ async function create(files) {
|
|||
fit="scale-down"
|
||||
v-if="!media.isVideo"
|
||||
/>
|
||||
<q-video
|
||||
class="q-ma-none fit"
|
||||
:src="media.url"
|
||||
v-if="media.isVideo"
|
||||
muted
|
||||
/>
|
||||
<video class="q-ma-none fit" v-if="media.isVideo" controls muted autoplay>
|
||||
<source :src="media.url" type="video/mp4" />
|
||||
</video>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</q-dialog>
|
||||
|
|
@ -246,6 +288,10 @@ async function create(files) {
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
min-height: 80vh;
|
||||
min-width: 80%;
|
||||
}
|
||||
.q-dialog__inner--minimized > div {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
|
@ -290,6 +336,10 @@ async function create(files) {
|
|||
.zindex {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dragFile {
|
||||
border: 2px dashed $color-spacer;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
|
|
|
|||
Loading…
Reference in New Issue