salix-front/src/pages/Travel/TravelList.vue

<script setup>
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useStateStore } from 'stores/useStateStore';
import VnTable from 'components/VnTable/VnTable.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';

import { computed } from 'vue';

const router = useRouter();
const { t } = useI18n();
const stateStore = useStateStore();

const warehouses = ref([]);

const cloneTravel = (travelData) => {
    const stringifiedTravelData = JSON.stringify(travelData);
    redirectToCreateView(stringifiedTravelData);
};

const redirectToCreateView = (queryParams) => {
    router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
};

const redirectCreateEntryView = (travelData) => {
    router.push({ name: 'EntryCreate', query: { travelFk: travelData.id } });
};

const getWarehouseName = (id) => {
    return warehouses.value.find((warehouse) => warehouse.id === id).name;
};

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

const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('travel.travelList.tableVisibleColumns.id'),
        isId: true,
        field: 'id',
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'ref',
        label: t('travel.travelList.tableVisibleColumns.ref'),
        field: 'ref',
        component: 'input',
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'agencyModeFk',
        label: t('travel.travelList.tableVisibleColumns.agency'),
        field: 'agencyModeFk',
        component: 'select',
        attrs: {
            url: 'agencyModes',
            fields: ['id', 'name'],
        },
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'shipped',
        label: t('travel.travelList.tableVisibleColumns.shipped'),
        field: 'shipped',
        component: 'date',
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'landed',
        label: t('travel.travelList.tableVisibleColumns.landed'),
        field: 'landed',
        component: 'date',
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'warehouseInFk',
        label: t('travel.travelList.tableVisibleColumns.warehouseIn'),
        field: 'warehouseInFk',
        component: 'select',
        attrs: {
            url: 'warehouses',
            fields: ['id', 'name'],
        },
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'warehouseOutFk',
        label: t('travel.travelList.tableVisibleColumns.warehouseOut'),
        field: 'warehouseOutFk',
        component: 'select',
        attrs: {
            url: 'warehouses',
            fields: ['id', 'name'],
        },
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'totalEntries',
        label: t('travel.travelList.tableVisibleColumns.totalEntries'),
        field: 'totalEntries',
        component: 'input',
        cardVisible: true,
        create: true,
    },
    {
        align: 'right',
        label: '',
        name: 'tableActions',
        actions: [
            {
                title: t('Clone'),
                icon: 'vn:clone',
                action: cloneTravel,
                isPrimary: true,
            },
            {
                title: t('Add entry'),
                icon: 'contact_support',
                action: redirectCreateEntryView,
            },
        ],
    },
]);
</script>

<template>
    <VnTable
        ref="tableRef"
        data-key="Travels"
        :url="`Travels`"
        :create="{
            urlCreate: 'Travels',
            title: t('Create Travels'),
            onDataSaved: () => tableRef.reload(),
            formInitialData: {
                workerFk: entityId,
            },
        }"
        order="landed DESC"
        :columns="columns"
        default-mode="table"
        auto-load
        redirect="travel"
        :right-search="false"
        :is-editable="false"
        :use-model="true"
    />
</template>

<i18n>
en:
    addEntry: Add entry
    searchByIdOrReference: Search by ID or reference

es:
    addEntry: Añadir entrada
    searchByIdOrReference: Buscar por ID o por referencia
</i18n>