Merge pull request '#7347 - Supplier Consumption layout updates' (!1451) from 7347_supplierConsumption into dev

Reviewed-on: #1451
Reviewed-by: Javi Gallego <jgallego@verdnatura.es>

src/components/VnTable/VnTable.vue

@@ -34,7 +34,7 @@ import VnTableFilter from './VnTableFilter.vue';
 import { getColAlign } from 'src/composables/getColAlign';
 import RightMenu from '../common/RightMenu.vue';
 import VnScroll from '../common/VnScroll.vue';
-import VnMultiCheck from '../common/VnMultiCheck.vue';
+import VnCheckboxMenu from '../common/VnCheckboxMenu.vue';
 
 const arrayData = useArrayData(useAttrs()['data-key']);
 const $props = defineProps({
@@ -644,21 +644,15 @@ const rowCtrlClickFunction = computed(() => {
         };
     return () => {};
 });
-const handleMultiCheck = (value) => {
+const handleHeaderSelection = (evt, data) => {
-    if (value) {
+    if (evt === 'selected' && data) {
         selected.value = tableRef.value.rows;
-    } else {
+    } else if (evt === 'selectAll') {
-        selected.value = [];
-    }
-    emit('update:selected', selected.value);
-};
-
-const handleSelectedAll = (data) => {
-    if (data) {
         selected.value = data;
     } else {
         selected.value = [];
     }
+
     emit('update:selected', selected.value);
 };
 </script>
@@ -724,14 +718,14 @@ const handleSelectedAll = (data) => {
                 :data-cy
             >
                 <template #header-selection>
-                    <VnMultiCheck
+                    <VnCheckboxMenu
                         :searchUrl="searchUrl"
                         :expand="$props.multiCheck.expand"
                         v-model="selectAll"
                         :url="$attrs['url']"
-                        @update:selected="handleMultiCheck"
+                        @update:selected="handleHeaderSelection('selected', $event)"
-                        @select:all="handleSelectedAll"
+                        @select:all="handleHeaderSelection('selectAll', $event)"
-                    ></VnMultiCheck>
+                    />
                 </template>
 
                 <template #top-left v-if="!$props.withoutHeader">

src/components/common/VnCheckboxMenu.vue

@@ -0,0 +1,115 @@
+<script setup>
+import { ref } from 'vue';
+import VnCheckbox from './VnCheckbox.vue';
+import axios from 'axios';
+import { toRaw } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+const route = useRoute();
+const { t } = useI18n();
+const model = defineModel({ type: [Boolean] });
+const props = defineProps({
+    expand: {
+        type: Boolean,
+        default: false,
+    },
+    url: {
+        type: String,
+        required: true,
+    },
+    searchUrl: {
+        type: [String, Boolean],
+        default: 'table',
+    },
+});
+const value = ref(false);
+const menuRef = ref(null);
+const errorMessage = ref(null);
+const rows = ref(0);
+const onClick = async () => {
+    errorMessage.value = null;
+
+    if (value.value) {
+        const { filter } = JSON.parse(route.query[props.searchUrl]);
+        filter.limit = 0;
+        const params = {
+            params: { filter: JSON.stringify(filter) },
+        };
+        try {
+            const { data } = await axios.get(props.url, params);
+            rows.value = data;
+        } catch (error) {
+            const response = error.response;
+            if (response.data.error.name === 'UserError') {
+                errorMessage.value = t('tooManyResults');
+            } else {
+                errorMessage.value = response.data.error.message;
+            }
+        }
+    }
+};
+defineEmits(['update:selected', 'select:all']);
+</script>
+
+<template>
+    <div class="flex items-center no-wrap" style="display: flex">
+        <VnCheckbox v-model="value" @click="$emit('update:selected', value)" />
+        <QIcon
+            style="margin-left: -10px"
+            data-cy="btnMultiCheck"
+            v-if="value && $props.expand"
+            name="expand_more"
+            @click="onClick"
+            class="cursor-pointer"
+            color="primary"
+            size="xs"
+        >
+            <QMenu
+                fit
+                anchor="bottom start"
+                self="top left"
+                ref="menuRef"
+                data-cy="menuMultiCheck"
+            >
+                <QList separator>
+                    <QItem
+                        data-cy="selectAll"
+                        v-ripple
+                        clickable
+                        @click="
+                            $refs.menuRef.hide();
+                            $emit('select:all', toRaw(rows));
+                        "
+                    >
+                        <QItemSection>
+                            <QItemLabel>
+                                <span v-text="t('Select all')" />
+                            </QItemLabel>
+                            <QItemLabel overline caption>
+                                <span
+                                    v-if="errorMessage"
+                                    class="text-negative"
+                                    v-text="errorMessage"
+                                />
+                                <span
+                                    v-else
+                                    v-text="t('records', { rows: rows.length })"
+                                />
+                            </QItemLabel>
+                        </QItemSection>
+                    </QItem>
+                    <slot name="more-options"></slot>
+                </QList>
+            </QMenu>
+        </QIcon>
+    </div>
+</template>
+<i18n lang="yml">
+en:
+    tooManyResults: Too many results. Please narrow down your search.
+    records: '{rows} records'
+es:
+    Select all: Seleccionar todo
+    tooManyResults: Demasiados registros. Restringe la búsqueda.
+    records: '{rows} registros'
+</i18n>

src/components/common/VnMultiCheck.vue

@@ -1,80 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import VnCheckbox from './VnCheckbox.vue';
-import axios from 'axios';
-import { toRaw } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-const route = useRoute();
-const { t } = useI18n();
-const model = defineModel({ type: [Boolean] });
-const props = defineProps({
-    expand: {
-        type: Boolean,
-        default: false,
-    },
-    url: {
-        type: String,
-        default: null,
-        required: true,
-    },
-    searchUrl: {
-        type: [String, Boolean],
-        default: 'table',
-    },
-});
-const value = ref(false);
-const rows = ref(0);
-const onClick = () => {
-    if (value.value) {
-        const { filter } = JSON.parse(route.query[props.searchUrl]);
-        filter.limit = 0;
-        const params = {
-            params: { filter: JSON.stringify(filter) },
-        };
-        axios
-            .get(props.url, params)
-            .then(({ data }) => {
-                rows.value = data;
-            })
-            .catch(console.error);
-    }
-};
-defineEmits(['update:selected', 'select:all']);
-</script>
-
-<template>
-    <div style="display: flex">
-        <VnCheckbox v-model="value" @click="$emit('update:selected', value)" />
-        <QBtn
-            v-if="value && $props.expand"
-            flat
-            dense
-            icon="expand_more"
-            @click="onClick"
-        >
-            <QMenu anchor="bottom right" self="top right">
-                <QList>
-                    <QItem v-ripple clickable @click="$emit('select:all', toRaw(rows))">
-                        {{ t('Select all', { rows: rows.length }) }}
-                    </QItem>
-                    <slot name="more-options"></slot>
-                </QList>
-            </QMenu>
-        </QBtn>
-    </div>
-</template>
-<i18n lang="yml">
-en:
-    Select all: 'Select all ({rows})'
-fr:
-    Select all: 'Sélectionner tout ({rows})'
-es:
-    Select all: 'Seleccionar todo ({rows})'
-de:
-    Select all: 'Alle auswählen ({rows})'
-it:
-    Select all: 'Seleziona tutto ({rows})'
-pt:
-    Select all: 'Selecionar tudo ({rows})'
-</i18n>

src/composables/useArrayData.js

@@ -19,7 +19,7 @@ export function useArrayData(key, userOptions) {
     let canceller = null;
 
     onMounted(() => {
-        setOptions();
+        setOptions(userOptions ?? {});
         reset(['skip']);
 
         const query = route.query;
@@ -39,9 +39,10 @@ export function useArrayData(key, userOptions) {
         setCurrentFilter();
     });
 
-    if (key && userOptions) setOptions();
+    if (userOptions) setOptions(userOptions);
 
-    function setOptions(params = userOptions) {
+    function setOptions(params) {
+        if (!params) return;
         const allowedOptions = [
             'url',
             'filter',

src/filters/index.js

@@ -6,6 +6,7 @@ import toDateHourMinSec from './toDateHourMinSec';
 import toRelativeDate from './toRelativeDate';
 import toCurrency from './toCurrency';
 import toPercentage from './toPercentage';
+import toNumber from './toNumber';
 import toLowerCamel from './toLowerCamel';
 import dashIfEmpty from './dashIfEmpty';
 import dateRange from './dateRange';
@@ -34,6 +35,7 @@ export {
     toRelativeDate,
     toCurrency,
     toPercentage,
+    toNumber,
     dashIfEmpty,
     dateRange,
     getParamWhere,

src/filters/toNumber.js

@@ -0,0 +1,8 @@
+export default function (value, fractionSize = 2) {
+    if (isNaN(value)) return value;
+    return new Intl.NumberFormat('es-ES', {
+        style: 'decimal',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: fractionSize,
+    }).format(value);
+}

src/i18n/locale/en.yml

@@ -122,6 +122,7 @@ globals:
     producer: Producer
     origin: Origin
     state: State
+    total: Total
     subtotal: Subtotal
     visible: Visible
     price: Price

src/i18n/locale/es.yml

@@ -126,6 +126,7 @@ globals:
     producer: Productor
     origin: Origen
     state: Estado
+    total: Total
     subtotal: Subtotal
     visible: Visible
     price: Precio

src/pages/Customer/Notifications/CustomerNotifications.vue

@@ -89,7 +89,6 @@ const columns = computed(() => [
             <CustomerNotificationsCampaignConsumption
                 :selected-rows="selected.length > 0"
                 :clients="selected"
-                :promise="refreshData"
             />
         </template>
     </VnSubToolbar>

src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue

@@ -142,13 +142,13 @@ onMounted(async () => {
             valentinesDay: Valentine's Day
             mothersDay: Mother's Day
             allSaints: All Saints' Day
-        Campaign consumption: Campaign consumption ({rows})
+        Campaign consumption: Campaign consumption - {rows} records
     es:
         params:
             valentinesDay: Día de San Valentín
             mothersDay: Día de la Madre
             allSaints: Día de Todos los Santos
-        Campaign consumption: Consumo campaña ({rows})
+        Campaign consumption: Consumo campaña - {rows} registros
         Campaign: Campaña
         From: Desde
         To: Hasta

src/pages/Customer/components/CustomerFileManagementActions.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
-
 import { useQuasar } from 'quasar';
 
+import { usePrintService } from 'composables/usePrintService';
 import { downloadFile } from 'src/composables/downloadFile';
 
 import CustomerFileManagementDelete from 'src/pages/Customer/components/CustomerFileManagementDelete.vue';
@@ -12,7 +12,7 @@ const { t } = useI18n();
 const quasar = useQuasar();
 const route = useRoute();
 const router = useRouter();
-
+const { openReport } = usePrintService();
 const $props = defineProps({
     id: {
         type: Number,
@@ -24,7 +24,7 @@ const $props = defineProps({
     },
 });
 
-const setDownloadFile = () => downloadFile($props.id);
+const setDownloadFile = () => openReport(`dms/${$props.id}/downloadFile`, {}, '_blank');
 
 const toCustomerFileManagementEdit = () => {
     router.push({

src/pages/Supplier/Card/SupplierConsumption.vue

@@ -1,22 +1,20 @@
 <script setup>
-import { useRoute } from 'vue-router';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 import { useQuasar } from 'quasar';
-import FetchedTags from 'components/ui/FetchedTags.vue';
-import SendEmailDialog from 'components/common/SendEmailDialog.vue';
-import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
-import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
-
-import { dateRange, toDate } from 'src/filters';
-import { dashIfEmpty } from 'src/filters';
-import { usePrintService } from 'composables/usePrintService';
-import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
+import { dateRange, toCurrency, toNumber, toDateHourMin } from 'src/filters';
+import { usePrintService } from 'composables/usePrintService';
+import useNotify from 'src/composables/useNotify';
 import { useStateStore } from 'stores/useStateStore';
 import { useState } from 'src/composables/useState';
 import { useArrayData } from 'composables/useArrayData';
+import SendEmailDialog from 'components/common/SendEmailDialog.vue';
+import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 const state = useState();
 const stateStore = useStateStore();
@@ -31,7 +29,86 @@ const arrayData = useArrayData('SupplierConsumption', {
     order: ['itemTypeFk', 'itemName', 'itemSize'],
     userFilter: { where: { supplierFk: route.params.id } },
 });
+const headerColumns = computed(() => [
+    {
+        name: 'id',
+        label: t('globals.entry'),
+        align: 'left',
+        field: 'id',
+        sortable: true,
+    },
+    {
+        name: 'invoiceNumber',
+        label: t('globals.params.supplierRef'),
+        align: 'left',
+        field: 'invoiceNumber',
+        sortable: true,
+    },
+    {
+        name: 'shipped',
+        label: t('globals.shipped'),
+        align: 'center',
+        field: 'shipped',
+        format: toDateHourMin,
+        sortable: true,
+    },
+    {
+        name: 'quantity',
+        label: t('item.list.stems'),
+        align: 'center',
+        field: 'quantity',
+        format: (value) => toNumber(value),
+        sortable: true,
+    },
+    {
+        name: 'total',
+        label: t('globals.total'),
+        align: 'center',
+        field: 'total',
+        format: (value) => toCurrency(value),
+        sortable: true,
+    },
+]);
 
+const columns = computed(() => [
+    {
+        name: 'itemName',
+        label: t('globals.item'),
+        align: 'left',
+        field: 'itemName',
+        sortable: true,
+    },
+    {
+        name: 'subName',
+        align: 'left',
+        field: 'subName',
+        sortable: true,
+    },
+    {
+        name: 'quantity',
+        label: t('globals.quantity'),
+        align: 'right',
+        field: 'quantity',
+        format: (value) => toNumber(value),
+        sortable: true,
+    },
+    {
+        name: 'price',
+        label: t('globals.price'),
+        align: 'right',
+        field: 'price',
+        format: (value) => toCurrency(value),
+        sortable: true,
+    },
+    {
+        name: 'total',
+        label: t('globals.total'),
+        align: 'right',
+        field: 'total',
+        format: (value) => toCurrency(value),
+        sortable: true,
+    },
+]);
 const store = arrayData.store;
 
 onUnmounted(() => state.unset('SupplierConsumption'));
@@ -40,13 +117,11 @@ const dateRanges = computed(() => {
     return { from, to };
 });
 
-const reportParams = computed(() => {
+const reportParams = computed(() => ({
-    return {
+    recipientId: Number(route.params.id),
-        recipientId: Number(route.params.id),
+    from: dateRange(dateRanges.value.from)[0].toISOString(),
-        to: dateRange(dateRanges.value.to)[1],
+    to: dateRange(dateRanges.value.to)[1].toISOString(),
-        from: dateRange(dateRanges.value.from)[1],
+}));
-    };
-});
 
 async function getSupplierConsumptionData() {
     await arrayData.fetch({ append: false });
@@ -102,33 +177,34 @@ const sendCampaignMetricsEmail = ({ address }) => {
 };
 
 const totalEntryPrice = (rows) => {
-    let totalPrice = 0;
+    if (!rows) return [];
-    let totalQuantity = 0;
+    totalRows.value = rows.reduce(
-    if (!rows) return totalPrice;
+        (acc, row) => {
-    for (const row of rows) {
+            if (Array.isArray(row.buys)) {
-        let total = 0;
+                const { total, quantity } = row.buys.reduce(
-        let quantity = 0;
+                    (buyAcc, buy) => {
-
+                        buyAcc.total += buy.total || 0;
-        if (row.buys) {
+                        buyAcc.quantity += buy.quantity || 0;
-            for (const buy of row.buys) {
+                        return buyAcc;
-                total = total + buy.total;
+                    },
-                quantity = quantity + buy.quantity;
+                    { total: 0, quantity: 0 },
+                );
+                row.total = total;
+                row.quantity = quantity;
+                acc.totalPrice += total;
+                acc.totalQuantity += quantity;
             }
-        }
+            return acc;
-
+        },
-        row.total = total;
+        { totalPrice: 0, totalQuantity: 0 },
-        row.quantity = quantity;
+    );
-        totalPrice = totalPrice + total;
-        totalQuantity = totalQuantity + quantity;
-    }
-    totalRows.value = { totalPrice, totalQuantity };
     return rows;
 };
-
 onMounted(async () => {
     stateStore.rightDrawer = true;
     await getSupplierConsumptionData();
 });
+const expanded = ref([]);
 </script>
 
 <template>
@@ -162,14 +238,14 @@ onMounted(async () => {
             <div>
                 {{ t('Total entries') }}:
                 <QChip :dense="$q.screen.lt.sm" text-color="white">
-                    {{ totalRows.totalPrice }} €
+                    {{ toCurrency(totalRows.totalPrice) }}
                 </QChip>
             </div>
             <QSeparator dark vertical />
             <div>
                 {{ t('Total stems entries') }}:
                 <QChip :dense="$q.screen.lt.sm" text-color="white">
-                    {{ totalRows.totalQuantity }}
+                    {{ toNumber(totalRows.totalQuantity) }}
                 </QChip>
             </div>
         </div>
@@ -179,59 +255,111 @@ onMounted(async () => {
             <SupplierConsumptionFilter data-key="SupplierConsumption" />
         </template>
     </RightMenu>
-    <QTable
+    <QCard class="full-width q-pa-md">
-        :rows="rows"
+        <QTable
-        row-key="id"
+            flat
-        hide-header
+            bordered
-        class="full-width q-mt-md"
+            :rows="rows"
-        :no-data-label="t('No results')"
+            :columns="headerColumns"
-    >
+            row-key="id"
-        <template #body="{ row }">
+            v-model:expanded="expanded"
-            <QTr>
+            :grid="$q.screen.lt.md"
-                <QTd no-hover>
+        >
-                    <span class="label">{{ t('supplier.consumption.entry') }}: </span>
+            <template #header="props">
-                    <span>{{ row.id }}</span>
+                <QTr :props="props">
-                </QTd>
+                    <QTh auto-width />
-                <QTd no-hover>
+
-                    <span class="label">{{ t('globals.date') }}: </span>
+                    <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                    <span>{{ toDate(row.shipped) }}</span></QTd
+                        <span v-text="col.label" class="tr-header" />
+                    </QTh>
+                </QTr>
+            </template>
+
+            <template #body="props">
+                <QTr
+                    :props="props"
+                    :key="`movement_${props.row.id}`"
+                    class="bg-vn-page cursor-pointer"
+                    @click="props.expand = !props.expand"
                 >
-                <QTd colspan="6" no-hover>
+                    <QTd auto-width>
-                    <span class="label">{{ t('globals.reference') }}: </span>
+                        <QIcon
-                    <span>{{ row.invoiceNumber }}</span>
+                            :class="props.expand ? '' : 'rotate-270'"
-                </QTd>
+                            name="expand_circle_down"
-            </QTr>
+                            size="md"
-            <QTr v-for="(buy, index) in row.buys" :key="index">
+                            :color="props.expand ? 'primary' : 'white'"
-                <QTd no-hover>
+                        />
-                    <QBtn flat class="link" dense no-caps>{{ buy.itemName }}</QBtn>
+                    </QTd>
-                    <ItemDescriptorProxy :id="buy.itemFk" />
-                </QTd>
 
-                <QTd no-hover>
+                    <QTd v-for="col in props.cols" :key="col.name" :props="props">
-                    <span>{{ buy.subName }}</span>
+                        <span @click.stop class="link" v-if="col.name === 'id'">
-                    <FetchedTags :item="buy" />
+                            {{ col.value }}
-                </QTd>
+                            <EntryDescriptorProxy :id="col.value" />
-                <QTd no-hover> {{ dashIfEmpty(buy.quantity) }}</QTd>
+                        </span>
-                <QTd no-hover> {{ dashIfEmpty(buy.price) }}</QTd>
+
-                <QTd colspan="2" no-hover> {{ dashIfEmpty(buy.total) }}</QTd>
+                        <span v-else v-text="col.value" />
-            </QTr>
+                    </QTd>
-            <QTr>
+                </QTr>
-                <QTd colspan="5" no-hover>
+
-                    <span class="label">{{ t('Total entry') }}: </span>
+                <QTr
-                    <span>{{ row.total }} €</span>
+                    v-show="props.expand"
-                </QTd>
+                    :props="props"
-                <QTd no-hover>
+                    :key="`expedition_${props.row.id}`"
-                    <span class="label">{{ t('Total stems') }}: </span>
+                >
-                    <span>{{ row.quantity }}</span>
+                    <QTd colspan="12" style="padding: 1px 0">
-                </QTd>
+                        <QTable
-            </QTr>
+                            color="secondary"
-        </template>
+                            card-class="bg-vn-page text-white "
-    </QTable>
+                            style-class="height: 30px"
+                            table-header-class="text-white"
+                            :rows="props.row.buys"
+                            :columns="columns"
+                            row-key="id"
+                            virtual-scroll
+                            v-model:expanded="expanded"
+                        >
+                            <template #header="props">
+                                <QTr :props="props">
+                                    <QTh
+                                        v-for="col in props.cols"
+                                        :key="col.name"
+                                        :props="props"
+                                    >
+                                        <span v-text="col.label" class="tr-header" />
+                                    </QTh>
+                                </QTr>
+                            </template>
+                            <template #body="props">
+                                <QTr :props="props" :key="`m_${props.row.id}`">
+                                    <QTd
+                                        v-for="col in props.cols"
+                                        :key="col.name"
+                                        :title="col.label"
+                                        :props="props"
+                                    >
+                                        <span
+                                            @click.stop
+                                            class="link"
+                                            v-if="col.name === 'itemName'"
+                                        >
+                                            {{ col.value }}
+                                            <ItemDescriptorProxy :id="props.row.itemFk" />
+                                        </span>
+                                        <span v-else v-text="col.value" />
+                                    </QTd>
+                                </QTr>
+                            </template>
+                        </QTable>
+                    </QTd>
+                </QTr>
+            </template>
+        </QTable>
+    </QCard>
 </template>
-
 <style scoped lang="scss">
-.label {
+.q-table thead tr,
-    color: var(--vn-label-color);
+.q-table tbody td {
+    height: 30px;
 }
 </style>
 

src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue

@@ -294,7 +294,7 @@ async function getZone(options) {
                 </template>
             </VnSelect>
             <VnSelect
-                :label="t('ticketList.warehouse')"
+                :label="t('basicData.warehouse')"
                 v-model="warehouseId"
                 option-value="id"
                 option-label="name"
@@ -302,7 +302,7 @@ async function getZone(options) {
                 hide-selected
                 map-options
                 :required="true"
-                :rules="validate('ticketList.warehouse')"
+                :rules="validate('basicData.warehouse')"
             />
         </VnRow>
         <VnRow class="row q-gutter-md q-mb-md no-wrap">

src/pages/Ticket/Negative/TicketLackFilter.vue

@@ -137,8 +137,6 @@ const setUserParams = (params) => {
                                 ($event) => onCategoryChange($event, searchFn)
                             "
                             :options="categoriesOptions"
-                            option-value="id"
-                            option-label="name"
                             hide-selected
                             dense
                             filled
@@ -152,10 +150,7 @@ const setUserParams = (params) => {
                         <VnSelect
                             :label="t('negative.type')"
                             v-model="params.typeFk"
-                            @update:model-value="searchFn()"
                             :options="itemTypesOptions"
-                            option-value="id"
-                            option-label="name"
                             hide-selected
                             dense
                             filled

src/pages/Ticket/TicketAdvance.vue

@@ -121,7 +121,7 @@ const ticketColumns = computed(() => [
         format: (row, dashIfEmpty) => dashIfEmpty(row.lines),
     },
     {
-        align: 'left',
+        align: 'right',
         label: t('advanceTickets.import'),
         name: 'totalWithVat',
         hidden: true,
@@ -172,6 +172,15 @@ const ticketColumns = computed(() => [
         headerClass: 'horizontal-separator',
         name: 'futureLiters',
     },
+    {
+        label: t('advanceTickets.preparation'),
+        name: 'futurePreparation',
+        field: 'futurePreparation',
+        align: 'left',
+        sortable: true,
+        headerClass: 'horizontal-separator',
+        columnFilter: false,
+    },
     {
         align: 'left',
         label: t('advanceTickets.futureZone'),
@@ -196,15 +205,17 @@ const ticketColumns = computed(() => [
         label: t('advanceTickets.notMovableLines'),
         headerClass: 'horizontal-separator',
         name: 'notMovableLines',
+        class: 'shrink',
     },
     {
         align: 'left',
         label: t('advanceTickets.futureLines'),
         headerClass: 'horizontal-separator',
         name: 'futureLines',
+        class: 'shrink',
     },
     {
-        align: 'left',
+        align: 'right',
         label: t('advanceTickets.futureImport'),
         name: 'futureTotalWithVat',
         hidden: true,
@@ -399,8 +410,10 @@ watch(
         destinationElRef.value.classList.add('text-uppercase', 'color-vn-label');
         originElRef.value.classList.add('text-uppercase', 'color-vn-label');
 
-        destinationElRef.value.setAttribute('colspan', '10');
+        originElRef.value.classList.add('advance-icon');
-        originElRef.value.setAttribute('colspan', '10');
+
+        destinationElRef.value.setAttribute('colspan', '9');
+        originElRef.value.setAttribute('colspan', '11');
 
         destinationElRef.value.textContent = `${t(
             'advanceTickets.destination',

src/pages/Ticket/TicketAdvanceFilter.vue

@@ -68,7 +68,7 @@ onMounted(async () => await getItemPackingTypes());
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params, searchFn }">
+        <template #body="{ params }">
             <QItem class="q-my-sm">
                 <QItemSection>
                     <VnInputDate
@@ -96,12 +96,10 @@ onMounted(async () => await getItemPackingTypes());
                         option-value="code"
                         option-label="description"
                         :info="t('iptInfo')"
-                        @update:model-value="searchFn()"
                         dense
                         filled
                         :use-like="false"
-                    >
+                    />
-                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QItem>
@@ -113,12 +111,10 @@ onMounted(async () => await getItemPackingTypes());
                         option-value="code"
                         option-label="description"
                         :info="t('iptInfo')"
-                        @update:model-value="searchFn()"
                         dense
                         filled
                         :use-like="false"
-                    >
+                    />
-                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QItem>
@@ -137,7 +133,6 @@ onMounted(async () => await getItemPackingTypes());
                         :label="t('params.isFullMovable')"
                         v-model="params.isFullMovable"
                         toggle-indeterminate
-                        @update:model-value="searchFn()"
                         dense
                     />
                 </QItemSection>
@@ -160,13 +155,9 @@ onMounted(async () => await getItemPackingTypes());
                         :label="t('params.warehouseFk')"
                         v-model="params.warehouseFk"
                         :options="warehousesOptions"
-                        option-value="id"
-                        option-label="name"
-                        @update:model-value="searchFn()"
                         dense
                         filled
-                    >
+                    />
-                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QItem>
@@ -175,7 +166,6 @@ onMounted(async () => await getItemPackingTypes());
                         toggle-indeterminate
                         :label="t('params.onlyWithDestination')"
                         v-model="params.onlyWithDestination"
-                        @update:model-value="searchFn()"
                         dense
                     />
                 </QItemSection>

src/pages/Ticket/TicketFilter.vue

@@ -60,7 +60,7 @@ const groupedStates = ref([]);
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params, searchFn }">
+        <template #body="{ params }">
             <QItem>
                 <QItemSection>
                     <VnInput v-model="params.clientFk" :label="t('Customer ID')" filled />
@@ -108,10 +108,7 @@ const groupedStates = ref([]);
                     <VnSelect
                         :label="t('State')"
                         v-model="params.stateFk"
-                        @update:model-value="searchFn()"
                         :options="states"
-                        option-value="id"
-                        option-label="name"
                         emit-value
                         map-options
                         use-input
@@ -128,7 +125,6 @@ const groupedStates = ref([]);
                     <VnSelect
                         :label="t('params.groupedStates')"
                         v-model="params.groupedStates"
-                        @update:model-value="searchFn()"
                         :options="groupedStates"
                         option-label="code"
                         emit-value
@@ -163,7 +159,6 @@ const groupedStates = ref([]);
                 <QItemSection>
                     <QCheckbox
                         v-model="params.myTeam"
-                        @update:model-value="searchFn()"
                         :label="t('My team')"
                         toggle-indeterminate
                     />
@@ -171,7 +166,6 @@ const groupedStates = ref([]);
                 <QItemSection>
                     <QCheckbox
                         v-model="params.pending"
-                        @update:model-value="searchFn()"
                         :label="t('Pending')"
                         toggle-indeterminate
                     />
@@ -181,7 +175,6 @@ const groupedStates = ref([]);
                 <QItemSection>
                     <QCheckbox
                         v-model="params.hasInvoice"
-                        @update:model-value="searchFn()"
                         :label="t('Invoiced')"
                         toggle-indeterminate
                     />
@@ -189,7 +182,6 @@ const groupedStates = ref([]);
                 <QItemSection>
                     <QCheckbox
                         v-model="params.hasRoute"
-                        @update:model-value="searchFn()"
                         :label="t('Routed')"
                         toggle-indeterminate
                     />
@@ -203,10 +195,7 @@ const groupedStates = ref([]);
                     <VnSelect
                         :label="t('Province')"
                         v-model="params.provinceFk"
-                        @update:model-value="searchFn()"
                         :options="provinces"
-                        option-value="id"
-                        option-label="name"
                         emit-value
                         map-options
                         use-input
@@ -223,7 +212,6 @@ const groupedStates = ref([]);
                     <VnSelect
                         :label="t('Agency')"
                         v-model="params.agencyModeFk"
-                        @update:model-value="searchFn()"
                         :options="agencies"
                         emit-value
                         map-options
@@ -241,10 +229,7 @@ const groupedStates = ref([]);
                     <VnSelect
                         :label="t('Warehouse')"
                         v-model="params.warehouseFk"
-                        @update:model-value="searchFn()"
                         :options="warehouses"
-                        option-value="id"
-                        option-label="name"
                         emit-value
                         map-options
                         use-input

src/pages/Ticket/TicketFuture.vue

@@ -85,6 +85,7 @@ const ticketColumns = computed(() => [
         label: t('advanceTickets.liters'),
         name: 'liters',
         align: 'left',
+        class: 'shrink',
         headerClass: 'horizontal-separator',
     },
     {
@@ -177,7 +178,12 @@ watch(
         if (!$el) return;
         const head = $el.querySelector('thead');
         const firstRow = $el.querySelector('thead > tr');
-
+        const headSelectionCol = $el.querySelector(
+            'thead tr.bg-header th.q-table--col-auto-width',
+        );
+        if (headSelectionCol) {
+            headSelectionCol.classList.add('horizontal-separator');
+        }
         const newRow = document.createElement('tr');
         destinationElRef.value = document.createElement('th');
         originElRef.value = document.createElement('th');
@@ -185,9 +191,10 @@ watch(
         newRow.classList.add('bg-header');
         destinationElRef.value.classList.add('text-uppercase', 'color-vn-label');
         originElRef.value.classList.add('text-uppercase', 'color-vn-label');
+        originElRef.value.classList.add('advance-icon');
 
-        destinationElRef.value.setAttribute('colspan', '7');
+        destinationElRef.value.setAttribute('colspan', '9');
-        originElRef.value.setAttribute('colspan', '9');
+        originElRef.value.setAttribute('colspan', '7');
 
         originElRef.value.textContent = `${t('advanceTickets.origin')}`;
         destinationElRef.value.textContent = `${t('advanceTickets.destination')}`;
@@ -371,4 +378,12 @@ watch(
 :deep(.horizontal-bottom-separator) {
     border-bottom: 4px solid white !important;
 }
+:deep(th.advance-icon::after) {
+    content: '>>';
+    font-size: larger;
+    position: absolute;
+    text-align: center;
+    float: 0;
+    left: 0;
+}
 </style>

src/pages/Ticket/TicketFutureFilter.vue

@@ -70,7 +70,7 @@ onMounted(async () => {
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params, searchFn }">
+        <template #body="{ params }">
             <QItem class="q-my-sm">
                 <QItemSection>
                     <VnInputDate
@@ -116,11 +116,9 @@ onMounted(async () => {
                         option-value="code"
                         option-label="description"
                         :info="t('iptInfo')"
-                        @update:model-value="searchFn()"
                         dense
                         filled
-                    >
+                    />
-                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QItem>
@@ -132,11 +130,9 @@ onMounted(async () => {
                         option-value="code"
                         option-label="description"
                         :info="t('iptInfo')"
-                        @update:model-value="searchFn()"
                         dense
                         filled
-                    >
+                    />
-                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QItem>
@@ -145,13 +141,9 @@ onMounted(async () => {
                         :label="t('params.state')"
                         v-model="params.state"
                         :options="stateOptions"
-                        option-value="id"
-                        option-label="name"
-                        @update:model-value="searchFn()"
                         dense
                         filled
-                    >
+                    />
-                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QItem>
@@ -160,13 +152,9 @@ onMounted(async () => {
                         :label="t('params.futureState')"
                         v-model="params.futureState"
                         :options="stateOptions"
-                        option-value="id"
-                        option-label="name"
-                        @update:model-value="searchFn()"
                         dense
                         filled
-                    >
+                    />
-                    </VnSelect>
                 </QItemSection>
             </QItem>
 
@@ -176,7 +164,6 @@ onMounted(async () => {
                         :label="t('params.problems')"
                         v-model="params.problems"
                         :toggle-indeterminate="false"
-                        @update:model-value="searchFn()"
                     />
                 </QItemSection>
             </QItem>
@@ -186,13 +173,9 @@ onMounted(async () => {
                         :label="t('params.warehouseFk')"
                         v-model="params.warehouseFk"
                         :options="warehousesOptions"
-                        option-value="id"
-                        option-label="name"
-                        @update:model-value="searchFn()"
                         dense
                         filled
-                    >
+                    />
-                    </VnSelect>
                 </QItemSection>
             </QItem>
         </template>

src/pages/Ticket/locale/en.yml

@@ -120,6 +120,7 @@ basicData:
     difference: Difference
     total: Total
     price: Price
+    warehouse: Warehouse
     newPrice: New price
     chargeDifference: Charge difference to
     withoutNegatives: Create without negatives

src/pages/Ticket/locale/es.yml

@@ -47,6 +47,7 @@ basicData:
     difference: Diferencia
     total: Total
     price: Precio
+    warehouse: Almacén
     newPrice: Nuevo precio
     chargeDifference: Cargar diferencia a
     withoutNegatives: Crear sin negativos

src/pages/Worker/Card/WorkerTimeControl.vue

@@ -280,7 +280,7 @@ const fetchWeekData = async () => {
         week: selectedWeekNumber.value,
     };
     try {
-        const [{ data: mailData }, { data: countData }] = await Promise.allS([
+        const [{ data: mailData }, { data: countData }] = await Promise.all([
             axios.get(`Workers/${route.params.id}/mail`, {
                 params: { filter: { where } },
             }),
@@ -292,8 +292,9 @@ const fetchWeekData = async () => {
         state.value = mail?.state;
         reason.value = mail?.reason;
         canResend.value = !!countData.count;
-    } catch {
+    } catch (error) {
         state.value = null;
+        if (error?.status != 403) throw error;
     }
 };
 

test/cypress/integration/ticket/ticketList.spec.js

@@ -76,8 +76,8 @@ describe('TicketList', () => {
             });
         }).as('ticket');
 
-        cy.get('[data-cy="Warehouse_select"]').type('Warehouse One');
+        cy.selectOption('[data-cy="Warehouse_select"]', 'Warehouse Five');
-        cy.get('.q-menu .q-item').contains('Warehouse One').click();
+        cy.searchBtnFilterPanel();
         cy.wait('@ticket').then((interception) => {
             const data = interception.response.body[0];
             expect(data.hasComponentLack).to.equal(1);