supplier consumption submodule

src/i18n/en/index.js

@@ -935,6 +935,11 @@ export default {
             routePrice: 'Route price',
             minimumKm: 'Minimum Km',
         },
+        consumption: {
+            entry: 'Entry',
+            date: 'Date',
+            reference: 'Reference',
+        },
     },
     travel: {
         pageTitles: {

src/i18n/es/index.js

@@ -934,6 +934,11 @@ export default {
             routePrice: 'Precio ruta',
             minimumKm: 'Km mínimos',
         },
+        consumption: {
+            entry: 'Entrada',
+            date: 'Fecha',
+            reference: 'Referencia',
+        },
     },
     travel: {
         pageTitles: {

src/pages/Supplier/Card/SupplierConsumption.vue

@@ -1,12 +1,96 @@
 <script setup>
 import { useRoute } from 'vue-router';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
 
 import FetchData from 'components/FetchData.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 
+import { toDate, toDateString } from 'src/filters';
+import { dashIfEmpty } from 'src/filters';
+import { usePrintService } from 'composables/usePrintService';
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
+
+const { t } = useI18n();
 const route = useRoute();
+const { openReport, sendEmail } = usePrintService();
+const quasar = useQuasar();
+const { notify } = useNotify();
 
 const suppliersConsumption = ref();
+
+const userParams = computed(() => {
+    const minDate = Date.vnNew();
+    minDate.setHours(0, 0, 0, 0);
+    minDate.setMonth(minDate.getMonth() - 2);
+
+    const maxDate = Date.vnNew();
+    maxDate.setHours(23, 59, 59, 59);
+
+    return {
+        from: toDateString(minDate),
+        to: toDateString(maxDate),
+    };
+});
+
+const reportParams = computed(() => ({
+    recipientId: Number(route.params.id),
+    ...userParams.value,
+}));
+
+const rows = computed(() => suppliersConsumption.value || []);
+
+const openReportPdf = () => {
+    openReport(`Suppliers/${route.params.id}/campaign-metrics-pdf`, reportParams.value);
+};
+
+const getSupplierContacts = async () => {
+    try {
+        const params = {
+            filter: {
+                where: {
+                    supplierFk: route.params.id,
+                    email: { neq: null },
+                },
+                limit: 1,
+            },
+        };
+
+        const { data } = await axios.get('SupplierContacts', params);
+
+        if (data && data.length) return data[0].email;
+    } catch (err) {
+        notify('This supplier does not have a contact with an email address', 'negative');
+        console.error('Error fetching supplierContacts: ', err);
+    }
+};
+
+const openSendEmailDialog = async () => {
+    const email = await getSupplierContacts();
+    quasar.dialog({
+        component: SendEmailDialog,
+        componentProps: {
+            data: {
+                address: email,
+            },
+            promise: sendCampaignMetricsEmail,
+        },
+    });
+};
+
+const sendCampaignMetricsEmail = ({ address }) => {
+    sendEmail(`Suppliers/${route.params.id}/campaign-metrics-email`, {
+        recipient: address,
+        ...reportParams.value,
+    });
+};
+
+const calculateTotal = (buysArray) => {
+    return buysArray.reduce((accumulator, { total }) => accumulator + total, 0);
+};
 </script>
 
 <template>
@@ -17,20 +101,92 @@ const suppliersConsumption = ref();
             where: { supplierFk: route.params.id },
             order: ['itemTypeFk', 'itemName', 'itemSize'],
         }"
+        :params="userParams"
         auto-load
     />
     <QToolbar class="bg-vn-dark justify-end">
-        <div id="st-data"></div>
-        <QSpace />
-        <div id="st-actions">
-            <QBtn color="primary" icon-right="archive" no-caps />
+        <div id="st-data">
+            <QBtn
+                v-if="userParams.from && userParams.to"
+                color="primary"
+                icon-right="picture_as_pdf"
+                no-caps
+                class="q-mr-md"
+                @click="openReportPdf()"
+            >
+                <QTooltip>
+                    {{ t('Open as PDF') }}
+                </QTooltip>
+            </QBtn>
+            <QBtn
+                v-if="userParams.from && userParams.to"
+                color="primary"
+                icon-right="email"
+                no-caps
+                @click="openSendEmailDialog()"
+            >
+                <QTooltip>
+                    {{ t('Send to email') }}
+                </QTooltip>
+            </QBtn>
         </div>
+        <QSpace />
+        <div id="st-actions"></div>
     </QToolbar>
-    <QPage class="column items-center q-pa-md"> </QPage>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :rows="rows"
+            hide-bottom
+            row-key="id"
+            hide-header
+            :pagination="{ rowsPerPage: 0 }"
+            class="full-width q-mt-md"
+        >
+            <template #body="{ row }">
+                <QTr>
+                    <QTd no-hover class="label">{{
+                        t('supplier.consumption.entry')
+                    }}</QTd>
+                    <QTd no-hover>{{ row.id }}</QTd>
+                    <QTd no-hover class="label">{{ t('supplier.consumption.date') }}</QTd>
+                    <QTd no-hover>{{ toDate(row.shipped) }}</QTd>
+                    <QTd no-hover class="label">{{
+                        t('supplier.consumption.reference')
+                    }}</QTd>
+                    <QTd no-hover>{{ row.invoiceNumber }}</QTd>
+                </QTr>
+                <QTr v-for="(buy, index) in row.buys" :key="index">
+                    <QTd no-hover> {{ buy.itemName }}</QTd>
+
+                    <QTd no-hover>
+                        <span>{{ buy.subName }}</span>
+                        <fetched-tags :item="buy" :max-length="5" />
+                    </QTd>
+                    <QTd no-hover> {{ dashIfEmpty(buy.quantity) }}</QTd>
+                    <QTd no-hover> {{ dashIfEmpty(buy.price) }}</QTd>
+                    <QTd colspan="2" no-hover> {{ dashIfEmpty(buy.total) }}</QTd>
+                </QTr>
+                <QTr>
+                    <QTd colspan="6" no-hover>
+                        <span class="label">{{ t('Total entry') }}: </span>
+                        <span>{{ calculateTotal(row.buys) }}</span>
+                    </QTd>
+                </QTr>
+            </template>
+        </QTable>
+    </QPage>
 </template>
 
-<style lang="scss" scoped></style>
+<style scoped lang="scss">
+.label {
+    color: var(--vn-label);
+}
+</style>
 
 <i18n>
 es:
+    Total entry: Total entrada
+    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
 </i18n>

src/pages/Travel/ExtraCommunity.vue

@@ -262,7 +262,16 @@ onMounted(async () => {
         <div id="st-data"></div>
         <QSpace />
         <div id="st-actions">
-            <QBtn color="primary" icon-right="archive" no-caps @click="openReportPdf()" />
+            <QBtn
+                color="primary"
+                icon-right="picture_as_pdf"
+                no-caps
+                @click="openReportPdf()"
+            >
+                <QTooltip>
+                    {{ t('Open as PDF') }}
+                </QTooltip>
+            </QBtn>
         </div>
     </QToolbar>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
@@ -415,4 +424,5 @@ es:
     physicKg: KG físico
     shipped: F. envío
     landed: F. llegada
+    Open as PDF: Abrir como PDF
 </i18n>