salix-front/src/pages/Customer/Card/CustomerConsumption.vue

<script setup>
import { ref, computed, onBeforeMount } from 'vue';
import axios from 'axios';
import { useI18n } from 'vue-i18n';
import { dateRange, toDate } from 'src/filters/index';
import { useRoute } from 'vue-router';

import VnTable from 'components/VnTable/VnTable.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import { useArrayData } from 'src/composables/useArrayData';
import { usePrintService } from 'src/composables/usePrintService';
import { useVnConfirm } from 'src/composables/useVnConfirm';

const { openConfirmationModal } = useVnConfirm();
const { openReport, sendEmail } = usePrintService();
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import VnSelect from 'components/common/VnSelect.vue';
import VnInputDate from 'components/common/VnInputDate.vue';

const arrayData = useArrayData('Client');
const { t } = useI18n();
const route = useRoute();
const campaignList = ref();
const showActionBtns = computed(() => handleQueryParams());
function handleQueryParams() {
    const query = getQueryParams();
    return query.from && query.to;
}
const columns = computed(() => [
    {
        name: 'search',
        align: 'left',
        label: t('globals.search'),
        visible: false,
    },
    {
        name: 'itemFk',
        align: 'left',
        label: t('globals.item'),
        columnClass: 'shrink',
        cardVisible: true,
        columnFilter: {
            name: 'itemId',
        },
    },
    {
        name: 'ticketFk',
        align: 'left',
        label: t('globals.ticket'),
        cardVisible: true,
        columnFilter: {
            inWhere: true,
        },
    },
    {
        name: 'shipped',
        align: 'left',
        label: t('globals.shipped'),
        format: ({ shipped }) => toDate(shipped),
        columnFilter: false,
        cardVisible: true,
    },
    {
        name: 'description',
        align: 'left',
        label: t('globals.description'),
        columnClass: 'expand',
        columnFilter: {
            inWhere: true,
        },
    },
    {
        name: 'quantity',
        label: t('globals.quantity'),
        cardVisible: true,
        columnFilter: {
            inWhere: true,
        },
    },
    {
        name: 'grouped',
        label: t('Group by items'),
        component: 'checkbox',
        visible: false,
        orderBy: false,
    },
]);

onBeforeMount(async () => {
    campaignList.value = (await axios('Campaigns/latest')).data;
});

function getQueryParams() {
    return JSON.parse(route.query.consumption ?? '{}');
}
function getParams() {
    const query = getQueryParams();
    return {
        from: query.from,
        to: query.to,
        recipient: arrayData.store.data.email,
        recipientId: arrayData.store.data.id,
    };
}
const userParams = computed(() => {
    const campaign = campaignList.value[0]?.id;
    const userParams = {
        campaign,
        ...updateDateParams(campaign, { from: Date.vnNew(), to: Date.vnNew() }),
    };
    return userParams;
});
const openReportPdf = () => {
    openReport(`Clients/${route.params.id}/campaign-metrics-pdf`, getParams());
};

const openSendEmailDialog = async () => {
    openConfirmationModal(
        t('The consumption report will be sent'),
        t('Please, confirm'),
        () => sendCampaignMetricsEmail({ address: arrayData.store.data.email })
    );
};
const sendCampaignMetricsEmail = ({ address }) => {
    sendEmail(`Clients/${route.params.id}/campaign-metrics-email`, {
        recipient: address,
        ...getParams(),
    });
};

const updateDateParams = (value, params) => {
    if (!value) {
        params.from = null;
        params.to = null;
        return;
    }
    const campaign = campaignList.value.find((c) => c.id === value);
    if (!campaign) return;

    const { dated, previousDays, scopeDays } = campaign;
    const _date = new Date(dated);
    const [from, to] = dateRange(_date);
    params.from = new Date(from.setDate(from.getDate() - previousDays)).toISOString();
    params.to = new Date(to.setDate(to.getDate() + scopeDays)).toISOString();
    return params;
};
</script>

<template>
    <VnTable
        v-if="campaignList"
        data-key="CustomerConsumption"
        url="Clients/consumption"
        :order="['itemTypeFk', 'itemName', 'itemSize', 'description']"        
        :filter="{ where: { clientFk: route.params.id } }"
        :columns="columns"
        search-url="consumption"
        :user-params="userParams"
        :default-remove="false"
        :default-reset="false"
        :default-save="false"
        :has-sub-toolbar="true"
        auto-load
    >
        <template #moreBeforeActions>
            <QBtn
                color="primary"
                flat
                icon-right="picture_as_pdf"
                @click="openReportPdf()"
                :disabled="!showActionBtns"
            >
                <QTooltip>{{ t('globals.downloadPdf') }}</QTooltip>
            </QBtn>
            <QBtn
                color="primary"
                flat
                icon-right="email"
                @click="openSendEmailDialog()"
                :disabled="!showActionBtns"
            >
                <QTooltip>{{ t('Send to email') }}</QTooltip>
            </QBtn>
        </template>
        <template #column-itemFk="{ row }">
            <span class="link">
                {{ row.itemFk }}
                <ItemDescriptorProxy :id="row.itemFk" />
            </span>
        </template>
        <template #column-ticketFk="{ row }">
            <span class="link">
                {{ row.ticketFk }}
                <TicketDescriptorProxy :id="row.ticketFk" />
            </span>
        </template>
        <template #column-description="{ row }">
            <div>{{ row.concept }}</div>
            <div v-if="row.subName" class="subName">
                {{ row.subName }}
            </div>
            <FetchedTags :item="row" :max-length="3" />
        </template>
        <template #moreFilterPanel="{ params }">
            <div class="column no-wrap flex-center q-gutter-y-md q-mt-xs q-pr-xl">
                <VnSelect
                    v-model="params.campaign"
                    :options="campaignList"
                    :label="t('globals.campaign')"
                    :filled="true"
                    class="q-px-sm q-pt-none fit"
                    dense
                    option-label="code"
                    @update:model-value="(data) => updateDateParams(data, params)"
                >
                    <template #option="scope">
                        <QItem v-bind="scope.itemProps">
                            <QItemSection>
                                <QItemLabel>
                                    {{ scope.opt?.code }}
                                    {{
                                        new Date(scope.opt?.dated).getFullYear()
                                    }}</QItemLabel
                                >
                            </QItemSection>
                        </QItem>
                    </template>
                </VnSelect>
                <VnInputDate
                    v-model="params.from"
                    :label="t('globals.from')"
                    :filled="true"
                    class="q-px-xs q-pt-none fit"
                    dense
                />
                <VnInputDate
                    v-model="params.to"
                    :label="t('globals.to')"
                    :filled="true"
                    class="q-px-xs q-pt-none fit"
                    dense
                />
            </div>
        </template>
    </VnTable>
</template>

<i18n>
es:
    Enter a new search: Introduce una nueva búsqueda
    Group by items: Agrupar por artículos
</i18n>