Merge pull request 'refs #6976 supplier onUnmounted' (!286) from 6976-supplierConsumption into dev

Reviewed-on: #286
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/pages/Supplier/Card/SupplierConsumption.vue

@@ -1,9 +1,8 @@
 <script setup>
-import { computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
+import { computed, onMounted, watch, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
@@ -15,15 +14,17 @@ import { usePrintService } from 'composables/usePrintService';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 import { useStateStore } from 'stores/useStateStore';
+import { useState } from 'src/composables/useState';
 import { useArrayData } from 'composables/useArrayData';
 
+const state = useState();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const route = useRoute();
 const { openReport, sendEmail } = usePrintService();
 const quasar = useQuasar();
 const { notify } = useNotify();
-
+const totalRows = ref({});
 const arrayData = useArrayData('SupplierConsumption', {
     url: 'Suppliers/consumption',
     order: ['itemTypeFk', 'itemName', 'itemSize'],
@@ -32,6 +33,7 @@ const arrayData = useArrayData('SupplierConsumption', {
 
 const store = arrayData.store;
 
+onUnmounted(() => state.unset('SupplierConsumption'));
 const dateRanges = computed(() => {
     const { from, to } = arrayData.store?.userParams || {};
     return { from, to };
@@ -46,7 +48,9 @@ async function getSupplierConsumptionData() {
     await arrayData.fetch({ append: false });
 }
 
-const rows = computed(() => store.data || []);
+const rows = computed(() => {
+    return totalEntryPrice(store.data) || [];
+});
 
 const openReportPdf = () => {
     openReport(`Suppliers/${route.params.id}/campaign-metrics-pdf`, reportParams.value);
@@ -93,8 +97,25 @@ const sendCampaignMetricsEmail = ({ address }) => {
     });
 };
 
-const calculateTotal = (buysArray = []) =>
+const totalEntryPrice = (rows) => {
-    buysArray.reduce((accumulator, { total }) => accumulator + total, 0);
+    let totalPrice = 0;
+    let totalQuantity = 0;
+    if (!rows) return totalPrice;
+    for (const row of rows) {
+        let total = 0;
+        let quantity = 0;
+        for (const buy of row.buys) {
+            total = total + buy.total;
+            quantity = quantity + buy.quantity;
+        }
+        row.total = total;
+        row.quantity = quantity;
+        totalPrice = totalPrice + total;
+        totalQuantity = totalQuantity + quantity;
+    }
+    totalRows.value = { totalPrice, totalQuantity };
+    return rows;
+};
 
 onMounted(async () => {
     stateStore.rightDrawer = true;
@@ -128,6 +149,23 @@ onMounted(async () => {
             </QTooltip>
         </QBtn>
     </Teleport>
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
+        <div class="row q-gutter-md">
+            <div>
+                {{ t('Total entries') }}:
+                <QChip :dense="$q.screen.lt.sm" text-color="white">
+                    {{ totalRows.totalPrice }} €
+                </QChip>
+            </div>
+            <QSeparator dark vertical />
+            <div>
+                {{ t('Total stems entries') }}:
+                <QChip :dense="$q.screen.lt.sm" text-color="white">
+                    {{ totalRows.totalQuantity }}
+                </QChip>
+            </div>
+        </div>
+    </Teleport>
     <QPage class="column items-center q-pa-md">
         <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
             <QScrollArea class="fit text-grey-8">
@@ -143,20 +181,24 @@ onMounted(async () => {
         >
             <template #body="{ row }">
                 <QTr>
-                    <QTd no-hover class="label">{{
+                    <QTd no-hover>
-                        t('supplier.consumption.entry')
+                        <span class="label">{{ t('supplier.consumption.entry') }}: </span>
-                    }}</QTd>
+                        <span>{{ row.id }}</span>
-                    <QTd no-hover>{{ row.id }}</QTd>
+                    </QTd>
-                    <QTd no-hover class="label">{{ t('supplier.consumption.date') }}</QTd>
+                    <QTd no-hover>
-                    <QTd no-hover>{{ toDate(row.shipped) }}</QTd>
+                        <span class="label">{{ t('supplier.consumption.date') }}: </span>
-                    <QTd no-hover class="label">{{
+                        <span>{{ toDate(row.shipped) }}</span></QTd
-                        t('supplier.consumption.reference')
+                    >
-                    }}</QTd>
+                    <QTd colspan="6" no-hover>
-                    <QTd no-hover>{{ row.invoiceNumber }}</QTd>
+                        <span class="label"
+                            >{{ t('supplier.consumption.reference') }}:
+                        </span>
+                        <span>{{ row.invoiceNumber }}</span>
+                    </QTd>
                 </QTr>
                 <QTr v-for="(buy, index) in row.buys" :key="index">
                     <QTd no-hover>
-                        <QBtn flat color="blue" dense>{{ buy.itemName }}</QBtn>
+                        <QBtn flat color="blue" dense no-caps>{{ buy.itemName }}</QBtn>
                         <ItemDescriptorProxy :id="buy.itemFk" />
                     </QTd>
 
@@ -169,9 +211,13 @@ onMounted(async () => {
                     <QTd colspan="2" no-hover> {{ dashIfEmpty(buy.total) }}</QTd>
                 </QTr>
                 <QTr>
-                    <QTd colspan="6" no-hover>
+                    <QTd colspan="5" no-hover>
                         <span class="label">{{ t('Total entry') }}: </span>
-                        <span>{{ calculateTotal(row.buys) }}</span>
+                        <span>{{ row.total }} €</span>
+                    </QTd>
+                    <QTd no-hover>
+                        <span class="label">{{ t('Total stems') }}: </span>
+                        <span>{{ row.quantity }}</span>
                     </QTd>
                 </QTr>
             </template>
@@ -188,6 +234,9 @@ onMounted(async () => {
 <i18n>
 es:
     Total entry: Total entrada
+    Total entries: Total de las entradas
+    Total stems entries: Total de tallos de las entradas
+    Total stems: Total tallos
     Open as PDF: Abrir como PDF
     Send to email: Enviar por email
     This supplier does not have a contact with an email address: Este proveedor no tiene un email de contacto