From 36344d112b0019372c7026eb10e19465dfddf493 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Fri, 22 Dec 2023 00:34:18 -0400
Subject: [PATCH 1/4] Create order volume

---
 src/i18n/en/index.js            |   1 +
 src/i18n/es/index.js            |   1 +
 src/pages/Order/OrderVolume.vue | 149 ++++++++++++++++++++++++++++++++
 src/router/modules/order.js     |  11 ++-
 4 files changed, 161 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Order/OrderVolume.vue

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 4a1eea8f4..45df3f1ff 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -557,6 +557,7 @@ export default {
             summary: 'Summary',
             basicData: 'Basic Data',
             catalog: 'Catalog',
+            volume: 'Volume'
         },
         field: {
             salesPersonFk: 'Sales Person',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 3f4ac1c27..90fdb18b6 100644
--- a/src/i18n/es/index.js
+++ b/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',
diff --git a/src/pages/Order/OrderVolume.vue b/src/pages/Order/OrderVolume.vue
new file mode 100644
index 000000000..f2b451628
--- /dev/null
+++ b/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>
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
index e91e95493..8a55a39d2 100644
--- a/src/router/modules/order.js
+++ b/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'),
+                },
             ],
         },
     ],

From 06637cd89c004262826180ebb030f11dcbac6065 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Fri, 22 Dec 2023 00:50:07 -0400
Subject: [PATCH 2/4] Fix card list class

---
 src/pages/Order/OrderVolume.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/Order/OrderVolume.vue b/src/pages/Order/OrderVolume.vue
index f2b451628..2c962600e 100644
--- a/src/pages/Order/OrderVolume.vue
+++ b/src/pages/Order/OrderVolume.vue
@@ -94,11 +94,6 @@ const loadVolumes = async (rows) => {
 </template>
 
 <style lang="scss">
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-
 .order-volume-summary {
     .vn-label-value {
         display: flex;
@@ -121,6 +116,11 @@ const loadVolumes = async (rows) => {
 }
 </style>
 <style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+
 .header {
     color: $primary;
     font-weight: bold;

From fdbad9c2cb5407b6690f2c3015126a322ecba3e4 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Fri, 22 Dec 2023 00:50:31 -0400
Subject: [PATCH 3/4] Fix order description warning

---
 src/pages/Order/Card/OrderDescriptor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Order/Card/OrderDescriptor.vue b/src/pages/Order/Card/OrderDescriptor.vue
index 3b6d91cb4..09c87f138 100644
--- a/src/pages/Order/Card/OrderDescriptor.vue
+++ b/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 }">

From 3ea1fc775d36ff0faa84c7b8c0b26173bb2b2f14 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Fri, 22 Dec 2023 01:01:51 -0400
Subject: [PATCH 4/4] Fix order summary address

---
 src/pages/Order/Card/OrderSummary.vue | 29 +++++++++++++++------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/pages/Order/Card/OrderSummary.vue b/src/pages/Order/Card/OrderSummary.vue
index 464ab3dfc..0efffa3fa 100644
--- a/src/pages/Order/Card/OrderSummary.vue
+++ b/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')">
-                    <template #value>
-                        <span class="address">
-                            {{
-                                `${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`
-                            }}
-                        </span>
-                    </template>
-                </VnLv>
+                <VnLv
+                    :label="t('order.summary.address')"
+                    :value="`${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`"
+                    class="order-summary-address"
+                />
             </QCard>
             <QCard class="vn-one">
                 <p class="header">
@@ -203,11 +199,18 @@ const detailsColumns = ref([
         </template>
     </CardSummary>
 </template>
-<style lang="scss" scoped>
-.address {
-    white-space: normal;
-}
+<style lang="scss">
+.cardSummary .summaryBody .vn-label-value.order-summary-address {
+    .label {
+        flex-shrink: 0;
+    }
 
+    .value {
+        white-space: normal;
+    }
+}
+</style>
+<style lang="scss" scoped>
 .item {
     text-align: center;
 }