Merge branch 'master' of https://gitea.verdnatura.es/verdnatura/salix-front into hotfix_ItemDiary

2024-08-02 09:25:46 +02:00 · 2024-08-02 09:25:46 +02:00 · 2367550bc1
parent 276202f0c7 3a64929c05
commit 2367550bc1
39 changed files with 395 additions and 396 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "salix-front",
-    "version": "24.30.1",
+    "version": "24.30.2",
    "description": "Salix frontend",
    "productName": "Salix",
    "author": "Verdnatura",
--- a/src/boot/axios.js
+++ b/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;
--- a/src/boot/qformMixin.js
+++ b/src/boot/qformMixin.js
@ -1,28 +1,11 @@
 import { getCurrentInstance } from 'vue';

-const filterAvailableInput = (element) => {
-    return element.classList.contains('q-field__native') && !element.disabled;
-};
-const filterAvailableText = (element) => {
-    return (
-        element.__vueParentComponent.type.name === 'QInput' &&
-        element.__vueParentComponent?.attrs?.class !== 'vn-input-date'
-    );
-};
-
 export default {
    mounted: function () {
        const vm = getCurrentInstance();
        if (vm.type.name === 'QForm') {
            if (!['searchbarForm', 'filterPanelForm'].includes(this.$el?.id)) {
-                // AUTOFOCUS
-                const elementsArray = Array.from(this.$el.elements);
-                const availableInputs = elementsArray.filter(filterAvailableInput);
-                const firstInputElement = availableInputs.find(filterAvailableText);
-
-                if (firstInputElement) {
-                    firstInputElement.focus();
-                }
+                // TODO: AUTOFOCUS IS NOT FOCUSING
                const that = this;
                this.$el.addEventListener('keyup', function (evt) {
                    if (evt.key === 'Enter') {
--- a/src/components/CreateNewCityForm.vue
+++ b/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 VnInput from 'src/components/common/VnInput.vue';
+import VnSelectProvince from 'components/VnSelectProvince.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) => {
-    emit('onDataSaved', dataSaved);
+const onDataSaved = (...args) => {
+    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 class="row q-gutter-md q-mb-md">
@ -45,15 +45,7 @@ const onDataSaved = (dataSaved) => {
                    v-model="data.name"
                    :rules="validate('city.name')"
                />
-                <VnSelect
-                    :label="t('Province')"
-                    :options="provincesOptions"
-                    hide-selected
-                    option-label="name"
-                    option-value="id"
-                    v-model="data.provinceFk"
-                    :rules="validate('city.provinceFk')"
-                />
+                <VnSelectProvince v-model="data.provinceFk" />
            </VnRow>
        </template>
    </FormModelPopup>
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/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(
-        ({ id }) => id === formData.townFk
-    );
-    newPostcode.town = townObject?.name;
+    newPostcode.town = town.value.name;
+    newPostcode.townFk = town.value.id;
    const provinceObject = provincesOptions.value.find(
        ({ id }) => id === formData.provinceFk
    );
@ -43,39 +40,41 @@ 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) => {
-    await townsFetchDataRef.value.fetch();
-    formData.townFk = townsLocationOptions.value.find((town) => town.name === name).id;
-    formData.provinceFk = provinceFk;
-    formData.countryFk = provincesOptions.value.find(
-        (province) => province.id === provinceFk
-    ).countryFk;
-};
-
-const onProvinceCreated = async ({ name }, formData) => {
+async function onCityCreated(newTown, formData) {
    await provincesFetchDataRef.value.fetch();
-    formData.provinceFk = provincesOptions.value.find(
-        (province) => province.name === name
-    ).id;
-};
+    newTown.province = provincesOptions.value.find(
+        (province) => province.id === newTown.provinceFk
+    );
+    formData.townFk = newTown;
+    setTown(newTown, 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();
+    const newProvince = provincesOptions.value.find((province) => province.id == id);
+    if (!newProvince) return;
+
+    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,10 +87,11 @@ 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 }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                <VnInput
                    :label="t('Postcode')"
                    v-model="data.code"
@ -99,38 +99,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">
-                <VnSelectDialog
-                    :label="t('Province')"
-                    :options="provincesOptions"
-                    hide-selected
-                    option-label="name"
-                    option-value="id"
+            <VnRow>
+                <VnSelectProvince
+                    @update:model-value="(value) => setProvince(value, data)"
                    v-model="data.provinceFk"
-                    :rules="validate('postcode.provinceFk')"
-                    :roles-allowed-to-create="['deliveryAssistant']"
-                >
-                    <template #form>
-                        <CreateNewProvinceForm
-                            @on-data-saved="onProvinceCreated($event, data)"
                />
-                    </template> </VnSelectDialog
-            ></VnRow>
-            <VnRow class="row q-gutter-md q-mb-xl"
-                ><VnSelect
+                <VnSelect
                    :label="t('Country')"
                    :options="countriesOptions"
                    hide-selected
--- a/src/components/CreateNewProvinceForm.vue
+++ b/src/components/CreateNewProvinceForm.vue
@ -19,8 +19,11 @@ const provinceFormData = reactive({

 const autonomiesOptions = ref([]);

-const onDataSaved = (dataSaved) => {
-    emit('onDataSaved', dataSaved);
+const onDataSaved = (dataSaved, requestResponse) => {
+    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 class="row q-gutter-md q-mb-md">
@ -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>
--- a/src/components/RegularizeStockForm.vue
+++ b/src/components/RegularizeStockForm.vue
@ -15,7 +15,7 @@ const props = defineProps({
        default: null,
    },
    warehouseFk: {
-        type: Boolean,
+        type: Number,
        default: null,
    },
 });
@ -23,7 +23,7 @@ const props = defineProps({
 const { t } = useI18n();

 const regularizeFormData = reactive({
-    itemFk: props.itemFk,
+    itemFk: Number(props.itemFk),
    warehouseFk: props.warehouseFk,
    quantity: null,
 });
@ -53,6 +53,7 @@ const onDataSaved = (data) => {
                <QInput
                    :label="t('Type the visible quantity')"
                    v-model.number="data.quantity"
+                    type="number"
                    autofocus
                />
            </VnRow>
@ -60,7 +61,7 @@ const onDataSaved = (data) => {
                <div class="col">
                    <VnSelect
                        :label="t('Warehouse')"
-                        v-model="data.warehouseFk"
+                        v-model.number="data.warehouseFk"
                        :options="warehousesOptions"
                        option-value="id"
                        option-label="name"
--- a/src/components/VnSelectProvince.vue
+++ b/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>
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@ -45,7 +45,7 @@ const defaultAttrs = {
 };

 const forceAttrs = {
-    label: $props.showTitle ? '' : $props.column.label,
+    label: $props.showTitle ? '' : columnFilter.value?.label ?? $props.column.label,
 };

 const selectComponent = {
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@ -175,7 +175,10 @@ function splitColumns(columns) {
    };

    for (const col of columns) {
-        if (col.name == 'tableActions') splittedColumns.value.actions = col;
+        if (col.name == 'tableActions') {
+            col.orderBy = false;
+            splittedColumns.value.actions = col;
+        }
        if (col.chip) splittedColumns.value.chips.push(col);
        if (col.isTitle) splittedColumns.value.title = col;
        if (col.create) splittedColumns.value.create.push(col);
@ -304,11 +307,6 @@ defineExpose({
                        :params="params"
                        :columns="splittedColumns.columns"
                    />
-                    <slot
-                        name="moreFilterPanel"
-                        :params="params"
-                        :columns="splittedColumns.columns"
-                    />
                </template>
            </VnFilterPanel>
        </QScrollArea>
--- a/src/components/VnTable/VnVisibleColumn.vue
+++ b/src/components/VnTable/VnVisibleColumn.vue
@ -81,7 +81,7 @@ async function fetchViewConfigData() {
            return;
        }
    } catch (err) {
-        console.err('Error fetching config view data', err);
+        console.error('Error fetching config view data', err);
    }
 }

--- a/src/components/common/TableVisibleColumns.vue
+++ b/src/components/common/TableVisibleColumns.vue
@ -84,7 +84,7 @@ const fetchViewConfigData = async () => {
            setUserConfigViewData(defaultColumns);
        }
    } catch (err) {
-        console.err('Error fetching config view data', err);
+        console.error('Error fetching config view data', err);
    }
 };

--- a/src/components/common/VnLocation.vue
+++ b/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 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);
-});
+const value = defineModel({ type: [String, Number, Object] });

 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
-                @on-data-saved="onDataSaved"
-            />
+            <CreateNewPostcode @on-data-saved="(newValue) => (value = newValue)" />
        </template>
        <template #option="{ itemProps, opt }">
            <QItem v-bind="itemProps">
--- a/src/components/common/VnSelect.vue
+++ b/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: '',
@ -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;
-
-    if (new RegExp(/\d/g).test(val)) key = optionValue.value;
+    const key =
+        optionFilterValue.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);
 }

@ -174,6 +183,10 @@ async function filterHandler(val, update) {
        }
    );
 }
+
+function nullishToTrue(value) {
+    return value ?? true;
+}
 </script>

 <template>
@ -192,12 +205,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
-        fill-input
+        :emit-value="nullishToTrue($attrs['emit-value'])"
+        :map-options="nullishToTrue($attrs['map-options'])"
+        :use-input="nullishToTrue($attrs['use-input'])"
+        :hide-selected="nullishToTrue($attrs['hide-selected'])"
+        :fill-input="nullishToTrue($attrs['fill-input'])"
        ref="vnSelectRef"
        lazy-rules
        :class="{ required: $attrs.required }"
--- a/src/components/common/VnSelectDialog.vue
+++ b/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()"
--- a/src/css/app.scss
+++ b/src/css/app.scss
@ -209,27 +209,29 @@ input::-webkit-inner-spin-button {
    max-width: 100%;
 }

-/* ===== Scrollbar CSS ===== /
-/ Firefox */
+.q-table__container {
+    /* ===== Scrollbar CSS ===== /
+    / Firefox */

-* {
+    * {
        scrollbar-width: auto;
        scrollbar-color: var(--vn-label-color) transparent;
-}
+    }

-/* Chrome, Edge, and Safari */
-*::-webkit-scrollbar {
+    /* Chrome, Edge, and Safari */
+    *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
-}
+    }

-*::-webkit-scrollbar-thumb {
+    *::-webkit-scrollbar-thumb {
        background-color: var(--vn-label-color);
        border-radius: 10px;
-}
+    }

-*::-webkit-scrollbar-track {
+    *::-webkit-scrollbar-track {
        background: transparent;
+    }
 }

 .q-table {
--- a/src/pages/Customer/Card/CustomerFiscalData.vue
+++ b/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)"
                >
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/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)"
                    >
--- a/src/pages/Customer/CustomerList.vue
+++ b/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(() => [
@ -420,7 +419,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)"
            />
--- a/src/pages/Customer/components/CustomerAddressCreate.vue
+++ b/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)"
            />
--- a/src/pages/Customer/components/CustomerAddressEdit.vue
+++ b/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>
--- a/src/pages/Entry/MyEntries.vue
+++ b/src/pages/Entry/MyEntries.vue
@ -1,71 +1,89 @@
 <script setup>
-import { computed, onMounted } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
 import { useQuasar } from 'quasar';
 import EntryBuysTableDialog from './EntryBuysTableDialog.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
-import VnInput from 'src/components/common/VnInput.vue';

-const stateStore = useStateStore();
 const { t } = useI18n();
 const quasar = useQuasar();
-
-onMounted(async () => {
-    stateStore.rightDrawer = true;
-});
-
 const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('customer.extendedList.tableVisibleColumns.id'),
-        chip: {
-            condition: () => true,
-        },
-        isId: true,
-        isTitle: false,
+        columnFilter: false,
+        isTitle: true,
    },
    {
-        align: 'left',
+        visible: false,
+        align: 'right',
        label: t('shipped'),
        name: 'shipped',
-        isTitle: false,
-        create: true,
-        cardVisible: true,
+        columnFilter: {
+            name: 'fromShipped',
+            label: t('fromShipped'),
            component: 'date',
-        columnField: {
-            component: null,
        },
        format: ({ shipped }) => toDate(shipped),
    },
    {
+        visible: false,
        align: 'left',
+        label: t('shipped'),
+        name: 'shipped',
+        columnFilter: {
+            name: 'toShipped',
+            label: t('toShipped'),
+            component: 'date',
+        },
+        format: ({ shipped }) => toDate(shipped),
+        cardVisible: true,
+    },
+    {
+        align: 'right',
+        label: t('shipped'),
+        name: 'shipped',
+        columnFilter: false,
+        format: ({ shipped }) => toDate(shipped),
+    },
+    {
+        align: 'right',
        label: t('landed'),
        name: 'landed',
-        isTitle: false,
-        create: true,
-        cardVisible: false,
-        component: 'date',
-        columnField: {
-            component: null,
-        },
+        columnFilter: false,
        format: ({ landed }) => toDate(landed),
    },
+
+    {
+        align: 'right',
+        label: t('globals.wareHouseIn'),
+        name: 'warehouseInFk',
+        format: (row) => row.warehouseInName,
+        cardVisible: true,
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'warehouses',
+                fields: ['id', 'name'],
+                optionLabel: 'name',
+                optionValue: 'id',
+            },
+            alias: 't',
+            inWhere: true,
+        },
+    },
    {
        align: 'left',
-        label: t('globals.wareHouseIn'),
-        name: 'warehouseInName',
-        isTitle: false,
-        cardVisible: true,
-        create: false,
+        label: t('globals.daysOnward'),
+        name: 'days',
+        visible: false,
    },
    {
        align: 'right',
        name: 'tableActions',
-        computed,
        actions: [
            {
                title: t('printBuys'),
@ -87,35 +105,19 @@ const printBuys = (rowId) => {
 </script>
 <template>
    <VnSearchbar
-        data-key="EntryList"
+        data-key="myEntriesList"
        url="Entries/filter"
        :label="t('Search entries')"
        :info="t('You can search by entry reference')"
    />
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
    <VnTable
-                ref="myEntriesRef"
        data-key="myEntriesList"
        url="Entries/filter"
        :columns="columns"
        default-mode="card"
+        order="shipped DESC"
        auto-load
-                :right-search="true"
-            >
-                <template #moreFilterPanel="{ params }">
-                    <VnInput
-                        :label="t('globals.daysOnward')"
-                        v-model="params.days"
-                        class="q-px-xs row"
-                        dense
-                        filled
-                        outlined
-                    ></VnInput>
-                </template>
-            </VnTable>
-        </div>
-    </QPage>
+    />
 </template>

 <i18n>
--- a/src/pages/Entry/locale/en.yml
+++ b/src/pages/Entry/locale/en.yml
@ -8,4 +8,6 @@ entryFilter:
        reference: Reference
 landed: Landed
 shipped: Shipped
+fromShipped: Shipped(from)
+toShipped: Shipped(to)
 printBuys: Print buys
--- a/src/pages/Entry/locale/es.yml
+++ b/src/pages/Entry/locale/es.yml
@ -12,4 +12,6 @@ entryFilter:

 landed: F. llegada
 shipped: F. salida
+fromShipped: F. salida(desde)
+toShipped: F. salida(hasta)
 Print buys: Imprimir etiquetas
--- a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
@ -207,8 +207,14 @@ async function cloneInvoice() {

 const isAdministrative = () => hasAny(['administrative']);

-const isAgricultural = () =>
-    invoiceIn.value?.supplier?.sageWithholdingFk === config.value[0]?.sageWithholdingFk;
+const isAgricultural = () => {
+    console.error(config);
+    if (!config.value) return false;
+    return (
+        invoiceIn.value?.supplier?.sageFarmerWithholdingFk ===
+        config?.value[0]?.sageWithholdingFk
+    );
+};

 function showPdfInvoice() {
    if (isAgricultural()) openReport(`InvoiceIns/${entityId.value}/invoice-in-pdf`);
--- a/src/pages/Item/Card/ItemDiary.vue
+++ b/src/pages/Item/Card/ItemDiary.vue
@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed, onUnmounted, reactive, ref, watch } from 'vue';
+import { onMounted, computed, onUnmounted, reactive, ref, nextTick, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';

@ -114,18 +114,36 @@ const getBadgeAttrs = (_date) => {
    return attrs;
 };

+const scrollToToday = async () => {
+    await nextTick();
+    const today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+    const todayCell = document.querySelector(`td[data-date="${today.toISOString()}"]`);
+    if (todayCell) {
+        todayCell.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+};
+
+const formatDateForAttribute = (dateValue) => {
+    if (dateValue instanceof Date) return date.formatDate(dateValue, 'YYYY-MM-DD');
+    return dateValue;
+};
+
 const originTypeMap = {
    entry: {
        descriptor: EntryDescriptorProxy,
        icon: 'vn:entry',
+        color: 'green',
    },
    ticket: {
        descriptor: TicketDescriptorProxy,
        icon: 'vn:ticket',
+        color: 'red',
    },
    order: {
        descriptor: OrderDescriptorProxy,
        icon: 'vn:basket',
+        color: 'yellow',
    },
 };

@ -144,6 +162,7 @@ onMounted(async () => {
    else if (user.value) warehouseFk.value = user.value.warehouseFk;
    itemsBalanceFilter.where.warehouseFk = warehouseFk.value;
    await fetchItemBalances();
+    await scrollToToday();
 });

 onUnmounted(() => (stateStore.rightDrawer = false));
@ -224,7 +243,7 @@ watch(
                </QTd>
            </template>
            <template #body-cell-date="{ row }">
-                <QTd @click.stop>
+                <QTd @click.stop :data-date="formatDateForAttribute(row.shipped)">
                    <QBadge
                        v-bind="getBadgeAttrs(row.shipped)"
                        class="q-ma-none"
@ -246,12 +265,13 @@ watch(
                    >
                        {{ row.originId }}
                    </component>
-                    <span class="link">
                    <QIcon
                        :name="originTypeMap[row.originType]?.icon"
                        class="fill-icon q-mr-sm"
-                            size="xs"
+                        size="sm"
+                        :color="originTypeMap[row.originType]?.color"
                    />
+                    <span class="link">
                        {{ row.originId }}
                    </span>
                </QTd>
--- a/src/pages/Login/TwoFactor.vue
+++ b/src/pages/Login/TwoFactor.vue
@ -7,6 +7,7 @@ import axios from 'axios';

 import { useSession } from 'src/composables/useSession';
 import { useLogin } from 'src/composables/useLogin';
+import VnInput from 'src/components/common/VnInput.vue';

 const quasar = useQuasar();
 const session = useSession();
--- a/src/pages/Supplier/Card/SupplierAddressesCreate.vue
+++ b/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)"
                    >
--- a/src/pages/Supplier/Card/SupplierBasicData.vue
+++ b/src/pages/Supplier/Card/SupplierBasicData.vue
@ -2,8 +2,6 @@
 import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-
-import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@ -15,12 +13,6 @@ const { t } = useI18n();
 const workersOptions = ref([]);
 </script>
 <template>
-    <FetchData
-        url="Workers/search"
-        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC', limit: 30 }"
-        @on-fetch="(data) => (workersOptions = data)"
-        auto-load
-    />
    <FormModel
        :url="`Suppliers/${route.params.id}`"
        :url-update="`Suppliers/${route.params.id}`"
@ -44,6 +36,8 @@ const workersOptions = ref([]);
                    option-label="name"
                    hide-selected
                    map-options
+                    url="Workers/search"
+                    sort-by="nickname ASC"
                    :rules="validate('supplier.workerFk')"
                >
                    <template #append>
--- a/src/pages/Supplier/Card/SupplierFiscalData.vue
+++ b/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)"
                >
--- a/src/pages/Supplier/Card/SupplierSummary.vue
+++ b/src/pages/Supplier/Card/SupplierSummary.vue
@ -152,7 +152,7 @@ function getUrl(section) {
                />
                <VnLv
                    :label="t('supplier.summary.country')"
-                    :value="supplier.country?.country"
+                    :value="supplier.country?.name"
                    dash
                />
            </QCard>
--- a/src/pages/Supplier/SupplierList.vue
+++ b/src/pages/Supplier/SupplierList.vue
@ -3,8 +3,6 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import RightMenu from 'components/common/RightMenu.vue';
-import SupplierListFilter from './SupplierListFilter.vue';

 const { t } = useI18n();
 const tableRef = ref();
@ -21,58 +19,61 @@ const columns = computed(() => [
        label: t('supplier.list.tableVisibleColumns.name'),
        name: 'socialName',
        create: true,
+        columnCreate: {
            component: 'input',
-        columnField: {
-            component: null,
+        },
+        columnFilter: {
+            name: 'search',
        },
    },
    {
        align: 'left',
        label: t('supplier.list.tableVisibleColumns.nif'),
        name: 'nif',
-        component: 'input',
-        columnField: {
-            component: null,
+        columnFilter: {
+            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('supplier.list.tableVisibleColumns.nickname'),
        name: 'alias',
-        component: 'input',
-        columnField: {
-            component: null,
+        columnFilter: {
+            name: 'search',
        },
    },
    {
        align: 'left',
        label: t('supplier.list.tableVisibleColumns.account'),
        name: 'account',
-        component: 'input',
-        columnField: {
-            component: null,
+        columnFilter: {
+            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('supplier.list.tableVisibleColumns.payMethod'),
        name: 'payMethod',
+        columnFilter: {
+            inWhere: true,
+            name: 'payMethodFk',
            component: 'select',
            attrs: {
                url: 'payMethods',
                fields: ['id', 'name'],
+                find: {
+                    value: 'payMethodFk',
+                    label: 'name',
+                },
            },
-        columnField: {
-            component: null,
        },
    },
    {
        align: 'left',
        label: t('supplier.list.tableVisibleColumns.payDay'),
-        name: 'payDat',
-        component: 'input',
-        columnField: {
-            component: null,
+        name: 'payDay',
+        columnFilter: {
+            inWhere: true,
        },
    },
 ]);
@ -80,11 +81,6 @@ const columns = computed(() => [

 <template>
    <VnSearchbar data-key="SuppliersList" :limit="20" :label="t('Search suppliers')" />
-    <RightMenu>
-        <template #right-panel>
-            <SupplierListFilter data-key="SuppliersList" />
-        </template>
-    </RightMenu>
    <VnTable
        ref="tableRef"
        data-key="SuppliersList"
@ -100,15 +96,12 @@ const columns = computed(() => [
        order="id ASC"
        :columns="columns"
        auto-load
-        :right-search="false"
-        :use-model="true"
    />
 </template>

 <i18n>
 en:
    Search suppliers: Search suppliers
-
 es:
    Search suppliers: Buscar proveedores
 </i18n>
--- a/src/pages/Travel/Card/TravelDescriptorMenuItems.vue
+++ b/src/pages/Travel/Card/TravelDescriptorMenuItems.vue
@ -38,7 +38,7 @@ const cloneTravelWithEntries = async () => {
        notify('globals.dataSaved', 'positive');
        router.push({ name: 'TravelBasicData', params: { id: data.id } });
    } catch (err) {
-        console.err('Error cloning travel with entries');
+        console.error('Error cloning travel with entries');
    }
 };

--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@ -145,7 +145,7 @@ const refetch = async () => await cardDescriptorRef.value.getData();
            </QItem>
        </template>
        <template #before>
-            <VnImg :id="entityId" collection="user" size="160x160" class="photo">
+            <VnImg :id="entityId" collection="user" size="520x520" class="photo">
                <template #error>
                    <div
                        class="absolute-full picture text-center q-pa-md flex flex-center"
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/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"
--- a/test/cypress/integration/entry/myEntry.spec.js
+++ b/test/cypress/integration/entry/myEntry.spec.js
@ -7,7 +7,6 @@ describe('EntryMy when is supplier', () => {
                cy.stub(win, 'open');
            },
        });
-        cy.waitForElement('.q-page', 6000);
    });

    it('should open buyLabel when is supplier', () => {
--- a/test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js
@ -1,7 +1,7 @@
 /// <reference types="cypress" />

 describe('InvoiceInCorrective', () => {
-    const createRectificative = '.q-menu > .q-list > :nth-child(4) > .q-item__section';
+    const createRectificative = '.q-menu > .q-list > :nth-child(6) > .q-item__section';
    const rectificativeSection = '.q-drawer-container .q-list > a:nth-child(6)';
    const saveDialog = '.q-card > .q-card__actions > .q-btn--standard ';

--- a/test/cypress/integration/route/routeList.spec.js
+++ b/test/cypress/integration/route/routeList.spec.js
@ -26,6 +26,6 @@ describe('Route', () => {
        cy.get(getRowColumn(1, 4) + getVnSelect).type('{downArrow}{enter}');
        cy.get(getRowColumn(1, 5) + getVnSelect).type('{downArrow}{enter}');
        cy.get('button[title="Save"]').click();
-        cy.get('.q-notification__message').should('have.text', 'Data created');
+        cy.get('.q-notification__message').should('have.text', 'Data saved');
    });
 });
--- a/test/cypress/integration/vnComponent/vnLocation.spec.js
+++ b/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 () {
-            cy.get('.q-form > .q-card > .vn-row:nth-child(6) .--add-icon').click();
+        it('Create postCode', () => {
+            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).type('1234453');
+            cy.get(dialogInputs).eq(0).clear();
+            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'
-            );
-            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'
+                province
            );
            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);
+                });
+        }
    });
 });