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 RightMenu from 'src/components/common/RightMenu.vue';
import InvoiceInSearchbar from 'src/pages/InvoiceIn/InvoiceInSearchbar.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';

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

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 />
    <InvoiceInSearchbar />
    <RightMenu>
        <template #right-panel>
            <InvoiceInFilter data-key="InvoiceInList" />
        </template>
    </RightMenu>
    <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 }">
            <VnSelect
                v-model="data.supplierFk"
                url="Suppliers"
                :fields="['id', 'nickname', 'name']"
                :label="t('globals.supplier')"
                option-value="id"
                option-label="nickname"
                :filter-options="['id', 'name', 'nickname']"
                :required="true"
            >
                <template #option="scope">
                    <QItem v-bind="scope.itemProps">
                        <QItemSection>
                            <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
                            <QItemLabel caption> #{{ scope.opt?.id }}, {{  scope.opt?.name }} </QItemLabel>
                        </QItemSection>
                    </QItem>
                </template>
            </VnSelect>
            <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>