style: refs #8110 #8110 perf sticky VnSubtoolbar sticky

package.json

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

src/boot/axios.js

@@ -2,11 +2,9 @@ import axios from 'axios';
 import { useSession } from 'src/composables/useSession';
 import { Router } from 'src/router';
 import useNotify from 'src/composables/useNotify.js';
-import { useStateQueryStore } from 'src/stores/useStateQueryStore';
 
 const session = useSession();
 const { notify } = useNotify();
-const stateQuery = useStateQueryStore();
 const baseUrl = '/api/';
 
 axios.defaults.baseURL = baseUrl;
@@ -17,7 +15,7 @@ const onRequest = (config) => {
     if (token.length && !config.headers.Authorization) {
         config.headers.Authorization = token;
     }
-    stateQuery.add(config);
+
     return config;
 };
 
@@ -26,10 +24,10 @@ const onRequestError = (error) => {
 };
 
 const onResponse = (response) => {
-    const config = response.config;
+    const { method } = response.config;
-    stateQuery.remove(config);
 
-    if (config.method === 'patch') {
+    const isSaveRequest = method === 'patch';
+    if (isSaveRequest) {
         notify('globals.dataSaved', 'positive');
     }
 
@@ -37,9 +35,37 @@ const onResponse = (response) => {
 };
 
 const onResponseError = (error) => {
-    stateQuery.remove(error.config);
+    let message = '';
 
-    if (session.isLoggedIn() && error.response?.status === 401) {
+    const response = error.response;
+    const responseData = response && response.data;
+    const responseError = responseData && response.data.error;
+    if (responseError) {
+        message = responseError.message;
+    }
+
+    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;
+        case 502:
+            message = 'errors.statusBadGateway';
+            break;
+        case 504:
+            message = 'errors.statusGatewayTimeout';
+            break;
+    }
+
+    if (session.isLoggedIn() && response?.status === 401) {
         session.destroy(false);
         const hash = window.location.hash;
         const url = hash.slice(1);
@@ -48,6 +74,8 @@ const onResponseError = (error) => {
         return Promise.reject(error);
     }
 
+    notify(message, 'negative');
+
     return Promise.reject(error);
 };
 

src/boot/defaults/qInput.js

@@ -1,4 +0,0 @@
-import { QInput } from 'quasar';
-import setDefault from './setDefault';
-
-setDefault(QInput, 'dense', true);

src/boot/defaults/qSelect.js

@@ -1,4 +0,0 @@
-import { QSelect } from 'quasar';
-import setDefault from './setDefault';
-
-setDefault(QSelect, 'dense', true);

src/boot/quasar.defaults.js

@@ -1,3 +1 @@
 export * from './defaults/qTable';
-export * from './defaults/qInput';
-export * from './defaults/qSelect';

src/boot/quasar.js

@@ -3,51 +3,14 @@ import qFormMixin from './qformMixin';
 import mainShortcutMixin from './mainShortcutMixin';
 import keyShortcut from './keyShortcut';
 import useNotify from 'src/composables/useNotify.js';
-import { CanceledError } from 'axios';
-
 const { notify } = useNotify();
 
 export default boot(({ app }) => {
     app.mixin(qFormMixin);
     app.mixin(mainShortcutMixin);
     app.directive('shortcut', keyShortcut);
-    app.config.errorHandler = (error) => {
+    app.config.errorHandler = function (err) {
-        let message;
+        console.error(err);
-        const response = error.response;
+        notify('globals.error', 'negative', 'error');
-        const responseData = response?.data;
-        const responseError = responseData && response.data.error;
-        if (responseError) {
-            message = responseError.message;
-        }
-
-        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;
-            case 502:
-                message = 'errors.statusBadGateway';
-                break;
-            case 504:
-                message = 'errors.statusGatewayTimeout';
-                break;
-        }
-
-        console.error(error);
-        if (error instanceof CanceledError) {
-            const env = process.env.NODE_ENV;
-            if (env && env !== 'development') return;
-            message = 'Duplicate request';
-        }
-
-        notify(message ?? 'globals.error', 'negative', 'error');
     };
 });

src/components/CreateBankEntityForm.vue

@@ -31,8 +31,8 @@ const countriesFilter = {
 
 const countriesOptions = ref([]);
 
-const onDataSaved = (...args) => {
+const onDataSaved = (formData, requestResponse) => {
-    emit('onDataSaved', ...args);
+    emit('onDataSaved', formData, requestResponse);
 };
 
 onMounted(async () => {

src/components/CreateNewCityForm.vue

@@ -1,42 +1,35 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { reactive, 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 = ref({
+const cityFormData = reactive({
     name: null,
     provinceFk: null,
 });
-onMounted(() => {
+
-    cityFormData.value.provinceFk = $props.provinceSelected;
+const provincesOptions = ref([]);
-});
+
 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!')"
@@ -48,16 +41,11 @@ const onDataSaved = (...args) => {
         <template #form-inputs="{ data, validate }">
             <VnRow>
                 <VnInput
-                    :label="t('Names')"
+                    :label="t('Name')"
                     v-model="data.name"
                     :rules="validate('city.name')"
                 />
-                <VnSelectProvince
+                <VnSelectProvince v-model="data.provinceFk" />
-                    :province-selected="$props.provinceSelected"
-                    :country-fk="$props.countryFk"
-                    v-model="data.provinceFk"
-                    :provinces="$props.provinces"
-                />
             </VnRow>
         </template>
     </FormModelPopup>

src/components/CreateNewPostcodeForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref, watch } from 'vue';
+import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
@@ -22,11 +22,9 @@ const postcodeFormData = reactive({
     townFk: null,
 });
 
-const townsFetchDataRef = ref(null);
 const provincesFetchDataRef = ref(null);
 const countriesOptions = ref([]);
 const provincesOptions = ref([]);
-const townsOptions = ref([]);
 const town = ref({});
 
 function onDataSaved(formData) {
@@ -63,94 +61,23 @@ 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, oldValueFk) => {
-        if (Array.isArray(newCountryFk)) {
-            newCountryFk = newCountryFk[0];
-        }
-        if (Array.isArray(oldValueFk)) {
-            oldValueFk = oldValueFk[0];
-        }
-        if (!!oldValueFk && newCountryFk !== oldValueFk) {
-            postcodeFormData.provinceFk = null;
-            postcodeFormData.townFk = null;
-        }
-        if (oldValueFk !== newCountryFk) {
-            await provincesFetchDataRef.value.fetch({
-                where: {
-                    countryFk: newCountryFk,
-                },
-            });
-            await townsFetchDataRef.value.fetch({
-                where: {
-                    provinceFk: {
-                        inq: provincesOptions.value.map(({ id }) => id),
-                    },
-                },
-            });
-        }
-    }
-);
-
-watch(
-    () => postcodeFormData.provinceFk,
-    async (newProvinceFk) => {
-        if (Array.isArray(newProvinceFk)) {
-            newProvinceFk = newProvinceFk[0];
-        }
-        if (newProvinceFk !== postcodeFormData.provinceFk) {
-            await townsFetchDataRef.value.fetch({
-                where: { provinceFk: newProvinceFk },
-            });
-        }
-    }
-);
-async function handleProvinces(data) {
-    provincesOptions.value = data;
-}
-async function handleTowns(data) {
-    townsOptions.value = data;
-}
-async function handleCountries(data) {
-    countriesOptions.value = data;
-}
 </script>
 
 <template>
     <FetchData
         ref="provincesFetchDataRef"
-        @on-fetch="handleProvinces"
+        @on-fetch="(data) => (provincesOptions = data)"
-        :sort-by="['name ASC']"
-        :limit="30"
         auto-load
         url="Provinces/location"
     />
     <FetchData
-        ref="townsFetchDataRef"
+        @on-fetch="(data) => (countriesOptions = data)"
-        :sort-by="['name ASC']"
-        :limit="30"
-        @on-fetch="handleTowns"
-        auto-load
-        url="Towns/location"
-    />
-    <FetchData
-        @on-fetch="handleCountries"
-        :sort-by="['name ASC']"
-        :limit="30"
         auto-load
         url="Countries"
     />
@@ -169,20 +96,18 @@ async function handleCountries(data) {
                     :label="t('Postcode')"
                     v-model="data.code"
                     :rules="validate('postcode.code')"
-                    clearable
                 />
                 <VnSelectDialog
                     :label="t('City')"
+                    url="Towns/location"
                     @update:model-value="(value) => setTown(value, data)"
-                    :tooltip="t('Create city')"
                     v-model="data.townFk"
-                    :options="townsOptions"
                     option-label="name"
                     option-value="id"
                     :rules="validate('postcode.city')"
                     :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
                     :emit-value="false"
-                    :clearable="true"
+                    clearable
                 >
                     <template #option="{ itemProps, opt }">
                         <QItem v-bind="itemProps">
@@ -197,9 +122,6 @@ 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)
@@ -210,13 +132,8 @@ async function handleCountries(data) {
             </VnRow>
             <VnRow>
                 <VnSelectProvince
-                    :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')"
@@ -235,7 +152,6 @@ async function handleCountries(data) {
 <i18n>
 es:
     New postcode: Nuevo código postal
-    Create city: Crear población
     Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
     City: Población
     Province: Provincia

src/components/CreateNewProvinceForm.vue

@@ -16,16 +16,7 @@ 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) => {
@@ -40,14 +31,7 @@ const onDataSaved = (dataSaved, requestResponse) => {
     <FetchData
         @on-fetch="(data) => (autonomiesOptions = data)"
         auto-load
-        :filter="{
-            where: {
-                countryFk: $props.countryFk,
-            },
-        }"
         url="Autonomies/location"
-        :sort-by="['name ASC']"
-        :limit="30"
     />
     <FormModelPopup
         :title="t('New province')"

src/components/CreateThermographForm.vue

@@ -50,7 +50,7 @@ const onDataSaved = (dataSaved) => {
         model="thermograph"
         :title="t('New thermograph')"
         :form-initial-data="thermographFormData"
-        @on-data-saved="(_, response) => onDataSaved(response)"
+        @on-data-saved="onDataSaved($event)"
     >
         <template #form-inputs="{ data, validate }">
             <VnRow>

src/components/CrudModel.vue

@@ -234,8 +234,6 @@ async function remove(data) {
                 newData = newData.filter((form) => !ids.some((id) => id == form[pk]));
                 fetch(newData);
             });
-    } else {
-        reset();
     }
     emit('update:selected', []);
 }

src/components/FormModel.vue

@@ -217,6 +217,9 @@ async function save() {
         updateAndEmit('onDataSaved', formData.value, response?.data);
         if ($props.reload) await arrayData.fetch({});
         hasChanges.value = false;
+    } catch (err) {
+        console.error(err);
+        notify('errors.writeRequest', 'negative');
     } finally {
         isLoading.value = false;
     }

src/components/FormModelPopup.vue

@@ -61,7 +61,6 @@ defineExpose({
                     :loading="isLoading"
                     @click="emit('onDataCanceled')"
                     v-close-popup
-                    data-cy="FormModelPopup_cancel"
                 />
                 <QBtn
                     :label="t('globals.save')"
@@ -71,7 +70,6 @@ defineExpose({
                     class="q-ml-sm"
                     :disabled="isLoading"
                     :loading="isLoading"
-                    data-cy="FormModelPopup_save"
                 />
             </div>
         </template>

src/components/LeftMenuItem.vue

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

src/components/NavBar.vue

@@ -3,7 +3,6 @@ import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import { useStateStore } from 'stores/useStateStore';
-import { useStateQueryStore } from 'src/stores/useStateQueryStore';
 import { useQuasar } from 'quasar';
 import PinnedModules from './PinnedModules.vue';
 import UserPanel from 'components/UserPanel.vue';
@@ -13,7 +12,6 @@ import VnAvatar from './ui/VnAvatar.vue';
 const { t } = useI18n();
 const stateStore = useStateStore();
 const quasar = useQuasar();
-const stateQuery = useStateQueryStore();
 const state = useState();
 const user = state.getUser();
 const appName = 'Lilium';
@@ -24,7 +22,7 @@ const pinnedModulesRef = ref();
 </script>
 
 <template>
-    <QHeader color="white" elevated>
+    <QHeader color="white" elevated reveal>
         <QToolbar class="q-py-sm q-px-md">
             <QBtn
                 @click="stateStore.toggleLeftDrawer()"
@@ -52,14 +50,6 @@ const pinnedModulesRef = ref();
                 </QBtn>
             </RouterLink>
             <VnBreadcrumbs v-if="$q.screen.gt.sm" />
-            <QSpinner
-                color="primary"
-                class="q-ml-md"
-                :class="{
-                    'no-visible': !stateQuery.isLoading().value,
-                }"
-                size="xs"
-            />
             <QSpace />
             <div id="searchbar" class="searchbar"></div>
             <QSpace />

src/components/UserPanel.vue

@@ -13,14 +13,12 @@ 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() {
@@ -55,7 +53,6 @@ const user = state.getUser();
 const warehousesData = ref();
 const companiesData = ref();
 const accountBankData = ref();
-const isEmployee = computed(() => useRole().isEmployee());
 
 onMounted(async () => {
     updatePreferences();
@@ -73,28 +70,18 @@ function updatePreferences() {
 
 async function saveDarkMode(value) {
     const query = `/UserConfigs/${user.value.id}`;
-    try {
     await axios.patch(query, {
         darkMode: value,
     });
     user.value.darkMode = value;
-        onDataSaved();
-    } catch (error) {
-        onDataError();
-    }
 }
 
 async function saveLanguage(value) {
     const query = `/VnUsers/${user.value.id}`;
-    try {
     await axios.patch(query, {
         lang: value,
     });
     user.value.lang = value;
-        onDataSaved();
-    } catch (error) {
-        onDataError();
-    }
 }
 
 function logout() {
@@ -110,23 +97,11 @@ function localUserData() {
     state.setUser(user.value);
 }
 
-async function saveUserData(param, value) {
+function saveUserData(param, value) {
-    try {
+    axios.post('UserConfigs/setUserConfig', { [param]: value });
-        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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { useValidator } from 'src/composables/useValidator';
 import { useI18n } from 'vue-i18n';
 
@@ -8,55 +8,33 @@ import FetchData from 'components/FetchData.vue';
 import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
 
 const emit = defineEmits(['onProvinceCreated']);
-const $props = defineProps({
+const provinceFk = defineModel({ type: Number });
-    countryFk: {
+watch(provinceFk, async () => await provincesFetchDataRef.value.fetch());
-        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($props.provinces);
+const provincesOptions = ref();
-provinceFk.value = $props.provinceSelected;
 const provincesFetchDataRef = ref();
 
 async function onProvinceCreated(_, data) {
-    await provincesFetchDataRef.value.fetch({ where: { countryFk: $props.countryFk } });
+    await provincesFetchDataRef.value.fetch();
     provinceFk.value = data.id;
     emit('onProvinceCreated', data);
 }
-async function handleProvinces(data) {
-    provincesOptions.value = data;
-}
 </script>
 
 <template>
     <FetchData
         ref="provincesFetchDataRef"
-        :filter="{
+        :filter="{ include: { relation: 'country' } }"
-            include: { relation: 'country' },
+        @on-fetch="(data) => (provincesOptions = data)"
-            where: {
+        auto-load
-                countryFk: $props.countryFk,
-            },
-        }"
-        @on-fetch="handleProvinces"
         url="Provinces"
     />
     <VnSelectDialog
         :label="t('Province')"
-        :options="$props.provinces"
+        :options="provincesOptions"
-        :tooltip="t('Create province')"
         hide-selected
         v-model="provinceFk"
         :rules="validate && validate('postcode.provinceFk')"
@@ -71,15 +49,11 @@ async function handleProvinces(data) {
             </QItem>
         </template>
         <template #form>
-            <CreateNewProvinceForm
+            <CreateNewProvinceForm @on-data-saved="onProvinceCreated" />
-                :country-fk="$props.countryFk"
-                @on-data-saved="onProvinceCreated"
-            />
         </template>
     </VnSelectDialog>
 </template>
 <i18n>
     es:
         Province: Provincia
-        Create province: Crear provincia
 </i18n>

src/components/VnTable/VnTable.vue

@@ -10,7 +10,7 @@ import FormModelPopup from 'components/FormModelPopup.vue';
 
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
 import VnTableColumn from 'components/VnTable/VnColumn.vue';
-import VnFilter from 'components/VnTable/VnFilter.vue';
+import VnTableFilter from 'components/VnTable/VnFilter.vue';
 import VnTableChip from 'components/VnTable/VnChip.vue';
 import VnVisibleColumn from 'src/components/VnTable/VnVisibleColumn.vue';
 import VnLv from 'components/ui/VnLv.vue';
@@ -53,10 +53,6 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
-    bottom: {
-        type: Object,
-        default: null,
-    },
     cardClass: {
         type: String,
         default: 'flex-one',
@@ -73,6 +69,7 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+
     hasSubToolbar: {
         type: Boolean,
         default: null,
@@ -109,10 +106,6 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
-    disabledAttr: {
-        type: Boolean,
-        default: false,
-    },
 });
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -323,13 +316,6 @@ function handleOnDataSaved(_) {
     if (_.onDataSaved) _.onDataSaved({ CrudModelRef: CrudModelRef.value });
     else $props.create.onDataSaved(_);
 }
-
-function handleScroll() {
-    const tMiddle = tableRef.value.$el.querySelector('.q-table__middle');
-    const { scrollHeight, scrollTop, clientHeight } = tMiddle;
-    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) <= 40;
-    if (isAtBottom) CrudModelRef.value.vnPaginateRef.paginate();
-}
 </script>
 <template>
     <QDrawer
@@ -363,7 +349,7 @@ function handleScroll() {
                         )"
                         :key="col.id"
                     >
-                        <VnFilter
+                        <VnTableFilter
                             ref="tableFilterRef"
                             :column="col"
                             :data-key="$attrs['data-key']"
@@ -417,7 +403,6 @@ function handleScroll() {
                 ref="tableRef"
                 v-bind="table"
                 class="vnTable"
-                :class="{ 'last-row-sticky': $props.footer }"
                 :columns="splittedColumns.columns"
                 :rows="rows"
                 v-model:selected="selected"
@@ -427,7 +412,12 @@ function handleScroll() {
                 flat
                 :style="isTableMode && `max-height: ${tableHeight}`"
                 :virtual-scroll="isTableMode"
-                @virtual-scroll="handleScroll"
+                @virtual-scroll="
+                    (event) =>
+                        event.index > rows.length - 2 &&
+                        ($props.crudModel?.paginate ?? true) &&
+                        CrudModelRef.vnPaginateRef.paginate()
+                "
                 @row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
                 @update:selected="emit('update:selected', $event)"
             >
@@ -457,11 +447,7 @@ function handleScroll() {
                     />
                 </template>
                 <template #header-cell="{ col }">
-                    <QTh
+                    <QTh v-if="col.visible ?? true">
-                        v-if="col.visible ?? true"
-                        :style="col.headerStyle"
-                        :class="col.headerClass"
-                    >
                         <div
                             class="column self-start q-ml-xs ellipsis"
                             :class="`text-${col?.align ?? 'left'}`"
@@ -477,7 +463,7 @@ function handleScroll() {
                                     :search-url="searchUrl"
                                 />
                             </div>
-                            <VnFilter
+                            <VnTableFilter
                                 v-if="$props.columnSearch"
                                 :column="col"
                                 :show-title="true"
@@ -507,7 +493,6 @@ function handleScroll() {
                         auto-width
                         class="no-margin q-px-xs"
                         :class="[getColAlign(col), col.columnClass]"
-                        :style="col.style"
                         v-if="col.visible ?? true"
                         @click.ctrl="
                             ($event) =>
@@ -536,7 +521,6 @@ function handleScroll() {
                         :class="getColAlign(col)"
                         class="sticky no-padding"
                         @click="stopEventPropagation($event)"
-                        :style="col.style"
                     >
                         <QBtn
                             v-for="(btn, index) of col.actions"
@@ -557,29 +541,6 @@ function handleScroll() {
                         />
                     </QTd>
                 </template>
-                <template #bottom v-if="bottom">
-                    <slot name="bottom-table">
-                        <QBtn
-                            @click="
-                                () =>
-                                    createAsDialog
-                                        ? (showForm = !showForm)
-                                        : handleOnDataSaved(create)
-                            "
-                            class="cursor-pointer fill-icon"
-                            color="primary"
-                            icon="add_circle"
-                            size="md"
-                            round
-                            flat
-                            shortcut="+"
-                            :disabled="!disabledAttr"
-                        />
-                        <QTooltip>
-                            {{ createForm.title }}
-                        </QTooltip>
-                    </slot>
-                </template>
                 <template #item="{ row, colsMap }">
                     <component
                         :is="$props.redirect ? 'router-link' : 'span'"
@@ -696,15 +657,17 @@ function handleScroll() {
                         </QCard>
                     </component>
                 </template>
-                <template #bottom-row="{ cols }" v-if="$props.footer">
+                <template #bottom-row="{ cols }" v-if="footer">
-                    <QTr v-if="rows.length" style="height: 30px">
+                    <QTr v-if="rows.length" class="bg-header" style="height: 30px">
                         <QTh
                             v-for="col of cols.filter((cols) => cols.visible ?? true)"
                             :key="col?.id"
                             class="text-center"
-                            :class="getColAlign(col)"
                         >
-                            <slot :name="`column-footer-${col.name}`" />
+                            <slot
+                                :name="`column-footer-${col.name}`"
+                                :class="getColAlign(col)"
+                            />
                         </QTh>
                     </QTr>
                 </template>
@@ -722,7 +685,7 @@ function handleScroll() {
             icon="add"
             shortcut="+"
         />
-        <QTooltip self="top right">
+        <QTooltip>
             {{ createForm?.title }}
         </QTooltip>
     </QPageSticky>
@@ -783,6 +746,16 @@ 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,18 +830,6 @@ es:
         background-color: var(--vn-section-color);
         z-index: 1;
     }
-    table tbody th {
-        position: relative;
-    }
-}
-
-.last-row-sticky {
-    tbody:nth-last-child(1) {
-        @extend .bg-header;
-        position: sticky;
-        z-index: 2;
-        bottom: 0;
-    }
 }
 
 .vn-label-value {
@@ -914,12 +875,4 @@ es:
     cursor: text;
     user-select: all;
 }
-
-.q-table__container {
-    background-color: transparent;
-}
-
-.q-table__middle.q-virtual-scroll.q-virtual-scroll--vertical.scroll {
-    background-color: var(--vn-section-color);
-}
 </style>

src/components/common/VnCard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeMount, computed } from 'vue';
+import { onBeforeMount, computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
@@ -57,6 +57,10 @@ if (props.baseUrl) {
         }
     });
 }
+const headerHeight = ref(0);
+onMounted(() => {
+    headerHeight.value = document.querySelector('.q-toolbar')?.offsetHeight + 'px';
+});
 </script>
 <template>
     <QDrawer
@@ -80,11 +84,12 @@ if (props.baseUrl) {
         </template>
     </RightMenu>
     <QPageContainer>
-        <QPage>
+        <QPage padding :style="{ 'padding-top': headerHeight }">
-            <VnSubToolbar />
             <div :class="[useCardSize(), $attrs.class]">
-                <RouterView :key="route.path" />
+                <RouterView :key="route.path" /></div
-            </div>
+        ></QPage>
-        </QPage>
+        <QPageSticky expand position="top">
+            <VnSubToolbar />
+        </QPageSticky>
     </QPageContainer>
 </template>

src/components/common/VnChangePassword.vue

@@ -1,136 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import VnRow from '../ui/VnRow.vue';
-import VnInput from './VnInput.vue';
-import FetchData from '../FetchData.vue';
-import useNotify from 'src/composables/useNotify';
-
-const props = defineProps({
-    submitFn: { type: Function, default: () => {} },
-    askOldPass: { type: Boolean, default: false },
-});
-const emit = defineEmits(['onSubmit']);
-const { t } = useI18n();
-const { notify } = useNotify();
-
-const form = ref();
-const changePassDialog = ref();
-const passwords = ref({ newPassword: null, repeatPassword: null });
-const requirements = ref([]);
-const isLoading = ref(false);
-
-const validate = async () => {
-    const { newPassword, repeatPassword, oldPassword } = passwords.value;
-
-    if (!newPassword) {
-        notify(t('You must enter a new password'), 'negative');
-        return;
-    }
-    if (newPassword !== repeatPassword) {
-        notify(t("Passwords don't match"), 'negative');
-        return;
-    }
-
-    try {
-        isLoading.value = true;
-        await props.submitFn(newPassword, oldPassword);
-        emit('onSubmit');
-    } catch (e) {
-        notify('errors.writeRequest', 'negative');
-    } finally {
-        changePassDialog.value.hide();
-        isLoading.value = false;
-    }
-};
-
-defineExpose({ show: () => changePassDialog.value.show() });
-</script>
-<template>
-    <FetchData
-        url="UserPasswords/findOne"
-        auto-load
-        @on-fetch="(data) => (requirements = data)"
-    />
-    <QDialog ref="changePassDialog">
-        <QCard style="width: 350px">
-            <QCardSection>
-                <slot name="header">
-                    <VnRow class="items-center" style="flex-direction: row">
-                        <span class="text-h6" v-text="t('globals.changePass')" />
-                        <QIcon
-                            class="cursor-pointer"
-                            name="close"
-                            size="xs"
-                            style="flex: 0"
-                            v-close-popup
-                        />
-                    </VnRow>
-                </slot>
-            </QCardSection>
-            <QForm ref="form">
-                <QCardSection>
-                    <VnInput
-                        v-if="props.askOldPass"
-                        :label="t('Old password')"
-                        v-model="passwords.oldPassword"
-                        type="password"
-                        :required="true"
-                        autofocus
-                    />
-                    <VnInput
-                        :label="t('New password')"
-                        v-model="passwords.newPassword"
-                        type="password"
-                        :required="true"
-                        :info="
-                            t('passwordRequirements', {
-                                length: requirements.length,
-                                nAlpha: requirements.nAlpha,
-                                nUpper: requirements.nUpper,
-                                nDigits: requirements.nDigits,
-                                nPunct: requirements.nPunct,
-                            })
-                        "
-                        autofocus
-                    />
-
-                    <VnInput
-                        :label="t('Repeat password')"
-                        v-model="passwords.repeatPassword"
-                        type="password"
-                    />
-                </QCardSection>
-            </QForm>
-            <QCardActions>
-                <slot name="actions">
-                    <QBtn
-                        :disabled="isLoading"
-                        :loading="isLoading"
-                        :label="t('globals.cancel')"
-                        class="q-ml-sm"
-                        color="primary"
-                        flat
-                        type="reset"
-                        v-close-popup
-                    />
-                    <QBtn
-                        :disabled="isLoading"
-                        :loading="isLoading"
-                        :label="t('globals.confirm')"
-                        color="primary"
-                        @click="validate"
-                    />
-                </slot>
-            </QCardActions>
-        </QCard>
-    </QDialog>
-</template>
-
-<i18n>
-es:
-    New password: Nueva contraseña
-    Repeat password: Repetir contraseña
-    You must enter a new password: Debes introducir la nueva contraseña
-    Passwords don't match: Las contraseñas no coinciden
-</i18n>

src/components/common/VnDate.vue

@@ -1,29 +0,0 @@
-<script setup>
-const model = defineModel({ type: [String, Number], required: true });
-</script>
-<template>
-    <QDate v-model="model" :today-btn="true" :options="$attrs.options" />
-</template>
-<style lang="scss" scoped>
-.q-date {
-    width: 245px;
-    min-width: unset;
-
-    :deep(.q-date__calendar) {
-        padding-bottom: 0;
-    }
-    :deep(.q-date__view) {
-        min-height: 245px;
-        padding: 8px;
-    }
-    :deep(.q-date__calendar-days-container) {
-        min-height: 160px;
-        height: unset;
-    }
-
-    :deep(.q-date__header) {
-        padding: 2px 2px 5px 12px;
-        height: 60px;
-    }
-}
-</style>

src/components/common/VnInput.vue

@@ -103,7 +103,6 @@ const mixinRules = [
                     @click="
                         () => {
                             value = null;
-                            vnInputRef.focus();
                             emit('remove');
                         }
                     "

src/components/common/VnInputDate.vue

@@ -3,7 +3,6 @@ import { onMounted, watch, computed, ref } from 'vue';
 import { date } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useAttrs } from 'vue';
-import VnDate from './VnDate.vue';
 
 const model = defineModel({ type: [String, Date] });
 const $props = defineProps({
@@ -21,7 +20,6 @@ const { validations } = useValidator();
 
 const { t } = useI18n();
 const requiredFieldRule = (val) => validations().required($attrs.required, val);
-const vnInputDateRef = ref(null);
 
 const dateFormat = 'DD/MM/YYYY';
 const isPopupOpen = ref();
@@ -88,17 +86,11 @@ const styleAttrs = computed(() => {
           }
         : {};
 });
-
-const manageDate = (date) => {
-    formattedDate.value = date;
-    isPopupOpen.value = false;
-};
 </script>
 
 <template>
     <div @mouseover="hover = true" @mouseleave="hover = false">
         <QInput
-            ref="vnInputDateRef"
             v-model="formattedDate"
             class="vn-input-date"
             :mask="mask"
@@ -121,7 +113,6 @@ const manageDate = (date) => {
                         !$attrs.disable
                     "
                     @click="
-                        vnInputDateRef.focus();
                         model = null;
                         isPopupOpen = false;
                     "
@@ -135,7 +126,6 @@ const manageDate = (date) => {
                 />
             </template>
             <QMenu
-                v-if="$q.screen.gt.xs"
                 transition-show="scale"
                 transition-hide="scale"
                 v-model="isPopupOpen"
@@ -144,11 +134,19 @@ const manageDate = (date) => {
                 :no-focus="true"
                 :no-parent-event="true"
             >
-                <VnDate v-model="popupDate" @update:model-value="manageDate" />
+                <QDate
+                    v-model="popupDate"
+                    :landscape="true"
+                    :today-btn="true"
+                    :options="$attrs.options"
+                    @update:model-value="
+                        (date) => {
+                            formattedDate = date;
+                            isPopupOpen = false;
+                        }
+                    "
+                />
             </QMenu>
-            <QDialog v-else v-model="isPopupOpen">
-                <VnDate v-model="popupDate" @update:model-value="manageDate" />
-            </QDialog>
         </QInput>
     </div>
 </template>

src/components/common/VnInputTime.vue

@@ -3,8 +3,6 @@ import { computed, ref, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { date } from 'quasar';
 import { useValidator } from 'src/composables/useValidator';
-import VnTime from './VnTime.vue';
-
 const { validations } = useValidator();
 const $attrs = useAttrs();
 const model = defineModel({ type: String });
@@ -18,7 +16,6 @@ const props = defineProps({
         default: false,
     },
 });
-const vnInputTimeRef = ref(null);
 const initialDate = ref(model.value ?? Date.vnNew());
 const { t } = useI18n();
 const requiredFieldRule = (val) => validations().required($attrs.required, val);
@@ -72,7 +69,6 @@ function dateToTime(newDate) {
 <template>
     <div @mouseover="hover = true" @mouseleave="hover = false">
         <QInput
-            ref="vnInputTimeRef"
             class="vn-input-time"
             mask="##:##"
             placeholder="--:--"
@@ -96,7 +92,6 @@ function dateToTime(newDate) {
                         !$attrs.disable
                     "
                     @click="
-                        vnInputTimeRef.focus();
                         model = null;
                         isPopupOpen = false;
                     "
@@ -109,7 +104,6 @@ function dateToTime(newDate) {
                 />
             </template>
             <QMenu
-                v-if="$q.screen.gt.xs"
                 transition-show="scale"
                 transition-hide="scale"
                 v-model="isPopupOpen"
@@ -118,11 +112,8 @@ function dateToTime(newDate) {
                 :no-focus="true"
                 :no-parent-event="true"
             >
-                <VnTime v-model="formattedTime" />
+                <QTime v-model="formattedTime" mask="HH:mm" landscape now-btn />
             </QMenu>
-            <QDialog v-else v-model="isPopupOpen">
-                <VnTime v-model="formattedTime" />
-            </QDialog>
         </QInput>
     </div>
 </template>

src/components/common/VnLocation.vue

@@ -12,16 +12,6 @@ const props = defineProps({
         default: null,
     },
 });
-
-const locationProperties = [
-    'postcode',
-    (obj) =>
-        obj.city
-            ? `${obj.city}${obj.province?.name ? `(${obj.province.name})` : ''}`
-            : null,
-    (obj) => obj.country?.name,
-];
-
 const formatLocation = (obj, properties) => {
     const parts = properties.map((prop) => {
         if (typeof prop === 'string') {
@@ -39,10 +29,23 @@ const formatLocation = (obj, properties) => {
     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 ? formatLocation(props.location, locationProperties) : null
 );
 
+const handleModelValue = (data) => {
+    emit('update:model-value', data);
+};
+
 function showLabel(data) {
     const dataProperties = [
         'code',
@@ -51,10 +54,6 @@ function showLabel(data) {
     ];
     return formatLocation(data, dataProperties);
 }
-
-const handleModelValue = (data) => {
-    emit('update:model-value', data);
-};
 </script>
 <template>
     <VnSelectDialog
@@ -73,7 +72,6 @@ const handleModelValue = (data) => {
         v-bind="$attrs"
         clearable
         :emit-value="false"
-        :tooltip="t('Create new location')"
     >
         <template #form>
             <CreateNewPostcode
@@ -106,9 +104,7 @@ const handleModelValue = (data) => {
 <i18n>
 en:
     search_by_postalcode: Search by postalcode, town, province or country
-    Create new location: Create new location
 es:
     Location: Ubicación
-    Create new location: Crear nueva ubicación
     search_by_postalcode: Buscar por código postal, ciudad o país
 </i18n>

src/components/common/VnProgressModal.vue

@@ -9,6 +9,10 @@ const $props = defineProps({
         type: Number, //Progress value (1.0 > x > 0.0)
         required: true,
     },
+    showDialog: {
+        type: Boolean,
+        required: true,
+    },
     cancelled: {
         type: Boolean,
         required: false,
@@ -20,22 +24,30 @@ const emit = defineEmits(['cancel', 'close']);
 
 const dialogRef = ref(null);
 
-const showDialog = defineModel('showDialog', {
+const _showDialog = computed({
-    type: Boolean,
+    get: () => $props.showDialog,
-    default: false,
+    set: (value) => {
+        if (value) dialogRef.value.show();
+    },
 });
 
 const _progress = computed(() => $props.progress);
+
 const progressLabel = computed(() => `${Math.round($props.progress * 100)}%`);
+
+const cancel = () => {
+    dialogRef.value.hide();
+    emit('cancel');
+};
 </script>
 
 <template>
-    <QDialog ref="dialogRef" v-model="showDialog" @hide="emit('close')">
+    <QDialog ref="dialogRef" v-model="_showDialog" @hide="onDialogHide">
         <QCard class="full-width dialog">
             <QCardSection class="row">
                 <span class="text-h6">{{ t('Progress') }}</span>
                 <QSpace />
-                <QBtn icon="close" flat round dense v-close-popup />
+                <QBtn icon="close" flat round dense @click="emit('close')" />
             </QCardSection>
             <QCardSection>
                 <div class="column">
@@ -68,7 +80,7 @@ const progressLabel = computed(() => `${Math.round($props.progress * 100)}%`);
                     type="button"
                     flat
                     class="text-primary"
-                    v-close-popup
+                    @click="cancel()"
                 >
                     {{ t('globals.cancel') }}
                 </QBtn>

src/components/common/VnSelect.vue

@@ -141,7 +141,6 @@ function findKeyInOptions() {
 function setOptions(data) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
-    emit('update:options', data);
 }
 
 function filter(val, options) {

src/components/common/VnTime.vue

@@ -1,16 +0,0 @@
-<script setup>
-const model = defineModel({ type: [String, Number], required: true });
-</script>
-<template>
-    <QTime v-model="model" now-btn mask="HH:mm" />
-</template>
-<style lang="scss" scoped>
-.q-time {
-    width: 230px;
-    min-width: unset;
-    :deep(.q-time__header) {
-        min-height: unset;
-        height: 50px;
-    }
-}
-</style>

src/components/ui/CardDescriptor.vue

@@ -47,7 +47,6 @@ let store;
 let entity;
 const isLoading = ref(false);
 const isSameDataKey = computed(() => $props.dataKey === route.meta.moduleName);
-const menuRef = ref();
 defineExpose({ getData });
 
 onBeforeMount(async () => {
@@ -171,7 +170,7 @@ const toModule = computed(() =>
                     <QTooltip>
                         {{ t('components.cardDescriptor.moreOptions') }}
                     </QTooltip>
-                    <QMenu :ref="menuRef">
+                    <QMenu ref="menuRef">
                         <QList>
                             <slot name="menu" :entity="entity" :menu-ref="menuRef" />
                         </QList>

src/components/ui/VnFilterPanel.vue

@@ -3,6 +3,7 @@ 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';
 
@@ -58,6 +59,7 @@ const $props = defineProps({
 });
 
 defineExpose({ search, sanitizer });
+
 const emit = defineEmits([
     'update:modelValue',
     'refresh',
@@ -112,9 +114,9 @@ watch(
 );
 
 const isLoading = ref(false);
-async function search(evt) {
+async function search() {
     try {
-        if (evt && $props.disableSubmitEvent) return;
+        if ($props.disableSubmitEvent) return;
 
         store.filter.where = {};
         isLoading.value = true;
@@ -165,7 +167,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: key, value });
+        tagList.push({ label: aliasField(key), value });
     }
     return tagList;
 });
@@ -185,6 +187,7 @@ 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);
 
@@ -200,6 +203,11 @@ function sanitizer(params) {
     }
     return params;
 }
+
+function aliasField(field) {
+    const split = field.split('.');
+    return split[1] ?? split[0];
+}
 </script>
 
 <template>
@@ -211,7 +219,7 @@ function sanitizer(params) {
         icon="search"
         @click="search()"
     ></QBtn>
-    <QForm @submit="search" id="filterPanelForm" @keyup.enter="search()">
+    <QForm @submit="search" id="filterPanelForm">
         <QList dense>
             <QItem class="q-mt-xs">
                 <QItemSection top>

src/components/ui/VnImg.vue

@@ -58,7 +58,7 @@ defineExpose({
         :class="{ zoomIn: zoom }"
         :src="getUrl()"
         v-bind="$attrs"
-        @click.stop="show = $props.zoom"
+        @click.stop="show = $props.zoom ? true : false"
         spinner-color="primary"
     />
     <QDialog v-if="$props.zoom" v-model="show">

src/components/ui/VnNotes.vue

@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { ref, reactive } from 'vue';
+import { ref } from 'vue';
 import { onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -12,40 +12,36 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnUserLink from 'components/ui/VnUserLink.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import VnAvatar from 'components/ui/VnAvatar.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnSelect from 'components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
-import VnInput from 'components/common/VnInput.vue';
 
 const $props = defineProps({
     url: { type: String, default: null },
     filter: { type: Object, default: () => {} },
     body: { type: Object, default: () => {} },
     addNote: { type: Boolean, default: false },
-    selectType: { type: Boolean, default: false },
 });
 
 const { t } = useI18n();
 const state = useState();
 const quasar = useQuasar();
 const currentUser = ref(state.getUser());
-const newNote = reactive({ text: null, observationTypeFk: null });
+const newNote = ref('');
-const observationTypes = ref([]);
 const vnPaginateRef = ref();
-
+function handleKeyUp(event) {
+    if (event.key === 'Enter') {
+        event.preventDefault();
+        if (!event.shiftKey) insert();
+    }
+}
 async function insert() {
-    if (!newNote.text || ($props.selectType && !newNote.observationTypeFk)) return;
-
     const body = $props.body;
-    const newBody = {
+    const newBody = { ...body, ...{ text: newNote.value } };
-        ...body,
-        ...{ text: newNote.text, observationTypeFk: newNote.observationTypeFk },
-    };
     await axios.post($props.url, newBody);
     await vnPaginateRef.value.fetch();
+    newNote.value = '';
 }
+
 onBeforeRouteLeave((to, from, next) => {
-    if (newNote.text)
+    if (newNote.value)
         quasar.dialog({
             component: VnConfirm,
             componentProps: {
@@ -58,13 +54,6 @@ onBeforeRouteLeave((to, from, next) => {
 });
 </script>
 <template>
-    <FetchData
-        v-if="selectType"
-        url="ObservationTypes"
-        :filter="{ fields: ['id', 'description'] }"
-        auto-load
-        @on-fetch="(data) => (observationTypes = data)"
-    />
     <QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">
         <QCardSection horizontal>
             <VnAvatar :worker-id="currentUser.id" size="md" />
@@ -73,28 +62,18 @@ onBeforeRouteLeave((to, from, next) => {
                 {{ t('globals.now') }}
             </div>
         </QCardSection>
-        <QCardSection class="q-px-xs q-my-none q-py-none">
+        <QCardSection class="q-pa-xs q-my-none q-py-none" horizontal>
-            <VnRow class="full-width">
+            <QInput
-                <VnSelect
+                v-model="newNote"
-                    :label="t('Observation type')"
+                class="full-width"
-                    v-if="selectType"
-                    url="ObservationTypes"
-                    v-model="newNote.observationTypeFk"
-                    option-label="description"
-                    style="flex: 0.15"
-                    :required="true"
-                    @keyup.enter.stop="insert"
-                />
-                <VnInput
-                    v-model.trim="newNote.text"
                 type="textarea"
                 :label="t('Add note here...')"
                 filled
                 size="lg"
                 autogrow
-                    @keyup.enter.stop="insert"
+                autofocus
+                @keyup="handleKeyUp"
                 clearable
-                    :required="true"
             >
                 <template #append>
                     <QBtn
@@ -103,12 +82,9 @@ onBeforeRouteLeave((to, from, next) => {
                         color="primary"
                         flat
                         @click="insert"
-                            class="q-mb-xs"
-                            dense
                     />
                 </template>
-                </VnInput>
+            </QInput>
-            </VnRow>
         </QCardSection>
     </QCard>
     <VnPaginate
@@ -122,10 +98,6 @@ onBeforeRouteLeave((to, from, next) => {
         class="show"
         v-bind="$attrs"
         search-url="notes"
-        @on-fetch="
-            newNote.text = '';
-            newNote.observationTypeFk = null;
-        "
     >
         <template #body="{ rows }">
             <TransitionGroup name="list" tag="div" class="column items-center full-width">
@@ -139,28 +111,13 @@ onBeforeRouteLeave((to, from, next) => {
                             :descriptor="false"
                             :worker-id="note.workerFk"
                             size="md"
-                            :title="note.worker?.user.nickname"
                         />
                         <div class="full-width row justify-between q-pa-xs">
-                            <div>
                             <VnUserLink
                                 :name="`${note.worker.user.nickname}`"
                                 :worker-id="note.worker.id"
                             />
-                                <QBadge
+                            {{ toDateHourMin(note.created) }}
-                                    class="q-ml-xs"
-                                    outline
-                                    color="grey"
-                                    v-if="selectType && note.observationTypeFk"
-                                >
-                                    {{
-                                        observationTypes.find(
-                                            (ot) => ot.id === note.observationTypeFk
-                                        )?.description
-                                    }}
-                                </QBadge>
-                            </div>
-                            <span v-text="toDateHourMin(note.created)" />
                         </div>
                     </QCardSection>
                     <QCardSection class="q-pa-xs q-my-none q-py-none">
@@ -174,6 +131,12 @@ onBeforeRouteLeave((to, from, next) => {
 <style lang="scss" scoped>
 .q-card {
     width: 90%;
+    @media (max-width: $breakpoint-sm) {
+        width: 100%;
+    }
+    &__section {
+        word-wrap: break-word;
+    }
 }
 .q-dialog .q-card {
     width: 400px;
@@ -187,28 +150,11 @@ onBeforeRouteLeave((to, from, next) => {
     opacity: 0;
     background-color: $primary;
 }
-
-.vn-row > :nth-child(2) {
-    margin-left: 0;
-}
-
-@media (max-width: $breakpoint-xs) {
-    .vn-row > :deep(*) {
-        margin-left: 0;
-    }
-    .q-card {
-        width: 100%;
-
-        &__section {
-            padding: 0;
-        }
-    }
-}
 </style>
 <i18n>
     es:
         Add note here...: Añadir nota aquí...
         New note: Nueva nota
         Save (Enter): Guardar (Intro)
-        Observation type: Tipo de observación
+
 </i18n>

src/components/ui/VnSearchbar.vue

@@ -108,7 +108,6 @@ async function search() {
             ...Object.fromEntries(staticParams),
             search: searchText.value,
         },
-        ...{ filter: props.filter },
     };
 
     if (props.whereFilter) {

src/components/ui/VnSubToolbar.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
-
 const stateStore = useStateStore();
 const actions = ref(null);
 const data = ref(null);
@@ -24,14 +23,13 @@ onMounted(() => {
     if (actions.value) observer.observe(actions.value, opts);
     if (data.value) observer.observe(data.value, opts);
 });
-
 onBeforeUnmount(() => stateStore.toggleSubToolbar());
 </script>
 
 <template>
     <QToolbar
         id="subToolbar"
-        class="justify-end sticky"
+        class="justify-end shadow-10"
         v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
     >
         <slot name="st-data">
@@ -43,9 +41,3 @@ onBeforeUnmount(() => stateStore.toggleSubToolbar());
         </slot>
     </QToolbar>
 </template>
-<style lang="scss" scoped>
-.sticky {
-    position: sticky;
-    z-index: 1;
-}
-</style>

src/components/ui/VnToSummary.vue

@@ -1,33 +0,0 @@
-<script setup>
-import { useRoute } from 'vue-router';
-import { defineProps } from 'vue';
-
-const props = defineProps({
-    routeName: {
-        type: String,
-        required: true,
-    },
-    entityId: {
-        type: [String, Number],
-        required: true,
-    },
-    url: {
-        type: String,
-        default: null,
-    },
-});
-
-const route = useRoute();
-const id = props.entityId;
-</script>
-
-<template>
-    <router-link
-        v-if="route?.name !== routeName"
-        :to="{ name: routeName, params: { id: id } }"
-        class="header link"
-        :href="url"
-    >
-        <QIcon name="open_in_new" color="white" size="sm" />
-    </router-link>
-</template>

src/components/ui/VnUsesMana.vue

@@ -1,55 +0,0 @@
-<script setup>
-import { defineProps, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-const props = defineProps({
-    usesMana: {
-        type: Boolean,
-        required: true,
-    },
-    manaCode: {
-        type: String,
-        required: true,
-    },
-    manaVal: {
-        type: String,
-        default: 'mana',
-    },
-    manaLabel: {
-        type: String,
-        default: 'Promotion mana',
-    },
-    manaClaimVal: {
-        type: String,
-        default: 'manaClaim',
-    },
-    claimLabel: {
-        type: String,
-        default: 'Claim mana',
-    },
-});
-
-const manaCode = ref(props.manaCode);
-</script>
-
-<template>
-    <div class="column q-gutter-y-sm q-mt-sm">
-        <QRadio
-            v-model="manaCode"
-            dense
-            :val="manaVal"
-            :label="t(manaLabel)"
-            :dark="true"
-            class="q-mb-sm"
-        />
-        <QRadio
-            v-model="manaCode"
-            dense
-            :val="manaClaimVal"
-            :label="t(claimLabel)"
-            :dark="true"
-            class="q-mb-sm"
-        />
-    </div>
-</template>

src/composables/useArrayData.js

@@ -114,7 +114,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             for (const row of response.data) store.data.push(row);
         } else {
             store.data = response.data;
-            if (!document.querySelectorAll('[role="dialog"][aria-modal="true"]').length)
+            if (!document.querySelectorAll('[role="dialog"]').length)
                 updateRouter && updateStateParams();
         }
 

src/css/app.scss

@@ -288,7 +288,3 @@ input::-webkit-inner-spin-button {
         color: $info;
     }
 }
-
-.no-visible {
-    visibility: hidden;
-}

src/filters/toHour.js

@@ -4,7 +4,7 @@ export default function toHour(date) {
     if (!isValidDate(date)) {
         return '--:--';
     }
-    return new Date(date || '').toLocaleTimeString([], {
+    return (new Date(date || '')).toLocaleTimeString([], {
         hour: '2-digit',
         minute: '2-digit',
     });

src/i18n/locale/en.yml

@@ -50,7 +50,6 @@ globals:
     summary:
         basicData: Basic data
     daysOnward: Days onward
-    daysAgo: Days ago
     today: Today
     yesterday: Yesterday
     dateFormat: en-GB
@@ -105,7 +104,6 @@ globals:
     campaign: Campaign
     weight: Weight
     error: Ups! Something went wrong
-    recalc: Recalculate
     pageTitles:
         logIn: Login
         addressEdit: Update address
@@ -113,7 +111,7 @@ globals:
         basicData: Basic data
         log: Logs
         parkingList: Parkings list
-        agencyList: Agencies
+        agencyList: Agencies list
         agency: Agency
         workCenters: Work centers
         modes: Modes
@@ -137,7 +135,7 @@ globals:
         fiscalData: Fiscal data
         billingData: Billing data
         consignees: Consignees
-        address-create: New address
+        'address-create': New address
         notes: Notes
         credits: Credits
         greuges: Greuges
@@ -209,7 +207,7 @@ globals:
         roadmap: Roadmap
         stops: Stops
         routes: Routes
-        cmrsList: CMRs
+        cmrsList: CMRs list
         RouteList: List
         routeCreate: New route
         RouteRoadmap: Roadmaps
@@ -275,9 +273,6 @@ globals:
         clientsActionsMonitor: Clients and actions
         serial: Serial
         medical: Mutual
-        RouteExtendedList: Router
-        wasteRecalc: Waste recaclulate
-        operator: Operator
     supplier: Supplier
     created: Created
     worker: Worker
@@ -293,10 +288,7 @@ globals:
     createInvoiceIn: Create invoice in
     myAccount: My account
     noOne: No one
-    maxTemperature: Max
-    minTemperature: Min
     params:
-        id: ID
         clientFk: Client id
         salesPersonFk: Sales person
         warehouseFk: Warehouse
@@ -304,13 +296,8 @@ globals:
         from: From
         To: To
         stateFk: State
-        email: Email
-        SSN: SSN
-        fi: FI
         myTeam: My team
         departmentFk: Department
-    changePass: Change password
-    deleteConfirmTitle: Delete selected elements
     changeState: Change state
 errors:
     statusUnauthorized: Access denied
@@ -318,7 +305,6 @@ 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:
@@ -512,8 +498,6 @@ ticket:
         warehouse: Warehouse
         customerCard: Customer card
         alias: Alias
-        ticketList: Ticket List
-        newOrder: New Order
     boxing:
         expedition: Expedition
         item: Item
@@ -535,7 +519,6 @@ ticket:
         landed: Landed
         consigneePhone: Consignee phone
         consigneeMobile: Consignee mobile
-        consigneeAddress: Consignee address
         clientPhone: Client phone
         clientMobile: Client mobile
         consignee: Consignee
@@ -564,11 +547,6 @@ ticket:
         weight: Weight
         goTo: Go to
         summaryAmount: Summary
-        purchaseRequest: Purchase request
-        service: Service
-        description: Description
-        attender: Attender
-        ok: Ok
     create:
         client: Client
         address: Address
@@ -592,6 +570,7 @@ invoiceOut:
         client: Client
         company: Company
         customerCard: Customer card
+        ticketList: Ticket List
     summary:
         issued: Issued
         created: Created
@@ -745,7 +724,6 @@ worker:
         locker: Locker
         balance: Balance
         medical: Medical
-        operator: Operator
     list:
         name: Name
         email: Email
@@ -818,14 +796,14 @@ worker:
         bankEntity: Swift / BIC
     formation:
         tableVisibleColumns:
-            course: Course
+            course: Curso
-            startDate: Start date
+            startDate: Fecha Inicio
-            endDate: End date
+            endDate: Fecha Fin
-            center: Training center
+            center: Centro Formación
-            invoice: Invoice
+            invoice: Factura
-            amount: Amount
+            amount: Importe
-            remark: Remark
+            remark: Bonficado
-            hasDiploma: Has diploma
+            hasDiploma: Diploma
     medical:
         tableVisibleColumns:
             date: Date
@@ -843,18 +821,6 @@ worker:
             debit: Debt
             credit: Have
             concept: Concept
-    operator:
-        numberOfWagons: Number of wagons
-        train: Train
-        itemPackingType: Item packing type
-        warehouse: Warehouse
-        sector: Sector
-        labeler: Printer
-        linesLimit: Lines limit
-        volumeLimit: Volume limit
-        sizeLimit: Size limit
-        isOnReservationMode: Reservation mode
-        machine: Machine
 wagon:
     pageTitles:
         wagons: Wagons
@@ -894,7 +860,34 @@ wagon:
         minHeightBetweenTrays: 'The minimum height between trays is '
         maxWagonHeight: 'The maximum height of the wagon is '
         uncompleteTrays: There are incomplete trays
-
+route:
+    pageTitles:
+        agency: Agency List
+        routes: Routes
+        cmrsList: CMRs list
+        RouteList: List
+        routeCreate: New route
+        basicData: Basic Data
+        summary: Summary
+        RouteRoadmap: Roadmaps
+        RouteRoadmapCreate: Create roadmap
+        tickets: Tickets
+        log: Log
+        autonomous: Autonomous
+    cmr:
+        list:
+            results: results
+            cmrFk: CMR id
+            hasCmrDms: Attached in gestdoc
+            'true': 'Yes'
+            'false': 'No'
+            ticketFk: Ticketd id
+            routeFk: Route id
+            country: Country
+            clientFk: Client id
+            shipped: Preparation date
+            viewCmr: View CMR
+            downloadCmrs: Download CMRs
 supplier:
     list:
         payMethod: Pay method

src/i18n/locale/es.yml

@@ -49,7 +49,6 @@ globals:
     summary:
         basicData: Datos básicos
     daysOnward: Días adelante
-    daysAgo: Días atras
     today: Hoy
     yesterday: Ayer
     dateFormat: es-ES
@@ -64,7 +63,7 @@ globals:
     shipped: F. envío
     totalEntries: Ent. totales
     amount: Importe
-    packages: Embalajes
+    packages: Bultos
     download: Descargar
     downloadPdf: Descargar PDF
     selectRows: 'Seleccionar las { numberRows } filas(s)'
@@ -107,7 +106,6 @@ globals:
     campaign: Campaña
     weight: Peso
     error: ¡Ups! Algo salió mal
-    recalc: Recalcular
     pageTitles:
         logIn: Inicio de sesión
         addressEdit: Modificar consignatario
@@ -115,7 +113,7 @@ globals:
         basicData: Datos básicos
         log: Historial
         parkingList: Listado de parkings
-        agencyList: Agencias
+        agencyList: Listado de agencias
         agency: Agencia
         workCenters: Centros de trabajo
         modes: Modos
@@ -213,13 +211,12 @@ globals:
         roadmap: Troncales
         stops: Paradas
         routes: Rutas
-        cmrsList: CMRs
+        cmrsList: Listado de CMRs
         RouteList: Listado
         routeCreate: Nueva ruta
         RouteRoadmap: Troncales
         RouteRoadmapCreate: Crear troncal
         autonomous: Autónomos
-        RouteExtendedList: Enrutador
         suppliers: Proveedores
         supplier: Proveedor
         supplierCreate: Nuevo proveedor
@@ -270,7 +267,7 @@ globals:
         tracking: Estados
         components: Componentes
         pictures: Fotos
-        packages: Embalajes
+        packages: Bultos
         ldap: LDAP
         samba: Samba
         twoFactor: Doble factor
@@ -280,8 +277,6 @@ globals:
         clientsActionsMonitor: Clientes y acciones
         serial: Facturas por serie
         medical: Mutua
-        wasteRecalc: Recalcular mermas
-        operator: Operario
     supplier: Proveedor
     created: Fecha creación
     worker: Trabajador
@@ -297,10 +292,7 @@ globals:
     createInvoiceIn: Crear factura recibida
     myAccount: Mi cuenta
     noOne: Nadie
-    maxTemperature: Máx
-    minTemperature: Mín
     params:
-        id: Id
         clientFk: Id cliente
         salesPersonFk: Comercial
         warehouseFk: Almacén
@@ -308,13 +300,8 @@ globals:
         from: Desde
         To: Hasta
         stateFk: Estado
-        departmentFk: Departamento
-        email: Correo
-        SSN: NSS
-        fi: NIF
         myTeam: Mi equipo
-    changePass: Cambiar contraseña
+        departmentFk: Departamento
-    deleteConfirmTitle: Eliminar los elementos seleccionados
     changeState: Cambiar estado
 errors:
     statusUnauthorized: Acceso denegado
@@ -322,7 +309,6 @@ 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:
@@ -503,7 +489,7 @@ ticket:
         tracking: Estados
         components: Componentes
         pictures: Fotos
-        packages: Embalajes
+        packages: Bultos
     list:
         nickname: Alias
         state: Estado
@@ -521,8 +507,6 @@ ticket:
         warehouse: Almacén
         customerCard: Ficha del cliente
         alias: Alias
-        ticketList: Listado de tickets
-        newOrder: Nuevo pedido
     boxing:
         expedition: Expedición
         item: Artículo
@@ -544,7 +528,6 @@ ticket:
         landed: Entregado
         consigneePhone: Tel. consignatario
         consigneeMobile: Móv. consignatario
-        consigneeAddress: Dir. consignatario
         clientPhone: Tel. cliente
         clientMobile: Móv. cliente
         consignee: Consignatario
@@ -573,10 +556,6 @@ ticket:
         weight: Peso
         goTo: Ir a
         summaryAmount: Resumen
-        purchaseRequest: Petición de compra
-        service: Servicio
-        description: Descripción
-        attender: Consignatario
     create:
         client: Cliente
         address: Dirección
@@ -752,7 +731,6 @@ worker:
         balance: Balance
         formation: Formación
         medical: Mutua
-        operator: Operario
     list:
         name: Nombre
         email: Email
@@ -841,19 +819,6 @@ worker:
             debit: Debe
             credit: Haber
             concept: Concepto
-    operator:
-        numberOfWagons: Número de vagones
-        train: tren
-        itemPackingType: Tipo de embalaje
-        warehouse: Almacén
-        sector: Sector
-        labeler: Impresora
-        linesLimit: Líneas límite
-        volumeLimit: Volumen límite
-        sizeLimit: Tamaño límite
-        isOnReservationMode: Modo de reserva
-        machine: Máquina
-
 wagon:
     pageTitles:
         wagons: Vagones
@@ -893,6 +858,21 @@ wagon:
         minHeightBetweenTrays: 'La distancia mínima entre bandejas es '
         maxWagonHeight: 'La altura máxima del vagón es '
         uncompleteTrays: Hay bandejas sin completar
+route:
+    cmr:
+        list:
+            results: resultados
+            cmrFk: Id CMR
+            hasCmrDms: Gestdoc
+            'true': Sí
+            'false': 'No'
+            ticketFk: Id ticket
+            routeFk: Id ruta
+            country: País
+            clientFk: Id cliente
+            shipped: Fecha preparación
+            viewCmr: Ver CMR
+            downloadCmrs: Descargar CMRs
 supplier:
     list:
         payMethod: Método de pago

src/layouts/MainLayout.vue

@@ -5,7 +5,7 @@ const quasar = useQuasar();
 </script>
 
 <template>
-    <QLayout view="hHh LpR fFf" v-shortcut>
+    <QLayout view="hHh lpR lFr" v-shortcut class="shadow-2">
         <Navbar />
         <RouterView></RouterView>
         <QFooter v-if="quasar.platform.is.mobile"></QFooter>

src/pages/Account/AccountList.vue

@@ -10,9 +10,7 @@ import RightMenu from 'src/components/common/RightMenu.vue';
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const tableRef = ref();
-const filter = {
+
-    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
-};
 const columns = computed(() => [
     {
         align: 'left',
@@ -24,22 +22,7 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: 'roleFk',
+        name: 'username',
-        label: t('role'),
-        columnFilter: {
-            component: 'select',
-            name: 'roleFk',
-            attrs: {
-                url: 'VnRoles',
-                optionValue: 'id',
-                optionLabel: 'name',
-            },
-        },
-        format: ({ role }, dashIfEmpty) => dashIfEmpty(role?.name),
-    },
-    {
-        align: 'left',
-        name: 'nickname',
         label: t('Nickname'),
         isTitle: true,
         component: 'input',
@@ -108,7 +91,6 @@ const exprBuilder = (param, value) => {
         :expr-builder="exprBuilder"
         :label="t('account.search')"
         :info="t('account.searchInfo')"
-        :filter="filter"
     />
     <RightMenu>
         <template #right-panel>
@@ -119,7 +101,6 @@ const exprBuilder = (param, value) => {
         ref="tableRef"
         data-key="AccountUsers"
         url="VnUsers/preview"
-        :filter="filter"
         order="id DESC"
         :columns="columns"
         default-mode="table"

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

@@ -46,9 +46,13 @@ const columns = computed(() => [
 ]);
 
 const deleteAlias = async (row) => {
+    try {
         await axios.delete(`${urlPath.value}/${row.id}`);
         notify(t('User removed'), 'positive');
         fetchAliases();
+    } catch (error) {
+        console.error(error);
+    }
 };
 
 watch(

src/pages/Account/Card/AccountDescriptorMenu.vue

@@ -4,12 +4,9 @@ import { computed, ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import { useRoute } from 'vue-router';
-import { useAcl } from 'src/composables/useAcl';
 import { useArrayData } from 'src/composables/useArrayData';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
-import VnChangePassword from 'src/components/common/VnChangePassword.vue';
 import useNotify from 'src/composables/useNotify.js';
-
 const $props = defineProps({
     hasAccount: {
         type: Boolean,
@@ -65,19 +62,6 @@ async function sync() {
 }
 </script>
 <template>
-    <VnChangePassword
-        ref="changePassRef"
-        :ask-old-pass="true"
-        :submit-fn="
-            async (newPassword, oldPassword) => {
-                await axios.patch(`Accounts/change-password`, {
-                    userId: entityId,
-                    newPassword,
-                    oldPassword,
-                });
-            }
-        "
-    />
     <VnConfirm
         v-model="showSyncDialog"
         :message="t('account.card.actions.sync.message')"
@@ -108,17 +92,6 @@ async function sync() {
             />
         </template>
     </VnConfirm>
-    <QItem
-        v-if="
-            entityId == account.id &&
-            useAcl().hasAny([{ model: 'Account', props: '*', accessType: 'WRITE' }])
-        "
-        v-ripple
-        clickable
-        @click="$refs.changePassRef.show()"
-    >
-        <QItemSection>{{ t('globals.changePass') }}</QItemSection>
-    </QItem>
     <QItem
         v-if="account.hasAccount"
         v-ripple
@@ -165,5 +138,6 @@ async function sync() {
     <QItem v-ripple clickable @click="showSyncDialog = true">
         <QItemSection>{{ t('account.card.actions.sync.name') }}</QItemSection>
     </QItem>
+
     <QSeparator />
 </template>

src/pages/Account/Card/AccountMailAlias.vue

@@ -61,15 +61,23 @@ const fetchAccountExistence = async () => {
 };
 
 const deleteMailAlias = async (row) => {
+    try {
         await axios.delete(`${urlPath}/${row.id}`);
         fetchMailAliases();
         notify(t('Unsubscribed from alias!'), 'positive');
+    } catch (error) {
+        console.error(error);
+    }
 };
 
 const createMailAlias = async (mailAliasFormData) => {
+    try {
         await axios.post(urlPath, mailAliasFormData);
         notify(t('Subscribed to alias!'), 'positive');
         fetchMailAliases();
+    } catch (error) {
+        console.error(error);
+    }
 };
 
 const fetchMailAliases = async () => {

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

@@ -46,15 +46,29 @@ const columns = computed(() => [
 ]);
 
 const deleteSubRole = async (row) => {
+    try {
         await axios.delete(`${urlPath.value}/${row.id}`);
         fetchSubRoles();
-    notify(t('Role removed. Changes will take a while to fully propagate.'), 'positive');
+        notify(
+            t('Role removed. Changes will take a while to fully propagate.'),
+            'positive'
+        );
+    } catch (error) {
+        console.error(error);
+    }
 };
 
 const createSubRole = async (subRoleFormData) => {
+    try {
         await axios.post(urlPath.value, subRoleFormData);
-    notify(t('Role added! Changes will take a while to fully propagate.'), 'positive');
+        notify(
+            t('Role added! Changes will take a while to fully propagate.'),
+            'positive'
+        );
         fetchSubRoles();
+    } catch (error) {
+        console.error(error);
+    }
 };
 
 watch(

src/pages/Customer/Card/CustomerBalance.vue

@@ -185,8 +185,8 @@ const showBalancePdf = ({ id }) => {
         @on-fetch="getCurrentBalance"
     ></FetchData>
 
-    <VnSubToolbar class="q-mb-md">
+    <template v-if="stateStore.isHeaderMounted()">
-        <template #st-data>
+        <Teleport to="#st-data">
             <div class="column justify-center q-px-md q-py-sm">
                 <span class="text-bold">{{ t('Total by company') }}</span>
                 <div class="row justify-center">
@@ -194,8 +194,8 @@ const showBalancePdf = ({ id }) => {
                     {{ toCurrency(currentBalance[companyId]?.amount) }}
                 </div>
             </div>
-        </template>
+        </Teleport>
-        <template #st-actions>
+        <Teleport to="#st-actions">
             <div>
                 <VnSelect
                     :label="t('Company')"
@@ -207,8 +207,8 @@ const showBalancePdf = ({ id }) => {
                     option-value="id"
                 ></VnSelect>
             </div>
+        </Teleport>
     </template>
-    </VnSubToolbar>
     <VnTable
         ref="tableRef"
         data-key="CustomerBalance"

src/pages/Customer/Card/CustomerConsumptionFilter.vue

@@ -1,177 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import { QItem } from 'quasar';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import { QItemSection } from 'quasar';
-import VnInputDate from 'src/components/common/VnInputDate.vue';
-import { toDate } from 'src/filters';
-
-const { t } = useI18n();
-defineProps({ dataKey: { type: String, required: true } });
-</script>
-<template>
-    <VnFilterPanel :data-key="dataKey" :search-button="true">
-        <template #tags="{ tag, formatFn }">
-            <div class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
-                <span>{{ formatFn(tag.value) }}</span>
-            </div>
-        </template>
-        <template #body="{ params }">
-            <QItem>
-                <QItemSection>
-                    <VnInput
-                        :label="t('params.item')"
-                        v-model="params.itemId"
-                        is-outlined
-                        lazy-rules
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnSelect
-                        v-model="params.buyerId"
-                        url="TicketRequests/getItemTypeWorker"
-                        :fields="['id', 'nickname']"
-                        sort-by="nickname ASC"
-                        :label="t('params.buyer')"
-                        option-value="id"
-                        option-label="nickname"
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnSelect
-                        v-model="params.typeId"
-                        url="ItemTypes"
-                        :include="['category']"
-                        :fields="['id', 'name', 'categoryFk']"
-                        sort-by="name ASC"
-                        :label="t('params.typeId')"
-                        option-label="name"
-                        option-value="id"
-                        dense
-                        outlined
-                        rounded
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
-                                    <QItemLabel caption>{{
-                                        scope.opt?.category?.name
-                                    }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnSelect
-                        v-model="params.categoryId"
-                        url="ItemCategories"
-                        :fields="['id', 'name']"
-                        sort-by="name ASC"
-                        :label="t('params.categoryId')"
-                        option-label="name"
-                        option-value="id"
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnSelect
-                        v-model="params.campaignId"
-                        url="Campaigns/latest"
-                        sort-by="dated DESC"
-                        :label="t('params.campaignId')"
-                        option-label="code"
-                        option-value="id"
-                        dense
-                        outlined
-                        rounded
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{
-                                        t(`params.${scope.opt?.code}`)
-                                    }}</QItemLabel>
-                                    <QItemLabel caption>{{
-                                        toDate(scope.opt.dated)
-                                    }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInputDate
-                        :label="t('params.from')"
-                        v-model="params.from"
-                        @update:model-value="searchFn()"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInputDate
-                        :label="t('params.to')"
-                        v-model="params.to"
-                        @update:model-value="searchFn()"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-        </template>
-    </VnFilterPanel>
-</template>
-<i18n>
-en:
-    params:
-        item: Item id
-        buyer: Buyer
-        type: Type
-        category: Category
-        itemId: Item id
-        buyerId: Buyer
-        typeId: Type
-        categoryId: Category
-        from: From
-        to: To
-        campaignId: Campaña
-        valentinesDay: Valentine's Day
-        mothersDay: Mother's Day
-        allSaints: All Saints' Day
-es:
-    params:
-        item: Id artículo
-        buyer: Comprador
-        type: Tipo
-        category: Categoría
-        itemId: Id Artículo
-        buyerId: Comprador
-        typeId: Tipo
-        categoryId: Reino
-        from: Desde
-        to: Hasta
-        campaignId: Campaña
-        valentinesDay: Día de San Valentín
-        mothersDay: Día de la Madre
-        allSaints: Día de Todos los Santos
-</i18n>

src/pages/Customer/Card/CustomerNotes.vue

@@ -22,6 +22,5 @@ const noteFilter = computed(() => {
         :filter="noteFilter"
         :body="{ clientFk: route.params.id }"
         style="overflow-y: auto"
-        :select-type="true"
     />
 </template>

src/pages/Customer/Card/CustomerUnpaid.vue

@@ -92,7 +92,7 @@ const onSubmit = async () => {
         notify('globals.dataSaved', 'positive');
         unpaidClient.value = true;
     } catch (error) {
-        notify('errors.writeRequest', 'negative');
+        notify('errors.create', 'negative');
     } finally {
         isLoading.value = false;
     }

src/pages/Customer/Card/CustomerWebAccess.vue

@@ -3,11 +3,14 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
+import { useQuasar } from 'quasar';
+
 import VnInput from 'src/components/common/VnInput.vue';
+import CustomerChangePassword from 'src/pages/Customer/components/CustomerChangePassword.vue';
 import FormModel from 'components/FormModel.vue';
-import VnChangePassword from 'src/components/common/VnChangePassword.vue';
 
 const { t } = useI18n();
+const quasar = useQuasar();
 const route = useRoute();
 const canChangePassword = ref(0);
 
@@ -18,11 +21,21 @@ const filter = computed(() => {
     };
 });
 
+const showChangePasswordDialog = () => {
+    quasar.dialog({
+        component: CustomerChangePassword,
+        componentProps: {
+            id: route.params.id,
+        },
+    });
+};
+
 async function hasCustomerRole() {
     const { data } = await axios(`Clients/${route.params.id}/hasCustomerRole`);
     canChangePassword.value = data;
 }
 </script>
+
 <template>
     <FormModel
         url="VnUsers/preview"
@@ -56,29 +69,21 @@ async function hasCustomerRole() {
         </template>
         <template #moreActions>
             <QBtn
-                :label="t('globals.changePass')"
+                :label="t('Change password')"
                 color="primary"
                 icon="edit"
                 :disable="!canChangePassword"
-                @click="$refs.changePassRef.show"
+                @click="showChangePasswordDialog()"
             />
         </template>
     </FormModel>
-    <VnChangePassword
-        ref="changePassRef"
-        :submit-fn="
-            async (newPass) => {
-                await axios.patch(`Clients/${$route.params.id}/setPassword`, {
-                    newPassword: newPass,
-                });
-            }
-        "
-    />
 </template>
+
 <i18n>
 es:
     Enable web access: Habilitar acceso web
     User: Usuario
     Recovery email: Correo de recuperacion
     This email is used for user to regain access their account: Este correo electrónico se usa para que el usuario recupere el acceso a su cuenta
+    Change password: Cambiar contraseña
 </i18n>

src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue

@@ -25,31 +25,19 @@ const { notify } = useNotify();
 const { t } = useI18n();
 
 const newObservation = ref(null);
-const obsId = ref(null);
 
 const onSubmit = async () => {
     try {
-        if (!obsId.value)
+        const data = $props.clients.map((item) => {
-            obsId.value = (
+            return { clientFk: item.clientFk, text: newObservation.value };
-                await axios.get('ObservationTypes/findOne', {
-                    params: { filter: { where: { description: 'Finance' } } },
-                })
-            ).data?.id;
-
-        const bodyObs = $props.clients.map((item) => {
-            return {
-                clientFk: item.clientFk,
-                text: newObservation.value,
-                observationTypeFk: obsId.value,
-            };
         });
-        await axios.post('ClientObservations', bodyObs);
+        await axios.post('ClientObservations', data);
 
-        const bodyObsMail = {
+        const payload = {
             defaulters: $props.clients,
             observation: newObservation.value,
         };
-        await axios.post('Defaulters/observationEmail', bodyObsMail);
+        await axios.post('Defaulters/observationEmail', payload);
 
         await $props.promise();
 

src/pages/Customer/components/CustomerAddressEdit.vue

@@ -240,6 +240,7 @@ function handleLocation(data, location) {
                 class="row q-gutter-md q-mb-md"
                 v-for="(note, index) in notes"
             >
+                <div class="col">
                     <VnSelect
                         :label="t('Observation type')"
                         :options="observationTypes"
@@ -248,14 +249,17 @@ function handleLocation(data, location) {
                         option-value="id"
                         v-model="note.observationTypeFk"
                     />
+                </div>
+                <div class="col">
                     <VnInput
                         :label="t('Description')"
                         :rules="validate('route.description')"
                         clearable
                         v-model="note.description"
                     />
+                </div>
+                <div class="flex items-center">
                     <QIcon
-                    :style="{ flex: 0, 'align-self': $q.screen.gt.xs ? 'end' : 'center' }"
                         @click.stop="deleteNote(note.id, index)"
                         class="cursor-pointer"
                         color="primary"
@@ -266,7 +270,9 @@ function handleLocation(data, location) {
                             {{ t('Remove note') }}
                         </QTooltip>
                     </QIcon>
+                </div>
             </VnRow>
+
             <QBtn
                 @click.stop="addNote()"
                 class="cursor-pointer add-icon q-mt-md"

src/pages/Customer/components/CustomerChangePassword.vue

@@ -0,0 +1,138 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import axios from 'axios';
+import { useDialogPluginComponent } from 'quasar';
+
+import useNotify from 'src/composables/useNotify';
+
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FetchData from 'src/components/FetchData.vue';
+
+const { dialogRef } = useDialogPluginComponent();
+const { notify } = useNotify();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: String,
+        required: true,
+    },
+    promise: {
+        type: Function,
+        required: true,
+    },
+});
+const userPasswords = ref({});
+
+const closeButton = ref(null);
+const isLoading = ref(false);
+const newPassword = ref('');
+const requestPassword = ref('');
+
+const onSubmit = async () => {
+    isLoading.value = true;
+
+    if (newPassword.value !== requestPassword.value) {
+        notify(t("Passwords don't match"), 'negative');
+        isLoading.value = false;
+        return;
+    }
+
+    const payload = {
+        newPassword: newPassword.value,
+    };
+    try {
+        await axios.patch(`Clients/${$props.id}/setPassword`, payload);
+    } catch (error) {
+        notify('errors.create', 'negative');
+    } finally {
+        isLoading.value = false;
+        if (closeButton.value) closeButton.value.click();
+    }
+};
+</script>
+
+<template>
+    <QDialog ref="dialogRef">
+        <FetchData
+            @on-fetch="(data) => (userPasswords = data[0])"
+            auto-load
+            url="UserPasswords"
+        />
+        <QCard class="q-pa-lg">
+            <QCardSection>
+                <QForm @submit.prevent="onSubmit">
+                    <span
+                        ref="closeButton"
+                        class="row justify-end close-icon"
+                        v-close-popup
+                    >
+                        <QIcon name="close" size="sm" />
+                    </span>
+
+                    <VnRow class="row q-gutter-md q-mb-md" style="flex-direction: column">
+                        <div class="col">
+                            <VnInput
+                                :label="t('New password')"
+                                clearable
+                                v-model="newPassword"
+                                type="password"
+                            >
+                                <template #append>
+                                    <QIcon name="info" class="cursor-info">
+                                        <QTooltip>
+                                            {{
+                                                t('customer.card.passwordRequirements', {
+                                                    ...userPasswords,
+                                                })
+                                            }}
+                                        </QTooltip>
+                                    </QIcon>
+                                </template>
+                            </VnInput>
+                        </div>
+                        <div class="col">
+                            <VnInput
+                                :label="t('Request password')"
+                                clearable
+                                v-model="requestPassword"
+                                type="password"
+                            />
+                        </div>
+                    </VnRow>
+
+                    <div class="q-mt-lg row justify-end">
+                        <QBtn
+                            :disabled="isLoading"
+                            :label="t('globals.cancel')"
+                            :loading="isLoading"
+                            class="q-ml-sm"
+                            color="primary"
+                            flat
+                            type="reset"
+                            v-close-popup
+                        />
+                        <QBtn
+                            :disabled="isLoading"
+                            :label="t('Change password')"
+                            :loading="isLoading"
+                            color="primary"
+                            type="submit"
+                        />
+                    </div>
+                </QForm>
+            </QCardSection>
+        </QCard>
+    </QDialog>
+</template>
+
+<i18n>
+es:
+    New password: Nueva contraseña
+    Request password: Repetir contraseña
+    Change password: Cambiar contraseña
+    Passwords don't match: Las contraseñas no coinciden
+</i18n>

src/pages/Customer/components/CustomerSamplesCreate.vue

@@ -138,7 +138,7 @@ const onSubmit = async () => {
         notify('globals.dataSaved', 'positive');
         onDataSaved(data);
     } catch (error) {
-        notify('errors.writeRequest', 'negative');
+        notify('errors.create', 'negative');
     } finally {
         isLoading.value = false;
     }

src/pages/Customer/components/CustomerSummaryTable.vue

@@ -6,7 +6,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { date } from 'quasar';
 import { toDateFormat } from 'src/filters/date.js';
 
-import { dashIfEmpty, toCurrency } from 'src/filters';
+import { toCurrency } from 'src/filters';
 
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
@@ -32,16 +32,6 @@ const filter = {
         },
         { relation: 'invoiceOut', scope: { fields: ['id'] } },
         { relation: 'agencyMode', scope: { fields: ['name'] } },
-        {
-            relation: 'ticketSales',
-            scope: {
-                fields: ['id', 'concept', 'itemFk'],
-                include: { relation: 'item' },
-                scope: {
-                    fields: ['id', 'name', 'itemPackingTypeFk'],
-                },
-            },
-        },
     ],
     where: { clientFk: route.params.id },
     order: ['shipped DESC', 'id'],
@@ -97,12 +87,7 @@ const columns = computed(() => [
         label: t('Total'),
         name: 'total',
     },
-    {
+
-        align: 'left',
-        name: 'itemPackingTypeFk',
-        label: t('ticketSale.packaging'),
-        format: (row) => getItemPackagingType(row),
-    },
     {
         align: 'right',
         label: '',
@@ -150,15 +135,6 @@ const setShippedColor = (date) => {
     if (difference == 0) return 'warning';
     if (difference < 0) return 'success';
 };
-
-const getItemPackagingType = (row) => {
-    const packagingType = row?.ticketSales
-        .map((sale) => sale.item?.itemPackingTypeFk || '-')
-        .filter((value) => value !== '-')
-        .join(', ');
-
-    return dashIfEmpty(packagingType);
-};
 </script>
 
 <template>

src/pages/Entry/Card/EntrySummary.vue

@@ -11,7 +11,6 @@ import { toDate, toCurrency } from 'src/filters';
 import { getUrl } from 'src/composables/getUrl';
 import axios from 'axios';
 import FetchedTags from 'src/components/ui/FetchedTags.vue';
-import VnToSummary from 'src/components/ui/VnToSummary.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -164,12 +163,14 @@ const fetchEntryBuys = async () => {
         data-key="EntrySummary"
     >
         <template #header-left>
-            <VnToSummary
+            <router-link
                 v-if="route?.name !== 'EntrySummary'"
-                :route-name="'EntrySummary'"
+                :to="{ name: 'EntrySummary', params: { id: entityId } }"
-                :entity-id="entityId"
+                class="header link"
-                :url="entryUrl"
+                :href="entryUrl"
-            />
+            >
+                <QIcon name="open_in_new" color="white" size="sm" />
+            </router-link>
         </template>
         <template #header>
             <span>{{ entry.id }} - {{ entry.supplier.nickname }}</span>

src/pages/Entry/EntryStockBought.vue

@@ -1,301 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useState } from 'src/composables/useState';
-import { useQuasar } from 'quasar';
-
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import FetchData from 'components/FetchData.vue';
-import FormModelPopup from 'components/FormModelPopup.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import RightMenu from 'src/components/common/RightMenu.vue';
-import EntryStockBoughtFilter from './EntryStockBoughtFilter.vue';
-import VnTable from 'components/VnTable/VnTable.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import EntryStockBoughtDetail from 'src/pages/Entry/EntryStockBoughtDetail.vue';
-
-const { t } = useI18n();
-const quasar = useQuasar();
-const state = useState();
-const user = state.getUser();
-const columns = [
-    {
-        align: 'left',
-        label: 'Id',
-        name: 'id',
-        isId: true,
-        columnFilter: false,
-        visible: false,
-    },
-    {
-        align: 'left',
-        name: 'workerFk',
-        label: t('Buyer'),
-        isTitle: true,
-        component: 'select',
-        cardVisible: true,
-        create: true,
-        attrs: {
-            url: 'Workers/activeWithInheritedRole',
-            fields: ['id', 'name'],
-            where: { role: 'buyer' },
-            optionFilter: 'firstName',
-            optionLabel: 'name',
-            optionValue: 'id',
-            useLike: false,
-        },
-        columnFilter: false,
-    },
-    {
-        align: 'center',
-        label: t('Reserve'),
-        name: 'reserve',
-        columnFilter: false,
-        create: true,
-        component: 'number',
-        summation: true,
-    },
-    {
-        align: 'center',
-        label: t('Bought'),
-        name: 'bought',
-        summation: true,
-        cardVisible: true,
-        columnFilter: false,
-    },
-    {
-        align: 'left',
-        label: t('Date'),
-        name: 'dated',
-        component: 'date',
-        visible: false,
-        create: true,
-    },
-    {
-        align: 'left',
-        name: 'tableActions',
-        actions: [
-            {
-                title: t('View more details'),
-                icon: 'search',
-                isPrimary: true,
-                action: (row) => {
-                    quasar.dialog({
-                        component: EntryStockBoughtDetail,
-                        componentProps: {
-                            workerFk: row.workerFk,
-                            dated: userParams.value.dated,
-                        },
-                    });
-                },
-            },
-        ],
-    },
-];
-
-const fetchDataRef = ref();
-const travelDialogRef = ref(false);
-const tableRef = ref();
-const travel = ref(null);
-const userParams = ref({
-    dated: Date.vnNew(),
-});
-
-const filter = ref({
-    fields: ['id', 'm3', 'warehouseInFk'],
-    include: [
-        {
-            relation: 'warehouseIn',
-            scope: {
-                fields: ['code'],
-            },
-        },
-    ],
-    where: {
-        shipped: (userParams.value.dated
-            ? new Date(userParams.value.dated)
-            : Date.vnNew()
-        ).setHours(0, 0, 0, 0),
-        m3: { neq: null },
-    },
-});
-
-const setUserParams = async ({ dated }) => {
-    const shipped = (dated ? new Date(dated) : Date.vnNew()).setHours(0, 0, 0, 0);
-    filter.value.where.shipped = shipped;
-    fetchDataRef.value?.fetch();
-};
-
-function openDialog() {
-    travelDialogRef.value = true;
-}
-
-function setFooter(data) {
-    const footer = {
-        bought: 0,
-        reserve: 0,
-    };
-    data.forEach((row) => {
-        footer.bought += row?.bought;
-        footer.reserve += row?.reserve;
-    });
-    tableRef.value.footer = footer;
-}
-
-function round(value) {
-    return Math.round(value * 100) / 100;
-}
-</script>
-<template>
-    <VnSubToolbar>
-        <template #st-data>
-            <FetchData
-                ref="fetchDataRef"
-                url="Travels"
-                auto-load
-                :filter="filter"
-                @on-fetch="
-                    (data) => {
-                        travel = data.find(
-                            (data) => data.warehouseIn?.code.toLowerCase() === 'vnh'
-                        );
-                    }
-                "
-            />
-            <VnRow class="travel">
-                <div v-if="travel">
-                    <span style="color: var(--vn-label-color)">
-                        {{ t('Purchase Spaces') }}:
-                    </span>
-                    <span>
-                        {{ travel?.m3 }}
-                    </span>
-                    <QBtn
-                        v-if="travel?.m3"
-                        style="max-width: 20%"
-                        flat
-                        icon="edit"
-                        @click="openDialog()"
-                        :title="t('Edit travel')"
-                        color="primary"
-                    />
-                </div>
-            </VnRow>
-        </template>
-    </VnSubToolbar>
-    <QDialog v-model="travelDialogRef" :maximized="true" :class="['vn-row', 'wrap']">
-        <FormModelPopup
-            :url-update="`Travels/${travel?.id}`"
-            model="travel"
-            :title="t('Travel m3')"
-            :form-initial-data="{ id: travel?.id, m3: travel?.m3 }"
-            @on-data-saved="fetchDataRef.fetch()"
-        >
-            <template #form-inputs="{ data }">
-                <VnInput
-                    v-model="data.id"
-                    :label="t('id')"
-                    type="number"
-                    disable
-                    readonly
-                />
-                <VnInput v-model="data.m3" :label="t('m3')" type="number" />
-            </template>
-        </FormModelPopup>
-    </QDialog>
-    <RightMenu>
-        <template #right-panel>
-            <EntryStockBoughtFilter
-                data-key="StockBoughts"
-                @set-user-params="setUserParams"
-            />
-        </template>
-    </RightMenu>
-    <div class="table-container">
-        <div class="column items-center">
-            <VnTable
-                ref="tableRef"
-                data-key="StockBoughts"
-                url="StockBoughts/getStockBought"
-                save-url="StockBoughts/crud"
-                order="reserve DESC"
-                :right-search="false"
-                :is-editable="true"
-                @on-fetch="(data) => setFooter(data)"
-                :create="{
-                    urlCreate: 'StockBoughts',
-                    title: t('Reserve some space'),
-                    onDataSaved: () => tableRef.reload(),
-                    formInitialData: {
-                        workerFk: user.id,
-                        dated: Date.vnNow(),
-                    },
-                }"
-                :columns="columns"
-                :user-params="userParams"
-                :footer="true"
-                table-height="80vh"
-                auto-load
-                :column-search="false"
-            >
-                <template #column-workerFk="{ row }">
-                    <span class="link" @click.stop>
-                        {{ row?.worker?.user?.name }}
-                        <WorkerDescriptorProxy :id="row?.workerFk" />
-                    </span>
-                </template>
-                <template #column-bought="{ row }">
-                    <span :class="{ 'text-negative': row.reserve < row.bought }">
-                        {{ row?.bought }}
-                    </span>
-                </template>
-                <template #column-footer-reserve>
-                    <span>
-                        {{ round(tableRef.footer.reserve) }}
-                    </span>
-                </template>
-                <template #column-footer-bought>
-                    <span
-                        :class="{
-                            'text-negative':
-                                tableRef.footer.reserve < tableRef.footer.bought,
-                        }"
-                    >
-                        {{ round(tableRef.footer.bought) }}
-                    </span>
-                </template>
-            </VnTable>
-        </div>
-    </div>
-</template>
-<style lang="scss" scoped>
-.travel {
-    margin-bottom: 0px;
-}
-.table-container {
-    display: flex;
-    justify-content: center;
-}
-.column {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-.text-negative {
-    color: $negative !important;
-}
-</style>
-<i18n>
-    es:
-        Edit travel: Editar envío
-        Travel: Envíos
-        Purchase Spaces: Espacios de compra
-        Buyer: Comprador
-        Reserve: Reservado
-        Bought: Comprado
-        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 
-</i18n>

src/pages/Entry/EntryStockBoughtDetail.vue

@@ -1,126 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import VnTable from 'components/VnTable/VnTable.vue';
-import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
-import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
-
-const { t } = useI18n();
-const tableRef = ref();
-const $props = defineProps({
-    workerFk: {
-        type: Number,
-        required: true,
-    },
-    dated: {
-        type: Date,
-        required: true,
-    },
-});
-const customUrl = `StockBoughts/getStockBoughtDetail?workerFk=${$props.workerFk}&date=${$props.dated}`;
-const columns = [
-    {
-        align: 'left',
-        label: t('Entry'),
-        name: 'entryFk',
-        isTitle: true,
-        isId: true,
-        columnFilter: false,
-    },
-    {
-        align: 'left',
-        name: 'itemFk',
-        label: t('Item'),
-        columnFilter: false,
-    },
-    {
-        align: 'left',
-        label: t('Name'),
-        name: 'itemName',
-        create: true,
-        columnClass: 'expand',
-        columnFilter: false,
-        cardVisible: true,
-    },
-    {
-        align: 'left',
-        name: 'volume',
-        label: t('Volume'),
-        columnFilter: false,
-        cardVisible: true,
-    },
-    {
-        align: 'left',
-        label: t('Packaging'),
-        name: 'packagingFk',
-        columnFilter: false,
-        cardVisible: true,
-    },
-    {
-        align: 'left',
-        label: 'Packing',
-        name: 'packing',
-        columnFilter: false,
-        cardVisible: true,
-    },
-];
-</script>
-<template>
-    <QDialog>
-        <div class="container">
-            <VnTable
-                ref="tableRef"
-                data-key="StockBoughtsDetail"
-                :url="customUrl"
-                order="itemName DESC"
-                :columns="columns"
-                :right-search="false"
-                :disable-infinite-scroll="true"
-                :disable-option="{ card: true }"
-                :limit="0"
-                auto-load
-            >
-                <template #column-entryFk="{ row }">
-                    <span class="link">
-                        {{ row?.entryFk }}
-                        <EntryDescriptorProxy :id="row.entryFk" />
-                    </span>
-                </template>
-                <template #column-itemName="{ row }">
-                    <span class="link">
-                        {{ row?.itemName }}
-                        <ItemDescriptorProxy :id="row.itemFk" />
-                    </span>
-                </template>
-            </VnTable>
-        </div>
-    </QDialog>
-</template>
-<style lang="css" scoped>
-.container {
-    max-width: 50vw;
-    overflow: auto;
-    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>
-    es:
-        Buyer: Comprador
-        Reserve: Reservado
-        Bought: Comprado
-        More: Más
-        Date: Fecha
-        Entry: Entrada
-        Item: Artículo
-        Name: Nombre
-        Volume: Volumen
-        Packaging: Embalage 
-</i18n>

src/pages/Entry/EntryStockBoughtFilter.vue

@@ -1,63 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { onMounted } from 'vue';
-import { useStateStore } from 'stores/useStateStore';
-
-import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnInputDate from 'src/components/common/VnInputDate.vue';
-
-const { t } = useI18n();
-const props = defineProps({
-    dataKey: {
-        type: String,
-        required: true,
-    },
-});
-const stateStore = useStateStore();
-const emit = defineEmits(['set-user-params']);
-const setUserParams = (params) => {
-    emit('set-user-params', params);
-};
-onMounted(async () => {
-    stateStore.rightDrawer = true;
-});
-</script>
-
-<template>
-    <VnFilterPanel
-        :data-key="props.dataKey"
-        :search-button="true"
-        search-url="table"
-        @set-user-params="setUserParams"
-    >
-        <template #tags="{ tag, formatFn }">
-            <div class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
-                <span>{{ formatFn(tag.value) }}</span>
-            </div>
-        </template>
-        <template #body="{ params }">
-            <QItem class="q-my-sm">
-                <QItemSection>
-                    <VnInputDate
-                        id="date"
-                        v-model="params.dated"
-                        :label="t('Date')"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-        </template>
-    </VnFilterPanel>
-</template>
-<i18n>
-    en:
-        params:
-            dated: Date
-            workerFk: Worker
-    es:
-        Date: Fecha
-        params:
-            dated: Date
-            workerFk: Trabajador
-</i18n>

src/pages/Entry/EntryWasteRecalc.vue

@@ -1,72 +0,0 @@
-<script setup>
-import { ref, computed, watch } from 'vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
-import useNotify from 'src/composables/useNotify.js';
-import axios from 'axios';
-
-const isLoading = ref(false);
-const dateFrom = ref();
-const dateTo = ref();
-
-const optionsTo = computed(() => (date) => {
-    if (!dateFrom.value) return true;
-    return new Date(date) >= new Date(dateFrom.value);
-});
-
-watch(dateFrom, (newDateFrom) => {
-    if (dateTo.value && new Date(dateTo.value) < new Date(newDateFrom))
-        dateTo.value = newDateFrom;
-});
-
-const recalc = async () => {
-    const { notify } = useNotify();
-
-    const params = {
-        schema: 'bs',
-        params: [new Date(dateFrom.value), new Date(dateTo.value)],
-    };
-
-    try {
-        isLoading.value = true;
-        await axios.post('Applications/waste_addSales/execute-proc', params);
-        notify('wasteRecalc.recalcOk', 'positive');
-    } catch (err) {
-        console.error(err);
-    } finally {
-        isLoading.value = false;
-    }
-};
-</script>
-
-<template>
-    <div class="q-pa-lg row justify-center">
-        <QCard class="bg-light" style="width: 300px">
-            <QCardSection>
-                <VnInputDate
-                    class="q-mb-lg"
-                    v-model="dateFrom"
-                    :label="$t('globals.from')"
-                    rounded
-                    dense
-                />
-                <VnInputDate
-                    class="q-mb-lg"
-                    v-model="dateTo"
-                    :options="optionsTo"
-                    :label="$t('globals.to')"
-                    :disable="!dateFrom"
-                    rounded
-                    dense
-                />
-                <QBtn
-                    color="primary"
-                    text-color="white"
-                    :label="$t('globals.recalc')"
-                    :loading="isLoading"
-                    :disable="isLoading || !(dateFrom && dateTo)"
-                    @click="recalc()"
-                />
-            </QCardSection>
-        </QCard>
-    </div>
-</template>

src/pages/Entry/MyEntries.vue

@@ -9,27 +9,22 @@ import VnTable from 'components/VnTable/VnTable.vue';
 
 const { t } = useI18n();
 const quasar = useQuasar();
-const params = {
-    daysOnward: 7,
-    daysAgo: 3,
-};
-
 const columns = computed(() => [
     {
         align: 'left',
         name: 'id',
-        label: t('myEntries.id'),
+        label: t('customer.extendedList.tableVisibleColumns.id'),
         columnFilter: false,
         isTitle: true,
     },
     {
         visible: false,
         align: 'right',
-        label: t('myEntries.shipped'),
+        label: t('shipped'),
         name: 'shipped',
         columnFilter: {
             name: 'fromShipped',
-            label: t('myEntries.fromShipped'),
+            label: t('fromShipped'),
             component: 'date',
         },
         format: ({ shipped }) => toDate(shipped),
@@ -37,11 +32,11 @@ const columns = computed(() => [
     {
         visible: false,
         align: 'left',
-        label: t('myEntries.shipped'),
+        label: t('shipped'),
         name: 'shipped',
         columnFilter: {
             name: 'toShipped',
-            label: t('myEntries.toShipped'),
+            label: t('toShipped'),
             component: 'date',
         },
         format: ({ shipped }) => toDate(shipped),
@@ -49,14 +44,14 @@ const columns = computed(() => [
     },
     {
         align: 'right',
-        label: t('myEntries.shipped'),
+        label: t('shipped'),
         name: 'shipped',
         columnFilter: false,
         format: ({ shipped }) => toDate(shipped),
     },
     {
         align: 'right',
-        label: t('myEntries.landed'),
+        label: t('landed'),
         name: 'landed',
         columnFilter: false,
         format: ({ landed }) => toDate(landed),
@@ -64,36 +59,26 @@ const columns = computed(() => [
 
     {
         align: 'right',
-        label: t('myEntries.wareHouseIn'),
+        label: t('globals.wareHouseIn'),
         name: 'warehouseInFk',
-        format: (row) => {
+        format: (row) => row.warehouseInName,
-            row.warehouseInName;
-        },
         cardVisible: true,
         columnFilter: {
-            name: 'warehouseInFk',
-            label: t('myEntries.warehouseInFk'),
             component: 'select',
             attrs: {
                 url: 'warehouses',
                 fields: ['id', 'name'],
                 optionLabel: 'name',
                 optionValue: 'id',
-                alias: 't',
             },
+            alias: 't',
             inWhere: true,
         },
     },
     {
         align: 'left',
-        label: t('myEntries.daysOnward'),
+        label: t('globals.daysOnward'),
-        name: 'daysOnward',
+        name: 'days',
-        visible: false,
-    },
-    {
-        align: 'left',
-        label: t('myEntries.daysAgo'),
-        name: 'daysAgo',
         visible: false,
     },
     {
@@ -103,7 +88,6 @@ const columns = computed(() => [
             {
                 title: t('printLabels'),
                 icon: 'print',
-                isPrimary: true,
                 action: (row) => printBuys(row.id),
             },
         ],
@@ -130,11 +114,9 @@ const printBuys = (rowId) => {
         data-key="myEntriesList"
         url="Entries/filter"
         :columns="columns"
-        :user-params="params"
         default-mode="card"
         order="shipped DESC"
         auto-load
-        chip-locale="myEntries"
     />
 </template>
 

src/pages/Entry/locale/en.yml

@@ -6,17 +6,9 @@ entryFilter:
     filter:
         search: General search
         reference: Reference
-myEntries:
+landed: Landed
-    id: ID
+shipped: Shipped
-    landed: Landed
+fromShipped: Shipped(from)
-    shipped: Shipped
+toShipped: Shipped(to)
-    fromShipped: Shipped(from)
+printLabels: Print stickers
-    toShipped: Shipped(to)
+viewLabel: View sticker
-    printLabels: Print stickers
-    viewLabel: View sticker
-    wareHouseIn: Warehouse in
-    warehouseInFk: Warehouse in
-    daysOnward: Days onward
-    daysAgo: Days ago
-wasteRecalc:
-    recalcOk: The wastes were successfully recalculated

src/pages/Entry/locale/es.yml

@@ -9,17 +9,10 @@ entryFilter:
     filter:
         search: Búsqueda general
         reference: Referencia
-myEntries:
+
-    id: ID
+landed: F. llegada
-    landed: F. llegada
+shipped: F. salida
-    shipped: F. salida
+fromShipped: F. salida(desde)
-    fromShipped: F. salida(desde)
+toShipped: F. salida(hasta)
-    toShipped: F. salida(hasta)
+printLabels: Imprimir etiquetas
-    printLabels: Imprimir etiquetas
+viewLabel: Ver etiqueta
-    viewLabel: Ver etiqueta
-    wareHouseIn: Alm. entrada
-    warehouseInFk: Alm. entrada
-    daysOnward: Días adelante
-    daysAgo: Días atras
-wasteRecalc:
-    recalcOk: Se han recalculado las mermas correctamente

src/pages/InvoiceIn/Card/InvoiceInSummary.vue

@@ -274,7 +274,10 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                     :label="t('invoiceIn.summary.company')"
                     :value="entity.company?.code"
                 />
-                <VnLv :label="t('invoiceIn.isBooked')" :value="invoiceIn?.isBooked" />
+                <VnLv
+                    :label="t('invoiceIn.summary.booked')"
+                    :value="invoiceIn?.isBooked"
+                />
             </QCard>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -116,7 +116,7 @@ const activities = ref([]);
             <QItem>
                 <QItemSection>
                     <QCheckbox
-                        :label="t('invoiceIn.isBooked')"
+                        :label="t('params.isBooked')"
                         v-model="params.isBooked"
                         @update:model-value="searchFn()"
                         toggle-indeterminate
@@ -170,7 +170,7 @@ es:
         awb: AWB
         amount: Importe
         issued: Emitida
-        isBooked: Contabilizada
+        isBooked: Conciliada
         account: Cuenta contable
         created: Creada
         dued: Vencida

src/pages/InvoiceIn/InvoiceInList.vue

@@ -65,7 +65,7 @@ const cols = computed(() => [
     {
         align: 'left',
         name: 'isBooked',
-        label: t('invoiceIn.isBooked'),
+        label: t('invoiceIn.list.isBooked'),
         columnFilter: false,
     },
     {

src/pages/InvoiceIn/locale/en.yml

@@ -1,6 +1,5 @@
 invoiceIn:
     serial: Serial
-    isBooked: Is booked
     list:
         ref: Reference
         supplier: Supplier
@@ -8,6 +7,7 @@ invoiceIn:
         serial: Serial
         file: File
         issued: Issued
+        isBooked: Is booked
         awb: AWB
         amount: Amount
     card:
@@ -31,6 +31,7 @@ invoiceIn:
         sage: Sage withholding
         vat: Undeductible VAT
         company: Company
+        booked: Booked
         expense: Expense
         taxableBase: Taxable base
         rate: Rate

src/pages/InvoiceIn/locale/es.yml

@@ -1,6 +1,5 @@
 invoiceIn:
     serial: Serie
-    isBooked: Contabilizada
     list:
         ref: Referencia
         supplier: Proveedor
@@ -8,6 +7,7 @@ invoiceIn:
         shortIssued: F. emisión
         file: Fichero
         issued: Fecha emisión
+        isBooked: Conciliada
         awb: AWB
         amount: Importe
     card:
@@ -31,6 +31,7 @@ invoiceIn:
         sage: Retención sage
         vat: Iva no deducible
         company: Empresa
+        booked: Contabilizada
         expense: Gasto
         taxableBase: Base imp.
         rate: Tasa

src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue

@@ -1,6 +1,5 @@
 <script setup>
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
-import InvoiceOutSummary from './InvoiceOutSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -11,10 +10,6 @@ const $props = defineProps({
 </script>
 <template>
     <QPopupProxy>
-        <InvoiceOutDescriptor
+        <InvoiceOutDescriptor v-if="$props.id" :id="$props.id" />
-            v-if="$props.id"
-            :id="$props.id"
-            :summary="InvoiceOutSummary"
-        />
     </QPopupProxy>
 </template>

src/pages/InvoiceOut/InvoiceOutList.vue

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

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -9,7 +9,6 @@ import { useArrayData } from 'src/composables/useArrayData';
 import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
 import TicketDescriptorProxy from '../Ticket/Card/TicketDescriptorProxy.vue';
 import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const tableRef = ref();
@@ -65,8 +64,7 @@ const columns = computed(() => [
         cardVisible: true,
         attrs: {
             url: 'Clients',
-            optionLabel: 'socialName',
+            fields: ['id', 'name'],
-            optionValue: 'socialName',
         },
         columnField: {
             component: null,
@@ -193,33 +191,10 @@ const downloadCSV = async () => {
                 <WorkerDescriptorProxy :id="row.comercialId" />
             </span>
         </template>
-        <template #moreFilterPanel="{ params }">
-            <VnInputDate
-                :label="t('params.from')"
-                v-model="params.from"
-                class="q-px-xs q-pr-lg"
-                filled
-                dense
-            />
-            <VnInputDate
-                :label="t('params.to')"
-                v-model="params.to"
-                class="q-px-xs q-pr-lg"
-                filled
-                dense
-            />
-        </template>
     </VnTable>
 </template>
 
 <i18n>
 es:
     Download as CSV: Descargar como CSV
-    params:
-        from: Desde
-        to: Hasta
-en:
-    params:
-        from: From
-        to: To
 </i18n>

src/pages/Item/Card/ItemDiary.vue

@@ -36,7 +36,14 @@ const itemBalances = ref([]);
 const warehouseFk = ref(null);
 const _showWhatsBeforeInventory = ref(false);
 const inventoriedDate = ref(null);
-
+const loading = ref(true);
+const pagination = ref({
+    rowsPerPage: 20,
+    sortBy: 'desc',
+    descending: false,
+    page: 1,
+});
+const filterWarehouses = "{ fields: ['id', 'name'], order: 'name ASC' }";
 const columns = computed(() => [
     {
         name: 'claim',
@@ -104,6 +111,11 @@ const showWhatsBeforeInventory = computed({
         else itemsBalanceFilter.where.date = inventoriedDate.value ?? new Date();
     },
 });
+async function handleOnFetch(data) {
+    itemBalances.value = data;
+    if (data.length < 1) return;
+    await scrollToToday();
+}
 
 const fetchItemBalances = async () => await itemBalancesRef.value.fetch();
 
@@ -120,15 +132,12 @@ const scrollToToday = async () => {
     await nextTick();
     const today = Date.vnNew();
     today.setHours(0, 0, 0, 0);
-    const todayCell = document.querySelector(`td[data-date="${today.toISOString()}"]`);
+    const todayIndex = itemBalances.value.findIndex((item) =>
-    if (todayCell) {
+        date.isSameDate(today.toISOString(), item.shipped)
-        todayCell.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    );
-    }
+    if (todayIndex > -1)
-};
+        pagination.value.page = Math.ceil(todayIndex / pagination.value.rowsPerPage);
-
+    loading.value = false;
-const formatDateForAttribute = (dateValue) => {
-    if (dateValue instanceof Date) return date.formatDate(dateValue, 'YYYY-MM-DD');
-    return dateValue;
 };
 
 const originTypeMap = {
@@ -166,7 +175,6 @@ onMounted(async () => {
     const { data } = await axios.get('Configs/findOne');
     inventoriedDate.value = data.inventoried;
     await fetchItemBalances();
-    await scrollToToday();
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -178,6 +186,9 @@ watch(
         itemBalancesRef.value.fetch();
     }
 );
+const pagesNumber = computed(() =>
+    Math.ceil(itemBalances.value.length / pagination.value.rowsPerPage)
+);
 </script>
 
 <template>
@@ -185,16 +196,17 @@ watch(
         ref="itemBalancesRef"
         url="Items/getBalance"
         :filter="itemsBalanceFilter"
-        @on-fetch="(data) => (itemBalances = data)"
+        @on-fetch="handleOnFetch"
     />
     <FetchData
         url="Warehouses"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        :filter="filterWarehouses"
         auto-load
         @on-fetch="(data) => (warehousesOptions = data)"
     />
-    <QToolbar class="justify-end">
+    <template v-if="stateStore.isHeaderMounted()">
-        <div id="st-data" class="row">
+        <Teleport to="#st-data">
+            <div class="row">
                 <VnSelect
                     :label="t('itemDiary.warehouse')"
                     :options="warehousesOptions"
@@ -220,15 +232,15 @@ watch(
                     @update:model-value="fetchItemBalances"
                 />
             </div>
-        <QSpace />
+        </Teleport>
-        <div id="st-actions"></div>
+    </template>
-    </QToolbar>
+    <QPage>
-    <QPage class="column items-center q-pa-md">
         <QTable
+            :loading="loading"
             :rows="itemBalances"
             :columns="columns"
-            class="full-width q-mt-md"
+            class="full-width"
-            :no-data-label="t('globals.noResults')"
+            v-model:pagination="pagination"
         >
             <template #body-cell-claim="{ row }">
                 <QTd @click.stop>
@@ -247,7 +259,7 @@ watch(
                 </QTd>
             </template>
             <template #body-cell-date="{ row }">
-                <QTd @click.stop :data-date="formatDateForAttribute(row.shipped)">
+                <QTd @click.stop>
                     <QBadge
                         v-bind="getBadgeAttrs(row.shipped)"
                         class="q-ma-none"
@@ -334,6 +346,15 @@ watch(
                 </QTd>
             </template>
         </QTable>
+        <QFooter elevated style="background-color: var(--vn-section-color)">
+            <QPagination
+                v-model="pagination.page"
+                :max="pagesNumber"
+                style="justify-content: center"
+                size="sm"
+                input
+            />
+        </QFooter>
     </QPage>
 </template>
 

src/pages/Item/ItemFixedPrice.vue

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

src/pages/Item/ItemRequest.vue

@@ -229,7 +229,7 @@ onBeforeMount(() => {
         >
             <template #body-cell-id="{ row }">
                 <QTd>
-                    <QBtn flat class="link"> {{ row.ticketFk }}</QBtn>
+                    <QBtn flat color="primary"> {{ row.ticketFk }}</QBtn>
                     <TicketDescriptorProxy :id="row.ticketFk" />
                 </QTd>
             </template>
@@ -251,35 +251,22 @@ onBeforeMount(() => {
             </template>
             <template #body-cell-requester="{ row }">
                 <QTd>
-                    <QBtn flat dense class="link"> {{ row.requesterName }}</QBtn>
+                    <QBtn flat dense color="primary"> {{ row.requesterName }}</QBtn>
                     <WorkerDescriptorProxy :id="row.requesterFk" />
                 </QTd>
             </template>
             <template #body-cell-attender="{ row }">
                 <QTd>
                     <VnSelect
-                        url="Workers/search"
                         v-model="row.attenderFk"
-                        :params="{ departmentCodes: ['shopping'] }"
+                        :where="{ role: 'buyer' }"
-                        :fields="['id', 'nickname']"
+                        sort-by="id"
-                        sort-by="nickname ASC"
+                        url="Workers"
                         hide-selected
-                        option-label="nickname"
+                        option-label="firstName"
                         option-value="id"
                         dense
-                    >
+                    />
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
-                                    <QItemLabel caption
-                                        >{{ scope.opt?.nickname }},
-                                        {{ scope.opt?.code }}</QItemLabel
-                                    >
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
                 </QTd>
             </template>
             <template #body-cell-item="{ row }">
@@ -305,7 +292,7 @@ onBeforeMount(() => {
             </template>
             <template #body-cell-concept="{ row }">
                 <QTd>
-                    <QBtn flat dense class="link"> {{ row.itemDescription }}</QBtn>
+                    <QBtn flat dense color="primary"> {{ row.itemDescription }}</QBtn>
                     <ItemDescriptorProxy :id="row.itemFk" />
                 </QTd>
             </template>

src/pages/Item/ItemRequestFilter.vue

@@ -174,16 +174,6 @@ const decrement = (paramsObj, key) => {
                     </VnSelect>
                 </QItemSection>
             </QItem>
-            <QItem>
-                <QItemSection>
-                    <QCheckbox
-                        v-model="params.myTeam"
-                        :label="t('params.myTeam')"
-                        @update:model-value="searchFn()"
-                        toggle-indeterminate
-                    />
-                </QItemSection>
-            </QItem>
             <QCard bordered>
                 <QItem>
                     <QItemSection>
@@ -284,11 +274,11 @@ en:
         to: To
         mine: For me
         state: State
-        myTeam: My team
     dateFiltersTooltip: Cannot choose a range of dates and days onward at the same time
     denied: Denied
     accepted: Accepted
     pending: Pending
+
 es:
     params:
         search: Búsqueda general
@@ -301,7 +291,6 @@ es:
         to: Hasta
         mine: Para mi
         state: Estado
-        myTeam: Mi equipo
     dateFiltersTooltip: No se puede seleccionar un rango de fechas y días en adelante a la vez
     denied: Denegada
     accepted: Aceptada

src/pages/Item/ItemTypeCreate.vue

@@ -52,27 +52,15 @@ const redirectToItemTypeBasicData = (_, { id }) => {
                 </VnRow>
                 <VnRow>
                     <VnSelect
-                        url="Workers/search"
                         v-model="data.workerFk"
-                        :label="t('shared.worker')"
+                        :label="t('itemType.shared.worker')"
-                        sort-by="nickname ASC"
+                        url="Workers"
-                        :fields="['id', 'nickname']"
+                        sort-by="firstName ASC"
-                        :params="{ departmentCodes: ['shopping'] }"
+                        :fields="['id', 'firstName']"
-                        option-label="nickname"
                         option-value="id"
+                        option-label="firstName"
                         hide-selected
-                        ><template #option="scope">
+                    />
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
-                                    <QItemLabel caption
-                                        >{{ scope.opt?.nickname }},
-                                        {{ scope.opt?.code }}</QItemLabel
-                                    >
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
                     <VnSelect
                         v-model="data.categoryFk"
                         :label="t('itemType.shared.category')"

src/pages/ItemType/Card/ItemTypeBasicData.vue

@@ -41,27 +41,15 @@ const temperaturesOptions = ref([]);
             </VnRow>
             <VnRow>
                 <VnSelect
-                    url="Workers/search"
                     v-model="data.workerFk"
                     :label="t('shared.worker')"
-                    sort-by="nickname ASC"
+                    url="Workers"
-                    :fields="['id', 'nickname']"
+                    sort-by="firstName ASC"
-                    :params="{ departmentCodes: ['shopping'] }"
+                    :fields="['id', 'firstName']"
-                    option-label="nickname"
                     option-value="id"
+                    option-label="firstName"
                     hide-selected
-                    ><template #option="scope">
+                />
-                        <QItem v-bind="scope.itemProps">
-                            <QItemSection>
-                                <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
-                                <QItemLabel caption
-                                    >{{ scope.opt?.nickname }},
-                                    {{ scope.opt?.code }}</QItemLabel
-                                >
-                            </QItemSection>
-                        </QItem>
-                    </template></VnSelect
-                >
                 <VnSelect
                     v-model="data.categoryFk"
                     :label="t('shared.category')"

src/pages/ItemType/Card/ItemTypeSummary.vue

@@ -6,7 +6,6 @@ import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.v
 
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import VnToSummary from 'src/components/ui/VnToSummary.vue';
 
 onUpdated(() => summaryRef.value.fetch());
 
@@ -56,11 +55,6 @@ async function setItemTypeData(data) {
             >
                 <QIcon name="open_in_new" color="white" size="sm" />
             </router-link>
-            <VnToSummary
-                v-if="route?.name !== 'ItemTypeSummary'"
-                :route-name="'ItemTypeSummary'"
-                :entity-id="entityId"
-            />
         </template>
         <template #header>
             <span>

src/pages/Monitor/MonitorOrders.vue

@@ -139,7 +139,6 @@ const openTab = (id) =>
         :disable-option="{ card: true }"
     >
         <template #top-left>
-            <div class="q-mt-sm">
             <QBtn
                 icon="refresh"
                 size="md"
@@ -159,7 +158,7 @@ const openTab = (id) =>
                 color="primary"
                 @click="
                     openConfirmationModal(
-                            $t('globals.deleteConfirmTitle'),
+                        $t('salesOrdersTable.deleteConfirmTitle'),
                         $t('salesOrdersTable.deleteConfirmMessage'),
                         removeOrders
                     )
@@ -167,7 +166,6 @@ const openTab = (id) =>
             >
                 <QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
             </QBtn>
-            </div>
         </template>
         <template #column-dateSend="{ row }">
             <QTd>

src/pages/Monitor/locale/en.yml

@@ -15,6 +15,7 @@ salesOrdersTable:
     dateMake: Make date
     client: Client
     salesPerson: Salesperson
+    deleteConfirmTitle: Delete selected elements
     deleteConfirmMessage: All the selected elements will be deleted. Are you sure you want to continue?
     agency: Agency
     import: Import

src/pages/Monitor/locale/es.yml

@@ -15,6 +15,7 @@ salesOrdersTable:
     dateMake: Fecha de realización
     client: Cliente
     salesPerson: Comercial
+    deleteConfirmTitle: Eliminar los elementos seleccionados
     deleteConfirmMessage: Todos los elementos seleccionados serán eliminados. ¿Seguro que quieres continuar?
     agency: Agencia
     import: Importe

src/pages/Order/Card/OrderLines.vue

@@ -249,7 +249,7 @@ watch(
         @on-fetch="(data) => (orderSummary.vat = data)"
         auto-load
     />
-    <QDrawer side="right" :width="265" v-model="stateStore.rightDrawer">
+    <QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
         <QCard
             class="order-lines-summary q-pa-lg"
             v-if="orderSummary.vat && orderSummary.total"

src/pages/Order/OrderList.vue

@@ -14,15 +14,14 @@ import OrderFilter from './Card/OrderFilter.vue';
 import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
 import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';
 import { toDateTimeFormat } from 'src/filters/date';
-import { onMounted } from 'vue';
-import { useRoute } from 'vue-router';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const tableRef = ref();
 const agencyList = ref([]);
 const addressesList = ref([]);
-const route = useRoute();
+const clientId = ref();
+
 const columns = computed(() => [
     {
         align: 'left',
@@ -170,13 +169,6 @@ const getDateColor = (date) => {
     if (comparation == 0) return 'bg-warning';
     if (comparation < 0) return 'bg-success';
 };
-
-onMounted(() => {
-    if (!route.query.createForm) return;
-    const clientId = route.query.createForm;
-    const id = JSON.parse(clientId);
-    fetchClientAddress(id.clientFk, id);
-});
 </script>
 <template>
     <OrderSearchbar />
@@ -192,14 +184,13 @@ onMounted(() => {
         :order="['landed DESC', 'clientFk ASC', 'id DESC']"
         :create="{
             urlCreate: 'Orders/new',
-            title: t('module.cerateOrder'),
+            title: 'Create Order',
             onDataSaved: (url) => {
                 tableRef.redirect(url);
             },
             formInitialData: {
                 active: true,
                 addressId: null,
-                clientFk: null,
             },
         }"
         :user-params="{ showEmpty: false }"
@@ -230,7 +221,7 @@ onMounted(() => {
             <VnSelect
                 url="Clients"
                 :include="{ relation: 'addresses' }"
-                v-model="data.clientFk"
+                v-model="clientId"
                 :label="t('module.customer')"
                 @update:model-value="(id) => fetchClientAddress(id, data)"
             />

src/pages/Order/locale/en.yml

@@ -10,7 +10,6 @@ module:
     total: Total
     salesPerson: Sales Person
     address: Address
-    cerateOrder: Create order
 lines:
     item: Item
     warehouse: Warehouse

src/pages/Order/locale/es.yml

@@ -10,7 +10,6 @@ module:
     total: Total
     salesPerson: Comercial
     address: Dirección
-    cerateOrder: Crear cesta
 lines:
     item: Artículo
     warehouse: Almacén

src/pages/Route/Agency/AgencyList.vue

@@ -27,15 +27,12 @@ const columns = computed(() => [
             condition: () => true,
         },
         isId: true,
-        columnFilter: false,
     },
     {
         align: 'left',
         label: t('globals.name'),
         name: 'name',
         isTitle: true,
-        columnFilter: false,
-        columnClass: 'expand',
     },
     {
         align: 'left',
@@ -73,9 +70,8 @@ const columns = computed(() => [
         data-key="AgencyList"
         :expr-builder="exprBuilder"
     />
-    <div class="list-container">
-        <div class="list">
     <VnTable
+        ref="tableRef"
         data-key="AgencyList"
         url="Agencies"
         order="name"
@@ -85,21 +81,7 @@ const columns = computed(() => [
         redirect="agency"
         default-mode="card"
     />
-        </div>
-    </div>
 </template>
-<style lang="scss" scoped>
-.list {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 55%;
-}
-.list-container {
-    display: flex;
-    justify-content: center;
-}
-</style>
 <i18n>
     es:
         isOwn: Tiene propietario

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

@@ -46,13 +46,13 @@ async function deleteWorCenter(id) {
 }
 </script>
 <template>
+    <div class="centerCard">
         <FetchData
             url="workCenters"
             sort-by="name"
             @on-fetch="(data) => (warehouses = data)"
             auto-load
         />
-    <div class="centerCard">
         <VnPaginate
             ref="paginate"
             data-key="AgencyWorkCenters"

src/pages/Route/Card/RouteListTicketsDialog.vue

@@ -167,8 +167,8 @@ const setTicketsRoute = async () => {
                         <QTd :props="props">
                             <span class="link">
                                 {{ props.value }}
-                            </span>
                                 <TicketDescriptorProxy :id="props?.row?.id" />
+                            </span>
                         </QTd>
                     </template>
                     <template #body-cell-client="props">

src/pages/Route/RouteExtendedList.vue

@@ -1,360 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { useQuasar } from 'quasar';
-import { toDate } from 'src/filters';
-import { useRouter } from 'vue-router';
-import { usePrintService } from 'src/composables/usePrintService';
-
-import axios from 'axios';
-import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
-import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
-import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
-import RightMenu from 'src/components/common/RightMenu.vue';
-import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
-import VnTable from 'components/VnTable/VnTable.vue';
-
-const { openReport } = usePrintService();
-const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
-const quasar = useQuasar();
-const selectedRows = ref([]);
-const tableRef = ref([]);
-const confirmationDialog = ref(false);
-const startingDate = ref(null);
-const router = useRouter();
-const routeFilter = {
-    include: [
-        {
-            relation: 'workers',
-            scope: {
-                fields: ['id', 'firstName'],
-            },
-        },
-    ],
-};
-const columns = computed(() => [
-    {
-        align: 'left',
-        name: 'id',
-        label: 'Id',
-        chip: {
-            condition: () => true,
-        },
-        isId: true,
-        columnFilter: false,
-    },
-    {
-        align: 'left',
-        name: 'workerFk',
-        label: t('route.Worker'),
-        create: true,
-        component: 'select',
-        attrs: {
-            url: 'Workers/activeWithInheritedRole',
-            fields: ['id', 'name'],
-            useLike: false,
-            optionFilter: 'firstName',
-            find: {
-                value: 'workerFk',
-                label: 'workerUserName',
-            },
-        },
-        columnFilter: {
-            inWhere: true,
-        },
-        useLike: false,
-        cardVisible: true,
-        format: (row, dashIfEmpty) => dashIfEmpty(row.travelRef),
-    },
-    {
-        align: 'left',
-        name: 'agencyModeFk',
-        label: t('route.Agency'),
-        isTitle: true,
-        cardVisible: true,
-        create: true,
-        component: 'select',
-        attrs: {
-            url: 'agencyModes',
-            fields: ['id', 'name'],
-            find: {
-                value: 'agencyModeFk',
-                label: 'agencyName',
-            },
-        },
-        columnClass: 'expand',
-    },
-    {
-        align: 'left',
-        name: 'vehicleFk',
-        label: t('route.Vehicle'),
-        cardVisible: true,
-        create: true,
-        component: 'select',
-        attrs: {
-            url: 'vehicles',
-            fields: ['id', 'numberPlate'],
-            optionLabel: 'numberPlate',
-            optionFilterValue: 'numberPlate',
-            find: {
-                value: 'vehicleFk',
-                label: 'vehiclePlateNumber',
-            },
-        },
-        columnFilter: {
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        name: 'created',
-        label: t('route.Date'),
-        columnFilter: false,
-        cardVisible: true,
-        create: true,
-        component: 'date',
-        format: ({ date }) => toDate(date),
-    },
-    {
-        align: 'left',
-        name: 'from',
-        label: t('route.From'),
-        visible: false,
-        cardVisible: true,
-        create: true,
-        component: 'date',
-        format: ({ date }) => toDate(date),
-    },
-    {
-        align: 'left',
-        name: 'to',
-        label: t('route.To'),
-        visible: false,
-        cardVisible: true,
-        create: true,
-        component: 'date',
-        format: ({ date }) => toDate(date),
-    },
-    {
-        align: 'center',
-        name: 'm3',
-        label: 'm3',
-        cardVisible: true,
-        columnClass: 'shrink',
-    },
-    {
-        align: 'left',
-        name: 'started',
-        label: t('route.hourStarted'),
-        component: 'time',
-        columnFilter: false,
-    },
-    {
-        align: 'left',
-        name: 'finished',
-        label: t('route.hourFinished'),
-        component: 'time',
-        columnFilter: false,
-    },
-    {
-        align: 'center',
-        name: 'kmStart',
-        label: t('route.KmStart'),
-        columnClass: 'shrink',
-        create: true,
-        visible: false,
-    },
-    {
-        align: 'center',
-        name: 'kmEnd',
-        label: t('route.KmEnd'),
-        columnClass: 'shrink',
-        create: true,
-        visible: false,
-    },
-    {
-        align: 'left',
-        name: 'description',
-        label: t('route.Description'),
-        isTitle: true,
-        create: true,
-        component: 'input',
-        field: 'description',
-    },
-    {
-        align: 'left',
-        name: 'isOk',
-        label: t('route.Served'),
-        component: 'checkbox',
-        columnFilter: false,
-        columnClass: 'shrink',
-    },
-    {
-        align: 'right',
-        name: 'tableActions',
-        actions: [
-            {
-                title: t('route.Add tickets'),
-                icon: 'vn:ticketAdd',
-                action: (row) => openTicketsDialog(row?.id),
-                isPrimary: true,
-            },
-            {
-                title: t('route.components.smartCard.viewSummary'),
-                icon: 'preview',
-                action: (row) => viewSummary(row?.id, RouteSummary),
-                isPrimary: true,
-            },
-            {
-                title: t('route.Route summary'),
-                icon: 'arrow_forward',
-                action: (row) => navigate(row?.id),
-                isPrimary: true,
-            },
-        ],
-    },
-]);
-
-function navigate(id) {
-    router.push({ path: `/route/${id}` });
-}
-
-const cloneRoutes = () => {
-    if (!selectedRows.value.length || !startingDate.value) return;
-    axios.post('Routes/clone', {
-        created: startingDate.value,
-        ids: selectedRows.value.map((row) => row?.id),
-    });
-    startingDate.value = null;
-    tableRef.value.reload();
-};
-
-const showRouteReport = () => {
-    const ids = selectedRows.value.map((row) => row?.id);
-    const idString = ids.join(',');
-    let url = `Routes/${idString}/driver-route-pdf`;
-    let params = {};
-    if (selectedRows.value.length >= 1) {
-        params = {
-            id: idString,
-        };
-        url = `Routes/downloadZip`;
-    }
-    openReport(url, params, '_blank');
-};
-
-function markAsServed() {
-    selectedRows.value.forEach(async (row) => {
-        await axios.patch(`Routes/${row?.id}`, { isOk: true });
-    });
-    tableRef.value.reload();
-    startingDate.value = null;
-}
-
-const openTicketsDialog = (id) => {
-    quasar
-        .dialog({
-            component: RouteListTicketsDialog,
-            componentProps: {
-                id,
-            },
-        })
-        .onOk(() => tableRef.value.reload());
-};
-</script>
-
-<template>
-    <RouteSearchbar />
-    <QDialog v-model="confirmationDialog">
-        <QCard style="min-width: 350px">
-            <QCardSection>
-                <p class="text-h6 q-ma-none">{{ t('route.Select the starting date') }}</p>
-            </QCardSection>
-
-            <QCardSection class="q-pt-none">
-                <VnInputDate
-                    :label="t('route.Stating date')"
-                    v-model="startingDate"
-                    autofocus
-                />
-            </QCardSection>
-            <QCardActions align="right">
-                <QBtn
-                    flat
-                    :label="t('route.Cancel')"
-                    v-close-popup
-                    class="text-primary"
-                />
-                <QBtn color="primary" v-close-popup @click="cloneRoutes">
-                    {{ t('globals.clone') }}
-                </QBtn>
-            </QCardActions>
-        </QCard>
-    </QDialog>
-    <VnSubToolbar />
-    <RightMenu>
-        <template #right-panel>
-            <RouteFilter data-key="RouteList" />
-        </template>
-    </RightMenu>
-    <VnTable
-        class="route-list"
-        ref="tableRef"
-        data-key="RouteList"
-        url="Routes/filter"
-        :columns="columns"
-        :right-search="false"
-        :is-editable="true"
-        :filter="routeFilter"
-        redirect="route"
-        :row-click="false"
-        :create="{
-            urlCreate: 'Routes',
-            title: t('route.createRoute'),
-            onDataSaved: ({ id }) => tableRef.redirect(id),
-            formInitialData: {},
-        }"
-        save-url="Routes/crud"
-        :disable-option="{ card: true }"
-        table-height="85vh"
-        v-model:selected="selectedRows"
-        :table="{
-            'row-key': 'id',
-            selection: 'multiple',
-        }"
-    >
-        <template #moreBeforeActions>
-            <QBtn
-                icon="vn:clone"
-                color="primary"
-                class="q-mr-sm"
-                :disable="!selectedRows?.length"
-                @click="confirmationDialog = true"
-            >
-                <QTooltip>{{ t('route.Clone Selected Routes') }}</QTooltip>
-            </QBtn>
-            <QBtn
-                icon="cloud_download"
-                color="primary"
-                class="q-mr-sm"
-                :disable="!selectedRows?.length"
-                @click="showRouteReport"
-            >
-                <QTooltip>{{ t('route.Download selected routes as PDF') }}</QTooltip>
-            </QBtn>
-            <QBtn
-                icon="check"
-                color="primary"
-                class="q-mr-sm"
-                :disable="!selectedRows?.length"
-                @click="markAsServed()"
-            >
-                <QTooltip>{{ t('route.Mark as served') }}</QTooltip>
-            </QBtn>
-        </template>
-    </VnTable>
-</template>

src/pages/Route/RouteList.vue

@@ -1,19 +1,34 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useSession } from 'composables/useSession';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { toHour } from 'src/filters';
+import { useQuasar } from 'quasar';
+import { toDate } from 'src/filters';
+import { useRouter } from 'vue-router';
 
+import axios from 'axios';
 import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
+import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
 import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
-import VnTable from 'components/VnTable/VnTable.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
+import { usePrintService } from 'src/composables/usePrintService';
+
+const { openReport } = usePrintService();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
+const quasar = useQuasar();
+const session = useSession();
+const selectedRows = ref([]);
 const tableRef = ref([]);
+const confirmationDialog = ref(false);
+const startingDate = ref(null);
+const router = useRouter();
 const routeFilter = {
     include: [
         {
@@ -27,70 +42,156 @@ const routeFilter = {
 const columns = computed(() => [
     {
         align: 'left',
-        isId: true,
         name: 'id',
         label: 'Id',
         chip: {
             condition: () => true,
         },
+        isId: true,
         columnFilter: false,
     },
     {
         align: 'left',
         name: 'workerFk',
-        label: t('route.Worker'),
+        label: t('Worker'),
         create: true,
+        component: 'select',
+        attrs: {
+            url: 'Workers/activeWithInheritedRole',
+            fields: ['id', 'name'],
+            useLike: false,
+            optionFilter: 'firstName',
+            find: {
+                value: 'workerFk',
+                label: 'workerUserName',
+            },
+        },
+        columnFilter: {
+            inWhere: true,
+        },
+        useLike: false,
         cardVisible: true,
         format: (row, dashIfEmpty) => dashIfEmpty(row.travelRef),
-        columnFilter: false,
     },
     {
         align: 'left',
-        name: 'agencyName',
+        name: 'agencyModeFk',
-        label: t('route.Agency'),
+        label: t('Agency'),
+        isTitle: true,
         cardVisible: true,
         create: true,
+        component: 'select',
+        attrs: {
+            url: 'agencyModes',
+            fields: ['id', 'name'],
+            find: {
+                value: 'agencyModeFk',
+                label: 'agencyName',
+            },
+        },
         columnClass: 'expand',
-        columnFilter: false,
     },
     {
         align: 'left',
-        name: 'vehiclePlateNumber',
+        name: 'vehicleFk',
-        label: t('route.Vehicle'),
+        label: t('Vehicle'),
         cardVisible: true,
         create: true,
+        component: 'select',
+        attrs: {
+            url: 'vehicles',
+            fields: ['id', 'numberPlate'],
+            optionLabel: 'numberPlate',
+            optionFilterValue: 'numberPlate',
+            find: {
+                value: 'vehicleFk',
+                label: 'vehiclePlateNumber',
+            },
+        },
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        name: 'created',
+        label: t('Date'),
         columnFilter: false,
+        cardVisible: true,
+        create: true,
+        component: 'date',
+        format: ({ date }) => toDate(date),
+    },
+    {
+        align: 'left',
+        name: 'from',
+        label: t('From'),
+        visible: false,
+        cardVisible: true,
+        create: true,
+        component: 'date',
+        format: ({ date }) => toDate(date),
+    },
+    {
+        align: 'left',
+        name: 'to',
+        label: t('To'),
+        visible: false,
+        cardVisible: true,
+        create: true,
+        component: 'date',
+        format: ({ date }) => toDate(date),
+    },
+    {
+        align: 'center',
+        name: 'm3',
+        label: t('Volume'),
+        cardVisible: true,
+        columnClass: 'shrink',
     },
     {
         align: 'left',
         name: 'started',
-        label: t('route.hourStarted'),
+        label: t('hourStarted'),
-        cardVisible: true,
+        component: 'time',
         columnFilter: false,
-        format: (row) => toHour(row.started),
     },
     {
         align: 'left',
         name: 'finished',
-        label: t('route.hourFinished'),
+        label: t('hourFinished'),
-        cardVisible: true,
+        component: 'time',
         columnFilter: false,
-        format: (row) => toHour(row.started),
+    },
+    {
+        align: 'center',
+        name: 'kmStart',
+        label: t('KmStart'),
+        columnClass: 'shrink',
+        create: true,
+        visible: false,
+    },
+    {
+        align: 'center',
+        name: 'kmEnd',
+        label: t('KmEnd'),
+        columnClass: 'shrink',
+        create: true,
+        visible: false,
     },
     {
         align: 'left',
         name: 'description',
-        label: t('route.Description'),
+        label: t('Description'),
-        cardVisible: true,
         isTitle: true,
         create: true,
+        component: 'input',
         field: 'description',
-        columnFilter: false,
     },
     {
         align: 'left',
         name: 'isOk',
-        label: t('route.Served'),
+        label: t('Served'),
         component: 'checkbox',
         columnFilter: false,
         columnClass: 'shrink',
@@ -99,43 +200,212 @@ const columns = computed(() => [
         align: 'right',
         name: 'tableActions',
         actions: [
+            {
+                title: t('Add tickets'),
+                icon: 'vn:ticketAdd',
+                action: (row) => openTicketsDialog(row?.id),
+            },
             {
                 title: t('components.smartCard.viewSummary'),
                 icon: 'preview',
                 action: (row) => viewSummary(row?.id, RouteSummary),
+            },
+            {
+                title: t('Route summary'),
+                icon: 'arrow_forward',
                 isPrimary: true,
+                action: (row) => navigate(row?.id),
             },
         ],
     },
 ]);
+
+function navigate(id) {
+    router.push({ path: `/route/${id}` });
+}
+
+const cloneRoutes = () => {
+    if (!selectedRows.value.length || !startingDate.value) return;
+    axios.post('Routes/clone', {
+        created: startingDate.value,
+        ids: selectedRows.value.map((row) => row?.id),
+    });
+    startingDate.value = null;
+    tableRef.value.reload();
+};
+
+const showRouteReport = () => {
+    const ids = selectedRows.value.map((row) => row?.id);
+    const idString = ids.join(',');
+    let url = `Routes/${idString}/driver-route-pdf`;
+    let params = {};
+    if (selectedRows.value.length >= 1) {
+        params = {
+            id: idString,
+        };
+        url = `Routes/downloadZip`;
+    }
+    openReport(url, params, '_blank');
+};
+
+function markAsServed() {
+    selectedRows.value.forEach(async (row) => {
+        await axios.patch(`Routes/${row?.id}`, { isOk: true });
+    });
+    tableRef.value.reload();
+    startingDate.value = null;
+}
+
+const openTicketsDialog = (id) => {
+    quasar
+        .dialog({
+            component: RouteListTicketsDialog,
+            componentProps: {
+                id,
+            },
+        })
+        .onOk(() => tableRef.value.reload());
+};
 </script>
+
 <template>
     <RouteSearchbar />
+    <QDialog v-model="confirmationDialog">
+        <QCard style="min-width: 350px">
+            <QCardSection>
+                <p class="text-h6 q-ma-none">{{ t('Select the starting date') }}</p>
+            </QCardSection>
+
+            <QCardSection class="q-pt-none">
+                <VnInputDate
+                    :label="t('Stating date')"
+                    v-model="startingDate"
+                    autofocus
+                />
+            </QCardSection>
+            <QCardActions align="right">
+                <QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
+                <QBtn color="primary" v-close-popup @click="cloneRoutes">
+                    {{ t('globals.clone') }}
+                </QBtn>
+            </QCardActions>
+        </QCard>
+    </QDialog>
+    <VnSubToolbar />
     <RightMenu>
         <template #right-panel>
             <RouteFilter data-key="RouteList" />
         </template>
     </RightMenu>
     <VnTable
+        class="route-list"
+        ref="tableRef"
         data-key="RouteList"
         url="Routes/filter"
         :columns="columns"
         :right-search="false"
+        :is-editable="true"
         :filter="routeFilter"
         redirect="route"
+        :row-click="false"
         :create="{
             urlCreate: 'Routes',
-            title: t('route.createRoute'),
+            title: t('Create route'),
             onDataSaved: ({ id }) => tableRef.redirect(id),
             formInitialData: {},
         }"
+        save-url="Routes/crud"
+        :disable-option="{ card: true }"
         table-height="85vh"
+        v-model:selected="selectedRows"
+        :table="{
+            'row-key': 'id',
+            selection: 'multiple',
+        }"
     >
-        <template #column-workerFk="{ row }">
+        <template #moreBeforeActions>
-            <span class="link" @click.stop>
+            <QBtn
-                {{ row?.workerUserName }}
+                icon="vn:clone"
-                <WorkerDescriptorProxy :id="row?.workerFk" v-if="row?.workerFk" />
+                color="primary"
-            </span>
+                class="q-mr-sm"
+                :disable="!selectedRows?.length"
+                @click="confirmationDialog = true"
+            >
+                <QTooltip>{{ t('Clone Selected Routes') }}</QTooltip>
+            </QBtn>
+            <QBtn
+                icon="cloud_download"
+                color="primary"
+                class="q-mr-sm"
+                :disable="!selectedRows?.length"
+                @click="showRouteReport"
+            >
+                <QTooltip>{{ t('Download selected routes as PDF') }}</QTooltip>
+            </QBtn>
+            <QBtn
+                icon="check"
+                color="primary"
+                class="q-mr-sm"
+                :disable="!selectedRows?.length"
+                @click="markAsServed()"
+            >
+                <QTooltip>{{ t('Mark as served') }}</QTooltip>
+            </QBtn>
         </template>
     </VnTable>
 </template>
+
+<style lang="scss" scoped>
+.table-input-cell {
+    max-width: 143px;
+}
+
+.route-list {
+    width: 100%;
+    max-height: 100%;
+}
+
+.table-actions {
+    gap: 12px;
+}
+th:last-child,
+td:last-child {
+    background-color: var(--vn-section-color);
+    position: sticky;
+    right: 0;
+}
+</style>
+<i18n>
+en:
+    newRoute: New Route
+    hourStarted: Started hour
+    hourFinished: Finished hour
+es:
+    From: Desde
+    To: Hasta
+    Worker: Trabajador
+    Agency: Agencia
+    Vehicle: Vehículo
+    Volume: Volumen
+    Date: Fecha
+    Description: Descripción
+    Hour started: Hora inicio
+    Hour finished: Hora fin
+    KmStart: Km inicio
+    KmEnd: Km fin
+    Served: Servida
+    newRoute: Nueva Ruta
+    Clone Selected Routes: Clonar rutas seleccionadas
+    Select the starting date: Seleccione la fecha de inicio
+    Stating date: Fecha de inicio
+    Cancel: Cancelar
+    Mark as served: Marcar como servidas
+    Download selected routes as PDF: Descargar rutas seleccionadas como PDF
+    Add ticket: Añadir tickets
+    Preview: Vista previa
+    Summary: Resumen
+    Route is closed: La ruta está cerrada
+    Route is not served: La ruta no está servida
+    hourStarted: Hora de inicio
+    hourFinished: Hora de fin
+</i18n>

src/pages/Route/RouteRoadmap.vue

@@ -87,7 +87,7 @@ const columns = computed(() => [
         actions: [
             {
                 title: t('Ver cmr'),
-                icon: 'preview',
+                icon: 'visibility',
                 isPrimary: true,
                 action: (row) => viewSummary(row?.id, RoadmapSummary),
             },

src/pages/Route/RouteTickets.vue

@@ -342,7 +342,10 @@ const openSmsDialog = async () => {
                             </template>
                             <template #body-cell-city="{ value, row }">
                                 <QTd auto-width>
-                                    <span class="link" @click="goToBuscaman(row)">
+                                    <span
+                                        class="text-primary cursor-pointer"
+                                        @click="goToBuscaman(row)"
+                                    >
                                         {{ value }}
                                         <QTooltip>{{ t('Open buscaman') }}</QTooltip>
                                     </span>
@@ -350,7 +353,7 @@ const openSmsDialog = async () => {
                             </template>
                             <template #body-cell-client="{ value, row }">
                                 <QTd auto-width>
-                                    <span class="link">
+                                    <span class="text-primary cursor-pointer">
                                         {{ value }}
                                         <CustomerDescriptorProxy :id="row?.clientFk" />
                                     </span>
@@ -358,7 +361,7 @@ const openSmsDialog = async () => {
                             </template>
                             <template #body-cell-ticket="{ value, row }">
                                 <QTd auto-width class="text-center">
-                                    <span class="link">
+                                    <span class="text-primary cursor-pointer">
                                         {{ value }}
                                         <TicketDescriptorProxy :id="row?.id" />
                                     </span>

src/pages/Route/locale/en.yml

@@ -1,39 +0,0 @@
-route:
-    Worker: Worker
-    Agency: Agency
-    Vehicle: Vehicle
-    Description: Description
-    hourStarted: H.Start
-    hourFinished: H.End
-    createRoute: Create route
-    From: From
-    To: To
-    Date: Date
-    KmStart: Km start
-    KmEnd: Km end
-    Served: Served
-    Clone Selected Routes: Clone selected routes
-    Select the starting date: Select the starting date
-    Stating date: Starting date
-    Cancel: Cancel
-    Mark as served: Mark as served
-    Download selected routes as PDF: Download selected routes as PDF
-    Add ticket: Add ticket
-    Preview: Preview
-    Summary: Summary
-    Route is closed: Route is closed
-    Route is not served: Route is not served
-    cmr:
-        list:
-            results: results
-            cmrFk: CMR id
-            hasCmrDms: Attached in gestdoc
-            'true': 'Yes'
-            'false': 'No'
-            ticketFk: Ticketd id
-            routeFk: Route id
-            country: Country
-            clientFk: Client id
-            shipped: Preparation date
-            viewCmr: View CMR
-            downloadCmrs: Download CMRs

src/pages/Route/locale/es.yml

@@ -1,39 +0,0 @@
-route:
-    Worker: Trabajador
-    Agency: Agencia
-    Vehicle: Vehículo
-    Description: Descripción
-    hourStarted: H.Inicio
-    hourFinished: H.Fin
-    createRoute: Crear ruta
-    From: Desde
-    To: Hasta
-    Date: Fecha
-    KmStart: Km inicio
-    KmEnd: Km fin
-    Served: Servida
-    Clone Selected Routes: Clonar rutas seleccionadas
-    Select the starting date: Seleccione la fecha de inicio
-    Stating date: Fecha de inicio
-    Cancel: Cancelar
-    Mark as served: Marcar como servidas
-    Download selected routes as PDF: Descargar rutas seleccionadas como PDF
-    Add ticket: Añadir tickets
-    Preview: Vista previa
-    Summary: Resumen
-    Route is closed: La ruta está cerrada
-    Route is not served: La ruta no está servida
-    cmr:
-        list:
-            results: resultados
-            cmrFk: Id CMR
-            hasCmrDms: Gestdoc
-            'true': Sí
-            'false': 'No'
-            ticketFk: Id ticket
-            routeFk: Id ruta
-            country: País
-            clientFk: Id cliente
-            shipped: Fecha preparación
-            viewCmr: Ver CMR
-            downloadCmrs: Descargar CMRs

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

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 import FetchData from 'components/FetchData.vue';
 
 import { useStateStore } from 'stores/useStateStore';
@@ -114,7 +115,7 @@ const totalNewPrice = computed(() => {
 const totalDifference = computed(() => {
     return rows.value.reduce((acc, item) => acc + item.component?.difference || 0, 0);
 });
-const showMovableColumn = computed(() => (haveDifferences.value > 0 ? ['movable'] : []));
+const showMovablecolumn = computed(() => (haveDifferences.value > 0 ? ['movable'] : []));
 const haveDifferences = computed(() => _ticketData.value.sale?.haveDifferences);
 const ticketHaveNegatives = () => {
     let _haveNegatives = false;
@@ -144,7 +145,8 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         @on-fetch="(data) => (ticketUpdateActions = data)"
         auto-load
     />
-    <QDrawer side="right" :width="265" v-model="stateStore.rightDrawer">
+    <RightMenu>
+        <template #right-panel>
             <QCard
                 class="q-pa-md q-mb-md q-ma-md color-vn-text"
                 bordered
@@ -156,18 +158,18 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         {{ t('basicData.total') }}
                     </span>
                 </QCardSection>
-            <QCardSection class="column items-left" horizontal>
+                <QCardSection class="column items-center" horizontal>
                     <span>
                         {{ t('basicData.price') }}:
                         {{ toCurrency(totalPrice) }}
                     </span>
                 </QCardSection>
-            <QCardSection class="column items-left" horizontal>
+                <QCardSection class="column items-center" horizontal>
                     <span>
                         {{ t('basicData.newPrice') }}: {{ toCurrency(totalNewPrice) }}
                     </span>
                 </QCardSection>
-            <QCardSection class="column items-left" horizontal>
+                <QCardSection class="column items-center" horizontal>
                     <span>
                         {{ t('basicData.difference') }}: {{ toCurrency(totalDifference) }}
                     </span>
@@ -218,9 +220,10 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     </QIcon>
                 </QCardSection>
             </QCard>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QTable
-        :visible-columns="showMovableColumn"
+        :visible-columns="showMovablecolumn"
         :rows="rows"
         :columns="columns"
         row-key="id"
@@ -230,15 +233,15 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         flat
     >
         <template #body-cell-item="{ row }">
-            <QTd @click.stop class="link">
+            <QTd>
-                <QBtn flat>
+                <QBtn flat color="primary">
                     {{ row.itemFk }}
                     <ItemDescriptorProxy :id="row.itemFk" />
                 </QBtn>
             </QTd>
         </template>
         <template #body-cell-description="{ row }">
-            <QTd style="display: contents">
+            <QTd>
                 <div class="column">
                     <span>{{ row.item.name }}</span>
                     <span class="color-vn-label">{{ row.item.subName }}</span>

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

@@ -12,8 +12,6 @@ import VnInputTime from 'components/common/VnInputTime.vue';
 
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
-import { useAcl } from 'src/composables/useAcl';
-import { useValidator } from 'src/composables/useValidator';
 import { toTimeFormat } from 'filters/date.js';
 
 const $props = defineProps({
@@ -25,21 +23,18 @@ const $props = defineProps({
 });
 
 const emit = defineEmits(['updateForm']);
-const { validate } = useValidator();
+
 const { notify } = useNotify();
 const router = useRouter();
 const { t } = useI18n();
-const canEditZone = useAcl().hasAny([
+const agencyFetchRef = ref(null);
-    { model: 'Ticket', props: 'editZone', accessType: 'WRITE' },
+const zonesFetchRef = ref(null);
-]);
 
-const agencyFetchRef = ref();
 const warehousesOptions = ref([]);
 const companiesOptions = ref([]);
 const agenciesOptions = ref([]);
 const zonesOptions = ref([]);
 const addresses = ref([]);
-const zoneSelectRef = ref();
 const formData = ref($props.formData);
 
 watch(
@@ -48,8 +43,6 @@ watch(
     { deep: true }
 );
 
-onMounted(() => onFormModelInit());
-
 const agencyByWarehouseFilter = computed(() => ({
     fields: ['id', 'name'],
     order: 'name ASC',
@@ -58,16 +51,18 @@ const agencyByWarehouseFilter = computed(() => ({
     },
 }));
 
-const zoneWhere = computed(() => {
+const zonesFilter = computed(() => ({
-    return formData.value?.agencyModeFk
+    fields: ['id', 'name'],
+    order: 'name ASC',
+    where: formData.value?.agencyModeFk
         ? {
               shipped: formData.value?.shipped,
               addressFk: formData.value?.addressFk,
               agencyModeFk: formData.value?.agencyModeFk,
               warehouseFk: formData.value?.warehouseFk,
           }
-        : {};
+        : {},
-});
+}));
 
 const getLanded = async (params) => {
     try {
@@ -112,20 +107,32 @@ const getShipped = async (params) => {
 };
 
 const onChangeZone = async (zoneId) => {
+    try {
         formData.value.agencyModeFk = null;
         const { data } = await axios.get(`Zones/${zoneId}`);
         formData.value.agencyModeFk = data.agencyModeFk;
+    } catch (error) {
+        console.error(error);
+    }
 };
 
 const onChangeAddress = async (addressId) => {
+    try {
         formData.value.nickname = null;
         const { data } = await axios.get(`Addresses/${addressId}`);
         formData.value.nickname = data.nickname;
+    } catch (error) {
+        console.error(error);
+    }
 };
 
 const getClientDefaultAddress = async (clientId) => {
+    try {
         const { data } = await axios.get(`Clients/${clientId}`);
         if (data) addressId.value = data.defaultAddressFk;
+    } catch (error) {
+        console.error(error);
+    }
 };
 
 const clientAddressesList = async (value) => {
@@ -262,17 +269,7 @@ const redirectToCustomerAddress = () => {
     });
 };
 
-async function getZone(options) {
+onMounted(() => onFormModelInit());
-    if (!zoneId.value) return;
-
-    const zone = options.find((z) => z.id == zoneId.value);
-    if (zone) return;
-
-    const { data } = await axios.get('Zones/' + zoneId.value, {
-        params: { filter: JSON.stringify({ fields: ['id', 'name'] }) },
-    });
-    zoneSelectRef.value.opts.push(data);
-}
 </script>
 <template>
     <FetchData
@@ -296,6 +293,13 @@ async function getZone(options) {
         @on-fetch="(data) => (agenciesOptions = data)"
         auto-load
     />
+    <FetchData
+        ref="zonesFetchRef"
+        url="Zones/includingExpired"
+        :filter="zonesFilter"
+        @on-fetch="(data) => (zonesOptions = data)"
+        auto-load
+    />
     <QForm>
         <VnRow>
             <VnSelect
@@ -309,7 +313,6 @@ async function getZone(options) {
                 hide-selected
                 map-options
                 :required="true"
-                :rules="validate('basicData.client')"
             >
                 <template #option="scope">
                     <QItem v-bind="scope.itemProps">
@@ -330,7 +333,6 @@ async function getZone(options) {
                 hide-selected
                 map-options
                 :required="true"
-                :rules="validate('basicData.warehouse')"
             />
         </VnRow>
         <VnRow>
@@ -343,7 +345,6 @@ async function getZone(options) {
                 hide-selected
                 map-options
                 :required="true"
-                :rules="validate('basicData.address')"
             >
                 <template #option="scope">
                     <QItem v-bind="scope.itemProps">
@@ -391,7 +392,6 @@ async function getZone(options) {
                 :label="t('basicData.alias')"
                 v-model="formData.nickname"
                 :required="true"
-                :rules="validate('basicData.alias')"
             />
         </VnRow>
         <VnRow class="row q-gutter-md q-mb-md no-wrap">
@@ -404,7 +404,6 @@ async function getZone(options) {
                 hide-selected
                 map-options
                 :required="true"
-                :rules="validate('basicData.company')"
             />
             <VnSelect
                 :label="t('basicData.agency')"
@@ -415,22 +414,17 @@ async function getZone(options) {
                 hide-selected
                 map-options
                 @focus="agencyFetchRef.fetch()"
-                :rules="validate('basicData.agency')"
             />
             <VnSelect
-                ref="zoneSelectRef"
                 :label="t('basicData.zone')"
                 v-model="zoneId"
                 option-value="id"
                 option-label="name"
-                url="Zones/includingExpired"
+                :options="zonesOptions"
-                :fields="['id', 'name']"
+                hide-selected
-                sort-by="id"
+                map-options
-                :where="zoneWhere"
-                :rules="validate('basicData.zone')"
                 :required="true"
-                :disable="!canEditZone"
+                @focus="zonesFetchRef.fetch()"
-                @update:options="getZone"
             >
                 <template #option="scope">
                     <QItem v-bind="scope.itemProps">
@@ -450,19 +444,16 @@ async function getZone(options) {
                 :label="t('basicData.shipped')"
                 v-model="formData.shipped"
                 :required="true"
-                :rules="validate('basicData.shipped')"
             />
             <VnInputTime
                 :label="t('basicData.shippedHour')"
                 v-model="formData.shipped"
                 :required="true"
-                :rules="validate('basicData.shippedHour')"
             />
             <VnInputDate
                 :label="t('basicData.landed')"
                 v-model="formData.landed"
                 :required="true"
-                :rules="validate('basicData.landed')"
             />
         </VnRow>
     </QForm>

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

@@ -3,7 +3,7 @@ import { ref, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
-import TicketBasicData from './TicketBasicData.vue';
+import BasicDataTable from './BasicDataTable.vue';
 import TicketBasicDataForm from './TicketBasicDataForm.vue';
 import { useVnConfirm } from 'composables/useVnConfirm';
 
@@ -70,6 +70,7 @@ const isFormInvalid = () => {
 };
 
 const getPriceDifference = async () => {
+    try {
         const params = {
             landed: formData.value.landed,
             addressId: formData.value.addressFk,
@@ -83,10 +84,15 @@ const getPriceDifference = async () => {
             params
         );
         formData.value.sale = data;
+    } catch (error) {
+        console.error(error);
+    }
 };
 
 const submit = async () => {
-    if (!formData.value.option) return notify(t('basicData.chooseAnOption'), 'negative');
+    try {
+        if (!formData.value.option)
+            return notify(t('basicData.chooseAnOption'), 'negative');
 
         const params = {
             clientFk: formData.value.clientFk,
@@ -115,6 +121,9 @@ const submit = async () => {
         const ticketToMove = data.id;
         notify(t('basicData.unroutedTicket'), 'positive');
         router.push({ name: 'TicketSummary', params: { id: ticketToMove } });
+    } catch (error) {
+        console.error(error);
+    }
 };
 
 const submitWithNegatives = async () => {
@@ -149,10 +158,7 @@ onBeforeMount(async () => await getTicketData());
         color="primary"
         animated
         keep-alive
-        style="margin: auto"
+        style="max-width: 800px; margin: auto"
-        :style="{
-            'max-width': step > 1 ? 'none' : '800px',
-        }"
     >
         <QStep :name="1" :title="t('globals.pageTitles.basicData')" :done="step > 1">
             <TicketBasicDataForm
@@ -162,7 +168,7 @@ onBeforeMount(async () => await getTicketData());
             />
         </QStep>
         <QStep :name="2" :title="t('basicData.priceDifference')">
-            <TicketBasicData
+            <BasicDataTable
                 :form-data="formData"
                 v-model:haveNegatives="haveNegatives"
                 @update-form="($event) => (formData = $event)"