Merge branch 'dev' into 8224-contextMenu

cypress.config.js

@@ -64,6 +64,5 @@ export default defineConfig({
         ...timeouts,
         includeShadowDom: true,
         waitForAnimations: true,
-        testIsolation: false,
     },
 });

src/components/CrudModel.vue

@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { computed, ref, useAttrs, watch, nextTick } from 'vue';
+import { computed, ref, useAttrs, watch } from 'vue';
 import { useRouter, onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -42,15 +42,7 @@ const $props = defineProps({
     },
     dataRequired: {
         type: Object,
-        default: () => ({}),
-    },
-    dataDefault: {
-        type: Object,
-        default: () => ({}),
-    },
-    insertOnLoad: {
-        type: Boolean,
-        default: false,
+        default: () => {},
     },
     defaultSave: {
         type: Boolean,
@@ -95,7 +87,6 @@ const formData = ref();
 const saveButtonRef = ref(null);
 const watchChanges = ref();
 const formUrl = computed(() => $props.url);
-const rowsContainer = ref(null);
 
 const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
 
@@ -131,11 +122,9 @@ async function fetch(data) {
     const rows = keyData ? data[keyData] : data;
     resetData(rows);
     emit('onFetch', rows);
-    $props.insertOnLoad && await insert();
     return rows;
 }
 
-
 function resetData(data) {
     if (!data) return;
     if (data && Array.isArray(data)) {
@@ -146,16 +135,9 @@ function resetData(data) {
     formData.value = JSON.parse(JSON.stringify(data));
 
     if (watchChanges.value) watchChanges.value(); //destroy watcher
-    watchChanges.value = watch(formData, (nVal) => {
-        hasChanges.value = false;
-        const filteredNewData = nVal.filter(row => !isRowEmpty(row) || row[$props.primaryKey]);
-        const filteredOriginal = originalData.value.filter(row => row[$props.primaryKey]);
-
-        const changes = getDifferences(filteredOriginal, filteredNewData);
-        hasChanges.value = !isEmpty(changes);
-
-    }, { deep: true });
+    watchChanges.value = watch(formData, () => (hasChanges.value = true), { deep: true });
 }
+
 async function reset() {
     await fetch(originalData.value);
     hasChanges.value = false;
@@ -183,9 +165,7 @@ async function onSubmit() {
         });
     }
     isLoading.value = true;
-    
     await saveChanges($props.saveFn ? formData.value : null);
-    
 }
 
 async function onSubmitAndGo() {
@@ -194,10 +174,6 @@ async function onSubmitAndGo() {
 }
 
 async function saveChanges(data) {
-    formData.value = formData.value.filter(row => 
-    row[$props.primaryKey] || !isRowEmpty(row)
-    );
-    
     if ($props.saveFn) {
         $props.saveFn(data, getChanges);
         isLoading.value = false;
@@ -227,32 +203,14 @@ async function saveChanges(data) {
     });
 }
 
-async function insert(pushData = { ...$props.dataRequired, ...$props.dataDefault }) {
-    formData.value = formData.value.filter(row => !isRowEmpty(row));
-
-    const lastRow = formData.value.at(-1);
-    const isLastRowEmpty = lastRow ? isRowEmpty(lastRow) : false;
-    
-    if (formData.value.length && isLastRowEmpty) return;
-    const $index = formData.value.length ? formData.value.at(-1).$index + 1 : 0;
-    
-    const nRow = Object.assign({ $index }, pushData);
-    formData.value.push(nRow);
-    
-    const hasChange = Object.keys(nRow).some(key => !isChange(nRow, key));
-    if (hasChange) hasChanges.value = true;
+async function insert(pushData = $props.dataRequired) {
+    const $index = formData.value.length
+        ? formData.value[formData.value.length - 1].$index + 1
+        : 0;
+    formData.value.push(Object.assign({ $index }, pushData));
+    hasChanges.value = true;
 }
 
-function isRowEmpty(row) {
-    return Object.keys(row).every(key => isChange(row, key));
-}
-
-
-function isChange(row,key){
-    return !row[key] || key == '$index' || Object.hasOwn($props.dataRequired || {}, key);
-}
-
-
 async function remove(data) {
     if (!data.length)
         return quasar.notify({
@@ -269,8 +227,10 @@ async function remove(data) {
         newData = newData.filter(
             (form) => !preRemove.some((index) => index == form.$index),
         );
-        formData.value = newData;
-        hasChanges.value = JSON.stringify(removeIndexField(formData.value)) !== JSON.stringify(removeIndexField(originalData.value));
+        const changes = getChanges();
+        if (!changes.creates?.length && !changes.updates?.length)
+            hasChanges.value = false;
+        fetch(newData);
     }
     if (ids.length) {
         quasar
@@ -288,8 +248,9 @@ async function remove(data) {
                 newData = newData.filter((form) => !ids.some((id) => id == form[pk]));
                 fetch(newData);
             });
+    } else {
+        reset();
     }
-
     emit('update:selected', []);
 }
 
@@ -300,7 +261,7 @@ function getChanges() {
     const pk = $props.primaryKey;
     for (const [i, row] of formData.value.entries()) {
         if (!row[pk]) {
-            creates.push(Object.assign(row, { ...$props.dataRequired }));
+            creates.push(row);
         } else if (originalData.value[i]) {
             const data = getDifferences(originalData.value[i], row);
             if (!isEmpty(data)) {
@@ -326,33 +287,6 @@ function isEmpty(obj) {
     return !Object.keys(obj).length;
 }
 
-function removeIndexField(data) {
-    if (Array.isArray(data)) {
-        return data.map(({ $index, ...rest }) => rest);
-    } else if (typeof data === 'object' && data !== null) {
-        const { $index, ...rest } = data;
-        return rest;
-    }
-}
-
-async function handleTab(event) {
-    event.preventDefault();
-    const { shiftKey, target } = event;
-    const focusableSelector = `tbody tr td:not(:first-child) :is(a, button, input, textarea, select, details):not([disabled])`;
-    const focusableElements = rowsContainer.value?.querySelectorAll(focusableSelector);
-    const currentIndex = Array.prototype.indexOf.call(focusableElements, target);
-    const index = shiftKey ? currentIndex - 1 : currentIndex + 1;
-    const isLast = target === focusableElements[focusableElements.length - 1];
-    const isFirst = currentIndex === 0;
-
-    if ((shiftKey && !isFirst) || (!shiftKey && !isLast))
-        focusableElements[index]?.focus();
-    else if (isLast) {
-        await insert();
-        await nextTick();
-    }
-}
-
 async function reload(params) {
     const data = await vnPaginateRef.value.fetch(params);
     fetch(data);
@@ -378,14 +312,12 @@ watch(formUrl, async () => {
         v-bind="$attrs"
     >
         <template #body v-if="formData">
-            <div ref="rowsContainer" @keydown.tab="handleTab">
-                <slot
-                    name="body"
-                    :rows="formData"
-                    :validate="validate"
-                    :filter="filter"
-                ></slot>
-            </div>
+            <slot
+                name="body"
+                :rows="formData"
+                :validate="validate"
+                :filter="filter"
+            ></slot>
         </template>
     </VnPaginate>
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown() && hasSubToolbar">

src/components/VnTable/VnContextMenu.vue

@@ -0,0 +1,136 @@
+<script setup>
+import { ref } from 'vue';
+import { useClipboard } from 'src/composables/useClipboard';
+
+const { copyText } = useClipboard();
+const target = ref();
+const qmenuRef = ref();
+const colField = ref();
+let colValue = '';
+let textValue = '';
+
+defineExpose({ handler });
+
+const arrayData = defineModel({
+    type: Object,
+});
+
+function handler(event) {
+    const clickedElement = event.target.closest('td');
+    if (!clickedElement) return;
+
+    target.value = event.target;
+    qmenuRef.value.show();
+    colField.value = clickedElement.getAttribute('data-col-field');
+    colValue = isNaN(+clickedElement.getAttribute('data-col-value'))
+        ? clickedElement.getAttribute('data-col-value')
+        : +clickedElement.getAttribute('data-col-value');
+    textValue = getDeepestText(clickedElement);
+}
+
+function getDeepestText(node) {
+    const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, {
+        acceptNode: (textNode) => {
+            return textNode.nodeValue.trim()
+                ? NodeFilter.FILTER_ACCEPT
+                : NodeFilter.FILTER_REJECT;
+        },
+    });
+
+    let lastText = '';
+    while (walker.nextNode()) {
+        lastText = walker.currentNode.nodeValue.trim();
+    }
+
+    return lastText;
+}
+
+async function selectionFilter() {
+    await arrayData.value.addFilter({ params: { [colField.value]: colValue } });
+}
+
+async function selectionExclude() {
+    await arrayData.value.addFilter({
+        params: { [colField.value]: { neq: colValue } },
+    });
+}
+
+async function selectionRemoveFilter() {
+    await arrayData.value.addFilter({ params: { [colField.value]: undefined } });
+}
+
+async function removeAllFilters() {
+    await arrayData.value.applyFilter({ params: {} });
+}
+
+function copyValue() {
+    copyText(textValue, {
+        component: {
+            copyValue: textValue,
+        },
+    });
+}
+</script>
+<template>
+    <QMenu
+        ref="qmenuRef"
+        :target
+        class="column q-pa-sm justify-left"
+        auto-close
+        no-parent-event
+    >
+        <QBtn
+            flat
+            icon="filter_list"
+            @click="selectionFilter()"
+            class="text-weight-regular"
+            align="left"
+            :label="$t('Filter by selection')"
+            no-caps
+        />
+        <QBtn
+            flat
+            icon="dangerous"
+            @click="selectionExclude()"
+            class="text-weight-regular"
+            align="left"
+            :label="$t('Exclude selection')"
+            no-caps
+        />
+        <QBtn
+            flat
+            icon="filter_list_off"
+            @click="selectionRemoveFilter()"
+            class="text-weight-regular"
+            align="left"
+            :label="$t('Remove filter')"
+            no-caps
+        />
+        <QBtn
+            flat
+            icon="filter_list_off"
+            @click="removeAllFilters()"
+            class="text-weight-regular"
+            align="left"
+            :label="$t('Remove all filters')"
+            no-caps
+        />
+        <QBtn
+            flat
+            icon="file_copy"
+            @click="copyValue()"
+            class="text-weight-regular"
+            align="left"
+            :label="$t('Copy value')"
+            no-caps
+        />
+    </QMenu>
+</template>
+<i18n>
+es:
+    Filter by selection: Filtro por selección
+    Exclude selection: Excluir selección
+    Remove filter: Quitar filtro por selección
+    Remove all filters: Eliminar todos los filtros
+    Copy value: Copiar valor
+</i18n>

src/components/VnTable/VnFilter.vue

@@ -136,6 +136,9 @@ async function addFilter(value, name) {
     value = value === '' ? undefined : value;
     let field = columnFilter.value?.name ?? $props.column.name ?? name;
 
+    delete arrayData.store?.userParams?.[field];
+    delete arrayData.store?.filter?.where?.[field];
+
     if (columnFilter.value?.inWhere) {
         if (columnFilter.value.alias) field = columnFilter.value.alias + '.' + field;
         return await arrayData.addFilterWhere({ [field]: value });

src/components/VnTable/VnTable.vue

@@ -33,6 +33,7 @@ import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
 import VnTableFilter from './VnTableFilter.vue';
 import { getColAlign } from 'src/composables/getColAlign';
 import RightMenu from '../common/RightMenu.vue';
+import VnContextMenu from './VnContextMenu.vue';
 import VnScroll from '../common/VnScroll.vue';
 import VnCheckboxMenu from '../common/VnCheckboxMenu.vue';
 import VnCheckbox from '../common/VnCheckbox.vue';
@@ -178,8 +179,9 @@ const app = inject('app');
 const tableHeight = useTableHeight();
 const vnScrollRef = ref(null);
 
-const editingRow = ref(null);
-const editingField = ref(null);
+const editingRow = ref();
+const editingField = ref();
+const contextMenuRef = ref({});
 const isTableMode = computed(() => mode.value == TABLE_MODE);
 const selectRegex = /select/;
 const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
@@ -216,6 +218,10 @@ onBeforeMount(() => {
 
 onMounted(async () => {
     if ($props.isEditable) document.addEventListener('click', clickHandler);
+    document.addEventListener('contextmenu', (event) => {
+        event.preventDefault();
+        contextMenuRef.value.handler(event);
+    });
     mode.value =
         quasar.platform.is.mobile && !$props.disableOption?.card
             ? CARD_MODE
@@ -239,6 +245,7 @@ onMounted(async () => {
 
 onUnmounted(async () => {
     if ($props.isEditable) document.removeEventListener('click', clickHandler);
+    document.removeEventListener('contextmenu', {});
 });
 
 watch(
@@ -684,10 +691,8 @@ const handleHeaderSelection = (evt, data) => {
         ref="CrudModelRef"
         @on-fetch="
             (...args) => {
-                if ($props.multiCheck.expand) {
-                    selectAll = false;
-                    selected = [];
-                }
+                selectAll = false;
+                selected = [];
                 emit('onFetch', ...args);
             }
         "
@@ -835,6 +840,7 @@ const handleHeaderSelection = (evt, data) => {
                         ]"
                         :data-row-index="rowIndex"
                         :data-col-field="col?.name"
+                        :data-col-value="row?.[col?.name]"
                     >
                         <div
                             class="no-padding no-margin"
@@ -1145,6 +1151,7 @@ const handleHeaderSelection = (evt, data) => {
             </template>
         </FormModelPopup>
     </QDialog>
+    <VnContextMenu ref="contextMenuRef" v-model="arrayData" />
     <VnScroll
         ref="vnScrollRef"
         v-if="isTableMode"

src/components/VnTable/VnTableFilter.vue

@@ -77,7 +77,12 @@ function columnName(col) {
         <template #tags="{ tag, formatFn, getLocale }">
             <div class="q-gutter-x-xs">
                 <strong>{{ getLocale(`${tag.label}`) }}: </strong>
-                <span>{{ formatFn(tag.value) }}</span>
+                <span
+                    :class="{
+                        'text-decoration-line-through': typeof chip === 'object',
+                    }"
+                    >{{ formatFn(tag) }}</span
+                >
             </div>
         </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">

src/components/__tests__/CrudModel.spec.js

@@ -193,11 +193,11 @@ describe('CrudModel', () => {
         });
 
         it('should set originalData and formatData with data and generate watchChanges', async () => {
-            data = [{
+            data = {
                 name: 'Tony',
                 lastName: 'Stark',
                 age: 42,
-            }];
+            };
 
             vm.resetData(data);
 

src/components/common/VnBankDetailsForm.vue

@@ -72,7 +72,7 @@ const getBankEntities = (data) => {
         :acls="[{ model: 'BankEntity', props: '*', accessType: 'WRITE' }]"
         :options="bankEntities"
         hide-selected
-        option-label="bic"
+        option-label="name"
         option-value="id"
         v-model="bankEntityFk"
         @update:model-value="$emit('updateBic', { iban, bankEntityFk })"

src/components/common/VnCheckboxMenu.vue

@@ -30,7 +30,7 @@ const onClick = async () => {
         params: { filter: JSON.stringify(filter) },
     };
     try {
-        const { data } = await axios.get(props.url, params);
+        const { data } = axios.get(props.url, params);
         rows.value = data;
     } catch (error) {
         const response = error.response;
@@ -83,7 +83,7 @@ defineEmits(['update:selected', 'select:all']);
                             />
                             <span
                                 v-else
-                                v-text="t('records', { rows: rows?.length ?? 0 })"
+                                v-text="t('records', { rows: rows.length ?? 0 })"
                             />
                         </QItemLabel>
                     </QItemSection>

src/components/common/VnSelect.vue

@@ -124,6 +124,7 @@ const {
 } = toRefs($props);
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
+const myOptionsMap = ref(new Map());
 const vnSelectRef = ref();
 const lastVal = ref();
 const noOneText = t('globals.noOne');
@@ -140,7 +141,7 @@ const styleAttrs = computed(() => {
           }
         : {};
 });
-const isLoading = ref(false);
+const hasFocus = ref(false);
 const useURL = computed(() => $props.url);
 const value = computed({
     get() {
@@ -166,6 +167,10 @@ const computedSortBy = computed(() => {
     return $props.sortBy || $props.optionLabel + ' ASC';
 });
 
+const valueIsObject = computed(
+    () => modelValue.value && typeof modelValue.value == 'object',
+);
+
 const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
 
 watch(options, (newValue) => {
@@ -173,12 +178,22 @@ watch(options, (newValue) => {
 });
 
 watch(modelValue, async (newValue) => {
+    if (newValue?.neq) newValue = newValue.neq;
     if (!myOptions?.value?.some((option) => option[optionValue.value] == newValue))
         await fetchFilter(newValue);
 
     if ($props.noOne) myOptions.value.unshift(noOneOpt.value);
 });
 
+watch(
+    () => myOptionsOriginal.value,
+    (newValue) => {
+        for (const item of newValue) {
+            myOptionsMap.value.set(item[optionValue.value], item);
+        }
+    },
+);
+
 onMounted(() => {
     setOptions(options.value);
     if (useURL.value && $props.modelValue && !findKeyInOptions())
@@ -187,7 +202,7 @@ onMounted(() => {
 });
 
 const someIsLoading = computed(
-    () => (isLoading.value || !!arrayData?.isLoading?.value) && !isMenuOpened.value,
+    () => !!arrayData?.isLoading?.value && !isMenuOpened.value,
 );
 function findKeyInOptions() {
     if (!$props.options) return;
@@ -224,6 +239,9 @@ function filter(val, options) {
 
 async function fetchFilter(val) {
     if (!$props.url) return;
+    if (val && typeof val == 'object') {
+        val = val.neq;
+    }
 
     const { fields, include, limit } = $props;
     const sortBy = computedSortBy.value;
@@ -298,13 +316,11 @@ async function onScroll({ to, direction, from, index }) {
     if (from === 0 && index === 0) return;
     if (!useURL.value && !$props.fetchRef) return;
     if (direction === 'decrease') return;
-    if (to === lastIndex && arrayData.store.hasMoreData && !isLoading.value) {
-        isLoading.value = true;
+    if (to === lastIndex && arrayData.store.hasMoreData) {
         await arrayData.loadMore();
         setOptions(arrayData.store.data);
         vnSelectRef.value.scrollTo(lastIndex);
         await nextTick();
-        isLoading.value = false;
     }
 }
 
@@ -347,22 +363,30 @@ function getCaption(opt) {
     if (optionCaption.value === false) return;
     return opt[optionCaption.value] || opt[optionValue.value];
 }
+
+function getOptionLabel(property) {
+    if (!myOptionsMap.value.size) return;
+    let value = modelValue.value;
+    if (property) {
+        value = modelValue.value[property];
+    }
+    return myOptionsMap.value.get(value)?.[optionLabel.value];
+}
 </script>
 
 <template>
     <QSelect
+        ref="vnSelectRef"
         v-model="value"
         :options="myOptions"
         :option-label="optionLabel"
         :option-value="optionValue"
-        v-bind="{ ...$attrs, ...styleAttrs }"
+        v-bind="{ ...$attrs, ...styleAttrs, hideSelected: hasFocus }"
         @filter="filterHandler"
         :emit-value="nullishToTrue($attrs['emit-value'])"
         :map-options="nullishToTrue($attrs['map-options'])"
-        :use-input="nullishToTrue($attrs['use-input'])"
-        :hide-selected="nullishToTrue($attrs['hide-selected'])"
-        :fill-input="nullishToTrue($attrs['fill-input'])"
-        ref="vnSelectRef"
+        :use-input="hasFocus || !value"
+        :fill-input="false"
         lazy-rules
         :class="{ required: isRequired }"
         :rules="mixinRules"
@@ -372,10 +396,20 @@ function getCaption(opt) {
         :loading="someIsLoading"
         @virtual-scroll="onScroll"
         @popup-hide="isMenuOpened = false"
-        @popup-show="isMenuOpened = true"
+        @popup-show="
+            async () => {
+                isMenuOpened = true;
+                hasFocus = true;
+                await $nextTick();
+                vnSelectRef?.$el?.querySelector('input')?.focus();
+            }
+        "
         @keydown="handleKeyDown"
         :data-cy="$attrs.dataCy ?? $attrs.label + '_select'"
         :data-url="url"
+        @blur="hasFocus = false"
+        @update:model-value="() => vnSelectRef.blur()"
+        :is-required="false"
     >
         <template #append>
             <QIcon
@@ -425,6 +459,17 @@ function getCaption(opt) {
                 </QItemSection>
             </QItem>
         </template>
+        <template #selected v-if="valueIsObject && nullishToTrue($attrs['emit-value'])">
+            <span class="nowrap">
+                <span
+                    class="text-strike"
+                    v-if="modelValue?.neq"
+                    v-text="getOptionLabel('neq')"
+                    :title="getOptionLabel('neq')"
+                />
+                <span v-else>{{ JSON.stringify(modelValue) }}</span>
+            </span>
+        </template>
     </QSelect>
 </template>
 
@@ -432,4 +477,12 @@ function getCaption(opt) {
 .q-field--outlined {
     max-width: 100%;
 }
+.q-field__native {
+    @extend .nowrap;
+}
+
+.nowrap {
+    display: flex;
+    flex-wrap: nowrap !important;
+}
 </style>

src/components/common/__tests__/VnBankDetailsForm.spec.js

@@ -40,11 +40,4 @@ describe('VnBankDetail Component', () => {
         await vm.autofillBic('ES1234567891324567891234');
         expect(vm.bankEntityFk).toBe(null);
     });
-
-    it('should not update bankEntityFk if IBAN country is not ES', async () => {
-        vm.bankEntities = bankEntities;
-
-        await vm.autofillBic('FR1420041010050500013M02606');
-        expect(vm.bankEntityFk).toBe(null);
-    });
 });

src/components/ui/VnFilterPanel.vue

@@ -186,6 +186,7 @@ async function remove(key) {
 function formatValue(value) {
     if (typeof value === 'boolean') return value ? t('Yes') : t('No');
     if (isNaN(value) && !isNaN(Date.parse(value))) return toDate(value);
+    if (value && typeof value === 'object') return '';
 
     return `"${value}"`;
 }

src/components/ui/VnNotes.vue

@@ -35,7 +35,6 @@ const $props = defineProps({
     selectType: { type: Boolean, default: false },
     justInput: { type: Boolean, default: false },
     goTo: { type: String, default: '' },
-    useUserRelation: { type: Boolean, default: true },
 });
 
 const { t } = useI18n();
@@ -55,26 +54,6 @@ const defaultObservationType = computed(
 let savedNote = false;
 let originalText;
 
-onBeforeRouteLeave((to, from, next) => {
-    if (
-        (newNote.text && !$props.justInput) ||
-        (newNote.text !== originalText && $props.justInput)
-    )
-        quasar.dialog({
-            component: VnConfirm,
-            componentProps: {
-                title: t('globals.unsavedPopup.title'),
-                message: t('globals.unsavedPopup.subtitle'),
-                promise: () => next(),
-            },
-        });
-    else next();
-});
-
-onMounted(() => {
-    nextTick(() => (componentIsRendered.value = true));
-});
-
 function handleClick(e) {
     if (e.shiftKey && e.key === 'Enter') return;
     if ($props.justInput) confirmAndUpdate();
@@ -129,6 +108,22 @@ async function update() {
     );
 }
 
+onBeforeRouteLeave((to, from, next) => {
+    if (
+        (newNote.text && !$props.justInput) ||
+        (newNote.text !== originalText && $props.justInput)
+    )
+        quasar.dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('globals.unsavedPopup.title'),
+                message: t('globals.unsavedPopup.subtitle'),
+                promise: () => next(),
+            },
+        });
+    else next();
+});
+
 function fetchData([data]) {
     newNote.text = data?.notes;
     originalText = data?.notes;
@@ -142,38 +137,16 @@ const handleObservationTypes = (data) => {
     }
 };
 
+onMounted(() => {
+    nextTick(() => (componentIsRendered.value = true));
+});
+
 async function saveAndGo() {
     savedNote = false;
     await insert();
+    await savedNote;
     router.push({ path: $props.goTo });
 }
-
-function getUserFilter() {
-    const newUserFilter = $props.userFilter ?? {};
-    const userInclude = {
-        relation: 'user',
-        scope: {
-            fields: ['id', 'nickname', 'name'],
-        },
-    };
-    if (newUserFilter.include) {
-        if (Array.isArray(newUserFilter.include)) {
-            newUserFilter.include.push(userInclude);
-        } else {
-            newUserFilter.include = [userInclude, newUserFilter.include];
-        }
-    } else {
-        newUserFilter.include = userInclude;
-    }
-
-    if ($props.useUserRelation) {
-        return {
-            ...newUserFilter,
-            ...$props.userFilter,
-        };
-    }
-    return $props.filter;
-}
 </script>
 <template>
     <Teleport
@@ -269,7 +242,7 @@ function getUserFilter() {
         :url="$props.url"
         order="created DESC"
         :limit="0"
-        :user-filter="getUserFilter()"
+        :user-filter="userFilter"
         :filter="filter"
         auto-load
         ref="vnPaginateRef"
@@ -288,15 +261,15 @@ function getUserFilter() {
                     <QCardSection horizontal>
                         <VnAvatar
                             :descriptor="false"
-                            :worker-id="note.user?.id"
+                            :worker-id="note.workerFk"
                             size="md"
-                            :title="note.user?.nickname"
+                            :title="note.worker?.user.nickname"
                         />
                         <div class="full-width row justify-between q-pa-xs">
                             <div>
                                 <VnUserLink
-                                    :name="`${note.user?.name}`"
-                                    :worker-id="note.user?.id"
+                                    :name="`${note.worker.user.name}`"
+                                    :worker-id="note.worker.id"
                                 />
                                 <QBadge
                                     class="q-ml-xs"

src/components/ui/VnUserLink.vue

@@ -12,7 +12,6 @@ const $props = defineProps({
 const isWorker = ref(false);
 
 onMounted(async () => {
-    if (!$props.workerId) return;
     try {
         const {
             data: { exists },

src/pages/Claim/Card/ClaimDevelopment.vue

@@ -138,7 +138,6 @@ const columns = computed(() => [
         :filter="developmentsFilter"
         ref="claimDevelopmentForm"
         :data-required="{ claimFk: route.params.id }"
-        :insert-on-load="true"
         v-model:selected="selected"
         @save-changes="$router.push(`/claim/${route.params.id}/action`)"
         :default-save="false"

src/pages/Claim/Card/ClaimNotes.vue

@@ -1,9 +1,12 @@
 <script setup>
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
+import { useState } from 'src/composables/useState';
 import VnNotes from 'src/components/ui/VnNotes.vue';
 
 const route = useRoute();
+const state = useState();
+const user = state.getUser();
 
 const $props = defineProps({
     id: { type: [Number, String], default: null },
@@ -12,14 +15,25 @@ const $props = defineProps({
 const claimId = computed(() => $props.id || route.params.id);
 
 const claimFilter = {
-    fields: ['id', 'created', 'userFk', 'text'],
+    fields: ['id', 'created', 'workerFk', 'text'],
     include: {
-        relation: 'user',
+        relation: 'worker',
         scope: {
-            fields: ['id', 'nickname', 'name'],
+            fields: ['id', 'firstName', 'lastName'],
+            include: {
+                relation: 'user',
+                scope: {
+                    fields: ['id', 'nickname', 'name'],
+                },
+            },
         },
     },
 };
+
+const body = {
+    claimFk: claimId.value,
+    workerFk: user.value.id,
+};
 </script>
 
 <template>
@@ -29,9 +43,7 @@ const claimFilter = {
         :add-note="$props.addNote"
         :user-filter="claimFilter"
         :filter="{ where: { claimFk: claimId } }"
-        :body="{
-            claimFk: claimId,
-        }"
+        :body="body"
         v-bind="$attrs"
         style="overflow-y: auto"
     />

src/pages/Customer/Card/CustomerConsumption.vue

@@ -165,6 +165,7 @@ const updateDateParams = (value, params) => {
         v-if="campaignList"
         data-key="CustomerConsumption"
         url="Clients/consumption"
+        :order="['itemTypeFk', 'itemName', 'itemSize', 'description']"
         :filter="{ where: { clientFk: route.params.id } }"
         :columns="columns"
         search-url="consumption"

src/pages/Customer/Card/CustomerNotes.vue

@@ -1,15 +1,12 @@
 <script setup>
 import VnNotes from 'src/components/ui/VnNotes.vue';
-import { useState } from 'src/composables/useState';
-const state = useState();
-const user = state.getUser();
 </script>
 <template>
     <VnNotes
         url="clientObservations"
         :add-note="true"
         :filter="{ where: { clientFk: $route.params.id } }"
-        :body="{ clientFk: $route.params.id, userFk: user.id }"
+        :body="{ clientFk: $route.params.id }"
         style="overflow-y: auto"
         :select-type="true"
         required

src/pages/Customer/Defaulter/CustomerDefaulter.vue

@@ -76,7 +76,7 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: 'userFk',
+        name: 'workerFk',
         label: t('Author'),
         tooltip: t('Worker who made the last observation'),
         columnFilter: {
@@ -155,7 +155,7 @@ function exprBuilder(param, value) {
             return { [`c.${param}`]: value };
         case 'payMethod':
             return { [`c.payMethodFk`]: value };
-        case 'userFk':
+        case 'workerFk':
             return { [`co.${param}`]: value };
         case 'departmentFk':
             return { [`c.${param}`]: value };
@@ -229,10 +229,10 @@ function exprBuilder(param, value) {
                 <DepartmentDescriptorProxy :id="row.departmentFk" />
             </span>
         </template>
-        <template #column-userFk="{ row }">
+        <template #column-workerFk="{ row }">
             <span class="link" @click.stop>
                 {{ row.workerName }}
-                <WorkerDescriptorProxy :id="row.userFk" />
+                <WorkerDescriptorProxy :id="row.workerFk" />
             </span>
         </template>
     </VnTable>

src/pages/Customer/components/CustomerNewPayment.vue

@@ -130,22 +130,20 @@ async function onDataSaved(formData, { id }) {
     }
 }
 
-async function getSupplierClientReferences(data) {
-    if (!data) return (initialData.description = '');
-    const params = { bankAccount: data.compensationAccount };
-    const { data: reference } = await axios(`Clients/getClientOrSupplierReference`, {
-        params,
-    });
-    if (reference.supplierId) {
-        data.description = t('Supplier Compensation Reference', {
-            supplierId: reference.supplierId,
-            supplierName: reference.supplierName,
+async function getSupplierClientReferences(value) {
+    if (!value) return (initialData.description = '');
+    const params = { bankAccount: value };
+    const { data } = await axios(`Clients/getClientOrSupplierReference`, { params });
+    if (!data.clientId) {
+        initialData.description = t('Supplier Compensation Reference', {
+            supplierId: data.supplierId,
+            supplierName: data.supplierName,
         });
         return;
     }
-    data.description = t('Client Compensation Reference', {
-        clientId: reference.clientId,
-        clientName: reference.clientName,
+    initialData.description = t('Client Compensation Reference', {
+        clientId: data.clientId,
+        clientName: data.clientName,
     });
 }
 
@@ -254,7 +252,7 @@ async function getAmountPaid() {
                             :label="t('Compensation account')"
                             clearable
                             v-model="data.compensationAccount"
-                            @blur="getSupplierClientReferences(data)"
+                            @blur="getSupplierClientReferences(data.compensationAccount)"
                         />
                     </VnRow>
                 </div>
@@ -290,9 +288,6 @@ async function getAmountPaid() {
 </template>
 
 <i18n>
-en:
-    Supplier Compensation Reference: ({supplierId}) Ntro Proveedor {supplierName}
-    Client Compensation Reference: ({clientId}) Ntro Cliente {clientName}
 es:
     New payment: Añadir pago
     Date: Fecha

src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue

@@ -90,7 +90,6 @@ const columns = computed(() => [
             auto-load
             :data-required="{ invoiceInFk: invoiceInId }"
             :filter="filter"
-            :insert-on-load="true"
             v-model:selected="rowsSelected"
             @on-fetch="(data) => (invoceInIntrastat = data)"
         >

src/pages/InvoiceIn/Card/InvoiceInVat.vue

@@ -187,7 +187,6 @@ function setCursor(ref) {
         url="InvoiceInTaxes"
         :filter="filter"
         :data-required="{ invoiceInFk: $route.params.id }"
-        :insert-on-load="true"
         auto-load
         v-model:selected="rowsSelected"
         :go-to="`/invoice-in/${$route.params.id}/due-day`"

src/pages/Item/Card/ItemBarcode.vue

@@ -51,7 +51,6 @@ const submit = async (rows) => {
             <CrudModel
                 :data-required="{ itemFk: route.params.id }"
                 :default-remove="false"
-                :insert-on-load="true"
                 :filter="{
                     fields: ['id', 'itemFk', 'code'],
                     where: { itemFk: route.params.id },

src/pages/Item/Card/ItemTags.vue

@@ -76,22 +76,15 @@ const insertTag = (rows) => {
                 model="ItemTags"
                 url="ItemTags"
                 :data-required="{
+                    $index: undefined,
                     itemFk: route.params.id,
+                    priority: undefined,
                     tag: {
-                        isFree: true,
-                        value: undefined,
-                        name: undefined,
-                    },
-                    
-                }"
-                :data-default="{
-                    tag: {
-                        isFree: true,
+                        isFree: undefined,
                         value: undefined,
                         name: undefined,
                     },
                     tagFk: undefined,
-                    priority: undefined,
                 }"
                 :default-remove="false"
                 :user-filter="{

src/pages/Item/ItemFixedPrice.vue

@@ -218,8 +218,8 @@ const dateStyle = (date) =>
           }
         : { color: dateColor, 'background-color': 'transparent' };
 
-const onDataSaved = () => {
-    tableRef.value.CrudModelRef.saveChanges();
+const onDataSaved = async () => {
+    await tableRef.value.CrudModelRef.saveChanges();
     selectedRows.value = [];
 };
 

src/pages/Item/components/EditFixedPriceForm.vue

@@ -71,12 +71,13 @@ const closeForm = () => {
                     class="editOption"
                     :label="t('Field to edit')"
                     :options="fieldsOptions"
-                    hide-selected
                     option-label="label"
+                    option-value="name"
                     v-model="selectedField"
                     data-cy="EditFixedPriceSelectOption"
                     @update:model-value="newValue = null"
                     :class="{ 'is-select': selectedField?.component === 'select' }"
+                    :emit-value="false"
                 />
                 <component
                     :is="inputs[selectedField?.component || 'input']"

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

@@ -18,7 +18,7 @@ const noteFilter = computed(() => {
 
 const body = {
     vehicleFk: vehicleId.value,
-    userFk: user.value.id,
+    workerFk: user.value.id,
 };
 </script>
 

src/pages/Ticket/Card/TicketPackage.vue

@@ -24,10 +24,10 @@ const crudModelFilter = reactive({
     where: { ticketFk: route.params.id },
 });
 
-const crudModelDefaultData = computed(() => ({
-    created: Date.vnNew(),
+const crudModelRequiredData = computed(() => ({
     packagingFk: null,
     quantity: 0,
+    created: Date.vnNew(),
     ticketFk: route.params.id,
 }));
 
@@ -63,7 +63,7 @@ watch(
                 url="TicketPackagings"
                 model="TicketPackagings"
                 :filter="crudModelFilter"
-                :data-default="crudModelDefaultData"
+                :data-required="crudModelRequiredData"
                 :default-remove="false"
                 auto-load
             >

src/pages/Ticket/Card/TicketSale.vue

@@ -719,7 +719,6 @@ watch(
         :create-as-dialog="false"
         :crud-model="{
             disableInfiniteScroll: true,
-            insertOnLoad: false,
         }"
         :default-remove="false"
         :default-reset="false"

src/pages/Ticket/Negative/TicketLackList.vue

@@ -181,7 +181,6 @@ const setUserParams = (params) => {
         :create="false"
         :crud-model="{
             disableInfiniteScroll: true,
-            insertOnLoad: false,
         }"
         :table="{
             'row-key': 'itemFk',

src/pages/Ticket/TicketList.vue

@@ -463,6 +463,32 @@ function setReference(data) {
 
     dialogData.value.value.description = newDescription;
 }
+
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'stateFk':
+            return { 'ts.stateFk': value };
+        case 'provinceFk':
+            return { 'a.provinceFk': value };
+        case 'hour':
+            return { 'z.hour': value };
+        case 'shipped':
+            return {
+                't.shipped': {
+                    between: this.dateRange(value),
+                },
+            };
+        case 'departmentFk':
+            return { 'c.departmentFk': value };
+        case 'id':
+        case 'refFk':
+        case 'zoneFk':
+        case 'nickname':
+        case 'agencyModeFk':
+        case 'warehouseFk':
+            return { [`t.${param}`]: value };
+    }
+}
 </script>
 
 <template>
@@ -657,42 +683,36 @@ function setReference(data) {
                         </VnSelect>
                     </VnRow>
                     <VnRow>
-                        <div class="col">
-                            <VnInputDate
-                                placeholder="dd-mm-aaa"
-                                :label="t('globals.landed')"
-                                v-model="data.landed"
-                                @update:model-value="() => fetchAvailableAgencies(data)"
-                            />
-                        </div>
+                        <VnInputDate
+                            placeholder="dd-mm-aaa"
+                            :label="t('globals.landed')"
+                            v-model="data.landed"
+                            @update:model-value="() => fetchAvailableAgencies(data)"
+                        />
                     </VnRow>
                     <VnRow>
-                        <div class="col">
-                            <VnSelect
-                                url="Warehouses"
-                                :sort-by="['name']"
-                                :label="t('globals.warehouse')"
-                                v-model="data.warehouseId"
-                                hide-selected
-                                required
-                                :where="{
-                                    isForTicket: true,
-                                }"
-                                @update:model-value="() => fetchAvailableAgencies(data)"
-                            />
-                        </div>
+                        <VnSelect
+                            url="Warehouses"
+                            :sort-by="['name']"
+                            :label="t('globals.warehouse')"
+                            v-model="data.warehouseId"
+                            hide-selected
+                            required
+                            :where="{
+                                isForTicket: true,
+                            }"
+                            @update:model-value="() => fetchAvailableAgencies(data)"
+                        />
                     </VnRow>
                     <VnRow>
-                        <div class="col">
-                            <VnSelect
-                                :label="t('globals.agency')"
-                                v-model="data.agencyModeId"
-                                :options="agenciesOptions"
-                                option-value="agencyModeFk"
-                                option-label="agencyMode"
-                                hide-selected
-                            />
-                        </div>
+                        <VnSelect
+                            :label="t('globals.agency')"
+                            v-model="data.agencyModeId"
+                            :options="agenciesOptions"
+                            option-value="agencyModeFk"
+                            option-label="agencyMode"
+                            hide-selected
+                        />
                     </VnRow>
                 </template>
             </VnTable>

src/pages/Travel/ExtraCommunity.vue

@@ -547,7 +547,6 @@ watch(route, () => {
                                     },
                                 ]"
                                 v-text="col.value"
-                                :data-cy="`extra-community-${col.name}`"
                             />
                             <TravelDescriptorProxy
                                 v-if="col.name === 'id'"

src/pages/Worker/Card/WorkerBalance.vue

@@ -99,10 +99,6 @@ const columns = computed(() => [
                 workerFk: entityId,
             },
         }"
-        :crud-model="{
-            insertOnLoad: false,
-        }"
-
         order="paymentDate DESC"
         :columns="columns"
         auto-load

src/pages/Worker/Card/WorkerFormation.vue

@@ -128,9 +128,6 @@ const columns = computed(() => [
                 workerFk: entityId,
             },
         }"
-        :crud-model="{
-            insertOnLoad: false,
-        }"
         order="id DESC"
         :columns="columns"
         auto-load

src/pages/Worker/Card/WorkerMedical.vue

@@ -109,9 +109,6 @@ const columns = [
                 workerFk: entityId,
             },
         }"
-        :crud-model="{
-            insertOnLoad: false,
-        }"
         order="date DESC"
         :columns="columns"
         auto-load

src/pages/Worker/Card/WorkerNotes.vue

@@ -1,26 +1,28 @@
 <script setup>
 import { useRoute } from 'vue-router';
-import { useState } from 'src/composables/useState';
+
 import VnNotes from 'src/components/ui/VnNotes.vue';
 
 const route = useRoute();
-const state = useState();
-const user = state.getUser();
 
 const userFilter = {
     order: 'created DESC',
+
     include: {
-        relation: 'user',
+        relation: 'worker',
         scope: {
-            fields: ['id', 'nickname', 'name'],
+            fields: ['id', 'firstName', 'lastName'],
+            include: {
+                relation: 'user',
+                scope: {
+                    fields: ['id', 'nickname', 'name'],
+                },
+            },
         },
     },
 };
 
-const body = {
-    workerFk: route.params.id,
-    userFk: user.value.id,
-};
+const body = { workerFk: route.params.id };
 </script>
 
 <template>

src/pages/Worker/Card/WorkerPda.vue

@@ -170,9 +170,6 @@ function isSigned(row) {
             'row-key': 'deviceProductionFk',
             selection: 'multiple',
         }"
-        :crud-model="{
-            insertOnLoad: false,
-        }"
         :table-filter="{ hiddenTags: ['userFk'] }"
     >
         <template #moreBeforeActions>

test/cypress/integration/account/accountDescriptorMenu.spec.js

@@ -1,4 +1,4 @@
-describe('Account descriptor', { testIsolation: true }, () => {
+describe('Account descriptor', () => {
     const descriptorOptions = '[data-cy="descriptor-more-opts-menu"] > .q-list';
     const url = '/#/account/1/summary';
 

test/cypress/integration/claim/claimDevelopment.spec.js

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-describe('ClaimDevelopment', { testIsolation: true }, () => {
+describe('ClaimDevelopment', () => {
     const claimId = 1;
     const firstLineReason = 'tbody > :nth-child(1) > :nth-child(2)';
     const thirdRow = 'tbody > :nth-child(3)';

test/cypress/integration/customer/clientFiscalData.spec.js

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-describe('Client fiscal data', { testIsolation: true }, () => {
+describe('Client fiscal data', () => {
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('developer');

test/cypress/integration/customer/clientList.spec.js

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-describe('Client list', { testIsolation: true }, () => {
+describe('Client list', () => {
     beforeEach(() => {
         cy.login('developer');
         cy.visit('/#/customer/list', {
@@ -58,8 +58,8 @@ describe('Client list', { testIsolation: true }, () => {
         cy.waitForElement('.q-form');
         cy.checkValueForm(1, search);
         cy.checkValueForm(2, search);
-        cy.dataCy('Customer_select').should('have.value', search);
-        cy.dataCy('Address_select').should('have.value', search);
+        cy.dataCy('Customer_select').contains(search);
+        cy.dataCy('Address_select').contains(search);
     });
 
     it('Client founded create order', () => {
@@ -74,7 +74,7 @@ describe('Client list', { testIsolation: true }, () => {
         cy.waitForElement('#formModel');
         cy.waitForElement('.q-form');
         cy.checkValueForm(1, search);
-        cy.dataCy('Client_select').should('have.value', search);
-        cy.dataCy('Address_select').should('have.value', search);
+        cy.dataCy('Client_select').contains(search);
+        cy.dataCy('Address_select').contains(search);
     });
 });

test/cypress/integration/entry/entryCard/entryBuys.spec.js

@@ -95,7 +95,7 @@ describe('EntryBuys', () => {
 
         cy.get('input[data-cy="itemFk-create-popup"]').type('1');
         cy.get('div[role="listbox"] > div > div[role="option"]').eq(0).click();
-        cy.get('input[data-cy="Grouping mode_select"]').should('have.value', 'packing');
+        cy.dataCy('Grouping mode_select').contains('packing');
         cy.get('button[data-cy="FormModelPopup_save"]').click();
     }
 });

test/cypress/integration/entry/entryCard/entryNotes.spec.js

@@ -17,11 +17,9 @@ describe('EntryNotes', () => {
     const editObservation = (rowIndex, type, description) => {
         cy.get(`td[data-col-field="description"][data-row-index="${rowIndex}"]`)
             .click()
-            .clear()
             .type(description);
         cy.get(`td[data-col-field="observationTypeFk"][data-row-index="${rowIndex}"]`)
             .click()
-            .clear()
             .type(type);
         cy.get('div[role="listbox"] > div > div[role="option"]').eq(0).click();
         cy.saveCard();

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

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-describe('Entry PreAccount Functionality', { testIsolation: true }, () => {
+describe('Entry PreAccount Functionality', () => {
     beforeEach(() => {
         cy.login('administrative');
         cy.visit('/#/entry/pre-account');

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

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 import moment from 'moment';
-describe('InvoiceInBasicData', { testIsolation: true }, () => {
+describe('InvoiceInBasicData', () => {
     const dialogInputs = '.q-dialog input';
     const getDocumentBtns = (opt) => `[data-cy="dms-buttons"]  > :nth-child(${opt})`;
     const futureDate = moment().add(1, 'days').format('DD-MM-YYYY');

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

@@ -1,4 +1,4 @@
-describe('invoiceInCorrective', { testIsolation: true }, () => {
+describe('invoiceInCorrective', () => {
     beforeEach(() => cy.login('administrative'));
 
     it('should modify the invoice', () => {
@@ -44,9 +44,9 @@ describe('invoiceInCorrective', { testIsolation: true }, () => {
             cy.url().should('include', `/invoice-in/${correctingFk}/summary`);
             cy.visit(`/#/invoice-in/${correctingFk}/corrective`);
 
-            cy.dataCy('invoiceInCorrective_class').should('be.disabled');
-            cy.dataCy('invoiceInCorrective_type').should('be.disabled');
-            cy.dataCy('invoiceInCorrective_reason').should('be.disabled');
+            checkIsDisabled('class');
+            checkIsDisabled('type');
+            checkIsDisabled('reason');
         });
     });
 
@@ -56,4 +56,10 @@ describe('invoiceInCorrective', { testIsolation: true }, () => {
         cy.clickDescriptorAction(4);
         cy.get('[data-cy="InvoiceInCorrective-menu-item"]').should('exist');
     });
+
+    function checkIsDisabled(column) {
+        cy.dataCy(`invoiceInCorrective_${column}`)
+            .parents('.q-field')
+            .should('have.class', 'q-field--disabled');
+    }
 });

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

@@ -1,4 +1,4 @@
-describe('InvoiceInDescriptor', { testIsolation: true }, () => {
+describe('InvoiceInDescriptor', () => {
     beforeEach(() => cy.login('administrative'));
 
     describe('more options', () => {
@@ -132,9 +132,9 @@ function createCorrective() {
         const correctingId = response.body;
         cy.url().should('include', `/invoice-in/${correctingId}/summary`);
         cy.visit(`/#/invoice-in/${correctingId}/corrective`);
-        cy.dataCy('invoiceInCorrective_class').should('contain.value', 'R2');
-        cy.dataCy('invoiceInCorrective_type').should('contain.value', 'diferencias');
-        cy.dataCy('invoiceInCorrective_reason').should('contain.value', 'sales details');
+        cy.dataCy('invoiceInCorrective_class').contains('R2');
+        cy.dataCy('invoiceInCorrective_type').contains('diferencias');
+        cy.dataCy('invoiceInCorrective_reason').contains('sales details');
     });
 }
 

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

@@ -12,11 +12,8 @@ describe('InvoiceInIntrastat', () => {
 
     it('should edit the first line', () => {
         cy.selectOption(`${firstRow} ${codes}`, 'Plantas vivas: Esqueje/injerto, Vid');
-        cy.get(firstRowAmount).clear();
         cy.saveCard();
-        cy.get(codes)
-            .eq(0)
-            .should('have.value', '6021010: Plantas vivas: Esqueje/injerto, Vid');
+        cy.get(codes).eq(0).contains('6021010: Plantas vivas: Esqueje/injerto, Vid');
     });
 
     it('should add a new row', () => {
@@ -30,7 +27,7 @@ describe('InvoiceInIntrastat', () => {
             'FR',
         ]);
         cy.saveCard();
-        cy.get('.q-notification__message').should('have.text', 'Data saved');
+        cy.checkNotification('Data saved');
     });
 
     it('should remove the first line', () => {

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

@@ -52,7 +52,7 @@ describe('InvoiceInList', () => {
                 title: mockInvoiceRef,
                 listBox: { 0: '11/16/2001', 3: 'The farmer' },
             });
-            cy.dataCy('invoiceInBasicDataCompanyFk').should('have.value', 'ORN');
+            cy.dataCy('invoiceInBasicDataCompanyFk').contains('ORN');
         });
     });
 });

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

@@ -15,7 +15,7 @@ describe('InvoiceInVat', () => {
     it('should edit the sage iva', () => {
         cy.selectOption(`${firstLineVat} ${vats}`, 'H.P. IVA 21% CEE');
         cy.saveCard();
-        cy.get(vats).eq(0).should('have.value', '8: H.P. IVA 21% CEE');
+        cy.get(vats).eq(0).contains('8: H.P. IVA 21% CEE');
     });
 
     it('should mark the line as deductible VAT', () => {
@@ -23,9 +23,7 @@ describe('InvoiceInVat', () => {
 
         cy.saveCard();
 
-        cy.get(`${firstLineVat}  [data-cy="isDeductible_checkbox"]`)
-
-            .click();
+        cy.get(`${firstLineVat}  [data-cy="isDeductible_checkbox"]`).click();
         cy.saveCard();
     });
 

test/cypress/integration/invoiceOut/invoiceOutList.spec.js

@@ -24,7 +24,6 @@ describe('InvoiceOut list', () => {
     });
 
     it.skip('should download all pdfs', () => {
-        cy.get(columnCheckbox).click();
         cy.get(columnCheckbox).click();
         cy.dataCy('InvoiceOutDownloadPdfBtn').click();
     });

test/cypress/integration/invoiceOut/invoiceOutSummary.spec.js

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-describe('InvoiceOut summary', { testIsolation: true }, () => {
+describe('InvoiceOut summary', () => {
     const transferInvoice = {
         Client: { val: 'employee', type: 'select' },
         Type: { val: 'Error in customer data', type: 'select' },

test/cypress/integration/item/itemBarcodes.spec.js

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-describe('ItemBarcodes', { testIsolation: true }, () => {
+describe('ItemBarcodes', () => {
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/item/1/barcode`);

test/cypress/integration/item/itemSummary.spec.js

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-describe('Item summary', { testIsolation: true }, () => {
+describe('Item summary', () => {
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/item/1/summary`);

test/cypress/integration/item/itemTag.spec.js

@@ -1,4 +1,4 @@
-describe('Item tag', { testIsolation: true }, () => {
+describe('Item tag', () => {
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/item/1/tags`);

test/cypress/integration/login/login.spec.js

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-describe('Login', { testIsolation: true }, () => {
+describe('Login', () => {
     beforeEach(() => {
         cy.visit('/#/login');
         cy.get('#switchLanguage').click();

test/cypress/integration/login/logout.spec.js

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-describe('Logout', { testIsolation: true }, () => {
+describe('Logout', () => {
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/dashboard`);

test/cypress/integration/monitor/monitorTicket.spec.js

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-describe('Monitor Tickets Table', { testIsolation: true }, () => {
+describe('Monitor Tickets Table', () => {
     beforeEach(() => {
         cy.viewport(1920, 1080);
         cy.login('salesPerson');

test/cypress/integration/order/orderCatalog.spec.js

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-describe('OrderCatalog', { testIsolation: true }, () => {
+describe.skip('OrderCatalog', () => {
     beforeEach(() => {
         cy.login('developer');
         cy.viewport(1920, 1080);

test/cypress/integration/order/orderList.spec.js

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-describe('OrderList', { testIsolation: true }, () => {
+describe('OrderList', () => {
     const clientCreateSelect = '#formModel [data-cy="Client_select"]';
     const addressCreateSelect = '#formModel [data-cy="Address_select"]';
     const agencyCreateSelect = '#formModel [data-cy="Agency_select"]';
@@ -59,8 +59,8 @@ describe('OrderList', { testIsolation: true }, () => {
         ).click();
         cy.dataCy('vnTableCreateBtn').click();
 
-        cy.get(clientCreateSelect).should('have.value', 'Bruce Wayne');
-        cy.get(addressCreateSelect).should('have.value', 'Bruce Wayne');
+        cy.get(clientCreateSelect).contains('Bruce Wayne');
+        cy.get(addressCreateSelect).contains('Bruce Wayne');
         cy.dataCy('landedDate').find('input').type('06/01/2001');
         cy.selectOption(agencyCreateSelect, 1);
 

test/cypress/integration/route/cmr/cmrList.spec.js

@@ -1,4 +1,4 @@
-describe('Cmr list', { testIsolation: true }, () => {
+describe('Cmr list', () => {
     const getLinkSelector = (colField) =>
         `tr:first-child > [data-col-field="${colField}"] > .no-padding > .link`;
 

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

@@ -1,4 +1,4 @@
-describe('RouteAutonomous', { testIsolation: true }, () => {
+describe('RouteAutonomous', () => {
     const getLinkSelector = (colField, link = true) =>
         `tr:first-child > [data-col-field="${colField}"] > .no-padding${
             link ? ' > .link' : ''

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

@@ -1,4 +1,4 @@
-describe('Route', { testIsolation: true }, () => {
+describe('Route', () => {
     const getSelector = (colField) =>
         `tr:last-child > [data-col-field="${colField}"] > .no-padding > .link`;
 

test/cypress/integration/route/vehicle/vehicleDms.spec.js

@@ -1,4 +1,4 @@
-describe('Vehicle DMS', { testIsolation: true }, () => {
+describe('Vehicle DMS', () => {
     const getSelector = (btnPosition) =>
         `tr:last-child > .text-right > .no-wrap > :nth-child(${btnPosition}) > .q-btn > .q-btn__content > .q-icon`;
 

test/cypress/integration/shelving/parking/parkingBasicData.spec.js

@@ -1,8 +1,7 @@
 /// <reference types="cypress" />
 describe('ParkingBasicData', () => {
     const codeInput = 'form .q-card .q-input input';
-    const sectorSelect = 'form .q-card .q-select input';
-    const sectorOpt = '.q-menu .q-item';
+    const sectorSelect = 'form .q-card .q-select';
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/shelving/parking/1/basic-data`);
@@ -17,8 +16,7 @@ describe('ParkingBasicData', () => {
     });
 
     it('should edit the code and sector', () => {
-        cy.get(sectorSelect).type('First');
-        cy.get(sectorOpt).click();
+        cy.selectOption(sectorSelect, 'First');
 
         cy.get(codeInput).eq(0).clear();
         cy.get(codeInput).eq(0).type('700-01');
@@ -27,7 +25,7 @@ describe('ParkingBasicData', () => {
         cy.saveCard();
         cy.checkNotification('Data saved');
 
-        cy.get(sectorSelect).should('have.value', 'First sector');
+        cy.get(sectorSelect).contains('First sector');
         cy.get(codeInput).should('have.value', '700-01');
         cy.dataCy('Picking order_input').should('have.value', 80230);
     });

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

@@ -44,11 +44,11 @@ describe('TicketList', () => {
         cy.intercept('GET', /\/api\/Clients\?filter/).as('clientFilter');
         cy.vnTableCreateBtn();
         cy.wait('@clientFilter');
-        cy.dataCy('Customer_select').should('have.value', 'Bruce Wayne');
+        cy.dataCy('Customer_select').contains('Bruce Wayne');
         cy.dataCy('Address_select').click();
 
         cy.getOption().click();
-        cy.dataCy('Address_select').should('have.value', 'Bruce Wayne');
+        cy.dataCy('Address_select').contains('Bruce Wayne');
     });
     it('Client list create new ticket', () => {
         cy.vnTableCreateBtn();

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

@@ -1,7 +1,7 @@
 /// <reference types="cypress" />
 const firstRow = 'tbody > :nth-child(1)';
 
-describe('TicketSale', { testIsolation: true }, () => {
+describe('TicketSale', () => {
     describe('Ticket  #23', () => {
         beforeEach(() => {
             cy.login('claimManager');

test/cypress/integration/travel/ExtraCommunity.spec.js

@@ -1,16 +0,0 @@
-describe('Travel Extracommunity', () => {
-    it('Should show travels', () => {
-        cy.login('logistic');
-        cy.visit(`/#/travel/extra-community`);
-        cy.get('.q-page').should('be.visible');
-    });
-
-    it('Should show travels when user is supplier', () => {
-        cy.login('petterparker');
-        cy.visit(`/#/travel/extra-community`);
-        cy.get('[data-cy="vnFilterPanelChip_continent"] > .q-chip__icon--remove').click();
-        cy.dataCy('extra-community-cargoSupplierNickname').each(($el) => {
-            cy.wrap($el).should('contain.text', 'The farmer');
-        });
-    });
-});

test/cypress/integration/vnComponent/UserPanel.spec.js

@@ -1,52 +1,31 @@
 /// <reference types="cypress" />
-describe('UserPanel', { testIsolation: true }, () => {
+describe('UserPanel', () => {
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('developer');
         cy.visit(`/#dashboard`);
         cy.waitForElement('.q-page', 6000);
-    });
-
-    it('should notify when update user warehouse', () => {
-        const userWarehouse =
-            '.q-menu .q-gutter-xs > :nth-child(3) > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native> .q-field__input';
-
-        // Abro el panel
         cy.openUserPanel();
-
-        // Compruebo la opcion inicial
-        cy.get(userWarehouse).should('have.value', 'VNL').click();
-
-        // Actualizo la opción
-        cy.getOption(3);
-
-        //Compruebo la notificación
-        cy.get('.q-notification').should('be.visible');
-        cy.get(userWarehouse).should('have.value', 'VNH');
-
-        //Restauro el valor
-        cy.get(userWarehouse).click();
-        cy.getOption(2);
     });
+
     it('should notify when update user company', () => {
-        const userCompany =
-            '.q-menu .q-gutter-xs > :nth-child(2)  >  .q-field--float > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native> .q-field__input';
-
-        // Abro el panel
-        cy.openUserPanel();
-
-        // Compruebo la opcion inicial
-        cy.get(userCompany).should('have.value', 'Warehouse One').click();
-
-        //Actualizo la opción
-        cy.getOption(3);
-
-        //Compruebo la notificación
-        cy.get('.q-notification').should('be.visible');
-        cy.get(userCompany).should('have.value', 'TestingWarehouse');
-
-        //Restauro el valor
-        cy.get(userCompany).click();
-        cy.getOption(1);
+        changeSelect('User company', 'VNH', 'VNL');
     });
+    it('should notify when update user warehouse', () => {
+        changeSelect('User warehouse', 'TestingWarehouse', 'Warehouse One');
+    });
+
+    function changeSelect(field, newOption, oldOption) {
+        cy.get('.q-menu')
+            .contains(field)
+            .then(($field) => {
+                cy.wrap($field).contains(oldOption);
+                cy.selectOption($field, newOption);
+                cy.checkNotification('Data saved');
+                cy.wrap($field).contains(newOption);
+
+                // Restore
+                cy.selectOption($field, oldOption);
+            });
+    }
 });

test/cypress/integration/vnComponent/VnBreadcrumbs.spec.js

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-describe('VnBreadcrumbs', { testIsolation: true }, () => {
+describe('VnBreadcrumbs', () => {
     const lastBreadcrumb = '.q-breadcrumbs--last > .q-breadcrumbs__el';
     beforeEach(() => {
         cy.login('developer');

test/cypress/integration/vnComponent/VnLocation.spec.js

@@ -1,6 +1,6 @@
 const { randomNumber, randomString } = require('../../support');
 
-describe('VnLocation', { testIsolation: true }, () => {
+describe('VnLocation', () => {
     const locationOptions = '[role="listbox"] > div.q-virtual-scroll__content > .q-item';
     const dialogInputs = '.q-dialog label input';
     const createLocationButton = '.q-form > .q-card > .vn-row:nth-child(6) .--add-icon';
@@ -41,7 +41,7 @@ describe('VnLocation', { testIsolation: true }, () => {
             cy.get(
                 `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(3) `,
             ).click();
-            cy.dataCy('locationProvince').should('have.value', province);
+            cy.dataCy('locationProvince').contains(province);
         });
     });
     describe('Worker Create', () => {

test/cypress/integration/vnComponent/VnLog.spec.js

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-describe('VnLog', { testIsolation: true }, () => {
+describe('VnLog', () => {
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/claim/${1}/log`);

test/cypress/integration/worker/workerCreate.spec.js

@@ -1,4 +1,4 @@
-describe('WorkerCreate', { testIsolation: true }, () => {
+describe('WorkerCreate', () => {
     const externalRadio = '.q-radio:nth-child(2)';
     const developerBossId = 120;
     const payMethodCross =

test/cypress/integration/worker/workerLocker.spec.js

@@ -11,6 +11,6 @@ describe('WorkerLocker', () => {
     it('should allocates a locker', () => {
         cy.selectOption(lockerSelect, lockerCode);
         cy.saveCard();
-        cy.get(lockerSelect).invoke('val').should('eq', lockerCode);
+        cy.get(lockerSelect).contains(lockerCode);
     });
 });

test/cypress/integration/worker/workerManagement.spec.js

@@ -1,4 +1,4 @@
-describe('WorkerManagement', { testIsolation: true }, () => {
+describe('WorkerManagement', () => {
     const nif = '12091201A';
     const searchButton = '.q-scrollarea__content > .q-btn--standard > .q-btn__content';
     const url = '/#/worker/management';

test/cypress/integration/worker/workerNotificationsManager.spec.js

@@ -1,4 +1,4 @@
-describe('WorkerNotificationsManager', { testIsolation: true }, () => {
+describe('WorkerNotificationsManager', () => {
     const salesPersonId = 18;
     const developerId = 9;
 

test/cypress/integration/zone/zoneBasicData.spec.js

@@ -1,4 +1,4 @@
-describe('ZoneBasicData', { testIsolation: true }, () => {
+describe('ZoneBasicData', () => {
     const priceBasicData = '[data-cy="ZoneBasicDataPrice"]';
     const saveBtn = '.q-btn-group > .q-btn--standard';
 

test/cypress/integration/zone/zoneCreate.spec.js

@@ -1,4 +1,4 @@
-describe('ZoneCreate', { testIsolation: true }, () => {
+describe('ZoneCreate', () => {
     const data = {
         Name: { val: 'Zone pickup D' },
         Price: { val: '3' },

test/cypress/integration/zone/zoneDeliveryDays.spec.js

@@ -26,27 +26,8 @@ describe('ZoneDeliveryDays', () => {
             });
         }).as('events');
 
-        cy.dataCy('ZoneDeliveryDaysPostcodeSelect').type(postcode);
-        cy.get('.q-menu .q-item').contains(postcode).click();
-        cy.get('.q-menu').then(($menu) => {
-            if ($menu.is(':visible')) {
-                cy.get('[data-cy="ZoneDeliveryDaysPostcodeSelect"]')
-                    .as('focusedElement')
-                    .focus();
-                cy.get('@focusedElement').blur();
-            }
-        });
-
-        cy.dataCy('ZoneDeliveryDaysAgencySelect').type(agency);
-        cy.get('.q-menu .q-item').contains(agency).click();
-        cy.get('.q-menu').then(($menu) => {
-            if ($menu.is(':visible')) {
-                cy.get('[data-cy="ZoneDeliveryDaysAgencySelect"]')
-                    .as('focusedElement')
-                    .focus();
-                cy.get('@focusedElement').blur();
-            }
-        });
+        cy.selectOption('[data-cy="ZoneDeliveryDaysPostcodeSelect"]', postcode);
+        cy.selectOption('[data-cy="ZoneDeliveryDaysAgencySelect"]', agency);
 
         cy.get(submitForm).click();
         cy.wait('@events').then((interception) => {

test/cypress/support/commands.js

@@ -178,36 +178,37 @@ Cypress.Commands.add('fillInForm', (obj, opts = {}) => {
     cy.waitSpinner();
     const { form = '.q-form > .q-card', attr = 'aria-label' } = opts;
     cy.waitForElement(form);
-    cy.get(`${form} input`).each(([el]) => {
-        cy.wrap(el)
-            .invoke('attr', attr)
-            .then((key) => {
-                const field = obj[key];
-                if (!field) return;
-                if (typeof field == 'string')
-                    return cy
-                        .wrap(el)
-                        .type(`{selectall}{backspace}${field}`, { delay: 0 });
 
-                const { type, val } = field;
-                switch (type) {
-                    case 'select':
-                        cy.selectOption(el, val);
-                        break;
-                    case 'date':
-                        cy.get(el).type(`{selectall}{backspace}${val}`).blur();
-                        break;
-                    case 'time':
-                        cy.get(el).click();
-                        cy.get('.q-time .q-time__clock').contains(val.h).click();
-                        cy.get('.q-time .q-time__clock').contains(val.m).click();
-                        cy.get('.q-time .q-time__link').contains(val.x).click();
-                        break;
-                    default:
-                        cy.wrap(el).type(`{selectall}${val}`, { delay: 0 });
-                        break;
-                }
-            });
+    cy.get(`${form} .q-field`).each(($el) => {
+        cy.wrap($el).then(($element) => {
+            const key = $element.attr(attr) || $element.find(`[${attr}]`).attr(attr);
+            const field = obj[key];
+            if (!field) return;
+
+            const { type, val } =
+                typeof field === 'string' ? { type: 'string', val: field } : field;
+
+            switch (type) {
+                case 'select':
+                    cy.selectOption($el, val);
+                    break;
+                case 'date':
+                    cy.wrap($el)
+                        .find('input')
+                        .type(`{selectall}{backspace}${val}`)
+                        .blur();
+                    break;
+                case 'time':
+                    cy.wrap($el).click();
+                    cy.get('.q-time .q-time__clock').contains(val.h).click();
+                    cy.get('.q-time .q-time__clock').contains(val.m).click();
+                    cy.get('.q-time .q-time__link').contains(val.x).click();
+                    break;
+                default:
+                    cy.wrap($el).find('input').type(`{selectall}${val}`, { delay: 0 });
+                    break;
+            }
+        });
     });
 });