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

package.json

@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "24.30.1",
+    "version": "24.30.2",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",

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/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
+                // TODO: AUTOFOCUS IS NOT FOCUSING
-                const elementsArray = Array.from(this.$el.elements);
-                const availableInputs = elementsArray.filter(filterAvailableInput);
-                const firstInputElement = availableInputs.find(filterAvailableText);
-
-                if (firstInputElement) {
-                    firstInputElement.focus();
-                }
                 const that = this;
                 this.$el.addEventListener('keyup', function (evt) {
                     if (evt.key === 'Enter') {

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 class="row q-gutter-md q-mb-md">
@@ -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,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) => {
+async function onCityCreated(newTown, 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) => {
     await provincesFetchDataRef.value.fetch();
-    formData.provinceFk = provincesOptions.value.find(
+    newTown.province = provincesOptions.value.find(
-        (province) => province.name === name
+        (province) => province.id === newTown.provinceFk
-    ).id;
+    );
-};
+    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">
+            <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']"
+                <VnSelect
-                >
-                    <template #form>
-                        <CreateNewProvinceForm
-                            @on-data-saved="onProvinceCreated($event, data)"
-                        />
-                    </template> </VnSelectDialog
-            ></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 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>

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"

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/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 = {

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>

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);
     }
 }
 

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);
     }
 };
 

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: '',
@@ -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);
 }
 
@@ -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
+        :emit-value="nullishToTrue($attrs['emit-value'])"
-        fill-input
+        :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/css/app.scss

@@ -209,27 +209,29 @@ input::-webkit-inner-spin-button {
     max-width: 100%;
 }
 
-/* ===== Scrollbar CSS ===== /
+.q-table__container {
-/ Firefox */
+    /* ===== Scrollbar CSS ===== /
+    / Firefox */
 
-* {
+    * {
-    scrollbar-width: auto;
+        scrollbar-width: auto;
-    scrollbar-color: var(--vn-label-color) transparent;
+        scrollbar-color: var(--vn-label-color) transparent;
-}
+    }
 
-/* Chrome, Edge, and Safari */
+    /* Chrome, Edge, and Safari */
-*::-webkit-scrollbar {
+    *::-webkit-scrollbar {
-    width: 10px;
+        width: 10px;
-    height: 10px;
+        height: 10px;
-}
+    }
 
-*::-webkit-scrollbar-thumb {
+    *::-webkit-scrollbar-thumb {
-    background-color: var(--vn-label-color);
+        background-color: var(--vn-label-color);
-    border-radius: 10px;
+        border-radius: 10px;
-}
+    }
 
-*::-webkit-scrollbar-track {
+    *::-webkit-scrollbar-track {
-    background: transparent;
+        background: transparent;
+    }
 }
 
 .q-table {

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(() => [
@@ -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)"
             />

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/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: {
+        columnFilter: false,
-            condition: () => true,
+        isTitle: true,
-        },
-        isId: true,
-        isTitle: false,
     },
     {
-        align: 'left',
+        visible: false,
+        align: 'right',
         label: t('shipped'),
         name: 'shipped',
-        isTitle: false,
+        columnFilter: {
-        create: true,
+            name: 'fromShipped',
-        cardVisible: true,
+            label: t('fromShipped'),
-        component: 'date',
+            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,
+        columnFilter: false,
-        create: true,
-        cardVisible: false,
-        component: 'date',
-        columnField: {
-            component: null,
-        },
         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'),
+        label: t('globals.daysOnward'),
-        name: 'warehouseInName',
+        name: 'days',
-        isTitle: false,
+        visible: false,
-        cardVisible: true,
-        create: 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">
+    <VnTable
-        <div class="vn-card-list">
+        data-key="myEntriesList"
-            <VnTable
+        url="Entries/filter"
-                ref="myEntriesRef"
+        :columns="columns"
-                data-key="myEntriesList"
+        default-mode="card"
-                url="Entries/filter"
+        order="shipped DESC"
-                :columns="columns"
+        auto-load
-                default-mode="card"
+    />
-                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>

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

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

src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue

@@ -207,8 +207,14 @@ async function cloneInvoice() {
 
 const isAdministrative = () => hasAny(['administrative']);
 
-const isAgricultural = () =>
+const isAgricultural = () => {
-    invoiceIn.value?.supplier?.sageWithholdingFk === config.value[0]?.sageWithholdingFk;
+    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`);

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>
+                    <QIcon
+                        :name="originTypeMap[row.originType]?.icon"
+                        class="fill-icon q-mr-sm"
+                        size="sm"
+                        :color="originTypeMap[row.originType]?.color"
+                    />
                     <span class="link">
-                        <QIcon
-                            :name="originTypeMap[row.originType]?.icon"
-                            class="fill-icon q-mr-sm"
-                            size="xs"
-                        />
                         {{ row.originId }}
                     </span>
                 </QTd>

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();

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/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>

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/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>

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,
-        component: 'input',
+        columnCreate: {
-        columnField: {
+            component: 'input',
-            component: null,
+        },
+        columnFilter: {
+            name: 'search',
         },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.nif'),
         name: 'nif',
-        component: 'input',
+        columnFilter: {
-        columnField: {
+            inWhere: true,
-            component: null,
         },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.nickname'),
         name: 'alias',
-        component: 'input',
+        columnFilter: {
-        columnField: {
+            name: 'search',
-            component: null,
         },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.account'),
         name: 'account',
-        component: 'input',
+        columnFilter: {
-        columnField: {
+            inWhere: true,
-            component: null,
         },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.payMethod'),
         name: 'payMethod',
-        component: 'select',
+        columnFilter: {
-        attrs: {
+            inWhere: true,
-            url: 'payMethods',
+            name: 'payMethodFk',
-            fields: ['id', 'name'],
+            component: 'select',
-        },
+            attrs: {
-        columnField: {
+                url: 'payMethods',
-            component: null,
+                fields: ['id', 'name'],
+                find: {
+                    value: 'payMethodFk',
+                    label: 'name',
+                },
+            },
         },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.payDay'),
-        name: 'payDat',
+        name: 'payDay',
-        component: 'input',
+        columnFilter: {
-        columnField: {
+            inWhere: true,
-            component: null,
         },
     },
 ]);
@@ -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>

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');
     }
 };
 

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"

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/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', () => {

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 ';
 

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');
     });
 });

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';
+    const createLocationButton = '.q-form > .q-card > .vn-row:nth-child(6) .--add-icon';
+    const inputLocation = '.q-form input[aria-label="Location"]';
     describe('Worker Create', () => {
-        const inputLocation = '.q-form input[aria-label="Location"]';
         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 ',
+                '.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);
+                });
+        }
     });
 });