Merge branch 'dev' into 7414-ticketHistoryChanges

src/boot/qformMixin.js

@@ -9,19 +9,19 @@ export default {
         if (!form) return;
         try {
             const inputsFormCard = form.querySelectorAll(
-                `input:not([disabled]):not([type="checkbox"])`
+                `input:not([disabled]):not([type="checkbox"])`,
             );
             if (inputsFormCard.length) {
                 focusFirstInput(inputsFormCard[0]);
             }
             const textareas = document.querySelectorAll(
-                'textarea:not([disabled]), [contenteditable]:not([disabled])'
+                'textarea:not([disabled]), [contenteditable]:not([disabled])',
             );
             if (textareas.length) {
                 focusFirstInput(textareas[textareas.length - 1]);
             }
             const inputs = document.querySelectorAll(
-                'form#formModel input:not([disabled]):not([type="checkbox"])'
+                'form#formModel input:not([disabled]):not([type="checkbox"])',
             );
             const input = inputs[0];
             if (!input) return;

src/components/FormModel.vue

@@ -113,7 +113,7 @@ const defaultButtons = computed(() => ({
         color: 'primary',
         icon: 'save',
         label: 'globals.save',
-        click: () => myForm.value.submit(),
+        click: () => myForm.value.onSubmit(false),
         type: 'submit',
     },
     reset: {
@@ -207,7 +207,8 @@ async function fetch() {
     }
 }
 
-async function save() {
+async function save(prevent = false) {
+    if (prevent) return;
     if ($props.observeFormChanges && !hasChanges.value)
         return notify('globals.noChanges', 'negative');
 
@@ -293,7 +294,7 @@ defineExpose({
         <QForm
             ref="myForm"
             v-if="formData"
-            @submit="save"
+            @submit="save(!!$event)"
             @reset="reset"
             class="q-pa-md"
             :style="maxWidth ? 'max-width: ' + maxWidth : ''"

src/components/FormModelPopup.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import FormModel from 'components/FormModel.vue';
@@ -58,19 +58,6 @@ defineExpose({
             <p>{{ subtitle }}</p>
             <slot name="form-inputs" :data="data" :validate="validate" />
             <div class="q-mt-lg row justify-end">
-                <QBtn
-                    v-if="showSaveAndContinueBtn"
-                    :label="t('globals.isSaveAndContinue')"
-                    :title="t('globals.isSaveAndContinue')"
-                    type="submit"
-                    color="primary"
-                    class="q-ml-sm"
-                    :disabled="isLoading"
-                    :loading="isLoading"
-                    data-cy="FormModelPopup_isSaveAndContinue"
-                    z-max
-                    @click="() => (isSaveAndContinue = true)"
-                />
                 <QBtn
                     :label="t('globals.cancel')"
                     :title="t('globals.cancel')"
@@ -83,23 +70,39 @@ defineExpose({
                     v-close-popup
                     z-max
                     @click="
-                        () => {
+                        isSaveAndContinue = false;
-                            isSaveAndContinue = false;
+                        emit('onDataCanceled');
-                            emit('onDataCanceled');
-                        }
                     "
                 />
                 <QBtn
+                    :flat="showSaveAndContinueBtn"
                     :label="t('globals.save')"
                     :title="t('globals.save')"
-                    type="submit"
+                    @click="
+                        formModelRef.save();
+                        isSaveAndContinue = false;
+                    "
                     color="primary"
                     class="q-ml-sm"
                     :disabled="isLoading"
                     :loading="isLoading"
                     data-cy="FormModelPopup_save"
                     z-max
-                    @click="() => (isSaveAndContinue = false)"
+                />
+                <QBtn
+                    v-if="showSaveAndContinueBtn"
+                    :label="t('globals.isSaveAndContinue')"
+                    :title="t('globals.isSaveAndContinue')"
+                    color="primary"
+                    class="q-ml-sm"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    data-cy="FormModelPopup_isSaveAndContinue"
+                    z-max
+                    @click="
+                        isSaveAndContinue = true;
+                        formModelRef.save();
+                    "
                 />
             </div>
         </template>

src/components/VnTable/VnTable.vue

@@ -340,8 +340,9 @@ const clickHandler = async (event) => {
 
     const isDateElement = event.target.closest('.q-date');
     const isTimeElement = event.target.closest('.q-time');
+    const isQselectDropDown = event.target.closest('.q-select__dropdown-icon');
 
-    if (isDateElement || isTimeElement) return;
+    if (isDateElement || isTimeElement || isQselectDropDown) return;
 
     if (clickedElement === null) {
         destroyInput(editingRow.value, editingField.value);
@@ -411,7 +412,7 @@ async function renderInput(rowId, field, clickedElement) {
         focusOnMount: true,
         eventHandlers: {
             'update:modelValue': async (value) => {
-                if (isSelect) {
+                if (isSelect && value) {
                     row[column.name] = value[column.attrs?.optionValue ?? 'id'];
                     row[column?.name + 'TextValue'] =
                         value[column.attrs?.optionLabel ?? 'name'];
@@ -448,8 +449,11 @@ async function renderInput(rowId, field, clickedElement) {
     node.appContext = app._context;
     render(node, clickedElement);
 
-    if (['checkbox', 'toggle', undefined].includes(column?.component))
+    if (['toggle'].includes(column?.component))
         node.el?.querySelector('span > div').focus();
+
+    if (['checkbox', undefined].includes(column?.component))
+        node.el?.querySelector('span > div > div').focus();
 }
 
 function destroyInput(rowIndex, field, clickedElement) {
@@ -530,6 +534,9 @@ function formatColumnValue(col, row, dashIfEmpty) {
     }
 }
 const checkbox = ref(null);
+function cardClick(_, row) {
+    if ($props.redirect) router.push({ path: `/${$props.redirect}/${row.id}` });
+}
 </script>
 <template>
     <QDrawer
@@ -593,6 +600,7 @@ const checkbox = ref(null);
                 @row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
                 @update:selected="emit('update:selected', $event)"
                 @selection="(details) => handleSelection(details, rows)"
+                :hide-selected-banner="true"
             >
                 <template #top-left v-if="!$props.withoutHeader">
                     <slot name="top-left"> </slot>
@@ -624,6 +632,7 @@ const checkbox = ref(null);
                 <template #header-cell="{ col }">
                     <QTh
                         v-if="col.visible ?? true"
+                        v-bind:class="col.headerClass"
                         class="body-cell"
                         :style="col?.width ? `max-width: ${col?.width}` : ''"
                         style="padding: inherit"
@@ -763,18 +772,13 @@ const checkbox = ref(null);
                 </template>
                 <template #item="{ row, colsMap }">
                     <component
-                        :is="$props.redirect ? 'router-link' : 'span'"
+                        v-bind:is="'div'"
-                        :to="`/${$props.redirect}/` + row.id"
+                        @click="(event) => cardClick(event, row)"
                     >
                         <QCard
                             bordered
                             flat
                             class="row no-wrap justify-between cursor-pointer q-pa-sm"
-                            @click="
-                                (_, row) => {
-                                    $props.rowClick && $props.rowClick(row);
-                                }
-                            "
                             style="height: 100%"
                         >
                             <QCardSection
@@ -1042,8 +1046,8 @@ es:
 
 .grid-three {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
+    grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
-    max-width: 100%;
+    width: 100%;
     grid-gap: 20px;
     margin: 0 auto;
 }

src/components/common/VnColor.vue

@@ -2,7 +2,7 @@
 const $props = defineProps({
     colors: {
         type: String,
-        default: '{"value":[]}',
+        default: '{"value": []}',
     },
 });
 
@@ -11,7 +11,7 @@ const maxHeight = 30;
 const colorHeight = maxHeight / colorArray?.length;
 </script>
 <template>
-    <div class="color-div" :style="{ height: `${maxHeight}px` }">
+    <div v-if="colors" class="color-div" :style="{ height: `${maxHeight}px` }">
         <div
             v-for="(color, index) in colorArray"
             :key="index"

src/components/ui/CardDescriptor.vue

@@ -6,6 +6,7 @@ import { useArrayData } from 'composables/useArrayData';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useState } from 'src/composables/useState';
 import { useRoute } from 'vue-router';
+import { useClipboard } from 'src/composables/useClipboard';
 import VnMoreOptions from './VnMoreOptions.vue';
 
 const $props = defineProps({
@@ -29,10 +30,6 @@ const $props = defineProps({
         type: String,
         default: null,
     },
-    module: {
-        type: String,
-        default: null,
-    },
     summary: {
         type: Object,
         default: null,
@@ -46,6 +43,7 @@ const $props = defineProps({
 const state = useState();
 const route = useRoute();
 const { t } = useI18n();
+const { copyText } = useClipboard();
 const { viewSummary } = useSummaryDialog();
 let arrayData;
 let store;
@@ -103,6 +101,14 @@ function getValueFromPath(path) {
     return current;
 }
 
+function copyIdText(id) {
+    copyText(id, {
+        component: {
+            copyValue: id,
+        },
+    });
+}
+
 const emit = defineEmits(['onFetch']);
 
 const iconModule = computed(() => route.matched[1].meta.icon);
@@ -148,7 +154,9 @@ const toModule = computed(() =>
                         {{ t('components.smartCard.openSummary') }}
                     </QTooltip>
                 </QBtn>
-                <RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
+                <RouterLink
+                    :to="{ name: `${dataKey}Summary`, params: { id: entity.id } }"
+                >
                     <QBtn
                         class="link"
                         color="white"
@@ -184,9 +192,22 @@ const toModule = computed(() =>
                             </slot>
                         </div>
                     </QItemLabel>
-                    <QItem dense>
+                    <QItem>
                         <QItemLabel class="subtitle" caption>
                             #{{ getValueFromPath(subtitle) ?? entity.id }}
+                            <QBtn
+                                round
+                                flat
+                                dense
+                                size="sm"
+                                icon="content_copy"
+                                color="primary"
+                                @click.stop="copyIdText(entity.id)"
+                            >
+                                <QTooltip>
+                                    {{ t('globals.copyId') }}
+                                </QTooltip>
+                            </QBtn>
                         </QItemLabel>
                     </QItem>
                 </QList>
@@ -294,3 +315,11 @@ const toModule = computed(() =>
     }
 }
 </style>
+<i18n>
+    en:
+        globals:
+            copyId: Copy ID
+    es:
+        globals:
+            copyId: Copiar ID
+</i18n>

src/composables/useCau.js

@@ -11,6 +11,7 @@ export async function useCau(res, message) {
     const { config, headers, request, status, statusText, data } = res || {};
     const { params, url, method, signal, headers: confHeaders } = config || {};
     const { message: resMessage, code, name } = data?.error || {};
+    delete confHeaders.Authorization;
 
     const additionalData = {
         path: location.hash,
@@ -40,7 +41,7 @@ export async function useCau(res, message) {
                 handler: async () => {
                     const locale = i18n.global.t;
                     const reason = ref(
-                        code == 'ACCESS_DENIED' ? locale('cau.askPrivileges') : ''
+                        code == 'ACCESS_DENIED' ? locale('cau.askPrivileges') : '',
                     );
                     openConfirmationModal(
                         locale('cau.title'),
@@ -59,10 +60,9 @@ export async function useCau(res, message) {
                                 'onUpdate:modelValue': (val) => (reason.value = val),
                                 label: locale('cau.inputLabel'),
                                 class: 'full-width',
-                                required: true,
                                 autofocus: true,
                             },
-                        }
+                        },
                     );
                 },
             },

src/i18n/locale/en.yml

@@ -156,6 +156,7 @@ globals:
     changeState: Change state
     raid: 'Raid {daysInForward} days'
     isVies: Vies
+    noData: No data available
     pageTitles:
         logIn: Login
         addressEdit: Update address

src/i18n/locale/es.yml

@@ -160,6 +160,7 @@ globals:
     changeState: Cambiar estado
     raid: 'Redada {daysInForward} días'
     isVies: Vies
+    noData: Datos no disponibles
     pageTitles:
         logIn: Inicio de sesión
         addressEdit: Modificar consignatario

src/pages/Account/Alias/Card/AliasDescriptor.vue

@@ -51,7 +51,6 @@ const removeAlias = () => {
     <CardDescriptor
         ref="descriptor"
         :url="`MailAliases/${entityId}`"
-        module="Alias"
         data-key="Alias"
         title="alias"
     >

src/pages/Account/Card/AccountDescriptor.vue

@@ -24,7 +24,6 @@ onMounted(async () => {
         ref="descriptor"
         :url="`VnUsers/preview`"
         :filter="{ ...filter, where: { id: entityId } }"
-        module="Account"
         data-key="Account"
         title="nickname"
     >

src/pages/Account/Card/AccountDescriptorMenu.vue

@@ -35,6 +35,12 @@ account.value.hasAccount = hasAccount.value;
 const entityId = computed(() => +route.params.id);
 const hasitManagementAccess = ref();
 const hasSysadminAccess = ref();
+const isHimself = computed(() => user.value.id === account.value.id);
+const url = computed(() =>
+    isHimself.value
+        ? 'Accounts/change-password'
+        : `Accounts/${entityId.value}/setPassword`
+);
 
 async function updateStatusAccount(active) {
     if (active) {
@@ -107,11 +113,8 @@ onMounted(() => {
         :ask-old-pass="askOldPass"
         :submit-fn="
             async (newPassword, oldPassword) => {
-                await axios.patch(`Accounts/change-password`, {
+                const body = isHimself ? { userId: entityId, oldPassword } : {};
-                    userId: entityId,
+                await axios.patch(url, { ...body, newPassword });
-                    newPassword,
-                    oldPassword,
-                });
             }
         "
     />
@@ -155,16 +158,10 @@ onMounted(() => {
     >
         <QItemSection>{{ t('globals.delete') }}</QItemSection>
     </QItem>
-    <QItem
+    <QItem v-if="hasSysadminAccess" v-ripple clickable>
-        v-if="hasSysadminAccess"
+        <QItemSection @click="onChangePass(isHimself)">
-        v-ripple
+            {{ isHimself ? t('globals.changePass') : t('globals.setPass') }}
-        clickable
-        @click="user.id === account.id ? onChangePass(true) : onChangePass(false)"
-    >
-        <QItemSection v-if="user.id === account.id">
-            {{ t('globals.changePass') }}
         </QItemSection>
-        <QItemSection v-else>{{ t('globals.setPass') }}</QItemSection>
     </QItem>
     <QItem
         v-if="!account.hasAccount && hasSysadminAccess"

src/pages/Account/Role/Card/RoleDescriptor.vue

@@ -35,7 +35,6 @@ const removeRole = async () => {
     <CardDescriptor
         url="VnRoles"
         :filter="{ where: { id: entityId } }"
-        module="Role"
         data-key="Role"
         :summary="$props.summary"
     >

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -46,7 +46,6 @@ onMounted(async () => {
     <CardDescriptor
         :url="`Claims/${entityId}`"
         :filter="filter"
-        module="Claim"
         title="client.name"
         data-key="Claim"
     >

src/pages/Claim/Card/ClaimLines.vue

@@ -190,7 +190,7 @@ async function saveWhenHasChanges() {
             ref="claimLinesForm"
             :url="`Claims/${route.params.id}/lines`"
             save-url="ClaimBeginnings/crud"
-            :filter="linesFilter"
+            :user-filter="linesFilter"
             @on-fetch="onFetch"
             v-model:selected="selected"
             :default-save="false"

src/pages/Claim/ClaimFilter.vue

@@ -1,8 +1,6 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -14,15 +12,14 @@ const props = defineProps({
         type: String,
         required: true,
     },
+    states: {
+        type: Array,
+        default: () => [],
+    },
 });
-
-const states = ref([]);
-
-defineExpose({ states });
 </script>
 
 <template>
-    <FetchData url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">

src/pages/Claim/ClaimList.vue

@@ -10,12 +10,13 @@ import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import ZoneDescriptorProxy from '../Zone/Card/ZoneDescriptorProxy.vue';
 import VnSection from 'src/components/common/VnSection.vue';
+import FetchData from 'src/components/FetchData.vue';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const dataKey = 'ClaimList';
 
-const claimFilterRef = ref();
+const states = ref([]);
 const columns = computed(() => [
     {
         align: 'left',
@@ -81,8 +82,7 @@ const columns = computed(() => [
         align: 'left',
         label: t('claim.state'),
         format: ({ stateCode }) =>
-            claimFilterRef.value?.states.find(({ code }) => code === stateCode)
+            states.value?.find(({ code }) => code === stateCode)?.description,
-                ?.description,
         name: 'stateCode',
         chip: {
             condition: () => true,
@@ -92,7 +92,7 @@ const columns = computed(() => [
             name: 'claimStateFk',
             component: 'select',
             attrs: {
-                options: claimFilterRef.value?.states,
+                options: states.value,
                 optionLabel: 'description',
             },
         },
@@ -125,6 +125,7 @@ const STATE_COLOR = {
 </script>
 
 <template>
+    <FetchData url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
     <VnSection
         :data-key="dataKey"
         :columns="columns"
@@ -135,7 +136,7 @@ const STATE_COLOR = {
         }"
     >
         <template #advanced-menu>
-            <ClaimFilter data-key="ClaimList" ref="claimFilterRef" />
+            <ClaimFilter :data-key ref="claimFilterRef" :states />
         </template>
         <template #body>
             <VnTable

src/pages/Customer/Card/CustomerDescriptor.vue

@@ -55,7 +55,6 @@ const debtWarning = computed(() => {
 
 <template>
     <CardDescriptor
-        module="Customer"
         :url="`Clients/${entityId}/getCard`"
         :summary="$props.summary"
         data-key="Customer"

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -10,6 +10,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
 import VnCheckbox from 'src/components/common/VnCheckbox.vue';
+import { getDifferences, getUpdatedValues } from 'src/filters';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -24,6 +25,12 @@ function handleLocation(data, location) {
     data.provinceFk = provinceFk;
     data.countryFk = countryFk;
 }
+function onBeforeSave(formData, originalData) {
+    return getUpdatedValues(
+        Object.keys(getDifferences(formData, originalData)),
+        formData,
+    );
+}
 </script>
 
 <template>
@@ -37,6 +44,7 @@ function handleLocation(data, location) {
         :url-update="`Clients/${route.params.id}/updateFiscalData`"
         auto-load
         model="Customer"
+        :mapper="onBeforeSave"
     >
         <template #form="{ data, validate }">
             <VnRow>
@@ -114,7 +122,7 @@ function handleLocation(data, location) {
                 <VnCheckbox
                     v-model="data.isVies"
                     :label="t('globals.isVies')"
-                    :info="t('whenActivatingIt')"    
+                    :info="t('whenActivatingIt')"
                 />
             </VnRow>
 
@@ -127,7 +135,7 @@ function handleLocation(data, location) {
             </VnRow>
 
             <VnRow>
-                <VnCheckbox                    
+                <VnCheckbox
                     v-model="data.isEqualizated"
                     :label="t('Is equalizated')"
                     :info="t('inOrderToInvoice')"

src/pages/Customer/components/CustomerNewPayment.vue

@@ -84,7 +84,7 @@ function setPaymentType(accounting) {
     viewReceipt.value = isCash.value;
     if (accountingType.value.daysInFuture)
         initialData.payed.setDate(
-            initialData.payed.getDate() + accountingType.value.daysInFuture
+            initialData.payed.getDate() + accountingType.value.daysInFuture,
         );
     maxAmount.value = accountingType.value && accountingType.value.maxAmount;
 

src/pages/Entry/Card/EntryBuys.vue

@@ -156,10 +156,10 @@ const columns = [
     {
         align: 'center',
         labelAbbreviation: t('Sti.'),
-        label: t('Printed Stickers/Stickers'),
+        label: t('Stickers'),
         toolTip: t('Printed Stickers/Stickers'),
         name: 'stickers',
-        component: 'number',
+        component: 'input',
         create: true,
         attrs: {
             positive: false,
@@ -179,7 +179,7 @@ const columns = [
         component: 'select',
         attrs: {
             url: 'packagings',
-            fields: ['id', 'volume'],
+            fields: ['id'],
             optionLabel: 'id',
         },
         create: true,
@@ -192,10 +192,10 @@ const columns = [
         component: 'number',
         create: true,
         width: '35px',
+        format: (row, dashIfEmpty) => parseFloat(row['weight']).toFixed(1),
     },
     {
-        align: 'center',
+        labelAbbreviation: 'P',
-        labelAbbreviation: 'Pack',
         label: 'Packing',
         toolTip: 'Packing',
         name: 'packing',
@@ -209,14 +209,13 @@ const columns = [
                 row['amount'] = row['quantity'] * row['buyingValue'];
             },
         },
-        width: '35px',
+        width: '20px',
         style: (row) => {
             if (row.groupingMode === 'grouping')
                 return { color: 'var(--vn-label-color)' };
         },
     },
     {
-        align: 'center',
         labelAbbreviation: 'GM',
         label: t('Grouping selector'),
         toolTip: t('Grouping selector'),
@@ -229,7 +228,7 @@ const columns = [
             indeterminateValue: null,
         },
         size: 'xs',
-        width: '30px',
+        width: '25px',
         create: true,
         rightFilter: false,
         getIcon: (value) => {
@@ -245,12 +244,12 @@ const columns = [
     },
     {
         align: 'center',
-        labelAbbreviation: 'Group',
+        labelAbbreviation: 'G',
         label: 'Grouping',
         toolTip: 'Grouping',
         name: 'grouping',
         component: 'number',
-        width: '35px',
+        width: '20px',
         create: true,
         style: (row) => {
             if (row.groupingMode === 'packing') return { color: 'var(--vn-label-color)' };
@@ -290,6 +289,7 @@ const columns = [
             },
         },
         width: '45px',
+        format: (row) => parseFloat(row['buyingValue']).toFixed(3),
     },
     {
         align: 'center',
@@ -301,6 +301,7 @@ const columns = [
             positive: false,
         },
         isEditable: false,
+        format: (row) => parseFloat(row['amount']).toFixed(2),
         style: getAmountStyle,
     },
     {
@@ -312,6 +313,7 @@ const columns = [
         component: 'number',
         width: '35px',
         create: true,
+        format: (row) => parseFloat(row['price2']).toFixed(2),
     },
     {
         align: 'center',
@@ -325,6 +327,7 @@ const columns = [
         },
         width: '35px',
         create: true,
+        format: (row) => parseFloat(row['price3']).toFixed(2),
     },
     {
         align: 'center',
@@ -344,6 +347,7 @@ const columns = [
         style: (row) => {
             if (!row?.hasMinPrice) return { color: 'var(--vn-label-color)' };
         },
+        format: (row) => parseFloat(row['minPrice']).toFixed(2),
     },
     {
         align: 'center',
@@ -518,7 +522,7 @@ onMounted(() => {
     <Teleport to="#st-data" v-if="stateStore?.isSubToolbarShown() && editableMode">
         <QBtnGroup push style="column-gap: 1px">
             <QBtnDropdown
-                icon="exposure_neg_1"
+                label="+/-"
                 color="primary"
                 flat
                 :title="t('Invert quantity value')"
@@ -533,7 +537,7 @@ onMounted(() => {
                                 @click="invertQuantitySign(selectedRows, -1)"
                                 data-cy="set-negative-quantity"
                             >
-                                <span style="font-size: medium">-1</span>
+                                <span style="font-size: large">-</span>
                             </QBtn>
                         </QItemSection>
                     </QItem>
@@ -544,7 +548,7 @@ onMounted(() => {
                                 @click="invertQuantitySign(selectedRows, 1)"
                                 data-cy="set-positive-quantity"
                             >
-                                <span style="font-size: medium">1</span>
+                                <span style="font-size: large">+</span>
                             </QBtn>
                         </QItemSection>
                     </QItem>
@@ -558,11 +562,11 @@ onMounted(() => {
                 :disable="!selectedRows.length"
                 data-cy="check-buy-amount"
             >
-                <QTooltip>{{}}</QTooltip>
                 <QList>
                     <QItem>
                         <QItemSection>
                             <QBtn
+                                size="sm"
                                 icon="check"
                                 flat
                                 @click="setIsChecked(selectedRows, true)"
@@ -573,6 +577,7 @@ onMounted(() => {
                     <QItem>
                         <QItemSection>
                             <QBtn
+                                size="sm"
                                 icon="close"
                                 flat
                                 @click="setIsChecked(selectedRows, false)"
@@ -662,7 +667,7 @@ onMounted(() => {
             <FetchedTags :item="row" :columns="3" />
         </template>
         <template #column-stickers="{ row }">
-            <span class="editable-text">
+            <span :class="editableMode ? 'editable-text' : ''">
                 <span style="color: var(--vn-label-color)">
                     {{ row.printedStickers }}
                 </span>
@@ -693,20 +698,36 @@ onMounted(() => {
         </template>
         <template #column-create-itemFk="{ data }">
             <VnSelect
-                url="Items"
+                url="Items/search"
                 v-model="data.itemFk"
                 :label="t('Article')"
-                :fields="['id', 'name']"
+                :fields="['id', 'name', 'size', 'producerName']"
+                :filter-options="['id', 'name', 'size', 'producerName']"
                 option-label="name"
                 option-value="id"
                 @update:modelValue="
                     async (value) => {
-                        setBuyUltimate(value, data);
+                        await setBuyUltimate(value, data);
                     }
                 "
                 :required="true"
                 data-cy="itemFk-create-popup"
-            />
+                sort-by="nickname DESC"
+            >
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemSection>
+                            <QItemLabel>
+                                {{ scope.opt.name }}
+                            </QItemLabel>
+                            <QItemLabel caption>
+                                #{{ scope.opt.id }}, {{ scope.opt?.size }},
+                                {{ scope.opt?.producerName }}
+                            </QItemLabel>
+                        </QItemSection>
+                    </QItem>
+                </template>
+            </VnSelect>
         </template>
         <template #column-create-groupingMode="{ data }">
             <VnSelectEnum
@@ -720,9 +741,14 @@ onMounted(() => {
             />
         </template>
         <template #previous-create-dialog="{ data }">
-            <div style="position: absolute">
+            <div
+                style="position: absolute"
+                :class="{ 'centered-container': !data.itemFk }"
+            >
                 <ItemDescriptor :id="data.itemFk" v-if="data.itemFk" />
-                <SkeletonDescriptor v-if="!data.itemFk" :has-image="true" />
+                <div v-else>
+                    <span>{{ t('globals.noData') }}</span>
+                </div>
             </div>
         </template>
     </VnTable>
@@ -744,6 +770,7 @@ es:
     Com.: Ref.
     Comment: Referencia
     Minimum price: Precio mínimo
+    Stickers: Etiquetas
     Printed Stickers/Stickers: Etiquetas impresas/Etiquetas
     Cost: Cost.
     Buying value: Coste
@@ -761,7 +788,12 @@ es:
     Check buy amount: Marcar como correcta la cantidad de compra
 </i18n>
 <style lang="scss" scoped>
-.test {
+.centered-container {
+    display: flex;
     justify-content: center;
+    align-items: center;
+    position: absolute;
+    width: 40%;
+    height: 100%;
 }
 </style>

src/pages/Entry/Card/EntryDescriptor.vue

@@ -147,7 +147,6 @@ async function deleteEntry() {
 <template>
     <CardDescriptor
         ref="entryDescriptorRef"
-        module="Entry"
         :url="`Entries/${entityId}`"
         :userFilter="entryFilter"
         title="supplier.nickname"

src/pages/Entry/EntryList.vue

@@ -182,14 +182,6 @@ const columns = computed(() => [
         name: 'entryTypeCode',
         cardVisible: true,
     },
-    {
-        name: 'dated',
-        label: t('entry.list.tableVisibleColumns.dated'),
-        component: 'date',
-        cardVisible: false,
-        visible: false,
-        create: true,
-    },
     {
         name: 'companyFk',
         label: t('entry.list.tableVisibleColumns.companyFk'),
@@ -220,7 +212,8 @@ function getBadgeAttrs(row) {
 
     let timeDiff = today - timeTicket;
 
-    if (timeDiff > 0) return { color: 'warning', 'text-color': 'black' };
+    if (timeDiff > 0) return { color: 'info', 'text-color': 'black' };
+    if (timeDiff < 0) return { color: 'warning', 'text-color': 'black' };
     switch (row.entryTypeCode) {
         case 'regularization':
         case 'life':
@@ -245,7 +238,6 @@ function getBadgeAttrs(row) {
         default:
             break;
     }
-    if (timeDiff < 0) return { color: 'info', 'text-color': 'black' };
     return { color: 'transparent' };
 }
 

src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue

@@ -90,7 +90,6 @@ async function setInvoiceCorrection(id) {
 <template>
     <CardDescriptor
         ref="cardDescriptorRef"
-        module="InvoiceIn"
         data-key="InvoiceIn"
         :url="`InvoiceIns/${entityId}`"
         :filter="filter"

src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue

@@ -36,7 +36,6 @@ function ticketFilter(invoice) {
 <template>
     <CardDescriptor
         ref="descriptor"
-        module="InvoiceOut"
         :url="`InvoiceOuts/${entityId}`"
         :filter="filter"
         title="ref"

src/pages/Item/Card/ItemDescriptor.vue

@@ -92,7 +92,6 @@ const updateStock = async () => {
 <template>
     <CardDescriptor
         data-key="Item"
-        module="Item"
         :summary="$props.summary"
         :url="`Items/${entityId}/getCard`"
         @on-fetch="setData"

src/pages/Item/Card/ItemShelving.vue

@@ -110,10 +110,16 @@ const columns = computed(() => [
         attrs: { inWhere: true },
         align: 'left',
     },
+    {
+        label: t('globals.visible'),
+        name: 'stock',
+        attrs: { inWhere: true },
+        align: 'left',
+    },
 ]);
 
 const totalLabels = computed(() =>
-    rows.value.reduce((acc, row) => acc + row.stock / row.packing, 0).toFixed(2)
+    rows.value.reduce((acc, row) => acc + row.stock / row.packing, 0).toFixed(2),
 );
 
 const removeLines = async () => {
@@ -157,7 +163,7 @@ watchEffect(selectedRows);
                     openConfirmationModal(
                         t('shelvings.removeConfirmTitle'),
                         t('shelvings.removeConfirmSubtitle'),
-                        removeLines
+                        removeLines,
                     )
                 "
             >

src/pages/Item/ItemType/Card/ItemTypeDescriptor.vue

@@ -26,7 +26,6 @@ const entityId = computed(() => {
 </script>
 <template>
     <CardDescriptor
-        module="ItemType"
         :url="`ItemTypes/${entityId}`"
         :filter="filter"
         title="code"

src/pages/Monitor/Ticket/MonitorTickets.vue

@@ -61,6 +61,7 @@ function exprBuilder(param, value) {
         case 'nickname':
             return { [`t.nickname`]: { like: `%${value}%` } };
         case 'zoneFk':
+            return { 't.zoneFk': value };
         case 'department':
             return { 'd.name': value };
         case 'totalWithVat':

src/pages/Order/Card/OrderCatalogItemDialog.vue

@@ -39,7 +39,7 @@ const addToOrder = async () => {
     });
 
     const { data: orderTotal } = await axios.get(
-        `Orders/${Number(route.params.id)}/getTotal`
+        `Orders/${Number(route.params.id)}/getTotal`,
     );
 
     state.set('orderTotal', orderTotal);
@@ -56,7 +56,7 @@ const canAddToOrder = () => {
     if (canAddToOrder) {
         const excedQuantity = prices.value.reduce(
             (acc, { quantity }) => acc + quantity,
-            0
+            0,
         );
         if (excedQuantity > props.item.available) {
             canAddToOrder = false;

src/pages/Order/Card/OrderDescriptor.vue

@@ -57,7 +57,6 @@ const total = ref(0);
         ref="descriptor"
         :url="`Orders/${entityId}`"
         :filter="filter"
-        module="Order"
         title="client.name"
         @on-fetch="setData"
         data-key="Order"

src/pages/Route/Agency/Card/AgencyDescriptor.vue

@@ -22,7 +22,6 @@ const card = computed(() => store.data);
 </script>
 <template>
     <CardDescriptor
-        module="Agency"
         data-key="Agency"
         :url="`Agencies/${entityId}`"
         :title="card?.name"

src/pages/Route/Card/RouteDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'components/ui/VnLv.vue';
@@ -16,14 +16,33 @@ const $props = defineProps({
 });
 
 const route = useRoute();
-
+const { t } = useI18n();
+const zone = ref();
+const zoneId = ref();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
+const getZone = async () => {
+    const filter = {
+        where: { routeFk: $props.id ? $props.id : route.params.id },
+    };
+    const { data } = await axios.get('Tickets/findOne', {
+        params: {
+            filter: JSON.stringify(filter),
+        },
+    });
+    zoneId.value = data.zoneFk;
+    const { data: zoneData } = await axios.get(`Zones/${zoneId.value}`);
+    zone.value = zoneData.name;
+};
+const data = ref(useCardDescription());
+const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
+onMounted(async () => {
+    getZone();
+});
 </script>
 <template>
     <CardDescriptor
-        module="Route"
         :url="`Routes/${entityId}`"
         :filter="filter"
         :title="null"
@@ -31,9 +50,9 @@ const entityId = computed(() => {
         width="lg-width"
     >
         <template #body="{ entity }">
-            <VnLv :label="$t('Date')" :value="toDate(entity?.created)" />
+            <VnLv :label="t('Date')" :value="toDate(entity?.dated)" />
-            <VnLv :label="$t('Agency')" :value="entity?.agencyMode?.name" />
+            <VnLv :label="t('Agency')" :value="entity?.agencyMode?.name" />
-            <VnLv :label="$t('Zone')" :value="entity?.zone?.name" />
+            <VnLv :label="t('Zone')" :value="zone" />
             <VnLv
                 :label="$t('Volume')"
                 :value="`${dashIfEmpty(entity?.m3)} / ${dashIfEmpty(

src/pages/Route/Card/RouteForm.vue

@@ -29,6 +29,51 @@ const defaultInitialData = {
 };
 const maxDistance = ref();
 
+const routeFilter = {
+    fields: [
+        'id',
+        'workerFk',
+        'agencyModeFk',
+        'dated',
+        'm3',
+        'warehouseFk',
+        'description',
+        'vehicleFk',
+        'kmStart',
+        'kmEnd',
+        'started',
+        'finished',
+        'cost',
+        'isOk',
+    ],
+    include: [
+        { relation: 'agencyMode', scope: { fields: ['id', 'name'] } },
+        {
+            relation: 'vehicle',
+            scope: { fields: ['id', 'm3'] },
+        },
+        {
+            relation: 'ticket',
+            scope: {
+                fields: ['id', 'name', 'zoneFk'],
+                include: { relation: 'zone', scope: { fields: ['id', 'name'] } },
+            },
+        },
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: {
+                    relation: 'user',
+                    scope: {
+                        fields: ['id'],
+                        include: { relation: 'emailUser', scope: { fields: ['email'] } },
+                    },
+                },
+            },
+        },
+    ],
+};
 const onSave = (data, response) => {
     if (isNew) {
         axios.post(`Routes/${response?.id}/updateWorkCenter`);

src/pages/Route/Roadmap/RoadmapDescriptor.vue

@@ -26,12 +26,7 @@ const entityId = computed(() => {
 </script>
 
 <template>
-    <CardDescriptor
+    <CardDescriptor :url="`Roadmaps/${entityId}`" :filter="filter" data-key="Roadmap">
-        module="Roadmap"
-        :url="`Roadmaps/${entityId}`"
-        :filter="filter"
-        data-key="Roadmap"
-    >
         <template #body="{ entity }">
             <VnLv :label="t('Roadmap')" :value="entity?.name" />
             <VnLv :label="t('ETD')" :value="toDateHourMin(entity?.etd)" />

src/pages/Route/Vehicle/Card/VehicleDescriptor.vue

@@ -9,7 +9,6 @@ const { notify } = useNotify();
 <template>
     <CardDescriptor
         :url="`Vehicles/${$route.params.id}`"
-        module="Vehicle"
         data-key="Vehicle"
         title="numberPlate"
         :to-module="{ name: 'VehicleList' }"

src/pages/Shelving/Card/ShelvingDescriptor.vue

@@ -25,7 +25,6 @@ const entityId = computed(() => {
 </script>
 <template>
     <CardDescriptor
-        module="Shelving"
         :url="`Shelvings/${entityId}`"
         :filter="filter"
         title="code"

src/pages/Shelving/Parking/Card/ParkingBasicData.vue

@@ -8,6 +8,11 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 
 const sectors = ref([]);
 const sectorFilter = { fields: ['id', 'description'] };
+
+const filter = {
+    fields: ['sectorFk', 'code', 'pickingOrder'],
+    include: [{ relation: 'sector', scope: sectorFilter }],
+};
 </script>
 <template>
     <FetchData
@@ -26,10 +31,6 @@ const sectorFilter = { fields: ['id', 'description'] };
                     :label="$t('parking.pickingOrder')"
                 />
             </VnRow>
-            <VnRow>
-                <VnInput v-model="data.row" :label="$t('parking.row')" />
-                <VnInput v-model="data.column" :label="$t('parking.column')" />
-            </VnRow>
             <VnRow>
                 <VnSelect
                     v-model="data.sectorFk"

src/pages/Shelving/Parking/Card/ParkingDescriptor.vue

@@ -17,7 +17,6 @@ const entityId = computed(() => props.id || route.params.id);
 </script>
 <template>
     <CardDescriptor
-        module="Parking"
         data-key="Parking"
         :url="`Parkings/${entityId}`"
         title="code"

src/pages/Shelving/Parking/locale/en.yml

@@ -1,7 +1,5 @@
 parking:
     pickingOrder: Picking order
     sector: Sector
-    row: Row
-    column: Column
     search: Search parking
     searchInfo: You can search by parking code

src/pages/Shelving/Parking/locale/es.yml

@@ -1,7 +1,5 @@
 parking:
     pickingOrder: Orden de recogida
-    row: Fila
     sector: Sector
-    column: Columna
     search: Buscar parking
     searchInfo: Puedes buscar por código de parking

src/pages/Supplier/Card/SupplierDescriptor.vue

@@ -62,7 +62,6 @@ const getEntryQueryParams = (supplier) => {
 
 <template>
     <CardDescriptor
-        module="Supplier"
         :url="`Suppliers/${entityId}`"
         :filter="filter"
         data-key="Supplier"

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -44,7 +44,6 @@ function ticketFilter(ticket) {
         @on-fetch="(data) => ([problems] = data)"
     />
     <CardDescriptor
-        module="Ticket"
         :url="`Tickets/${entityId}`"
         :filter="filter"
         data-key="Ticket"

src/pages/Ticket/Negative/TicketLackList.vue

@@ -34,7 +34,7 @@ const redirectToCreateView = ({ itemFk }) => {
 const columns = computed(() => [
     {
         name: 'date',
-        align: 'left',
+        align: 'center',
         label: t('negative.date'),
         format: ({ timed }) => toDate(timed),
         sortable: true,
@@ -47,7 +47,7 @@ const columns = computed(() => [
     {
         columnClass: 'shrink',
         name: 'timed',
-        align: 'left',
+        align: 'center',
         label: t('negative.timed'),
         format: ({ timed }) => toHour(timed),
         sortable: true,
@@ -58,7 +58,7 @@ const columns = computed(() => [
     },
     {
         name: 'itemFk',
-        align: 'left',
+        align: 'center',
         label: t('negative.id'),
         format: ({ itemFk }) => itemFk,
         sortable: true,
@@ -70,7 +70,7 @@ const columns = computed(() => [
     },
     {
         name: 'longName',
-        align: 'left',
+        align: 'center',
         label: t('negative.longName'),
         field: ({ longName }) => longName,
 
@@ -81,7 +81,7 @@ const columns = computed(() => [
     },
     {
         name: 'producer',
-        align: 'left',
+        align: 'center',
         label: t('negative.supplier'),
         field: ({ producer }) => dashIfEmpty(producer),
         sortable: true,
@@ -89,7 +89,7 @@ const columns = computed(() => [
     },
     {
         name: 'inkFk',
-        align: 'left',
+        align: 'center',
         label: t('negative.colour'),
         field: ({ inkFk }) => inkFk,
         sortable: true,
@@ -97,7 +97,7 @@ const columns = computed(() => [
     },
     {
         name: 'size',
-        align: 'left',
+        align: 'center',
         label: t('negative.size'),
         field: ({ size }) => size,
         sortable: true,
@@ -110,7 +110,7 @@ const columns = computed(() => [
     },
     {
         name: 'category',
-        align: 'left',
+        align: 'center',
         label: t('negative.origen'),
         field: ({ category }) => dashIfEmpty(category),
         sortable: true,
@@ -118,7 +118,7 @@ const columns = computed(() => [
     },
     {
         name: 'lack',
-        align: 'left',
+        align: 'center',
         label: t('negative.lack'),
         field: ({ lack }) => lack,
         columnFilter: {
@@ -127,12 +127,12 @@ const columns = computed(() => [
             columnClass: 'shrink',
         },
         sortable: true,
-        headerStyle: 'padding-left: 33px',
+        headerStyle: 'padding-center: 33px',
         cardVisible: true,
     },
     {
         name: 'tableActions',
-        align: 'left',
+        align: 'center',
         actions: [
             {
                 title: t('Open details'),

src/pages/Ticket/Negative/TicketLackTable.vue

@@ -52,27 +52,26 @@ const route = useRoute();
 const columns = computed(() => [
     {
         name: 'status',
-        align: 'left',
+        align: 'center',
         sortable: false,
-        columnClass: 'expand',
+        columnClass: 'shrink',
         columnFilter: false,
     },
     {
         name: 'ticketFk',
         label: t('negative.detail.ticketFk'),
-        align: 'left',
+        align: 'center',
         sortable: true,
         columnFilter: {
             component: 'input',
             type: 'number',
         },
-        columnClass: 'shrink',
     },
     {
         name: 'shipped',
         label: t('negative.detail.shipped'),
         field: 'shipped',
-        align: 'left',
+        align: 'center',
         format: ({ shipped }) => toDate(shipped),
         sortable: true,
         columnFilter: {
@@ -84,11 +83,9 @@ const columns = computed(() => [
         name: 'minTimed',
         label: t('negative.detail.theoreticalhour'),
         field: 'minTimed',
-        align: 'left',
+        align: 'center',
-        format: ({ minTimed }) => toHour(minTimed),
         sortable: true,
         component: 'time',
-        columnClass: 'shrink',
         columnFilter: {},
     },
     {
@@ -104,29 +101,27 @@ const columns = computed(() => [
                 optionValue: 'code',
             },
         },
-        columnClass: 'expand',
+        align: 'center',
-        align: 'left',
         sortable: true,
     },
     {
         name: 'zoneName',
         label: t('negative.detail.zoneName'),
         field: 'zoneName',
-        align: 'left',
+        align: 'center',
         sortable: true,
     },
     {
         name: 'nickname',
         label: t('negative.detail.nickname'),
         field: 'nickname',
-        align: 'left',
+        align: 'center',
         sortable: true,
     },
     {
         name: 'quantity',
         label: t('negative.detail.quantity'),
         field: 'quantity',
-        align: 'left',
         sortable: true,
         component: 'input',
         type: 'number',
@@ -167,7 +162,6 @@ const saveChange = async (field, { row }) => {
     }
 };
 
-const hasToIgnore = (row) => row.hasToIgnore === 1;
 function onBuysFetched(data) {
     Object.assign(item.value, data[0]);
 }
@@ -244,7 +238,7 @@ function onBuysFetched(data) {
         </template>
 
         <template #column-status="{ row }">
-            <QTd style="width: 150px">
+            <QTd style="min-width: 150px">
                 <div class="icon-container">
                     <QIcon
                         v-if="row.isBasket"

src/pages/Ticket/TicketFuture.vue

@@ -1,19 +1,16 @@
 <script setup>
-import { onMounted, ref, computed, reactive } from 'vue';
+import { ref, computed, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import FetchData from 'components/FetchData.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 import TicketFutureFilter from './TicketFutureFilter.vue';
 
 import { dashIfEmpty, toCurrency } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
-import { useArrayData } from 'composables/useArrayData';
 import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
 import useNotify from 'src/composables/useNotify.js';
 import { useState } from 'src/composables/useState';
@@ -26,214 +23,126 @@ const { openConfirmationModal } = useVnConfirm();
 const { notify } = useNotify();
 const user = state.getUser();
 
-const itemPackingTypesOptions = ref([]);
 const selectedTickets = ref([]);
-
+const vnTableRef = ref({});
-const exprBuilder = (param, value) => {
+const originElRef = ref(null);
-    switch (param) {
+const destinationElRef = ref(null);
-        case 'id':
-            return { id: value };
-        case 'futureId':
-            return { futureId: value };
-        case 'liters':
-            return { liters: value };
-        case 'lines':
-            return { lines: value };
-        case 'iptColFilter':
-            return { ipt: { like: `%${value}%` } };
-        case 'futureIptColFilter':
-            return { futureIpt: { like: `%${value}%` } };
-        case 'totalWithVat':
-            return { totalWithVat: value };
-    }
-};
-
 const userParams = reactive({
     futureScopeDays: Date.vnNew().toISOString(),
     originScopeDays: Date.vnNew().toISOString(),
     warehouseFk: user.value.warehouseFk,
 });
 
-const arrayData = useArrayData('FutureTickets', {
-    url: 'Tickets/getTicketsFuture',
-    userParams: userParams,
-    exprBuilder: exprBuilder,
-});
-const { store } = arrayData;
-
-const params = reactive({
-    futureScopeDays: Date.vnNew(),
-    originScopeDays: Date.vnNew(),
-    warehouseFk: user.value.warehouseFk,
-});
-
-const applyColumnFilter = async (col) => {
-    const paramKey = col.columnFilter?.filterParamKey || col.field;
-    params[paramKey] = col.columnFilter.filterValue;
-    await arrayData.addFilter({ params });
-};
-
-const getInputEvents = (col) => {
-    return col.columnFilter.type === 'select'
-        ? { 'update:modelValue': () => applyColumnFilter(col) }
-        : {
-              'keyup.enter': () => applyColumnFilter(col),
-          };
-};
-
-const tickets = computed(() => store.data);
-
 const ticketColumns = computed(() => [
     {
-        label: t('futureTickets.problems'),
+        label: '',
         name: 'problems',
+        headerClass: 'horizontal-separator',
         align: 'left',
-        columnFilter: null,
+        columnFilter: false,
     },
     {
         label: t('advanceTickets.ticketId'),
-        name: 'ticketId',
+        name: 'id',
         align: 'center',
-        sortable: true,
+        headerClass: 'horizontal-separator',
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            filterParamKey: 'id',
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
     },
     {
         label: t('futureTickets.shipped'),
         name: 'shipped',
         align: 'left',
-        sortable: true,
+        columnFilter: false,
-        columnFilter: null,
+        headerClass: 'horizontal-separator',
     },
     {
+        align: 'center',
+        class: 'shrink',
         label: t('advanceTickets.ipt'),
         name: 'ipt',
-        field: 'ipt',
-        align: 'left',
-        sortable: true,
         columnFilter: {
-            component: VnSelect,
+            component: 'select',
-            filterParamKey: 'iptColFilter',
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
             attrs: {
-                options: itemPackingTypesOptions.value,
+                url: 'itemPackingTypes',
-                'option-value': 'code',
+                fields: ['code', 'description'],
-                'option-label': 'description',
+                where: { isActive: true },
-                dense: true,
+                optionValue: 'code',
+                optionLabel: 'description',
+                inWhere: false,
             },
         },
-        format: (val) => dashIfEmpty(val),
+        format: (row, dashIfEmpty) => dashIfEmpty(row.ipt),
+        headerClass: 'horizontal-separator',
     },
     {
         label: t('ticketList.state'),
         name: 'state',
         align: 'left',
-        sortable: true,
+        columnFilter: false,
-        columnFilter: null,
+        headerClass: 'horizontal-separator',
     },
     {
         label: t('advanceTickets.liters'),
         name: 'liters',
-        field: 'liters',
         align: 'left',
-        sortable: true,
+        headerClass: 'horizontal-separator',
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
     },
     {
         label: t('advanceTickets.import'),
-        field: 'import',
         name: 'import',
         align: 'left',
-        sortable: true,
+        headerClass: 'horizontal-separator',
+        columnFilter: false,
+        format: (row) => toCurrency(row.totalWithVat),
     },
     {
         label: t('futureTickets.availableLines'),
         name: 'lines',
         field: 'lines',
         align: 'center',
-        sortable: true,
+        headerClass: 'horizontal-separator',
-        columnFilter: {
+        format: (row, dashIfEmpty) => dashIfEmpty(row.lines),
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-        format: (val) => dashIfEmpty(val),
     },
     {
         label: t('advanceTickets.futureId'),
         name: 'futureId',
-        align: 'left',
+        align: 'center',
-        sortable: true,
+        headerClass: 'horizontal-separator vertical-separator ',
-        columnFilter: {
+        columnClass: 'vertical-separator',
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            filterParamKey: 'futureId',
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
     },
     {
         label: t('futureTickets.futureShipped'),
         name: 'futureShipped',
         align: 'left',
-        sortable: true,
+        headerClass: 'horizontal-separator',
-        columnFilter: null,
+        columnFilter: false,
-        format: (val) => dashIfEmpty(val),
+        format: (row) => toDateTimeFormat(row.futureShipped),
     },
-
     {
+        align: 'center',
         label: t('advanceTickets.futureIpt'),
+        class: 'shrink',
         name: 'futureIpt',
-        field: 'futureIpt',
-        align: 'left',
-        sortable: true,
         columnFilter: {
-            component: VnSelect,
+            component: 'select',
-            filterParamKey: 'futureIptColFilter',
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
             attrs: {
-                options: itemPackingTypesOptions.value,
+                url: 'itemPackingTypes',
-                'option-value': 'code',
+                fields: ['code', 'description'],
-                'option-label': 'description',
+                where: { isActive: true },
-                dense: true,
+                optionValue: 'code',
+                optionLabel: 'description',
             },
         },
-        format: (val) => dashIfEmpty(val),
+        headerClass: 'horizontal-separator',
+        format: (row, dashIfEmpty) => dashIfEmpty(row.futureIpt),
     },
     {
         label: t('advanceTickets.futureState'),
         name: 'futureState',
         align: 'right',
-        sortable: true,
+        headerClass: 'horizontal-separator',
-        columnFilter: null,
+        class: 'expand',
-        format: (val) => dashIfEmpty(val),
+        columnFilter: false,
+        format: (row, dashIfEmpty) => dashIfEmpty(row.futureState),
     },
 ]);
 
@@ -258,26 +167,51 @@ const moveTicketsFuture = async () => {
     await axios.post('Tickets/merge', params);
     notify(t('advanceTickets.moveTicketSuccess'), 'positive');
     selectedTickets.value = [];
-    arrayData.fetch({ append: false });
+    vnTableRef.value.reload();
 };
-onMounted(async () => {
+
-    await arrayData.fetch({ append: false });
+watch(
-});
+    () => vnTableRef.value.tableRef?.$el,
+    ($el) => {
+        if (!$el) return;
+        const head = $el.querySelector('thead');
+        const firstRow = $el.querySelector('thead > tr');
+
+        const newRow = document.createElement('tr');
+        destinationElRef.value = document.createElement('th');
+        originElRef.value = document.createElement('th');
+
+        newRow.classList.add('bg-header');
+        destinationElRef.value.classList.add('text-uppercase', 'color-vn-label');
+        originElRef.value.classList.add('text-uppercase', 'color-vn-label');
+
+        destinationElRef.value.setAttribute('colspan', '7');
+        originElRef.value.setAttribute('colspan', '9');
+
+        originElRef.value.textContent = `${t('advanceTickets.origin')}`;
+        destinationElRef.value.textContent = `${t('advanceTickets.destination')}`;
+
+        newRow.append(destinationElRef.value, originElRef.value);
+        head.insertBefore(newRow, firstRow);
+    },
+    { once: true, inmmediate: true },
+);
+
+watch(
+    () => vnTableRef.value.params,
+    () => {
+        if (originElRef.value && destinationElRef.value) {
+            destinationElRef.value.textContent = `${t('advanceTickets.origin')}`;
+            originElRef.value.textContent = `${t('advanceTickets.destination')}`;
+        }
+    },
+    { deep: true },
+);
 </script>
 
 <template>
-    <FetchData
-        url="itemPackingTypes"
-        :filter="{
-            fields: ['code', 'description'],
-            order: 'description ASC',
-            where: { isActive: true },
-        }"
-        auto-load
-        @on-fetch="(data) => (itemPackingTypesOptions = data)"
-    />
     <VnSearchbar
-        data-key="FutureTickets"
+        data-key="futureTicket"
         :label="t('Search ticket')"
         :info="t('futureTickets.searchInfo')"
     />
@@ -293,7 +227,7 @@ onMounted(async () => {
                         t(`futureTickets.moveTicketDialogSubtitle`, {
                             selectedTickets: selectedTickets.length,
                         }),
-                        moveTicketsFuture
+                        moveTicketsFuture,
                     )
                 "
             >
@@ -305,77 +239,29 @@ onMounted(async () => {
     </VnSubToolbar>
     <RightMenu>
         <template #right-panel>
-            <TicketFutureFilter data-key="FutureTickets" />
+            <TicketFutureFilter data-key="futureTickets" />
         </template>
     </RightMenu>
     <QPage class="column items-center q-pa-md">
-        <QTable
+        <VnTable
-            :rows="tickets"
+            data-key="futureTickets"
+            ref="vnTableRef"
+            url="Tickets/getTicketsFuture"
+            search-url="futureTickets"
+            :user-params="userParams"
+            :limit="0"
             :columns="ticketColumns"
-            row-key="id"
+            :table="{
-            selection="multiple"
+                'row-key': '$index',
+                selection: 'multiple',
+            }"
             v-model:selected="selectedTickets"
-            :pagination="{ rowsPerPage: 0 }"
+            :right-search="false"
-            :no-data-label="t('globals.noResults')"
+            auto-load
-            style="max-width: 99%"
+            :disable-option="{ card: true }"
         >
-            <template #header="props">
+            <template #column-problems="{ row }">
-                <QTr>
+                <span class="q-gutter-x-xs">
-                    <QTh class="horizontal-separator" />
-                    <QTh
-                        class="horizontal-separator text-uppercase color-vn-label"
-                        colspan="8"
-                        translate
-                    >
-                        {{ t('advanceTickets.origin') }}
-                    </QTh>
-                    <QTh
-                        class="horizontal-separator text-uppercase color-vn-label"
-                        colspan="4"
-                        translate
-                    >
-                        {{ t('advanceTickets.destination') }}
-                    </QTh>
-                </QTr>
-                <QTr>
-                    <QTh>
-                        <QCheckbox v-model="props.selected" />
-                    </QTh>
-                    <QTh
-                        v-for="(col, index) in ticketColumns"
-                        :key="index"
-                        :class="{ 'vertical-separator': col.name === 'futureId' }"
-                    >
-                        {{ col.label }}
-                    </QTh>
-                </QTr>
-            </template>
-            <template #top-row="{ cols }">
-                <QTr>
-                    <QTd />
-                    <QTd
-                        v-for="(col, index) in cols"
-                        :key="index"
-                        style="max-width: 100px"
-                    >
-                        <component
-                            :is="col.columnFilter.component"
-                            v-if="col.columnFilter"
-                            v-model="col.columnFilter.filterValue"
-                            v-bind="col.columnFilter.attrs"
-                            v-on="col.columnFilter.event(col)"
-                            dense
-                        />
-                    </QTd>
-                </QTr>
-            </template>
-            <template #header-cell-availableLines="{ col }">
-                <QTh class="vertical-separator">
-                    {{ col.label }}
-                </QTh>
-            </template>
-            <template #body-cell-problems="{ row }">
-                <QTd class="q-gutter-x-xs">
                     <QIcon
                         v-if="row.futureAgencyFk !== row.agencyFk && row.agencyFk"
                         color="primary"
@@ -465,99 +351,87 @@ onMounted(async () => {
                             {{ t('futureTickets.rounding') }}
                         </QTooltip>
                     </QIcon>
-                </QTd>
+                </span>
             </template>
-            <template #body-cell-ticketId="{ row }">
+            <template #column-id="{ row }">
-                <QTd>
+                <QBtn flat class="link" @click.stop dense>
-                    <QBtn flat class="link">
+                    {{ row.id }}
-                        {{ row.id }}
+                    <TicketDescriptorProxy :id="row.id" />
-                        <TicketDescriptorProxy :id="row.id" />
+                </QBtn>
-                    </QBtn>
-                </QTd>
             </template>
-            <template #body-cell-shipped="{ row }">
+            <template #column-shipped="{ row }">
-                <QTd class="shipped">
+                <QBadge
-                    <QBadge
+                    text-color="black"
-                        text-color="black"
+                    :color="getDateQBadgeColor(row.shipped)"
-                        :color="getDateQBadgeColor(row.shipped)"
+                    class="q-ma-none"
-                        class="q-ma-none"
+                >
-                    >
+                    {{ toDateTimeFormat(row.shipped) }}
-                        {{ toDateTimeFormat(row.shipped) }}
+                </QBadge>
-                    </QBadge>
-                </QTd>
             </template>
-            <template #body-cell-state="{ row }">
+            <template #column-state="{ row }">
-                <QTd>
+                <QBadge
-                    <QBadge
+                    v-if="row.state"
-                        text-color="black"
+                    text-color="black"
-                        :color="row.classColor"
+                    :color="row.classColor"
-                        class="q-ma-none"
+                    class="q-ma-none"
-                        dense
+                    dense
-                    >
+                >
-                        {{ row.state }}
+                    {{ row.state }}
-                    </QBadge>
+                </QBadge>
-                </QTd>
+                <span v-else> {{ dashIfEmpty(row.state) }}</span>
             </template>
-            <template #body-cell-import="{ row }">
+            <template #column-import="{ row }">
-                <QTd>
+                <QBadge
-                    <QBadge
+                    :text-color="
-                        :text-color="
+                        totalPriceColor(row.totalWithVat) === 'warning'
-                            totalPriceColor(row.totalWithVat) === 'warning'
+                            ? 'black'
-                                ? 'black'
+                            : 'white'
-                                : 'white'
+                    "
-                        "
+                    :color="totalPriceColor(row.totalWithVat)"
-                        :color="totalPriceColor(row.totalWithVat)"
+                    class="q-ma-none"
-                        class="q-ma-none"
+                    dense
-                        dense
+                >
-                    >
+                    {{ toCurrency(row.totalWithVat || 0) }}
-                        {{ toCurrency(row.totalWithVat || 0) }}
+                </QBadge>
-                    </QBadge>
-                </QTd>
             </template>
-            <template #body-cell-futureId="{ row }">
+            <template #column-futureId="{ row }">
-                <QTd class="vertical-separator">
+                <QBtn flat class="link" @click.stop dense>
-                    <QBtn flat class="link" dense>
+                    {{ row.futureId }}
-                        {{ row.futureId }}
+                    <TicketDescriptorProxy :id="row.futureId" />
-                        <TicketDescriptorProxy :id="row.futureId" />
+                </QBtn>
-                    </QBtn>
-                </QTd>
             </template>
-            <template #body-cell-futureShipped="{ row }">
+            <template #column-futureShipped="{ row }">
-                <QTd class="shipped">
+                <QBadge
-                    <QBadge
+                    text-color="black"
-                        text-color="black"
+                    :color="getDateQBadgeColor(row.futureShipped)"
-                        :color="getDateQBadgeColor(row.futureShipped)"
+                    class="q-ma-none"
-                        class="q-ma-none"
+                >
-                    >
+                    {{ toDateTimeFormat(row.futureShipped) }}
-                        {{ toDateTimeFormat(row.futureShipped) }}
+                </QBadge>
-                    </QBadge>
-                </QTd>
             </template>
-            <template #body-cell-futureState="{ row }">
+            <template #column-futureState="{ row }">
-                <QTd>
+                <QBadge
-                    <QBadge
+                    text-color="black"
-                        text-color="black"
+                    :color="row.futureClassColor"
-                        :color="row.futureClassColor"
+                    class="q-mr-xs"
-                        class="q-ma-none"
+                    dense
-                        dense
+                >
-                    >
+                    {{ row.futureState }}
-                        {{ row.futureState }}
+                </QBadge>
-                    </QBadge>
-                </QTd>
             </template>
-        </QTable>
+        </VnTable>
     </QPage>
 </template>
 
 <style scoped lang="scss">
-.shipped {
+:deep(.vertical-separator) {
-    min-width: 132px;
-}
-.vertical-separator {
     border-left: 4px solid white !important;
 }
 
-.horizontal-separator {
+:deep(.horizontal-separator) {
+    border-top: 4px solid white !important;
+}
+:deep(.horizontal-bottom-separator) {
     border-bottom: 4px solid white !important;
 }
 </style>

src/pages/Ticket/TicketFutureFilter.vue

@@ -12,7 +12,7 @@ import axios from 'axios';
 import { onMounted } from 'vue';
 
 const { t } = useI18n();
-const props = defineProps({
+defineProps({
     dataKey: {
         type: String,
         required: true,
@@ -58,7 +58,7 @@ onMounted(async () => {
         auto-load
     />
     <VnFilterPanel
-        :data-key="props.dataKey"
+        :data-key
         :un-removable-params="['warehouseFk', 'originScopeDays ', 'futureScopeDays']"
     >
         <template #tags="{ tag, formatFn }">

src/pages/Ticket/TicketList.vue

@@ -232,7 +232,7 @@ const columns = computed(() => [
 
 function resetAgenciesSelector(formData) {
     agenciesOptions.value = [];
-    if(formData) formData.agencyModeId = null;
+    if (formData) formData.agencyModeId = null;
 }
 
 function redirectToLines(id) {
@@ -240,7 +240,7 @@ function redirectToLines(id) {
     window.open(url, '_blank');
 }
 
-const onClientSelected = async (formData) => {    
+const onClientSelected = async (formData) => {
     resetAgenciesSelector(formData);
     await fetchClient(formData);
     await fetchAddresses(formData);
@@ -248,14 +248,12 @@ const onClientSelected = async (formData) => {
 
 const fetchAvailableAgencies = async (formData) => {
     resetAgenciesSelector(formData);
-    const response= await getAgencies(formData, selectedClient.value);
+    const response = await getAgencies(formData, selectedClient.value);
     if (!response) return;
-    
+
-    const { options, agency } =  response
+    const { options, agency } = response;
-    if(options)
+    if (options) agenciesOptions.value = options;
-        agenciesOptions.value = options;
+    if (agency) formData.agencyModeId = agency;
-    if(agency)
-        formData.agencyModeId = agency;
 };
 
 const fetchClient = async (formData) => {
@@ -330,7 +328,7 @@ function openBalanceDialog(ticket) {
     const description = ref([]);
     const firstTicketClientId = checkedTickets[0].clientFk;
     const isSameClient = checkedTickets.every(
-        (ticket) => ticket.clientFk === firstTicketClientId
+        (ticket) => ticket.clientFk === firstTicketClientId,
     );
 
     if (!isSameClient) {
@@ -369,7 +367,7 @@ async function onSubmit() {
             description: dialogData.value.value.description,
             clientFk: dialogData.value.value.clientFk,
             email: email[0].email,
-        }
+        },
     );
 
     if (data) notify('globals.dataSaved', 'positive');
@@ -388,32 +386,32 @@ function setReference(data) {
     switch (data) {
         case 1:
             newDescription = `${t(
-                'ticketList.creditCard'
+                'ticketList.creditCard',
             )}, ${dialogData.value.value.description.replace(
                 /^(Credit Card, |Cash, |Transfers, )/,
-                ''
+                '',
             )}`;
             break;
         case 2:
             newDescription = `${t(
-                'ticketList.cash'
+                'ticketList.cash',
             )}, ${dialogData.value.value.description.replace(
                 /^(Credit Card, |Cash, |Transfers, )/,
-                ''
+                '',
             )}`;
             break;
         case 3:
             newDescription = `${newDescription.replace(
                 /^(Credit Card, |Cash, |Transfers, )/,
-                ''
+                '',
             )}`;
             break;
         case 4:
             newDescription = `${t(
-                'ticketList.transfers'
+                'ticketList.transfers',
             )}, ${dialogData.value.value.description.replace(
                 /^(Credit Card, |Cash, |Transfers, )/,
-                ''
+                '',
             )}`;
             break;
         case 3317:

src/pages/Travel/Card/TravelDescriptor.vue

@@ -32,7 +32,6 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
 
 <template>
     <CardDescriptor
-        module="Travel"
         :url="`Travels/${entityId}`"
         :title="data.title"
         :subtitle="data.subtitle"

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -50,7 +50,6 @@ const handlePhotoUpdated = (evt = false) => {
 <template>
     <CardDescriptor
         ref="cardDescriptorRef"
-        module="Worker"
         :data-key="dataKey"
         url="Workers/summary"
         :filter="{ where: { id: entityId } }"

src/pages/Worker/Card/WorkerDescriptorProxy.vue

@@ -12,11 +12,6 @@ const $props = defineProps({
 
 <template>
     <QPopupProxy>
-        <WorkerDescriptor
+        <WorkerDescriptor v-if="$props.id" :id="$props.id" :summary="WorkerSummary" />
-            v-if="$props.id"
-            :id="$props.id"
-            :summary="WorkerSummary"
-            data-key="workerDescriptorProxy"
-        />
     </QPopupProxy>
 </template>

src/pages/Worker/Department/Card/DepartmentDescriptor.vue

@@ -42,7 +42,6 @@ const { openConfirmationModal } = useVnConfirm();
 <template>
     <CardDescriptor
         ref="DepartmentDescriptorRef"
-        module="Department"
         :url="`Departments/${entityId}`"
         :summary="$props.summary"
         :to-module="{ name: 'WorkerDepartment' }"

src/pages/Worker/Department/Card/DepartmentSummary.vue

@@ -31,20 +31,18 @@ onMounted(async () => {
         ref="summary"
         :url="`Departments/${entityId}`"
         class="full-width"
-        style="max-width: 900px"
-        module-name="Department"
     >
         <template #header="{ entity }">
             <div>{{ entity.name }}</div>
         </template>
         <template #body="{ entity: department }">
-            <QCard class="column">
+            <QCard class="vn-one">
                 <VnTitle
                     :url="`#/worker/department/${entityId}/basic-data`"
                     :text="t('Basic data')"
                 />
                 <div class="full-width row wrap justify-between content-between">
-                    <div class="column" style="min-width: 50%">
+                    <div class="column">
                         <VnLv :label="t('globals.name')" :value="department.name" dash />
                         <VnLv :label="t('globals.code')" :value="department.code" dash />
                         <VnLv

src/pages/Zone/Card/ZoneBasicData.vue

@@ -35,7 +35,7 @@ const filterWhere = computed(() => ({
         auto-load
         @on-fetch="(data) => (validAddresses = data)"
     />
-    <FormModel :url="`Zones/${route.params.id}`" auto-load model="zone">
+    <FormModel :url="`Zones/${$route.params.id}`" auto-load data-key="Zone">
         <template #form="{ data, validate }">
             <VnRow>
                 <VnInput

src/pages/Zone/Card/ZoneDescriptor.vue

@@ -25,12 +25,7 @@ const entityId = computed(() => {
 </script>
 
 <template>
-    <CardDescriptor
+    <CardDescriptor :url="`Zones/${entityId}`" :filter="filter" data-key="Zone">
-        module="Zone"
-        :url="`Zones/${entityId}`"
-        :filter="filter"
-        data-key="Zone"
-    >
         <template #menu="{ entity }">
             <ZoneDescriptorMenuItems :zone="entity" />
         </template>

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

@@ -124,12 +124,12 @@ describe('Entry', () => {
 
         clickAndType('stickers', '1');
         checkText('quantity', '11');
-        checkText('amount', '550');
+        checkText('amount', '550.00');
         clickAndType('packing', '2');
         checkText('packing', '12close');
-        checkText('weight', '12');
+        checkText('weight', '12.0');
         checkText('quantity', '132');
-        checkText('amount', '6600');
+        checkText('amount', '6600.00');
         checkColor('packing', COLORS.enabled);
 
         selectCell('groupingMode').click().click().click();
@@ -137,7 +137,7 @@ describe('Entry', () => {
         checkColor('grouping', COLORS.enabled);
 
         selectCell('buyingValue').click().clear().type('{backspace}{backspace}1');
-        checkText('amount', '132');
+        checkText('amount', '132.00');
         checkColor('minPrice', COLORS.disable);
 
         selectCell('hasMinPrice').click().click();

test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js

@@ -49,7 +49,7 @@ describe('InvoiceInBasicData', () => {
             'test/cypress/fixtures/image.jpg',
             {
                 force: true,
-            }
+            },
         );
         cy.get('[data-cy="FormModelPopup_save"]').click();
         cy.checkNotification('Data saved');

test/cypress/integration/route/routeList.spec.js

@@ -4,9 +4,6 @@ describe('Route', () => {
         cy.login('developer');
         cy.visit(`/#/route/extended-list`);
     });
-    const getVnSelect =
-        '> :nth-child(1) > .column > .q-field > .q-field__inner > .q-field__control > .q-field__control-container';
-    const getRowColumn = (row, column) => `:nth-child(${row}) > :nth-child(${column})`;
 
     it('Route list create route', () => {
         cy.addBtnClick();
@@ -16,18 +13,25 @@ describe('Route', () => {
     });
 
     it('Route list search and edit', () => {
-        cy.get('#searchbar input').type('{enter}'); /* 
+        cy.get('#searchbar input').type('{enter}');
-        cy.get('td[data-col-field="description"]').click(); */
+        cy.get('[data-col-field="description"][data-row-index="0"]')
-        cy.get('input[name="description"]').type('routeTestOne{enter}');
+            .click()
-        /*  cy.get('.q-table tr')
+            .type('routeTestOne{enter}');
+        cy.get('.q-table tr')
             .its('length')
             .then((rowCount) => {
                 expect(rowCount).to.be.greaterThan(0);
             });
-        cy.get(getRowColumn(1, 3) + getVnSelect).type('{downArrow}{enter}');
+        cy.get('[data-col-field="workerFk"][data-row-index="0"]')
-        cy.get(getRowColumn(1, 4) + getVnSelect).type('{downArrow}{enter}');
+            .click()
-        cy.get(getRowColumn(1, 5) + getVnSelect).type('{downArrow}{enter}');
+            .type('{downArrow}{enter}');
+        cy.get('[data-col-field="agencyModeFk"][data-row-index="0"]')
+            .click()
+            .type('{downArrow}{enter}');
+        cy.get('[data-col-field="vehicleFk"][data-row-index="0"]')
+            .click()
+            .type('{downArrow}{enter}');
         cy.get('button[title="Save"]').click();
-        cy.get('.q-notification__message').should('have.text', 'Data saved'); */
+        cy.get('.q-notification__message').should('have.text', 'Data saved');
     });
 });

test/cypress/integration/wagon/wagonType/wagonTypeCreate.spec.js

@@ -9,7 +9,7 @@ describe('WagonTypeCreate', () => {
     it('should create a new wagon type and then delete it', () => {
         cy.get('.q-page-sticky > div > .q-btn').click();
         cy.get('input').first().type('Example for testing');
-        cy.get('button[type="submit"]').click();
+        cy.get('[data-cy="FormModelPopup_save"]').click();
         cy.get('[title="Remove"] > .q-btn__content > .q-icon').first().click();
     });
 });