Merge branch '8406-crudModelUpdate' of https://gitea.verdnatura.es/verdnatura/salix-front into 8406-crudModelUpdate

src/components/CrudModel.vue

@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { computed, ref, useAttrs, watch } from 'vue';
+import { computed, ref, useAttrs, watch, nextTick } from 'vue';
 import { useRouter, onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -42,7 +42,15 @@ const $props = defineProps({
     },
     dataRequired: {
         type: Object,
-        default: () => {},
+        default: () => ({}),
+    },
+    dataDefault: {
+        type: Object,
+        default: () => ({}),
+    },
+    insertOnLoad: {
+        type: Boolean,
+        default: false,
     },
     defaultSave: {
         type: Boolean,
@@ -87,6 +95,7 @@ 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']);
 
@@ -122,9 +131,11 @@ 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)) {
@@ -135,9 +146,16 @@ function resetData(data) {
     formData.value = JSON.parse(JSON.stringify(data));
 
     if (watchChanges.value) watchChanges.value(); //destroy watcher
-    watchChanges.value = watch(formData, () => (hasChanges.value = true), { deep: true });
+    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 });
+}
 async function reset() {
     await fetch(originalData.value);
     hasChanges.value = false;
@@ -165,7 +183,9 @@ async function onSubmit() {
         });
     }
     isLoading.value = true;
+    
     await saveChanges($props.saveFn ? formData.value : null);
+    
 }
 
 async function onSubmitAndGo() {
@@ -174,6 +194,10 @@ 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;
@@ -203,14 +227,32 @@ async function saveChanges(data) {
     });
 }
 
