src/components/VnTable/VnOrder.vue

@@ -4,7 +4,7 @@ import { useArrayData } from 'composables/useArrayData';
 const model = defineModel({ type: Object });
 const $props = defineProps({
     name: {
-        type: String,
+        type: [String, Boolean],
         default: '',
     },
     label: {

src/components/VnTable/VnTable.vue

@@ -101,6 +101,10 @@ const $props = defineProps({
         type: String,
         default: '90vh',
     },
+    footer: {
+        type: Boolean,
+        default: false,
+    },
 });
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -390,7 +394,7 @@ function handleOnDataSaved(_) {
                 card-container-class="grid-three"
                 flat
                 :style="isTableMode && `max-height: ${tableHeight}`"
-                virtual-scroll
+                :virtual-scroll="!isTableMode"
                 @virtual-scroll="
                     (event) =>
                         event.index > rows.length - 2 &&
@@ -632,6 +636,28 @@ function handleOnDataSaved(_) {
                         </QCard>
                     </component>
                 </template>
+                <template #bottom-row="{ cols }" v-if="footer">
+                    <QTr v-if="rows.length" class="bg-header" style="height: 30px">
+                        <QTh
+                            v-for="col of cols.filter((cols) => cols.visible ?? true)"
+                            :key="col?.id"
+                            class="text-center"
+                        >
+                            <div
+                                v-if="col?.summation"
+                                :class="`text-${col?.align ?? 'left'}`"
+                                class="text-bold q-pa-sm"
+                            >
+                                {{
+                                    rows.reduce(
+                                        (sum, currentRow) => sum + currentRow[col.name],
+                                        0
+                                    )
+                                }}
+                            </div>
+                        </QTh>
+                    </QTr>
+                </template>
             </QTable>
         </template>
     </CrudModel>
@@ -699,7 +725,7 @@ es:
 }
 
 .bg-header {
-    background-color: var(--vn-header-color);
+    background-color: var(--vn-accent-color);
     color: var(--vn-text-color);
 }
 
@@ -709,9 +735,7 @@ es:
 
 .q-table--dark .q-table__bottom,
 .q-table--dark thead,
-.q-table--dark tr,
+.q-table--dark tr {
-.q-table--dark th,
-.q-table--dark td {
     border-color: var(--vn-section-color);
 }
 

src/components/common/VnComponent.vue

@@ -17,17 +17,15 @@ const $props = defineProps({
     },
 });
 
-let mixed;
 const componentArray = computed(() => {
     if (typeof $props.prop === 'object') return [$props.prop];
     return $props.prop;
 });
 
 function mix(toComponent) {
-    if (mixed) return mixed;
     const { component, attrs, event } = toComponent;
     const customComponent = $props.components[component];
-    mixed = {
+    return {
         component: customComponent?.component ?? component,
         attrs: {
             ...toValueAttrs(attrs),
@@ -37,7 +35,6 @@ function mix(toComponent) {
         },
         event: { ...customComponent?.event, ...event },
     };
-    return mixed;
 }
 
 function toValueAttrs(attrs) {

src/components/ui/VnFilterPanel.vue

@@ -59,6 +59,7 @@ const $props = defineProps({
 });
 
 defineExpose({ search, sanitizer });
+
 const emit = defineEmits([
     'update:modelValue',
     'refresh',

src/i18n/locale/en.yml

@@ -158,6 +158,7 @@ globals:
         dms: File management
         entryCreate: New entry
         latestBuys: Latest buys
+        reserves: Reserves
         tickets: Tickets
         ticketCreate: New Tickets
         boxing: Boxing

src/pages/Entry/EntryStockBought.vue

@@ -0,0 +1,251 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useState } from 'src/composables/useState';
+import { useQuasar } from 'quasar';
+
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import FetchData from 'components/FetchData.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import EntryStockBoughtFilter from './EntryStockBoughtFilter.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import EntryStockBoughtDetail from 'src/pages/Entry/EntryStockBoughtDetail.vue';
+
+const { t } = useI18n();
+const quasar = useQuasar();
+const state = useState();
+const user = state.getUser();
+const columns = [
+    {
+        align: 'left',
+        label: 'Id',
+        name: 'id',
+        isId: true,
+        columnFilter: false,
+        visible: false,
+    },
+    {
+        align: 'left',
+        name: 'workerFk',
+        label: t('Buyer'),
+        isTitle: true,
+        component: 'select',
+        cardVisible: true,
+        create: true,
+        attrs: {
+            url: 'Workers/activeWithInheritedRole',
+            fields: ['id', 'name'],
+            where: { role: 'buyer' },
+            optionFilter: 'firstName',
+            optionLabel: 'name',
+            optionValue: 'id',
+            useLike: false,
+        },
+    },
+    {
+        align: 'left',
+        label: t('Reserve'),
+        name: 'reserve',
+        columnFilter: false,
+        create: true,
+        component: 'number',
+        summation: true,
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        label: t('Bought'),
+        name: 'bought',
+        summation: true,
+        cardVisible: true,
+        columnFilter: false,
+    },
+    {
+        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,
+                            dated: userParams.value.dated,
+                        },
+                    });
+                },
+            },
+        ],
+    },
+];
+
+const fetchDataRef = ref();
+const travelDialogRef = ref(false);
+const tableRef = ref();
+const travel = ref(null);
+const userParams = ref({
+    dated: Date.vnNew(),
+});
+const filter = ref({
+    where: {
+        shipped: (userParams.value.dated
+            ? new Date(userParams.value.dated)
+            : Date.vnNew()
+        ).setHours(0, 0, 0, 0),
+        m3: { neq: null },
+    },
+    include: [
+        {
+            relation: 'warehouseIn',
+            scope: {
+                fields: ['code'],
+            },
+        },
+    ],
+});
+
+const setUserParams = async ({ dated }) => {
+    const shipped = (dated ? new Date(dated) : Date.vnNew()).setHours(0, 0, 0, 0);
+    filter.value.where.shipped = shipped;
+    fetchDataRef.value?.fetch();
+};
+
+function openDialog() {
+    travelDialogRef.value = true;
+}
+</script>
+<template>
+    <VnSubToolbar>
+        <template #st-data>
+            <FetchData
+                ref="fetchDataRef"
+                url="Travels"
+                auto-load
+                :filter="filter"
+                @on-fetch="
+                    (data) => {
+                        travel = data.filter((data) => data.warehouseIn.code === 'VNH');
+                    }
+                "
+            />
+            <VnRow class="travel">
+                <div v-if="travel">
+                    <span style="color: var(--vn-label-color)">
+                        {{ t('Booked trucks') }}:
+                    </span>
+                    <span>
+                        {{ travel[0]?.m3 }}
+                    </span>
+                    <QBtn
+                        v-if="travel[0]?.m3"
+                        style="max-width: 20%"
+                        flat
+                        icon="edit"
+                        @click="openDialog()"
+                        :title="t('Edit travel')"
+                        color="primary"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </VnSubToolbar>
+    <QDialog v-model="travelDialogRef" :maximized="true" :class="['vn-row', 'wrap']">
+        <FormModelPopup
+            :url-update="`Travels/${travel[0].id}`"
+            model="travel"
+            :title="t('Travel m3')"
+            :form-initial-data="{ id: travel[0].id, m3: travel[0].m3 }"
+            @on-data-saved="fetchDataRef.fetch()"
+        >
+            <template #form-inputs="{ data }">
+                <VnInput
+                    v-model="data.id"
+                    :label="t('id')"
+                    type="number"
+                    disable
+                    readonly
+                />
+                <VnInput v-model="data.m3" :label="t('m3')" type="number" />
+            </template>
+        </FormModelPopup>
+    </QDialog>
+    <RightMenu>
+        <template #right-panel>
+            <EntryStockBoughtFilter
+                data-key="StockBoughts"
+                @set-user-params="setUserParams"
+            />
+        </template>
+    </RightMenu>
+    <QPage class="column items-center q-pa-md">
+        <VnTable
+            ref="tableRef"
+            data-key="StockBoughts"
+            url="StockBoughts/getStockBought"
+            save-url="StockBoughts/crud"
+            order="reserve DESC"
+            :right-search="false"
+            :is-editable="true"
+            :create="{
+                urlCreate: 'StockBoughts',
+                title: t('Reserve some space'),
+                onDataSaved: () => tableRef.reload(),
+                formInitialData: {
+                    workerFk: user.id,
+                    dated: Date.vnNow(),
+                },
+            }"
+            :columns="columns"
+            :user-params="userParams"
+            :footer="true"
+            auto-load
+        >
+            <template #column-workerFk="{ row }">
+                <span class="link" @click.stop>
+                    {{ row?.worker?.user?.name }}
+                    <WorkerDescriptorProxy :id="row?.workerFk" />
+                </span>
+            </template>
+        </VnTable>
+    </QPage>
+</template>
+<style lang="css" scoped>
+.travel {
+    margin-bottom: 0px;
+}
+</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:
+        Edit travel: Editar envío
+        Travel: Envíos
+        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>

