salix-front/src/pages/Item/ItemList.vue

<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import VnImg from 'src/components/ui/VnImg.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import { toDate } from 'src/filters';
import FetchedTags from 'src/components/ui/FetchedTags.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import ItemSummary from '../Item/Card/ItemSummary.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import ItemDescriptorProxy from './Card/ItemDescriptorProxy.vue';
import ItemTypeDescriptorProxy from './ItemType/Card/ItemTypeDescriptorProxy.vue';
import { cloneItem } from 'src/pages/Item/composables/cloneItem';
import RightMenu from 'src/components/common/RightMenu.vue';
import ItemListFilter from './ItemListFilter.vue';

const entityId = computed(() => route.params.id);
const { openCloneDialog } = cloneItem();
const { viewSummary } = useSummaryDialog();
const { t } = useI18n();
const tableRef = ref();
const route = useRoute();

const itemFilter = {
    include: [
        {
            relation: 'itemType',
            scope: {
                fields: ['id', 'name'],
            },
        },
        {
            relation: 'intrastat',
            scope: {
                fields: ['id', 'description'],
            },
        },
        {
            relation: 'origin',
            scope: {
                fields: ['id', 'name'],
            },
        },
        {
            relation: 'production',
            scope: {
                fields: ['id', 'name'],
            },
        },
    ],
};
const columns = computed(() => [
    {
        label: '',
        name: 'image',
        align: 'left',
        columnFilter: false,
    },
    {
        label: t('item.list.id'),
        name: 'id',
        align: 'left',
        isId: true,
        chip: {
            condition: () => true,
        },
        cardVisible: true,
    },
    {
        label: t('entry.summary.grouping'),
        name: 'grouping',
        align: 'left',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        label: t('entry.summary.packing'),
        name: 'packing',
        align: 'left',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        label: t('globals.description'),
        name: 'description',
        align: 'left',
        create: true,
        columnFilter: {
            name: 'search',
        },
        columnClass: 'expand',
    },
    {
        label: t('item.list.stems'),
        name: 'stems',
        align: 'left',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
        cardVisible: true,
    },
    {
        label: t('globals.size'),
        name: 'size',
        align: 'left',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
        cardVisible: true,
    },
    {
        label: t('item.list.typeName'),
        name: 'typeFk',
        align: 'left',
        component: 'select',
        attrs: {
            url: 'ItemTypes',
            fields: ['id', 'name'],
        },
        columnFilter: {
            name: 'typeFk',
            attrs: {
                url: 'ItemTypes',
                fields: ['id', 'name'],
            },
        },
        create: true,
        visible: false,
    },
    {
        label: t('item.list.typeName'),
        name: 'typeName',
        align: 'left',
        component: 'select',
        columnFilter: {
            name: 'typeFk',
            attrs: {
                url: 'ItemTypes',
                fields: ['id', 'name'],
            },
        },
        columnField: {
            component: null,
        }
    },
    {
        label: t('item.list.category'),
        name: 'category',
        align: 'left',
        component: 'select',
        columnFilter: {
            name: 'categoryFk',
            attrs: {
                url: 'ItemCategories',
                fields: ['id', 'name'],
            },
        },
        columnField: {
            component: null,
        },
    },
    {
        label: t('globals.intrastat'),
        name: 'intrastat',
        align: 'left',
        component: 'select',
        columnFilter: {
            name: 'intrastat',
            attrs: {
                url: 'Intrastats',
                optionValue: 'description',
                optionLabel: 'description',
            },
        },
        columnField: {
            component: null,
        },
        create: true,
        cardVisible: true,
    },
    {
        label: t('item.list.origin'),
        name: 'origin',
        align: 'left',
        component: 'select',
        attrs: {
            url: 'Origins',
            optionValue: 'id',
            optionLabel: 'code',
        },
        columnFilter: {
            name: 'id',
            attrs: {
                url: 'Origins',
                optionValue: 'id',
                optionLabel: 'code',
            },
            inWhere: true,
            alias: 'ori',
        },
        columnField: {
            component: null,
        },
        create: true,
        cardVisible: true,
    },
    {
        label: t('item.list.userName'),
        name: 'userName',
        align: 'left',
        component: 'select',
        columnFilter: {
            name: 'workerFk',
            attrs: {
                url: 'TicketRequests/getItemTypeWorker',
                optionValue: 'id',
                optionLabel: 'nickname',
            },
        },

        columnField: {
            component: null,
        },
    },
    {
        label: t('item.list.weight'),
        toolTip: t('item.list.weightByPiece'),
        name: 'weightByPiece',
        component: 'input',
        columnField: {
            component: null,
        },
        columnFilter: {
            inWhere: true,
        },
    },
    {
        label: t('item.list.stemMultiplier'),
        name: 'stemMultiplier',
        align: 'left',
        component: 'input',
        columnField: {
            component: null,
        },
        columnFilter: {
            inWhere: true,
        },
    },
    {
        label: t('item.list.isActive'),
        name: 'isActive',
        align: 'center',
        component: 'checkbox',
    },
    {
        label: t('globals.producer'),
        name: 'producer',
        align: 'left',
        component: 'select',
        columnFilter: {
            name: 'producerFk',
            attrs: {
                url: 'Producers',
                optionValue: 'id',
                optionLabel: 'name',
            },
        },
        columnField: {
            component: null,
        },
    },
    {
        label: t('globals.landed'),
        name: 'landed',
        align: 'left',
        component: 'date',
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.landed)),
    },
    {
        align: 'right',
        label: '',
        name: 'tableActions',
        actions: [
            {
                title: t('globals.clone'),

                icon: 'vn:clone',
                action: openCloneDialog,
                isPrimary: true,
            },
            {
                title: t('components.smartCard.viewSummary'),
                icon: 'preview',
                action: (row) => viewSummary(row.id, ItemSummary),
                isPrimary: true,
            },
        ],
    },
]);
</script>
<template>
    <VnSearchbar
        data-key="ItemList"
        :label="t('item.searchbar.label')"
        :info="t('You can search by id')"
    />
    <RightMenu>
        <template #right-panel>
            <ItemListFilter data-key="ItemList" />
        </template>
    </RightMenu>
    <VnTable
        ref="tableRef"
        data-key="ItemList"
        url="Items/filter"
        :create="{
            urlCreate: 'Items',
            title: t('Create Item'),
            onDataSaved: () => tableRef.redirect(),
            formInitialData: {
                editorFk: entityId,
            },
        }"
        :order="['isActive DESC', 'name', 'id']"
        :columns="columns"
        redirect="Item"
        :is-editable="false"
        :right-search="false"
        :filter="itemFilter"
    >
        <template #column-image="{ row }">
            <VnImg
                :id="row?.id"
                zoom-resolution="1600x900"
                :zoom="true"
                class="rounded"
            />
        </template>
        <template #column-id="{ row }">
            <span class="link" @click.stop>
                {{ row.id }}
                <ItemDescriptorProxy :id="row.id" />
            </span>
        </template>
        <template #column-typeName="{ row }">
            <span class="link" @click.stop>
                {{ row.typeName }}
                {{ row.typeFk }}
                <ItemTypeDescriptorProxy :id="row.typeFk" />
            </span>
        </template>
        <template #column-userName="{ row }">
            <span class="link" @click.stop>
                {{ row.userName }}
                <WorkerDescriptorProxy :id="row.buyerFk" />
            </span>
        </template>
        <template #column-description="{ row }">
            <div class="row column full-width justify-between items-start">
                {{ row?.name }}
                <div v-if="row?.subName" class="subName">
                    {{ row?.subName.toUpperCase() }}
                </div>
            </div>
            <FetchedTags :item="row" :columns="3" />
        </template>
    </VnTable>
</template>
<style lang="scss" scoped>
.subName {
    text-transform: uppercase;
    color: var(--vn-label-color);
    font-size: small;
}
</style>
<i18n>
es:
    New item: Nuevo artículo
    Create Item: Crear artículo
    You can search by id: Puedes buscar por id
    Preview: Vista previa
    Regularize stock: Regularizar stock
</i18n>