salix-front/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue

<script setup>
import { onMounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import { toCurrency, toDate, toPercentage } from 'src/filters';
import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import { getUrl } from 'src/composables/getUrl';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import VnTitle from 'src/components/common/VnTitle.vue';

onMounted(async () => {
    fetch();
    salixUrl.value = await getUrl('');
    invoiceOutUrl.value = salixUrl.value + `invoiceOut/${entityId.value}/`;
});

const route = useRoute();
const { t } = useI18n();

const $props = defineProps({
    id: {
        type: Number,
        default: 0,
    },
});

const entityId = computed(() => $props.id || route.params.id);

const salixUrl = ref();
const invoiceOutUrl = ref();
const tickets = ref(null);

function fetch() {
    axios.get(`InvoiceOuts/${entityId.value}/getTickets`).then(({ data }) => {
        tickets.value = data;
    });
}

const taxColumns = ref([
    {
        name: 'item',
        label: 'invoiceOut.summary.type',
        field: (row) => row.name,
        sortable: true,
    },
    {
        name: 'landed',
        label: 'invoiceOut.summary.taxableBase',
        field: (row) => row.taxableBase,
        format: (value) => toCurrency(value),
        sortable: true,
    },
    {
        name: 'quantity',
        label: 'invoiceOut.summary.rate',
        field: (row) => row.rate,
        format: (value) => toPercentage(value / 100),
        sortable: true,
    },
    {
        name: 'invoiceOuted',
        label: 'invoiceOut.summary.fee',
        field: (row) => row.vat,
        format: (value) => toCurrency(value),
        sortable: true,
    },
]);

const ticketsColumns = ref([
    {
        name: 'item',
        label: t('invoiceOut.summary.ticketId'),
        field: (row) => row.id,
        sortable: true,
        align: 'left',
    },
    {
        name: 'quantity',
        label: t('invoiceOut.summary.nickname'),
        field: (row) => row.nickname,
        sortable: true,
        align: 'left',
    },
    {
        name: 'landed',
        label: t('invoiceOut.summary.shipped'),
        field: (row) => row.shipped,
        format: (value) => toDate(value),
        sortable: true,
        align: 'left',
    },
    {
        name: 'landed',
        label: t('invoiceOut.summary.totalWithVat'),
        field: (row) => row.totalWithVat,
        format: (value) => toCurrency(value),
        sortable: true,
        align: 'left',
    },
]);
</script>

<template>
    <CardSummary
        ref="summary"
        :url="`InvoiceOuts/${entityId}/summary`"
        :entity-id="entityId"
        data-key="InvoiceOutSummary"
    >
        <template #header="{ entity: { invoiceOut } }">
            <div>{{ invoiceOut.ref }} - {{ invoiceOut.client?.socialName }}</div>
        </template>
        <template #body="{ entity: { invoiceOut } }">
            <QCard class="vn-one">
                <VnTitle :text="t('globals.pageTitles.basicData')" />
                <VnLv
                    :label="t('invoiceOut.summary.issued')"
                    :value="toDate(invoiceOut.issued)"
                />
                <VnLv
                    :label="t('invoiceOut.summary.dued')"
                    :value="toDate(invoiceOut.dued)"
                />
                <VnLv
                    :label="t('invoiceOut.summary.created')"
                    :value="toDate(invoiceOut.created)"
                />
                <VnLv
                    :label="t('invoiceOut.summary.booked')"
                    :value="toDate(invoiceOut.booked)"
                />
                <VnLv
                    :label="t('invoiceOut.summary.company')"
                    :value="invoiceOut.company.code"
                />
            </QCard>
            <QCard class="vn-three">
                <VnTitle :text="t('invoiceOut.summary.taxBreakdown')" />
                <QTable :columns="taxColumns" :rows="invoiceOut.taxesBreakdown" flat>
                    <template #header="props">
                        <QTr class="tr-header" :props="props">
                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
                                {{ t(col.label) }}
                            </QTh>
                        </QTr>
                    </template>
                </QTable>
            </QCard>
            <QCard class="vn-three">
                <VnTitle :text="t('invoiceOut.summary.tickets')" />
                <QTable v-if="tickets" :columns="ticketsColumns" :rows="tickets" flat>
                    <template #header="props">
                        <QTr :props="props">
                            <QTh
                                class="tr-header"
                                v-for="col in props.cols"
                                :key="col.name"
                                :props="props"
                            >
                                {{ t(col.label) }}
                            </QTh>
                        </QTr>
                    </template>
                    <template #body-cell-item="{ value }">
                        <QTd>
                            <QBtn flat class="link">
                                {{ value }}
                                <TicketDescriptorProxy :id="value" />
                            </QBtn>
                        </QTd>
                    </template>
                    <template #body-cell-quantity="{ value, row }">
                        <QTd>
                            <QBtn class="no-uppercase link" flat dense>
                                {{ value }}
                                <CustomerDescriptorProxy :id="row.id" />
                            </QBtn>
                        </QTd>
                    </template>
                </QTable>
            </QCard>
        </template>
    </CardSummary>
</template>
<style lang="scss" scoped>
.no-uppercase {
    text-transform: none;
}
</style>