hedera-web-mindshore/src/pages/Ecomerce/Invoices.vue

<template>
    <Teleport :to="$actions">
        <QSelect
            v-model="year"
            :options="years"
            color="white"
            dark
            standout
            dense
            rounded
        />
    </Teleport>
    <div class="vn-w-sm">
        <div
            v-if="!invoices?.length"
            class="text-subtitle1 text-center text-grey-7 q-pa-md"
        >
            {{ $t('noInvoicesFound') }}
        </div>
        <QCard v-if="invoices?.length">
            <QTable
                :columns="columns"
                :pagination="pagination"
                :rows="invoices"
                row-key="id"
                hide-header
                hide-bottom
            >
                <template v-slot:body="props">
                    <QTr :props="props">
                        <QTd key="ref" :props="props">
                            {{ props.row.ref }}
                        </QTd>
                        <QTd key="issued" :props="props">
                            {{ date(props.row.issued, 'ddd, MMMM Do') }}
                        </QTd>
                        <QTd key="amount" :props="props">
                            {{ currency(props.row.amount) }}
                        </QTd>
                        <QTd key="hasPdf" :props="props">
                            <QBtn
                                v-if="props.row.hasPdf"
                                icon="download"
                                :title="$t('downloadInvoicePdf')"
                                :href="invoiceUrl(props.row.id)"
                                target="_blank"
                                flat
                                round
                            />
                            <QIcon
                                v-else
                                name="warning"
                                :title="$t('notDownloadable')"
                                color="warning"
                                size="24px"
                            />
                        </QTd>
                    </QTr>
                </template>
            </QTable>
        </QCard>
    </div>
</template>

<script>
import { date, currency } from 'src/lib/filters.js';

export default {
    name: 'OrdersPendingIndex',
    data() {
        const curYear = new Date().getFullYear();
        const years = [];

        for (let year = curYear - 5; year <= curYear; year++) {
            years.push(year);
        }

        return {
            columns: [
                { name: 'ref', label: 'serial', field: 'ref', align: 'left' },
                {
                    name: 'issued',
                    label: 'issued',
                    field: 'issued',
                    align: 'left'
                },
                { name: 'amount', label: 'amount', field: 'amount' },
                {
                    name: 'hasPdf',
                    label: 'download',
                    field: 'hasPdf',
                    align: 'center'
                }
            ],
            pagination: {
                rowsPerPage: 0
            },
            year: curYear,
            years,
            invoices: null
        };
    },

    async mounted() {
        await this.loadData();
    },

    watch: {
        async year() {
            await this.loadData();
        }
    },

    methods: {
        date,
        currency,

        async loadData() {
            const params = {
                from: new Date(this.year, 0),
                to: new Date(this.year, 11, 31, 23, 59, 59)
            };
            this._invoices = await this.$jApi.query(
                `SELECT id, ref, issued, amount, hasPdf
          FROM myInvoice
          WHERE issued BETWEEN #from AND #to
          ORDER BY issued DESC
          LIMIT 500`,
                params
            );
        },

        invoiceUrl(id) {
            return (
                '?' +
                new URLSearchParams({
                    srv: 'rest:dms/invoice',
                    invoice: id,
                    access_token: this.$user.token
                }).toString()
            );
        }
    }
};
</script>

<i18n lang="yaml">
en-US:
    noInvoicesFound: No invoices found
    serial: Serial
    issued: Date
    amount: Import
    downloadInvoicePdf: Download invoice PDF
    notDownloadable: Not available for download, request the invoice to your salesperson
es-ES:
    noInvoicesFound: No se han encontrado facturas
    serial: Serie
    issued: Fecha
    amount: Importe
    downloadInvoicePdf: Descargar factura en PDF
    notDownloadable: No disponible para descarga, solicita la factura a tu comercial
ca-ES:
    noInvoicesFound: No s'han trobat factures
    serial: Sèrie
    issued: Data
    amount: Import
    downloadInvoicePdf: Descarregar PDF
    notDownloadable: No disponible per cescarrega, sol·licita la factura al teu comercial
fr-FR:
    noInvoicesFound: Aucune facture trouvée
    serial: Série
    issued: Date
    amount: Montant
    downloadInvoicePdf: Télécharger le PDF
    notDownloadable: Non disponible en téléchargement, demander la facture à votre commercial
pt-PT:
    noInvoicesFound: Nenhuma fatura encontrada
    serial: Serie
    issued: Data
    amount: Importe
    downloadInvoicePdf: Baixar PDF
    notDownloadable: Não disponível para download, solicite a fatura ao seu comercial
</i18n>