src/pages/Entry/EntryStockBoughtDetail.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnTable from 'components/VnTable/VnTable.vue';
+import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+
+const { t } = useI18n();
+const tableRef = ref();
+const $props = defineProps({
+    workerFk: {
+        type: Number,
+        required: true,
+    },
+    dated: {
+        type: Date,
+        required: true,
+    },
+});
+const customUrl = `StockBoughts/getStockBoughtDetail?workerFk=${$props.workerFk}&date=${$props.dated}`;
+const columns = [
+    {
+        align: 'left',
+        label: 'Entry',
+        name: 'entryFk',
+        isTitle: true,
+        isId: true,
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        name: 'itemFk',
+        label: t('Item'),
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        label: t('Name'),
+        name: 'itemName',
+        create: true,
+        columnClass: 'expand',
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        name: 'volume',
+        label: t('Volume'),
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        label: t('Packaging'),
+        name: 'packagingFk',
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        label: 'Packing',
+        name: 'packing',
+        columnFilter: false,
+    },
+];
+</script>
+<template>
+    <QDialog :maximized="true">
+        <div class="container">
+            <VnTable
+                ref="tableRef"
+                data-key="StockBoughtsDetail"
+                :url="customUrl"
+                order="itemName DESC"
+                :columns="columns"
+                :right-search="false"
+                :disable-infinite-scroll="true"
+                :disable-option="{ card: true }"
+                :limit="0"
+                auto-load
+            >
+                <template #column-entryFk="{ row }">
+                    <span class="link" @click.stop>
+                        {{ row?.entryFk }}
+                        <EntryDescriptorProxy :id="row.entryFk" />
+                    </span>
+                </template>
+                <template #column-itemName="{ row }">
+                    <span class="link" @click.stop>
+                        {{ row?.itemName }}
+                        <ItemDescriptorProxy :id="row.itemFk" />
+                    </span>
+                </template>
+            </VnTable>
+        </div>
+    </QDialog>
+</template>
+<style lang="css">
+.q-dialog__inner {
+    max-width: 50vw;
+    overflow: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+}
+</style>
+<i18n>
+    es:
+        Buyer: Comprador
+        Reserve: Reservado
+        Bought: Comprado
+        More: Más
+        Date: Fecha
+</i18n>

