salix-front/src/pages/Entry/EntryLatestBuys.vue

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters';

import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import EntryLatestBuysFilter from './EntryLatestBuysFilter.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import VnImg from 'src/components/ui/VnImg.vue';

const stateStore = useStateStore();
const { t } = useI18n();
const tableRef = ref();
const columns = [
    {
        align: 'center',
        label: t('entry.latestBuys.tableVisibleColumns.image'),
        name: 'itemFk',
        columnField: {
            component: VnImg,
            attrs: ({ row }) => {
                return {
                    id: row.id,
                    size: '50x50',
                };
            },
        },
        columnFilter: false,
    },
    {
        align: 'left',
        label: t('entry.latestBuys.tableVisibleColumns.itemFk'),
        name: 'itemFk',
        isTitle: true,
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('entry.summary.packing'),
        name: 'packing',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('entry.summary.grouping'),
        name: 'grouping',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('globals.quantity'),
        name: 'quantity',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('globals.description'),
        name: 'description',
    },
    {
        align: 'left',
        label: t('globals.size'),
        name: 'size',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('globals.tags'),
        name: 'tags',
    },
    {
        align: 'left',
        label: t('globals.type'),
        name: 'type',
    },
    {
        align: 'left',
        label: t('globals.intrastat'),
        name: 'intrastat',
    },
    {
        align: 'left',
        label: t('globals.origin'),
        name: 'origin',
    },
    {
        align: 'left',
        label: t('entry.latestBuys.tableVisibleColumns.weightByPiece'),
        name: 'weightByPiece',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('entry.latestBuys.tableVisibleColumns.isActive'),
        name: 'isActive',
    },
    {
        align: 'left',
        label: t('entry.latestBuys.tableVisibleColumns.family'),
        name: 'family',
    },
    {
        align: 'left',
        label: t('entry.latestBuys.tableVisibleColumns.entryFk'),
        name: 'entryFk',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('entry.summary.buyingValue'),
        name: 'buyingValue',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('entry.latestBuys.tableVisibleColumns.freightValue'),
        name: 'freightValue',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('entry.latestBuys.tableVisibleColumns.comissionValue'),
        name: 'comissionValue',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('entry.latestBuys.tableVisibleColumns.packageValue'),
        name: 'packageValue',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('entry.latestBuys.tableVisibleColumns.isIgnored'),
        name: 'isIgnored',
    },
    {
        align: 'left',
        label: t('entry.latestBuys.tableVisibleColumns.price2'),
        name: 'price2',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('entry.latestBuys.tableVisibleColumns.price3'),
        name: 'price3',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('entry.latestBuys.tableVisibleColumns.minPrice'),
        name: 'minPrice',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('entry.latestBuys.tableVisibleColumns.ektFk'),
        name: 'ektFk',
    },
    {
        align: 'left',
        label: t('globals.weight'),
        name: 'weight',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('entry.buys.packagingFk'),
        name: 'packagingFk',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('entry.latestBuys.tableVisibleColumns.packingOut'),
        name: 'packingOut',
    },
    {
        align: 'left',
        label: t('entry.latestBuys.tableVisibleColumns.landing'),
        name: 'landing',
        component: 'date',
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.landing)),
    },
];

onMounted(async () => {
    stateStore.rightDrawer = true;
});

onUnmounted(() => (stateStore.rightDrawer = false));
</script>

<template>
    <RightMenu>
        <template #right-panel>
            <EntryLatestBuysFilter data-key="LatestBuys" />
        </template>
    </RightMenu>
    <VnSubToolbar />
    <VnTable
        ref="tableRef"
        data-key="LatestBuys"
        url="Buys/latestBuysFilter"
        order="id DESC"
        :columns="columns"
        redirect="entry"
        :row-click="({ entryFk }) => tableRef.redirect(entryFk)"
        auto-load
        :right-search="false"
    />
</template>