Merge branch 'Fix-TicketSale' of https://gitea.verdnatura.es/verdnatura/salix-front into Fix-TicketSale

src/components/CreateNewCityForm.vue

@@ -1,35 +1,42 @@
 <script setup>
-import { reactive, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelectProvince from 'components/VnSelectProvince.vue';
 import VnInput from 'components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
 const emit = defineEmits(['onDataSaved']);
-
+const $props = defineProps({
+    countryFk: {
+        type: Number,
+        default: null,
+    },
+    provinceSelected: {
+        type: Number,
+        default: null,
+    },
+    provinces: {
+        type: Array,
+        default: () => [],
+    },
+});
 const { t } = useI18n();
 
-const cityFormData = reactive({
+const cityFormData = ref({
     name: null,
     provinceFk: null,
 });
-
+onMounted(() => {
-const provincesOptions = ref([]);
+    cityFormData.value.provinceFk = $props.provinceSelected;
-
+});
 const onDataSaved = (...args) => {
     emit('onDataSaved', ...args);
 };
 </script>
 
 <template>
-    <FetchData
-        @on-fetch="(data) => (provincesOptions = data)"
-        auto-load
-        url="Provinces"
-    />
     <FormModelPopup
         :title="t('New city')"
         :subtitle="t('Please, ensure you put the correct data!')"
@@ -41,11 +48,16 @@ const onDataSaved = (...args) => {
         <template #form-inputs="{ data, validate }">
             <VnRow>
                 <VnInput
-                    :label="t('Name')"
+                    :label="t('Names')"
                     v-model="data.name"
                     :rules="validate('city.name')"
                 />
-                <VnSelectProvince v-model="data.provinceFk" />
+                <VnSelectProvince
+                    :province-selected="$props.provinceSelected"
+                    :country-fk="$props.countryFk"
+                    v-model="data.provinceFk"
+                    :provinces="$props.provinces"
+                />
             </VnRow>
         </template>
     </FormModelPopup>

src/components/CreateNewPostcodeForm.vue

@@ -63,17 +63,27 @@ function setTown(newTown, data) {
 }
 
 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;
 }
 
+async function onProvinceCreated(data) {
+    await provincesFetchDataRef.value.fetch({
+        where: { countryFk: postcodeFormData.countryFk },
+    });
+    postcodeFormData.provinceFk.value = data.id;
+}
+
 watch(
     () => [postcodeFormData.countryFk],
-    async (newCountryFk) => {
+    async (newCountryFk, oldValueFk) => {
-        if (newCountryFk) {
+        if (!!oldValueFk[0] && newCountryFk[0] !== oldValueFk[0]) {
+            postcodeFormData.provinceFk = null;
+            postcodeFormData.townFk = null;
+        }
+        if ((newCountryFk, newCountryFk !== postcodeFormData.countryFk)) {
             await provincesFetchDataRef.value.fetch({
                 where: {
                     countryFk: newCountryFk[0],
@@ -93,7 +103,7 @@ watch(
 watch(
     () => postcodeFormData.provinceFk,
     async (newProvinceFk) => {
-        if (newProvinceFk) {
+        if (newProvinceFk[0] && newProvinceFk[0] !== postcodeFormData.provinceFk) {
             await townsFetchDataRef.value.fetch({
                 where: { provinceFk: newProvinceFk[0] },
             });
@@ -121,6 +131,7 @@ async function handleCountries(data) {
     <FetchData
         ref="townsFetchDataRef"
         @on-fetch="handleTowns"
+        :limit="30"
         auto-load
         url="Towns/location"
     />
@@ -140,6 +151,7 @@ async function handleCountries(data) {
                     :label="t('Postcode')"
                     v-model="data.code"
                     :rules="validate('postcode.code')"
+                    clearable
                 />
                 <VnSelectDialog
                     :label="t('City')"
@@ -151,7 +163,7 @@ async function handleCountries(data) {
                     :rules="validate('postcode.city')"
                     :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
                     :emit-value="false"
-                    clearable
+                    :clearable="true"
                 >
                     <template #option="{ itemProps, opt }">
                         <QItem v-bind="itemProps">
@@ -166,6 +178,9 @@ async function handleCountries(data) {
                     </template>
                     <template #form>
                         <CreateNewCityForm
+                            :country-fk="data.countryFk"
+                            :province-selected="data.provinceFk"
+                            :provinces="provincesOptions"
                             @on-data-saved="
                                 (_, requestResponse) =>
                                     onCityCreated(requestResponse, data)
@@ -176,9 +191,13 @@ async function handleCountries(data) {
             </VnRow>
             <VnRow>
                 <VnSelectProvince
-                    :country-fk="postcodeFormData.countryFk"
+                    :country-fk="data.countryFk"
+                    :province-selected="data.provinceFk"
                     @update:model-value="(value) => setProvince(value, data)"
                     v-model="data.provinceFk"
+                    :clearable="true"
+                    :provinces="provincesOptions"
+                    @on-province-created="onProvinceCreated"
                 />
                 <VnSelect
                     :label="t('Country')"

src/components/CreateNewProvinceForm.vue

@@ -16,7 +16,16 @@ const provinceFormData = reactive({
     name: null,
     autonomyFk: null,
 });
-
+const $props = defineProps({
+    countryFk: {
+        type: Number,
+        default: null,
+    },
+    provinces: {
+        type: Array,
+        default: () => [],
+    },
+});
 const autonomiesOptions = ref([]);
 
 const onDataSaved = (dataSaved, requestResponse) => {
@@ -31,6 +40,11 @@ const onDataSaved = (dataSaved, requestResponse) => {
     <FetchData
         @on-fetch="(data) => (autonomiesOptions = data)"
         auto-load
+        :filter="{
+            where: {
+                countryFk: $props.countryFk,
+            },
+        }"
         url="Autonomies/location"
     />
     <FormModelPopup

src/components/LeftMenuItem.vue

@@ -44,7 +44,6 @@ const itemComputed = computed(() => {
         </QItemSection>
     </QItem>
 </template>
-
 <style lang="scss" scoped>
 .q-item {
     min-height: 5vh;

src/components/UserPanel.vue

@@ -13,12 +13,14 @@ import FetchData from 'components/FetchData.vue';
 import { useClipboard } from 'src/composables/useClipboard';
 import { useRole } from 'src/composables/useRole';
 import VnAvatar from './ui/VnAvatar.vue';
+import useNotify from 'src/composables/useNotify';
 
 const state = useState();
 const session = useSession();
 const router = useRouter();
 const { t, locale } = useI18n();
 const { copyText } = useClipboard();
+const { notify } = useNotify();
 
 const userLocale = computed({
     get() {
@@ -53,6 +55,7 @@ const user = state.getUser();
 const warehousesData = ref();
 const companiesData = ref();
 const accountBankData = ref();
+const isEmployee = computed(() => useRole().isEmployee());
 
 onMounted(async () => {
     updatePreferences();
@@ -70,18 +73,28 @@ function updatePreferences() {
 
 async function saveDarkMode(value) {
     const query = `/UserConfigs/${user.value.id}`;
-    await axios.patch(query, {
+    try {
-        darkMode: value,
+        await axios.patch(query, {
-    });
+            darkMode: value,
-    user.value.darkMode = value;
+        });
+        user.value.darkMode = value;
+        onDataSaved();
+    } catch (error) {
+        onDataError();
+    }
 }
 
 async function saveLanguage(value) {
     const query = `/VnUsers/${user.value.id}`;
-    await axios.patch(query, {
+    try {
-        lang: value,
+        await axios.patch(query, {
-    });
+            lang: value,
-    user.value.lang = value;
+        });
+        user.value.lang = value;
+        onDataSaved();
+    } catch (error) {
+        onDataError();
+    }
 }
 
 function logout() {
@@ -97,11 +110,23 @@ function localUserData() {
     state.setUser(user.value);
 }
 
-function saveUserData(param, value) {
+async function saveUserData(param, value) {
-    axios.post('UserConfigs/setUserConfig', { [param]: value });
+    try {
-    localUserData();
+        await axios.post('UserConfigs/setUserConfig', { [param]: value });
+        localUserData();
+        onDataSaved();
+    } catch (error) {
+        onDataError();
+    }
 }
-const isEmployee = computed(() => useRole().isEmployee());
+
+const onDataSaved = () => {
+    notify('globals.dataSaved', 'positive');
+};
+
+const onDataError = () => {
+    notify('errors.updateUserConfig', 'negative');
+};
 </script>
 
 <template>

src/components/VnSelectProvince.vue

@@ -8,18 +8,27 @@ 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 $props = defineProps({
     countryFk: {
         type: Number,
         default: null,
     },
+    provinceSelected: {
+        type: Number,
+        default: null,
+    },
+    provinces: {
+        type: Array,
+        default: () => [],
+    },
 });
+const provinceFk = defineModel({ type: Number, default: null });
+
 const { validate } = useValidator();
 const { t } = useI18n();
 
-const provincesOptions = ref();
+const provincesOptions = ref($props.provinces);
+provinceFk.value = $props.provinceSelected;
 const provincesFetchDataRef = ref();
 
 async function onProvinceCreated(_, data) {
@@ -27,16 +36,6 @@ async function onProvinceCreated(_, data) {
     provinceFk.value = data.id;
     emit('onProvinceCreated', data);
 }
-watch(
-    () => $props.countryFk,
-    async (newProvinceFk) => {
-        if (newProvinceFk) {
-            await provincesFetchDataRef.value.fetch({
-                where: { countryFk: newProvinceFk },
-            });
-        }
-    }
-);
 async function handleProvinces(data) {
     provincesOptions.value = data;
 }
@@ -45,14 +44,18 @@ async function handleProvinces(data) {
 <template>
     <FetchData
         ref="provincesFetchDataRef"
-        :filter="{ include: { relation: 'country' } }"
+        :filter="{
+            include: { relation: 'country' },
+            where: {
+                countryFk: $props.countryFk,
+            },
+        }"
         @on-fetch="handleProvinces"
-        auto-load
         url="Provinces"
     />
     <VnSelectDialog
         :label="t('Province')"
-        :options="provincesOptions"
+        :options="$props.provinces"
         hide-selected
         v-model="provinceFk"
         :rules="validate && validate('postcode.provinceFk')"
@@ -67,7 +70,10 @@ async function handleProvinces(data) {
             </QItem>
         </template>
         <template #form>
-            <CreateNewProvinceForm @on-data-saved="onProvinceCreated" />
+            <CreateNewProvinceForm
+                :country-fk="$props.countryFk"
+                @on-data-saved="onProvinceCreated"
+            />
         </template>
     </VnSelectDialog>
 </template>

src/components/VnTable/VnTable.vue

@@ -73,7 +73,6 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
-
     hasSubToolbar: {
         type: Boolean,
         default: null,
@@ -685,17 +684,15 @@ function handleOnDataSaved(_) {
                         </QCard>
                     </component>
                 </template>
-                <template #bottom-row="{ cols }" v-if="footer">
+                <template #bottom-row="{ cols }" v-if="$props.footer">
-                    <QTr v-if="rows.length" class="bg-header" style="height: 30px">
+                    <QTr v-if="rows.length" style="height: 30px">
                         <QTh
                             v-for="col of cols.filter((cols) => cols.visible ?? true)"
                             :key="col?.id"
                             class="text-center"
+                            :class="getColAlign(col)"
                         >
-                            <slot
+                            <slot :name="`column-footer-${col.name}`" />
-                                :name="`column-footer-${col.name}`"
-                                :class="getColAlign(col)"
-                            />
                         </QTh>
                     </QTr>
                 </template>
@@ -774,16 +771,6 @@ es:
     color: var(--vn-text-color);
 }
 
-.q-table--dark .q-table__bottom,
-.q-table--dark thead,
-.q-table--dark tr {
-    border-color: var(--vn-section-color);
-}
-
-.q-table__container > div:first-child {
-    background-color: var(--vn-page-color);
-}
-
 .grid-three {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(400px, max-content));
@@ -857,6 +844,15 @@ es:
         background-color: var(--vn-section-color);
         z-index: 1;
     }
+    table tbody th {
+        position: relative;
+    }
+    tbody:nth-last-child(1) {
+        @extend .bg-header;
+        position: sticky;
+        z-index: 2;
+        bottom: 0;
+    }
 }
 
 .vn-label-value {
@@ -903,12 +899,11 @@ es:
     user-select: all;
 }
 
-.full-width-slot {
+.q-table__container {
-    width: 100%;
+    background-color: transparent;
-    display: flex;
+}
-    text-align: center;
+
-    color: var(--vn-text-color);
+.q-table__middle.q-virtual-scroll.q-virtual-scroll--vertical.scroll {
-    margin-bottom: -1%;
+    background-color: var(--vn-section-color);
-    background-color: var(--vn-header-color);
 }
 </style>

src/components/common/VnInput.vue

@@ -130,4 +130,30 @@ const mixinRules = [
 .q-field__append {
     padding-inline: 0;
 }
+
+.q-field__append.q-field__marginal.row.no-wrap.items-center.row {
+    height: 20px;
+}
+.q-field--outlined .q-field__append.q-field__marginal.row.no-wrap.items-center.row {
+    height: auto;
+}
+.q-field__control {
+    height: unset;
+}
+.q-field__control.relative-position.row.no-wrap
+    > .q-field__control-container
+    > input.q-field__native
+    ~ div.q-field__label {
+    height: 41px;
+}
+
+.q-field--labeled {
+    .q-field__native,
+    .q-field__prefix,
+    .q-field__suffix,
+    .q-field__input {
+        padding-bottom: 0;
+        min-height: 15px;
+    }
+}
 </style>

src/components/common/VnLocation.vue

@@ -12,14 +12,43 @@ const props = defineProps({
         default: null,
     },
 });
+const formatLocation = (obj, properties) => {
+    const parts = properties.map((prop) => {
+        if (typeof prop === 'string') {
+            return obj[prop];
+        } else if (typeof prop === 'function') {
+            return prop(obj);
+        }
+        return null;
+    });
+
+    const filteredParts = parts.filter(
+        (part) => part !== null && part !== undefined && part !== ''
+    );
+
+    return filteredParts.join(', ');
+};
+
+const locationProperties = [
+    'postcode',
+    (obj) =>
+        obj.city
+            ? `${obj.city}${obj.province?.name ? `(${obj.province.name})` : ''}`
+            : null,
+    (obj) => obj.country?.name,
+];
 const modelValue = ref(
-    props.location
+    props.location ? formatLocation(props.location, locationProperties) : null
-        ? `${props.location?.postcode}, ${props.location?.city}(${props.location?.province?.name}), ${props.location?.country?.name}`
-        : null
 );
 function showLabel(data) {
-    return `${data.code}, ${data.town}(${data.province}), ${data.country}`;
+    const dataProperties = [
+        'code',
+        (obj) => (obj.town ? `${obj.town}(${obj.province})` : null),
+        'country',
+    ];
+    return formatLocation(data, dataProperties);
 }
+
 const handleModelValue = (data) => {
     emit('update:model-value', data);
 };

src/components/common/VnSelect.vue

@@ -283,4 +283,15 @@ const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
 .q-field--outlined {
     max-width: 100%;
 }
+.q-field__inner {
+    .q-field__control {
+        min-height: auto !important;
+
+        display: flex;
+        align-items: flex-end;
+        .q-field__native.row {
+            min-height: auto !important;
+        }
+    }
+}
 </style>

src/components/ui/VnFilterPanel.vue

@@ -3,7 +3,6 @@ import { onMounted, ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
 import { useRoute } from 'vue-router';
-import { date } from 'quasar';
 import toDate from 'filters/toDate';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 
@@ -59,7 +58,6 @@ const $props = defineProps({
 });
 
 defineExpose({ search, sanitizer });
-
 const emit = defineEmits([
     'update:modelValue',
     'refresh',
@@ -114,9 +112,9 @@ watch(
 );
 
 const isLoading = ref(false);
-async function search() {
+async function search(evt) {
     try {
-        if ($props.disableSubmitEvent) return;
+        if (evt && $props.disableSubmitEvent) return;
 
         store.filter.where = {};
         isLoading.value = true;
@@ -167,7 +165,7 @@ const tagsList = computed(() => {
     for (const key of Object.keys(userParams.value)) {
         const value = userParams.value[key];
         if (value == null || ($props.hiddenTags || []).includes(key)) continue;
-        tagList.push({ label: aliasField(key), value });
+        tagList.push({ label: key, value });
     }
     return tagList;
 });
@@ -187,7 +185,6 @@ async function remove(key) {
 }
 
 function formatValue(value) {
-    if (value instanceof Date) return date.formatDate(value, 'DD/MM/YYYY');
     if (typeof value === 'boolean') return value ? t('Yes') : t('No');
     if (isNaN(value) && !isNaN(Date.parse(value))) return toDate(value);
 
@@ -203,11 +200,6 @@ function sanitizer(params) {
     }
     return params;
 }
-
-function aliasField(field) {
-    const split = field.split('.');
-    return split[1] ?? split[0];
-}
 </script>
 
 <template>
@@ -219,7 +211,7 @@ function aliasField(field) {
         icon="search"
         @click="search()"
     ></QBtn>
-    <QForm @submit="search" id="filterPanelForm">
+    <QForm @submit="search" id="filterPanelForm" @keyup.enter="search()">
         <QList dense>
             <QItem class="q-mt-xs">
                 <QItemSection top>

src/components/ui/VnRow.vue

@@ -9,6 +9,7 @@ defineProps({ wrap: { type: Boolean, default: false } });
 <style lang="scss" scoped>
 .vn-row {
     display: flex;
+    align-items: flex-end;
     > :deep(*) {
         flex: 1;
     }

src/css/app.scss

@@ -288,3 +288,14 @@ input::-webkit-inner-spin-button {
         color: $info;
     }
 }
+.q-field__inner {
+    .q-field__control {
+        min-height: auto !important;
+        display: flex;
+        align-items: flex-end;
+        padding-bottom: 2px;
+        .q-field__native.row {
+            min-height: auto !important;
+        }
+    }
+}

src/i18n/locale/en.yml

@@ -305,6 +305,7 @@ errors:
     statusBadGateway: It seems that the server has fall down
     statusGatewayTimeout: Could not contact the server
     userConfig: Error fetching user config
+    updateUserConfig: Error updating user config
     tokenConfig: Error fetching token config
     writeRequest: The requested operation could not be completed
 login:

src/i18n/locale/es.yml

@@ -309,6 +309,7 @@ errors:
     statusBadGateway: Parece ser que el servidor ha caído
     statusGatewayTimeout: No se ha podido contactar con el servidor
     userConfig: Error al obtener configuración de usuario
+    updateUserConfig: Error al actualizar la configuración de usuario
     tokenConfig: Error al obtener configuración de token
     writeRequest: No se pudo completar la operación solicitada
 login:

src/pages/Entry/EntryStockBought.vue

@@ -47,7 +47,7 @@ const columns = [
         },
     },
     {
-        align: 'left',
+        align: 'center',
         label: t('Reserve'),
         name: 'reserve',
         columnFilter: false,
@@ -76,7 +76,7 @@ const columns = [
         name: 'tableActions',
         actions: [
             {
-                title: t('More'),
+                title: t('View more details'),
                 icon: 'search',
                 isPrimary: true,
                 action: (row) => {
@@ -141,6 +141,10 @@ function setFooter(data) {
     });
     tableRef.value.footer = footer;
 }
+
+function round(value) {
+    return Math.round(value * 100) / 100;
+}
 </script>
 <template>
     <VnSubToolbar>
@@ -152,7 +156,9 @@ function setFooter(data) {
                 :filter="filter"
                 @on-fetch="
                     (data) => {
-                        travel = data.find((data) => data.warehouseIn.code === 'VNH');
+                        travel = data.find(
+                            (data) => data.warehouseIn.code.toLowerCase() === 'vnh'
+                        );
                     }
                 "
             />
@@ -206,7 +212,7 @@ function setFooter(data) {
         </template>
     </RightMenu>
     <div class="table-container">
-        <QPage class="column items-center q-pa-md">
+        <div class="column items-center">
             <VnTable
                 ref="tableRef"
                 data-key="StockBoughts"
@@ -228,6 +234,7 @@ function setFooter(data) {
                 :columns="columns"
                 :user-params="userParams"
                 :footer="true"
+                table-height="80vh"
                 auto-load
             >
                 <template #column-workerFk="{ row }">
@@ -243,7 +250,7 @@ function setFooter(data) {
                 </template>
                 <template #column-footer-reserve>
                     <span>
-                        {{ tableRef.footer.reserve }}
+                        {{ round(tableRef.footer.reserve) }}
                     </span>
                 </template>
                 <template #column-footer-bought>
@@ -253,11 +260,11 @@ function setFooter(data) {
                                 tableRef.footer.reserve < tableRef.footer.bought,
                         }"
                     >
-                        {{ tableRef.footer.bought }}
+                        {{ round(tableRef.footer.bought) }}
                     </span>
                 </template>
             </VnTable>
-        </QPage>
+        </div>
     </div>
 </template>
 <style lang="scss" scoped>
@@ -272,7 +279,7 @@ function setFooter(data) {
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 40%;
+    width: 35%;
 }
 .text-negative {
     color: $negative !important;
@@ -286,8 +293,8 @@ function setFooter(data) {
         Buyer: Comprador
         Reserve: Reservado
         Bought: Comprado
-        More: Más
         Date: Fecha
+        View more details: Ver más detalles
         Reserve some space: Reservar espacio
-        This buyer has already made a reservation for this date: Este comprador ya ha hecho una reserva para esta fecha
+        This buyer has already made a reservation for this date: Este comprador ya ha hecho una reserva para esta fecha 
 </i18n>

src/pages/Entry/EntryStockBoughtDetail.vue

@@ -77,18 +77,10 @@ const columns = [
                 :columns="columns"
                 :right-search="false"
                 :disable-infinite-scroll="true"
+                :disable-option="{ card: true }"
                 :limit="0"
                 auto-load
             >
-                <template #top-left>
-                    <QBtn
-                        flat
-                        icon="Close"
-                        color="primary"
-                        class="bg-vn-section-color q-pa-xs"
-                        v-close-popup
-                    />
-                </template>
                 <template #column-entryFk="{ row }">
                     <span class="link">
                         {{ row?.entryFk }}
@@ -112,6 +104,11 @@ const columns = [
     justify-content: center;
     align-items: center;
     margin: auto;
+    background-color: var(--vn-section-color);
+    padding: 4px;
+}
+.container > div > div > .q-table__top.relative-position.row.items-center {
+    background-color: red !important;
 }
 </style>
 <i18n>

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -27,13 +27,16 @@ const { openReport } = usePrintService();
 
 const columns = computed(() => [
     {
-        align: 'left',
+        align: 'center',
         name: 'id',
         label: t('invoiceOutList.tableVisibleColumns.id'),
         chip: {
             condition: () => true,
         },
         isId: true,
+        columnFilter: {
+            name: 'search',
+        },
     },
     {
         align: 'left',

src/pages/Item/ItemFixedPrice.vue

@@ -514,7 +514,7 @@ function handleOnDataSave({ CrudModelRef }) {
             </template>
             <template #column-minPrice="props">
                 <QTd class="col">
-                    <div class="row">
+                    <div class="row" style="align-items: center">
                         <QCheckbox
                             :model-value="props.row.hasMinPrice"
                             @update:model-value="updateMinPrice($event, props)"
@@ -601,6 +601,11 @@ function handleOnDataSave({ CrudModelRef }) {
 .q-table td {
     padding-inline: 5px !important;
 }
+.q-table tr td {
+    font-size: 10pt;
+    border-top: none;
+    border-collapse: collapse;
+}
 .q-table tbody td {
     max-width: none;
     .q-td.col {

src/pages/Zone/Card/ZoneLocationsTree.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { onMounted, ref, computed, watch, onUnmounted } from 'vue';
 import { useRoute } from 'vue-router';
-
+import VnInput from 'src/components/common/VnInput.vue';
 import { useState } from 'src/composables/useState';
 import axios from 'axios';
 import { useArrayData } from 'composables/useArrayData';
@@ -144,7 +144,8 @@ watch(storeData, async (val) => {
 });
 
 const reFetch = async () => {
-    await arrayData.fetch({ append: false });
+    const { data } = await arrayData.fetch({ append: false });
+    nodes.value = data;
 };
 
 onMounted(async () => {
@@ -182,6 +183,16 @@ onUnmounted(() => {
 </script>
 
 <template>
+    <VnInput
+        v-if="showSearchBar"
+        v-model="store.userParams.search"
+        :placeholder="$t('globals.search')"
+        @update:model-value="reFetch()"
+    >
+        <template #prepend>
+            <QBtn color="primary" icon="search" dense flat @click="reFetch()" />
+        </template>
+    </VnInput>
     <QTree
         ref="treeRef"
         :nodes="nodes"

src/router/modules/entry.js

@@ -59,7 +59,7 @@ export default {
                     component: () => import('src/pages/Entry/EntryLatestBuys.vue'),
                 },
                 {
-                    path: 'stock-Bought',
+                    path: 'stock-bought',
                     name: 'EntryStockBought',
                     meta: {
                         title: 'reserves',

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

@@ -0,0 +1,58 @@
+/// <reference types="cypress" />
+describe('UserPanel', () => {
+    beforeEach(() => {
+        cy.viewport(1280, 720);
+        cy.login('developer');
+        cy.visit(`/#dashboard`);
+        cy.waitForElement('.q-page', 6000);
+    });
+
+    it('should notify when update user warehouse', () => {
+        const userWarehouse =
+            '.q-menu .q-gutter-xs > :nth-child(3) > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native> .q-field__input';
+
+        // Abro el panel
+        cy.openUserPanel();
+
+        // Compruebo la opcion inicial
+        cy.get(userWarehouse).should('have.value', 'VNL').click();
+
+        // Actualizo la opción
+        getOption(3);
+
+        //Compruebo la notificación
+        cy.get('.q-notification').should('be.visible');
+        cy.get(userWarehouse).should('have.value', 'VNH');
+
+        //Restauro el valor
+        cy.get(userWarehouse).click();
+        getOption(2);
+    });
+    it('should notify when update user company', () => {
+        const userCompany =
+            '.q-menu .q-gutter-xs > :nth-child(2)  >  .q-field--float > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native> .q-field__input';
+
+        // Abro el panel
+        cy.openUserPanel();
+
+        // Compruebo la opcion inicial
+        cy.get(userCompany).should('have.value', 'Warehouse One').click();
+
+        //Actualizo la opción
+        getOption(2);
+
+        //Compruebo la notificación
+        cy.get('.q-notification').should('be.visible');
+        cy.get(userCompany).should('have.value', 'Warehouse Two');
+
+        //Restauro el valor
+        cy.get(userCompany).click();
+        getOption(1);
+    });
+});
+
+function getOption(index) {
+    cy.waitForElement('[role="listbox"]');
+    const option = `[role="listbox"] .q-item:nth-child(${index})`;
+    cy.get(option).click();
+}

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

@@ -48,6 +48,25 @@ describe('VnLocation', () => {
                 `${createForm.prefix} > :nth-child(4) > .q-field:nth-child(3)> ${createForm.sufix}`
             ).should('have.length', 1);
         });
+        it('should pass selected country', () => {
+            // Select a country
+            const country = 'Ecuador';
+            const province = 'Province five';
+            cy.selectOption(
+                `${createForm.prefix} > :nth-child(5) > .q-field:nth-child(5)> ${createForm.sufix}`,
+                country
+            );
+            cy.selectOption(
+                `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix}`,
+                province
+            );
+            cy.get(
+                `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(3) > .q-icon`
+            ).click();
+            cy.get(
+                `#q-portal--dialog--4 > .q-dialog > ${createForm.prefix} > .vn-row > .q-select > ${createForm.sufix} > :nth-child(1) input`
+            ).should('have.value', province);
+        });
     });
     describe('Worker Create', () => {
         beforeEach(() => {

test/cypress/support/commands.js

@@ -248,3 +248,9 @@ Cypress.Commands.add('validateContent', (selector, expectedValue) => {
 Cypress.Commands.add('openActionsDescriptor', () => {
     cy.get('.header > :nth-child(3) > .q-btn__content > .q-icon').click();
 });
+
+Cypress.Commands.add('openUserPanel', () => {
+    cy.get(
+        '.column > .q-avatar > .q-avatar__content > .q-img > .q-img__container > .q-img__image'
+    ).click();
+});