src/pages/Entry/EntryStockBoughtFilter.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { onMounted } from 'vue';
+import { useStateStore } from 'stores/useStateStore';
+
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+const stateStore = useStateStore();
+const emit = defineEmits(['set-user-params']);
+const setUserParams = (params) => {
+    emit('set-user-params', params);
+};
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+});
+</script>
+
+<template>
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :search-button="true"
+        search-url="table"
+        @set-user-params="setUserParams"
+    >
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params }">
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInputDate
+                        id="date"
+                        v-model="params.dated"
+                        :label="t('Date')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
+<i18n>
+    en:
+        params:
+            dated: Date
+            workerFk: Worker
+    es:
+        Date: Fecha
+        params:
+            dated: Date
+            workerFk: Trabajador
+</i18n>

src/pages/Route/Card/RouteSearchbar.vue

@@ -3,7 +3,6 @@ import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
 </script>
-
 <template>
     <VnSearchbar
         data-key="RouteList"

src/pages/Travel/Card/TravelBasicData.vue

@@ -70,6 +70,9 @@ const agenciesOptions = ref([]);
                     hide-selected
                 />
             </VnRow>
+            <VnRow>
+                <VnInput v-model="data.m3" label="m3" />
+            </VnRow>
             <VnRow>
                 <QCheckbox
                     :label="t('travel.basicData.delivered')"

