Merge pull request 'Ticket volume' (!490) from hyervoni/salix-front-mindshore:feature/TicketVolume into dev

Reviewed-on: #490
Reviewed-by: Alex Moreno <alexm@verdnatura.es>
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>

src/i18n/locale/en.yml

@@ -444,6 +444,7 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
+        volume: Volume
         observation: Notes
         ticketAdvance: Advance tickets
         futureTickets: Future tickets

src/i18n/locale/es.yml

@@ -443,6 +443,7 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
+        volume: Volumen
         observation: Notas
         ticketAdvance: Adelantar tickets
         futureTickets: Tickets a futuro

src/pages/Ticket/Card/TicketVolume.vue

@@ -0,0 +1,153 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import FetchData from 'components/FetchData.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { dashIfEmpty } from 'src/filters';
+import axios from 'axios';
+
+const route = useRoute();
+const stateStore = useStateStore();
+const { t } = useI18n();
+const salesRef = ref(null);
+
+watch(
+    () => route.params.id,
+    async () => {
+        await nextTick();
+        salesRef.value?.fetch();
+    }
+);
+
+const salesFilter = computed(() => ({
+    include: { relation: 'item' },
+    order: 'concept',
+    where: { ticketFk: route.params.id },
+    limit: 20,
+}));
+
+const sales = ref([]);
+const packingTypeVolume = ref([]);
+const rows = computed(() => sales.value);
+
+const columns = computed(() => [
+    {
+        label: t('volume.item'),
+        name: 'item',
+        align: 'left',
+    },
+    {
+        label: t('volume.description'),
+        name: 'description',
+        align: 'left',
+    },
+    {
+        label: t('volume.packingType'),
+        name: 'quantity',
+        field: (row) => row.item.itemPackingTypeFk,
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('volume.quantity'),
+        name: 'quantity',
+        field: 'quantity',
+        align: 'left',
+    },
+    {
+        label: t('volume.volumeQuantity'),
+        name: 'quantity',
+        field: (row) => row.saleVolume?.volume,
+        align: 'left',
+    },
+]);
+
+const applyVolumes = async (salesData) => {
+    try {
+        if (!salesData.length) return;
+
+        sales.value = salesData;
+        const ticket = sales.value[0].ticketFk;
+        const { data } = await axios.get(`Tickets/${ticket}/getVolume`);
+        const volumes = new Map(data.saleVolume.map((volume) => [volume.saleFk, volume]));
+
+        sales.value.forEach((sale) => {
+            sale.saleVolume = volumes.get(sale.id);
+        });
+
+        packingTypeVolume.value = data.packingTypeVolume;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+onMounted(() => {
+    stateStore.rightDrawer = true;
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <FetchData
+        ref="salesRef"
+        url="sales"
+        :filter="salesFilter"
+        @on-fetch="(data) => applyVolumes(data)"
+        auto-load
+    />
+    <RightMenu v-if="packingTypeVolume.length">
+        <template #right-panel>
+            <QCard
+                v-for="(packingType, index) in packingTypeVolume"
+                :key="index"
+                class="q-pa-md q-mb-md q-ma-md color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection class="column items-center" horizontal>
+                    <span>
+                        {{ t('volume.type') }}:
+                        {{ dashIfEmpty(packingType.description) }}
+                    </span>
+                </QCardSection>
+                <QCardSection class="column items-center" horizontal>
+                    <span> {{ t('volume.volume') }}: {{ packingType.volume }} </span>
+                </QCardSection>
+            </QCard>
+        </template>
+    </RightMenu>
+    <QTable
+        :rows="rows"
+        :columns="columns"
+        row-key="id"
+        :pagination="{ rowsPerPage: 0 }"
+        class="full-width q-mt-md"
+        :no-data-label="t('globals.noResults')"
+    >
+        <template #body-cell-item="{ row }">
+            <QTd>
+                <QBtn flat color="primary">
+                    {{ row.itemFk }}
+                    <ItemDescriptorProxy :id="row.itemFk" />
+                </QBtn>
+            </QTd>
+        </template>
+        <template #body-cell-description="{ row }">
+            <QTd>
+                <div class="column">
+                    <span>{{ row.item.name }}</span>
+                    <span class="color-vn-label">{{ row.item.subName }}</span>
+                    <FetchedTags :item="row.item" :max-length="6" />
+                </div>
+            </QTd>
+        </template>
+    </QTable>
+</template>

src/pages/Ticket/locale/en.yml

@@ -1,6 +1,14 @@
 card:
     search: Search tickets
     searchInfo: You can search by ticket id or alias
+volume:
+    item: Item
+    description: Description
+    packingType: Packing Type
+    quantity: Quantity
+    volumeQuantity: m³ per quantity
+    type: Type
+    volume: Volume
 ticketNotes:
     observationType: Observation type
     description: Description

src/pages/Ticket/locale/es.yml

@@ -1,6 +1,14 @@
 card:
     search: Buscar tickets
     searchInfo: Buscar tickets por identificador o alias
+volume:
+    item: Artículo
+    description: Descripción
+    packingType: Encajado
+    quantity: Cantidad
+    volumeQuantity: m³ por cantidad
+    type: Tipo
+    volume: Volumen
 ticketNotes:
     observationType: Tipo de observación
     description: Descripción

src/router/modules/ticket.js

@@ -19,6 +19,7 @@ export default {
             'TicketSale',
             'TicketLog',
             'TicketPurchaseRequest',
+            'TicketVolume',
             'TicketNotes',
         ],
     },
@@ -148,6 +149,15 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
                 },
+                {
+                    path: 'volume',
+                    name: 'TicketVolume',
+                    meta: {
+                        title: 'volume',
+                        icon: 'vn:volume',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketVolume.vue'),
+                },
                 {
                     path: 'observation',
                     name: 'TicketNotes',