forked from verdnatura/salix-front
Merge pull request 'refs #4800 Terminar summary del módulo reclamaciones' (!47) from 4800-finish-claim-summary into dev
Reviewed-on: verdnatura/salix-front#47 Reviewed-by: Joan Sanchez <joan@verdnatura.es>
This commit is contained in:
commit
7b57568d8e
|
|
@ -288,6 +288,14 @@ export default {
|
|||
responsibility: 'Responsibility',
|
||||
company: 'Company',
|
||||
person: 'Employee/Customer',
|
||||
notes: 'Notes',
|
||||
photos: 'Photos',
|
||||
development: 'Development',
|
||||
reason: 'Reason',
|
||||
result: 'Result',
|
||||
responsible: 'Responsible',
|
||||
worker: 'Worker',
|
||||
redelivery: 'Redelivery'
|
||||
},
|
||||
basicData: {
|
||||
customer: 'Customer',
|
||||
|
|
|
|||
|
|
@ -287,6 +287,14 @@ export default {
|
|||
responsibility: 'Responsabilidad',
|
||||
company: 'Empresa',
|
||||
person: 'Comercial/Cliente',
|
||||
notes: 'Observaciones',
|
||||
photos: 'Fotos',
|
||||
development: 'Trazabilidad',
|
||||
reason: 'Motivo',
|
||||
result: 'Consecuencias',
|
||||
responsible: 'Responsable',
|
||||
worker: 'Trabajador',
|
||||
redelivery: 'Devolución'
|
||||
},
|
||||
basicData: {
|
||||
customer: 'Cliente',
|
||||
|
|
|
|||
|
|
@ -5,9 +5,13 @@ import { useI18n } from 'vue-i18n';
|
|||
import { toDate, toCurrency } from 'src/filters';
|
||||
import CardSummary from 'components/ui/CardSummary.vue';
|
||||
import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const session = useSession();
|
||||
const token = session.getToken();
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
|
|
@ -76,14 +80,82 @@ function stateColor(code) {
|
|||
if (code === 'managed') return 'orange';
|
||||
if (code === 'resolved') return 'red';
|
||||
}
|
||||
|
||||
const developmentColumns = ref([
|
||||
{
|
||||
name: 'claimReason',
|
||||
label: 'claim.summary.reason',
|
||||
field: (row) => row.claimReason.description,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'claimResult',
|
||||
label: 'claim.summary.result',
|
||||
field: (row) => row.claimResult.description,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'claimResponsible',
|
||||
label: 'claim.summary.responsible',
|
||||
field: (row) => row.claimResponsible.description,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'worker',
|
||||
label: 'claim.summary.worker',
|
||||
field: (row) => row.worker.user.nickname,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'claimRedelivery',
|
||||
label: 'claim.summary.redelivery',
|
||||
field: (row) => row.claimRedelivery.description,
|
||||
sortable: true,
|
||||
},
|
||||
]);
|
||||
const claimDms = ref([]);
|
||||
const multimediaDialog = ref();
|
||||
const multimediaSlide = ref();
|
||||
const claimDmsFilter = ref({
|
||||
include: [
|
||||
{
|
||||
relation: 'dms',
|
||||
},
|
||||
],
|
||||
where: { claimFk: entityId.value },
|
||||
});
|
||||
|
||||
function setClaimDms(data) {
|
||||
if (!data) return;
|
||||
|
||||
data.forEach((media) => {
|
||||
claimDms.value.push({
|
||||
isVideo: media.dms.contentType == 'video/mp4',
|
||||
url: `/api/Claims/${media.dmsFk}/downloadFile?access_token=${token}`,
|
||||
dmsFk: media.dmsFk,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function openDialog(dmsId) {
|
||||
multimediaSlide.value = dmsId;
|
||||
multimediaDialog.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="ClaimDms"
|
||||
:filter="claimDmsFilter"
|
||||
@on-fetch="(data) => setClaimDms(data)"
|
||||
limit="20"
|
||||
auto-load
|
||||
/>
|
||||
<CardSummary ref="summary" :url="`Claims/${entityId}/getSummary`">
|
||||
<template #header="{ entity: { claim } }">
|
||||
{{ claim.id }} - {{ claim.client.name }}
|
||||
</template>
|
||||
<template #body="{ entity: { claim, salesClaimed } }">
|
||||
<template #body="{ entity: { developments, observations, claim, salesClaimed } }">
|
||||
<QCardSection class="row q-pa-none q-col-gutter-md">
|
||||
<div class="col">
|
||||
<QList>
|
||||
|
|
@ -139,7 +211,21 @@ function stateColor(code) {
|
|||
</QList>
|
||||
</div>
|
||||
</QCardSection>
|
||||
<QCardSection class="q-pa-md">
|
||||
<QCardSection class="q-pa-md" v-if="observations.length > 0">
|
||||
<h6>{{ t('claim.summary.notes') }}</h6>
|
||||
<div class="note-list" v-for="note in observations" :key="note.id">
|
||||
<div class="note-caption">
|
||||
<span
|
||||
>{{ note.worker.firstName }} {{ note.worker.lastName }}
|
||||
</span>
|
||||
<span>{{ toDate(note.created) }}</span>
|
||||
</div>
|
||||
<div class="note-text">
|
||||
<span>{{ note.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</QCardSection>
|
||||
<QCardSection class="q-pa-md" v-if="salesClaimed.length > 0">
|
||||
<h6>{{ t('claim.summary.details') }}</h6>
|
||||
<QTable :columns="detailsColumns" :rows="salesClaimed" flat>
|
||||
<template #header="props">
|
||||
|
|
@ -151,6 +237,57 @@ function stateColor(code) {
|
|||
</template>
|
||||
</QTable>
|
||||
</QCardSection>
|
||||
<QCardSection class="q-pa-md" v-if="claimDms.length > 0">
|
||||
<h6>{{ t('claim.summary.photos') }}</h6>
|
||||
<div class="container">
|
||||
<div class="multimediaParent bg-transparent">
|
||||
<div
|
||||
v-for="(media, index) of claimDms"
|
||||
:key="index"
|
||||
class="relative-position"
|
||||
>
|
||||
<QIcon
|
||||
name="play_circle"
|
||||
color="primary"
|
||||
size="xl"
|
||||
class="absolute-center zindex"
|
||||
v-if="media.isVideo"
|
||||
@click.stop="openDialog(media.dmsFk)"
|
||||
>
|
||||
<QTooltip>Video</QTooltip>
|
||||
</QIcon>
|
||||
<QCard class="multimedia relative-position">
|
||||
<QImg
|
||||
:src="media.url"
|
||||
class="rounded-borders cursor-pointer fit"
|
||||
@click="openDialog(media.dmsFk)"
|
||||
v-if="!media.isVideo"
|
||||
>
|
||||
</QImg>
|
||||
<video
|
||||
:src="media.url"
|
||||
class="rounded-borders cursor-pointer fit"
|
||||
muted="muted"
|
||||
v-if="media.isVideo"
|
||||
@click="openDialog(media.dmsFk)"
|
||||
/>
|
||||
</QCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</QCardSection>
|
||||
<QCardSection class="q-pa-md" v-if="developments.length > 0">
|
||||
<h6>{{ t('claim.summary.development') }}</h6>
|
||||
<QTable :columns="developmentColumns" :rows="developments" flat>
|
||||
<template #header="props">
|
||||
<QTr :props="props">
|
||||
<QTh v-for="col in props.cols" :key="col.name" :props="props">
|
||||
{{ t(col.label) }}
|
||||
</QTh>
|
||||
</QTr>
|
||||
</template>
|
||||
</QTable>
|
||||
</QCardSection>
|
||||
<QCardSection class="q-pa-md">
|
||||
<h6>{{ t('claim.summary.actions') }}</h6>
|
||||
<QSeparator />
|
||||
|
|
@ -172,6 +309,104 @@ function stateColor(code) {
|
|||
/>
|
||||
</div>
|
||||
</QCardSection>
|
||||
<QDialog
|
||||
v-model="multimediaDialog"
|
||||
transition-show="slide-up"
|
||||
transition-hide="slide-down"
|
||||
>
|
||||
<QToolbar class="absolute zindex close-button">
|
||||
<QSpace />
|
||||
<QBtn icon="close" color="primary" round dense v-close-popup />
|
||||
</QToolbar>
|
||||
<QCarousel
|
||||
swipeable
|
||||
animated
|
||||
v-model="multimediaSlide"
|
||||
arrows
|
||||
class="fit"
|
||||
>
|
||||
<QCarouselSlide
|
||||
v-for="media of claimDms"
|
||||
:key="media.dmsFk"
|
||||
:name="media.dmsFk"
|
||||
>
|
||||
<QImg
|
||||
:src="media.url"
|
||||
class="fit"
|
||||
fit="scale-down"
|
||||
v-if="!media.isVideo"
|
||||
/>
|
||||
<video
|
||||
class="q-ma-none fit"
|
||||
v-if="media.isVideo"
|
||||
controls
|
||||
muted
|
||||
autoplay
|
||||
>
|
||||
<source :src="media.url" type="video/mp4" />
|
||||
</video>
|
||||
</QCarouselSlide>
|
||||
</QCarousel>
|
||||
</QDialog>
|
||||
</template>
|
||||
</CardSummary>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
min-width: 80%;
|
||||
}
|
||||
.q-dialog__inner--minimized > div {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.multimediaParent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
|
||||
|
||||
grid-auto-rows: auto;
|
||||
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.multimedia {
|
||||
transition: all 0.5s;
|
||||
opacity: 1;
|
||||
height: 250px;
|
||||
|
||||
.q-img {
|
||||
object-fit: cover;
|
||||
background-color: black;
|
||||
}
|
||||
video {
|
||||
object-fit: cover;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.multimedia:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
top: 1%;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.zindex {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.note-list {
|
||||
width: 100%;
|
||||
border: 0.1rem solid $grey-7;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.note-caption {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
color: $grey-7;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue