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

<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState';
import { useQuasar } from 'quasar';

import VnTable from 'components/VnTable/VnTable.vue';
import VnRow from 'src/components/ui/VnRow.vue';
import FetchData from 'src/components/FetchData.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import EntryStockBoughtDetail from 'src/pages/Entry/EntryStockBoughtDetail.vue';
import { useRouter } from 'vue-router';

const { t } = useI18n();
const quasar = useQuasar();
const tableRef = ref();
const state = useState();
const user = state.getUser();
const router = useRouter();
const columns = [
    {
        align: 'left',
        label: 'Id',
        name: 'id',
        isId: true,
        columnFilter: false,
        visible: false,
    },
    {
        align: 'left',
        name: 'workerFk',
        label: t('Buyer'),
        isTitle: true,
        columnFilter: false,
    },
    {
        align: 'left',
        label: t('Reserve'),
        name: 'reserve',
        columnFilter: false,
        create: true,
        component: 'number',
        summation: true,
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'workerFk',
        label: t('Buyer'),
        component: 'select',
        create: true,
        visible: false,
        columnFilter: false,
        attrs: {
            url: 'Workers/activeWithInheritedRole',
            fields: ['id', 'name'],
            where: { role: 'buyer' },
            optionFilter: 'firstName',
            optionLabel: 'name',
            optionValue: 'id',
            useLike: false,
        },
    },
    {
        align: 'left',
        label: t('Bought'),
        name: 'bought',
        columnFilter: false,
        summation: true,
        cardVisible: true,
    },
    {
        align: 'left',
        label: t('Date'),
        name: 'dated',
        component: 'date',
        visible: false,
        create: true,
    },
    {
        align: 'left',
        name: 'tableActions',
        actions: [
            {
                title: t('More'),
                icon: 'search',
                isPrimary: true,
                action: (row) => {
                    quasar.dialog({
                        component: EntryStockBoughtDetail,
                        componentProps: {
                            workerFk: row.workerFk,
                        },
                        maximized: true,
                    });
                },
            },
        ],
    },
];

function navigate(id) {
    router.push({ path: `/travel/${id}/basic-data` });
}

function getFilter(dated) {
    const shipped = dated ? new Date(dated) : Date.vnNew();
    shipped.setHours(0, 0, 0, 0);
    return {
        where: {
            shipped,
            m3: { neq: null },
        },
        include: [
            {
                relation: 'warehouseIn',
            },
        ],
    };
}
const travel = ref();
const fetchDataRef = ref();
</script>
<template>
    <VnSubToolbar />
    <QPage class="column items-center q-pa-md">
        <VnTable
            ref="tableRef"
            data-key="StockBoughts"
            url="StockBoughts/getStockBought"
            save-url="StockBoughts/crud"
            order="reserve DESC"
            :is-editable="true"
            :create="{
                urlCreate: 'StockBoughts',
                title: t('Reserve some space'),
                onDataSaved: () => tableRef.reload(),
                formInitialData: {
                    workerFk: user.id,
                    dated: Date.vnNow(),
                },
            }"
            :columns="columns"
            auto-load
            @on-fetch="() => console.log('fetching...', fetchDataRef.fetch())"
            style="max-width: 40%"
            :footer="true"
        >
            <template #moreFilterPanel="{ params }">
                <FetchData
                    ref="fetchDataRef"
                    url="Travels"
                    limit="1"
                    auto-load
                    :filter="getFilter(params?.dated)"
                    @on-fetch="(data) => (travel = data)"
                />
                <div class="trucks">
                    <div>
                        <span style="color: var(--vn-label-color)">
                            {{ t('Booked trucks') + ': ' }}
                        </span>
                    </div>
                    <div v-if="travel">
                        <span>
                            {{ travel[0]?.m3 }}
                        </span>
                        <QBtn
                            style="max-width: 20%"
                            flat
                            icon="edit"
                            @click="navigate(travel[0]?.id)"
                        />
                    </div>
                </div>
            </template>
            <template #column-workerFk="{ row }">
                <span class="link" @click.stop>
                    {{ row?.worker?.user?.name }}
                    <WorkerDescriptorProxy :id="row?.workerFk" />
                </span>
            </template>
        </VnTable>
    </QPage>
</template>
<style lang="scss">
.trucks {
    text-align: center;
    margin: 3%;
    border: 3px solid var(--vn-header-color);
    padding: 1%;
}
</style>
<i18n>
    en:
        Buyer: Buyer
        Reserve: Reserve
        Bought: Bought
        More: More
        Date: Date
        This buyer has already made a reservation for this date: This buyer has already made a reservation for this date
    es:
        Booked trucks: Camiones reservados
        Buyer: Comprador
        Reserve: Reservado
        Bought: Comprado
        More: Más
        Date: Fecha
        Reserve some space: Reservar espacio
        This buyer has already made a reservation for this date: Este comprador ya ha hecho una reserva para esta fecha
</i18n>