verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

feat(claim_photo): add upload button
gitea/salix-front/pipeline/head This commit looks good Details

This commit is contained in:
Alex Moreno 2023-02-16 14:10:17 +01:00
parent 0b0e73d65b
commit 38a6b93a5d
5 changed files with 125 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/i18n/en/index.js
View File

@ -241,6 +241,7 @@ export default {
summary: 'Summary',
basicData: 'Basic Data',
rma: 'RMA',
photos: 'Photos',
},
list: {
customer: 'Customer',
@ -296,7 +297,7 @@ export default {
},
photo: {
fileDescription:
'Reclamacion ID {{claimId}} del cliente {{clientName}} id {{clientId}}',
'Reclamacion ID {claimId} del cliente {clientName} id {clientId}',
},
},
invoiceOut: {

4
src/i18n/es/index.js
View File

@ -240,6 +240,7 @@ export default {
summary: 'Resumen',
basicData: 'Datos básicos',
rma: 'RMA',
photos: 'Fotos',
},
list: {
customer: 'Cliente',
@ -294,8 +295,7 @@ export default {
returnOfMaterial: 'Autorización de retorno de materiales (RMA)',
},
photo: {
fileDescription:
'Claim id {{claimId}} from client {{clientName}} id {{clientId}}',
fileDescription: 'Claim id {claimId} from client {clientName} id {clientId}',
},
},
invoiceOut: {

151
src/pages/Claim/Card/ClaimPhoto.vue
View File

@ -3,6 +3,7 @@ import { ref, computed } from 'vue';
import axios from 'axios';
import { useQuasar } from 'quasar';
import VnConfirm from 'src/components/ui/VnConfirm.vue';
import TeleportSlot from 'src/components/ui/TeleportSlot.vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
@ -22,6 +23,7 @@ const claimId = computed(function () {
});
const claimDms = ref([]);
const claimDmsRef = ref();
const dmsType = ref({});
const config = ref({});
const dms = ref({});
@ -75,22 +77,28 @@ async function deleteDms(index) {
function setClaimDms(data) {
claimDms.value = data.map((media) => {
media.isVideo = media.dms.contentType == 'video/mp4';
media.url = getImagePath(media);
return media;
});
}
function uploadFile() {
async function uploadFile() {
claimDmsRef.value.fetch();
const element = document.createElement('input');
element.setAttribute('type', 'file');
element.setAttribute('multiple', true);
element.click();
element.addEventListener('change', () => setDefaultParams());
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,
@ -100,12 +108,32 @@ function setDefaultParams() {
dmsTypeId: dmsType.value.id,
description: t('claim.photo.fileDescription', {
claimId: claimId.value,
clientId: claimDms.value.clientFk,
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`;
await axios({
method: 'POST',
url: query,
data: formData,
params: dms.value,
});
quasar.notify({
message: t('globals.dataSaved'),
type: 'positive',
icon: 'check',
});
}
</script>
<template>
<fetch-data
@ -114,6 +142,7 @@ function setDefaultParams() {
@on-fetch="(data) => setClaimDms(data)"
limit="20"
auto-load
ref="claimDmsRef"
/>
<fetch-data
url="DmsTypes/findOne"
@ -133,8 +162,7 @@ function setDefaultParams() {
color="primary"
text-color="white"
size="md"
class="all-pointer-events absolute"
style="top: 10px; left: 10px; z-index: 1"
class="all-pointer-events absolute delete-button zindex"
@click.stop="viewDeleteDms(index)"
round
/>
@ -142,8 +170,7 @@ function setDefaultParams() {
name="play_arrow"
color="primary"
size="xl"
class="absolute-center"
style="z-index: 1"
class="absolute-center zindex"
v-if="media.isVideo"
@click.stop="openDialog(media.dmsFk)"
flat
@ -152,77 +179,76 @@ function setDefaultParams() {
</q-icon>
<q-card class="multimedia relative-position">
<q-img
:src="getImagePath(media)"
class="rounded-borders cursor-pointer"
:src="media.url"
class="rounded-borders cursor-pointer fit"
@click="openDialog(media.dmsFk)"
v-if="!media.isVideo"
>
</q-img>
<video
:src="getImagePath(media)"
class="rounded-borders cursor-pointer"
:src="media.url"
class="rounded-borders cursor-pointer fit"
muted="muted"
v-if="media.isVideo"
@click="openDialog(media.dmsFk)"
></video>
/>
</q-card>
</div>
</div>
<q-page-sticky position="bottom-right" :offset="[18, 18]">
<q-btn fab icon="add" color="primary" @click="uploadFile()" />
</q-page-sticky>
<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 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>
<!-- MULTIMEDIA DIALOG START-->
<q-dialog
v-model="multimediaDialog"
:maximized="multimediaMaximizedDialog"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card style="height: 80%; min-width: 80%">
<q-card-section class="row items-center q-pb-none q-gutter-md">
<q-avatar
:icon="icon"
color="primary"
text-color="white"
size="xl"
v-if="icon"
<q-toolbar class="absolute zindex close-button">
<q-space />
<q-btn icon="close" color="primary" round dense v-close-popup />
</q-toolbar>
<q-carousel swipeable animated v-model="multimediaSlide" arrows class="fit">
<q-carousel-slide
v-for="media of claimDms"
:key="media.dmsFk"
:name="media.dmsFk"
>
<q-img
:src="media.url"
class="fit"
fit="scale-down"
v-if="!media.isVideo"
/>
<span class="text-h6 text-grey">{{ message }}</span>
<q-space />
<q-btn icon="close" flat round dense v-close-popup />
</q-card-section>
<q-card-section class="q-pt-none">
<q-carousel swipeable animated v-model="multimediaSlide" arrows>
<q-carousel-slide
v-for="media of claimDms"
:key="media.dmsFk"
:name="media.dmsFk"
class="fit"
>
<q-img
height="100%"
fit="scale-down"
:src="getImagePath(media)"
v-if="!media.isVideo"
/>
<q-video
class="q-ma-none"
:src="getImagePath(media)"
v-if="media.isVideo"
muted
/>
</q-carousel-slide>
</q-carousel>
</q-card-section>
</q-card>
<q-video
class="q-ma-none fit"
:src="media.url"
v-if="media.isVideo"
muted
/>
</q-carousel-slide>
</q-carousel>
</q-dialog>
<!-- MULTIMEDIA DIALOG END-->
</template>
<style lang="scss" scoped>
.q-dialog__inner--minimized > div {
max-width: 80%;
}
.multimediaParent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
@ -238,14 +264,10 @@ function setDefaultParams() {
height: 250px;
.q-img {
height: 100%;
width: 100%;
object-fit: cover;
background-color: black;
}
video {
height: 100%;
width: 100%;
object-fit: cover;
background-color: black;
}
@ -255,9 +277,18 @@ function setDefaultParams() {
opacity: 0.5;
}
.q-video {
height: 100%;
width: 100%;
.delete-button {
top: 10px;
left: 10px;
}
.close-button {
top: 1%;
right: 10%;
}
.zindex {
z-index: 1;
}
</style>

36
src/pages/Claim/Card/ClaimRma.vue
View File

@ -6,7 +6,7 @@ import { useRoute } from 'vue-router';
import axios from 'axios';
import Paginate from 'src/components/PaginateData.vue';
import FetchData from 'components/FetchData.vue';
import TeleportSlot from 'components/ui/TeleportSlot';
import TeleportSlot from 'components/ui/TeleportSlot.vue';
import { toDate } from 'src/filters';
const quasar = useQuasar();
@ -90,22 +90,38 @@ function hide() {
<q-list>
<q-item class="q-pa-none">
<q-item-section>
<q-item-label caption>{{ t('claim.rma.user') }}</q-item-label>
<q-item-label>{{ row.worker.user.name }}</q-item-label>
<q-item-label caption>{{
t('claim.rma.user')
}}</q-item-label>
<q-item-label>{{
row.worker.user.name
}}</q-item-label>
</q-item-section>
</q-item>
<q-item class="q-pa-none">
<q-item-section>
<q-item-label caption>{{ t('claim.rma.created') }}</q-item-label>
<q-item-label caption>{{
t('claim.rma.created')
}}</q-item-label>
<q-item-label>
{{ toDate(row.created, { timeStyle: 'medium' }) }}
{{
toDate(row.created, {
timeStyle: 'medium',
})
}}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-item-section>
<q-card-actions vertical class="justify-between">
<q-btn flat round color="orange" icon="vn:bin" @click="confirmRemove(row.id)">
<q-btn
flat
round
color="orange"
icon="vn:bin"
@click="confirmRemove(row.id)"
>
<q-tooltip>{{ t('globals.remove') }}</q-tooltip>
</q-btn>
</q-card-actions>
@ -124,7 +140,13 @@ function hide() {
</q-card-section>
<q-card-actions align="right">
<q-btn flat :label="t('globals.no')" color="primary" v-close-popup autofocus />
<q-btn
flat
:label="t('globals.no')"
color="primary"
v-close-popup
autofocus
/>
<q-btn flat :label="t('globals.yes')" color="primary" @click="remove()" />
</q-card-actions>
</q-card>

2
src/router/modules/claim.js
View File

@ -81,7 +81,7 @@ export default {
path: 'photos',
meta: {
title: 'photos',
icon: 'vn:image',
icon: 'image',
},
component: () => import('src/pages/Claim/Card/ClaimPhoto.vue'),
},