Merge branch 'dev' into 7717_fixOrderCatalog

src/boot/axios.js

@@ -43,6 +43,15 @@ const onResponseError = (error) => {
     }
 
     switch (response?.status) {
+        case 422:
+            if (error.name == 'ValidationError')
+                message +=
+                    ' "' +
+                    responseError.details.context +
+                    '.' +
+                    Object.keys(responseError.details.codes).join(',') +
+                    '"';
+            break;
         case 500:
             message = 'errors.statusInternalServerError';
             break;

src/components/CreateNewCityForm.vue

@@ -4,8 +4,8 @@ import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSelectProvince from 'components/VnSelectProvince.vue';
-import VnInput from 'src/components/common/VnInput.vue';
+import VnInput from 'components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
 const emit = defineEmits(['onDataSaved']);
@@ -19,8 +19,8 @@ const cityFormData = reactive({
 
 const provincesOptions = ref([]);
 
-const onDataSaved = (dataSaved) => {
+const onDataSaved = (...args) => {
-    emit('onDataSaved', dataSaved);
+    emit('onDataSaved', ...args);
 };
 </script>
 
@@ -36,7 +36,7 @@ const onDataSaved = (dataSaved) => {
         :form-initial-data="cityFormData"
         url-create="towns"
         model="city"
-        @on-data-saved="onDataSaved($event)"
+        @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
             <VnRow>
@@ -45,15 +45,7 @@ const onDataSaved = (dataSaved) => {
                     v-model="data.name"
                     :rules="validate('city.name')"
                 />
-                <VnSelect
+                <VnSelectProvince v-model="data.provinceFk" />
-                    :label="t('Province')"
-                    :options="provincesOptions"
-                    hide-selected
-                    option-label="name"
-                    option-value="id"
-                    v-model="data.provinceFk"
-                    :rules="validate('city.provinceFk')"
-                />
             </VnRow>
         </template>
     </FormModelPopup>

src/components/CreateNewPostcodeForm.vue

@@ -5,9 +5,9 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSelectProvince from 'src/components/VnSelectProvince.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import CreateNewCityForm from './CreateNewCityForm.vue';
-import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
@@ -22,20 +22,17 @@ const postcodeFormData = reactive({
     townFk: null,
 });
 
-const townsFetchDataRef = ref(null);
 const provincesFetchDataRef = ref(null);
 const countriesOptions = ref([]);
 const provincesOptions = ref([]);
-const townsLocationOptions = ref([]);
+const town = ref({});
 
-const onDataSaved = (formData) => {
+function onDataSaved(formData) {
     const newPostcode = {
         ...formData,
     };
-    const townObject = townsLocationOptions.value.find(
+    newPostcode.town = town.value.name;
-        ({ id }) => id === formData.townFk
+    newPostcode.townFk = town.value.id;
-    );
-    newPostcode.town = townObject?.name;
     const provinceObject = provincesOptions.value.find(
         ({ id }) => id === formData.provinceFk
     );
@@ -43,39 +40,40 @@ const onDataSaved = (formData) => {
     const countryObject = countriesOptions.value.find(
         ({ id }) => id === formData.countryFk
     );
-    newPostcode.country = countryObject?.country;
+    newPostcode.country = countryObject?.name;
     emit('onDataSaved', newPostcode);
-};
+}
 
-const onCityCreated = async ({ name, provinceFk }, formData) => {
+async function onCityCreated(newTown, formData) {
-    await townsFetchDataRef.value.fetch();
+    newTown.province = provincesOptions.value.find(
-    formData.townFk = townsLocationOptions.value.find((town) => town.name === name).id;
+        (province) => province.id === newTown.provinceFk
-    formData.provinceFk = provinceFk;
+    );
-    formData.countryFk = provincesOptions.value.find(
+    formData.townFk = newTown;
-        (province) => province.id === provinceFk
+    setTown(newTown, formData);
-    ).countryFk;
+}
-};
 
-const onProvinceCreated = async ({ name }, formData) => {
+function setTown(newTown, data) {
+    if (!newTown) return;
+    town.value = newTown;
+    data.provinceFk = newTown.provinceFk;
+    data.countryFk = newTown.province.countryFk;
+}
+
+async function setProvince(id, data) {
     await provincesFetchDataRef.value.fetch();
-    formData.provinceFk = provincesOptions.value.find(
+    const newProvince = provincesOptions.value.find((province) => province.id == id);
-        (province) => province.name === name
+    if (!newProvince) return;
-    ).id;
+
-};
+    data.countryFk = newProvince.countryFk;
+}
 </script>
 
 <template>
-    <FetchData
-        ref="townsFetchDataRef"
-        @on-fetch="(data) => (townsLocationOptions = data)"
-        auto-load
-        url="Towns/location"
-    />
     <FetchData
         ref="provincesFetchDataRef"
         @on-fetch="(data) => (provincesOptions = data)"
         auto-load
-        url="Provinces"
+        url="Provinces/location"
     />
     <FetchData
         @on-fetch="(data) => (countriesOptions = data)"
@@ -88,6 +86,7 @@ const onProvinceCreated = async ({ name }, formData) => {
         :title="t('New postcode')"
         :subtitle="t('Please, ensure you put the correct data!')"
         :form-initial-data="postcodeFormData"
+        :mapper="(data) => (data.townFk = data.townFk.id) && data"
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
@@ -99,38 +98,43 @@ const onProvinceCreated = async ({ name }, formData) => {
                 />
                 <VnSelectDialog
                     :label="t('City')"
-                    :options="townsLocationOptions"
+                    url="Towns/location"
+                    @update:model-value="(value) => setTown(value, data)"
                     v-model="data.townFk"
-                    hide-selected
                     option-label="name"
                     option-value="id"
                     :rules="validate('postcode.city')"
                     :roles-allowed-to-create="['deliveryAssistant']"
+                    :emit-value="false"
+                    clearable
                 >
+                    <template #option="{ itemProps, opt }">
+                        <QItem v-bind="itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{ opt.name }}</QItemLabel>
+                                <QItemLabel caption>
+                                    {{ opt.province.name }},
+                                    {{ opt.province.country.name }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
                     <template #form>
-                        <CreateNewCityForm @on-data-saved="onCityCreated($event, data)" />
+                        <CreateNewCityForm
+                            @on-data-saved="
+                                (_, requestResponse) =>
+                                    onCityCreated(requestResponse, data)
+                            "
+                        />
                     </template>
                 </VnSelectDialog>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-xl">
+            <VnRow>
-                <VnSelectDialog
+                <VnSelectProvince
-                    :label="t('Province')"
+                    @update:model-value="(value) => setProvince(value, data)"
-                    :options="provincesOptions"
-                    hide-selected
-                    option-label="name"
-                    option-value="id"
                     v-model="data.provinceFk"
-                    :rules="validate('postcode.provinceFk')"
-                    :roles-allowed-to-create="['deliveryAssistant']"
-                >
-                    <template #form>
-                        <CreateNewProvinceForm
-                            @on-data-saved="onProvinceCreated($event, data)"
                 />
-                    </template> </VnSelectDialog
+                <VnSelect
-            ></VnRow>
-            <VnRow class="row q-gutter-md q-mb-xl"
-                ><VnSelect
                     :label="t('Country')"
                     :options="countriesOptions"
                     hide-selected

src/components/CreateNewProvinceForm.vue

@@ -19,8 +19,11 @@ const provinceFormData = reactive({
 
 const autonomiesOptions = ref([]);
 
-const onDataSaved = (dataSaved) => {
+const onDataSaved = (dataSaved, requestResponse) => {
-    emit('onDataSaved', dataSaved);
+    requestResponse.autonomy = autonomiesOptions.value.find(
+        (autonomy) => autonomy.id == requestResponse.autonomyFk
+    );
+    emit('onDataSaved', dataSaved, requestResponse);
 };
 </script>
 
@@ -28,7 +31,7 @@ const onDataSaved = (dataSaved) => {
     <FetchData
         @on-fetch="(data) => (autonomiesOptions = data)"
         auto-load
-        url="Autonomies"
+        url="Autonomies/location"
     />
     <FormModelPopup
         :title="t('New province')"
@@ -36,7 +39,7 @@ const onDataSaved = (dataSaved) => {
         url-create="provinces"
         model="province"
         :form-initial-data="provinceFormData"
-        @on-data-saved="onDataSaved($event)"
+        @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
             <VnRow>
@@ -53,7 +56,16 @@ const onDataSaved = (dataSaved) => {
                     option-value="id"
                     v-model="data.autonomyFk"
                     :rules="validate('province.autonomyFk')"
-                />
+                >
+                    <template #option="{ itemProps, opt }">
+                        <QItem v-bind="itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{ opt.name }}</QItemLabel>
+                                <QItemLabel caption> {{ opt.country.name }} </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelect>
             </VnRow>
         </template>
     </FormModelPopup>

src/components/FormModel.vue

@@ -159,8 +159,8 @@ onBeforeRouteLeave((to, from, next) => {
         quasar.dialog({
             component: VnConfirm,
             componentProps: {
-                title: t('Unsaved changes will be lost'),
+                title: t('globals.unsavedPopup.title'),
-                message: t('Are you sure exit without saving?'),
+                message: t('globals.unsavedPopup.subtitle'),
                 promise: () => next(),
             },
         });
@@ -356,8 +356,3 @@ defineExpose({
     padding: 32px;
 }
 </style>
-<i18n>
-es:
-    Unsaved changes will be lost: Los cambios que no haya guardado se perderán
-    Are you sure exit without saving?: ¿Seguro que quiere salir sin guardar?
-</i18n>

src/components/VnSelectProvince.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { useValidator } from 'src/composables/useValidator';
+import { useI18n } from 'vue-i18n';
+
+import VnSelectDialog from 'components/common/VnSelectDialog.vue';
+import FetchData from 'components/FetchData.vue';
+import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
+
+const emit = defineEmits(['onProvinceCreated']);
+const provinceFk = defineModel({ type: Number });
+watch(provinceFk, async () => await provincesFetchDataRef.value.fetch());
+
+const { validate } = useValidator();
+const { t } = useI18n();
+
+const provincesOptions = ref();
+const provincesFetchDataRef = ref();
+
+async function onProvinceCreated(_, data) {
+    await provincesFetchDataRef.value.fetch();
+    provinceFk.value = data.id;
+    emit('onProvinceCreated', data);
+}
+</script>
+
+<template>
+    <FetchData
+        ref="provincesFetchDataRef"
+        :filter="{ include: { relation: 'country' } }"
+        @on-fetch="(data) => (provincesOptions = data)"
+        auto-load
+        url="Provinces"
+    />
+    <VnSelectDialog
+        :label="t('Province')"
+        :options="provincesOptions"
+        hide-selected
+        v-model="provinceFk"
+        :rules="validate && validate('postcode.provinceFk')"
+        :roles-allowed-to-create="['deliveryAssistant']"
+    >
+        <template #option="{ itemProps, opt }">
+            <QItem v-bind="itemProps">
+                <QItemSection>
+                    <QItemLabel>{{ opt.name }}</QItemLabel>
+                    <QItemLabel caption> {{ opt.country.name }} </QItemLabel>
+                </QItemSection>
+            </QItem>
+        </template>
+        <template #form>
+            <CreateNewProvinceForm @on-data-saved="onProvinceCreated" />
+        </template>
+    </VnSelectDialog>
+</template>
+<i18n>
+    es:
+        Province: Provincia
+</i18n>

src/components/VnTable/VnTable.vue

@@ -124,7 +124,7 @@ const tableModes = [
 ];
 onBeforeMount(() => {
     setUserParams(route.query[$props.searchUrl]);
-    hasParams.value = Object.keys(params.value).length !== 0;
+    hasParams.value = params.value && Object.keys(params.value).length !== 0;
 });
 
 onMounted(() => {
@@ -158,7 +158,10 @@ function setUserParams(watchedParams) {
     if (!watchedParams) return;
 
     if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
-    const filter = JSON.parse(watchedParams?.filter);
+    const filter =
+        typeof watchedParams?.filter == 'string'
+            ? JSON.parse(watchedParams?.filter)
+            : watchedParams?.filter;
     const where = filter?.where;
     const order = filter?.order;
 
@@ -281,6 +284,7 @@ defineExpose({
                 v-model="params"
                 :search-url="searchUrl"
                 :redirect="!!redirect"
+                @set-user-params="setUserParams"
             >
                 <template #body>
                     <div

src/components/common/VnComponent.vue

@@ -30,10 +30,10 @@ function mix(toComponent) {
     mixed = {
         component: customComponent?.component ?? component,
         attrs: {
-            ...toValueAttrs(customComponent?.attrs),
-            ...toValueAttrs(customComponent?.forceAttrs),
-            ...toComponent,
             ...toValueAttrs(attrs),
+            ...toValueAttrs(customComponent?.attrs),
+            ...toComponent,
+            ...toValueAttrs(customComponent?.forceAttrs),
         },
         event: { ...customComponent?.event, ...event },
     };

src/components/common/VnLocation.vue

@@ -1,123 +1,33 @@
 <script setup>
-import { ref, toRefs, computed, watch, onMounted } from 'vue';
 import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
-import FetchData from 'components/FetchData.vue';
-const emit = defineEmits(['update:modelValue', 'update:options']);
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
-const postcodesOptions = ref([]);
+const value = defineModel({ type: [String, Number, Object] });
-const postcodesRef = ref(null);
-
-const $props = defineProps({
-    modelValue: {
-        type: [String, Number, Object],
-        default: null,
-    },
-    options: {
-        type: Array,
-        default: () => [],
-    },
-    optionLabel: {
-        type: String,
-        default: '',
-    },
-    optionValue: {
-        type: String,
-        default: '',
-    },
-    filterOptions: {
-        type: Array,
-        default: () => [],
-    },
-    isClearable: {
-        type: Boolean,
-        default: true,
-    },
-    defaultFilter: {
-        type: Boolean,
-        default: true,
-    },
-});
-
-const { options } = toRefs($props);
-const myOptions = ref([]);
-const myOptionsOriginal = ref([]);
-
-const value = computed({
-    get() {
-        return $props.modelValue;
-    },
-    set(value) {
-        emit(
-            'update:modelValue',
-            postcodesOptions.value.find((p) => p.code === value)
-        );
-    },
-});
-
-onMounted(() => {
-    locationFilter($props.modelValue);
-});
-
-function setOptions(data) {
-    myOptions.value = JSON.parse(JSON.stringify(data));
-    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
-}
-setOptions(options.value);
-
-watch(options, (newValue) => {
-    setOptions(newValue);
-});
 
 function showLabel(data) {
     return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
 }
-
-function locationFilter(search = '') {
-    if (
-        search &&
-        (search.includes('undefined') || search.startsWith(`${$props.modelValue} - `))
-    )
-        return;
-    let where = { search };
-    postcodesRef.value.fetch({ filter: { where }, limit: 30 });
-}
-
-function handleFetch(data) {
-    postcodesOptions.value = data;
-}
-function onDataSaved(newPostcode) {
-    postcodesOptions.value.push(newPostcode);
-    value.value = newPostcode.code;
-}
 </script>
 <template>
-    <FetchData
-        ref="postcodesRef"
-        url="Postcodes/filter"
-        @on-fetch="(data) => handleFetch(data)"
-    />
     <VnSelectDialog
-        v-if="postcodesRef"
-        :option-label="(opt) => showLabel(opt) ?? 'code'"
-        :option-value="(opt) => opt.code"
         v-model="value"
-        :options="postcodesOptions"
+        option-value="code"
+        option-filter-value="search"
+        :option-label="(opt) => showLabel(opt)"
+        url="Postcodes/filter"
+        :use-like="false"
         :label="t('Location')"
         :placeholder="t('search_by_postalcode')"
-        @input-value="locationFilter"
-        :default-filter="false"
         :input-debounce="300"
         :class="{ required: $attrs.required }"
         v-bind="$attrs"
         clearable
+        :emit-value="false"
     >
         <template #form>
-            <CreateNewPostcode
+            <CreateNewPostcode @on-data-saved="(newValue) => (value = newValue)" />
-                @on-data-saved="onDataSaved"
-            />
         </template>
         <template #option="{ itemProps, opt }">
             <QItem v-bind="itemProps">

src/components/common/VnSelect.vue

@@ -25,6 +25,10 @@ const $props = defineProps({
         type: String,
         default: null,
     },
+    optionFilterValue: {
+        type: String,
+        default: null,
+    },
     url: {
         type: String,
         default: null,
@@ -70,7 +74,8 @@ const $props = defineProps({
 const { t } = useI18n();
 const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
 
-const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($props);
+const { optionLabel, optionValue, optionFilter, optionFilterValue, options, modelValue } =
+    toRefs($props);
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
@@ -82,6 +87,7 @@ const value = computed({
         return $props.modelValue;
     },
     set(value) {
+        setOptions(myOptionsOriginal.value);
         emit('update:modelValue', value);
     },
 });
@@ -137,16 +143,19 @@ async function fetchFilter(val) {
     if (!$props.url || !dataRef.value) return;
 
     const { fields, sortBy, limit } = $props;
-    let key = optionFilter.value ?? optionLabel.value;
+    const key =
-
+        optionFilterValue.value ??
-    if (new RegExp(/\d/g).test(val)) key = optionValue.value;
+        (new RegExp(/\d/g).test(val)
+            ? optionValue.value
+            : optionFilter.value ?? optionLabel.value);
 
     const defaultWhere = $props.useLike
         ? { [key]: { like: `%${val}%` } }
         : { [key]: val };
     const where = { ...(val ? defaultWhere : {}), ...$props.where };
-    const fetchOptions = { where, order: sortBy, limit };
+    const fetchOptions = { where, limit };
     if (fields) fetchOptions.fields = fields;
+    if (sortBy) fetchOptions.order = sortBy;
     return dataRef.value.fetch(fetchOptions);
 }
 
@@ -177,6 +186,10 @@ async function filterHandler(val, update) {
         }
     );
 }
+
+function nullishToTrue(value) {
+    return value ?? true;
+}
 </script>
 
 <template>
@@ -195,12 +208,12 @@ async function filterHandler(val, update) {
         :option-label="optionLabel"
         :option-value="optionValue"
         v-bind="$attrs"
-        emit-value
-        map-options
-        use-input
         @filter="filterHandler"
-        :hide-selected="$attrs['hide-selected'] ?? true"
+        :emit-value="nullishToTrue($attrs['emit-value'])"
-        :fill-input="$attrs['fill-input'] ?? true"
+        :map-options="nullishToTrue($attrs['map-options'])"
+        :use-input="nullishToTrue($attrs['use-input'])"
+        :hide-selected="nullishToTrue($attrs['hide-selected'])"
+        :fill-input="nullishToTrue($attrs['fill-input'])"
         ref="vnSelectRef"
         lazy-rules
         :class="{ required: $attrs.required }"

src/components/common/VnSelectDialog.vue

@@ -1,21 +1,12 @@
 <script setup>
 import { ref, computed } from 'vue';
-
-import VnSelect from 'src/components/common/VnSelect.vue';
-
 import { useRole } from 'src/composables/useRole';
 
+import VnSelect from 'src/components/common/VnSelect.vue';
 const emit = defineEmits(['update:modelValue']);
 
+const value = defineModel({ type: [String, Number, Object] });
 const $props = defineProps({
-    modelValue: {
-        type: [String, Number, Object],
-        default: null,
-    },
-    options: {
-        type: Array,
-        default: () => [],
-    },
     rolesAllowedToCreate: {
         type: Array,
         default: () => ['developer'],
@@ -33,15 +24,6 @@ const $props = defineProps({
 const role = useRole();
 const showForm = ref(false);
 
-const value = computed({
-    get() {
-        return $props.modelValue;
-    },
-    set(value) {
-        emit('update:modelValue', value);
-    },
-});
-
 const isAllowedToCreate = computed(() => {
     return role.hasAny($props.rolesAllowedToCreate);
 });
@@ -52,7 +34,11 @@ const toggleForm = () => {
 </script>
 
 <template>
-    <VnSelect v-model="value" :options="options" v-bind="$attrs">
+    <VnSelect
+        v-model="value"
+        v-bind="$attrs"
+        @update:model-value="(...args) => emit('update:modelValue', ...args)"
+    >
         <template v-if="isAllowedToCreate" #append>
             <QIcon
                 @click.stop.prevent="toggleForm()"

src/components/ui/VnFilterPanel.vue

@@ -57,7 +57,7 @@ const $props = defineProps({
     },
 });
 
-defineExpose({ search });
+defineExpose({ search, sanitizer });
 const emit = defineEmits([
     'update:modelValue',
     'refresh',
@@ -65,6 +65,7 @@ const emit = defineEmits([
     'search',
     'init',
     'remove',
+    'setUserParams',
 ]);
 
 const arrayData = useArrayData($props.dataKey, {
@@ -87,6 +88,7 @@ function setUserParams(watchedParams) {
     watchedParams = { ...watchedParams, ...watchedParams.filter?.where };
     delete watchedParams.filter;
     userParams.value = { ...userParams.value, ...watchedParams };
+    emit('setUserParams', userParams.value);
 }
 
 watch(
@@ -194,6 +196,14 @@ function formatValue(value) {
 
     return `"${value}"`;
 }
+
+function sanitizer(params) {
+    for (const [key, value] of Object.entries(params)) {
+        if (typeof value == 'object')
+            params[key] = Object.values(value)[0].replaceAll('%', '');
+    }
+    return params;
+}
 </script>
 
 <template>
@@ -276,7 +286,7 @@ function formatValue(value) {
             <QSeparator />
         </QList>
         <QList dense class="list q-gutter-y-sm q-mt-sm">
-            <slot name="body" :params="userParams" :search-fn="search"></slot>
+            <slot name="body" :params="sanitizer(userParams)" :search-fn="search"></slot>
         </QList>
     </QForm>
     <QInnerLoading

src/components/ui/VnNotes.vue

@@ -1,13 +1,18 @@
 <script setup>
-import VnAvatar from 'src/components/ui/VnAvatar.vue';
-import { toDateHourMin } from 'src/filters';
-import { ref } from 'vue';
 import axios from 'axios';
+import { ref } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import VnPaginate from './VnPaginate.vue';
+import { useQuasar } from 'quasar';
-import VnUserLink from '../ui/VnUserLink.vue';
+
+import { toDateHourMin } from 'src/filters';
 import { useState } from 'src/composables/useState';
 
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnUserLink from 'components/ui/VnUserLink.vue';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import VnAvatar from 'components/ui/VnAvatar.vue';
+
 const $props = defineProps({
     url: { type: String, default: null },
     filter: { type: Object, default: () => {} },
@@ -17,6 +22,7 @@ const $props = defineProps({
 
 const { t } = useI18n();
 const state = useState();
+const quasar = useQuasar();
 const currentUser = ref(state.getUser());
 const newNote = ref('');
 const vnPaginateRef = ref();
@@ -33,6 +39,19 @@ async function insert() {
     await vnPaginateRef.value.fetch();
     newNote.value = '';
 }
+
+onBeforeRouteLeave((to, from, next) => {
+    if (newNote.value)
+        quasar.dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('globals.unsavedPopup.title'),
+                message: t('globals.unsavedPopup.subtitle'),
+                promise: () => next(),
+            },
+        });
+    else next();
+});
 </script>
 <template>
     <QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">

src/css/app.scss

@@ -194,13 +194,6 @@ select:-webkit-autofill {
     justify-content: center;
 }
 
-.q-card,
-.q-table,
-.q-table__bottom,
-.q-drawer {
-    background-color: var(--vn-section-color);
-}
-
 input[type='number'] {
     -moz-appearance: textfield;
 }
@@ -254,6 +247,16 @@ input::-webkit-inner-spin-button {
         white-space: nowrap;
         text-overflow: ellipsis;
     }
+    tr {
+        th {
+            font-size: 11pt;
+        }
+        td {
+            font-size: 11pt;
+            border-top: 1px solid var(--vn-page-color);
+            border-collapse: collapse;
+        }
+    }
     .shrink {
         max-width: 75px;
     }

src/i18n/locale/en.yml

@@ -246,6 +246,8 @@ globals:
         mailForwarding: Mail forwarding
         mailAlias: Mail alias
         privileges: Privileges
+        ldap: LDAP
+        samba: Samba
     created: Created
     worker: Worker
     now: Now

src/i18n/locale/es.yml

@@ -248,6 +248,8 @@ globals:
         components: Componentes
         pictures: Fotos
         packages: Bultos
+        ldap: LDAP
+        samba: Samba
     created: Fecha creación
     worker: Trabajador
     now: Ahora

src/pages/Account/AccountAccounts.vue

@@ -1,11 +1,9 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 

src/pages/Account/AccountAcls.vue

@@ -1,19 +1,15 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
-import FetchData from 'components/FetchData.vue';
-
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import AclFilter from './Acls/AclFilter.vue';
-import AclFormView from './Acls/AclFormView.vue';
-
-import { useVnConfirm } from 'composables/useVnConfirm';
 import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
+import { useQuasar } from 'quasar';
+
+import FetchData from 'components/FetchData.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import VnConfirm from 'components/ui/VnConfirm.vue';
 
 defineProps({
     id: {
@@ -25,10 +21,9 @@ defineProps({
 const { notify } = useNotify();
 const { t } = useI18n();
 const stateStore = useStateStore();
-const { openConfirmationModal } = useVnConfirm();
+const quasar = useQuasar();
 
-const paginateRef = ref();
+const tableRef = ref();
-const formDialog = ref(false);
 const rolesOptions = ref([]);
 
 const exprBuilder = (param, value) => {
@@ -40,21 +35,86 @@ const exprBuilder = (param, value) => {
     }
 };
 
-const deleteAcl = async (id) => {
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('id'),
+        isId: true,
+        field: 'id',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'model',
+        label: t('model'),
+        field: 'model',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'principalId',
+        label: t('principalId'),
+        field: 'principalId',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'property',
+        label: t('property'),
+        field: 'property',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'accessType',
+        label: t('accessType'),
+        field: 'accessType',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('Delete'),
+                icon: 'delete',
+                action: deleteAcl,
+                isPrimary: true,
+            },
+        ],
+    },
+]);
+const deleteAcl = async ({ id }) => {
     try {
+        await new Promise((resolve) => {
+            quasar
+                .dialog({
+                    component: VnConfirm,
+                    componentProps: {
+                        title: t('Remove ACL'),
+                        message: t('Do you want to remove this ACL?'),
+                    },
+                })
+                .onOk(() => {
+                    resolve(true);
+                })
+                .onCancel(() => {
+                    resolve(false);
+                });
+        });
         await axios.delete(`ACLs/${id}`);
-        paginateRef.value.fetch();
+        tableRef.value.reload();
         notify('ACL removed', 'positive');
     } catch (error) {
         console.error('Error deleting Acl: ', error);
     }
 };
-function showFormDialog(data) {
-    formDialog.value = {
-        show: true,
-        formInitialData: { ...data },
-    };
-}
 </script>
 
 <template>
@@ -64,8 +124,7 @@ function showFormDialog(data) {
         @on-fetch="(data) => (rolesOptions = data)"
         auto-load
     />
-    <template v-if="stateStore.isHeaderMounted()">
+
-        <Teleport to="#searchbar">
     <VnSearchbar
         data-key="AccountAcls"
         url="ACLs"
@@ -73,73 +132,26 @@ function showFormDialog(data) {
         :label="t('acls.search')"
         :info="t('acls.searchInfo')"
     />
-        </Teleport>
-    </template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <AclFilter data-key="AccountAcls" />
-        </QScrollArea>
     </QDrawer>
-
+    <VnTable
-    <QPage class="flex justify-center q-pa-md">
+        ref="tableRef"
-        <div class="vn-card-list">
-            <VnPaginate
-                ref="paginateRef"
         data-key="AccountAcls"
-                url="ACLs"
+        :url="`ACLs`"
-                :expr-builder="exprBuilder"
+        :create="{
-            >
+            urlCreate: 'ACLs',
-                <template #body="{ rows }">
+            title: 'Create ACL',
-                    <CardList
+            onDataSaved: () => tableRef.reload(),
-                        v-for="row of rows"
+            formInitialData: {},
-                        :id="row.id"
+        }"
-                        :key="row.id"
+        order="id DESC"
-                        :title="`${row.model}.${row.property}`"
+        :columns="columns"
-                        @click="showFormDialog(row)"
+        default-mode="table"
-                    >
+        auto-load
-                        <template #list-items>
+        :right-search="true"
-                            <VnLv :label="t('acls.role')" :value="row.principalId" />
+        :is-editable="true"
-                            <VnLv :label="t('acls.accessType')" :value="row.accessType" />
+        :use-model="true"
-                            <VnLv
-                                :label="t('acls.permissions')"
-                                :value="row.permission"
     />
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('globals.delete')"
-                                @click.stop="
-                                    openConfirmationModal(
-                                        t('ACL will be removed'),
-                                        t('Are you sure you want to continue?'),
-                                        () => deleteAcl(row.id)
-                                    )
-                                "
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QDialog
-            v-model="formDialog.show"
-            transition-show="scale"
-            transition-hide="scale"
-        >
-            <AclFormView
-                :form-initial-data="formDialog.formInitialData"
-                @on-data-change="paginateRef.fetch()"
-                :roles-options="rolesOptions"
-            />
-        </QDialog>
-        <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="add" color="primary" @click="showFormDialog()">
-                <QTooltip class="text-no-wrap">{{ t('New ACL') }}</QTooltip>
-            </QBtn>
-        </QPageSticky>
-    </QPage>
 </template>
 
 <i18n>
@@ -148,4 +160,6 @@ es:
     ACL removed: ACL eliminado
     ACL will be removed: El ACL será eliminado
     Are you sure you want to continue?: ¿Seguro que quieres continuar?
+    Remove ACL: Eliminar Acl
+    Do you want to remove this ACL?: ¿Quieres eliminar este ACL?
 </i18n>

src/pages/Account/AccountAliasList.vue

@@ -1,30 +1,13 @@
 <script setup>
-import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
-
+import VnTable from 'components/VnTable/VnTable.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import AliasSummary from './Alias/Card/AliasSummary.vue';
-import AliasCreateForm from './Alias/AliasCreateForm.vue';
-
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useStateStore } from 'stores/useStateStore';
 
-defineProps({
+const tableRef = ref();
-    id: {
-        type: Number,
-        default: 0,
-    },
-});
-
 const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
-const router = useRouter();
 const stateStore = useStateStore();
-const aliasCreateDialogRef = ref(null);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -34,10 +17,32 @@ const exprBuilder = (param, value) => {
                 : { alias: { like: `%${value}%` } };
     }
 };
-
+const columns = computed(() => [
-const navigate = (id) => router.push({ name: 'AliasSummary', params: { id } });
+    {
-
+        align: 'left',
-const openCreateModal = () => aliasCreateDialogRef.value.show();
+        name: 'id',
+        label: t('id'),
+        isId: true,
+        field: 'id',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'alias',
+        label: t('alias'),
+        field: 'alias',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'description',
+        label: t('description'),
+        field: 'description',
+        cardVisible: true,
+        create: true,
+    },
+]);
 </script>
 
 <template>
@@ -52,54 +57,22 @@ const openCreateModal = () => aliasCreateDialogRef.value.show();
             />
         </Teleport>
     </template>
-    <QPage class="flex justify-center q-pa-md">
+    <VnTable
-        <div class="vn-card-list">
+        ref="tableRef"
-            <VnPaginate
-                ref="paginateRef"
         data-key="AccountAliasList"
-                url="MailAliases"
+        :url="`MailAliases`"
-                :expr-builder="exprBuilder"
+        :create="{
-            >
+            urlCreate: 'MailAliases',
-                <template #body="{ rows }">
+            title: 'Create MailAlias',
-                    <CardList
+            onDataSaved: ({ id }) => tableRef.redirect(id),
-                        v-for="row of rows"
+            formInitialData: {},
-                        :id="row.id"
+        }"
-                        :key="row.id"
+        order="id DESC"
-                        :title="row.alias"
+        :columns="columns"
-                        @click="navigate(row.id)"
+        default-mode="table"
-                    >
+        auto-load
-                        <template #list-items>
+        redirect="account/alias"
-                            <VnLv :label="t('mailAlias.alias')" :value="row.alias">
+        :is-editable="true"
-                            </VnLv>
+        :use-model="true"
-                            <VnLv
-                                :label="t('mailAlias.description')"
-                                :value="row.description"
-                            >
-                            </VnLv>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, AliasSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
     />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QDialog
-            ref="aliasCreateDialogRef"
-            transition-show="scale"
-            transition-hide="scale"
-        >
-            <AliasCreateForm />
-        </QDialog>
-        <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="add" color="primary" @click="openCreateModal()">
-                <QTooltip class="text-no-wrap">{{ t('mailAlias.newAlias') }}</QTooltip>
-            </QBtn>
-        </QPageSticky>
-    </QPage>
 </template>

src/pages/Account/AccountConnections.vue

@@ -2,11 +2,9 @@
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-
 import { toDateTimeFormat } from 'src/filters/date.js';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';

src/pages/Account/AccountCreate.vue

@@ -2,7 +2,6 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-
 import FormModelPopup from 'components/FormModelPopup.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
@@ -15,7 +14,6 @@ const newAccountForm = reactive({
     active: true,
 });
 const rolesOptions = ref([]);
-
 const redirectToAccountBasicData = (_, { id }) => {
     router.push({ name: 'AccountBasicData', params: { id } });
 };

src/pages/Account/AccountFilter.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelect from 'components/common/VnSelect.vue';

src/pages/Account/AccountLdap.vue

@@ -1,12 +1,10 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
 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 VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
 import { useArrayData } from 'src/composables/useArrayData';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
@@ -15,7 +13,6 @@ const { t } = useI18n();
 const { notify } = useNotify();
 
 const arrayData = useArrayData('AccountLdap');
-
 const URL_UPDATE = `LdapConfigs/${1}`;
 const URL_CREATE = `LdapConfigs`;
 const DEFAULT_DATA = {
@@ -27,11 +24,9 @@ const DEFAULT_DATA = {
     server: null,
     userDn: null,
 };
-
 const initialData = ref({
     ...DEFAULT_DATA,
 });
-
 const hasData = computed({
     get: () => initialData.value.hasData,
     set: (val) => {
@@ -40,12 +35,10 @@ const hasData = computed({
         else formCustomFn.value = null;
     },
 });
-
 const initialDataLoaded = ref(false);
 const formUrlCreate = ref(null);
 const formUrlUpdate = ref(null);
 const formCustomFn = ref(null);
-
 const onTestConection = async () => {
     try {
         await axios.get(`LdapConfigs/test`);
@@ -54,7 +47,6 @@ const onTestConection = async () => {
         console.error('Error testing connection', error);
     }
 };
-
 const getInitialLdapConfig = async () => {
     try {
         initialDataLoaded.value = false;
@@ -79,7 +71,6 @@ const getInitialLdapConfig = async () => {
         initialDataLoaded.value = true;
     }
 };
-
 const deleteMailForward = async () => {
     try {
         await axios.delete(URL_UPDATE);

src/pages/Account/AccountList.vue

@@ -1,33 +1,66 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { ref, computed } from 'vue';
-import { computed, ref } from 'vue';
+import VnTable from 'components/VnTable/VnTable.vue';
-
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
 import AccountSummary from './Card/AccountSummary.vue';
-import AccountFilter from './AccountFilter.vue';
-import AccountCreate from './AccountCreate.vue';
-
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { useStateStore } from 'stores/useStateStore';
-import { useRole } from 'src/composables/useRole';
-import { QDialog } from 'quasar';
 
-const stateStore = useStateStore();
-const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
-const accountCreateDialogRef = ref(null);
+const tableRef = ref();
-const showNewUserBtn = computed(() => useRole().hasAny(['itManagement']));
-
-const filter = {
-    fields: ['id', 'nickname', 'name', 'role'],
-    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
-};
 
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('id'),
+        isId: true,
+        field: 'id',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'username',
+        label: t('nickname'),
+        isTitle: true,
+        component: 'input',
+        columnField: {
+            component: null,
+        },
+        columnFilter: {
+            inWhere: true,
+        },
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'name',
+        label: t('name'),
+        component: 'input',
+        columnField: {
+            component: null,
+        },
+        columnFilter: {
+            inWhere: true,
+        },
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('View Summary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, AccountSummary),
+            },
+        ],
+    },
+]);
 const exprBuilder = (param, value) => {
     switch (param) {
         case 'search':
@@ -46,99 +79,25 @@ const exprBuilder = (param, value) => {
             return { [param]: value };
     }
 };
-
-const getApiUrl = () => new URL(window.location).origin;
-
-const navigate = (event, id) => {
-    if (event.ctrlKey || event.metaKey)
-        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
-    router.push({ path: `/account/${id}` });
-};
-
-const openCreateModal = () => accountCreateDialogRef.value.show();
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
     <VnSearchbar
-                data-key="AccountList"
-                url="VnUsers/preview"
-                :expr-builder="exprBuilder"
         :label="t('account.search')"
+        data-key="AccountUsers"
+        :expr-builder="exprBuilder"
         :info="t('account.searchInfo')"
     />
-        </Teleport>
+
-        <Teleport to="#actions-append">
+    <VnTable
-            <div class="row q-gutter-x-sm">
+        ref="tableRef"
-                <QBtn
+        data-key="AccountUsers"
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <AccountFilter data-key="AccountList" :expr-builder="exprBuilder" />
-        </QScrollArea>
-    </QDrawer>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                :filter="filter"
-                data-key="AccountList"
         url="VnUsers/preview"
+        order="id DESC"
+        :columns="columns"
+        default-mode="table"
         auto-load
-            >
+        redirect="account"
-                <template #body="{ rows }">
+        :use-model="true"
-                    <CardList
-                        v-for="row of rows"
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.nickname"
-                        @click="navigate($event, row.id)"
-                    >
-                        <template #list-items>
-                            <VnLv :label="t('account.card.name')" :value="row.nickname">
-                            </VnLv>
-                            <VnLv
-                                :label="t('account.card.nickname')"
-                                :value="row.username"
-                            >
-                            </VnLv>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, AccountSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
     />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QDialog
-            ref="accountCreateDialogRef"
-            transition-hide="scale"
-            transition-show="scale"
-        >
-            <AccountCreate />
-        </QDialog>
-        <QPageSticky :offset="[20, 20]" v-if="showNewUserBtn">
-            <QBtn @click="openCreateModal" color="primary" fab icon="add" />
-            <QTooltip class="text-no-wrap">
-                {{ t('account.card.newUser') }}
-            </QTooltip>
-        </QPageSticky>
-    </QPage>
 </template>

src/pages/Account/AccountSamba.vue

@@ -1,23 +1,18 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
 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 VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
 import { useArrayData } from 'src/composables/useArrayData';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 
 const { t } = useI18n();
 const { notify } = useNotify();
-
 const arrayData = useArrayData('AccountSamba');
-
 const formModel = ref(null);
-
 const URL_UPDATE = `SambaConfigs/${1}`;
 const URL_CREATE = `SambaConfigs`;
 

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

@@ -28,6 +28,7 @@ const entityId = computed(() => $props.id || route.params.id);
         ref="summary"
         :url="`MailAliases/${entityId}`"
         @on-fetch="(data) => (alias = data)"
+        data-key="MailAliasesSummary"
     >
         <template #header> {{ alias.id }} - {{ alias.alias }} </template>
         <template #body>

src/pages/Account/Card/AccountDescriptorMenu.vue

@@ -8,7 +8,7 @@ import { useRoute } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import CustomerChangePassword from 'src/pages/Customer/components/CustomerChangePassword.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
-
+import useNotify from 'src/composables/useNotify.js';
 const quasar = useQuasar();
 const $props = defineProps({
     hasAccount: {
@@ -21,7 +21,7 @@ const { t } = useI18n();
 const { hasAccount } = toRefs($props);
 const { openConfirmationModal } = useVnConfirm();
 const route = useRoute();
-
+const { notify } = useNotify();
 const account = computed(() => useArrayData('AccountId').store.data[0]);
 account.value.hasAccount = hasAccount.value;
 const entityId = computed(() => +route.params.id);
@@ -71,55 +71,17 @@ async function sync() {
         type: 'positive',
     });
 }
+
+const removeAccount = async () => {
+    try {
+        await axios.delete(`VnUsers/${account.value.id}`);
+        notify(t('Account removed'), 'positive');
+    } catch (error) {
+        console.error('Error deleting user', error);
+    }
+};
 </script>
 <template>
-    <VnConfirm
-        v-model="showSyncDialog"
-        :message="t('account.card.actions.sync.message')"
-        :title="t('account.card.actions.sync.title')"
-        :promise="sync"
-    >
-        <template #customHTML>
-            {{ shouldSyncPassword }}
-            <QCheckbox
-                :label="t('account.card.actions.sync.checkbox')"
-                v-model="shouldSyncPassword"
-                class="full-width"
-                clearable
-                clear-icon="close"
-            >
-                <QIcon style="padding-left: 10px" color="primary" name="info" size="sm">
-                    <QTooltip>{{ t('account.card.actions.sync.tooltip') }}</QTooltip>
-                </QIcon></QCheckbox
-            >
-            <QInput
-                v-if="shouldSyncPassword"
-                :label="t('login.password')"
-                v-model="syncPassword"
-                class="full-width"
-                clearable
-                clear-icon="close"
-                type="password"
-            />
-        </template>
-    </VnConfirm>
-    <QItem v-ripple clickable @click="setPassword">
-        <QItemSection>{{ t('account.card.actions.setPassword') }}</QItemSection>
-    </QItem>
-    <QItem
-        v-if="!account.hasAccount"
-        v-ripple
-        clickable
-        @click="
-            openConfirmationModal(
-                t('account.card.actions.enableAccount.title'),
-                t('account.card.actions.enableAccount.subtitle'),
-                () => updateStatusAccount(true)
-            )
-        "
-    >
-        <QItemSection>{{ t('account.card.actions.enableAccount.name') }}</QItemSection>
-    </QItem>
     <QItem
         v-if="account.hasAccount"
         v-ripple
@@ -168,20 +130,10 @@ async function sync() {
     </QItem>
 
     <QSeparator />
-    <QItem
+    <!-- <QItem @click="removeAccount(id)" v-ripple clickable>
-        @click="
-            openConfirmationModal(
-                t('account.card.actions.delete.title'),
-                t('account.card.actions.delete.subTitle'),
-                removeAccount
-            )
-        "
-        v-ripple
-        clickable
-    >
         <QItemSection avatar>
             <QIcon name="delete" />
         </QItemSection>
         <QItemSection>{{ t('account.card.actions.delete.name') }}</QItemSection>
-    </QItem>
+    </QItem> -->
 </template>

src/pages/Account/InheritedRoles.vue

@@ -1,23 +1,17 @@
 <script setup>
 import { useRoute, useRouter } from 'vue-router';
 import { computed, ref, watch } from 'vue';
-
 import VnPaginate from 'components/ui/VnPaginate.vue';
-
 import { useArrayData } from 'composables/useArrayData';
 
 const props = defineProps({
     dataKey: { type: String, required: true },
 });
-
 const route = useRoute();
 const router = useRouter();
-
 const paginateRef = ref(null);
-
 const arrayData = useArrayData(props.dataKey);
 const store = arrayData.store;
-
 const data = computed(() => {
     const dataCopy = store.data;
     return dataCopy.sort((a, b) => a.role?.name.localeCompare(b.role?.name));
@@ -37,7 +31,6 @@ const filter = computed(() => ({
 }));
 
 const urlPath = 'RoleMappings';
-
 const columns = computed(() => [
     {
         name: 'name',

src/pages/Account/Role/AccountRoles.vue

@@ -1,26 +1,48 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { computed, ref } from 'vue';
-import { ref } from 'vue';
+import VnTable from 'components/VnTable/VnTable.vue';
-
+import { useRoute } from 'vue-router';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import RoleSummary from './Card/RoleSummary.vue';
-import RoleForm from './Card/RoleForm.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import AccountRolesFilter from './AccountRolesFilter.vue';
-
 import { useStateStore } from 'stores/useStateStore';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+const route = useRoute();
-
 const stateStore = useStateStore();
-const router = useRouter();
 const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
+const $props = defineProps({
-
+    id: {
-const roleCreateDialogRef = ref(null);
+        type: Number,
+        default: 0,
+    },
+});
+const tableRef = ref();
+const entityId = computed(() => $props.id || route.params.id);
 
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('id'),
+        isId: true,
+        columnFilter: {
+            inWhere: true,
+        },
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'name',
+        label: t('name'),
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'description',
+        label: t('description'),
+        cardVisible: true,
+        create: true,
+    },
+]);
 const exprBuilder = (param, value) => {
     switch (param) {
         case 'search':
@@ -37,95 +59,36 @@ const exprBuilder = (param, value) => {
             return { [param]: { like: `%${value}%` } };
     }
 };
-
-const openCreateModal = () => roleCreateDialogRef.value.show();
-
-const getApiUrl = () => new URL(window.location).origin;
-
-const navigate = (event, id) => {
-    if (event.ctrlKey || event.metaKey)
-        return window.open(`${getApiUrl()}/#/account/role/${id}/summary`);
-    router.push({ name: 'RoleSummary', params: { id } });
-};
 </script>
 
 <template>
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#searchbar">
             <VnSearchbar
-                data-key="RolesList"
+                data-key="Roles"
-                url="VnRoles"
+                :expr-builder="exprBuilder"
                 :label="t('role.searchRoles')"
                 :info="t('role.searchInfo')"
             />
         </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
     </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <VnTable
-        <QScrollArea class="fit text-grey-8">
+        ref="tableRef"
-            <AccountRolesFilter data-key="RolesList" :expr-builder="exprBuilder" />
+        data-key="Roles"
-        </QScrollArea>
+        :url="`VnRoles`"
-    </QDrawer>
+        :create="{
-    <QPage class="column items-center q-pa-md">
+            urlCreate: 'VnRoles',
-        <div class="vn-card-list">
+            title: t('Create rol'),
-            <VnPaginate data-key="RolesList" url="VnRoles">
+            onDataSaved: ({ id }) => tableRef.redirect(id),
-                <template #body="{ rows }">
+            formInitialData: {
-                    <CardList
+                editorFk: entityId,
-                        :id="row.id"
+            },
-                        :key="row.id"
+        }"
-                        :title="row.name"
+        order="id ASC"
-                        @click="navigate($event, row.id)"
+        :columns="columns"
-                        v-for="row of rows"
+        default-mode="table"
-                    >
+        auto-load
-                        <template #list-items>
+        redirect="account/role"
-                            <div style="flex-direction: column; width: 100%">
+        :is-editable="true"
-                                <VnLv :label="t('role.card.name')" :value="row.name">
-                                </VnLv>
-                                <VnLv
-                                    :label="t('role.card.description')"
-                                    :value="row.description"
-                                >
-                                </VnLv>
-                            </div>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, RoleSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
     />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QDialog
-            ref="roleCreateDialogRef"
-            transition-show="scale"
-            transition-hide="scale"
-        >
-            <RoleForm />
-        </QDialog>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn fab icon="add" color="primary" @click="openCreateModal()" />
-            <QTooltip>
-                {{ t('role.newRole') }}
-            </QTooltip>
-        </QPageSticky>
-    </QPage>
 </template>

src/pages/Account/Role/AccountRolesFilter.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 

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

@@ -2,7 +2,6 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-
 import VnCard from 'components/common/VnCard.vue';
 import RoleDescriptor from './RoleDescriptor.vue';
 

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

@@ -1,12 +1,10 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+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 { useQuasar } from 'quasar';
-
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 const $props = defineProps({
@@ -23,9 +21,6 @@ const $props = defineProps({
 
 const route = useRoute();
 
-const quasar = useQuasar();
-const router = useRouter();
-
 const { notify } = useNotify();
 const { t } = useI18n();
 const entityId = computed(() => {
@@ -36,29 +31,13 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
 const filter = {
     where: { id: entityId },
 };
-const removeRole = () => {
+const removeRole = async () => {
-    quasar
-        .dialog({
-            title: 'Are you sure you want to delete it?',
-            message: 'Delete department',
-            ok: {
-                push: true,
-                color: 'primary',
-            },
-            cancel: true,
-        })
-        .onOk(async () => {
     try {
-                await axios.post(
+        await axios.delete(`VnRoles/${entityId.value}`);
-                    `/Departments/${entityId.value}/removeChild`,
+        notify(t('Role removed'), 'positive');
-                    entityId.value
+    } catch (error) {
-                );
+        console.error('Error deleting role', error);
-                router.push({ name: 'WorkerDepartment' });
-                notify('department.departmentRemoved', 'positive');
-            } catch (err) {
-                console.error('Error removing department');
     }
-        });
 };
 </script>
 

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

@@ -1,7 +1,6 @@
 <script setup>
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-
 import FormModelPopup from 'components/FormModelPopup.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';

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

@@ -2,17 +2,14 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-
 import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FormPopup from 'components/FormPopup.vue';
 
 const emit = defineEmits(['onSubmitCreateSubrole']);
-
 const { t } = useI18n();
 const route = useRoute();
-
 const subRoleFormData = reactive({
     inheritsFrom: null,
     role: route.params.id,

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

@@ -2,10 +2,8 @@
 import { useRoute, useRouter } from 'vue-router';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import SubRoleCreateForm from './SubRoleCreateForm.vue';
-
 import { useVnConfirm } from 'composables/useVnConfirm';
 import { useArrayData } from 'composables/useArrayData';
 import useNotify from 'src/composables/useNotify.js';
@@ -16,10 +14,8 @@ const route = useRoute();
 const router = useRouter();
 const { openConfirmationModal } = useVnConfirm();
 const { notify } = useNotify();
-
 const paginateRef = ref(null);
 const createSubRoleDialogRef = ref(null);
-
 const arrayData = useArrayData('SubRoles');
 const store = arrayData.store;
 

src/pages/Account/locale/en.yml

@@ -68,7 +68,7 @@ account:
             delete:
                 name: Delete
                 title: The account will be deleted
-                subtitle: Are you sure you want to continue?
+                subTitle: Are you sure you want to continue?
                 success: ''
     search: Search user
     searchInfo: You can search by id, name or nickname

src/pages/Account/locale/es.yml

@@ -67,7 +67,7 @@ account:
             delete:
                 name: Eliminar
                 title: El usuario será eliminado
-                subtitle: ¿Seguro que quieres continuar?
+                subTitle: ¿Seguro que quieres continuar?
                 success: ''
     search: Buscar usuario
     searchInfo: Puedes buscar por id, nombre o usuario

src/pages/Claim/Card/ClaimAction.vue

@@ -31,7 +31,7 @@ const destinationTypes = ref([]);
 const totalClaimed = ref(null);
 const DEFAULT_MAX_RESPONSABILITY = 5;
 const DEFAULT_MIN_RESPONSABILITY = 1;
-const arrayData = useArrayData('claimData');
+const arrayData = useArrayData('Claim');
 const marker_labels = [
     { value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.company') },
     { value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.person') },

src/pages/Claim/Card/ClaimNotes.vue

@@ -14,7 +14,8 @@ const $props = defineProps({
 });
 const claimId = computed(() => $props.id || route.params.id);
 
-const claimFilter = {
+const claimFilter = computed(() => {
+    return {
         where: { claimFk: claimId.value },
         fields: ['id', 'created', 'workerFk', 'text'],
         include: {
@@ -29,7 +30,8 @@ const claimFilter = {
                 },
             },
         },
-};
+    };
+});
 
 const body = {
     claimFk: claimId.value,

src/pages/Claim/Card/ClaimPhoto.vue

@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -22,10 +22,8 @@ const claimDms = ref([
     },
 ]);
 const client = ref({});
-
 const inputFile = ref();
 const files = ref({});
-
 const spinnerRef = ref();
 const claimDmsRef = ref();
 const dmsType = ref({});
@@ -58,6 +56,14 @@ const claimDmsFilter = ref({
 const multimediaDialog = ref();
 const multimediaSlide = ref();
 
+watch(
+    () => router.currentRoute.value.params.id,
+    () => {
+        claimDmsFilter.value.where.id = router.currentRoute.value.params.id;
+        claimDmsRef.value.fetch();
+    }
+);
+
 function openDialog(dmsId) {
     multimediaSlide.value = dmsId;
     multimediaDialog.value = true;

src/pages/Claim/Card/ClaimSummary.vue

@@ -279,7 +279,7 @@ async function changeState(value) {
                 <ClaimNotes
                     :id="entityId"
                     :add-note="false"
-                    class="max-container-height"
+                    style="max-height: 300px"
                     order="created ASC"
                 />
             </QCard>
@@ -330,7 +330,7 @@ async function changeState(value) {
                 <QTable
                     :columns="detailsColumns"
                     :rows="salesClaimed"
-                    flat
+                    separator="horizontal"
                     dense
                     :rows-per-page-options="[0]"
                     hide-bottom
@@ -344,7 +344,7 @@ async function changeState(value) {
                     </template>
                     <template #body="props">
                         <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                            <QTd v-for="col in props.cols" :key="col.name" :props="props">
                                 <span v-if="col.name != 'description'">{{
                                     t(col.value)
                                 }}</span>
@@ -359,7 +359,7 @@ async function changeState(value) {
                                     :id="props.row.sale.itemFk"
                                     :sale-fk="props.row.saleFk"
                                 ></ItemDescriptorProxy>
-                            </QTh>
+                            </QTd>
                         </QTr>
                     </template>
                 </QTable>
@@ -384,7 +384,7 @@ async function changeState(value) {
                     <template #body-cell-worker="props">
                         <QTd :props="props" class="link">
                             {{ props.value }}
-                            <WorkerDescriptorProxy :id="props.row.worker.id" />
+                            <WorkerDescriptorProxy :id="props.row.worker?.id" />
                         </QTd>
                     </template>
                 </QTable>

src/pages/Claim/ClaimFilter.vue

@@ -100,6 +100,7 @@ defineExpose({ states });
                     url="Items/withName"
                     option-value="id"
                     option-label="name"
+                    :use-like="false"
                     sort-by="id DESC"
                     outlined
                     rounded

src/pages/Claim/ClaimList.vue

@@ -125,7 +125,7 @@ const STATE_COLOR = {
     <VnTable
         data-key="ClaimList"
         url="Claims/filter"
-        :order="['priority ASC', 'created DESC']"
+        :order="['priority ASC', 'created ASC']"
         :columns="columns"
         redirect="claim"
         :right-search="false"

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -15,7 +15,6 @@ const route = useRoute();
 
 const typesTaxes = ref([]);
 const typesTransactions = ref([]);
-const postcodesOptions = ref([]);
 
 function handleLocation(data, location) {
     const { town, code, provinceFk, countryFk } = location ?? {};
@@ -95,7 +94,6 @@ function handleLocation(data, location) {
                 <VnLocation
                     :rules="validate('Worker.postcode')"
                     :roles-allowed-to-create="['deliveryAssistant']"
-                    :options="postcodesOptions"
                     v-model="data.postcode"
                     @update:model-value="(location) => handleLocation(data, location)"
                 />

src/pages/Customer/CustomerCreate.vue

@@ -18,7 +18,6 @@ const initialData = reactive({
 
 const workersOptions = ref([]);
 const businessTypesOptions = ref([]);
-const postcodesOptions = ref([]);
 
 function handleLocation(data, location) {
     const { town, code, provinceFk, countryFk } = location ?? {};
@@ -88,7 +87,6 @@ function handleLocation(data, location) {
                     <VnLocation
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
-                        :options="postcodesOptions"
                         v-model="data.location"
                         @update:model-value="(location) => handleLocation(data, location)"
                     >

src/pages/Customer/CustomerList.vue

@@ -15,7 +15,6 @@ import { toDate } from 'src/filters';
 const { t } = useI18n();
 const router = useRouter();
 
-const postcodesOptions = ref([]);
 const tableRef = ref();
 
 const columns = computed(() => [
@@ -414,7 +413,6 @@ function handleLocation(data, location) {
         <template #more-create-dialog="{ data }">
             <VnLocation
                 :roles-allowed-to-create="['deliveryAssistant']"
-                :options="postcodesOptions"
                 v-model="data.location"
                 @update:model-value="(location) => handleLocation(data, location)"
             />

src/pages/Customer/components/CustomerAddressCreate.vue

@@ -21,7 +21,6 @@ const formInitialData = reactive({ isDefaultAddress: false });
 
 const urlCreate = ref('');
 
-const postcodesOptions = ref([]);
 const agencyModes = ref([]);
 const incoterms = ref([]);
 const customsAgents = ref([]);
@@ -94,7 +93,6 @@ function handleLocation(data, location) {
             <VnLocation
                 :rules="validate('Worker.postcode')"
                 :roles-allowed-to-create="['deliveryAssistant']"
-                :options="postcodesOptions"
                 v-model="data.location"
                 @update:model-value="(location) => handleLocation(data, location)"
             />

src/pages/Customer/components/CustomerAddressEdit.vue

@@ -18,7 +18,6 @@ const route = useRoute();
 const router = useRouter();
 
 const urlUpdate = ref('');
-const postcodesOptions = ref([]);
 const agencyModes = ref([]);
 const incoterms = ref([]);
 const customsAgents = ref([]);
@@ -178,7 +177,6 @@ function handleLocation(data, location) {
                     <VnLocation
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
-                        :options="postcodesOptions"
                         v-model="data.postalCode"
                         @update:model-value="(location) => handleLocation(data, location)"
                     ></VnLocation>

src/pages/Supplier/Card/SupplierAddressesCreate.vue

@@ -11,7 +11,6 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 
-const postcodesOptions = ref([]);
 const viewAction = ref();
 const updateAddressId = ref(null);
 const newAddressForm = reactive({
@@ -85,7 +84,6 @@ function handleLocation(data, location) {
                     <VnLocation
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
-                        :options="postcodesOptions"
                         v-model="data.location"
                         @update:model-value="(location) => handleLocation(data, location)"
                     >

src/pages/Supplier/Card/SupplierFiscalData.vue

@@ -17,7 +17,6 @@ const sageTaxTypesOptions = ref([]);
 const sageWithholdingsOptions = ref([]);
 const sageTransactionTypesOptions = ref([]);
 const supplierActivitiesOptions = ref([]);
-const postcodesOptions = ref([]);
 
 function handleLocation(data, location) {
     const { town, code, provinceFk, countryFk } = location ?? {};
@@ -131,7 +130,6 @@ function handleLocation(data, location) {
                 <VnLocation
                     :rules="validate('Worker.postcode')"
                     :roles-allowed-to-create="['deliveryAssistant']"
-                    :options="postcodesOptions"
                     v-model="data.postCode"
                     @update:model-value="(location) => handleLocation(data, location)"
                 >

src/pages/Supplier/SupplierList.vue

@@ -19,58 +19,62 @@ const columns = computed(() => [
         label: t('supplier.list.tableVisibleColumns.name'),
         name: 'socialName',
         create: true,
+        columnCreate: {
+            component: 'input',
+        },
         columnFilter: {
-            name: 'nickname',
+            name: 'search',
         },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.nif'),
         name: 'nif',
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.nickname'),
         name: 'alias',
         columnFilter: {
-            name: 'nickname',
+            name: 'search',
         },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.account'),
         name: 'account',
-        columnFilter: false,
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.payMethod'),
         name: 'payMethod',
-        columnFilter: false,
+        columnFilter: {
-    },
+            inWhere: true,
-    {
+            name: 'payMethodFk',
-        align: 'left',
-        label: t('supplier.list.tableVisibleColumns.payDay'),
-        name: 'payDay',
-        columnFilter: false,
-    },
-    {
-        align: 'left',
-        name: 'countryFk',
-        label: t('customer.extendedList.tableVisibleColumns.countryFk'),
             component: 'select',
             attrs: {
-            url: 'Countries',
+                url: 'payMethods',
+                fields: ['id', 'name'],
+                find: {
+                    value: 'payMethodFk',
+                    label: 'name',
+                },
+            },
         },
         visible: false,
     },
     {
         align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
+        label: t('supplier.list.tableVisibleColumns.payDay'),
-        name: 'provinceFk',
+        name: 'payDay',
-        component: 'select',
+        columnFilter: {
-        attrs: {
+            inWhere: true,
-            url: 'Provinces',
         },
         visible: false,
     },
@@ -99,7 +103,6 @@ const columns = computed(() => [
 <i18n>
 en:
     Search suppliers: Search suppliers
-
 es:
     Search suppliers: Buscar proveedores
 </i18n>

src/pages/Travel/TravelList.vue

@@ -9,7 +9,7 @@ import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { computed } from 'vue';
 import TravelSummary from './Card/TravelSummary.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import { dashIfEmpty, toDate } from 'src/filters';
+import { toDate } from 'src/filters';
 const { viewSummary } = useSummaryDialog();
 const router = useRouter();
 const { t } = useI18n();

src/pages/Worker/WorkerCreate.vue

@@ -21,7 +21,6 @@ const companiesOptions = ref([]);
 const workersOptions = ref([]);
 const payMethodsOptions = ref([]);
 const bankEntitiesOptions = ref([]);
-const postcodesOptions = ref([]);
 const formData = ref({ isFreelance: false });
 const defaultPayMethod = ref(0);
 
@@ -173,7 +172,6 @@ onBeforeMount(async () => {
                     <VnLocation
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
-                        :options="postcodesOptions"
                         v-model="data.location"
                         @update:model-value="(location) => handleLocation(data, location)"
                         :disable="formData.isFreelance"

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

@@ -1,8 +1,9 @@
-const locationOptions = '[role="listbox"] > div.q-virtual-scroll__content > .q-item';
 describe('VnLocation', () => {
+    const locationOptions = '[role="listbox"] > div.q-virtual-scroll__content > .q-item';
     const dialogInputs = '.q-dialog label input';
-    describe('Worker Create', () => {
+    const createLocationButton = '.q-form > .q-card > .vn-row:nth-child(6) .--add-icon';
     const inputLocation = '.q-form input[aria-label="Location"]';
+    describe('Worker Create', () => {
         beforeEach(() => {
             cy.viewport(1280, 720);
             cy.login('developer');
@@ -32,25 +33,50 @@ describe('VnLocation', () => {
             cy.login('developer');
             cy.visit('/#/supplier/567/fiscal-data', { timeout: 7000 });
             cy.waitForElement('.q-form');
+            cy.get(createLocationButton).click();
         });
-        it('Create postCode', function () {
+        it('Create postCode', () => {
-            cy.get('.q-form > .q-card > .vn-row:nth-child(6) .--add-icon').click();
+            const postCode = '1234475';
+            const province = 'Valencia';
             cy.get('.q-card > h1').should('have.text', 'New postcode');
-            cy.get(dialogInputs).eq(0).clear('12');
+            cy.get(dialogInputs).eq(0).clear();
-            cy.get(dialogInputs).eq(0).type('1234453');
+            cy.get(dialogInputs).eq(0).type(postCode);
             cy.selectOption(
                 '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4) > .q-select > .q-field__inner > .q-field__control ',
-                'Valencia'
+                province
-            );
-            cy.selectOption(
-                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(5)   > .q-select > .q-field__inner > .q-field__control ',
-                'Province one'
-            );
-            cy.selectOption(
-                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(6)  > .q-select > .q-field__inner > .q-field__control ',
-                'España'
             );
             cy.get('.q-mt-lg > .q-btn--standard').click();
+            cy.get('.q-dialog__inner > .column > #formModel > .q-card').should(
+                'not.exist'
+            );
+            checkVnLocation(postCode, province);
         });
+        it('Create city', () => {
+            const postCode = '9011';
+            const province = 'Saskatchew';
+            cy.get(dialogInputs).eq(0).type(postCode);
+            // city create button
+            cy.get(
+                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4) > .q-select > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon'
+            ).click();
+            cy.selectOption('#q-portal--dialog--2 .q-select', 'one');
+            cy.get('#q-portal--dialog--2 .q-input').type(province);
+            cy.get('#q-portal--dialog--2 .q-btn--standard').click();
+            cy.get('#q-portal--dialog--1 .q-btn--standard').click();
+            checkVnLocation(postCode, province);
+        });
+
+        function checkVnLocation(postCode, province) {
+            cy.get('.q-dialog__inner > .column > #formModel > .q-card').should(
+                'not.exist'
+            );
+            cy.get('.q-form > .q-card > .vn-row:nth-child(6)')
+                .find('input')
+                .invoke('val')
+                .then((text) => {
+                    expect(text).to.contain(postCode);
+                    expect(text).to.contain(province);
+                });
+        }
     });
 });