salix-front/src/pages/Ticket/Negative/TicketLackList.vue

<script setup>
import { computed, ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import VnTable from 'components/VnTable/VnTable.vue';
import { onBeforeMount } from 'vue';
import { dashIfEmpty, toDate, toHour } from 'src/filters';
import { useRouter } from 'vue-router';
import { useState } from 'src/composables/useState';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import TicketLackFilter from './TicketLackFilter.vue';
onBeforeMount(() => {
    stateStore.$state.rightDrawer = true;
});
const router = useRouter();
const stateStore = useStateStore();
const { t } = useI18n();
const selectedRows = ref([]);
const tableRef = ref();
const filterParams = ref({});
const negativeParams = reactive({
    warehouseFk: useState().getUser().value.warehouseFk,
    availabled: Date.getCurrentDateTimeFormatted(),
});
const redirectToCreateView = ({ itemFk }) => {
    const route = {
        name: 'NegativeDetail',
        params: { itemFk },
    };
    router.push(route);
};
const columns = computed(() => [
    {
        name: 'date',
        align: 'center',
        label: t('negative.date'),
        format: ({ timed }) => toDate(timed),
        sortable: true,
        cardVisible: true,
        isId: true,
        columnFilter: {
            component: 'date',
        },
    },
    {
        columnClass: 'shrink',
        name: 'timed',
        align: 'center',
        label: t('negative.timed'),
        format: ({ timed }) => toHour(timed),
        sortable: true,
        cardVisible: true,
        columnFilter: {
            component: 'time',
        },
    },
    {
        name: 'itemFk',
        align: 'center',
        label: t('negative.id'),
        format: ({ itemFk }) => itemFk,
        sortable: true,
        columnFilter: {
            component: 'input',
            type: 'number',
            inWhere: false,
        },
    },
    {
        name: 'longName',
        align: 'left',
        label: t('negative.longName'),
        field: ({ longName }) => longName,
        columnFilter: {
            component: 'input',
            inWhere: false,
            useLike: true,
        },
        sortable: true,
        headerStyle: 'width: 350px',
        cardVisible: true,
        columnClass: 'expand',
    },
    {
        name: 'producer',
        align: 'center',
        label: t('negative.supplier'),
        field: ({ producer }) => dashIfEmpty(producer),
        sortable: true,
        columnClass: 'shrink',
    },
    {
        name: 'inkFk',
        align: 'center',
        label: t('negative.colour'),
        field: ({ inkFk }) => inkFk,
        sortable: true,
        cardVisible: true,
        columnFilter: {
            component: 'input',
            columnClass: 'shrink',
            inWhere: false,
        },
    },
    {
        name: 'size',
        align: 'center',
        label: t('negative.size'),
        field: ({ size }) => size,
        sortable: true,
        cardVisible: true,
        columnFilter: {
            component: 'input',
            type: 'number',
            columnClass: 'shrink',
        },
    },
    {
        name: 'category',
        align: 'center',
        label: t('negative.origen'),
        field: ({ category }) => dashIfEmpty(category),
        sortable: true,
        cardVisible: true,
    },
    {
        name: 'lack',
        align: 'center',
        label: t('negative.lack'),
        field: ({ lack }) => lack,
        columnFilter: {
            component: 'input',
            type: 'number',
            columnClass: 'shrink',
        },
        sortable: true,
        headerStyle: 'padding-center: 33px',
        cardVisible: true,
    },
    {
        name: 'tableActions',
        align: 'center',
        actions: [
            {
                title: t('Open details'),
                icon: 'edit',
                action: redirectToCreateView,
                isPrimary: true,
            },
        ],
    },
]);

const setUserParams = (params) => {
    filterParams.value = params;
};
</script>

<template>
    <RightMenu>
        <template #right-panel>
            <TicketLackFilter data-key="NegativeList" @set-user-params="setUserParams" />
        </template>
    </RightMenu>
    <VnTable
        ref="tableRef"
        data-key="NegativeList"
        :url="`Tickets/itemLack`"
        :order="['itemFk DESC, date DESC, timed DESC']"
        :user-params="negativeParams"
        auto-load
        :columns="columns"
        default-mode="table"
        :right-search="false"
        :is-editable="false"
        :use-model="true"
        :map-key="false"
        :row-click="redirectToCreateView"
        v-model:selected="selectedRows"
        :create="false"
        :crud-model="{
            disableInfiniteScroll: true,
            insertOnLoad: false,
        }"
        :table="{
            'row-key': 'itemFk',
            selection: 'multiple',
        }"
    >
        <template #column-itemFk="{ row }">
            <div
                style="display: flex; justify-content: space-around; align-items: center"
            >
                <span @click.stop>{{ row.itemFk }}</span>
            </div>
        </template>
        <template #column-longName="{ row }">
            <span class="link" @click.stop>
                {{ row.longName }}
                <ItemDescriptorProxy :id="row.itemFk" />
            </span>
        </template>
    </VnTable>
</template>

<style lang="scss" scoped>
.list {
    max-height: 100%;
    padding: 15px;
    width: 100%;
}

.grid-style-transition {
    transition:
        transform 0.28s,
        background-color 0.28s;
}

#true {
    background-color: $positive;
}

#false {
    background-color: $negative;
}

div.q-dialog__inner > div {
    max-width: fit-content !important;
}
.q-btn-group > .q-btn-item:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
</style>