salix-front/src/pages/InvoiceIn/InvoiceInList.vue

<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState';
import { downloadFile } from 'src/composables/downloadFile';
import { toDate, toCurrency } from 'src/filters/index';
import InvoiceInFilter from './InvoiceInFilter.vue';
import InvoiceInSummary from './Card/InvoiceInSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import FetchData from 'src/components/FetchData.vue';
import VnSection from 'src/components/common/VnSection.vue';
import VnSelectSupplier from 'src/components/common/VnSelectSupplier.vue';

const user = useState().getUser();
const { viewSummary } = useSummaryDialog();
const { t } = useI18n();
const dataKey = 'InvoiceInList';

const tableRef = ref();
const companies = ref([]);
const cols = computed(() => [
    {
        align: 'left',
        name: 'isBooked',
        label: t('invoiceIn.isBooked'),
        columnFilter: false,
    },
    {
        align: 'left',
        name: 'id',
        label: 'Id',
        isId: true,
        chip: {
            condition: () => true,
        },
    },
    {
        align: 'left',
        name: 'supplierFk',
        label: t('invoiceIn.list.supplier'),
        columnFilter: {
            component: 'select',
            attrs: {
                url: 'Suppliers',
                fields: ['id', 'name'],
            },
        },
        columnClass: 'expand',
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'supplierRef',
        label: t('invoiceIn.list.supplierRef'),
    },
    {
        align: 'left',
        name: 'serial',
        label: t('invoiceIn.serial'),
    },
    {
        align: 'left',
        label: t('invoiceIn.list.issued'),
        name: 'issued',
        component: null,
        columnFilter: {
            component: 'date',
        },
        format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.issued)),
    },
    {
        align: 'left',
        label: t('invoiceIn.list.dueDated'),
        name: 'dueDated',
        component: null,
        columnFilter: {
            component: 'date',
        },
        format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.dueDated)),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'awbCode',
        label: t('invoiceIn.list.awb'),
    },
    {
        align: 'left',
        name: 'amount',
        label: t('invoiceIn.list.amount'),
        format: ({ amount }) => toCurrency(amount),
        cardVisible: true,
    },
    {
        name: 'companyFk',
        label: t('globals.company'),
        columnFilter: {
            component: 'select',
            attrs: {
                url: 'Companies',
                fields: ['id', 'code'],
                optionLabel: 'code',
            },
        },
        format: (row) => row.code,
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('components.smartCard.openSummary'),
                icon: 'preview',
                type: 'submit',
                isPrimary: true,
                action: (row) => viewSummary(row.id, InvoiceInSummary),
            },
            {
                title: t('globals.download'),
                icon: 'download',
                type: 'submit',
                isPrimary: true,
                action: (row) => downloadFile(row.dmsFk),
            },
        ],
    },
]);
</script>

<template>
    <FetchData url="Companies" @on-fetch="(data) => (companies = data)" auto-load />
    <VnSection
        :data-key
        :columns="cols"
        prefix="invoiceIn"
        :array-data-props="{
            url: 'InvoiceIns/filter',
            order: ['issued DESC', 'id DESC'],
        }"
    >
        <template #advanced-menu>
            <InvoiceInFilter :data-key />
        </template>
        <template #body>
            <VnTable
                ref="tableRef"
                data-key="InvoiceInList"
                url="InvoiceIns/filter"
                :order="['issued DESC', 'id DESC']"
                :create="{
                    urlCreate: 'InvoiceIns',
                    title: t('globals.createInvoiceIn'),
                    onDataSaved: ({ id }) => tableRef.redirect(id),
                    formInitialData: { companyFk: user.companyFk, issued: Date.vnNew() },
                }"
                redirect="invoice-in"
                :columns="cols"
                :right-search="false"
                :disable-option="{ card: true }"
                :auto-load="!!$route.query.table"
            >
                <template #column-supplierFk="{ row }">
                    <span class="link" @click.stop>
                        {{ row.supplierName }}
                        <SupplierDescriptorProxy :id="row.supplierFk" />
                    </span>
                </template>
                <template #more-create-dialog="{ data }">
                    <VnSelectSupplier
                        v-model="data.supplierFk"
                        hide-selected
                        :required="true"
                    />
                    <VnInput
                        :label="t('invoiceIn.list.supplierRef')"
                        v-model="data.supplierRef"
                    />
                    <VnSelect
                        url="Companies"
                        :label="t('globals.company')"
                        :fields="['id', 'code']"
                        v-model="data.companyFk"
                        option-value="id"
                        option-label="code"
                        :required="true"
                    />
                    <VnInputDate
                        :label="t('invoiceIn.summary.issued')"
                        v-model="data.issued"
                    />
                </template>
            </VnTable>
        </template>
    </VnSection>
</template>