-async function insert(pushData = $props.dataRequired) {
+async function insert(pushData = { ...$props.dataRequired, ...$props.dataDefault }) {
-    const $index = formData.value.length
+    formData.value = formData.value.filter(row => !isRowEmpty(row));
-        ? formData.value[formData.value.length - 1].$index + 1
+
-        : 0;
+    const lastRow = formData.value.at(-1);
-    formData.value.push(Object.assign({ $index }, pushData));
+    const isLastRowEmpty = lastRow ? isRowEmpty(lastRow) : false;
-    hasChanges.value = true;
+    
+    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;
 }
 
+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({
@@ -227,10 +269,8 @@ async function remove(data) {
         newData = newData.filter(
             (form) => !preRemove.some((index) => index == form.$index),
         );
-        const changes = getChanges();
+        formData.value = newData;
-        if (!changes.creates?.length && !changes.updates?.length)
+        hasChanges.value = JSON.stringify(removeIndexField(formData.value)) !== JSON.stringify(removeIndexField(originalData.value));
-            hasChanges.value = false;
-        fetch(newData);
     }
     if (ids.length) {
         quasar
@@ -248,9 +288,8 @@ async function remove(data) {
                 newData = newData.filter((form) => !ids.some((id) => id == form[pk]));
                 fetch(newData);
             });
-    } else {
-        reset();
     }
+
     emit('update:selected', []);
 }
 
@@ -261,7 +300,7 @@ function getChanges() {
     const pk = $props.primaryKey;
     for (const [i, row] of formData.value.entries()) {
         if (!row[pk]) {
-            creates.push(row);
+            creates.push(Object.assign(row, { ...$props.dataRequired }));
         } else if (originalData.value[i]) {
             const data = getDifferences(originalData.value[i], row);
             if (!isEmpty(data)) {
@@ -287,6 +326,33 @@ 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);
@@ -312,12 +378,14 @@ watch(formUrl, async () => {
         v-bind="$attrs"
     >
         <template #body v-if="formData">
-            <slot
+            <div ref="rowsContainer" @keydown.tab="handleTab">
-                name="body"
+                <slot
-                :rows="formData"
+                    name="body"
-                :validate="validate"
+                    :rows="formData"
-                :filter="filter"
+                    :validate="validate"
-            ></slot>
+                    :filter="filter"
+                ></slot>
+            </div>
         </template>
     </VnPaginate>
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown() && hasSubToolbar">

src/components/FormModel.vue

@@ -100,7 +100,7 @@ const $props = defineProps({
     },
     preventSubmit: {
         type: Boolean,
-        default: false,
+        default: true,
     },
 });
 const emit = defineEmits(['onFetch', 'onDataSaved', 'submit']);

src/components/VnTable/VnTable.vue

@@ -33,8 +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 VnScroll from '../common/VnScroll.vue';
+import VnScroll from '../common/VnScroll.vue'
-import VnMultiCheck from '../common/VnMultiCheck.vue';
 
 const arrayData = useArrayData(useAttrs()['data-key']);
 const $props = defineProps({
@@ -114,10 +113,6 @@ const $props = defineProps({
         type: Object,
         default: () => ({}),
     },
-    multiCheck: {
-        type: Object,
-        default: () => ({}),
-    },
     crudModel: {
         type: Object,
         default: () => ({}),
@@ -162,7 +157,6 @@ const CARD_MODE = 'card';
 const TABLE_MODE = 'table';
 const mode = ref(CARD_MODE);
 const selected = ref([]);
-const selectAll = ref(false);
 const hasParams = ref(false);
 const CrudModelRef = ref({});
 const showForm = ref(false);
@@ -201,10 +195,10 @@ const onVirtualScroll = ({ to }) => {
     handleScroll();
     const virtualScrollContainer = tableRef.value?.$el?.querySelector('.q-table__middle');
     if (virtualScrollContainer) {
-        virtualScrollContainer.dispatchEvent(new CustomEvent('scroll'));
+      virtualScrollContainer.dispatchEvent(new CustomEvent('scroll'));
-        if (vnScrollRef.value) {
+      if (vnScrollRef.value) {
-            vnScrollRef.value.updateScrollContainer(virtualScrollContainer);
+        vnScrollRef.value.updateScrollContainer(virtualScrollContainer);
-        }
+      }
     }
 };
 
@@ -644,23 +638,6 @@ const rowCtrlClickFunction = computed(() => {
         };
     return () => {};
 });
-const handleMultiCheck = (value) => {
-    if (value) {
-        selected.value = tableRef.value.rows;
-    } else {
-        selected.value = [];
-    }
-    emit('update:selected', selected.value);
-};
-
-const handleSelectedAll = (data) => {
-    if (data) {
-        selected.value = data;
-    } else {
-        selected.value = [];
-    }
-    emit('update:selected', selected.value);
-};
 </script>
 <template>
     <RightMenu v-if="$props.rightSearch" :overlay="overlay">
@@ -686,6 +663,7 @@ const handleSelectedAll = (data) => {
         :class="$attrs['class'] ?? 'q-px-md'"
         :limit="$attrs['limit'] ?? 100"
         ref="CrudModelRef"
+        :insert-on-load="crudModel.insertOnLoad"
         @on-fetch="(...args) => emit('onFetch', ...args)"
         :search-url="searchUrl"
         :disable-infinite-scroll="isTableMode"
@@ -702,9 +680,9 @@ const handleSelectedAll = (data) => {
                 ref="tableRef"
                 v-bind="table"
                 :class="[
-                    'vnTable',
+                  'vnTable',
-                    table ? 'selection-cell' : '',
+                  table ? 'selection-cell' : '',
-                    $props.footer ? 'last-row-sticky' : '',
+                  $props.footer ? 'last-row-sticky' : '',
                 ]"
                 wrap-cells
                 :columns="splittedColumns.columns"
@@ -723,17 +701,6 @@ const handleSelectedAll = (data) => {
                 :hide-selected-banner="true"
                 :data-cy
             >
-                <template #header-selection>
-                    <VnMultiCheck
-                        :searchUrl="searchUrl"
-                        :expand="$props.multiCheck.expand"
-                        v-model="selectAll"
-                        :url="$attrs['url']"
-                        @update:selected="handleMultiCheck"
-                        @select:all="handleSelectedAll"
-                    ></VnMultiCheck>
-                </template>
-
                 <template #top-left v-if="!$props.withoutHeader">
                     <slot name="top-left"> </slot>
                 </template>
@@ -1133,9 +1100,9 @@ const handleSelectedAll = (data) => {
         </FormModelPopup>
     </QDialog>
     <VnScroll 
-        ref="vnScrollRef"
+      ref="vnScrollRef"
-        v-if="isTableMode"
+      v-if="isTableMode"
-        :scroll-target="tableRef?.$el?.querySelector('.q-table__middle')"
+      :scroll-target="tableRef?.$el?.querySelector('.q-table__middle')"
     />
 </template>
 <i18n>

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

@@ -1,93 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import VnInput from 'src/components/common/VnInput.vue';
-import FetchData from '../FetchData.vue';
-import VnSelectDialog from './VnSelectDialog.vue';
-
-import CreateBankEntityForm from '../CreateBankEntityForm.vue';
-
-const $props = defineProps({
-    iban: {
-        type: String,
-        default: null,
-    },
-    bankEntityFk: {
-        type: Number,
-        default: null,
-    },
-    disableElement: {
-        type: Boolean,
-        default: false,
-    },
-});
-const filter = {
-    fields: ['id', 'bic', 'name'],
-    order: 'bic ASC',
-};
-const { t } = useI18n();
-const emit = defineEmits(['updateBic']);
-const iban = ref($props.iban);
-const bankEntityFk = ref($props.bankEntityFk);
-const bankEntities = ref([]);
-
-const autofillBic = async (bic) => {
-    if (!bic) return;
-    const bankEntityId = parseInt(bic.substr(4, 4));
-    const ibanCountry = bic.substr(0, 2);
-    if (ibanCountry != 'ES') return;
-
-    const existBank = bankEntities.value.find((b) => b.id === bankEntityId);
-    bankEntityFk.value = existBank ? bankEntityId : null;
-    emit('updateBic', { iban: iban.value, bankEntityFk: bankEntityFk.value });
-};
-
-const getBankEntities = (data) => {
-    bankEntityFk.value = data.id;
-};
-</script>
-<template>
-    <FetchData
-        url="BankEntities"
-        :filter="filter"
-        auto-load
-        @on-fetch="(data) => (bankEntities = data)"
-    />
-    <VnInput
-        :label="t('IBAN')"
-        clearable
-        v-model="iban"
-        @update:model-value="autofillBic($event)"
-        :disable="disableElement"
-    >
-        <template #append>
-            <QIcon name="info" class="cursor-info">
-                <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
-            </QIcon>
-        </template>
-    </VnInput>
-    <VnSelectDialog
-        :label="t('Swift / BIC')"
-        :acls="[{ model: 'BankEntity', props: '*', accessType: 'WRITE' }]"
-        :options="bankEntities"
-        hide-selected
-        option-label="name"
-        option-value="id"
-        v-model="bankEntityFk"
-        @update:model-value="$emit('updateBic', { iban, bankEntityFk })"
-        :disable="disableElement"
-    >
-        <template #form>
-            <CreateBankEntityForm @on-data-saved="getBankEntities($event)" />
-        </template>
-        <template #option="scope">
-            <QItem v-bind="scope.itemProps">
-                <QItemSection v-if="scope.opt">
-                    <QItemLabel>{{ scope.opt.bic }} </QItemLabel>
-                    <QItemLabel caption> {{ scope.opt.name }}</QItemLabel>
-                </QItemSection>
-            </QItem>
-        </template>
-    </VnSelectDialog>
-</template>

src/components/common/VnDmsList.vue

@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { useQuasar, QCheckbox, QBtn, QInput } from 'quasar';
 import axios from 'axios';
-import { usePrintService } from 'composables/usePrintService';
 
 import VnUserLink from '../ui/VnUserLink.vue';
 import { downloadFile } from 'src/composables/downloadFile';
@@ -24,7 +23,6 @@ const rows = ref([]);
 const dmsRef = ref();
 const formDialog = ref({});
 const token = useSession().getTokenMultimedia();
-const { openReport } = usePrintService();
 
 const $props = defineProps({
     model: {
@@ -201,7 +199,12 @@ const columns = computed(() => [
                     color: 'primary',
                 }),
                 click: (prop) =>
-                    openReport(`dms/${prop.row.id}/downloadFile`, {}, '_blank'),
+                    downloadFile(
+                        prop.row.id,
+                        $props.downloadModel,
+                        undefined,
+                        prop.row.download,
+                    ),
             },
             {
                 component: QBtn,

src/components/common/VnInputBic.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+const { t } = useI18n();
+const model = defineModel({ type: [Number, String] });
+const emit = defineEmits(['updateBic']);
+
+const getIbanCountry = (bank) => {
+    return bank.substr(0, 2);
+};
+
+const autofillBic = async (iban) => {
+    if (!iban) return;
+
+    const bankEntityId = parseInt(iban.substr(4, 4));
+    const ibanCountry = getIbanCountry(iban);
+
+    if (ibanCountry != 'ES') return;
+
+    const filter = { where: { id: bankEntityId } };
+    const params = { filter: JSON.stringify(filter) };
+
+    const { data } = await axios.get(`BankEntities`, { params });
+
+    emit('updateBic', data[0]?.id);
+};
+</script>
+<template>
+    <VnInput
+        :label="t('IBAN')"
+        clearable
+        v-model="model"
+        @update:model-value="autofillBic($event)"
+    >
+        <template #append>
+            <QIcon name="info" class="cursor-info">
+                <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
+            </QIcon>
+        </template>
+    </VnInput>
+</template>

src/components/common/VnLog.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';

src/components/common/VnMultiCheck.vue

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

src/components/common/VnSelect.vue

@@ -368,6 +368,7 @@ function getCaption(opt) {
         hide-bottom-space
         :input-debounce="useURL ? '300' : '0'"
         :loading="someIsLoading"
+        :readonly="someIsLoading"
         @virtual-scroll="onScroll"
         @keydown="handleKeyDown"
         :data-cy="$attrs.dataCy ?? $attrs.label + '_select'"

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

@@ -1,43 +0,0 @@
-import { createWrapper } from 'app/test/vitest/helper';
-import VnBankDetailsForm from 'components/common/VnBankDetailsForm.vue';
-import { vi, afterEach, expect, it, beforeEach, describe } from 'vitest';
-
-describe('VnBankDetail Component', () => {
-    let vm;
-    let wrapper;
-    const bankEntities = [
-        { id: 2100, bic: 'CAIXESBBXXX', name: 'CaixaBank' },
-        { id: 1234, bic: 'TESTBIC', name: 'Test Bank' },
-    ];
-    const correctIban = 'ES6621000418401234567891';
-
-    beforeAll(() => {
-        wrapper = createWrapper(VnBankDetailsForm, {
-            $props: {
-                iban: null,
-                bankEntityFk: null,
-                disableElement: false,
-            },
-        });
-        vm = wrapper.vm;
-        wrapper = wrapper.wrapper;
-    });
-
-    afterEach(() => {
-        vi.clearAllMocks();
-    });
-
-    it('should update bankEntityFk when IBAN exists in bankEntities', async () => {
-        vm.bankEntities = bankEntities;
-
-        await vm.autofillBic(correctIban);
-        expect(vm.bankEntityFk).toBe(2100);
-    });
-
-    it('should set bankEntityFk to null when IBAN bank code is not found', async () => {
-        vm.bankEntities = bankEntities;
-
-        await vm.autofillBic('ES1234567891324567891234');
-        expect(vm.bankEntityFk).toBe(null);
-    });
-});

src/components/ui/EntityDescriptor.vue

@@ -1,6 +1,8 @@
 <script setup>
-import { watch, ref, onMounted } from 'vue';
+import { onBeforeMount, watch, computed, ref } from 'vue';
 import { useArrayData } from 'composables/useArrayData';
+import { useState } from 'src/composables/useState';
+import { useRoute } from 'vue-router';
 import VnDescriptor from './VnDescriptor.vue';
 
 const $props = defineProps({
@@ -18,50 +20,39 @@ const $props = defineProps({
     },
 });
 
+const state = useState();
+const route = useRoute();
 let arrayData;
 let store;
-const entity = ref();
+let entity;
 const isLoading = ref(false);
-const containerRef = ref(null);
+const isSameDataKey = computed(() => $props.dataKey === route.meta.moduleName);
+defineExpose({ getData });
 
-onMounted(async () => {
+onBeforeMount(async () => {
-    let isPopup;
+    arrayData = useArrayData($props.dataKey, {
-    let el = containerRef.value.$el;
-    while (el) {
-        if (el.classList?.contains('q-menu')) {
-            isPopup = true;
-            break;
-        }
-        el = el.parentElement;
-    }
-
-    arrayData = useArrayData($props.dataKey + (isPopup ? 'Proxy' : ''), {
         url: $props.url,
         userFilter: $props.filter,
         skip: 0,
         oneRecord: true,
     });
     store = arrayData.store;
+    entity = computed(() => {
+        const data = store.data ?? {};
+        if (data) emit('onFetch', data);
+        return data;
+    });
 
+    // It enables to load data only once if the module is the same as the dataKey
+    if (!isSameDataKey.value || !route.params.id) await getData();
     watch(
         () => [$props.url, $props.filter],
         async () => {
-            await getData();
+            if (!isSameDataKey.value) await getData();
-        },
-        { immediate: true },
-    );
-
-    watch(
-        () => arrayData.store.data,
-        (newValue) => {
-            entity.value = newValue;
         },
     );
 });
 
-defineExpose({ getData });
-const emit = defineEmits(['onFetch']);
-
 async function getData() {
     store.url = $props.url;
     store.filter = $props.filter ?? {};
@@ -69,15 +60,18 @@ async function getData() {
     try {
         await arrayData.fetch({ append: false, updateRouter: false });
         const { data } = store;
+        state.set($props.dataKey, data);
         emit('onFetch', data);
     } finally {
         isLoading.value = false;
     }
 }
+
+const emit = defineEmits(['onFetch']);
 </script>
 
 <template>
-    <VnDescriptor v-model="entity" v-bind="$attrs" :module="dataKey" ref="containerRef">
+    <VnDescriptor v-model="entity" v-bind="$attrs" :module="dataKey">
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
             <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
         </template>

src/components/ui/VnPaginate.vue

@@ -222,7 +222,7 @@ defineExpose({
 </script>
 
 <template>
-    <div class="full-width">
+    <div class="full-width" v-bind="attrs">
         <div
             v-if="!store.data && !store.data?.length && !isLoading"
             class="info-row q-pa-md text-center"

src/pages/Account/Card/AccountDescriptorProxy.vue

@@ -4,6 +4,11 @@ import AccountSummary from './AccountSummary.vue';
 </script>
 <template>
     <QPopupProxy style="max-width: 10px">
-        <AccountDescriptor v-if="$attrs.id" v-bind="$attrs" :summary="AccountSummary" />
+        <AccountDescriptor
+            v-if="$attrs.id"
+            v-bind="$attrs"
+            :summary="AccountSummary"
+            :proxy-render="true"
+        />
     </QPopupProxy>
 </template>

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDateHourMinSec, toPercentage } from 'src/filters';
@@ -9,6 +9,7 @@ import DepartmentDescriptorProxy from 'src/pages/Worker/Department/Card/Departme
 import EntityDescriptor from 'components/ui/EntityDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import { getUrl } from 'src/composables/getUrl';
 import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
 import filter from './ClaimFilter.js';
 
@@ -22,6 +23,7 @@ const $props = defineProps({
 
 const route = useRoute();
 const { t } = useI18n();
+const salixUrl = ref();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
@@ -29,6 +31,10 @@ const entityId = computed(() => {
 function stateColor(entity) {
     return entity?.claimState?.classColor;
 }
+
+onMounted(async () => {
+    salixUrl.value = await getUrl('');
+});
 </script>
 
 <template>
@@ -120,7 +126,7 @@ function stateColor(entity) {
                     size="md"
                     icon="assignment"
                     color="primary"
-                    :to="{ name: 'TicketSaleTracking', params: { id: entity.ticketFk } }"
+                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
                 >
                     <QTooltip>{{ t('claim.saleTracking') }}</QTooltip>
                 </QBtn>
@@ -128,7 +134,7 @@ function stateColor(entity) {
                     size="md"
                     icon="visibility"
                     color="primary"
-                    :to="{ name: 'TicketTracking', params: { id: entity.ticketFk } }"
+                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
                 >
                     <QTooltip>{{ t('claim.ticketTracking') }}</QTooltip>
                 </QBtn>

src/pages/Claim/Card/ClaimDescriptorProxy.vue

@@ -4,6 +4,11 @@ import ClaimSummary from './ClaimSummary.vue';
 </script>
 <template>
     <QPopupProxy style="max-width: 10px">
-        <ClaimDescriptor v-if="$attrs.id" v-bind="$attrs" :summary="ClaimSummary" />
+        <ClaimDescriptor
+            v-if="$attrs.id"
+            v-bind="$attrs.id"
+            :summary="ClaimSummary"
+            :proxy-render="true"
+        />
     </QPopupProxy>
 </template>

src/pages/Claim/Card/ClaimDevelopment.vue

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

src/pages/Customer/Card/CustomerBillingData.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -6,15 +7,29 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import VnBankDetailsForm from 'src/components/common/VnBankDetailsForm.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
+import VnInputBic from 'src/components/common/VnInputBic.vue';
 
 const { t } = useI18n();
 const route = useRoute();
+
+const bankEntitiesRef = ref(null);
+
+const filter = {
+    fields: ['id', 'bic', 'name'],
+    order: 'bic ASC',
+};
+
+const getBankEntities = (data, formData) => {
+    bankEntitiesRef.value.fetch();
+    formData.bankEntityFk = Number(data.id);
+};
 </script>
 
 <template>
     <FormModel :url-update="`Clients/${route.params.id}`" auto-load model="Customer">
-        <template #form="{ data }">
+        <template #form="{ data, validate }">
             <VnRow>
                 <VnSelect
                     auto-load
@@ -27,19 +42,42 @@ const route = useRoute();
                 />
                 <VnInput :label="t('Due day')" clearable v-model="data.dueDay" />
             </VnRow>
+
             <VnRow>
-                <VnBankDetailsForm
+                <VnInputBic
-                    v-model:iban="data.iban"
+                    :label="t('IBAN')"
-                    v-model:bankEntityFk="data.bankEntityFk"
+                    v-model="data.iban"
-                    @update-bic="
+                    @update-bic="(bankEntityFk) => (data.bankEntityFk = bankEntityFk)"
-                        ({ iban, bankEntityFk }) => {
-                            if (!iban || !bankEntityFk) return;
-                            data.iban = iban;
-                            data.bankEntityFk = bankEntityFk;
-                        }
-                    "
                 />
+                <VnSelectDialog
+                    :label="t('Swift / BIC')"
+                    ref="bankEntitiesRef"
+                    :filter="filter"
+                    auto-load
+                    url="BankEntities"
+                    :acls="[{ model: 'BankEntity', props: '*', accessType: 'WRITE' }]"
+                    :rules="validate('Worker.bankEntity')"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="data.bankEntityFk"
+                >
+                    <template #form>
+                        <CreateBankEntityForm
+                            @on-data-saved="getBankEntities($event, data)"
+                        />
+                    </template>
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection v-if="scope.opt">
+                                <QItemLabel>{{ scope.opt.bic }} </QItemLabel>
+                                <QItemLabel caption> {{ scope.opt.name }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectDialog>
             </VnRow>
+
             <VnRow>
                 <QCheckbox :label="t('Received LCR')" v-model="data.hasLcr" />
                 <QCheckbox :label="t('VNL core received')" v-model="data.hasCoreVnl" />

src/pages/Customer/Notifications/CustomerNotifications.vue

@@ -100,9 +100,6 @@ const columns = computed(() => [
             'row-key': 'id',
             selection: 'multiple',
         }"
-        :multi-check="{
-            expand: true,
-        }"
         v-model:selected="selected"
         :right-search="true"
         :columns="columns"

src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue

@@ -98,9 +98,7 @@ onMounted(async () => {
     <QBtn color="primary" icon="show_chart" :disable="!selectedRows">
         <QPopupProxy ref="popupProxyRef">
             <QCard class="column q-pa-md">
-                <span class="text-body1 q-mb-sm">{{
+                <span class="text-body1 q-mb-sm">{{ t('Campaign consumption') }}</span>
-                    t('Campaign consumption', { rows: $props.clients.length })
-                }}</span>
                 <VnRow>
                     <VnSelect
                         :options="moreFields"
@@ -142,13 +140,12 @@ onMounted(async () => {
             valentinesDay: Valentine's Day
             mothersDay: Mother's Day
             allSaints: All Saints' Day
-        Campaign consumption: Campaign consumption ({rows})
     es:
         params:
             valentinesDay: Día de San Valentín
             mothersDay: Día de la Madre
             allSaints: Día de Todos los Santos
-        Campaign consumption: Consumo campaña ({rows})
+        Campaign consumption: Consumo campaña
         Campaign: Campaña
         From: Desde
         To: Hasta

src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue

@@ -90,6 +90,7 @@ 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,6 +187,7 @@ 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,6 +51,7 @@ 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/ItemDescriptorProxy.vue

@@ -30,6 +30,7 @@ const $props = defineProps({
             :dated="dated"
             :sale-fk="saleFk"
             :warehouse-fk="warehouseFk"
+            :proxy-render="true"
         />
     </QPopupProxy>
 </template>

src/pages/Item/Card/ItemTags.vue

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

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

@@ -4,6 +4,11 @@ import ParkingSummary from './ParkingSummary.vue';
 </script>
 <template>
     <QPopupProxy style="max-width: 10px">
-        <ParkingDescriptor v-if="$attrs.id" v-bind="$attrs" :summary="ParkingSummary" />
+        <ParkingDescriptor
+            v-if="$attrs.id"
+            v-bind="$attrs.id"
+            :summary="ParkingSummary"
+            :proxy-render="true"
+        />
     </QPopupProxy>
 </template>

src/pages/Supplier/Card/SupplierAccounts.vue

@@ -7,11 +7,12 @@ import FetchData from 'components/FetchData.vue';
 import CrudModel from 'components/CrudModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 import { useQuasar } from 'quasar';
-import VnBankDetailsForm from 'src/components/common/VnBankDetailsForm.vue';
 
 const { t } = useI18n();
 const { notify } = useNotify();
@@ -25,6 +26,11 @@ const wireTransferFk = ref(null);
 const bankEntitiesOptions = ref([]);
 const filteredBankEntitiesOptions = ref([]);
 
+const onBankEntityCreated = async (dataSaved, rowData) => {
+    await bankEntitiesRef.value.fetch();
+    rowData.bankEntityFk = dataSaved.id;
+};
+
 const onChangesSaved = async () => {
     if (supplier.value.payMethodFk !== wireTransferFk.value)
         quasar
@@ -50,6 +56,23 @@ const setWireTransfer = async () => {
     await axios.patch(`Suppliers/${route.params.id}`, params);
     notify('globals.dataSaved', 'positive');
 };
+
+function findBankFk(value, row) {
+    row.bankEntityFk = null;
+    if (!value) return;
+
+    const bankEntityFk = bankEntitiesOptions.value.find((b) => b.id == value.slice(4, 8));
+    if (bankEntityFk) row.bankEntityFk = bankEntityFk.id;
+}
+
+function bankEntityFilter(val) {
+    const needle = val.toLowerCase();
+    filteredBankEntitiesOptions.value = bankEntitiesOptions.value.filter(
+        (bank) =>
+            bank.bic.toLowerCase().startsWith(needle) ||
+            bank.name.toLowerCase().includes(needle),
+    );
+}
 </script>
 <template>
     <FetchData
@@ -95,16 +118,47 @@ const setWireTransfer = async () => {
                     :key="index"
                     class="row q-gutter-md q-mb-md"
                 >
-                    <VnBankDetailsForm
+                    <VnInput
-                        v-model:iban="row.iban"
+                        :label="t('supplier.accounts.iban')"
-                        v-model:bankEntityFk="row.bankEntityFk"
+                        v-model="row.iban"
-                        @update-bic="
+                        @update:model-value="(value) => findBankFk(value, row)"
-                            ({ iban, bankEntityFk }) => {
+                        :required="true"
-                                row.iban = iban;
+                    >
-                                row.bankEntityFk = bankEntityFk;
+                        <template #append>
-                            }
+                            <QIcon name="info" class="cursor-info">
-                        "
+                                <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
-                    />
+                            </QIcon>
+                        </template>
+                    </VnInput>
+                    <VnSelectDialog
+                        :label="t('worker.create.bankEntity')"
+                        v-model="row.bankEntityFk"
+                        :options="filteredBankEntitiesOptions"
+                        :filter-fn="bankEntityFilter"
+                        option-label="bic"
+                        hide-selected
+                        :required="true"
+                        :roles-allowed-to-create="['financial']"
+                    >
+                        <template #form>
+                            <CreateBankEntityForm
+                                @on-data-saved="
+                                    (_, requestResponse) =>
+                                        onBankEntityCreated(requestResponse, row)
+                                "
+                            />
+                        </template>
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection v-if="scope.opt">
+                                    <QItemLabel
+                                        >{{ scope.opt.bic }}
+                                        {{ scope.opt.name }}</QItemLabel
+                                    >
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectDialog>
                     <VnInput
                         :label="t('supplier.accounts.beneficiary')"
                         v-model="row.beneficiary"

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

@@ -25,9 +25,7 @@ const { validate } = useValidator();
 const { notify } = useNotify();
 const router = useRouter();
 const { t } = useI18n();
-const canEditZone = useAcl().hasAny([
+const canEditZone = useAcl().hasAcl('Ticket', 'editZone', 'WRITE');
-    { model: 'Ticket', props: 'editZone', accessType: 'WRITE' },
-]);
 
 const agencyFetchRef = ref();
 const warehousesOptions = ref([]);
@@ -70,20 +68,15 @@ async function getDate(query, params) {
     for (const param in params) {
         if (!params[param]) return;
     }
+
+    formData.value.zoneFk = null;
     zonesOptions.value = [];
     const { data } = await axios.get(query, { params });
     if (!data) return notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
 
     formData.value.zoneFk = data.zoneFk;
-    formData.value.landed = data.landed;
+    if (data.landed) formData.value.landed = data.landed;
-    const shippedDate = new Date(params.shipped);
+    if (data.shipped) formData.value.shipped = data.shipped;
-    const landedDate = new Date(data.hour);
-    shippedDate.setHours(
-        landedDate.getHours(),
-        landedDate.getMinutes(),
-        landedDate.getSeconds(),
-    );
-    formData.value.shipped = shippedDate.toISOString();
 }
 
 const onChangeZone = async (zoneId) => {
@@ -132,7 +125,6 @@ const addressId = computed({
             formData.value.addressFk = val;
             onChangeAddress(val);
             getShipped({
-                shipped: formData.value?.shipped,
                 landed: formData.value?.landed,
                 addressFk: val,
                 agencyModeFk: formData.value?.agencyModeFk,
@@ -425,14 +417,6 @@ async function getZone(options) {
                 :rules="validate('ticketList.shipped')"
                 @update:model-value="setShipped"
             />
-            <VnInputTime
-                :label="t('basicData.shippedHour')"
-                v-model="formData.shipped"
-                :required="true"
-                :rules="validate('basicData.shippedHour')"
-                disabled
-                @update:model-value="setShipped"
-            />
             <VnInputDate
                 :label="t('basicData.landed')"
                 v-model="formData.landed"

src/pages/Ticket/Card/ExpeditionNewTicket.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -29,29 +30,31 @@ const { t } = useI18n();
 const router = useRouter();
 const { notify } = useNotify();
 
+const newTicketFormData = reactive({});
 const date = new Date();
 
-async function createTicket(formData) {
+const createTicket = async () => {
     const expeditionIds = $props.selectedExpeditions.map((expedition) => expedition.id);
     const params = {
         clientId: $props.ticket.clientFk,
-        landed: formData.landed,
+        landed: newTicketFormData.landed,
         warehouseId: $props.ticket.warehouseFk,
         addressId: $props.ticket.addressFk,
         agencyModeId: $props.ticket.agencyModeFk,
-        routeId: formData.routeFk,
+        routeId: newTicketFormData.routeFk,
         expeditionIds: expeditionIds,
     };
+
     const { data } = await axios.post('Expeditions/moveExpeditions', params);
     notify(t('globals.dataSaved'), 'positive');
     router.push({ name: 'TicketSummary', params: { id: data.id } });
-}
+};
 </script>
 
 <template>
     <FormModelPopup
         model="expeditionNewTicket"
-        :form-initial-data="{}"
+        :form-initial-data="newTicketFormData"
         :save-fn="createTicket"
     >
         <template #form-inputs="{ data }">

src/pages/Ticket/Card/TicketNotes.vue

@@ -55,75 +55,73 @@ async function handleSave(e) {
         auto-load
         url="ObservationTypes"
     />
-    <div class="full-width flex justify-center">
+    <div class="flex justify-center">
-        <QPage class="card-width q-pa-lg">
+        <CrudModel
-            <CrudModel
+            ref="ticketNotesCrudRef"
-                class="fit"
+            data-key="TicketNotes"
-                ref="ticketNotesCrudRef"
+            url="TicketObservations"
-                data-key="TicketNotes"
+            model="TicketNotes"
-                url="TicketObservations"
+            :filter="crudModelFilter"
-                model="TicketNotes"
+            :data-required="crudModelRequiredData"
-                :filter="crudModelFilter"
+            :default-remove="false"
-                :data-required="crudModelRequiredData"
+            auto-load
-                :default-remove="false"
+            style="max-width: 800px"
-                auto-load
+        >
-            >
+            <template #body="{ rows }">
-                <template #body="{ rows }">
+                <QCard class="q-px-lg q-py-md">
-                    <QCard class="q-px-lg q-py-md">
+                    <div
-                        <div
+                        v-for="(row, index) in rows"
-                            v-for="(row, index) in rows"
+                        :key="index"
-                            :key="index"
+                        class="q-mb-md row q-gutter-x-md"
-                            class="q-mb-md row items-center q-gutter-x-md"
+                    >
+                        <VnSelect
+                            :label="t('ticketNotes.observationType')"
+                            :options="observationTypes"
+                            hide-selected
+                            option-label="description"
+                            option-value="id"
+                            v-model="row.observationTypeFk"
+                            :disable="!!row.id"
+                            data-cy="ticketNotesObservationType"
+                        />
+                        <VnInput
+                            :label="t('basicData.description')"
+                            v-model="row.description"
+                            class="col"
+                            @keydown.enter.stop="handleSave"
+                            autogrow
+                            data-cy="ticketNotesDescription"
+                        />
+                        <QIcon
+                            name="delete"
+                            size="sm"
+                            class="cursor-pointer"
+                            color="primary"
+                            @click="handleDelete(row)"
+                            data-cy="ticketNotesRemoveNoteBtn"
                         >
-                            <VnSelect
+                            <QTooltip>
-                                :label="t('ticketNotes.observationType')"
+                                {{ t('ticketNotes.removeNote') }}
-                                :options="observationTypes"
+                            </QTooltip>
-                                hide-selected
+                        </QIcon>
-                                option-label="description"
+                    </div>
-                                option-value="id"
+                    <VnRow v-if="observationTypes.length > rows.length">
-                                v-model="row.observationTypeFk"
+                        <QBtn
-                                :disable="!!row.id"
+                            icon="add_circle"
-                                data-cy="ticketNotesObservationType"
+                            v-shortcut="'+'"
-                            />
+                            flat
-                            <VnInput
+                            class="fill-icon-on-hover q-ml-md"
-                                :label="t('basicData.description')"
+                            color="primary"
-                                v-model="row.description"
+                            @click="ticketNotesCrudRef.insert()"
-                                class="col"
+                            data-cy="ticketNotesAddNoteBtn"
-                                @keydown.enter.stop="handleSave"
+                        >
-                                autogrow
+                            <QTooltip>
-                                data-cy="ticketNotesDescription"
+                                {{ t('ticketNotes.addNote') }}
-                            />
+                            </QTooltip>
-                            <QIcon
+                        </QBtn>
-                                name="delete"
+                    </VnRow>
-                                size="sm"
+                </QCard>
-                                class="cursor-pointer"
+            </template>
-                                color="primary"
+        </CrudModel>
-                                @click="handleDelete(row)"
-                                data-cy="ticketNotesRemoveNoteBtn"
-                            >
-                                <QTooltip>
-                                    {{ t('ticketNotes.removeNote') }}
-                                </QTooltip>
-                            </QIcon>
-                        </div>
-                        <VnRow v-if="observationTypes.length > rows.length">
-                            <QBtn
-                                icon="add_circle"
-                                v-shortcut="'+'"
-                                flat
-                                class="fill-icon-on-hover q-ml-md"
-                                color="primary"
-                                @click="ticketNotesCrudRef.insert()"
-                                data-cy="ticketNotesAddNoteBtn"
-                            >
-                                <QTooltip>
-                                    {{ t('ticketNotes.addNote') }}
-                                </QTooltip>
-                            </QBtn>
-                        </VnRow>
-                    </QCard>
-                </template>
-            </CrudModel>
-        </QPage>
     </div>
 </template>

src/pages/Ticket/Card/TicketPackage.vue

@@ -24,10 +24,10 @@ const crudModelFilter = reactive({
     where: { ticketFk: route.params.id },
 });
 
-const crudModelRequiredData = computed(() => ({
+const crudModelDefaultData = computed(() => ({
+    created: Date.vnNew(),
     packagingFk: null,
     quantity: 0,
-    created: Date.vnNew(),
     ticketFk: route.params.id,
 }));
 
@@ -49,95 +49,88 @@ watch(
     <FetchData
         @on-fetch="(data) => (listPackagingsOptions = data)"
         auto-load
+        :filter="{ fields: ['packagingFk', 'name'], order: 'name ASC' }"
         url="Packagings/listPackaging"
-        :filter="{
-            fields: ['packagingFk', 'name'],
-            order: ['name ASC'],
-        }"
     />
-    <div class="full-width flex justify-center">
+    <div class="flex justify-center">
-        <QPage class="card-width q-pa-lg">
+        <CrudModel
-            <CrudModel
+            ref="ticketPackagingsCrudRef"
-                ref="ticketPackagingsCrudRef"
+            data-key="TicketPackagings"
-                data-key="TicketPackagings"
+            url="TicketPackagings"
-                url="TicketPackagings"
+            model="TicketPackagings"
-                model="TicketPackagings"
+            :filter="crudModelFilter"
-                :filter="crudModelFilter"
+            :data-default="crudModelDefaultData"
-                :data-required="crudModelRequiredData"
+            :default-remove="false"
-                :default-remove="false"
+            auto-load
-                auto-load
+            style="max-width: 800px"
-            >
+        >
-                <template #body="{ rows, validate }">
+            <template #body="{ rows, validate }">
-                    <QCard class="q-px-lg q-py-md">
+                <QCard class="q-px-lg q-py-md">
-                        <div
+                    <div
-                            v-for="(row, index) in rows"
+                        v-for="(row, index) in rows"
-                            :key="index"
+                        :key="index"
-                            class="q-mb-md row items-center q-gutter-x-md"
+                        class="q-mb-md row items-center q-gutter-x-md"
+                    >
+                        <VnSelect
+                            :label="t('package.package')"
+                            :options="listPackagingsOptions"
+                            hide-selected
+                            option-label="name"
+                            option-value="packagingFk"
+                            v-model="row.packagingFk"
                         >
-                            <VnSelect
+                            <template #option="scope">
-                                :label="t('package.package')"
+                                <QItem v-bind="scope.itemProps">
-                                :options="listPackagingsOptions"
+                                    <QItemSection>
-                                hide-selected
+                                        <QItemLabel>
-                                option-label="name"
+                                            {{ scope.opt?.name }}
-                                option-value="packagingFk"
+                                        </QItemLabel>
-                                v-model="row.packagingFk"
+                                        <QItemLabel caption>
-                            >
+                                            #{{ scope.opt?.itemFk }}
-                                <template #option="scope">
+                                        </QItemLabel>
-                                    <QItem v-bind="scope.itemProps">
+                                    </QItemSection>
-                                        <QItemSection>
+                                </QItem>
-                                            <QItemLabel>
+                            </template>
-                                                {{ scope.opt?.name }}
+                        </VnSelect>
-                                            </QItemLabel>
+                        <VnInput
-                                            <QItemLabel caption>
+                            :label="t('basicData.quantity')"
-                                                #{{ scope.opt?.itemFk }}
+                            v-model.number="row.quantity"
-                                            </QItemLabel>
+                            class="col"
-                                        </QItemSection>
+                            type="number"
-                                    </QItem>
+                            min="1"
-                                </template>
+                            :required="true"
-                            </VnSelect>
+                            @update:model-value="handleInputQuantityClear(row)"
-                            <VnInput
+                            :rules="validate('TicketPackaging.quantity')"
-                                :label="t('basicData.quantity')"
+                        />
-                                v-model.number="row.quantity"
+                        <VnInputDate :label="t('package.added')" v-model="row.created" />
-                                class="col"
+                        <QIcon
-                                type="number"
+                            name="delete"
-                                min="1"
+                            size="sm"
-                                :required="true"
+                            class="cursor-pointer"
-                                @update:model-value="handleInputQuantityClear(row)"
+                            color="primary"
-                                :rules="validate('TicketPackaging.quantity')"
+                            @click="ticketPackagingsCrudRef.remove([row])"
-                            />
+                        >
-                            <VnInputDate
+                            <QTooltip>
-                                :label="t('package.added')"
+                                {{ t('package.removePackage') }}
-                                v-model="row.created"
+                            </QTooltip>
-                            />
+                        </QIcon>
-                            <QIcon
+                    </div>
-                                name="delete"
+                    <VnRow>
-                                size="sm"
+                        <QBtn
-                                class="cursor-pointer"
+                            icon="add_circle"
-                                color="primary"
+                            v-shortcut="'+'"
-                                @click="ticketPackagingsCrudRef.remove([row])"
+                            flat
-                            >
+                            class="fill-icon-on-hover q-ml-md"
-                                <QTooltip>
+                            color="primary"
-                                    {{ t('package.removePackage') }}
+                            @click="ticketPackagingsCrudRef.insert()"
-                                </QTooltip>
+                        >
-                            </QIcon>
+                            <QTooltip>
-                        </div>
+                                {{ t('package.addPackage') }}
-                        <VnRow>
+                            </QTooltip>
-                            <QBtn
+                        </QBtn>
-                                icon="add_circle"
+                    </VnRow>
-                                v-shortcut="'+'"
+                </QCard>
-                                flat
+            </template>
-                                class="fill-icon-on-hover q-ml-md"
+        </CrudModel>
-                                color="primary"
-                                @click="ticketPackagingsCrudRef.insert()"
-                            >
-                                <QTooltip>
-                                    {{ t('package.addPackage') }}
-                                </QTooltip>
-                            </QBtn>
-                        </VnRow>
-                    </QCard>
-                </template>
-            </CrudModel>
-        </QPage>
     </div>
 </template>

src/pages/Ticket/Card/TicketSale.vue

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

src/pages/Ticket/Negative/TicketLackList.vue

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

src/pages/Ticket/TicketAdvance.vue

@@ -385,12 +385,7 @@ watch(
         if (!$el) return;
         const head = $el.querySelector('thead');
         const firstRow = $el.querySelector('thead > tr');
-        const headSelectionCol = $el.querySelector(
+
-            'thead tr.bg-header th.q-table--col-auto-width',
-        );
-        if (headSelectionCol) {
-            headSelectionCol.classList.add('horizontal-separator');
-        }
         const newRow = document.createElement('tr');
         destinationElRef.value = document.createElement('th');
         originElRef.value = document.createElement('th');
@@ -399,8 +394,8 @@ watch(
         destinationElRef.value.classList.add('text-uppercase', 'color-vn-label');
         originElRef.value.classList.add('text-uppercase', 'color-vn-label');
 
-        destinationElRef.value.setAttribute('colspan', '10');
+        destinationElRef.value.setAttribute('colspan', '7');
-        originElRef.value.setAttribute('colspan', '10');
+        originElRef.value.setAttribute('colspan', '9');
 
         destinationElRef.value.textContent = `${t(
             'advanceTickets.destination',
@@ -495,6 +490,8 @@ watch(
                 selection: 'multiple',
             }"
             v-model:selected="selectedTickets"
+            :pagination="{ rowsPerPage: 0 }"
+            :no-data-label="$t('globals.noResults')"
             :right-search="false"
             :order="['futureTotalWithVat ASC']"
             auto-load

src/pages/Worker/Card/WorkerBalance.vue

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

src/pages/Worker/Card/WorkerCard.vue

@@ -4,11 +4,9 @@ import VnCard from 'src/components/common/VnCard.vue';
 </script>
 <template>
     <VnCard
-        :data-key="$attrs['data-key'] ?? 'Worker'"
+        data-key="Worker"
         url="Workers/summary"
         :id-in-where="true"
         :descriptor="WorkerDescriptor"
-        v-bind="$attrs"
-        v-on="$attrs"
     />
 </template>

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import EntityDescriptor from 'src/components/ui/EntityDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import VnChangePassword from 'src/components/common/VnChangePassword.vue';
@@ -10,8 +11,6 @@ import VnImg from 'src/components/ui/VnImg.vue';
 import EditPictureForm from 'components/EditPictureForm.vue';
 import WorkerDescriptorMenu from './WorkerDescriptorMenu.vue';
 import DepartmentDescriptorProxy from 'src/pages/Worker/Department/Card/DepartmentDescriptorProxy.vue';
-import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
-import WorkerCard from './WorkerCard.vue';
 
 const $props = defineProps({
     id: {
@@ -53,17 +52,14 @@ const handlePhotoUpdated = (evt = false) => {
 };
 </script>
 <template>
-    <CardDescriptor
+    <EntityDescriptor
-        v-bind="$attrs"
         ref="cardDescriptorRef"
         :data-key="dataKey"
         :summary="$props.summary"
-        :card="WorkerCard"
+        url="Workers/summary"
-        :id="entityId"
         :filter="{ where: { id: entityId } }"
         title="user.nickname"
         @on-fetch="getIsExcluded"
-        module="Worker"
     >
         <template #menu="{ entity }">
             <WorkerDescriptorMenu
@@ -169,7 +165,7 @@ const handlePhotoUpdated = (evt = false) => {
                 </QBtn>
             </QCardActions>
         </template>
-    </CardDescriptor>
+    </EntityDescriptor>
     <VnChangePassword
         ref="changePassRef"
         :submit-fn="

src/pages/Worker/Card/WorkerFormation.vue

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

src/pages/Worker/Card/WorkerMedical.vue

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

src/pages/Worker/Card/WorkerPda.vue

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

src/pages/Worker/WorkerList.vue

@@ -10,13 +10,15 @@ import VnRadio from 'src/components/common/VnRadio.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
 import FetchData from 'src/components/FetchData.vue';
 import WorkerFilter from './WorkerFilter.vue';
 import { useState } from 'src/composables/useState';
 import axios from 'axios';
 import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 import VnSection from 'src/components/common/VnSection.vue';
-import VnBankDetailsForm from 'src/components/common/VnBankDetailsForm.vue';
+import VnInputBic from 'src/components/common/VnInputBic.vue';
 
 const { t } = useI18n();
 const tableRef = ref();
@@ -120,6 +122,12 @@ onBeforeMount(async () => {
     ).data?.payMethodFk;
 });
 
+async function handleNewBankEntity(data, resp) {
+    await bankEntitiesRef.value.fetch();
+    data.bankEntityFk = resp.id;
+    bankEntitiesOptions.value.push(resp);
+}
+
 function handleLocation(data, location) {
     const { town, code, provinceFk, countryFk } = location ?? {};
     data.postcode = code;
@@ -315,20 +323,52 @@ function generateCodeUser(worker) {
                                     (val) => !val && delete data.payMethodFk
                                 "
                             />
-                        </VnRow>
+                            <VnInputBic
-                        <VnRow>
+                                :label="t('IBAN')"
-                            <VnBankDetailsForm
+                                v-model="data.iban"
-                                v-model:iban="data.iban"
+                                :disable="data.isFreelance"
-                                v-model:bankEntityFk="data.bankEntityFk"
-                                :disable-element="data.isFreelance"
                                 @update-bic="
-                                    ({ iban, bankEntityFk }) => {
+                                    (bankEntityFk) => (data.bankEntityFk = bankEntityFk)
-                                        data.iban = iban;
-                                        data.bankEntityFk = bankEntityFk;
-                                    }
                                 "
                             />
                         </VnRow>
+                        <VnRow>
+                            <VnSelectDialog
+                                :label="t('worker.create.bankEntity')"
+                                v-model="data.bankEntityFk"
+                                :options="bankEntitiesOptions"
+                                option-label="name"
+                                option-value="id"
+                                hide-selected
+                                :acls="[
+                                    {
+                                        model: 'BankEntity',
+                                        props: '*',
+                                        accessType: 'WRITE',
+                                    },
+                                ]"
+                                :disable="data.isFreelance"
+                                :filter-options="['bic', 'name']"
+                            >
+                                <template #form>
+                                    <CreateBankEntityForm
+                                        @on-data-saved="
+                                            (_, resp) => handleNewBankEntity(data, resp)
+                                        "
+                                    />
+                                </template>
+                                <template #option="scope">
+                                    <QItem v-bind="scope.itemProps">
+                                        <QItemSection v-if="scope.opt">
+                                            <QItemLabel
+                                                >{{ scope.opt.bic }}
+                                                {{ scope.opt.name }}</QItemLabel
+                                            >
+                                        </QItemSection>
+                                    </QItem>
+                                </template>
+                            </VnSelectDialog>
+                        </VnRow>
                     </div>
                 </template>
             </VnTable>

src/pages/Zone/ZoneList.vue

@@ -189,14 +189,16 @@ const exprBuilder = (param, value) => {
             return {
                 code: { like: `%${value}%` },
             };
-        case 'id':
-        case 'price':
         case 'agencyModeFk':
             return {
-                [param]: value,
+                agencyModeFk: value,
             };
         case 'search':
             return /^\d+$/.test(value) ? { id: value } : { name: { like: `%${value}%` } };
+        case 'price':
+            return {
+                price: value,
+            };
     }
 };
 

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

@@ -54,7 +54,7 @@ describe('Handle Items FixedPrice', () => {
     });
 
     it('should edit all items', () => {
-        cy.get('.bg-header > :nth-child(1) [data-cy="vnCheckbox"]').click();
+        cy.get('.bg-header > :nth-child(1) > .q-checkbox > .q-checkbox__inner').click();
         cy.dataCy('FixedPriceToolbarEditBtn').should('not.be.disabled');
         cy.dataCy('FixedPriceToolbarEditBtn').click();
         cy.dataCy('EditFixedPriceSelectOption').type(grouping);
@@ -65,7 +65,7 @@ describe('Handle Items FixedPrice', () => {
     });
 
     it('should remove all items', () => {
-        cy.get('.bg-header > :nth-child(1) [data-cy="vnCheckbox"]').click();
+        cy.get('.bg-header > :nth-child(1) > .q-checkbox > .q-checkbox__inner').click();
         cy.dataCy('crudModelDefaultRemoveBtn').should('not.be.disabled');
         cy.dataCy('crudModelDefaultRemoveBtn').click();
         cy.dataCy('VnConfirm_confirm').click();