src/router/modules/entry.js

@@ -12,7 +12,7 @@ export default {
     component: RouterView,
     redirect: { name: 'EntryMain' },
     menus: {
-        main: ['EntryList', 'MyEntries', 'EntryLatestBuys'],
+        main: ['EntryList', 'MyEntries', 'EntryLatestBuys', 'EntryStockBought'],
         card: ['EntryBasicData', 'EntryBuys', 'EntryNotes', 'EntryDms', 'EntryLog'],
     },
     children: [
@@ -58,6 +58,15 @@ export default {
                     },
                     component: () => import('src/pages/Entry/EntryLatestBuys.vue'),
                 },
+                {
+                    path: 'stock-Bought',
+                    name: 'EntryStockBought',
+                    meta: {
+                        title: 'reserves',
+                        icon: 'deployed_code_history',
+                    },
+                    component: () => import('src/pages/Entry/EntryStockBought.vue'),
+                },
             ],
         },
         {

test/cypress/integration/entry/stockBought.spec.js

@@ -0,0 +1,41 @@
+describe('EntryStockBought', () => {
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('buyer');
+        cy.visit(`/#/entry/stock-Bought`);
+    });
+    it('Should edit the reserved space', () => {
+        cy.get('.q-field__native.q-placeholder').should('have.value', '01/01/2001');
+        cy.get('tBody > tr').its('length').should('eq', 2);
+        cy.get('input[name="reserve"]').type('10{enter}');
+        cy.get('button[title="Save"]').click();
+        cy.get('.q-notification__message').should('have.text', 'Data saved');
+    });
+    it('Should add a new reserved space for buyerBoss', () => {
+        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get('input[aria-label="Reserve"]').type('1');
+        cy.get('input[aria-label="Date"]').eq(1).clear();
+        cy.get('input[aria-label="Date"]').eq(1).type('01-01');
+        cy.get('input[aria-label="Buyer"]').type('buyerboss{downarrow}{enter}');
+        cy.get('.q-notification__message').should('have.text', 'Data created');
+        cy.get('tBody > tr').its('length').should('eq', 3);
+    });
+    it('Should check detail for the buyer', () => {
+        cy.get(':nth-child(1) > .sticky > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get('tBody > tr').eq(1).its('length').should('eq', 1);
+    });
+    it('Should check detail for the buyerBoss and had no content', () => {
+        cy.get(':nth-child(2) > .sticky > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get('.q-table__bottom.row.items-center.q-table__bottom--nodata').should(
+            'have.text',
+            'warningNo data available'
+        );
+    });
+    it('Should edit travel m3 and refresh', () => {
+        cy.get('.vn-row > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get('input[aria-label="m3"]').clear();
+        cy.get('input[aria-label="m3"]').type('60');
+        cy.get('.q-mt-lg > .q-btn--standard > .q-btn__content > .block').click();
+        cy.get('.vn-row > div > :nth-child(2)').should('have.text', '60');
+    });
+});