Merge pull request 'Create order volume' (#42) from feature/order into dev

Reviewed-on: hyervoni/salix-front-mindshore#42

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/Card/OrderDescriptor.vue

@@ -98,7 +98,7 @@ const setData = (entity) => {
             <VnLv :label="t('order.summary.landed')" :value="toDate(entity?.landed)" />
             <VnLv :label="t('order.field.agency')" :value="entity?.agencyMode?.name" />
             <VnLv :label="t('order.summary.alias')" :value="entity?.address?.nickname" />
-            <VnLv :label="t('order.summary.items')" :value="entity?.rows?.length || 0" />
+            <VnLv :label="t('order.summary.items')" :value="(entity?.rows?.length || 0).toString()" />
             <VnLv :label="t('order.summary.total')" :value="toCurrency(entity?.total)" />
         </template>
         <template #actions="{ entity }">

src/pages/Order/Card/OrderSummary.vue

@@ -110,15 +110,11 @@ const detailsColumns = ref([
                     :label="t('order.summary.createdFrom')"
                     :value="entity?.sourceApp"
                 />
-                <VnLv :label="t('order.summary.address')">
+                <VnLv
-                    <template #value>
+                    :label="t('order.summary.address')"
-                        <span class="address">
+                    :value="`${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`"
-                            {{
+                    class="order-summary-address"
-                                `${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`
+                />
-                            }}
-                        </span>
-                    </template>
-                </VnLv>
             </QCard>
             <QCard class="vn-one">
                 <p class="header">
@@ -203,11 +199,18 @@ const detailsColumns = ref([
         </template>
     </CardSummary>
 </template>
-<style lang="scss" scoped>
+<style lang="scss">
-.address {
+.cardSummary .summaryBody .vn-label-value.order-summary-address {
-    white-space: normal;
+    .label {
-}
+        flex-shrink: 0;
+    }
 
+    .value {
+        white-space: normal;
+    }
+}
+</style>
+<style lang="scss" scoped>
 .item {
     text-align: center;
 }

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">
+.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>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+
+.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'),
+                },
             ],
         },
     ],