feat: refs #7220 ok FormModel

.eslintrc.cjs

@@ -25,7 +25,7 @@ module.exports = {
         // 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
         'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
         // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
-
+        'plugin:cypress/recommended',
         // https://github.com/prettier/eslint-config-prettier#installation
         // usage with Prettier, provided by 'eslint-config-prettier'.
         'prettier',
@@ -58,7 +58,7 @@ module.exports = {
     rules: {
         'prefer-promise-reject-errors': 'off',
         'no-unused-vars': 'warn',
-        "vue/no-multiple-template-root": "off" ,
+        'vue/no-multiple-template-root': 'off',
         // allow debugger during development only
         'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     },

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "msedge",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:5000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

cypress.config.js

@@ -1,6 +1,12 @@
 const { defineConfig } = require('cypress');
+const {
+    injectQuasarDevServerConfig,
+} = require('@quasar/quasar-app-extension-testing-e2e-cypress/cct-dev-server');
 
 module.exports = defineConfig({
+    env: {
+        baseUrl: 'http://localhost:9000/',
+    },
     e2e: {
         baseUrl: 'http://localhost:9000/',
         experimentalStudio: true,
@@ -18,6 +24,29 @@ module.exports = defineConfig({
         },
         setupNodeEvents(on, config) {
             // implement node event listeners here
+            on('after:spec', (results) => {
+                // `results` is the tests results
+                console.error('results: ', results);
+                cy.exec('cd ../salix && gulp docker');
+            });
+        },
+    },
+
+    component: {
+        indexHtmlFile: 'test/cypress/support/component-index.html',
+        supportFile: 'test/cypress/support/component.js',
+        specPattern: 'test/cypress/components/**/*.spec.js',
+        devServer: {
+            framework: 'quasar',
+            bundler: 'vite',
+        },
+        setupNodeEvents(on, config) {
+            // implement node event listeners here
+            on('after:spec', (results) => {
+                // `results` is the tests results
+                console.error('results: ', results);
+                cy.exec('cd ../salix && gulp docker');
+            });
         },
     },
 });

generate-tests.js

@@ -0,0 +1,45 @@
+const fs = require('fs');
+const path = require('path');
+// Ruta de la carpeta de componentes
+
+// Ruta de la carpeta de pruebas
+// ['common', 'ui'].forEach((folder) => {
+generateTest('folder');
+// });
+function generateTest(type) {
+    const componentsDir = path.join(__dirname, `src/components`);
+    const testDir = path.join(__dirname, `test/cypress/components`);
+    // Leer todos los archivos en la carpeta de componentes
+    fs.readdir(componentsDir, (err, files) => {
+        if (err) return console.error('Error leyendo la carpeta de componentes:', err);
+
+        // Filtrar solo archivos .vue
+        const vueFiles = files.filter((file) => file.endsWith('.vue'));
+
+        vueFiles.forEach((file) => {
+            const componentName = path.basename(file, '.vue');
+            const testFileName = `${componentName}.spec.js`;
+            const testFilePath = path.join(testDir, testFileName);
+
+            // Contenido del archivo de prueba
+            const testFileContent = `
+import ${componentName} from 'src/components/${file}';
+
+describe.skip('<${componentName} />', () => {
+    it('TODO: boilerplate', () => {
+        // see: https://on.cypress.io/mounting-vue
+        cy.createWrapper(${componentName});
+    });
+});
+`;
+
+            // Escribir el archivo de prueba
+            fs.writeFile(testFilePath, testFileContent, (err) => {
+                if (err)
+                    return console.error('Error escribiendo el archivo de prueba:', err);
+
+                console.log(`Archivo de prueba generado: ${testFileName}`);
+            });
+        });
+    });
+}

package.json

@@ -10,15 +10,19 @@
         "lint": "eslint --ext .js,.vue ./",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
         "test:e2e": "cypress open",
+        "test:e2e:unit": "cypress run  --component",
+        "test:e2e:unit:ci": "cypress run -p 9000 --component",
         "test:e2e:ci": "cd ../salix && gulp docker && cd ../salix-front && cypress run",
         "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
         "test:unit": "vitest",
         "test:unit:ci": "vitest run",
+        "cypr": "cross-env CYPRESS_REMOTE_DEBUGGING_PORT=9222 cypress open",
         "commitlint": "commitlint --edit",
         "prepare": "npx husky install",
         "addReferenceTag": "node .husky/addReferenceTag.js"
     },
     "dependencies": {
+        "@modyfi/vite-plugin-yaml": "1.0.4",
         "@quasar/cli": "^2.3.0",
         "@quasar/extras": "^1.16.9",
         "axios": "^1.4.0",
@@ -38,7 +42,9 @@
         "@pinia/testing": "^0.1.2",
         "@quasar/app-vite": "^1.7.3",
         "@quasar/quasar-app-extension-qcalendar": "4.0.0-beta.15",
+        "@quasar/quasar-app-extension-testing-e2e-cypress": "^6.1.0",
         "@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
+        "@vitest/ui": "^1.6.0",
         "@vue/test-utils": "^2.4.4",
         "autoprefixer": "^10.4.14",
         "cypress": "^13.6.6",

quasar.config.js

@@ -87,6 +87,7 @@ module.exports = configure(function (/* ctx */) {
             alias: {
                 composables: path.join(__dirname, './src/composables'),
                 filters: path.join(__dirname, './src/filters'),
+                components: path.join(__dirname, './src/components'),
             },
 
             vitePlugins: [

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;
-    stateQuery.remove(config);
+    const { method } = response.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/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) => {
-        let message;
-        const response = error.response;
-        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');
+    app.config.errorHandler = function (err) {
+        console.error(err);
+        notify('globals.error', 'negative', 'error');
     };
 });

src/components/CreateBankEntityForm.vue

@@ -2,10 +2,9 @@
 import { reactive, ref, onMounted, nextTick, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnInput from 'src/components/common/VnInput.vue';
-
 import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import FormModelPopup from './FormModelPopup.vue';
 import { useState } from 'src/composables/useState';
 
@@ -37,7 +36,7 @@ const onDataSaved = (...args) => {
 
 onMounted(async () => {
     await nextTick();
-    bicInputRef.value.focus();
+    bicInputRef?.value?.focus();
 });
 </script>
 
@@ -98,7 +97,7 @@ onMounted(async () => {
     </FormModelPopup>
 </template>
 
-<i18n>
+<i18n lang="yml">
 en:
     title: New bank entity
     subtitle: Please, ensure you put the correct data!

src/components/CreateManualInvoiceForm.vue

@@ -3,8 +3,8 @@ import { reactive, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
@@ -141,7 +141,7 @@ const onDataSaved = async (formData, requestResponse) => {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 es:
     Create manual invoice: Crear factura manual
     Ticket: Ticket

src/components/CreateNewCityForm.vue

@@ -2,9 +2,10 @@
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnRow from 'components/ui/VnRow.vue';
-import VnSelectProvince from 'components/VnSelectProvince.vue';
-import VnInput from 'components/common/VnInput.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import VnSelectProvince from 'src/components/VnSelectProvince.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
 const emit = defineEmits(['onDataSaved']);
@@ -63,7 +64,7 @@ const onDataSaved = (...args) => {
     </FormModelPopup>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     New city: Nueva ciudad
     Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!

src/components/CreateNewExpenseForm.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import VnRow from 'components/ui/VnRow.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
@@ -43,7 +43,7 @@ const { t } = useI18n();
     </FormModelPopup>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     New expense: Nuevo gasto
     It's a withholding: Es una retención

src/components/CreateNewPostcodeForm.vue

@@ -79,20 +79,14 @@ async function onProvinceCreated(data) {
 watch(
     () => [postcodeFormData.countryFk],
     async (newCountryFk, oldValueFk) => {
-        if (Array.isArray(newCountryFk)) {
-            newCountryFk = newCountryFk[0];
-        }
-        if (Array.isArray(oldValueFk)) {
-            oldValueFk = oldValueFk[0];
-        }
-        if (!!oldValueFk && newCountryFk !== oldValueFk) {
+        if (!!oldValueFk[0] && newCountryFk[0] !== oldValueFk[0]) {
             postcodeFormData.provinceFk = null;
             postcodeFormData.townFk = null;
         }
-        if (oldValueFk !== newCountryFk) {
+        if ((newCountryFk, newCountryFk !== postcodeFormData.countryFk)) {
             await provincesFetchDataRef.value.fetch({
                 where: {
-                    countryFk: newCountryFk,
+                    countryFk: newCountryFk[0],
                 },
             });
             await townsFetchDataRef.value.fetch({
@@ -109,12 +103,9 @@ watch(
 watch(
     () => postcodeFormData.provinceFk,
     async (newProvinceFk) => {
-        if (Array.isArray(newProvinceFk)) {
-            newProvinceFk = newProvinceFk[0];
-        }
-        if (newProvinceFk !== postcodeFormData.provinceFk) {
+        if (newProvinceFk[0] && newProvinceFk[0] !== postcodeFormData.provinceFk) {
             await townsFetchDataRef.value.fetch({
-                where: { provinceFk: newProvinceFk },
+                where: { provinceFk: newProvinceFk[0] },
             });
         }
     }
@@ -134,26 +125,16 @@ async function handleCountries(data) {
     <FetchData
         ref="provincesFetchDataRef"
         @on-fetch="handleProvinces"
-        :sort-by="['name ASC']"
-        :limit="30"
         auto-load
         url="Provinces/location"
     />
     <FetchData
         ref="townsFetchDataRef"
-        :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"
-    />
+    <FetchData @on-fetch="handleCountries" auto-load url="Countries" />
     <FormModelPopup
         url-create="postcodes"
         model="postcode"

src/components/CreateNewProvinceForm.vue

@@ -2,8 +2,8 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
@@ -46,8 +46,6 @@ const onDataSaved = (dataSaved, requestResponse) => {
             },
         }"
         url="Autonomies/location"
-        :sort-by="['name ASC']"
-        :limit="30"
     />
     <FormModelPopup
         :title="t('New province')"
@@ -87,7 +85,7 @@ const onDataSaved = (dataSaved, requestResponse) => {
     </FormModelPopup>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     New province: Nueva provincia
     Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!

src/components/CreateThermographForm.vue

@@ -2,8 +2,8 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
@@ -95,7 +95,7 @@ const onDataSaved = (dataSaved) => {
     </FormModelPopup>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Identifier: Identificador
     Model: Modelo

src/components/CrudModel.vue

@@ -5,10 +5,10 @@ import { useRouter, onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useValidator } from 'src/composables/useValidator';
-import { useStateStore } from 'stores/useStateStore';
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import VnConfirm from 'components/ui/VnConfirm.vue';
-import SkeletonTable from 'components/ui/SkeletonTable.vue';
+import { useStateStore } from 'src/stores/useStateStore';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import SkeletonTable from 'src/components/ui/SkeletonTable.vue';
 import { tMobile } from 'src/composables/tMobile';
 
 const { push } = useRouter();

src/components/EditPictureForm.vue

@@ -3,8 +3,8 @@ import { reactive, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 import Croppie from 'croppie/croppie';
@@ -336,7 +336,7 @@ const makeRequest = async () => {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 es:
     Edit photo: Editar foto
     Select from computer: Seleccionar desde ordenador

src/components/EditTableCellValueForm.vue

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import { QCheckbox } from 'quasar';
 
 import axios from 'axios';
@@ -142,7 +142,7 @@ const closeForm = () => {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 es:
     Edit: Editar
     buy(s): compra(s)

src/components/FilterItemForm.vue

@@ -2,10 +2,10 @@
 import { ref, reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnRow from 'components/ui/VnRow.vue';
-import FetchData from 'components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnSelect from 'components/common/VnSelect.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 import axios from 'axios';
@@ -208,7 +208,7 @@ const selectItem = ({ id }) => {
     </QForm>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Filter item: Filtrar artículo
     Enter a new search: Introduce una nueva búsqueda

src/components/FilterTravelForm.vue

@@ -2,10 +2,10 @@
 import { ref, reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnRow from 'components/ui/VnRow.vue';
-import FetchData from 'components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnSelect from 'components/common/VnSelect.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
 
 import axios from 'axios';
@@ -207,7 +207,7 @@ const selectTravel = ({ id }) => {
     </QForm>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Filter travels: Filtro envíos
     Enter a new search: Introduce una nueva búsqueda

src/components/FormModel.vue

@@ -5,10 +5,10 @@ import { onBeforeRouteLeave, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useState } from 'src/composables/useState';
-import { useStateStore } from 'stores/useStateStore';
+import { useStateStore } from 'src/stores/useStateStore';
 import { useValidator } from 'src/composables/useValidator';
 import useNotify from 'src/composables/useNotify.js';
-import SkeletonForm from 'components/ui/SkeletonForm.vue';
+import SkeletonForm from 'src/components/ui/SkeletonForm.vue';
 import VnConfirm from './ui/VnConfirm.vue';
 import { tMobile } from 'src/composables/tMobile';
 import { useArrayData } from 'src/composables/useArrayData';
@@ -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;
     }
@@ -299,7 +302,7 @@ defineExpose({
     <Teleport
         to="#st-actions"
         v-if="
-            $props.defaultActions &&
+            $props?.defaultActions &&
             stateStore?.isSubToolbarShown() &&
             componentIsRendered
         "
@@ -360,7 +363,7 @@ defineExpose({
 
     <QInnerLoading
         :showing="isLoading"
-        :label="t('globals.pleaseWait')"
+        :label="$t('globals.pleaseWait')"
         color="primary"
         style="min-width: 100%"
     />

src/components/FormModelPopup.vue

@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import FormModel from 'components/FormModel.vue';
+import FormModel from 'src/components/FormModel.vue';
 
 const emit = defineEmits(['onDataSaved', 'onDataCanceled']);
 
@@ -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/ItemsFilterPanel.vue

@@ -2,11 +2,11 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnInput from 'components/common/VnInput.vue';
-import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FetchData from 'src/components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelect from 'components/common/VnSelect.vue';
-import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnFilterPanelChip from 'src/components/ui/VnFilterPanelChip.vue';
 
 import axios from 'axios';
 
@@ -336,7 +336,7 @@ const removeTag = (index, params, search) => {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 en:
     params:
         supplier: Supplier

src/components/NavBar.vue

@@ -2,18 +2,16 @@
 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 { useStateStore } from 'src/stores/useStateStore';
 import { useQuasar } from 'quasar';
 import PinnedModules from './PinnedModules.vue';
-import UserPanel from 'components/UserPanel.vue';
+import UserPanel from 'src/components/UserPanel.vue';
 import VnBreadcrumbs from './common/VnBreadcrumbs.vue';
 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';
@@ -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 />
@@ -108,6 +98,8 @@ const pinnedModulesRef = ref();
 </template>
 
 <style lang="scss" scoped>
+@import '/src/css/quasar.variables.scss';
+
 .searchbar {
     width: max-content;
 }
@@ -115,7 +107,7 @@ const pinnedModulesRef = ref();
     background-color: var(--vn-section-color);
 }
 </style>
-<i18n>
+<i18n lang="yml">
 en:
     Go to Salix: Go to Salix
 es:

src/components/PinnedModules.vue

@@ -78,7 +78,7 @@ async function redirect() {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 en:
     Home: Home
 es:

src/components/RefundInvoiceForm.vue

@@ -3,9 +3,9 @@ import { ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useDialogPluginComponent } from 'quasar';
-import VnRow from 'components/ui/VnRow.vue';
-import FetchData from 'components/FetchData.vue';
-import VnSelect from 'components/common/VnSelect.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FormPopup from './FormPopup.vue';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@@ -150,7 +150,7 @@ const refund = async () => {
     </QDialog>
 </template>
 
-<i18n>
+<i18n lang="yml">
 en:
     Refund invoice: Refund invoice
     Rectificative type: Rectificative type

src/components/RegularizeStockForm.vue

@@ -3,8 +3,8 @@ import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
 const emit = defineEmits(['onDataSaved']);
@@ -73,7 +73,7 @@ const onDataSaved = (data) => {
     </FormModelPopup>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Warehouse: Almacén
     Type the visible quantity: Introduce la cantidad visible

src/components/TransferInvoiceForm.vue

@@ -3,10 +3,10 @@ import { ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar, useDialogPluginComponent } from 'quasar';
-import VnConfirm from 'components/ui/VnConfirm.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import FetchData from 'components/FetchData.vue';
-import VnSelect from 'components/common/VnSelect.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FormPopup from './FormPopup.vue';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@@ -205,7 +205,7 @@ const makeInvoice = async () => {
     </QDialog>
 </template>
 
-<i18n>
+<i18n lang="yml">
 en:
     checkInfo: New tickets from the destination customer will be generated in the consignee by default.
     transferInvoiceInfo: Destination customer is marked to bill in the consignee

src/components/UserPanel.vue

@@ -8,8 +8,8 @@ import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import { localeEquivalence } from 'src/i18n/index';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import FetchData from 'components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
 import { useClipboard } from 'src/composables/useClipboard';
 import { useRole } from 'src/composables/useRole';
 import VnAvatar from './ui/VnAvatar.vue';

src/components/VnSelectProvince.vue

@@ -3,8 +3,8 @@ import { ref } from 'vue';
 import { useValidator } from 'src/composables/useValidator';
 import { useI18n } from 'vue-i18n';
 
-import VnSelectDialog from 'components/common/VnSelectDialog.vue';
-import FetchData from 'components/FetchData.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import FetchData from 'src/components/FetchData.vue';
 import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
 
 const emit = defineEmits(['onProvinceCreated']);
@@ -78,8 +78,8 @@ async function handleProvinces(data) {
         </template>
     </VnSelectDialog>
 </template>
-<i18n>
-    es:
-        Province: Provincia
+<i18n lang="yml">
+es:
+    Province: Provincia
         Create province: Crear provincia
 </i18n>

src/components/VnTable/VnColumn.vue

@@ -4,14 +4,14 @@ import { QIcon, QCheckbox } from 'quasar';
 import { dashIfEmpty } from 'src/filters';
 
 /* basic input */
-import VnSelect from 'components/common/VnSelect.vue';
-import VnSelectCache from 'components/common/VnSelectCache.vue';
-import VnInput from 'components/common/VnInput.vue';
-import VnInputNumber from 'components/common/VnInputNumber.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
-import VnInputTime from 'components/common/VnInputTime.vue';
-import VnComponent from 'components/common/VnComponent.vue';
-import VnUserLink from 'components/ui/VnUserLink.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSelectCache from 'src/components/common/VnSelectCache.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInputTime from 'src/components/common/VnInputTime.vue';
+import VnComponent from 'src/components/common/VnComponent.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 const model = defineModel(undefined, { required: true });
 const $props = defineProps({

src/components/VnTable/VnFilter.vue

@@ -1,14 +1,14 @@
 <script setup>
 import { markRaw, computed, defineModel } from 'vue';
 import { QCheckbox } from 'quasar';
-import { useArrayData } from 'composables/useArrayData';
+import { useArrayData } from 'src/composables/useArrayData';
 
 /* basic input */
-import VnSelect from 'components/common/VnSelect.vue';
-import VnInput from 'components/common/VnInput.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
-import VnInputTime from 'components/common/VnInputTime.vue';
-import VnTableColumn from 'components/VnTable/VnColumn.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInputTime from 'src/components/common/VnInputTime.vue';
+import VnTableColumn from 'src/components/VnTable/VnColumn.vue';
 
 const $props = defineProps({
     column: {

src/components/VnTable/VnOrder.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue';
-import { useArrayData } from 'composables/useArrayData';
+import { useArrayData } from 'src/composables/useArrayData';
 const model = defineModel({ type: Object });
 const $props = defineProps({
     name: {

src/components/VnTable/VnTable.vue

@@ -6,14 +6,14 @@ import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 
 import CrudModel from 'src/components/CrudModel.vue';
-import FormModelPopup from 'components/FormModelPopup.vue';
+import FormModelPopup from 'src/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 VnTableChip from 'components/VnTable/VnChip.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnTableColumn from 'src/components/VnTable/VnColumn.vue';
+import VnFilter from 'src/components/VnTable/VnFilter.vue';
+import VnTableChip from 'src/components/VnTable/VnChip.vue';
 import VnVisibleColumn from 'src/components/VnTable/VnVisibleColumn.vue';
-import VnLv from 'components/ui/VnLv.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
 import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
 
 const $props = defineProps({
@@ -316,7 +316,6 @@ defineExpose({
     selected,
     CrudModelRef,
     params,
-    tableRef,
 });
 
 function handleOnDataSaved(_) {
@@ -417,7 +416,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"
@@ -457,11 +455,7 @@ function handleScroll() {
                     />
                 </template>
                 <template #header-cell="{ col }">
-                    <QTh
-                        v-if="col.visible ?? true"
-                        :style="col.headerStyle"
-                        :class="col.headerClass"
-                    >
+                    <QTh v-if="col.visible ?? true">
                         <div
                             class="column self-start q-ml-xs ellipsis"
                             :class="`text-${col?.align ?? 'left'}`"
@@ -757,7 +751,7 @@ function handleScroll() {
         </FormModelPopup>
     </QDialog>
 </template>
-<i18n>
+<i18n lang="yml">
 en:
     status: Status
     table view: Table view
@@ -821,7 +815,6 @@ es:
         top: 0;
     }
 }
-
 .vnTable {
     thead tr th {
         position: sticky;
@@ -860,9 +853,6 @@ es:
     table tbody th {
         position: relative;
     }
-}
-
-.last-row-sticky {
     tbody:nth-last-child(1) {
         @extend .bg-header;
         position: sticky;

src/components/VnTable/VnVisibleColumn.vue

@@ -181,9 +181,9 @@ onMounted(async () => {
 }
 </style>
 
-<i18n>
-    es:
-        Check the columns you want to see: Marca las columnas que quieres ver
-        Visible columns: Columnas visibles
-        Tick all: Marcar todas
+<i18n lang="yml">
+es:
+    Check the columns you want to see: Marca las columnas que quieres ver
+    Visible columns: Columnas visibles
+    Tick all: Marcar todas
 </i18n>

src/components/common/RightMenu.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted, useSlots } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
+import { useStateStore } from 'src/stores/useStateStore';
 
 const slots = useSlots();
 const hasContent = ref(false);

src/components/common/SendEmailDialog.vue

@@ -78,8 +78,8 @@ async function confirm() {
 }
 </style>
 
-<i18n>
-    es:
-        Send email notification: Enviar notificación por correo
-        The notification will be sent to the following address: La notificación se enviará a la siguiente dirección
+<i18n lang="yml">
+es:
+    Send email notification: Enviar notificación por correo
+    The notification will be sent to the following address: La notificación se enviará a la siguiente dirección
 </i18n>

src/components/common/SendSmsDialog.vue

@@ -1,15 +1,15 @@
 <script setup>
-import {useDialogPluginComponent} from 'quasar';
-import {useI18n} from 'vue-i18n';
-import {computed, ref} from 'vue';
-import VnInput from 'components/common/VnInput.vue';
+import { useDialogPluginComponent } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { computed, ref } from 'vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import axios from 'axios';
-import useNotify from "composables/useNotify";
+import useNotify from 'src/composables/useNotify';
 
 const MESSAGE_MAX_LENGTH = 160;
 
-const {t} = useI18n();
-const {notify} = useNotify();
+const { t } = useI18n();
+const { notify } = useNotify();
 const props = defineProps({
     title: {
         type: String,
@@ -34,7 +34,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits([...useDialogPluginComponent.emits, 'sent']);
-const {dialogRef, onDialogHide} = useDialogPluginComponent();
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
 
 const smsRules = [
     (val) => (val && val.length > 0) || t("The message can't be empty"),
@@ -144,7 +144,7 @@ const onSubmit = async () => {
     max-width: 450px;
 }
 </style>
-<i18n>
+<i18n lang="yml">
 es:
     Message: Mensaje
     Send: Enviar

src/components/common/TableVisibleColumns.vue

@@ -191,8 +191,8 @@ onMounted(async () => {
 }
 </style>
 
-<i18n>
-    es:
-        Check the columns you want to see: Marca las columnas que quieres ver
-        Visible columns: Columnas visibles
+<i18n lang="yml">
+es:
+    Check the columns you want to see: Marca las columnas que quieres ver
+    Visible columns: Columnas visibles
 </i18n>

src/components/common/VnBreadcrumbs.vue

@@ -67,7 +67,10 @@ function getBreadcrumb(param) {
         />
     </QBreadcrumbs>
 </template>
-<style lang="scss">
+<style lang="scss" scoped>
+@import '/src/css/quasar.variables.scss';
+@import '/node_modules/quasar/src/css/variables.sass';
+
 .q-breadcrumbs {
     &__el,
     > div {

src/components/common/VnBtnSelect.vue

@@ -1,19 +0,0 @@
-<script setup>
-import VnSelect from './VnSelect.vue';
-
-defineProps({
-    selectProps: { type: Object, required: true },
-    promise: { type: Function, default: () => {} },
-});
-</script>
-<template>
-    <QBtnDropdown v-bind="$attrs" color="primary">
-        <VnSelect
-            v-bind="selectProps"
-            hide-selected
-            hide-dropdown-icon
-            focus-on-mount
-            @update:model-value="promise"
-        />
-    </QBtnDropdown>
-</template>

src/components/common/VnCard.vue

@@ -5,9 +5,9 @@ import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import useCardSize from 'src/composables/useCardSize';
 import VnSubToolbar from '../ui/VnSubToolbar.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import RightMenu from 'components/common/RightMenu.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import LeftMenu from 'src/components/LeftMenu.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 const props = defineProps({
     dataKey: { type: String, required: true },
     baseUrl: { type: String, default: undefined },

src/components/common/VnDms.vue

@@ -4,11 +4,11 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import FormModelPopup from 'components/FormModelPopup.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -195,7 +195,7 @@ function addDefaultData(data) {
     row-gap: 20px;
 }
 </style>
-<i18n>
+<i18n lang="yml">
 en:
     contentTypesInfo: Allowed file types {allowedContentTypes}
     EntryDmsDescription: Reference {reference}
@@ -207,5 +207,4 @@ es:
     EntryDmsDescription: Referencia {reference}
     WorkersDescription: Laboral del empleado {reference}
     SupplierDmsDescription: Referencia {reference}
-
 </i18n>

src/components/common/VnDmsList.vue

@@ -7,11 +7,11 @@ import axios from 'axios';
 
 import VnUserLink from '../ui/VnUserLink.vue';
 import { downloadFile } from 'src/composables/downloadFile';
-import VnImg from 'components/ui/VnImg.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnDms from 'src/components/common/VnDms.vue';
-import VnConfirm from 'components/ui/VnConfirm.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
 import { useSession } from 'src/composables/useSession';
 
 const route = useRoute();
@@ -419,7 +419,7 @@ defineExpose({
     color: var(--vn-label-color);
 }
 </style>
-<i18n>
+<i18n lang="yml">
 en:
     contentTypesInfo: Allowed file types {allowedContentTypes}
     The documentation is available in paper form: The documentation is available in paper form

src/components/common/VnInput.vue

@@ -118,13 +118,13 @@ const mixinRules = [
         </QInput>
     </div>
 </template>
-<i18n>
-    en:
-        inputMin: Must be more than {value}
-        inputMax: Must be less than {value}
-    es:
-        inputMin: Debe ser mayor a {value}
-        inputMax: Debe ser menor a {value}
+<i18n lang="yml">
+en:
+    inputMin: Must be more than {value}
+    inputMax: Must be less than {value}
+es:
+    inputMin: Debe ser mayor a {value}
+    inputMax: Debe ser menor a {value}
 </i18n>
 <style lang="scss">
 .q-field__append {

src/components/common/VnInputDate.vue

@@ -161,7 +161,7 @@ const manageDate = (date) => {
     border-style: solid;
 }
 </style>
-<i18n>
-    es:
-        Open date: Abrir fecha
+<i18n lang="yml">
+es:
+    Open date: Abrir fecha
 </i18n>

src/components/common/VnInputTime.vue

@@ -140,7 +140,7 @@ function dateToTime(newDate) {
     display: none;
 }
 </style>
-<i18n>
-    es:
-        Open time: Abrir tiempo
+<i18n lang="yml">
+es:
+    Open time: Abrir tiempo
 </i18n>

src/components/common/VnLocation.vue

@@ -1,6 +1,6 @@
 <script setup>
 import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
-import VnSelectDialog from 'components/common/VnSelectDialog.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import { useI18n } from 'vue-i18n';
 import { ref } from 'vue';
 const { t } = useI18n();
@@ -96,6 +96,8 @@ const handleModelValue = (data) => {
     </VnSelectDialog>
 </template>
 <style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
 .add-icon {
     cursor: pointer;
     background-color: $primary;
@@ -103,7 +105,7 @@ const handleModelValue = (data) => {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 en:
     search_by_postalcode: Search by postalcode, town, province or country
     Create new location: Create new location

src/components/common/VnLog.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { date } from 'quasar';
-import { useStateStore } from 'stores/useStateStore';
+import { useStateStore } from 'src/stores/useStateStore';
 import { toRelativeDate } from 'src/filters';
 import { useColor } from 'src/composables/useColor';
 import { useCapitalize } from 'src/composables/useCapitalize';
@@ -852,6 +852,8 @@ watch(
     </QPageSticky>
 </template>
 <style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
 .q-card {
     background-color: var(--vn-section-color);
 }
@@ -1038,7 +1040,7 @@ watch(
     }
 }
 </style>
-<i18n>
+<i18n lang="yml">
 en:
     to: To
     pointRecord: View record at this point in time

src/components/common/VnLogFilter.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FetchData from 'components/FetchData.vue';
+import FetchData from 'src/components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 
 const { t } = useI18n();
@@ -62,7 +62,7 @@ const workers = ref();
     </VnFilterPanel>
 </template>
 
-<i18n>
+<i18n lang="yml">
 en:
     params:
         search: Contains

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', {
-    type: Boolean,
-    default: false,
+const _showDialog = computed({
+    get: () => $props.showDialog,
+    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>
@@ -77,7 +89,7 @@ const progressLabel = computed(() => `${Math.round($props.progress * 100)}%`);
     </QDialog>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Progress: Progreso
     Total progress: Progreso total

src/components/common/VnSectionMain.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'components/LeftMenu.vue';
+import { useStateStore } from 'src/stores/useStateStore';
+import LeftMenu from 'src/components/LeftMenu.vue';
 import { onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 

src/components/common/VnSelect.vue

@@ -86,6 +86,10 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    sortByWeight: {
+        type: Boolean,
+        default: false,
+    },
 });
 const { validations } = useValidator();
 const requiredFieldRule = (val) => validations().required($attrs.required, val);
@@ -141,7 +145,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/VnSelectDialog.vue

@@ -64,6 +64,8 @@ const isAllowedToCreate = computed(() => {
 </template>
 
 <style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
 .default-icon {
     cursor: pointer;
     color: $primary;

src/components/common/VnSelectEnum.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { onBeforeMount, ref, useAttrs } from 'vue';
 import axios from 'axios';
-import VnSelect from 'components/common/VnSelect.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { schema, table, column, translation, defaultOptions } = defineProps({
     schema: {

src/components/common/VnSmsDialog.vue

@@ -176,7 +176,7 @@ async function send() {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 en:
     templates:
         pendingPayment: 'Your order is pending of payment.
@@ -218,7 +218,8 @@ fr:
     Message: Message
     messageTooltip: Les caractères spéciaux comme les accents comptent comme plusieurs
     templates:
-        pendingPayment: 'Verdnatura : Commande en attente de règlement. Veuillez régler votre commande avant 9h.
+        pendingPayment:
+            'Verdnatura : Commande en attente de règlement. Veuillez régler votre commande avant 9h.
             Sinon elle sera décalée en fonction de vos jours de livraison . Merci'
         minAmount: 'Verdnatura vous rappelle :
             Montant minimum nécessaire de 50 euros pour recevoir la commande { orderId } livraison { landing }.

src/components/common/vnDiscount.vue

@@ -127,7 +127,7 @@ function cancel({ cancel }) {
     </QPopupEdit>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     New amount: Nuevo importe
     Update discount: Actualizar descuento

src/components/test_FetchData.vue

@@ -0,0 +1,16 @@
+import { mount } from '@cypress/vue'; import FetchData from
+'../../src/components/FetchData.vue'; import axios from 'axios'; import { ref } from
+'vue'; // Mock axios jest.mock('axios'); describe('FetchData Component', () => {
+it('fetches data on mount when autoLoad is true', () => { const mockData = { data: [{ id:
+1, name: 'Test' }] }; axios.get.mockResolvedValue(mockData); const onFetch =
+cy.spy().as('onFetch'); mount(FetchData, { props: { autoLoad: true, url:
+'https://api.example.com/data', }, attrs: { onFetch, }, });
+cy.get('@onFetch').should('have.been.calledWith', mockData.data); }); it('does not fetch
+data on mount when autoLoad is false', () => { const onFetch = cy.spy().as('onFetch');
+mount(FetchData, { props: { autoLoad: false, url: 'https://api.example.com/data', },
+attrs: { onFetch, }, }); cy.get('@onFetch').should('not.have.been.called'); });
+it('fetches data when fetch method is called', () => { const mockData = { data: [{ id: 1,
+name: 'Test' }] }; axios.get.mockResolvedValue(mockData); const onFetch =
+cy.spy().as('onFetch'); const wrapper = mount(FetchData, { props: { autoLoad: false, url:
+'https://api.example.com/data', }, attrs: { onFetch, }, }); wrapper.vm.fetch();
+cy.get('@onFetch').should('have.been.calledWith', mockData.data); }); });

src/components/ui/CardDescriptor.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { onBeforeMount, watch, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
-import { useArrayData } from 'composables/useArrayData';
+import SkeletonDescriptor from 'src/components/ui/SkeletonDescriptor.vue';
+import { useArrayData } from 'src/composables/useArrayData';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useState } from 'src/composables/useState';
 import { useRoute } from 'vue-router';

src/components/ui/CardList.vue

@@ -124,7 +124,7 @@ const toggleCardCheck = (item) => {
 }
 </style>
 
-<i18n>
-    es:
-        ID: ID
+<i18n lang="yml">
+es:
+    ID: ID
 </i18n>

src/components/ui/CardSummary.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, watch, onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
-import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
+import SkeletonSummary from 'src/components/ui/SkeletonSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 
@@ -111,6 +111,8 @@ function existSummary(routes) {
 </template>
 
 <style lang="scss">
+@import 'src/css/quasar.variables.scss';
+
 .summary.container {
     display: flex;
     justify-content: center;
@@ -205,6 +207,8 @@ function existSummary(routes) {
 }
 </style>
 <style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
 .summaryHeader .vn-label-value {
     display: flex;
     flex-direction: row;

src/components/ui/CatalogItem.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnLv from 'components/ui/VnLv.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
 import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
@@ -101,6 +101,8 @@ const dialog = ref(null);
 }
 </style>
 <style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
 .container {
     max-width: 448px;
     width: 100%;
@@ -179,7 +181,7 @@ const dialog = ref(null);
     }
 }
 </style>
-<i18n>
+<i18n lang="yml">
 es:
     to: to
     price-kg: Precio por Kg

src/components/ui/FetchedTags.vue

@@ -46,6 +46,8 @@ const tags = computed(() => {
 </template>
 
 <style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
 .fetchedTags {
     align-items: center;
     .wrap {

src/components/ui/VnConfirm.vue

@@ -102,7 +102,7 @@ async function confirm() {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 es:
     Confirm: Confirmar
     Are you sure you want to continue?: ¿Seguro que quieres continuar?

src/components/ui/VnFilterPanel.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { onMounted, ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useArrayData } from 'composables/useArrayData';
+import { useArrayData } from 'src/composables/useArrayData';
 import { useRoute } from 'vue-router';
 import toDate from 'filters/toDate';
-import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
+import VnFilterPanelChip from 'src/components/ui/VnFilterPanelChip.vue';
 
 const { t } = useI18n();
 const $props = defineProps({
@@ -283,7 +283,7 @@ function sanitizer(params) {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 es:
     No filters applied: No se han aplicado filtros
     Applied filters: Filtros aplicados

src/components/ui/VnNotes.vue

@@ -8,14 +8,14 @@ import { useQuasar } from 'quasar';
 import { toDateHourMin } from 'src/filters';
 import { useState } from 'src/composables/useState';
 
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import VnUserLink from 'components/ui/VnUserLink.vue';
-import VnConfirm from 'components/ui/VnConfirm.vue';
-import VnAvatar from 'components/ui/VnAvatar.vue';
-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';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnAvatar from 'src/components/ui/VnAvatar.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const $props = defineProps({
     url: { type: String, default: null },
@@ -205,10 +205,10 @@ onBeforeRouteLeave((to, from, next) => {
     }
 }
 </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 lang="yml">
+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/VnPaginate.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useArrayData } from 'composables/useArrayData';
+import { useArrayData } from 'src/composables/useArrayData';
 
 const { t } = useI18n();
 
@@ -245,7 +245,7 @@ defineExpose({ fetch, addFilter, paginate });
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 es:
     No data to display: Sin datos que mostrar
     No results found: No se han encontrado resultados

src/components/ui/VnSearchbar.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { onMounted, ref, watch } from 'vue';
 import { useQuasar } from 'quasar';
-import { useArrayData } from 'composables/useArrayData';
+import { useArrayData } from 'src/composables/useArrayData';
 import VnInput from 'src/components/common/VnInput.vue';
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'src/stores/useStateStore';

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

@@ -1,10 +1,8 @@
 import { onMounted, computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
-import { useArrayDataStore } from 'stores/useArrayDataStore';
-import { buildFilter } from 'filters/filterPanel';
-
-const arrayDataStore = useArrayDataStore();
+import { useArrayDataStore } from 'src/stores/useArrayDataStore';
+import { buildFilter } from 'src/filters/filterPanel';
 
 export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     if (!key) throw new Error('ArrayData: A key is required to use this composable');
@@ -298,3 +296,5 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         reset,
     };
 }
+
+const arrayDataStore = useArrayDataStore();

src/composables/useVnConfirm.js

@@ -1,4 +1,4 @@
-import VnConfirm from 'components/ui/VnConfirm.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
 import { useQuasar } from 'quasar';
 
 export function useVnConfirm() {

src/css/app.scss

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

src/filters/toHour.js

@@ -1,4 +1,4 @@
-import isValidDate from 'filters/isValidDate';
+import isValidDate from 'src/filters/isValidDate';
 
 export default function toHour(date) {
     if (!isValidDate(date)) {

src/i18n/locale/en.yml

@@ -304,14 +304,12 @@ globals:
         from: From
         To: To
         stateFk: State
+        departmentFk: Department
         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
     statusInternalServerError: An internal server error has ocurred
@@ -558,6 +556,7 @@ ticket:
         package: Package
         taxClass: Tax class
         services: Services
+        changeState: Change state
         requester: Requester
         atender: Atender
         request: Request

src/i18n/locale/es.yml

@@ -312,10 +312,8 @@ globals:
         email: Correo
         SSN: NSS
         fi: NIF
-        myTeam: Mi equipo
     changePass: Cambiar contraseña
     deleteConfirmTitle: Eliminar los elementos seleccionados
-    changeState: Cambiar estado
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor
@@ -567,6 +565,7 @@ ticket:
         package: Embalaje
         taxClass: Tipo IVA
         services: Servicios
+        changeState: Cambiar estado
         requester: Solicitante
         atender: Comprador
         request: Petición de compra

src/pages/Account/AccountAccounts.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FormModel from 'src/components/FormModel.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import axios from 'axios';
@@ -95,7 +95,7 @@ const onSynchronizeRoles = async () => {
     </QPage>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Roles synchronized!: ¡Roles sincronizados!
     Synchronizing in the background: Sincronizando en segundo plano

src/pages/Account/AccountAcls.vue

@@ -6,9 +6,9 @@ import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 import { useQuasar } from 'quasar';
 
-import VnTable from 'components/VnTable/VnTable.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import VnConfirm from 'components/ui/VnConfirm.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
 
 defineProps({
     id: {
@@ -150,7 +150,7 @@ const deleteAcl = async ({ id }) => {
     />
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     New ACL: Nuevo ACL
     ACL removed: ACL eliminado

src/pages/Account/AccountAliasList.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { ref, computed } from 'vue';
-import VnTable from 'components/VnTable/VnTable.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
 
 const tableRef = ref();
@@ -74,9 +74,9 @@ const columns = computed(() => [
     />
 </template>
 
-<i18n>
-    es:
-        Id: Id
-        Alias: Alias
-        Description: Descripción
+<i18n lang="yml">
+es:
+    Id: Id
+    Alias: Alias
+    Description: Descripción
 </i18n>

src/pages/Account/AccountConnections.vue

@@ -2,13 +2,13 @@
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { toDateTimeFormat } from 'src/filters/date.js';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
-import { useVnConfirm } from 'composables/useVnConfirm';
+import { useVnConfirm } from 'src/composables/useVnConfirm';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -102,7 +102,7 @@ const killSession = async ({ userId, created }) => {
     </QPage>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Session killed: Sesión matada
     Session will be killed: Se va a matar la sesión

src/pages/Account/AccountCreate.vue

@@ -2,9 +2,9 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import FormModelPopup from 'components/FormModelPopup.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
+import FetchData from 'src/components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();

src/pages/Account/AccountFilter.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FetchData from 'components/FetchData.vue';
+import FetchData from 'src/components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelect from 'components/common/VnSelect.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();

src/pages/Account/AccountLdap.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FormModel from 'src/components/FormModel.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import { useArrayData } from 'src/composables/useArrayData';
@@ -156,7 +156,7 @@ onMounted(async () => await getInitialLdapConfig());
     </QPage>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     LDAP connection established!: ¡Conexión con LDAP establecida!
 </i18n>

src/pages/Account/AccountList.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { ref, computed } from 'vue';
-import VnTable from 'components/VnTable/VnTable.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import AccountFilter from './AccountFilter.vue';
@@ -130,9 +130,9 @@ const exprBuilder = (param, value) => {
     />
 </template>
 
-<i18n>
-    es:
-        Id: Id
-        Nickname: Nickname
-        Name: Nombre
+<i18n lang="yml">
+es:
+    Id: Id
+    Nickname: Nickname
+    Name: Nombre
 </i18n>

src/pages/Account/AccountSamba.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FormModel from 'src/components/FormModel.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import { useArrayData } from 'src/composables/useArrayData';
@@ -176,7 +176,7 @@ onMounted(async () => await getInitialSambaConfig());
     </QPage>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Samba connection established!: ¡Conexión con LDAP establecida!
 </i18n>

src/pages/Account/Acls/AclFilter.vue

@@ -2,9 +2,9 @@
 import { ref, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import FetchData from 'components/FetchData.vue';
+import FetchData from 'src/components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelect from 'components/common/VnSelect.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 import { useValidator } from 'src/composables/useValidator';

src/pages/Account/Acls/AclFormView.vue

@@ -4,7 +4,7 @@ import { ref, onBeforeMount, onMounted } from 'vue';
 
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import FormModelPopup from 'components/FormModelPopup.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
 
 import { useValidator } from 'src/composables/useValidator';
 import { useArrayData } from 'src/composables/useArrayData';

src/pages/Account/Alias/AliasCreateForm.vue

@@ -2,8 +2,8 @@
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import FormModelPopup from 'components/FormModelPopup.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 import { useArrayData } from 'src/composables/useArrayData';
@@ -51,7 +51,7 @@ const onDataSaved = ({ id }) => {
     </FormModelPopup>
 </template>
 
-<i18n>
-    es:
-        Create alias: Crear alias
+<i18n lang="yml">
+es:
+    Create alias: Crear alias
 </i18n>

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

@@ -1,7 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 
-import FormModel from 'components/FormModel.vue';
+import FormModel from 'src/components/FormModel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();

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

@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import VnCard from 'components/common/VnCard.vue';
+import VnCard from 'src/components/common/VnCard.vue';
 import AliasDescriptor from './AliasDescriptor.vue';
 const { t } = useI18n();
 </script>

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

@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 
-import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 
 import useCardDescription from 'src/composables/useCardDescription';
@@ -76,13 +76,13 @@ const removeAlias = () => {
     </CardDescriptor>
 </template>
 
-<i18n>
-    en:
-        accountRate: Claming rate
-    es:
-        accountRate: Ratio de reclamación
-        Delete: Eliminar
-        Alias will be removed: El alias será eliminado
-        Are you sure you want to continue?: ¿Seguro que quieres continuar?
-        Alias removed: Alias eliminado
+<i18n lang="yml">
+en:
+    accountRate: Claming rate
+es:
+    accountRate: Ratio de reclamación
+    Delete: Eliminar
+    Alias will be removed: El alias será eliminado
+    Are you sure you want to continue?: ¿Seguro que quieres continuar?
+    Alias removed: Alias eliminado
 </i18n>

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

@@ -3,7 +3,7 @@ import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import CardSummary from 'components/ui/CardSummary.vue';
+import CardSummary from 'src/components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 
 import { useArrayData } from 'src/composables/useArrayData';

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

@@ -3,10 +3,10 @@ import { useRoute } from 'vue-router';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 
-import { useVnConfirm } from 'composables/useVnConfirm';
-import { useArrayData } from 'composables/useArrayData';
+import { useVnConfirm } from 'src/composables/useVnConfirm';
+import { useArrayData } from 'src/composables/useArrayData';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 
@@ -46,9 +46,13 @@ const columns = computed(() => [
 ]);
 
 const deleteAlias = async (row) => {
-    await axios.delete(`${urlPath.value}/${row.id}`);
-    notify(t('User removed'), 'positive');
-    fetchAliases();
+    try {
+        await axios.delete(`${urlPath.value}/${row.id}`);
+        notify(t('User removed'), 'positive');
+        fetchAliases();
+    } catch (error) {
+        console.error(error);
+    }
 };
 
 watch(
@@ -109,7 +113,7 @@ const fetchAliases = () => paginateRef.value.fetch();
     </QPage>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     User will be removed from alias: El usuario será borrado del alias
     Are you sure you want to continue?: ¿Seguro que quieres continuar?

src/pages/Account/Card/AccountBasicData.vue

@@ -3,7 +3,7 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnSelectEnum from 'src/components/common/VnSelectEnum.vue';
-import FormModel from 'components/FormModel.vue';
+import FormModel from 'src/components/FormModel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import { ref, watch } from 'vue';
 

src/pages/Account/Card/AccountCard.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import VnCard from 'components/common/VnCard.vue';
+import VnCard from 'src/components/common/VnCard.vue';
 import AccountDescriptor from './AccountDescriptor.vue';
 
 const { t } = useI18n();

src/pages/Account/Card/AccountDescriptor.vue

@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
@@ -108,9 +108,9 @@ const hasAccount = ref(false);
     margin-top: 0;
 }
 </style>
-<i18n>
-    en:
-        accountRate: Claming rate
-    es:
-        accountRate: Ratio de reclamación
+<i18n lang="yml">
+en:
+    accountRate: Claming rate
+es:
+    accountRate: Ratio de reclamación
 </i18n>

src/pages/Account/Card/AccountDescriptorMenu.vue

@@ -2,7 +2,7 @@
 import axios from 'axios';
 import { computed, ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useVnConfirm } from 'composables/useVnConfirm';
+import { useVnConfirm } from 'src/composables/useVnConfirm';
 import { useRoute } from 'vue-router';
 import { useAcl } from 'src/composables/useAcl';
 import { useArrayData } from 'src/composables/useArrayData';

src/pages/Account/Card/AccountMailAlias.vue

@@ -3,11 +3,11 @@ import { computed, ref, watch, onMounted, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import AccountMailAliasCreateForm from './AccountMailAliasCreateForm.vue';
 
-import { useVnConfirm } from 'composables/useVnConfirm';
-import { useArrayData } from 'composables/useArrayData';
+import { useVnConfirm } from 'src/composables/useVnConfirm';
+import { useArrayData } from 'src/composables/useArrayData';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 
@@ -61,15 +61,23 @@ const fetchAccountExistence = async () => {
 };
 
 const deleteMailAlias = async (row) => {
-    await axios.delete(`${urlPath}/${row.id}`);
-    fetchMailAliases();
-    notify(t('Unsubscribed from alias!'), 'positive');
+    try {
+        await axios.delete(`${urlPath}/${row.id}`);
+        fetchMailAliases();
+        notify(t('Unsubscribed from alias!'), 'positive');
+    } catch (error) {
+        console.error(error);
+    }
 };
 
 const createMailAlias = async (mailAliasFormData) => {
-    await axios.post(urlPath, mailAliasFormData);
-    notify(t('Subscribed to alias!'), 'positive');
-    fetchMailAliases();
+    try {
+        await axios.post(urlPath, mailAliasFormData);
+        notify(t('Subscribed to alias!'), 'positive');
+        fetchMailAliases();
+    } catch (error) {
+        console.error(error);
+    }
 };
 
 const fetchMailAliases = async () => {
@@ -174,7 +182,7 @@ onMounted(async () => await getAccountData(false));
     </QPage>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Unsubscribed from alias!: ¡Desuscrito del alias!
     Subscribed to alias!: ¡Suscrito al alias!

src/pages/Account/Card/AccountMailAliasCreateForm.vue

@@ -4,9 +4,9 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
 import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import FormPopup from 'components/FormPopup.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import FormPopup from 'src/components/FormPopup.vue';
 
 const emit = defineEmits(['onSubmitCreateAlias']);