src/components/CreateBankEntityForm.vue

@@ -14,7 +14,7 @@ const { t } = useI18n();
 const bicInputRef = ref(null);
 const state = useState();
 
-const customer = computed(() => state.get('customer'));
+const customer = computed(() => state.get('Customer'));
 
 const countriesFilter = {
     fields: ['id', 'name', 'code'],

src/components/FormModel.vue

@@ -84,7 +84,7 @@ const $props = defineProps({
     },
     reload: {
         type: Boolean,
-        default: false,
+        default: true,
     },
     defaultTrim: {
         type: Boolean,
@@ -97,7 +97,7 @@ const $props = defineProps({
 });
 const emit = defineEmits(['onFetch', 'onDataSaved']);
 const modelValue = computed(
-    () => $props.model ?? `formModel_${route?.meta?.title ?? route.name}`
+    () => $props.model ?? `formModel_${route?.meta?.title ?? route.name}`,
 ).value;
 const componentIsRendered = ref(false);
 const arrayData = useArrayData(modelValue);
@@ -105,8 +105,8 @@ const isLoading = ref(false);
 // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
 const isResetting = ref(false);
 const hasChanges = ref(!$props.observeFormChanges);
-const originalData = ref({});
+const originalData = computed(() => state.get(modelValue));
-const formData = computed(() => state.get(modelValue));
+const formData = ref({});
 const defaultButtons = computed(() => ({
     save: {
         dataCy: 'saveDefaultBtn',
@@ -127,8 +127,6 @@ const defaultButtons = computed(() => ({
 }));
 
 onMounted(async () => {
-    originalData.value = JSON.parse(JSON.stringify($props.formInitialData ?? {}));
-
     nextTick(() => (componentIsRendered.value = true));
 
     // Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
@@ -148,7 +146,7 @@ onMounted(async () => {
                     JSON.stringify(newVal) !== JSON.stringify(originalData.value);
                 isResetting.value = false;
             },
-            { deep: true }
+            { deep: true },
         );
     }
 });
@@ -156,16 +154,24 @@ onMounted(async () => {
 if (!$props.url)
     watch(
         () => arrayData.store.data,
-        (val) => updateAndEmit('onFetch', val)
+        (val) => updateAndEmit('onFetch', val),
     );
 
+watch(
+    originalData,
+    (val) => {
+        if (val) formData.value = JSON.parse(JSON.stringify(val));
+    },
+    { immediate: true },
+);
+
 watch(
     () => [$props.url, $props.filter],
     async () => {
-        originalData.value = null;
+        state.set(modelValue, null);
         reset();
         await fetch();
-    }
+    },
 );
 
 onBeforeRouteLeave((to, from, next) => {
@@ -197,7 +203,6 @@ async function fetch() {
         updateAndEmit('onFetch', data);
     } catch (e) {
         state.set(modelValue, {});
-        originalData.value = {};
         throw e;
     }
 }
@@ -236,6 +241,7 @@ async function saveAndGo() {
 }
 
 function reset() {
+    formData.value = JSON.parse(JSON.stringify(originalData.value));
     updateAndEmit('onFetch', originalData.value);
     if ($props.observeFormChanges) {
         hasChanges.value = false;
@@ -254,13 +260,12 @@ function filter(value, update, filterOptions) {
         (ref) => {
             ref.setOptionIndex(-1);
             ref.moveOptionSelection(1, true);
-        }
+        },
     );
 }
 
 function updateAndEmit(evt, val, res) {
     state.set(modelValue, val);
-    originalData.value = val && JSON.parse(JSON.stringify(val));
     if (!$props.url) arrayData.store.data = val;
 
     emit(evt, state.get(modelValue), res);

src/components/__tests__/FormModel.spec.js

@@ -93,7 +93,7 @@ describe('FormModel', () => {
 
         it('should call axios.patch with the right data', async () => {
             const spy = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
-            const { vm } = mount({ propsData: { url, model, formInitialData } });
+            const { vm } = mount({ propsData: { url, model } });
             vm.formData.mockKey = 'newVal';
             await vm.$nextTick();
             await vm.save();
@@ -106,6 +106,7 @@ describe('FormModel', () => {
             const { vm } = mount({
                 propsData: { url, model, formInitialData, urlCreate: 'mockUrlCreate' },
             });
+            await vm.$nextTick();
             vm.formData.mockKey = 'newVal';
             await vm.$nextTick();
             await vm.save();
@@ -119,7 +120,7 @@ describe('FormModel', () => {
             });
             const spyPatch = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
             const spySaveFn = vi.spyOn(vm.$props, 'saveFn');
-
+            await vm.$nextTick();
             vm.formData.mockKey = 'newVal';
             await vm.$nextTick();
             await vm.save();

src/components/common/VnCard.vue

@@ -10,11 +10,11 @@ import LeftMenu from 'components/LeftMenu.vue';
 import RightMenu from 'components/common/RightMenu.vue';
 const props = defineProps({
     dataKey: { type: String, required: true },
-    baseUrl: { type: String, default: undefined },
+    url: { type: String, default: undefined },
-    customUrl: { type: String, default: undefined },
     filter: { type: Object, default: () => {} },
     descriptor: { type: Object, required: true },
     filterPanel: { type: Object, default: undefined },
+    idInWhere: { type: Boolean, default: false },
     searchDataKey: { type: String, default: undefined },
     searchbarProps: { type: Object, default: undefined },
     redirectOnError: { type: Boolean, default: false },
@@ -23,25 +23,20 @@ const props = defineProps({
 const stateStore = useStateStore();
 const route = useRoute();
 const router = useRouter();
-const url = computed(() => {
-    if (props.baseUrl) {
-        return `${props.baseUrl}/${route.params.id}`;
-    }
-    return props.customUrl;
-});
 const searchRightDataKey = computed(() => {
     if (!props.searchDataKey) return route.name;
     return props.searchDataKey;
 });
+
 const arrayData = useArrayData(props.dataKey, {
-    url: url.value,
+    url: props.url,
-    filter: props.filter,
+    userFilter: props.filter,
+    oneRecord: true,
 });
 
 onBeforeMount(async () => {
     try {
-        if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
+        await fetch(route.params.id);
-        await arrayData.fetch({ append: false, updateRouter: false });
     } catch {
         const { matched: matches } = router.currentRoute.value;
         const { path } = matches.at(-1);
@@ -49,13 +44,17 @@ onBeforeMount(async () => {
     }
 });
 
-if (props.baseUrl) {
+onBeforeRouteUpdate(async (to, from) => {
-    onBeforeRouteUpdate(async (to, from) => {
+    const id = to.params.id;
-        if (to.params.id !== from.params.id) {
+    if (id !== from.params.id) await fetch(id, true);
-            arrayData.store.url = `${props.baseUrl}/${to.params.id}`;
+});
-            await arrayData.fetch({ append: false, updateRouter: false });
+
-        }
+async function fetch(id, append = false) {
-    });
+    const regex = /\/(\d+)/;
+    if (props.idInWhere) arrayData.store.filter.where = { id };
+    else if (!regex.test(props.url)) arrayData.store.url = `${props.url}/${id}`;
+    else arrayData.store.url = props.url.replace(regex, `/${id}`);
+    await arrayData.fetch({ append, updateRouter: false });
 }
 </script>
 <template>
@@ -83,7 +82,7 @@ if (props.baseUrl) {
         <QPage>
             <VnSubToolbar />
             <div :class="[useCardSize(), $attrs.class]">
-                <RouterView :key="route.path" />
+                <RouterView :key="$route.path" />
             </div>
         </QPage>
     </QPageContainer>

src/components/common/VnCardBeta.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { onBeforeMount, computed } from 'vue';
+import { onBeforeMount } from 'vue';
-import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
+import { useRouter, onBeforeRouteUpdate } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import useCardSize from 'src/composables/useCardSize';
@@ -9,10 +9,9 @@ import VnSubToolbar from '../ui/VnSubToolbar.vue';
 
 const props = defineProps({
     dataKey: { type: String, required: true },
-    baseUrl: { type: String, default: undefined },
+    url: { type: String, default: undefined },
-    customUrl: { type: String, default: undefined },
+    idInWhere: { type: Boolean, default: false },
     filter: { type: Object, default: () => {} },
-    userFilter: { type: Object, default: () => {} },
     descriptor: { type: Object, required: true },
     filterPanel: { type: Object, default: undefined },
     searchDataKey: { type: String, default: undefined },
@@ -21,39 +20,35 @@ const props = defineProps({
 });
 
 const stateStore = useStateStore();
-const route = useRoute();
 const router = useRouter();
-const url = computed(() => {
-    if (props.baseUrl) {
-        return `${props.baseUrl}/${route.params.id}`;
-    }
-    return props.customUrl;
-});
-
 const arrayData = useArrayData(props.dataKey, {
-    url: url.value,
+    url: props.url,
-    filter: props.filter,
+    userFilter: props.filter,
-    userFilter: props.userFilter,
+    oneRecord: true,
 });
 
 onBeforeMount(async () => {
+    const route = router.currentRoute.value;
     try {
-        if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
+        await fetch(route.params.id);
-        await arrayData.fetch({ append: false, updateRouter: false });
     } catch {
-        const { matched: matches } = router.currentRoute.value;
+        const { matched: matches } = route;
         const { path } = matches.at(-1);
         router.push({ path: path.replace(/:id.*/, '') });
     }
 });
 
-if (props.baseUrl) {
+onBeforeRouteUpdate(async (to, from) => {
-    onBeforeRouteUpdate(async (to, from) => {
+    const id = to.params.id;
-        if (to.params.id !== from.params.id) {
+    if (id !== from.params.id) await fetch(id, true);
-            arrayData.store.url = `${props.baseUrl}/${to.params.id}`;
+});
-            await arrayData.fetch({ append: false, updateRouter: false });
+
-        }
+async function fetch(id, append = false) {
-    });
+    const regex = /\/(\d+)/;
+    if (props.idInWhere) arrayData.store.filter.where = { id };
+    else if (!regex.test(props.url)) arrayData.store.url = `${props.url}/${id}`;
+    else arrayData.store.url = props.url.replace(regex, `/${id}`);
+    await arrayData.fetch({ append, updateRouter: false });
 }
 </script>
 <template>
@@ -64,6 +59,6 @@ if (props.baseUrl) {
     </Teleport>
     <VnSubToolbar />
     <div :class="[useCardSize(), $attrs.class]">
-        <RouterView :key="route.path" />
+        <RouterView :key="$route.path" />
     </div>
 </template>

src/components/ui/CardDescriptor.vue

@@ -59,10 +59,11 @@ onBeforeMount(async () => {
         url: $props.url,
         filter: $props.filter,
         skip: 0,
+        oneRecord: true,
     });
     store = arrayData.store;
     entity = computed(() => {
-        const data = (Array.isArray(store.data) ? store.data[0] : store.data) ?? {};
+        const data = store.data ?? {};
         if (data) emit('onFetch', data);
         return data;
     });
@@ -84,7 +85,7 @@ async function getData() {
     try {
         const { data } = await arrayData.fetch({ append: false, updateRouter: false });
         state.set($props.dataKey, data);
-        emit('onFetch', Array.isArray(data) ? data[0] : data);
+        emit('onFetch', data);
     } finally {
         isLoading.value = false;
     }

src/components/ui/CardSummary.vue

@@ -35,9 +35,10 @@ const arrayData = useArrayData(props.dataKey, {
     url: props.url,
     filter: props.filter,
     skip: 0,
+    oneRecord: true,
 });
 const { store } = arrayData;
-const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
+const entity = computed(() => store.data);
 const isLoading = ref(false);
 
 defineExpose({
@@ -56,7 +57,7 @@ async function fetch() {
     store.filter = props.filter ?? {};
     isLoading.value = true;
     const { data } = await arrayData.fetch({ append: false, updateRouter: false });
-    emit('onFetch', Array.isArray(data) ? data[0] : data);
+    emit('onFetch', data);
     isLoading.value = false;
 }
 </script>

src/components/ui/__tests__/CardSummary.spec.js

@@ -51,16 +51,6 @@ describe('CardSummary', () => {
         expect(vm.store.filter).toEqual('cardFilter');
     });
 
-    it('should compute entity correctly from store data', () => {
-        vm.store.data = [{ id: 1, name: 'Entity 1' }];
-        expect(vm.entity).toEqual({ id: 1, name: 'Entity 1' });
-    });
-
-    it('should handle empty data gracefully', () => {
-        vm.store.data = [];
-        expect(vm.entity).toBeUndefined();
-    });
-
     it('should respond to prop changes and refetch data', async () => {
         const newUrl = 'CardSummary/35';
         const newKey = 'cardSummaryKey/35';
@@ -72,7 +62,7 @@ describe('CardSummary', () => {
         expect(vm.store.filter).toEqual({ key: newKey });
     });
 
-    it('should return true if route path ends with /summary' , () => {
+    it('should return true if route path ends with /summary', () => {
         expect(vm.isSummary).toBe(true);
     });
-});
+});

src/composables/__tests__/useArrayData.spec.js

@@ -16,7 +16,7 @@ describe('useArrayData', () => {
         vi.clearAllMocks();
     });
 
-    it('should fetch and repalce url with new params', async () => {
+    it('should fetch and replace url with new params', async () => {
         vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [] });
 
         const arrayData = useArrayData('ArrayData', { url: 'mockUrl' });
@@ -33,11 +33,11 @@ describe('useArrayData', () => {
         });
         expect(routerReplace.path).toEqual('mockSection/list');
         expect(JSON.parse(routerReplace.query.params)).toEqual(
-            expect.objectContaining(params)
+            expect.objectContaining(params),
         );
     });
 
-    it('Should get data and send new URL without keeping parameters, if there is only one record', async () => {
+    it('should get data and send new URL without keeping parameters, if there is only one record', async () => {
         vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }] });
 
         const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
@@ -56,7 +56,7 @@ describe('useArrayData', () => {
         expect(routerPush.query).toBeUndefined();
     });
 
-    it('Should get data and send new URL keeping parameters, if you have more than one record', async () => {
+    it('should get data and send new URL keeping parameters, if you have more than one record', async () => {
         vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }, { id: 2 }] });
 
         vi.spyOn(vueRouter, 'useRoute').mockReturnValue({
@@ -95,4 +95,25 @@ describe('useArrayData', () => {
         expect(routerPush.path).toEqual('mockName/');
         expect(routerPush.query.params).toBeDefined();
     });
+
+    it('should return one record', async () => {
+        vi.spyOn(axios, 'get').mockReturnValueOnce({
+            data: [
+                { id: 1, name: 'Entity 1' },
+                { id: 2, name: 'Entity 2' },
+            ],
+        });
+        const arrayData = useArrayData('ArrayData', { url: 'mockUrl', oneRecord: true });
+        await arrayData.fetch({});
+
+        expect(arrayData.store.data).toEqual({ id: 1, name: 'Entity 1' });
+    });
+
+    it('should handle empty data gracefully if has to return one record', async () => {
+        vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [] });
+        const arrayData = useArrayData('ArrayData', { url: 'mockUrl', oneRecord: true });
+        await arrayData.fetch({});
+
+        expect(arrayData.store.data).toBeUndefined();
+    });
 });

src/composables/useArrayData.js

@@ -57,6 +57,7 @@ export function useArrayData(key, userOptions) {
             'navigate',
             'mapKey',
             'keepData',
+            'oneRecord',
         ];
         if (typeof userOptions === 'object') {
             for (const option in userOptions) {
@@ -109,7 +110,11 @@ export function useArrayData(key, userOptions) {
         store.isLoading = false;
         canceller = null;
 
-        processData(response.data, { map: !!store.mapKey, append });
+        processData(response.data, {
+            map: !!store.mapKey,
+            append,
+            oneRecord: store.oneRecord,
+        });
 
         return response;
     }
@@ -311,7 +316,11 @@ export function useArrayData(key, userOptions) {
         return { params, limit };
     }
 
-    function processData(data, { map = true, append = true }) {
+    function processData(data, { map = true, append = true, oneRecord = false }) {
+        if (oneRecord) {
+            store.data = Array.isArray(data) ? data[0] : data;
+            return;
+        }
         if (!append) {
             store.data = [];
             store.map = new Map();

src/pages/Account/AccountAliasList.vue

@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { ref, computed } from 'vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnSection from 'src/components/common/VnSection.vue';
+import exprBuilder from './Alias/AliasExprBuilder';
 
 const tableRef = ref();
 const { t } = useI18n();
@@ -31,15 +32,6 @@ const columns = computed(() => [
         create: true,
     },
 ]);
-
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'search':
-            return /^\d+$/.test(value)
-                ? { id: value }
-                : { alias: { like: `%${value}%` } };
-    }
-};
 </script>
 
 <template>

src/pages/Account/AccountExprBuilder.js

@@ -0,0 +1,18 @@
+export default (param, value) => {
+    switch (param) {
+        case 'search':
+            return /^\d+$/.test(value)
+                ? { id: value }
+                : {
+                      or: [
+                          { name: { like: `%${value}%` } },
+                          { nickname: { like: `%${value}%` } },
+                      ],
+                  };
+        case 'name':
+        case 'nickname':
+            return { [param]: { like: `%${value}%` } };
+        case 'roleFk':
+            return { [param]: value };
+    }
+};

src/pages/Account/AccountList.vue

@@ -4,15 +4,16 @@ import { computed, ref } from 'vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import exprBuilder from './AccountExprBuilder.js';
+import filter from './Card/AccountFilter.js';
 import VnSection from 'src/components/common/VnSection.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnInputPassword from 'src/components/common/VnInputPassword.vue';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
-const filter = {
+const tableRef = ref();
-    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
+
-};
 const dataKey = 'AccountList';
 const roles = ref([]);
 const columns = computed(() => [
@@ -117,25 +118,6 @@ const columns = computed(() => [
         ],
     },
 ]);
-
-function exprBuilder(param, value) {
-    switch (param) {
-        case 'search':
-            return /^\d+$/.test(value)
-                ? { id: value }
-                : {
-                      or: [
-                          { name: { like: `%${value}%` } },
-                          { nickname: { like: `%${value}%` } },
-                      ],
-                  };
-        case 'name':
-        case 'nickname':
-            return { [param]: { like: `%${value}%` } };
-        case 'roleFk':
-            return { [param]: value };
-    }
-}
 </script>
 <template>
     <FetchData url="VnRoles" @on-fetch="(data) => (roles = data)" auto-load />

src/pages/Account/Alias/AliasExprBuilder.js

@@ -0,0 +1,8 @@
+export default (param, value) => {
+    switch (param) {
+        case 'search':
+            return /^\d+$/.test(value)
+                ? { id: value }
+                : { alias: { like: `%${value}%` } };
+    }
+};

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

@@ -1,21 +1,13 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import VnCardBeta from 'components/common/VnCardBeta.vue';
 import AliasDescriptor from './AliasDescriptor.vue';
-const { t } = useI18n();
 </script>
 
 <template>
     <VnCardBeta
         data-key="Alias"
-        base-url="MailAliases"
+        url="MailAliases"
         :descriptor="AliasDescriptor"
         search-data-key="AccountAliasList"
-        :searchbar-props="{
-            url: 'MailAliases',
-            info: t('mailAlias.searchInfo'),
-            label: t('mailAlias.search'),
-            searchUrl: 'table',
-        }"
     />
 </template>

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

@@ -7,7 +7,6 @@ import { useQuasar } from 'quasar';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 
-import useCardDescription from 'src/composables/useCardDescription';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 
@@ -29,9 +28,6 @@ const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 
-const data = ref(useCardDescription());
-const setData = (entity) => (data.value = useCardDescription(entity.alias, entity.id));
-
 const removeAlias = () => {
     quasar
         .dialog({
@@ -56,10 +52,8 @@ const removeAlias = () => {
         ref="descriptor"
         :url="`MailAliases/${entityId}`"
         module="Alias"
-        @on-fetch="setData"
+        data-key="Alias"
-        data-key="aliasData"
+        title="alias"
-        :title="data.title"
-        :subtitle="data.subtitle"
     >
         <template #menu>
             <QItem v-ripple clickable @click="removeAlias()">

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

@@ -1,13 +1,11 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 
-import { useArrayData } from 'src/composables/useArrayData';
-
 const route = useRoute();
 const { t } = useI18n();
 
@@ -18,20 +16,15 @@ const $props = defineProps({
     },
 });
 
-const { store } = useArrayData('Alias');
-const alias = ref(store.data);
 const entityId = computed(() => $props.id || route.params.id);
 </script>
 
 <template>
-    <CardSummary
+    <CardSummary ref="summary" :url="`MailAliases/${entityId}`" data-key="Alias">
-        ref="summary"
+        <template #header="{ entity: alias }">
-        :url="`MailAliases/${entityId}`"
+            {{ alias.id }} - {{ alias.alias }}
-        @on-fetch="(data) => (alias = data)"
+        </template>
-        data-key="MailAliasesSummary"
+        <template #body="{ entity: alias }">
-    >
-        <template #header> {{ alias.id }} - {{ alias.alias }} </template>
-        <template #body>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
                     <router-link

src/pages/Account/Card/AccountBasicData.vue

@@ -1,46 +1,20 @@
 <script setup>
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnSelectEnum from 'src/components/common/VnSelectEnum.vue';
 import FormModel from 'components/FormModel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import { ref, watch } from 'vue';
-
-const route = useRoute();
-const { t } = useI18n();
-const formModelRef = ref(null);
-
-const accountFilter = {
-    where: { id: route.params.id },
-    fields: ['id', 'email', 'nickname', 'name', 'accountStateFk', 'packages', 'pickup'],
-    include: [],
-};
-
-watch(
-    () => route.params.id,
-    () => formModelRef.value.reset()
-);
 </script>
 <template>
-    <FormModel
+    <FormModel :url-update="`VnUsers/${$route.params.id}/update-user`" model="Account">
-        ref="formModelRef"
-        url="VnUsers/preview"
-        :url-update="`VnUsers/${route.params.id}/update-user`"
-        :filter="accountFilter"
-        model="Accounts"
-        auto-load
-        @on-data-saved="formModelRef.fetch()"
-    >
         <template #form="{ data }">
             <div class="q-gutter-y-sm">
-                <VnInput v-model="data.name" :label="t('account.card.nickname')" />
+                <VnInput v-model="data.name" :label="$t('account.card.nickname')" />
-                <VnInput v-model="data.nickname" :label="t('account.card.alias')" />
+                <VnInput v-model="data.nickname" :label="$t('account.card.alias')" />
-                <VnInput v-model="data.email" :label="t('globals.params.email')" />
+                <VnInput v-model="data.email" :label="$t('globals.params.email')" />
                 <VnSelect
                     url="Languages"
                     v-model="data.lang"
-                    :label="t('account.card.lang')"
+                    :label="$t('account.card.lang')"
                     option-value="code"
                     option-label="code"
                 />
@@ -49,7 +23,7 @@ watch(
                     table="user"
                     column="twoFactor"
                     v-model="data.twoFactor"
-                    :label="t('account.card.twoFactor')"
+                    :label="$t('account.card.twoFactor')"
                     option-value="code"
                     option-label="code"
                 />

src/pages/Account/Card/AccountCard.vue

@@ -1,8 +1,14 @@
 <script setup>
 import VnCardBeta from 'components/common/VnCardBeta.vue';
 import AccountDescriptor from './AccountDescriptor.vue';
+import filter from './AccountFilter.js';
 </script>
-
 <template>
-    <VnCardBeta data-key="AccountId" :descriptor="AccountDescriptor" />
+    <VnCardBeta
+        url="VnUsers/preview"
+        :id-in-where="true"
+        data-key="Account"
+        :descriptor="AccountDescriptor"
+        :filter="filter"
+    />
 </template>

src/pages/Account/Card/AccountDescriptor.vue

@@ -1,36 +1,18 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import useCardDescription from 'src/composables/useCardDescription';
 import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
+import filter from './AccountFilter.js';
 import useHasAccount from 'src/composables/useHasAccount.js';
 
-const $props = defineProps({
+const $props = defineProps({ id: { type: Number, default: null } });
-    id: {
-        type: Number,
-        required: false,
-        default: null,
-    },
-});
 
 const route = useRoute();
-const { t } = useI18n();
+const entityId = computed(() => $props.id || route.params.id);
-const entityId = computed(() => {
-    return $props.id || route.params.id;
-});
-const data = ref(useCardDescription());
 const hasAccount = ref();
-const setData = (entity) => (data.value = useCardDescription(entity.nickname, entity.id));
-
-const filter = {
-    where: { id: entityId },
-    fields: ['id', 'nickname', 'name', 'role'],
-    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
-};
 
 onMounted(async () => {
     hasAccount.value = await useHasAccount(entityId.value);
@@ -43,10 +25,8 @@ onMounted(async () => {
         :url="`VnUsers/preview`"
         :filter="filter"
         module="Account"
-        @on-fetch="setData"
+        data-key="Account"
-        data-key="AccountId"
+        title="nickname"
-        :title="data.title"
-        :subtitle="data.subtitle"
     >
         <template #menu>
             <AccountDescriptorMenu :entity-id="entityId" />
@@ -62,7 +42,7 @@ onMounted(async () => {
                                 <QIcon name="vn:claims" />
                             </div>
                             <div class="text-grey-5" style="opacity: 0.4">
-                                {{ t('account.imageNotFound') }}
+                                {{ $t('account.imageNotFound') }}
                             </div>
                         </div>
                     </div>
@@ -70,8 +50,8 @@ onMounted(async () => {
             </VnImg>
         </template>
         <template #body="{ entity }">
-            <VnLv :label="t('account.card.nickname')" :value="entity.name" />
+            <VnLv :label="$t('account.card.nickname')" :value="entity.name" />
-            <VnLv :label="t('account.card.role')" :value="entity.role.name" />
+            <VnLv :label="$t('account.card.role')" :value="entity.role?.name" />
         </template>
         <template #actions="{ entity }">
             <QCardActions class="q-gutter-x-md">
@@ -84,7 +64,7 @@ onMounted(async () => {
                     size="sm"
                     class="fill-icon"
                 >
-                    <QTooltip>{{ t('account.card.deactivated') }}</QTooltip>
+                    <QTooltip>{{ $t('account.card.deactivated') }}</QTooltip>
                 </QIcon>
                 <QIcon
                     color="primary"
@@ -95,7 +75,7 @@ onMounted(async () => {
                     size="sm"
                     class="fill-icon"
                 >
-                    <QTooltip>{{ t('account.card.enabled') }}</QTooltip>
+                    <QTooltip>{{ $t('account.card.enabled') }}</QTooltip>
                 </QIcon>
             </QCardActions>
         </template>

src/pages/Account/Card/AccountDescriptorMenu.vue

@@ -29,7 +29,7 @@ const router = useRouter();
 const state = useState();
 const user = state.getUser();
 const { notify } = useQuasar();
-const account = computed(() => useArrayData('AccountId').store.data[0]);
+const account = computed(() => useArrayData('Account').store.data[0]);
 account.value.hasAccount = hasAccount.value;
 const entityId = computed(() => +route.params.id);
 const hasitManagementAccess = ref();
@@ -152,7 +152,7 @@ onMounted(() => {
             openConfirmationModal(
                 t('account.card.actions.disableAccount.title'),
                 t('account.card.actions.disableAccount.subtitle'),
-                () => deleteAccount()
+                () => deleteAccount(),
             )
         "
     >
@@ -177,7 +177,7 @@ onMounted(() => {
             openConfirmationModal(
                 t('account.card.actions.enableAccount.title'),
                 t('account.card.actions.enableAccount.subtitle'),
-                () => updateStatusAccount(true)
+                () => updateStatusAccount(true),
             )
         "
     >
@@ -191,7 +191,7 @@ onMounted(() => {
             openConfirmationModal(
                 t('account.card.actions.disableAccount.title'),
                 t('account.card.actions.disableAccount.subtitle'),
-                () => updateStatusAccount(false)
+                () => updateStatusAccount(false),
             )
         "
     >
@@ -206,7 +206,7 @@ onMounted(() => {
             openConfirmationModal(
                 t('account.card.actions.activateUser.title'),
                 t('account.card.actions.activateUser.title'),
-                () => updateStatusUser(true)
+                () => updateStatusUser(true),
             )
         "
     >
@@ -220,7 +220,7 @@ onMounted(() => {
             openConfirmationModal(
                 t('account.card.actions.deactivateUser.title'),
                 t('account.card.actions.deactivateUser.title'),
-                () => updateStatusUser(false)
+                () => updateStatusUser(false),
             )
         "
     >

src/pages/Account/Card/AccountFilter.js

@@ -0,0 +1,3 @@
+export default {
+    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
+};

src/pages/Account/Card/AccountSummary.vue

@@ -1,58 +1,41 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-
+import filter from './AccountFilter.js';
-import { useArrayData } from 'src/composables/useArrayData';
 import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
 
+const $props = defineProps({ id: { type: Number, default: 0 } });
+
 const route = useRoute();
-const { t } = useI18n();
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        default: 0,
-    },
-});
-const { store } = useArrayData('Account');
-const account = ref(store.data);
-
 const entityId = computed(() => $props.id || route.params.id);
-const filter = {
-    where: { id: entityId },
-    fields: ['id', 'nickname', 'name', 'role'],
-    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
-};
 </script>
 
 <template>
     <CardSummary
-        data-key="AccountId"
+        data-key="Account"
+        ref="AccountSummary"
         url="VnUsers/preview"
         :filter="filter"
-        @on-fetch="(data) => (account = data)"
     >
-        <template #header>{{ account.id }} - {{ account.nickname }}</template>
+        <template #header="{ entity }">{{ entity.id }} - {{ entity.nickname }}</template>
-        <template #menu="">
+        <template #menu>
             <AccountDescriptorMenu :entity-id="entityId" />
         </template>
-        <template #body>
+        <template #body="{ entity }">
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
                     <router-link
                         :to="{ name: 'AccountBasicData', params: { id: entityId } }"
                         class="header header-link"
                     >
-                        {{ t('globals.pageTitles.basicData') }}
+                        {{ $t('globals.pageTitles.basicData') }}
                         <QIcon name="open_in_new" />
                     </router-link>
                 </QCardSection>
-                <VnLv :label="t('account.card.nickname')" :value="account.name" />
+                <VnLv :label="$t('account.card.nickname')" :value="entity.name" />
-                <VnLv :label="t('account.card.role')" :value="account.role.name" />
+                <VnLv :label="$t('account.card.role')" :value="entity.role?.name" />
             </QCard>
         </template>
     </CardSummary>

src/pages/Account/Role/AccountRoles.vue

@@ -5,6 +5,7 @@ import VnTable from 'components/VnTable/VnTable.vue';
 import { useRoute } from 'vue-router';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import RoleSummary from './Card/RoleSummary.vue';
+import exprBuilder from './RoleExprBuilder.js';
 import VnSection from 'src/components/common/VnSection.vue';
 
 const route = useRoute();
@@ -66,24 +67,7 @@ const columns = computed(() => [
         ],
     },
 ]);
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'search':
-            return /^\d+$/.test(value)
-                ? { id: value }
-                : {
-                      or: [
-                          { name: { like: `%${value}%` } },
-                          { nickname: { like: `%${value}%` } },
-                      ],
-                  };
-        case 'name':
-        case 'description':
-            return { [param]: { like: `%${value}%` } };
-    }
-};
 </script>
-
 <template>
     <VnSection
         :data-key="dataKey"

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

@@ -1,24 +1,16 @@
 <script setup>
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-const route = useRoute();
-const { t } = useI18n();
 </script>
 <template>
-    <FormModel :url="`VnRoles/${route.params.id}`" model="VnRole" auto-load>
+    <FormModel model="Role" auto-load>
         <template #form="{ data }">
             <VnRow>
-                <div class="col">
+                <VnInput v-model="data.name" :label="$t('globals.name')" />
-                    <VnInput v-model="data.name" :label="t('globals.name')" />
-                </div>
             </VnRow>
             <VnRow>
-                <div class="col">
+                <VnInput v-model="data.description" :label="$t('role.description')" />
-                    <VnInput v-model="data.description" :label="t('role.description')" />
-                </div>
             </VnRow>
         </template>
     </FormModel>

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

@@ -3,5 +3,10 @@ import VnCardBeta from 'components/common/VnCardBeta.vue';
 import RoleDescriptor from './RoleDescriptor.vue';
 </script>
 <template>
-    <VnCardBeta data-key="Role" :descriptor="RoleDescriptor" />
+    <VnCardBeta
+        url="VnRoles"
+        data-key="Role"
+        :id-in-where="true"
+        :descriptor="RoleDescriptor"
+    />
 </template>

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

@@ -1,10 +1,9 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import useCardDescription from 'src/composables/useCardDescription';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 const $props = defineProps({
@@ -26,11 +25,6 @@ const { t } = useI18n();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-const data = ref(useCardDescription());
-const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id));
-const filter = {
-    where: { id: entityId },
-};
 const removeRole = async () => {
     await axios.delete(`VnRoles/${entityId.value}`);
     notify(t('Role removed'), 'positive');
@@ -39,13 +33,10 @@ const removeRole = async () => {
 
 <template>
     <CardDescriptor
-        :url="`VnRoles/${entityId}`"
+        url="VnRoles"
-        :filter="filter"
+        :filter="{ where: { id: entityId } }"
         module="Role"
-        @on-fetch="setData"
         data-key="Role"
-        :title="data.title"
-        :subtitle="data.subtitle"
         :summary="$props.summary"
     >
         <template #menu>

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

@@ -1,10 +1,9 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import { useArrayData } from 'src/composables/useArrayData';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -16,24 +15,18 @@ const $props = defineProps({
     },
 });
 
-const { store } = useArrayData('Role');
-const role = ref(store.data);
 const entityId = computed(() => $props.id || route.params.id);
-const filter = {
-    where: { id: entityId },
-};
 </script>
 
 <template>
     <CardSummary
         ref="summary"
-        :url="`VnRoles/${entityId}`"
+        url="VnRoles"
-        :filter="filter"
+        :filter="{ where: { id: entityId } }"
-        @on-fetch="(data) => (role = data)"
         data-key="Role"
     >
-        <template #header> {{ role.id }} - {{ role.name }} </template>
+        <template #header="{ entity }"> {{ entity.id }} - {{ entity.name }} </template>
-        <template #body>
+        <template #body="{ entity }">
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
                     <a
@@ -44,9 +37,9 @@ const filter = {
                         <QIcon name="open_in_new" />
                     </a>
                 </QCardSection>
-                <VnLv :label="t('role.id')" :value="role.id" />
+                <VnLv :label="t('role.id')" :value="entity.id" />
-                <VnLv :label="t('globals.name')" :value="role.name" />
+                <VnLv :label="t('globals.name')" :value="entity.name" />
-                <VnLv :label="t('role.description')" :value="role.description" />
+                <VnLv :label="t('role.description')" :value="entity.description" />
             </QCard>
         </template>
     </CardSummary>

src/pages/Account/Role/RoleExprBuilder.js

@@ -0,0 +1,16 @@
+export default (param, value) => {
+    switch (param) {
+        case 'search':
+            return /^\d+$/.test(value)
+                ? { id: value }
+                : {
+                      or: [
+                          { name: { like: `%${value}%` } },
+                          { nickname: { like: `%${value}%` } },
+                      ],
+                  };
+        case 'name':
+        case 'description':
+            return { [param]: { like: `%${value}%` } };
+    }
+};

src/pages/Claim/Card/ClaimBasicData.vue

@@ -28,7 +28,6 @@ const workersOptions = ref([]);
         model="Claim"
         :url-update="`Claims/updateClaim/${route.params.id}`"
         auto-load
-        :reload="true"
     >
         <template #form="{ data, validate }">
             <VnRow>

src/pages/Claim/Card/ClaimCard.vue

@@ -4,10 +4,11 @@ import ClaimDescriptor from './ClaimDescriptor.vue';
 import filter from './ClaimFilter.js';
 </script>
 <template>
-    <VnCardBeta 
+    <VnCardBeta
-        data-key="Claim" 
+        data-key="Claim"
-        base-url="Claims" 
+        url="Claims"
-        :descriptor="ClaimDescriptor" 
+        :descriptor="ClaimDescriptor"
+        search-data-key="ClaimList"
         :filter="filter"
     />
 </template>

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -3,12 +3,10 @@ import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDateHourMinSec, toPercentage } from 'src/filters';
-import { useState } from 'src/composables/useState';
 import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
 import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import useCardDescription from 'src/composables/useCardDescription';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import { getUrl } from 'src/composables/getUrl';
 import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
@@ -23,7 +21,6 @@ const $props = defineProps({
 });
 
 const route = useRoute();
-const state = useState();
 const { t } = useI18n();
 const salixUrl = ref();
 const entityId = computed(() => {
@@ -39,12 +36,7 @@ const STATE_COLOR = {
 function stateColor(code) {
     return STATE_COLOR[code];
 }
-const data = ref(useCardDescription());
+
-const setData = (entity) => {
-    if (!entity) return;
-    data.value = useCardDescription(entity?.client?.name, entity.id);
-    state.set('ClaimDescriptor', entity);
-};
 onMounted(async () => {
     salixUrl.value = await getUrl('');
 });
@@ -56,7 +48,6 @@ onMounted(async () => {
         :filter="filter"
         module="Claim"
         title="client.name"
-        @on-fetch="setData"
         data-key="Claim"
     >
         <template #menu="{ entity }">

src/pages/Customer/Card/CustomerBasicData.vue

@@ -54,10 +54,10 @@ function onBeforeSave(formData, originalData) {
         auto-load
     />
     <FormModel
-        :url="`Clients/${route.params.id}`"
+        :url-update="`Clients/${route.params.id}`"
         auto-load
-        model="customer"
         :mapper="onBeforeSave"
+        model="Customer"
     >
         <template #form="{ data, validate }">
             <VnRow>

src/pages/Customer/Card/CustomerBillingData.vue

@@ -28,7 +28,7 @@ const getBankEntities = (data, formData) => {
 </script>
 
 <template>
-    <FormModel :url-update="`Clients/${route.params.id}`" auto-load model="customer">
+    <FormModel :url-update="`Clients/${route.params.id}`" auto-load model="Customer">
         <template #form="{ data, validate }">
             <VnRow>
                 <VnSelect

src/pages/Customer/Card/CustomerCard.vue

@@ -5,8 +5,8 @@ import CustomerDescriptor from './CustomerDescriptor.vue';
 
 <template>
     <VnCardBeta
-        data-key="Client"
+        data-key="Customer"
-        base-url="Clients"
+        :url="`Clients/${$route.params.id}/getCard`"
         :descriptor="CustomerDescriptor"
     />
 </template>

src/pages/Customer/Card/CustomerDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -11,6 +11,15 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import CustomerDescriptorMenu from './CustomerDescriptorMenu.vue';
+import { useState } from 'src/composables/useState';
+const state = useState();
+
+const customer = ref();
+
+onMounted(async () => {
+    customer.value = state.get('Customer');
+    if (customer.value) customer.value.webAccess = data.value?.account?.isActive;
+});
 
 const customerDebt = ref();
 const customerCredit = ref();
@@ -48,11 +57,9 @@ const debtWarning = computed(() => {
     <CardDescriptor
         module="Customer"
         :url="`Clients/${entityId}/getCard`"
-        :title="data.title"
-        :subtitle="data.subtitle"
-        @on-fetch="setData"
         :summary="$props.summary"
-        data-key="customer"
+        data-key="Customer"
+        @on-fetch="setData"
         width="lg-width"
     >
         <template #menu="{ entity }">
@@ -61,7 +68,7 @@ const debtWarning = computed(() => {
         <template #body="{ entity }">
             <VnLv
                 :label="t('customer.summary.payMethod')"
-                :value="entity.payMethod.name"
+                :value="entity.payMethod?.name"
             />
 
             <VnLv
@@ -90,7 +97,7 @@ const debtWarning = computed(() => {
             </VnLv>
             <VnLv
                 :label="t('customer.extendedList.tableVisibleColumns.businessTypeFk')"
-                :value="entity.businessType.description"
+                :value="entity.businessType?.description"
             />
         </template>
         <template #icons="{ entity }">
@@ -143,13 +150,13 @@ const debtWarning = computed(() => {
                         <br />
                         {{
                             t('unpaidDated', {
-                                dated: toDate(customer.unpaid.dated),
+                                dated: toDate(customer.unpaid?.dated),
                             })
                         }}
                         <br />
                         {{
                             t('unpaidAmount', {
-                                amount: toCurrency(customer.unpaid.amount),
+                                amount: toCurrency(customer.unpaid?.amount),
                             })
                         }}
                     </QTooltip>

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -35,7 +35,7 @@ function handleLocation(data, location) {
     <FormModel
         :url-update="`Clients/${route.params.id}/updateFiscalData`"
         auto-load
-        model="customer"
+        model="Customer"
     >
         <template #form="{ data, validate }">
             <VnRow>

src/pages/Customer/Card/CustomerWebAccess.vue

@@ -27,7 +27,7 @@ async function hasCustomerRole() {
     <FormModel
         :url-update="`Clients/${route.params.id}/updateUser`"
         :filter="filter"
-        model="customer"
+        model="Customer"
         :mapper="
             ({ account }) => {
                 const { name, email, active } = account;

src/pages/Customer/components/CustomerSamplesCreate.vue

@@ -39,7 +39,7 @@ const optionsSamplesVisible = ref([]);
 const sampleType = ref({ hasPreview: false });
 const initialData = reactive({});
 const entityId = computed(() => route.params.id);
-const customer = computed(() => state.get('customer'));
+const customer = computed(() => state.get('Customer'));
 const filterEmailUsers = { where: { userFk: user.value.id } };
 const filterClientsAddresses = {
     include: [

src/pages/Department/Card/DepartmentBasicData.vue

@@ -1,27 +1,16 @@
 <script setup>
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-
 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 VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
-
-const route = useRoute();
-const { t } = useI18n();
 </script>
 <template>
-    <FormModel
+    <FormModel model="Department" auto-load class="full-width">
-        :url="`Departments/${route.params.id}`"
-        model="department"
-        auto-load
-        class="full-width"
-    >
         <template #form="{ data, validate }">
             <VnRow>
                 <VnInput
-                    :label="t('globals.name')"
+                    :label="$t('globals.name')"
                     v-model="data.name"
                     :rules="validate('globals.name')"
                     clearable
@@ -29,33 +18,33 @@ const { t } = useI18n();
                 />
                 <VnInput
                     v-model="data.code"
-                    :label="t('globals.code')"
+                    :label="$t('globals.code')"
                     :rules="validate('globals.code')"
                     clearable
                 />
             </VnRow>
             <VnRow>
                 <VnInput
-                    :label="t('department.chat')"
+                    :label="$t('department.chat')"
                     v-model="data.chatName"
                     :rules="validate('department.chat')"
                     clearable
                 />
                 <VnInput
                     v-model="data.notificationEmail"
-                    :label="t('globals.params.email')"
+                    :label="$t('globals.params.email')"
                     :rules="validate('globals.params.email')"
                     clearable
                 />
             </VnRow>
             <VnRow>
                 <VnSelectWorker
-                    :label="t('department.bossDepartment')"
+                    :label="$t('department.bossDepartment')"
                     v-model="data.workerFk"
                     :rules="validate('department.bossDepartment')"
                 />
                 <VnSelect
-                    :label="t('department.selfConsumptionCustomer')"
+                    :label="$t('department.selfConsumptionCustomer')"
                     v-model="data.clientFk"
                     url="Clients"
                     option-value="id"
@@ -67,11 +56,11 @@ const { t } = useI18n();
             </VnRow>
             <VnRow>
                 <QCheckbox
-                    :label="t('department.telework')"
+                    :label="$t('department.telework')"
                     v-model="data.isTeleworking"
                 />
                 <QCheckbox
-                    :label="t('department.notifyOnErrors')"
+                    :label="$t('department.notifyOnErrors')"
                     v-model="data.hasToMistake"
                     :false-value="0"
                     :true-value="1"
@@ -79,17 +68,17 @@ const { t } = useI18n();
             </VnRow>
             <VnRow>
                 <QCheckbox
-                    :label="t('department.worksInProduction')"
+                    :label="$t('department.worksInProduction')"
                     v-model="data.isProduction"
                 />
                 <QCheckbox
-                    :label="t('department.hasToRefill')"
+                    :label="$t('department.hasToRefill')"
                     v-model="data.hasToRefill"
                 />
             </VnRow>
             <VnRow>
                 <QCheckbox
-                    :label="t('department.hasToSendMail')"
+                    :label="$t('department.hasToSendMail')"
                     v-model="data.hasToSendMail"
                 />
             </VnRow>

src/pages/Department/Card/DepartmentCard.vue

@@ -7,7 +7,7 @@ import DepartmentDescriptor from 'pages/Department/Card/DepartmentDescriptor.vue
         class="q-pa-md column items-center"
         v-bind="{ ...$attrs }"
         data-key="Department"
-        base-url="Departments"
+        url="Departments"
         :descriptor="DepartmentDescriptor"
     />
 </template>

src/pages/Department/Card/DepartmentDescriptor.vue

@@ -5,7 +5,6 @@ import { useI18n } from 'vue-i18n';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
-import useCardDescription from 'src/composables/useCardDescription';
 
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@@ -32,15 +31,6 @@ const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 
-const department = ref();
-
-const data = ref(useCardDescription());
-
-const setData = (entity) => {
-    if (!entity) return;
-    data.value = useCardDescription(entity.name, entity.id);
-};
-
 const removeDepartment = async () => {
     await axios.post(`/Departments/${entityId.value}/removeChild`, entityId.value);
     router.push({ name: 'WorkerDepartment' });
@@ -54,17 +44,9 @@ const { openConfirmationModal } = useVnConfirm();
         ref="DepartmentDescriptorRef"
         module="Department"
         :url="`Departments/${entityId}`"
-        :title="data.title"
-        :subtitle="data.subtitle"
         :summary="$props.summary"
         :to-module="{ name: 'WorkerDepartment' }"
-        @on-fetch="
+        data-key="Department"
-            (data) => {
-                department = data;
-                setData(data);
-            }
-        "
-        data-key="department"
     >
         <template #menu="{}">
             <QItem

src/pages/Department/Card/DepartmentSummary.vue

@@ -27,7 +27,7 @@ onMounted(async () => {
 
 <template>
     <CardSummary
-        data-key="DepartmentSummary"
+        data-key="Department"
         ref="summary"
         :url="`Departments/${entityId}`"
         class="full-width"

src/pages/Entry/Card/EntryCard.vue

@@ -1,13 +1,13 @@
 <script setup>
 import VnCardBeta from 'components/common/VnCardBeta.vue';
 import EntryDescriptor from './EntryDescriptor.vue';
-import filter from './EntryFilter.js'
+import filter from './EntryFilter.js';
 </script>
 <template>
     <VnCardBeta
         data-key="Entry"
-        base-url="Entries"
+        url="Entries"
         :descriptor="EntryDescriptor"
-        :user-filter="filter"
+        :filter="filter"
     />
 </template>

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -1,47 +1,18 @@
 <script setup>
 import VnCardBeta from 'components/common/VnCardBeta.vue';
 import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
+import { onBeforeRouteUpdate } from 'vue-router';
+import { setRectificative } from '../composables/setRectificative';
+import filter from './InvoiceInFilter.js';
 
-const filter = {
+onBeforeRouteUpdate(async (to) => await setRectificative(to));
-    include: [
-        {
-            relation: 'supplier',
-            scope: {
-                include: {
-                    relation: 'contacts',
-                    scope: { where: { email: { neq: null } } },
-                },
-            },
-        },
-        { relation: 'invoiceInDueDay' },
-        { relation: 'company' },
-        { relation: 'currency' },
-        {
-            relation: 'dms',
-            scope: {
-                fields: [
-                    'dmsTypeFk',
-                    'reference',
-                    'hardCopyNumber',
-                    'workerFk',
-                    'description',
-                    'hasFile',
-                    'file',
-                    'created',
-                    'companyFk',
-                    'warehouseFk',
-                ],
-            },
-        },
-    ],
-};
 </script>
 
 <template>
     <VnCardBeta
         data-key="InvoiceIn"
-        base-url="InvoiceIns"
+        url="InvoiceIns"
         :descriptor="InvoiceInDescriptor"
-        :user-filter="filter"
+        :filter="filter"
     />
 </template>

src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue

@@ -7,6 +7,7 @@ import { toCurrency, toDate } from 'src/filters';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
+import filter from './InvoiceInFilter.js';
 import InvoiceInDescriptorMenu from './InvoiceInDescriptorMenu.vue';
 
 const $props = defineProps({ id: { type: Number, default: null } });
@@ -16,33 +17,10 @@ const { t } = useI18n();
 const cardDescriptorRef = ref();
 const entityId = computed(() => $props.id || +currentRoute.value.params.id);
 const totalAmount = ref();
-
+const config = ref();
-const filter = {
+const cplusRectificationTypes = ref([]);
-    include: [
+const siiTypeInvoiceIns = ref([]);
-        {
+const invoiceCorrectionTypes = ref([]);
-            relation: 'supplier',
-            scope: {
-                include: {
-                    relation: 'contacts',
-                    scope: {
-                        where: {
-                            email: { neq: null },
-                        },
-                    },
-                },
-            },
-        },
-        {
-            relation: 'invoiceInDueDay',
-        },
-        {
-            relation: 'company',
-        },
-        {
-            relation: 'currency',
-        },
-    ],
-};
 const invoiceInCorrection = reactive({ correcting: [], corrected: null });
 const routes = reactive({
     getSupplier: (id) => {

src/pages/InvoiceIn/Card/InvoiceInFilter.js

@@ -0,0 +1,33 @@
+export default {
+    include: [
+        {
+            relation: 'supplier',
+            scope: {
+                include: {
+                    relation: 'contacts',
+                    scope: { where: { email: { neq: null } } },
+                },
+            },
+        },
+        { relation: 'invoiceInDueDay' },
+        { relation: 'company' },
+        { relation: 'currency' },
+        {
+            relation: 'dms',
+            scope: {
+                fields: [
+                    'dmsTypeFk',
+                    'reference',
+                    'hardCopyNumber',
+                    'workerFk',
+                    'description',
+                    'hasFile',
+                    'file',
+                    'created',
+                    'companyFk',
+                    'warehouseFk',
+                ],
+            },
+        },
+    ],
+};

src/pages/InvoiceOut/Card/InvoiceOutCard.vue

@@ -1,11 +1,13 @@
 <script setup>
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
 import VnCardBeta from 'components/common/VnCardBeta.vue';
+import filter from './InvoiceOutFilter.js';
 </script>
 <template>
     <VnCardBeta
         data-key="InvoiceOut"
-        base-url="InvoiceOuts"
+        url="InvoiceOuts"
+        :filter="filter"
         :descriptor="InvoiceOutDescriptor"
     />
 </template>

src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue

@@ -8,8 +8,8 @@ import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy
 import VnLv from 'src/components/ui/VnLv.vue';
 import InvoiceOutDescriptorMenu from './InvoiceOutDescriptorMenu.vue';
 
-import useCardDescription from 'src/composables/useCardDescription';
 import { toCurrency, toDate } from 'src/filters';
+import filter from './InvoiceOutFilter.js';
 
 const $props = defineProps({
     id: {
@@ -26,30 +26,11 @@ const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 
-const filter = {
-    include: [
-        {
-            relation: 'company',
-            scope: {
-                fields: ['id', 'code'],
-            },
-        },
-        {
-            relation: 'client',
-            scope: {
-                fields: ['id', 'name', 'email'],
-            },
-        },
-    ],
-};
-
 const descriptor = ref();
 
 function ticketFilter(invoice) {
     return JSON.stringify({ refFk: invoice.ref });
 }
-const data = ref(useCardDescription());
-const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.id));
 </script>
 
 <template>
@@ -58,10 +39,8 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
         module="InvoiceOut"
         :url="`InvoiceOuts/${entityId}`"
         :filter="filter"
-        :title="data.title"
+        title="ref"
-        :subtitle="data.subtitle"
+        data-key="InvoiceOut"
-        @on-fetch="setData"
-        data-key="invoiceOutData"
         width="lg-width"
     >
         <template #menu="{ entity, menuRef }">

src/pages/InvoiceOut/Card/InvoiceOutFilter.js

@@ -0,0 +1,16 @@
+export default {
+    include: [
+        {
+            relation: 'company',
+            scope: {
+                fields: ['id', 'code'],
+            },
+        },
+        {
+            relation: 'client',
+            scope: {
+                fields: ['id', 'name', 'email'],
+            },
+        },
+    ],
+};

src/pages/Item/Card/ItemBasicData.vue

@@ -54,9 +54,8 @@ const onIntrastatCreated = (response, formData) => {
         auto-load
     />
     <FormModel
-        :url="`Items/${route.params.id}`"
         :url-update="`Items/${route.params.id}`"
-        model="item"
+        model="Item"
         auto-load
         :clear-store-on-unmount="false"
     >

src/pages/Item/Card/ItemCard.vue

@@ -5,7 +5,7 @@ import ItemDescriptor from './ItemDescriptor.vue';
 <template>
     <VnCardBeta
         data-key="Item"
-        base-url="Items"
+        :url="`Items/${$route.params.id}/getCard`"
         :descriptor="ItemDescriptor"
     />
 </template>

src/pages/Item/Card/ItemDescriptor.vue

@@ -7,7 +7,6 @@ import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import ItemDescriptorImage from 'src/pages/Item/Card/ItemDescriptorImage.vue';
-import useCardDescription from 'src/composables/useCardDescription';
 import axios from 'axios';
 import { dashIfEmpty } from 'src/filters';
 import { useArrayData } from 'src/composables/useArrayData';
@@ -55,10 +54,8 @@ onMounted(async () => {
     mounted.value = true;
 });
 
-const data = ref(useCardDescription());
 const setData = async (entity) => {
     if (!entity) return;
-    data.value = useCardDescription(entity.name, entity.id);
     await updateStock();
 };
 
@@ -90,10 +87,8 @@ const updateStock = async () => {
 
 <template>
     <CardDescriptor
-        data-key="ItemData"
+        data-key="Item"
         module="Item"
-        :title="data.title"
-        :subtitle="data.subtitle"
         :summary="$props.summary"
         :url="`Items/${entityId}/getCard`"
         @on-fetch="setData"

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

@@ -40,12 +40,7 @@ const itemPackingTypesOptions = ref([]);
         }"
         auto-load
     />
-    <FormModel
+    <FormModel :url-update="`ItemTypes/${route.params.id}`" model="ItemType" auto-load>
-        :url="`ItemTypes/${route.params.id}`"
-        :url-update="`ItemTypes/${route.params.id}`"
-        model="itemTypeBasicData"
-        auto-load
-    >
         <template #form="{ data }">
             <VnRow>
                 <VnInput v-model="data.code" :label="t('itemType.shared.code')" />

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

@@ -1,12 +1,14 @@
 <script setup>
 import VnCardBeta from 'components/common/VnCardBeta.vue';
 import ItemTypeDescriptor from 'src/pages/Item/ItemType/Card/ItemTypeDescriptor.vue';
+import filter from './ItemTypeFilter.js';
 </script>
 
 <template>
     <VnCardBeta
-        data-key="ItemTypeSummary"
+        data-key="ItemType"
-        base-url="ItemTypes"
+        url="ItemTypes"
+        :filter="filter"
         :descriptor="ItemTypeDescriptor"
     />
 </template>

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

@@ -1,12 +1,11 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import useCardDescription from 'src/composables/useCardDescription';
+import filter from './ItemTypeFilter.js';
 
 const $props = defineProps({
     id: {
@@ -20,46 +19,32 @@ const $props = defineProps({
 });
 
 const route = useRoute();
-const { t } = useI18n();
 
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-
-const itemTypeFilter = {
-    include: [
-        { relation: 'worker' },
-        { relation: 'category' },
-        { relation: 'itemPackingType' },
-        { relation: 'temperature' },
-    ],
-};
-
-const data = ref(useCardDescription());
-const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
 </script>
-
 <template>
     <CardDescriptor
         module="ItemType"
         :url="`ItemTypes/${entityId}`"
-        :filter="itemTypeFilter"
+        :filter="filter"
-        :title="data.title"
+        title="code"
-        :subtitle="data.subtitle"
+        data-key="ItemType"
-        data-key="itemTypeDescriptor"
-        @on-fetch="setData"
     >
         <template #body="{ entity }">
-            <VnLv :label="t('itemType.shared.code')" :value="entity.code" />
+            <VnLv :label="$t('itemType.shared.code')" :value="entity.code" />
-            <VnLv :label="t('itemType.shared.name')" :value="entity.name" />
+            <VnLv :label="$t('itemType.shared.name')" :value="entity.name" />
-            <VnLv :label="t('itemType.shared.worker')">
+            <VnLv :label="$t('itemType.shared.worker')">
                 <template #value>
                     <span class="link">{{ entity.worker?.firstName }}</span>
                     <WorkerDescriptorProxy :id="entity.worker?.id" />
                 </template>
             </VnLv>
-            <VnLv :label="t('itemType.shared.category')" :value="entity.category?.name" />
+            <VnLv
+                :label="$t('itemType.shared.category')"
+                :value="entity.category?.name"
+            />
         </template>
     </CardDescriptor>
 </template>
-

src/pages/Item/ItemType/Card/ItemTypeFilter.js

@@ -0,0 +1,8 @@
+export default {
+    include: [
+        { relation: 'worker' },
+        { relation: 'category' },
+        { relation: 'itemPackingType' },
+        { relation: 'temperature' },
+    ],
+};

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

@@ -3,7 +3,7 @@ import { ref, computed, onUpdated } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-
+import filter from './ItemTypeFilter.js';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnToSummary from 'src/components/ui/VnToSummary.vue';
@@ -21,15 +21,6 @@ const $props = defineProps({
     },
 });
 
-const itemTypeFilter = {
-    include: [
-        { relation: 'worker' },
-        { relation: 'category' },
-        { relation: 'itemPackingType' },
-        { relation: 'temperature' },
-    ],
-};
-
 const entityId = computed(() => $props.id || route.params.id);
 const summaryRef = ref();
 const itemType = ref();
@@ -43,8 +34,8 @@ async function setItemTypeData(data) {
     <CardSummary
         ref="summaryRef"
         :url="`ItemTypes/${entityId}`"
-        data-key="ItemTypeSummary"
+        data-key="ItemType"
-        :filter="itemTypeFilter"
+        :filter="filter"
         @on-fetch="(data) => setItemTypeData(data)"
         class="full-width"
     >

src/pages/Order/Card/OrderBasicData.vue

@@ -14,7 +14,6 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 const { t } = useI18n();
 const route = useRoute();
 const state = useState();
-const ORDER_MODEL = 'order';
 
 const isNew = Boolean(!route.params.id);
 const clientList = ref([]);
@@ -32,7 +31,7 @@ const fetchAddressList = async (addressId) => {
     });
     addressList.value = data;
     if (addressList.value?.length === 1) {
-        state.get(ORDER_MODEL).addressFk = addressList.value[0].id;
+        state.get('Order').addressFk = addressList.value[0].id;
     }
 };
 
@@ -91,9 +90,8 @@ const onClientChange = async (clientId) => {
     <VnSubToolbar v-if="isNew" />
     <div class="q-pa-md">
         <FormModel
-            :url="`Orders/${route.params.id}`"
             :url-update="`Orders/${route.params.id}/updateBasicData`"
-            :model="ORDER_MODEL"
+            model="Order"
             :filter="orderFilter"
             @on-fetch="fetchOrderDetails"
             auto-load

src/pages/Order/Card/OrderCard.vue

@@ -1,12 +1,14 @@
 <script setup>
 import VnCardBeta from 'components/common/VnCardBeta.vue';
 import OrderDescriptor from 'pages/Order/Card/OrderDescriptor.vue';
+import filter from './OrderFilter.js';
 </script>
 
 <template>
     <VnCardBeta
         data-key="Order"
-        base-url="Orders"
+        url="Orders"
+        :filter="filter"
         :descriptor="OrderDescriptor"
     />
 </template>

src/pages/Order/Card/OrderCatalogItemDialog.vue

@@ -20,7 +20,7 @@ const props = defineProps({
 });
 const state = useState();
 
-const orderData = computed(() => state.get('orderData'));
+const orderData = computed(() => state.get('Order'));
 
 const prices = ref((props.item.prices || []).map((item) => ({ ...item, quantity: 0 })));
 const isLoading = ref(false);
@@ -44,7 +44,7 @@ const addToOrder = async () => {
 
     state.set('orderTotal', orderTotal);
     const rows = orderData.value.rows.push(...items) || [];
-    state.set('orderData', {
+    state.set('Order', {
         ...orderData.value,
         rows,
     });

src/pages/Order/Card/OrderDescriptor.vue

@@ -4,8 +4,7 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toCurrency, toDate } from 'src/filters';
 import { useState } from 'src/composables/useState';
-import useCardDescription from 'src/composables/useCardDescription';
+import filter from './OrderFilter.js';
-
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import FetchData from 'components/FetchData.vue';
@@ -24,44 +23,15 @@ const $props = defineProps({
 const route = useRoute();
 const state = useState();
 const { t } = useI18n();
-const data = ref(useCardDescription());
 const getTotalRef = ref();
 
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 
-const filter = {
-    include: [
-        { relation: 'agencyMode', scope: { fields: ['name'] } },
-        {
-            relation: 'address',
-            scope: { fields: ['nickname'] },
-        },
-        { relation: 'rows', scope: { fields: ['id'] } },
-        {
-            relation: 'client',
-            scope: {
-                fields: [
-                    'salesPersonFk',
-                    'name',
-                    'isActive',
-                    'isFreezed',
-                    'isTaxDataChecked',
-                ],
-                include: {
-                    relation: 'salesPersonUser',
-                    scope: { fields: ['id', 'name'] },
-                },
-            },
-        },
-    ],
-};
-
 const setData = (entity) => {
     if (!entity) return;
     getTotalRef.value && getTotalRef.value.fetch();
-    data.value = useCardDescription(entity?.client?.name, entity?.id);
     state.set('orderTotal', total);
 };
 
@@ -88,10 +58,9 @@ const total = ref(0);
         :url="`Orders/${entityId}`"
         :filter="filter"
         module="Order"
-        :title="data.title"
+        title="client.name"
-        :subtitle="data.subtitle"
         @on-fetch="setData"
-        data-key="orderData"
+        data-key="Order"
     >
         <template #body="{ entity }">
             <VnLv

src/pages/Order/Card/OrderFilter.js

@@ -0,0 +1,26 @@
+export default {
+    include: [
+        { relation: 'agencyMode', scope: { fields: ['name'] } },
+        {
+            relation: 'address',
+            scope: { fields: ['nickname'] },
+        },
+        { relation: 'rows', scope: { fields: ['id'] } },
+        {
+            relation: 'client',
+            scope: {
+                fields: [
+                    'salesPersonFk',
+                    'name',
+                    'isActive',
+                    'isFreezed',
+                    'isTaxDataChecked',
+                ],
+                include: {
+                    relation: 'salesPersonUser',
+                    scope: { fields: ['id', 'name'] },
+                },
+            },
+        },
+    ],
+};

src/pages/Order/Card/OrderLines.vue

@@ -21,7 +21,7 @@ const router = useRouter();
 const route = useRoute();
 const { t } = useI18n();
 const quasar = useQuasar();
-const descriptorData = useArrayData('orderData');
+const descriptorData = useArrayData('Order');
 const componentKey = ref(0);
 const tableLinesRef = ref();
 const order = ref();

src/pages/Order/Card/OrderSummary.vue

@@ -27,7 +27,7 @@ const $props = defineProps({
 const entityId = computed(() => $props.id || route.params.id);
 const summary = ref();
 const quasar = useQuasar();
-const descriptorData = useArrayData('orderData');
+const descriptorData = useArrayData('Order');
 const detailsColumns = ref([
     {
         name: 'item',

src/pages/Parking/Card/ParkingBasicData.vue

@@ -1,23 +1,13 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModel from 'components/FormModel.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 
-const { t } = useI18n();
-const route = useRoute();
-const parkingId = computed(() => route.params?.id || null);
 const sectors = ref([]);
 const sectorFilter = { fields: ['id', 'description'] };
-
-const filter = {
-    fields: ['sectorFk', 'code', 'pickingOrder', 'row', 'column'],
-    include: [{ relation: 'sector', scope: sectorFilter }],
-};
 </script>
 <template>
     <FetchData
@@ -27,22 +17,25 @@ const filter = {
         @on-fetch="(data) => (sectors = data)"
         auto-load
     />
-    <FormModel :url="`Parkings/${parkingId}`" model="parking" :filter="filter" auto-load>
+    <FormModel model="Parking" auto-load>
         <template #form="{ data }">
             <VnRow>
-                <VnInput v-model="data.code" :label="t('globals.code')" />
+                <VnInput v-model="data.code" :label="$t('globals.code')" />
-                <VnInput v-model="data.pickingOrder" :label="t('parking.pickingOrder')" />
+                <VnInput
+                    v-model="data.pickingOrder"
+                    :label="$t('parking.pickingOrder')"
+                />
             </VnRow>
             <VnRow>
-                <VnInput v-model="data.row" :label="t('parking.row')" />
+                <VnInput v-model="data.row" :label="$t('parking.row')" />
-                <VnInput v-model="data.column" :label="t('parking.column')" />
+                <VnInput v-model="data.column" :label="$t('parking.column')" />
             </VnRow>
             <VnRow>
                 <VnSelect
                     v-model="data.sectorFk"
                     option-value="id"
                     option-label="description"
-                    :label="t('parking.sector')"
+                    :label="$t('parking.sector')"
                     :options="sectors"
                     use-input
                     input-debounce="0"

src/pages/Parking/Card/ParkingCard.vue

@@ -1,12 +1,14 @@
 <script setup>
 import VnCardBeta from 'components/common/VnCardBeta.vue';
 import ParkingDescriptor from 'pages/Parking/Card/ParkingDescriptor.vue';
+import filter from './ParkingFilter.js';
 </script>
 
 <template>
     <VnCardBeta
         data-key="Parking"
-        base-url="Parkings"
+        url="Parkings"
+        :filter="filter"
         :descriptor="ParkingDescriptor"
     />
 </template>

src/pages/Parking/Card/ParkingDescriptor.vue

@@ -1,10 +1,9 @@
 <script setup>
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'components/ui/VnLv.vue';
-
+import filter from './ParkingFilter.js';
 const props = defineProps({
     id: {
         type: Number,
@@ -13,14 +12,8 @@ const props = defineProps({
     },
 });
 
-const { t } = useI18n();
 const route = useRoute();
 const entityId = computed(() => props.id || route.params.id);
-
-const filter = {
-    fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
-    include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
-};
 </script>
 <template>
     <CardDescriptor
@@ -32,9 +25,9 @@ const filter = {
         :to-module="{ name: 'ParkingList' }"
     >
         <template #body="{ entity }">
-            <VnLv :label="t('globals.code')" :value="entity.code" />
+            <VnLv :label="$t('globals.code')" :value="entity.code" />
-            <VnLv :label="t('parking.pickingOrder')" :value="entity.pickingOrder" />
+            <VnLv :label="$t('parking.pickingOrder')" :value="entity.pickingOrder" />
-            <VnLv :label="t('parking.sector')" :value="entity.sector?.description" />
+            <VnLv :label="$t('parking.sector')" :value="entity.sector?.description" />
         </template>
     </CardDescriptor>
 </template>

src/pages/Parking/Card/ParkingFilter.js

@@ -0,0 +1,4 @@
+export default {
+    fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
+    include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
+};

src/pages/Parking/ParkingExprBuilder.js

@@ -0,0 +1,10 @@
+export default (param, value) => {
+    switch (param) {
+        case 'code':
+            return { [param]: { like: `%${value}%` } };
+        case 'sectorFk':
+            return { [param]: value };
+        case 'search':
+            return { or: [{ code: { like: `%${value}%` } }, { id: value }] };
+    }
+};

src/pages/Parking/ParkingList.vue

@@ -9,6 +9,7 @@ import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import ParkingFilter from './ParkingFilter.vue';
 import ParkingSummary from './Card/ParkingSummary.vue';
+import exprBuilder from './ParkingExprBuilder.js';
 import VnSection from 'src/components/common/VnSection.vue';
 
 const stateStore = useStateStore();
@@ -23,19 +24,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 const filter = {
     fields: ['id', 'sectorFk', 'code', 'pickingOrder'],
 };
-
-function exprBuilder(param, value) {
-    switch (param) {
-        case 'code':
-            return { [param]: { like: `%${value}%` } };
-        case 'sectorFk':
-            return { [param]: value };
-        case 'search':
-            return { or: [{ code: { like: `%${value}%` } }, { id: value }] };
-    }
-}
 </script>
-
 <template>
     <VnSection
         :data-key="dataKey"

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

@@ -21,7 +21,7 @@ const warehouses = ref([]);
         @on-fetch="(data) => (warehouses = data)"
         auto-load
     />
-    <FormModel :url="`Agencies/${routeId}`" model="agency" auto-load>
+    <FormModel :update-url="`Agencies/${routeId}`" model="Agency" auto-load>
         <template #form="{ data }">
             <VnRow>
                 <VnInput v-model="data.name" :label="t('globals.name')" />

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

@@ -3,5 +3,5 @@ import AgencyDescriptor from 'pages/Route/Agency/Card/AgencyDescriptor.vue';
 import VnCardBeta from 'src/components/common/VnCardBeta.vue';
 </script>
 <template>
-    <VnCardBeta data-key="Agency" base-url="Agencies" :descriptor="AgencyDescriptor" />
+    <VnCardBeta data-key="Agency" url="Agencies" :descriptor="AgencyDescriptor" />
 </template>

src/pages/Route/Card/RouteCard.vue

@@ -1,12 +1,13 @@
 <script setup>
 import RouteDescriptor from 'pages/Route/Card/RouteDescriptor.vue';
 import VnCardBeta from 'src/components/common/VnCardBeta.vue';
+import filter from './RouteFilter.js';
 </script>
 <template>
     <VnCardBeta
         data-key="Route"
-        base-url="Routes"
+        url="Routes"
-        custom-url="Routes/filter"
+        :filter="filter"
         :descriptor="RouteDescriptor"
     />
 </template>

src/pages/Route/Card/RouteDescriptor.vue

@@ -1,12 +1,11 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'components/ui/VnLv.vue';
-import useCardDescription from 'composables/useCardDescription';
 import { dashIfEmpty, toDate } from 'src/filters';
 import RouteDescriptorMenu from 'pages/Route/Card/RouteDescriptorMenu.vue';
+import filter from './RouteFilter.js';
 
 const $props = defineProps({
     id: {
@@ -17,78 +16,31 @@ const $props = defineProps({
 });
 
 const route = useRoute();
-const { t } = useI18n();
 
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-
-const filter = {
-    fields: [
-        'id',
-        'workerFk',
-        'agencyModeFk',
-        'dated',
-        'm3',
-        'warehouseFk',
-        'description',
-        'vehicleFk',
-        'kmStart',
-        'kmEnd',
-        'started',
-        'finished',
-        'cost',
-        'zoneFk',
-        'isOk',
-    ],
-    include: [
-        { relation: 'agencyMode', scope: { fields: ['id', 'name'] } },
-        {
-            relation: 'vehicle',
-            scope: { fields: ['id', 'm3'] },
-        },
-        { relation: 'zone', scope: { fields: ['id', 'name'] } },
-        {
-            relation: 'worker',
-            scope: {
-                fields: ['id'],
-                include: {
-                    relation: 'user',
-                    scope: {
-                        fields: ['id'],
-                        include: { relation: 'emailUser', scope: { fields: ['email'] } },
-                    },
-                },
-            },
-        },
-    ],
-};
-const data = ref(useCardDescription());
-const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
 </script>
-
 <template>
     <CardDescriptor
         module="Route"
         :url="`Routes/${entityId}`"
         :filter="filter"
-        :title="data.title"
+        :title="null"
-        :subtitle="data.subtitle"
+        data-key="Route"
-        data-key="routeData"
-        @on-fetch="setData"
         width="lg-width"
     >
         <template #body="{ entity }">
-            <VnLv :label="t('Date')" :value="toDate(entity?.dated)" />
+            <VnLv :label="$t('Date')" :value="toDate(entity?.created)" />
-            <VnLv :label="t('Agency')" :value="entity?.agencyMode?.name" />
+            <VnLv :label="$t('Agency')" :value="entity?.agencyMode?.name" />
-            <VnLv :label="t('Zone')" :value="entity?.zone?.name" />
+            <VnLv :label="$t('Zone')" :value="entity?.zone?.name" />
             <VnLv
-                :label="t('Volume')"
+                :label="$t('Volume')"
                 :value="`${dashIfEmpty(entity?.m3)} / ${dashIfEmpty(
-                    entity?.vehicle?.m3
+                    entity?.vehicle?.m3,
                 )} m³`"
             />
-            <VnLv :label="t('Description')" :value="entity?.description" />
+            <VnLv :label="$t('Description')" :value="entity?.description" />
         </template>
         <template #menu="{ entity }">
             <RouteDescriptorMenu :route="entity" />

src/pages/Route/Card/RouteFilter.js

@@ -0,0 +1,41 @@
+export default {
+    fields: [
+        'code',
+        'id',
+        'workerFk',
+        'agencyModeFk',
+        'created',
+        'm3',
+        'warehouseFk',
+        'description',
+        'vehicleFk',
+        'kmStart',
+        'kmEnd',
+        'started',
+        'finished',
+        'cost',
+        'zoneFk',
+        'isOk',
+    ],
+    include: [
+        { relation: 'agencyMode', scope: { fields: ['id', 'name'] } },
+        {
+            relation: 'vehicle',
+            scope: { fields: ['id', 'm3'] },
+        },
+        { relation: 'zone', scope: { fields: ['id', 'name'] } },
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: {
+                    relation: 'user',
+                    scope: {
+                        fields: ['id'],
+                        include: { relation: 'emailUser', scope: { fields: ['email'] } },
+                    },
+                },
+            },
+        },
+    ],
+};

src/pages/Route/Card/RouteForm.vue

@@ -11,6 +11,7 @@ import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInput from 'components/common/VnInput.vue';
 import axios from 'axios';
 import VnInputTime from 'components/common/VnInputTime.vue';
+import filter from './RouteFilter.js';
 import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const { t } = useI18n();
@@ -28,46 +29,6 @@ const defaultInitialData = {
 };
 const maxDistance = ref();
 
-const routeFilter = {
-    fields: [
-        'id',
-        'workerFk',
-        'agencyModeFk',
-        'dated',
-        'm3',
-        'warehouseFk',
-        'description',
-        'vehicleFk',
-        'kmStart',
-        'kmEnd',
-        'started',
-        'finished',
-        'cost',
-        'zoneFk',
-        'isOk',
-    ],
-    include: [
-        { relation: 'agencyMode', scope: { fields: ['id', 'name'] } },
-        {
-            relation: 'vehicle',
-            scope: { fields: ['id', 'm3'] },
-        },
-        { relation: 'zone', scope: { fields: ['id', 'name'] } },
-        {
-            relation: 'worker',
-            scope: {
-                fields: ['id'],
-                include: {
-                    relation: 'user',
-                    scope: {
-                        fields: ['id'],
-                        include: { relation: 'emailUser', scope: { fields: ['email'] } },
-                    },
-                },
-            },
-        },
-    ],
-};
 const onSave = (data, response) => {
     if (isNew) {
         axios.post(`Routes/${response?.id}/updateWorkCenter`);
@@ -84,11 +45,10 @@ const onSave = (data, response) => {
         sort-by="id ASC"
     />
     <FormModel
-        :url="isNew ? null : `Routes/${route.params?.id}`"
         :url-create="isNew ? 'Routes' : null"
         :observe-form-changes="!isNew"
-        :filter="routeFilter"
+        :filter="filter"
-        model="route"
+        model="Route"
         :auto-load="!isNew"
         :form-initial-data="isNew ? defaultInitialData : null"
         @on-data-saved="onSave"

src/pages/Route/Roadmap/RoadmapBasicData.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import VnRow from 'components/ui/VnRow.vue';
 import FormModel from 'components/FormModel.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
@@ -10,19 +10,16 @@ import VnSelectSupplier from 'src/components/common/VnSelectSupplier.vue';
 
 const { t } = useI18n();
 const router = useRouter();
-const route = useRoute();
 
-const filter = { include: [{ relation: 'supplier' }] };
 const onSave = (data, response) => {
     router.push({ name: 'RoadmapSummary', params: { id: response?.id } });
 };
 </script>
 <template>
     <FormModel
-        :url="`Roadmaps/${route.params?.id}`"
+        :update-url="`Roadmaps/${$route.params?.id}`"
         observe-form-changes
-        :filter="filter"
+        model="Roadmap"
-        model="roadmap"
         auto-load
         @on-data-saved="onSave"
     >

src/pages/Route/Roadmap/RoadmapCard.vue

@@ -3,5 +3,5 @@ import VnCardBeta from 'components/common/VnCardBeta.vue';
 import RoadmapDescriptor from 'pages/Route/Roadmap/RoadmapDescriptor.vue';
 </script>
 <template>
-    <VnCardBeta data-key="Roadmap" base-url="Roadmaps" :descriptor="RoadmapDescriptor" />
+    <VnCardBeta data-key="Roadmap" url="Roadmaps" :descriptor="RoadmapDescriptor" />
 </template>

src/pages/Route/Roadmap/RoadmapDescriptor.vue

@@ -1,13 +1,13 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'components/ui/VnLv.vue';
-import useCardDescription from 'composables/useCardDescription';
 import { dashIfEmpty, toDateHourMin } from 'src/filters';
 import SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import RoadmapDescriptorMenu from 'pages/Route/Roadmap/RoadmapDescriptorMenu.vue';
+import filter from 'pages/Route/Roadmap/RoadmapFilter.js';
 
 const $props = defineProps({
     id: {
@@ -23,10 +23,6 @@ const { t } = useI18n();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-
-const filter = { include: [{ relation: 'supplier' }] };
-const data = ref(useCardDescription());
-const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
 </script>
 
 <template>
@@ -34,10 +30,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         module="Roadmap"
         :url="`Roadmaps/${entityId}`"
         :filter="filter"
-        :title="data.title"
-        :subtitle="data.subtitle"
         data-key="Roadmap"
-        @on-fetch="setData"
     >
         <template #body="{ entity }">
             <VnLv :label="t('Roadmap')" :value="entity?.name" />

src/pages/Route/Roadmap/RoadmapFilter.js

@@ -0,0 +1,3 @@
+export default {
+    include: [{ relation: 'supplier' }],
+};

src/pages/Route/Roadmap/RoadmapSummary.vue

@@ -67,7 +67,6 @@ const filter = {
             },
         },
     ],
-    where: { id: entityId },
 };
 </script>
 
@@ -76,7 +75,7 @@ const filter = {
         <CardSummary
             data-key="RoadmapSummary"
             ref="summary"
-            :url="`Roadmaps`"
+            :url="`Roadmaps/${entityId}`"
             :filter="filter"
         >
             <template #header-left>

src/pages/Shelving/Card/ShelvingCard.vue

@@ -1,12 +1,14 @@
 <script setup>
 import VnCardBeta from 'components/common/VnCardBeta.vue';
 import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
+import filter from './ShelvingFilter.js';
 </script>
 
 <template>
     <VnCardBeta
         data-key="Shelving"
-        base-url="Shelvings"
+        url="Shelvings"
+        :filter="filter"
         :descriptor="ShelvingDescriptor"
     />
 </template>

src/pages/Shelving/Card/ShelvingDescriptor.vue

@@ -1,12 +1,12 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'components/ui/VnLv.vue';
-import useCardDescription from 'composables/useCardDescription';
 import ShelvingDescriptorMenu from 'pages/Shelving/Card/ShelvingDescriptorMenu.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import filter from './ShelvingFilter.js';
 
 const $props = defineProps({
     id: {
@@ -22,35 +22,14 @@ const { t } = useI18n();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-
-const filter = {
-    include: [
-        {
-            relation: 'worker',
-            scope: {
-                fields: ['id'],
-                include: {
-                    relation: 'user',
-                    scope: { fields: ['nickname'] },
-                },
-            },
-        },
-        { relation: 'parking' },
-    ],
-};
-const data = ref(useCardDescription());
-const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
 </script>
-
 <template>
     <CardDescriptor
         module="Shelving"
         :url="`Shelvings/${entityId}`"
         :filter="filter"
-        :title="data.title"
+        title="code"
-        :subtitle="data.subtitle"
+        data-key="Shelving"
-        data-key="Shelvings"
-        @on-fetch="setData"
     >
         <template #body="{ entity }">
             <VnLv :label="t('globals.code')" :value="entity.code" />

src/pages/Shelving/Card/ShelvingFilter.js

@@ -0,0 +1,15 @@
+export default {
+    include: [
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: {
+                    relation: 'user',
+                    scope: { fields: ['nickname'] },
+                },
+            },
+        },
+        { relation: 'parking' },
+    ],
+};

src/pages/Shelving/Card/ShelvingForm.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import VnRow from 'components/ui/VnRow.vue';
@@ -7,8 +6,8 @@ import FormModel from 'components/FormModel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import filter from './ShelvingFilter.js';
 
-const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const entityId = computed(() => route.params.id ?? null);
@@ -20,22 +19,6 @@ const defaultInitialData = {
     isRecyclable: false,
 };
 
-const shelvingFilter = {
-    include: [
-        {
-            relation: 'worker',
-            scope: {
-                fields: ['id'],
-                include: {
-                    relation: 'user',
-                    scope: { fields: ['nickname'] },
-                },
-            },
-        },
-        { relation: 'parking' },
-    ],
-};
-
 const onSave = (shelving, newShelving) => {
     if (isNew) {
         router.push({ name: 'ShelvingBasicData', params: { id: newShelving?.id } });
@@ -45,11 +28,10 @@ const onSave = (shelving, newShelving) => {
 <template>
     <VnSubToolbar v-if="isNew" />
     <FormModel
-        :url="isNew ? null : `Shelvings/${entityId}`"
         :url-create="isNew ? 'Shelvings' : null"
         :observe-form-changes="!isNew"
-        :filter="shelvingFilter"
+        :filter="filter"
-        model="shelving"
+        model="Shelving"
         :auto-load="!isNew"
         :form-initial-data="isNew ? defaultInitialData : null"
         @on-data-saved="onSave"
@@ -58,7 +40,7 @@ const onSave = (shelving, newShelving) => {
             <VnRow>
                 <VnInput
                     v-model="data.code"
-                    :label="t('globals.code')"
+                    :label="$t('globals.code')"
                     :rules="validate('Shelving.code')"
                 />
                 <VnSelect
@@ -68,7 +50,7 @@ const onSave = (shelving, newShelving) => {
                     option-label="code"
                     :filter-options="['id', 'code']"
                     :fields="['id', 'code']"
-                    :label="t('shelving.list.parking')"
+                    :label="$t('shelving.list.parking')"
                     :rules="validate('Shelving.parkingFk')"
                 />
             </VnRow>
@@ -76,12 +58,12 @@ const onSave = (shelving, newShelving) => {
                 <VnInput
                     v-model="data.priority"
                     type="number"
-                    :label="t('shelving.list.priority')"
+                    :label="$t('shelving.list.priority')"
                     :rules="validate('Shelving.priority')"
                 />
                 <QCheckbox
                     v-model="data.isRecyclable"
-                    :label="t('shelving.summary.recyclable')"
+                    :label="$t('shelving.summary.recyclable')"
                     :rules="validate('Shelving.isRecyclable')"
                 />
             </VnRow>

src/pages/Shelving/Card/ShelvingSearchbar.vue

@@ -1,15 +1,15 @@
 <script setup>
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import {useI18n} from "vue-i18n";
+import exprBuilder from '../ShelvingExprBuilder.js';
-const { t } = useI18n();
 </script>
 
 <template>
     <VnSearchbar
         data-key="ShelvingList"
         url="Shelvings"
-        :label="t('Search shelving')"
+        :label="$t('Search shelving')"
-        :info="t('You can search by shelving reference')"
+        :info="$t('You can search by shelving reference')"
+        :expr-builder="exprBuilder"
     />
 </template>
 

src/pages/Shelving/Card/ShelvingSummary.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import VnUserLink from 'components/ui/VnUserLink.vue';
+import filter from './ShelvingFilter.js';
 import ShelvingDescriptorMenu from './ShelvingDescriptorMenu.vue';
 
 const $props = defineProps({
@@ -14,25 +14,9 @@ const $props = defineProps({
     },
 });
 const route = useRoute();
-const { t } = useI18n();
+
 const summary = ref({});
 const entityId = computed(() => $props.id || route.params.id);
-
-const filter = {
-    include: [
-        {
-            relation: 'worker',
-            scope: {
-                fields: ['id'],
-                include: {
-                    relation: 'user',
-                    scope: { fields: ['nickname'] },
-                },
-            },
-        },
-        { relation: 'parking' },
-    ],
-};
 </script>
 
 <template>
@@ -41,7 +25,7 @@ const filter = {
             ref="summary"
             :url="`Shelvings/${entityId}`"
             :filter="filter"
-            data-key="ShelvingSummary"
+            data-key="Shelving"
         >
             <template #header="{ entity }">
                 <div>{{ entity.code }}</div>
@@ -58,16 +42,19 @@ const filter = {
                         class="header header-link"
                         :to="{ name: 'ShelvingBasicData', params: { id: entityId } }"
                     >
-                        {{ t('globals.pageTitles.basicData') }}
+                        {{ $t('globals.pageTitles.basicData') }}
                         <QIcon name="open_in_new" />
                     </RouterLink>
-                    <VnLv :label="t('globals.code')" :value="entity.code" />
+                    <VnLv :label="$t('globals.code')" :value="entity.code" />
                     <VnLv
-                        :label="t('shelving.list.parking')"
+                        :label="$t('shelving.list.parking')"
                         :value="entity.parking?.code"
                     />
-                    <VnLv :label="t('shelving.list.priority')" :value="entity.priority" />
+                    <VnLv
-                    <VnLv v-if="entity.worker" :label="t('globals.worker')">
+                        :label="$t('shelving.list.priority')"
+                        :value="entity.priority"
+                    />
+                    <VnLv v-if="entity.worker" :label="$t('globals.worker')">
                         <template #value>
                             <VnUserLink
                                 :name="entity.worker?.user?.nickname"
@@ -76,7 +63,7 @@ const filter = {
                         </template>
                     </VnLv>
                     <VnLv
-                        :label="t('shelving.summary.recyclable')"
+                        :label="$t('shelving.summary.recyclable')"
                         :value="entity.isRecyclable"
                     />
                 </QCard>

src/pages/Shelving/ShelvingExprBuilder.js

@@ -0,0 +1,10 @@
+export default (param, value) => {
+    switch (param) {
+        case 'search':
+            return { code: { like: `%${value}%` } };
+        case 'parkingFk':
+        case 'userFk':
+        case 'isRecyclable':
+            return { [param]: value };
+    }
+};

src/pages/Shelving/ShelvingList.vue

@@ -1,6 +1,5 @@
 <script setup>
 import VnPaginate from 'components/ui/VnPaginate.vue';
-import { useI18n } from 'vue-i18n';
 import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import { useRouter } from 'vue-router';
@@ -8,9 +7,9 @@ import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
 import ShelvingSummary from 'pages/Shelving/Card/ShelvingSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import VnSection from 'src/components/common/VnSection.vue';
+import exprBuilder from './ShelvingExprBuilder.js';
 
 const router = useRouter();
-const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const dataKey = 'ShelvingList';
 
@@ -21,17 +20,6 @@ const filter = {
 function navigate(id) {
     router.push({ path: `/shelving/${id}` });
 }
-
-function exprBuilder(param, value) {
-    switch (param) {
-        case 'search':
-            return { code: { like: `%${value}%` } };
-        case 'parkingFk':
-        case 'userFk':
-        case 'isRecyclable':
-            return { [param]: value };
-    }
-}
 </script>
 
 <template>
@@ -62,18 +50,18 @@ function exprBuilder(param, value) {
                             >
                                 <template #list-items>
                                     <VnLv
-                                        :label="t('shelving.list.parking')"
+                                        :label="$t('shelving.list.parking')"
-                                        :title-label="t('shelving.list.parking')"
+                                        :title-label="$t('shelving.list.parking')"
                                         :value="row.parking?.code"
                                     />
                                     <VnLv
-                                        :label="t('shelving.list.priority')"
+                                        :label="$t('shelving.list.priority')"
                                         :value="row?.priority"
                                     />
                                 </template>
                                 <template #actions>
                                     <QBtn
-                                        :label="t('components.smartCard.openSummary')"
+                                        :label="$t('components.smartCard.openSummary')"
                                         @click.stop="viewSummary(row.id, ShelvingSummary)"
                                         color="primary"
                                     />
@@ -86,7 +74,7 @@ function exprBuilder(param, value) {
                     <RouterLink :to="{ name: 'ShelvingCreate' }">
                         <QBtn fab icon="add" color="primary" shortcut="+" />
                         <QTooltip>
-                            {{ t('shelving.list.newShelving') }}
+                            {{ $t('shelving.list.newShelving') }}
                         </QTooltip>
                     </RouterLink>
                 </QPageSticky>

src/pages/Supplier/Card/SupplierBasicData.vue

@@ -19,9 +19,8 @@ const companySizes = [
 </script>
 <template>
     <FormModel
-        :url="`Suppliers/${route.params.id}`"
         :url-update="`Suppliers/${route.params.id}`"
-        model="supplier"
+        model="Supplier"
         auto-load
         :clear-store-on-unmount="false"
         @on-data-saved="arrayData.fetch({})"

src/pages/Supplier/Card/SupplierCard.vue

@@ -1,14 +1,14 @@
 <script setup>
 import VnCard from 'components/common/VnCard.vue';
 import SupplierDescriptor from './SupplierDescriptor.vue';
-import SupplierListFilter from '../SupplierListFilter.vue';
+import filter from './SupplierFilter.js';
 </script>
 <template>
     <VnCard
         data-key="Supplier"
-        base-url="Suppliers"
+        url="Suppliers"
+        :filter="filter"
         :descriptor="SupplierDescriptor"
-        :filter-panel="SupplierListFilter"
         search-data-key="SupplierList"
         :searchbar-props="{
             url: 'Suppliers/filter',

src/pages/Supplier/Card/SupplierDescriptor.vue

@@ -7,8 +7,8 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 
 import { toDateString } from 'src/filters';
-import useCardDescription from 'src/composables/useCardDescription';
 import { getUrl } from 'src/composables/getUrl';
+import filter from './SupplierFilter.js';
 import { useArrayData } from 'src/composables/useArrayData';
 
 const $props = defineProps({
@@ -28,42 +28,6 @@ const { t } = useI18n();
 const url = ref();
 const arrayData = useArrayData();
 
-const filter = {
-    fields: [
-        'id',
-        'name',
-        'nickname',
-        'nif',
-        'payMethodFk',
-        'payDemFk',
-        'payDay',
-        'isActive',
-        'isReal',
-        'isTrucker',
-        'account',
-    ],
-    include: [
-        {
-            relation: 'payMethod',
-            scope: {
-                fields: ['id', 'name'],
-            },
-        },
-        {
-            relation: 'payDem',
-            scope: {
-                fields: ['id', 'payDem'],
-            },
-        },
-        {
-            relation: 'client',
-            scope: {
-                fields: ['id', 'fi'],
-            },
-        },
-    ],
-};
-
 onMounted(async () => {
     url.value = await getUrl('');
 });
@@ -72,11 +36,6 @@ const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 
-const data = ref(useCardDescription());
-const setData = (entity) => {
-    data.value = useCardDescription(entity.ref, entity.id);
-};
-
 const supplier = computed(() => arrayData.store.data);
 
 const getEntryQueryParams = (supplier) => {
@@ -105,11 +64,8 @@ const getEntryQueryParams = (supplier) => {
     <CardDescriptor
         module="Supplier"
         :url="`Suppliers/${entityId}`"
-        :title="data.title"
-        :subtitle="data.subtitle"
         :filter="filter"
-        @on-fetch="setData"
+        data-key="Supplier"
-        data-key="supplierDescriptor"
         :summary="$props.summary"
     >
         <template #body="{ entity }">

src/pages/Supplier/Card/SupplierFilter.js

@@ -0,0 +1,35 @@
+export default {
+    fields: [
+        'id',
+        'name',
+        'nickname',
+        'nif',
+        'payMethodFk',
+        'payDemFk',
+        'payDay',
+        'isActive',
+        'isSerious',
+        'isTrucker',
+        'account',
+    ],
+    include: [
+        {
+            relation: 'payMethod',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+        {
+            relation: 'payDem',
+            scope: {
+                fields: ['id', 'payDem'],
+            },
+        },
+        {
+            relation: 'client',
+            scope: {
+                fields: ['id', 'fi'],
+            },
+        },
+    ],
+};

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

@@ -10,7 +10,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { toCurrency } from 'filters/index';
 import { useRole } from 'src/composables/useRole';
 
-const haveNegatives = defineModel('haveNegatives', { type: Boolean, required: true });
+const haveNegatives = defineModel('have-negatives', { type: Boolean, required: true });
 const formData = defineModel({ type: Object, required: true });
 
 const stateStore = useStateStore();

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

@@ -1,7 +1,7 @@
 <script setup>
-import { ref, onBeforeMount } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 
 import TicketBasicData from './TicketBasicData.vue';
 import TicketBasicDataForm from './TicketBasicDataForm.vue';
@@ -9,104 +9,69 @@ import { useVnConfirm } from 'composables/useVnConfirm';
 
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
+import { useArrayData } from 'src/composables/useArrayData';
 
 const { notify } = useNotify();
-const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
 const stepperRef = ref(null);
 const { openConfirmationModal } = useVnConfirm();
 
 const step = ref(1);
-const formData = ref({});
+const haveNegatives = ref(true);
-const initialDataLoaded = ref(false);
-const haveNegatives = ref(false);
 
-const ticketFilter = {
+const ticket = computed(() => useArrayData('Ticket').store?.data);
-    include: [
-        { relation: 'address' },
-        {
-            relation: 'client',
-            scope: {
-                fields: [
-                    'salesPersonFk',
-                    'name',
-                    'isActive',
-                    'isFreezed',
-                    'isTaxDataChecked',
-                    'credit',
-                    'email',
-                    'phone',
-                    'mobile',
-                    'hasElectronicInvoice',
-                ],
-                include: {
-                    relation: 'salesPersonUser',
-                    scope: { fields: ['id', 'name'] },
-                },
-            },
-        },
-        { relation: 'invoiceOut' },
-    ],
-};
-
-const getTicketData = async () => {
-    const params = { filter: JSON.stringify(ticketFilter) };
-    const { data } = await axios.get(`tickets/${route.params.id}`, { params });
-    formData.value = data;
-    initialDataLoaded.value = true;
-};
 
 const isFormInvalid = () => {
     return (
-        !formData.value.clientFk ||
+        !ticket.value.clientFk ||
-        !formData.value.addressFk ||
+        !ticket.value.addressFk ||
-        !formData.value.agencyModeFk ||
+        !ticket.value.agencyModeFk ||
-        !formData.value.companyFk ||
+        !ticket.value.companyFk ||
-        !formData.value.shipped ||
+        !ticket.value.shipped ||
-        !formData.value.landed ||
+        !ticket.value.landed ||
-        !formData.value.zoneFk
+        !ticket.value.zoneFk
     );
 };
 
 const getPriceDifference = async () => {
     const params = {
-        landed: formData.value.landed,
+        landed: ticket.value.landed,
-        addressId: formData.value.addressFk,
+        addressId: ticket.value.addressFk,
-        agencyModeId: formData.value.agencyModeFk,
+        agencyModeId: ticket.value.agencyModeFk,
-        zoneId: formData.value.zoneFk,
+        zoneId: ticket.value.zoneFk,
-        warehouseId: formData.value.warehouseFk,
+        warehouseId: ticket.value.warehouseFk,
-        shipped: formData.value.shipped,
+        shipped: ticket.value.shipped,
     };
     const { data } = await axios.post(
-        `tickets/${formData.value.id}/priceDifference`,
+        `tickets/${ticket.value.id}/priceDifference`,
         params
     );
-    formData.value.sale = data;
+    ticket.value.sale = data;
 };
 
 const submit = async () => {
-    if (!formData.value.option) return notify(t('basicData.chooseAnOption'), 'negative');
+    if (!ticket.value.option) return notify(t('basicData.chooseAnOption'), 'negative');
 
     const params = {
-        clientFk: formData.value.clientFk,
+        clientFk: ticket.value.clientFk,
-        nickname: formData.value.nickname,
+        nickname: ticket.value.nickname,
-        agencyModeFk: formData.value.agencyModeFk,
+        agencyModeFk: ticket.value.agencyModeFk,
-        addressFk: formData.value.addressFk,
+        addressFk: ticket.value.addressFk,
-        zoneFk: formData.value.zoneFk,
+        zoneFk: ticket.value.zoneFk,
-        warehouseFk: formData.value.warehouseFk,
+        warehouseFk: ticket.value.warehouseFk,
-        companyFk: formData.value.companyFk,
+        companyFk: ticket.value.companyFk,
-        shipped: formData.value.shipped,
+        shipped: ticket.value.shipped,
-        landed: formData.value.landed,
+        landed: ticket.value.landed,
-        isDeleted: formData.value.isDeleted,
+        isDeleted: ticket.value.isDeleted,
-        option: formData.value.option,
+        option: ticket.value.option,
-        isWithoutNegatives: formData.value.withoutNegatives,
+        isWithoutNegatives: ticket.value.withoutNegatives,
-        withWarningAccept: formData.value.withWarningAccept,
+        withWarningAccept: ticket.value.withWarningAccept,
         keepPrice: false,
     };
 
     const { data } = await axios.post(
-        `tickets/${formData.value.id}/componentUpdate`,
+        `tickets/${ticket.value.id}/componentUpdate`,
         params
     );
 
@@ -118,7 +83,7 @@ const submit = async () => {
 };
 
 const submitWithNegatives = async () => {
-    formData.value.withWarningAccept = true;
+    ticket.value.withWarningAccept = true;
     submit();
 };
 
@@ -130,7 +95,7 @@ const onNextStep = async () => {
         await getPriceDifference();
         stepperRef.value.next();
     } else if (step.value === 2) {
-        if (haveNegatives.value && !formData.value.withoutNegatives)
+        if (haveNegatives.value && !ticket.value.withoutNegatives)
             openConfirmationModal(
                 t('basicData.negativesConfirmTitle'),
                 t('basicData.negativesConfirmMessage'),
@@ -139,11 +104,10 @@ const onNextStep = async () => {
         else submit();
     }
 };
-
-onBeforeMount(async () => await getTicketData());
 </script>
 <template>
     <QStepper
+        v-if="ticket"
         v-model="step"
         ref="stepperRef"
         color="primary"
@@ -155,10 +119,10 @@ onBeforeMount(async () => await getTicketData());
         }"
     >
         <QStep :name="1" :title="t('globals.pageTitles.basicData')" :done="step > 1">
-            <TicketBasicDataForm v-if="initialDataLoaded" v-model="formData" />
+            <TicketBasicDataForm v-model="ticket" />
         </QStep>
         <QStep :name="2" :title="t('basicData.priceDifference')">
-            <TicketBasicData v-model="formData" v-model:have-negatives="haveNegatives" />
+            <TicketBasicData v-model="ticket" v-model:have-negatives="haveNegatives" />
         </QStep>
         <template #navigation>
             <QStepperNavigation class="flex justify-between">

src/pages/Ticket/Card/TicketCard.vue

@@ -1,7 +1,13 @@
 <script setup>
 import VnCardBeta from 'components/common/VnCardBeta.vue';
 import TicketDescriptor from './TicketDescriptor.vue';
+import filter from './TicketFilter.js';
 </script>
 <template>
-    <VnCardBeta data-key="Ticket" base-url="Tickets" :descriptor="TicketDescriptor" />
+    <VnCardBeta
+        data-key="Ticket"
+        url="Tickets"
+        :descriptor="TicketDescriptor"
+        :filter="filter"
+    />
 </template>

src/pages/Ticket/Card/TicketComponents.vue

@@ -19,7 +19,7 @@ import RightMenu from 'src/components/common/RightMenu.vue';
 const route = useRoute();
 const { t } = useI18n();
 const salesRef = ref(null);
-const arrayData = useArrayData('ticketData');
+const arrayData = useArrayData('Ticket');
 const { store } = arrayData;
 
 const ticketData = computed(() => store.data);

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -6,10 +6,9 @@ import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import TicketDescriptorMenu from './TicketDescriptorMenu.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import useCardDescription from 'src/composables/useCardDescription';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import { toDateTimeFormat } from 'src/filters/date';
-
+import filter from './TicketFilter.js';
 const $props = defineProps({
     id: {
         type: Number,
@@ -29,87 +28,9 @@ const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 
-const filter = {
-    include: [
-        {
-            relation: 'address',
-            scope: {
-                fields: ['id', 'name', 'mobile', 'phone', 'incotermsFk'],
-            },
-        },
-        {
-            relation: 'client',
-            scope: {
-                fields: [
-                    'id',
-                    'name',
-                    'salesPersonFk',
-                    'phone',
-                    'mobile',
-                    'email',
-                    'isActive',
-                    'isFreezed',
-                    'isTaxDataChecked',
-                    'hasElectronicInvoice',
-                ],
-                include: [
-                    {
-                        relation: 'user',
-                        scope: {
-                            fields: ['id', 'lang'],
-                        },
-                    },
-                    { relation: 'salesPersonUser' },
-                ],
-            },
-        },
-        {
-            relation: 'ticketState',
-            scope: {
-                include: { relation: 'state' },
-            },
-        },
-        {
-            relation: 'warehouse',
-            scope: {
-                fields: ['id', 'name'],
-            },
-        },
-        {
-            relation: 'agencyMode',
-            scope: {
-                fields: ['id', 'name'],
-            },
-        },
-        {
-            relation: 'zone',
-            scope: {
-                fields: [
-                    'agencyModeFk',
-                    'bonus',
-                    'hour',
-                    'id',
-                    'isVolumetric',
-                    'itemMaxSize',
-                    'm3Max',
-                    'name',
-                    'price',
-                    'travelingDays',
-                ],
-            },
-        },
-    ],
-};
-
-const data = ref(useCardDescription());
-
 function ticketFilter(ticket) {
     return JSON.stringify({ clientFk: ticket.clientFk });
 }
-
-const setData = (entity) => {
-    data.value = useCardDescription(entity.ref, entity.id);
-};
 </script>
 
 <template>
@@ -117,11 +38,8 @@ const setData = (entity) => {
         module="Ticket"
         :url="`Tickets/${entityId}`"
         :filter="filter"
-        :title="data.title"
+        data-key="Ticket"
-        :subtitle="data.subtitle"
-        @on-fetch="setData"
         :summary="$props.summary"
-        data-key="ticketData"
         width="lg-width"
     >
         <template #menu="{ entity }">
@@ -170,7 +88,7 @@ const setData = (entity) => {
         <template #icons="{ entity }">
             <QCardActions class="q-gutter-x-md">
                 <QIcon
-                    v-if="entity.client.isActive == false"
+                    v-if="entity.client?.isActive == false"
                     name="vn:disabled"
                     size="xs"
                     color="primary"
@@ -178,7 +96,7 @@ const setData = (entity) => {
                     <QTooltip>{{ t('Client inactive') }}</QTooltip>
                 </QIcon>
                 <QIcon
-                    v-if="entity.client.isFreezed == true"
+                    v-if="entity.client?.isFreezed == true"
                     name="vn:frozen"
                     size="xs"
                     color="primary"
@@ -194,7 +112,7 @@ const setData = (entity) => {
                     <QTooltip>{{ t('Client has debt') }}</QTooltip>
                 </QIcon>
                 <QIcon
-                    v-if="entity.client.isTaxDataChecked == false"
+                    v-if="entity.client?.isTaxDataChecked == false"
                     name="vn:no036"
                     size="xs"
                     color="primary"

src/pages/Ticket/Card/TicketExpedition.vue

@@ -40,7 +40,7 @@ const expeditionsFilter = computed(() => ({
     order: ['created DESC'],
 }));
 
-const ticketArrayData = useArrayData('ticketData');
+const ticketArrayData = useArrayData('Ticket');
 const ticketStore = ticketArrayData.store;
 const ticketData = computed(() => ticketStore.data);