fix: enable Jenkins find changes

Reviewed-on: #1525
Reviewed-by: Juan Ferrer <juan@verdnatura.es>
Reviewed-by: Jon Elias <jon@verdnatura.es>

.eslintignore

@@ -1,6 +0,0 @@
-/dist
-/src-capacitor
-/src-cordova
-/.quasar
-/node_modules
-.eslintrc.js

.eslintrc.js

@@ -1,75 +0,0 @@
-export default {
-    // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
-    // This option interrupts the configuration hierarchy at this file
-    // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
-    root: true,
-
-    parserOptions: {
-        ecmaVersion: '2021', // Allows for the parsing of modern ECMAScript features
-    },
-
-    env: {
-        node: true,
-        browser: true,
-        'vue/setup-compiler-macros': true,
-    },
-
-    // Rules order is important, please avoid shuffling them
-    extends: [
-        // Base ESLint recommended rules
-        'eslint:recommended',
-
-        // Uncomment any of the lines below to choose desired strictness,
-        // but leave only one uncommented!
-        // See https://eslint.vuejs.org/rules/#available-rules
-        // '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)
-
-        // https://github.com/prettier/eslint-config-prettier#installation
-        // usage with Prettier, provided by 'eslint-config-prettier'.
-        'prettier',
-    ],
-
-    plugins: [
-        // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
-        // required to lint *.vue files
-        'vue',
-
-        // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
-        // Prettier has not been included as plugin to avoid performance impact
-        // add it as an extension for your IDE
-    ],
-
-    globals: {
-        ga: 'readonly', // Google Analytics
-        cordova: 'readonly',
-        __statics: 'readonly',
-        __QUASAR_SSR__: 'readonly',
-        __QUASAR_SSR_SERVER__: 'readonly',
-        __QUASAR_SSR_CLIENT__: 'readonly',
-        __QUASAR_SSR_PWA__: 'readonly',
-        process: 'readonly',
-        Capacitor: 'readonly',
-        chrome: 'readonly',
-    },
-
-    // add your custom rules here
-    rules: {
-        'prefer-promise-reject-errors': 'off',
-        'no-unused-vars': 'warn',
-        'vue/no-multiple-template-root': 'off',
-        // allow debugger during development only
-        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    },
-    overrides: [
-        {
-            files: ['test/cypress/**/*.*'],
-            extends: [
-                // Add Cypress-specific lint rules, globals and Cypress plugin
-                // See https://github.com/cypress-io/eslint-plugin-cypress#rules
-                'plugin:cypress/recommended',
-            ],
-        },
-    ],
-};

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+    "extends": ["plugin:cypress/recommended"]
+}

Jenkinsfile

@@ -125,8 +125,10 @@ pipeline {
                             sh "docker-compose ${env.COMPOSE_PARAMS} pull db"
                             sh "docker-compose ${env.COMPOSE_PARAMS} up -d"
 
+                            def modules = sh(script: 'node test/cypress/docker/find/find.js', returnStdout: true).trim()
+                            echo "E2E MODULES: ${modules}"
                             image.inside("--network ${env.COMPOSE_PROJECT}_default -e CI -e TZ --init") {
-                                sh 'sh test/cypress/cypressParallel.sh 1'
+                                sh "sh test/cypress/docker/cypressParallel.sh 1 '${modules}'"
                             }
                         }
                     }
@@ -183,3 +185,4 @@ pipeline {
         }
     }
 }
+

eslint.config.js

@@ -0,0 +1,87 @@
+import cypress from 'eslint-plugin-cypress';
+import eslint from 'eslint-plugin-import';
+import globals from 'globals';
+import js from '@eslint/js';
+import vue from 'eslint-plugin-vue';
+export default {
+    plugins: { vue, eslint, cypress },
+    languageOptions: {
+        globals: {
+            ...globals.node,
+            ...globals.browser,
+            ...vue.configs['vue3-strongly-recommended'].globals,
+            ...cypress.environments.globals.globals,
+            ga: 'readonly',
+            cordova: 'readonly',
+            __statics: 'readonly',
+            __QUASAR_SSR__: 'readonly',
+            __QUASAR_SSR_SERVER__: 'readonly',
+            __QUASAR_SSR_CLIENT__: 'readonly',
+            __QUASAR_SSR_PWA__: 'readonly',
+            process: 'readonly',
+            Capacitor: 'readonly',
+            chrome: 'readonly',
+        },
+
+        ecmaVersion: 2020,
+        sourceType: 'module',
+
+        parserOptions: {
+            parser: '@babel/eslint-parser',
+        },
+    },
+    rules: {
+        ...vue.rules['flat/strongly-recommended'],
+        ...js.configs.recommended.rules,
+        semi: 'off',
+        'generator-star-spacing': 'warn',
+        'arrow-parens': 'warn',
+        'no-var': 'error',
+        'prefer-const': 'error',
+        'prefer-template': 'warn',
+        'prefer-destructuring': 'off',
+        'prefer-spread': 'warn',
+        'prefer-rest-params': 'warn',
+        'prefer-object-spread': 'warn',
+        'prefer-arrow-callback': 'warn',
+        'prefer-numeric-literals': 'warn',
+        'prefer-exponentiation-operator': 'warn',
+        'prefer-regex-literals': 'warn',
+        'one-var': [
+            'error',
+            {
+                let: 'never',
+                const: 'never',
+            },
+        ],
+        'no-void': 'off',
+        'prefer-promise-reject-errors': 'error',
+        'multiline-ternary': 'warn',
+        'no-restricted-imports': 'warn',
+        'no-import-assign': 'warn',
+        'no-duplicate-imports': 'warn',
+        'no-useless-rename': 'warn',
+        'eslint/no-named-as-default': 'warn',
+        'eslint/no-named-as-default-member': 'warn',
+        'no-unsafe-optional-chaining': 'warn',
+        'no-undef': 'error',
+        'no-unused-vars': 'error',
+        'no-console': 'error',
+        'no-debugger': 'error',
+        'no-useless-escape': 'error',
+        'no-prototype-builtins': 'error',
+        'no-async-promise-executor': 'error',
+        'no-irregular-whitespace': 'error',
+        'no-constant-condition': 'error',
+        'no-unsafe-finally': 'error',
+        'no-extend-native': 'error',
+    },
+    ignores: [
+        '/dist',
+        '/src-capacitor',
+        '/src-cordova',
+        '/.quasar',
+        '/node_modules',
+        '.eslintrc.js',
+    ],
+};

