Merge pull request 'refs #4800 Terminar summary del módulo reclamaciones' (!47) from 4800-finish-claim-summary into dev

Reviewed-on: #47
Reviewed-by: Joan Sanchez <joan@verdnatura.es>

src/i18n/en/index.js

@@ -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',

src/i18n/es/index.js

@@ -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',

src/pages/Claim/Card/ClaimSummary.vue

@@ -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>