Create order volume

src/i18n/en/index.js

@@ -557,6 +557,7 @@ export default {
             summary: 'Summary',
             basicData: 'Basic Data',
             catalog: 'Catalog',
+            volume: 'Volume'
         },
         field: {
             salesPersonFk: 'Sales Person',

src/i18n/es/index.js

@@ -466,6 +466,7 @@ export default {
             summary: 'Resumen',
             basicData: 'Datos básicos',
             catalog: 'Catálogo',
+            volume: 'Volumen',
         },
         field: {
             salesPersonFk: 'Comercial',

src/pages/Order/OrderVolume.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import FetchData from 'components/FetchData.vue';
+import VnLv from 'components/ui/VnLv.vue';
+import { ref } from 'vue';
+import { dashIfEmpty } from 'src/filters';
+import CardList from 'components/ui/CardList.vue';
+import axios from 'axios';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+const volumeSummary = ref(null);
+
+const loadVolumes = async (rows) => {
+    const { data } = await axios.get(`Orders/${route.params.id}/getVolumes`);
+    (rows || []).forEach((order) => {
+        (data.volumes || []).forEach((volume) => {
+            if (order.itemFk === volume.itemFk) {
+                order.volume = volume.volume;
+            }
+        });
+    });
+};
+</script>
+
+<template>
+    <FetchData
+        :url="`Orders/${route.params.id}/getTotalVolume`"
+        @on-fetch="(data) => (volumeSummary = data)"
+        auto-load
+    />
+    <QPage class="column items-center q-pa-md">
+        <div class="card-list">
+            <QCard class="order-volume-summary q-pa-lg">
+                <p class="header text-right block">
+                    {{ t('summary') }}
+                </p>
+                <VnLv
+                    :label="t('total')"
+                    :value="`${volumeSummary?.totalVolume} m³`"
+                />
+                <VnLv
+                    :label="t('boxes')"
+                    :value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
+                />
+            </QCard>
+            <VnPaginate
+                data-key="OrderCatalogVolume"
+                url="OrderRows"
+                :limit="20"
+                auto-load
+                :filter="{
+                    include: {
+                        relation: 'item',
+                    },
+                    where: { orderFk: route.params.id },
+                }"
+                order="itemFk"
+                @on-fetch="(data) => loadVolumes(data)"
+            >
+                <template #body="{ rows }">
+                    <div class="catalog-list q-mt-xl">
+                        <CardList
+                            v-for="row in rows"
+                            :key="row.id"
+                            :id="row.id"
+                            :title="row?.item?.name"
+                            class="cursor-inherit"
+                        >
+                            <template #list-items>
+                                <div class="q-mb-sm">
+                                    <fetched-tags :item="row.item" :max-length="5" />
+                                </div>
+                                <VnLv :label="t('item')" :value="row.item.id" />
+                                <VnLv :label="t('subName')">
+                                    <template #value>
+                                        <span class="text-uppercase">
+                                            {{ row.item.subName }}
+                                        </span>
+                                    </template>
+                                </VnLv>
+                                <VnLv :label="t('quantity')" :value="row.quantity" />
+                                <VnLv :label="t('volume')" :value="row.volume" />
+                            </template>
+                        </CardList>
+                    </div>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
+
+<style lang="scss">
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+
+.order-volume-summary {
+    .vn-label-value {
+        display: flex;
+        justify-content: flex-end;
+        gap: 2%;
+
+        .label {
+            color: var(--vn-label);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .value {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+</style>
+<style lang="scss" scoped>
+.header {
+    color: $primary;
+    font-weight: bold;
+    margin-bottom: 25px;
+    font-size: 20px;
+    display: inline-block;
+}
+</style>
+<i18n>
+en:
+    summary: Summary
+    total: Total
+    boxes: Boxes
+    item: Item
+    subName: Subname
+    quantity: Quantity
+    volume: m³ per quantity
+es:
+    summary: Resumen
+    total: Total
+    boxes: Cajas
+    item: Artículo
+    subName: Subname
+    quantity: Cantidad
+    volume: m³ por cantidad
+</i18n>

src/router/modules/order.js

@@ -11,7 +11,7 @@ export default {
     redirect: { name: 'OrderMain' },
     menus: {
         main: ['OrderList'],
-        card: ['OrderBasicData', 'OrderCatalog'],
+        card: ['OrderBasicData', 'OrderCatalog', 'OrderVolume'],
     },
     children: [
         {
@@ -72,6 +72,15 @@ export default {
                     },
                     component: () => import('src/pages/Order/OrderCatalog.vue'),
                 },
+                {
+                    name: 'OrderVolume',
+                    path: 'volume',
+                    meta: {
+                        title: 'volume',
+                        icon: 'vn:volume',
+                    },
+                    component: () => import('src/pages/Order/OrderVolume.vue'),
+                },
             ],
         },
     ],