package.json

@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "25.14.0",
+    "version": "25.16.0",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",
@@ -9,7 +9,8 @@
     "type": "module",
     "scripts": {
         "resetDatabase": "cd ../salix && gulp docker",
-        "lint": "eslint --ext .js,.vue ./",
+        "lint": "eslint \"**/*.{vue,js}\" ",
+        "lint:fix": "eslint \"**/*.{vue,js}\" --fix ",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
         "test:e2e": "cypress open",
         "test:e2e:ci": "npm run resetDatabase && cd ../salix-front && cypress run",
@@ -31,22 +32,27 @@
         "axios": "^1.4.0",
         "chromium": "^3.0.3",
         "croppie": "^2.6.5",
+        "es-module-lexer": "^1.6.0",
+        "fast-glob": "^3.3.3",
         "moment": "^2.30.1",
         "pinia": "^2.1.3",
         "quasar": "^2.17.7",
         "validator": "^13.9.0",
         "vue": "^3.5.13",
-        "vue-i18n": "^9.3.0",
+        "vue-i18n": "^9.4.0",
         "vue-router": "^4.2.5"
     },
     "devDependencies": {
         "@commitlint/cli": "^19.2.1",
         "@commitlint/config-conventional": "^19.1.0",
-        "@intlify/unplugin-vue-i18n": "^0.8.2",
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "^9.20.0",
+        "@intlify/unplugin-vue-i18n": "^4.0.0",
         "@pinia/testing": "^0.1.2",
         "@quasar/app-vite": "^2.0.8",
         "@quasar/quasar-app-extension-qcalendar": "^4.0.2",
         "@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
+        "@vue/compiler-sfc": "^3.5.13",
         "@vue/test-utils": "^2.4.4",
         "autoprefixer": "^10.4.14",
         "cypress": "^14.1.0",
@@ -54,7 +60,9 @@
         "eslint": "^9.18.0",
         "eslint-config-prettier": "^10.0.1",
         "eslint-plugin-cypress": "^4.1.0",
+        "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-vue": "^9.32.0",
+        "globals": "^16.0.0",
         "husky": "^8.0.0",
         "junit-merge": "^2.0.0",
         "mocha": "^11.1.0",

quasar.config.js

@@ -53,7 +53,7 @@ export default configure(function (/* ctx */) {
         build: {
             target: {
                 browser: ['es2022', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
-                node: 'node18',
+                node: 'node20',
             },
 
             vueRouterMode: 'hash', // available values: 'hash', 'history'
@@ -92,6 +92,7 @@ export default configure(function (/* ctx */) {
             vitePlugins: [
                 [
                     VueI18nPlugin({
+                        strictMessage: false,
                         runtimeOnly: false,
                         include: [
                             path.resolve(__dirname, './src/i18n/locale/**'),

src/boot/quasar.defaults.js

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

src/components/common/SendEmailDialog.vue

@@ -60,7 +60,7 @@ async function confirm() {
                     v-model="address"
                     is-outlined
                     autofocus
-                    data-cy="SendEmailNotifiactionDialogInput"
+                    data-cy="SendEmailNotificationDialogInput"
                 />
             </QCardSection>
             <QCardActions align="right">

src/components/common/VnLogFilter.vue

@@ -10,6 +10,7 @@ import { useFilterParams } from 'src/composables/useFilterParams';
 import FetchData from '../FetchData.vue';
 import { useValidator } from 'src/composables/useValidator';
 import { useCapitalize } from 'src/composables/useCapitalize';
+import VnAvatar from '../ui/VnAvatar.vue';
 
 const $props = defineProps({
     dataKey: {
@@ -99,7 +100,6 @@ function getActions() {
         :columns="columns"
         :redirect="false"
         :hiddenTags="['originFk', 'creationDate']"
-        :exprBuilder
         search-url="logs"
         :showTagChips="false"
     >

src/components/ui/CardSummary.vue

@@ -159,6 +159,7 @@ async function fetch() {
                 display: flex;
                 flex-direction: row;
                 margin-top: 2px;
+                align-items: start;
                 .label {
                     color: var(--vn-label-color);
                     width: 9em;
@@ -169,9 +170,15 @@ async function fetch() {
                     flex-grow: 0;
                     flex-shrink: 0;
                 }
+                &.ellipsis > .value {
+                    text-overflow: ellipsis;
+                    white-space: pre;
+                }
                 .value {
                     color: var(--vn-text-color);
                     overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
                 }
             }
             .header {
@@ -203,27 +210,21 @@ async function fetch() {
 }
 
 .vn-card-group {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 16px;
 }
 
 .vn-card-content {
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    white-space: nowrap;
     text-overflow: ellipsis;
     > div {
         max-height: 70px;
     }
 }
-
-@media (min-width: 1010px) {
-    .vn-card-group {
-        flex-direction: row;
-    }
-    .vn-card-content {
-        flex: 1;
-    }
-}
 </style>
 <style lang="scss" scoped>
 .summaryHeader .vn-label-value {

src/components/ui/VnDescriptor.vue

@@ -252,6 +252,10 @@ const toModule = computed(() => {
                 content: ':';
             }
         }
+        &.ellipsis > .value {
+            text-overflow: ellipsis;
+            white-space: pre;
+        }
         .value {
             color: var(--vn-text-color);
             font-size: 14px;

src/components/ui/VnLinkMail.vue

@@ -1,8 +1,11 @@
 <script setup>
+import { dashIfEmpty } from 'src/filters';
+
 defineProps({ email: { type: [String], default: null } });
 </script>
 <template>
     <QBtn
+        class="q-pr-xs"
         v-if="email"
         flat
         round
@@ -13,4 +16,5 @@ defineProps({ email: { type: [String], default: null } });
         :href="`mailto:${email}`"
         @click.stop
     />
+    <span>{{ dashIfEmpty(email) }}</span>
 </template>

src/components/ui/VnLinkPhone.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, reactive, useAttrs, onBeforeMount, capitalize } from 'vue';
 import axios from 'axios';
-import { parsePhone } from 'src/filters';
+import { dashIfEmpty, parsePhone } from 'src/filters';
 import useOpenURL from 'src/composables/useOpenURL';
 
 const props = defineProps({
@@ -12,38 +12,51 @@ const props = defineProps({
 
 const phone = ref(props.phoneNumber);
 const config = reactive({
-    sip: { icon: 'phone', href: `sip:${props.phoneNumber}` },
     'say-simple': {
         icon: 'vn:saysimple',
         url: null,
         channel: props.channel,
     },
+    sip: { icon: 'phone', href: `sip:${props.phoneNumber}` },
 });
-const type = Object.keys(config).find((key) => key in useAttrs()) || 'sip';
+
+const attrs = useAttrs();
+const types = Object.keys(config)
+    .filter((key) => key in attrs)
+    .sort();
+const activeTypes = types.length ? types : ['sip'];
 
 onBeforeMount(async () => {
     if (!phone.value) return;
-    let { channel } = config[type];
 
+    for (const type of activeTypes) {
         if (type === 'say-simple') {
+            let { channel } = config[type];
             const { url, defaultChannel } = (await axios.get('SaySimpleConfigs/findOne'))
                 .data;
             if (!channel) channel = defaultChannel;
 
-        phone.value = await parsePhone(props.phoneNumber, props.country?.toLowerCase());
-        config[
-            type
-        ].url = `${url}?customerIdentity=%2B${phone.value}&channelId=${channel}`;
+            phone.value = await parsePhone(
+                props.phoneNumber,
+                props.country?.toLowerCase(),
+            );
+            config[type].url =
+                `${url}?customerIdentity=%2B${phone.value}&channelId=${channel}`;
+        }
     }
 });
 
-function handleClick() {
+function handleClick(type) {
     if (config[type].url) useOpenURL(config[type].url);
     else if (config[type].href) window.location.href = config[type].href;
 }
 </script>
+
 <template>
+    <div class="flex items-center gap-2">
+        <template v-for="type in activeTypes">
             <QBtn
+                :key="type"
                 v-if="phone"
                 flat
                 round
@@ -51,11 +64,13 @@ function handleClick() {
                 size="sm"
                 color="primary"
                 padding="none"
-        @click.stop="handleClick"
+                @click.stop="() => handleClick(type)"
             >
                 <QTooltip>
                     {{ capitalize(type).replace('-', '') }}
                 </QTooltip>
-    </QBtn>
-    {{ phoneNumber }}
+            </QBtn></template
+        >
+        <span>{{ dashIfEmpty(phone) }}</span>
+    </div>
 </template>

src/composables/useAcl.js

@@ -30,9 +30,16 @@ export function useAcl() {
         return false;
     }
 
+    function hasAcl(model, prop, accessType) {
+        const modelAcl = state.getAcls().value[model];
+        const propAcl = modelAcl?.[prop] || modelAcl?.['*'];
+        return !!(propAcl?.[accessType] || propAcl?.['*']);
+    }
+
     return {
         fetch,
         hasAny,
         state,
+        hasAcl,
     };
 }

src/composables/useRole.js

@@ -13,7 +13,7 @@ export function useRole() {
             name: data.user.name,
             nickname: data.user.nickname,
             lang: data.user.lang || 'es',
-            departmentFk: data.user.worker.department.departmentFk,
+            departmentFk: data.user?.worker?.department?.departmentFk,
         };
         state.setUser(userData);
         state.setRoles(roles);

src/pages/Account/Card/AccountDescriptorMenu.vue

@@ -100,12 +100,8 @@ const onChangePass = (oldPass) => {
 };
 
 onMounted(() => {
-    hasitManagementAccess.value = useAcl().hasAny([
-        { model: 'VnUser', props: 'higherPrivileges', accessType: 'WRITE' },
-    ]);
-    hasSysadminAccess.value = useAcl().hasAny([
-        { model: 'VnUser', props: 'adminUser', accessType: 'WRITE' },
-    ]);
+    hasitManagementAccess.value = useAcl().hasAcl('VnUser', 'higherPrivileges', 'WRITE');
+    hasSysadminAccess.value = useAcl().hasAcl('VnUser', 'adminUser', 'WRITE');
 });
 </script>
 <template>
@@ -227,7 +223,7 @@ onMounted(() => {
         <QItemSection>{{ t('account.card.actions.deactivateUser.name') }}</QItemSection>
     </QItem>
     <QItem
-        v-if="useAcl().hasAny([{ model: 'VnRole', props: '*', accessType: 'WRITE' }])"
+        v-if="useAcl().hasAcl('VnRole', '*', 'WRITE')"
         v-ripple
         clickable
         @click="showSyncDialog = true"

src/pages/Customer/Card/CustomerBalance.vue

@@ -25,7 +25,7 @@ import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.v
 const { openConfirmationModal } = useVnConfirm();
 const { sendEmail, openReport } = usePrintService();
 const { t } = useI18n();
-const { hasAny } = useAcl();
+const { hasAcl } = useAcl();
 
 const quasar = useQuasar();
 const route = useRoute();
@@ -276,9 +276,7 @@ const showBalancePdf = ({ id }) => {
             >
                 <VnInput
                     v-model="scope.value"
-                    :disable="
-                        !hasAny([{ model: 'Receipt', props: '*', accessType: 'WRITE' }])
-                    "
+                    :disable="!hasAcl('Receipt', '*', 'WRITE')"
                     @keypress.enter="scope.set"
                     autofocus
                 />

src/pages/Customer/Card/CustomerSummary.vue

@@ -3,7 +3,13 @@ import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import { toCurrency, toPercentage, toDate, dashOrCurrency } from 'src/filters';
+import {
+    toCurrency,
+    toPercentage,
+    toDate,
+    dashOrCurrency,
+    dashIfEmpty,
+} from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
@@ -287,10 +293,14 @@ const sumRisk = ({ clientRisks }) => {
                 <VnLv
                     v-if="entity.creditInsurance"
                     :label="t('customer.summary.securedCredit')"
-                    :value="toCurrency(entity.creditInsurance)"
                     :info="t('customer.summary.securedCreditInfo')"
-                />
-
+                >
+                    <template #value>
+                        {{ toCurrency(entity.creditInsurance) }}({{
+                            dashIfEmpty(entity.classifications[0]?.insurances[0]?.grade)
+                        }})
+                    </template></VnLv
+                >
                 <VnLv
                     :label="t('customer.summary.balance')"
                     :value="toCurrency(sumRisk(entity)) || toCurrency(0)"

src/pages/Entry/Card/EntrySummary.vue

@@ -70,8 +70,8 @@ onMounted(async () => {
                     :url="`#/entry/${entityId}/basic-data`"
                     :text="t('globals.summary.basicData')"
                 />
-                <div class="card-group">
-                    <div class="card-content">
+                <div class="vn-card-group">
+                    <div class="vn-card-content">
                         <VnLv
                             :label="t('entry.summary.commission')"
                             :value="entry?.commission"
@@ -93,7 +93,7 @@ onMounted(async () => {
                             :value="entry?.invoiceNumber"
                         />
                     </div>
-                    <div class="card-content">
+                    <div class="vn-card-content">
                         <VnCheckbox
                             :label="t('entry.list.tableVisibleColumns.isOrdered')"
                             v-model="entry.isOrdered"
@@ -130,8 +130,8 @@ onMounted(async () => {
                     :url="`#/travel/${entry.travel.id}/summary`"
                     :text="t('Travel')"
                 />
-                <div class="card-group">
-                    <div class="card-content">
+                <div class="vn-card-group">
+                    <div class="vn-card-content">
                         <VnLv :label="t('entry.summary.travelReference')">
                             <template #value>
                                 <span class="link">
@@ -161,7 +161,7 @@ onMounted(async () => {
                             :value="entry.travel.warehouseIn?.name"
                         />
                     </div>
-                    <div class="card-content">
+                    <div class="vn-card-content">
                         <VnLv :label="t('travel.awbFk')" :value="entry.travel.awbFk" />
                         <VnCheckbox
                             :label="t('entry.summary.travelDelivered')"
@@ -193,31 +193,6 @@ onMounted(async () => {
         </template>
     </CardSummary>
 </template>
-<style lang="scss" scoped>
-.card-group {
-    display: flex;
-    flex-direction: column;
-}
-
-.card-content {
-    display: flex;
-    flex-direction: column;
-    text-overflow: ellipsis;
-    > div {
-        max-height: 24px;
-    }
-}
-
-@media (min-width: 1010px) {
-    .card-group {
-        flex-direction: row;
-    }
-    .card-content {
-        flex: 1;
-        margin-right: 16px;
-    }
-}
-</style>
 <i18n>
 es:
     Travel: Envío

src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue

@@ -22,7 +22,7 @@ const routes = reactive({
     getSupplier: (id) => {
         return { name: 'SupplierCard', params: { id } };
     },
-    getTickets: (id) => {
+    getInvoices: (id) => {
         return {
             name: 'InvoiceInList',
             query: {
@@ -131,11 +131,11 @@ async function setInvoiceCorrection(id) {
                 </QBtn>
                 <QBtn
                     size="md"
-                    icon="vn:ticket"
+                    icon="vn:invoice-in"
                     color="primary"
-                    :to="routes.getTickets(entity.supplierFk)"
+                    :to="routes.getInvoices(entity.supplierFk)"
                 >
-                    <QTooltip>{{ t('globals.ticketList') }}</QTooltip>
+                    <QTooltip>{{ t('invoiceIn.descriptor.invoices') }}</QTooltip>
                 </QBtn>
                 <QBtn
                     v-if="

src/pages/InvoiceIn/locale/en.yml

@@ -15,6 +15,7 @@ invoiceIn:
         amount: Amount
     descriptor:
         ticketList: Ticket list
+        invoices: Supplier invoices
     descriptorMenu:
         book: Book
         unbook: Unbook

src/pages/InvoiceIn/locale/es.yml

@@ -14,7 +14,7 @@ invoiceIn:
         awb: AWB
         amount: Importe
     descriptor:
-        ticketList: Listado de tickets
+        invoices: Facturas de proveedor
     descriptorMenu:
         book: Contabilizar
         unbook: Descontabilizar

src/pages/Route/Roadmap/RoadmapSummary.vue

@@ -112,12 +112,9 @@ const filter = {
                         :label="t('Trailer Plate')"
                         :value="dashIfEmpty(entity?.trailerPlate)"
                     />
-                    <VnLv :label="t('Phone')" :value="dashIfEmpty(entity?.phone)">
+                    <VnLv :label="t('Phone')">
                         <template #value>
-                            <span>
-                                {{ dashIfEmpty(entity?.phone) }}
                             <VnLinkPhone :phone-number="entity?.phone" />
-                            </span>
                         </template>
                     </VnLv>
                     <VnLv

src/pages/Route/RouteExtendedList.vue

@@ -46,7 +46,6 @@ const columns = computed(() => [
         },
         isId: true,
         columnFilter: false,
-        width: '25px',
     },
     {
         name: 'workerFk',
@@ -142,7 +141,6 @@ const columns = computed(() => [
         label: 'm3',
         cardVisible: true,
         columnClass: 'shrink',
-        width: '50px',
     },
     {
         name: 'started',
@@ -150,7 +148,6 @@ const columns = computed(() => [
         component: 'time',
         columnFilter: false,
         format: ({ started }) => toHour(started),
-        width: '50px',
     },
     {
         name: 'finished',
@@ -158,7 +155,6 @@ const columns = computed(() => [
         component: 'time',
         columnFilter: false,
         format: ({ finished }) => toHour(finished),
-        width: '50px',
     },
     {
         align: 'right',

src/pages/Route/RouteList.vue

@@ -46,7 +46,6 @@ const columns = computed(() => [
             condition: () => true,
         },
         columnFilter: false,
-        width: '25px',
     },
     {
         align: 'left',
@@ -57,7 +56,6 @@ const columns = computed(() => [
         cardVisible: true,
         format: (row, dashIfEmpty) => dashIfEmpty(row.travelRef),
         columnFilter: false,
-        width: '100px',
     },
     {
         label: t('globals.agency'),
@@ -100,7 +98,6 @@ const columns = computed(() => [
         cardVisible: true,
         columnFilter: false,
         format: ({ started }) => toHour(started),
-        width: '50px',
     },
     {
         align: 'center',
@@ -109,7 +106,6 @@ const columns = computed(() => [
         cardVisible: true,
         columnFilter: false,
         format: ({ finished }) => toHour(finished),
-        width: '50px',
     },
     {
         align: 'left',

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

@@ -25,9 +25,7 @@ const { validate } = useValidator();
 const { notify } = useNotify();
 const router = useRouter();
 const { t } = useI18n();
-const canEditZone = useAcl().hasAny([
-    { model: 'Ticket', props: 'editZone', accessType: 'WRITE' },
-]);
+const canEditZone = useAcl().hasAcl('Ticket', 'editZone', 'WRITE');
 
 const agencyFetchRef = ref();
 const warehousesOptions = ref([]);

src/pages/Ticket/Card/TicketSaleMoreActions.vue

@@ -55,9 +55,7 @@ const isClaimable = computed(() => {
     if (ticket.value) {
         const landedPlusWeek = new Date(ticket.value.landed);
         landedPlusWeek.setDate(landedPlusWeek.getDate() + 7);
-        const createAfterDeadline = acl.hasAny([
-            { model: 'Claim', props: 'createAfterDeadline', accessType: 'WRITE' },
-        ]);
+        const createAfterDeadline = acl.hasAcl('Claim', 'createAfterDeadline', 'WRITE');
         return landedPlusWeek >= Date.vnNew() || createAfterDeadline;
     }
     return false;

src/pages/Ticket/TicketList.vue

@@ -113,7 +113,7 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: 'shipped',
+        name: 'shippedDate',
         cardVisible: true,
         label: t('ticketList.shipped'),
         columnFilter: {
@@ -123,7 +123,7 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: 'shipped',
+        name: 'shippedHour',
         component: 'time',
         columnFilter: false,
         label: t('ticketList.hour'),

src/pages/Ticket/locale/en.yml

@@ -205,6 +205,7 @@ ticketList:
     toLines: Go to lines
     addressNickname: Address nickname
     ref: Reference
+    hour: Hour
     rounding: Rounding
     noVerifiedData: No verified data
     purchaseRequest: Purchase request

src/pages/Travel/Card/TravelDescriptorMenuItems.vue

@@ -37,7 +37,7 @@ const cloneTravelWithEntries = async () => {
     router.push({ name: 'TravelBasicData', params: { id: data.id } });
 };
 
-const canDelete = computed(() => useAcl().hasAny('Travel', '*', 'WRITE'));
+const canDelete = computed(() => useAcl().hasAcl('Travel', '*', 'WRITE'));
 
 const openDeleteEntryDialog = (id) => {
     quasar

src/pages/Worker/Card/WorkerCalendar.vue

@@ -18,9 +18,7 @@ const router = useRouter();
 const route = useRoute();
 const { t } = useI18n();
 const acl = useAcl();
-const canSeeNotes = computed(() =>
-    acl.hasAny([{ model: 'Worker', props: '__get__business', accessType: 'READ' }]),
-);
+const canSeeNotes = computed(() => acl.hasAcl('Worker', '__get__business', 'READ'));
 const workerIsFreelance = ref();
 const WorkerFreelanceRef = ref();
 const workerCalendarFilterRef = ref(null);

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -116,7 +116,7 @@ const handlePhotoUpdated = (evt = false) => {
         <template #body="{ entity }">
             <VnLv :label="t('globals.user')" :value="entity.user?.name" />
             <VnLv
-                class="ellipsis-text"
+                class="ellipsis"
                 :label="t('globals.params.email')"
                 :value="entity.user?.emailUser?.email"
                 copy
@@ -128,15 +128,13 @@ const handlePhotoUpdated = (evt = false) => {
                 </template>
             </VnLv>
 
-            <VnLv :value="entity.phone">
-                <template #label>
-                    {{ t('globals.phone') }}
+            <VnLv :label="t('globals.phone')">
+                <template #value>
                     <VnLinkPhone :phone-number="entity.phone" />
                 </template>
             </VnLv>
-            <VnLv :value="entity?.sip?.extension">
-                <template #label>
-                    {{ t('worker.summary.sipExtension') }}
+            <VnLv :label="t('worker.summary.sipExtension')">
+                <template #value>
                     <VnLinkPhone :phone-number="entity?.sip?.extension" />
                 </template>
             </VnLv>

src/pages/Worker/Card/WorkerLocker.vue

@@ -9,7 +9,7 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import FetchData from 'components/FetchData.vue';
 
-const { hasAny } = useAcl();
+const { hasAcl } = useAcl();
 const { t } = useI18n();
 const fetchData = ref();
 const originaLockerId = ref();
@@ -58,11 +58,7 @@ const init = async (data) => {
                 option-label="code"
                 option-value="id"
                 hide-selected
-                :readonly="
-                    !hasAny([
-                        { model: 'Worker', props: '__get__locker', accessType: 'READ' },
-                    ])
-                "
+                :readonly="!hasAcl('Worker', '__get__locker', 'READ')"
             />
         </template>
     </FormModel>

src/pages/Worker/Card/WorkerSummary.vue

@@ -73,28 +73,25 @@ onBeforeMount(async () => {
                                 />
                             </template>
                         </VnLv>
-                        <VnLv :value="worker.mobileExtension">
-                            <template #label>
-                                {{ t('worker.summary.phoneExtension') }}
+                        <VnLv :label="t('worker.summary.phoneExtension')">
+                            <template #value>
                                 <VnLinkPhone :phone-number="worker.mobileExtension" />
                             </template>
                         </VnLv>
-                        <VnLv :value="worker.phone">
-                            <template #label>
-                                {{ t('worker.summary.entPhone') }}
+                        <VnLv :label="t('worker.summary.entPhone')">
+                            <template #value>
                                 <VnLinkPhone :phone-number="worker.phone" />
                             </template>
                         </VnLv>
-                        <VnLv :value="advancedSummary?.client?.phone">
-                            <template #label>
-                                {{ t('worker.summary.personalPhone') }}
+                        <VnLv :label="t('worker.summary.personalPhone')">
+                            <template #value>
                                 <VnLinkPhone
                                     :phone-number="advancedSummary?.client?.phone"
                                 />
                             </template>
                         </VnLv>
                     </div>
-                    <div class="vn-card-content">
+                    <div class="vn-card-content" v-if="advancedSummary">
                         <VnLv
                             :label="t('worker.summary.fiDueDate')"
                             :value="toDate(advancedSummary.fiDueDate)"
@@ -135,6 +132,7 @@ onBeforeMount(async () => {
                 <VnTitle :text="t('worker.summary.userData')" />
                 <VnLv :label="t('globals.name')" :value="worker?.user?.nickname" />
                 <VnLv
+                    class="ellipsis"
                     :label="t('globals.params.email')"
                     :value="worker.user?.emailUser?.email"
                     copy
@@ -147,9 +145,8 @@ onBeforeMount(async () => {
                         </span>
                     </template>
                 </VnLv>
-                <VnLv :value="worker?.sip?.extension">
-                    <template #label>
-                        {{ t('worker.summary.sipExtension') }}
+                <VnLv :label="t('worker.summary.sipExtension')">
+                    <template #value>
                         <VnLinkPhone :phone-number="worker?.sip?.extension" />
                     </template>
                 </VnLv>

src/pages/Worker/Card/WorkerTimeControl.vue

@@ -68,13 +68,9 @@ const arrayData = useArrayData('Worker');
 const acl = useAcl();
 const selectedDateYear = computed(() => moment(selectedDate.value).isoWeekYear());
 const worker = computed(() => arrayData.store?.data);
-const canSend = computed(() =>
-    acl.hasAny([{ model: 'WorkerTimeControl', props: 'sendMail', accessType: 'WRITE' }]),
-);
+const canSend = computed(() => acl.hasAcl('WorkerTimeControl', 'sendMail', 'WRITE'));
 const canUpdate = computed(() =>
-    acl.hasAny([
-        { model: 'WorkerTimeControl', props: 'updateMailState', accessType: 'WRITE' },
-    ]),
+    acl.hasAcl('WorkerTimeControl', 'updateMailState', 'WRITE'),
 );
 const isHimself = computed(() => user.value.id === Number(route.params.id));
 

src/pages/Zone/Card/ZoneSummary.vue

@@ -75,13 +75,13 @@ onMounted(async () => {
         <template #body="{ entity: zone }">
             <QCard class="vn-one">
                 <VnTitle :url="zoneUrl + `basic-data`" :text="t('summary.basicData')" />
-                <div class="card-group">
-                    <div class="card-content">
+                <div class="vn-card-group">
+                    <div class="vn-card-content">
                         <VnLv :label="t('list.agency')" :value="zone.agencyMode?.name" />
                         <VnLv :label="t('list.price')" :value="toCurrency(zone.price)" />
                         <VnLv :label="t('zone.bonus')" :value="toCurrency(zone.bonus)" />
                     </div>
-                    <div class="card-content">
+                    <div class="vn-card-content">
                         <VnLv
                             :label="t('summary.closeHour')"
                             :value="toTimeFormat(zone.hour)"
@@ -98,7 +98,7 @@ onMounted(async () => {
                     </div>
                 </div>
             </QCard>
-            <QCard class="vn-one">
+            <QCard class="vn-max">
                 <VnTitle :url="zoneUrl + `warehouses`" :text="t('list.warehouse')" />
                 <QTable
                     :columns="columns"
@@ -109,15 +109,3 @@ onMounted(async () => {
         </template>
     </CardSummary>
 </template>
-
-<style lang="scss" scoped>
-.card-group {
-    display: flex;
-    flex-direction: column;
-}
-
-.card-content {
-    display: flex;
-    flex-direction: column;
-}
-</style>

test/cypress/cypressParallel.sh

@@ -1,15 +0,0 @@
-#!/bin/bash
-
-find 'test/cypress/integration' \
-    -mindepth 1 \
-    -maxdepth 1 \
-    -type d | \
-xargs -P "$1" -I {} sh -c '
-    echo "🔷 {}" &&
-    xvfb-run -a cypress run \
-        --headless \
-        --spec "{}" \
-        --quiet \
-        > /dev/null
-'
-wait

test/cypress/docker/cypressParallel.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+echo $2
+if [ -z "$2" ]; then
+    TEST_DIRS=$(find 'test/cypress/integration' -mindepth 1 -maxdepth 1 -type d)
+else
+    TEST_DIRS=$2
+fi
+
+echo $TEST_DIRS x$1
+
+echo "$TEST_DIRS" | xargs -P "$1" -I {} sh -c '
+    echo "🔷 {}" &&
+    xvfb-run -a cypress run \
+        --headless \
+        --spec "{}" \
+        --quiet \
+        > /dev/null
+'
+wait

test/cypress/docker/find/find-imports.js

@@ -0,0 +1,52 @@
+import fs from 'fs';
+import { parse } from 'es-module-lexer';
+import { parse as vueParse } from '@vue/compiler-sfc';
+import glob from 'fast-glob';
+import { resolveImportPath, toRelative } from './resolve-import-path.js';
+
+const ROUTER_MODULES = 'src/router/modules/';
+const files = await glob(['src/**/*.{vue,js,ts}'], { absolute: true });
+const vueFiles = new Map();
+
+export async function findImports(targetFile, visited = new Set(), identation = '') {
+    if (visited.has(targetFile)) return []; // Avoid infinite loops
+    visited.add(targetFile);
+
+    const usageFiles = files
+        .filter((file) => {
+            let content = fs.readFileSync(file, 'utf8');
+            if (file.endsWith('.vue')) {
+                if (vueFiles.has(file)) {
+                    content = vueFiles.get(file);
+                } else {
+                    const { descriptor } = vueParse(content);
+                    content = descriptor?.scriptSetup?.content ?? '';
+                    vueFiles.set(file, content);
+                }
+            }
+            if (!content.trim()) return false;
+
+            return parse(content)[0].some((imp) => {
+                if (!imp?.n) return false;
+                return resolveImportPath(imp.n, targetFile) === targetFile;
+            });
+        })
+        .map((file) => toRelative(file));
+
+    let fullTree = [...usageFiles];
+    for (const file of usageFiles) {
+        if (file.startsWith(ROUTER_MODULES)) {
+            continue;
+        }
+        fullTree = [
+            ...fullTree,
+            ...(await findImports(file, visited, identation + '  ')),
+        ];
+    }
+
+    return getUniques(fullTree); // Remove duplicates
+}
+
+function getUniques(array) {
+    return Array.from(new Set(array));
+}

test/cypress/docker/find/find.js

@@ -0,0 +1,36 @@
+import { execSync } from 'child_process';
+import { findImports } from './find-imports.js';
+import { getModules } from './get-modules.js';
+const E2E_PATH = 'test/cypress/integration';
+const FINDED_PATHS = ['src', E2E_PATH];
+
+function getGitDiff(options) {
+    const TARGET_BRANCH = options[2] || 'dev';
+    const diff = execSync(`git diff --name-only origin/${TARGET_BRANCH}`, {
+        encoding: 'utf-8',
+    });
+    return diff.split('\n');
+}
+
+async function getChangedModules() {
+    let changedModules = new Set();
+    const changes = getGitDiff(process.argv);
+    for (const change of changes) {
+        if (!change) continue;
+        if (!FINDED_PATHS.some((prefix) => change.startsWith(prefix))) return '';
+        const changedArray = [
+            ...changedModules,
+            ...new Set(getModules(await findImports(change))),
+        ];
+        if (change.startsWith(E2E_PATH)) changedArray.push(change);
+        changedModules = new Set(changedArray);
+    }
+    return [...changedModules].join('\n');
+}
+
+getChangedModules()
+    .then((modules) => console.log(modules)) // is return
+    .catch((e) => {
+        console.error(e);
+        process.exit(1);
+    });

test/cypress/docker/find/get-modules.js

@@ -0,0 +1,13 @@
+export function getModules(files) {
+    const CYPRESS_PREFIX = 'test/cypress/integration/';
+    const CYPRESS_SUFIX = '/**/*.spec.js';
+    const modules = [];
+    for (const file of files) {
+        if (file.startsWith('src/page')) {
+            modules.push(
+                CYPRESS_PREFIX + file.split('/')[2].toLowerCase() + CYPRESS_SUFIX,
+            );
+        }
+    }
+    return modules;
+}

test/cypress/docker/find/resolve-import-path.js

@@ -0,0 +1,34 @@
+import fs from 'fs';
+import path from 'path';
+const rootDir = process.cwd();
+const config = JSON.parse(fs.readFileSync('jsconfig.json', 'utf-8'));
+const { paths, baseUrl } = config.compilerOptions;
+
+function resolveImportPath(importPath, fileBase) {
+    if (!importPath) return null;
+    importPath = jsConfigPaths(importPath);
+    const fileDir = path.dirname(fileBase);
+    if (importPath.startsWith('.') || importPath.startsWith('/')) {
+        return path.relative(rootDir, path.resolve(fileDir, importPath));
+    }
+
+    return importPath;
+}
+function toRelative(file) {
+    return path.relative(rootDir, file);
+}
+
+function jsConfigPaths(importPath) {
+    for (const [aliasPattern, [target]] of Object.entries(paths)) {
+        const alias = aliasPattern.replace('/*', '');
+        const targetBase = target.replace('/*', '');
+
+        if (importPath.startsWith(alias)) {
+            const rest = importPath.slice(alias.length);
+            return path.resolve(baseUrl, targetBase + rest);
+        }
+    }
+    return importPath;
+}
+
+export { resolveImportPath, toRelative };

test/cypress/docker/run.sh

@@ -35,6 +35,8 @@ docker build -f ./docs/Dockerfile.dev -t lilium-dev .
 # END IMAGES
 
 docker-compose -p e2e --project-directory . -f test/cypress/docker-compose.yml up -d
+files=$(node test/cypress/docker/find/find.js)
+echo $files
 
 docker run -it --rm \
     -v "$(pwd)":/app \
@@ -42,6 +44,6 @@ docker run -it --rm \
     -e CI \
     -e TZ \
     lilium-dev \
-    bash -c 'sh test/cypress/cypressParallel.sh 2'
+    bash -c "sh test/cypress/docker/cypressParallel.sh 2 '$files'"
 
 cleanup

test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js

@@ -13,7 +13,7 @@ describe('InvoiceInDescriptor', () => {
             cy.validateCheckbox(checkbox, false);
         });
 
-        it.skip('should delete the invoice properly', () => {
+        it('should delete the invoice properly', () => {
             cy.visit('/#/invoice-in/2/summary');
             cy.selectDescriptorOption(2);
             cy.clickConfirm();
@@ -40,7 +40,7 @@ describe('InvoiceInDescriptor', () => {
             cy.visit('/#/invoice-in/6/summary');
             cy.selectDescriptorOption(5);
 
-            cy.dataCy('SendEmailNotifiactionDialogInput_input').type(
+            cy.dataCy('SendEmailNotificationDialogInput_input').type(
                 '{selectall}jorgito@gmail.mx',
             );
             cy.clickConfirm();

test/cypress/integration/invoiceOut/invoiceOutSummary.spec.js

@@ -37,7 +37,7 @@ describe('InvoiceOut summary', () => {
         });
     });
 
-    it('should transfer the invoice ', () => {
+    it.skip('should transfer the invoice ', () => {
         cy.typeSearchbar('T1111111{enter}');
         cy.dataCy('descriptor-more-opts').click();
         cy.get(selectMenuOption(1)).click();
@@ -50,7 +50,7 @@ describe('InvoiceOut summary', () => {
         cy.dataCy('descriptor-more-opts').click();
         cy.get(selectMenuOption(3)).click();
         cy.dataCy('InvoiceOutDescriptorMenuSendPdfOption').click();
-        cy.dataCy('SendEmailNotifiactionDialogInput').should('be.visible');
+        cy.dataCy('SendEmailNotificationDialogInput').should('be.visible');
         cy.get(confirmSend).click();
         cy.checkNotification('Notification sent');
     });
@@ -59,7 +59,7 @@ describe('InvoiceOut summary', () => {
         cy.dataCy('descriptor-more-opts').click();
         cy.get(selectMenuOption(3)).click();
         cy.dataCy('InvoiceOutDescriptorMenuSendCsvOption').click();
-        cy.dataCy('SendEmailNotifiactionDialogInput').should('be.visible');
+        cy.dataCy('SendEmailNotificationDialogInput').should('be.visible');
         cy.get(confirmSend).click();
         cy.checkNotification('Notification sent');
     });

vitest.config.js

@@ -5,12 +5,11 @@ import jsconfigPaths from 'vite-jsconfig-paths';
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 import path from 'path';
 
-let reporters,
-    outputFile;
+let reporters, outputFile;
 
 if (process.env.CI) {
     reporters = ['junit', 'default'];
-    outputFile = {junit: './junit/vitest.xml'};
+    outputFile = { junit: './junit/vitest.xml' };
 } else {
     reporters = 'default';
 }
@@ -28,6 +27,9 @@ export default defineConfig({
             'src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
         ],
     },
+    server: {
+        hmr: { overlay: false },
+    },
     plugins: [
         vue({
             template: {
@@ -39,8 +41,11 @@ export default defineConfig({
             sassVariables: 'src/quasar-variables.scss',
         }),
         VueI18nPlugin({
+            strictMessage: false,
+
+            runtimeOnly: false,
             include: [
-                path.resolve(__dirname, 'src/i18n/**'),
+                path.resolve(__dirname, 'src/i18n/locale/**'),
                 path.resolve(__dirname, 'src/pages/**/locale/**'),
             ],
         }),