Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into test

jest.config.js

@@ -18,7 +18,7 @@ module.exports = {
     // watch: true,
     reporters: ['default', 'jest-junit'],
     collectCoverage: false,
-    coverageDirectory: '<rootDir>/test/jest/coverage',
+    coverageDirectory: '<rootDir>/tests/jest/coverage',
     collectCoverageFrom: ['<rootDir>/src/**/*.vue', '<rootDir>/src/**/*.js', '<rootDir>/src/**/*.jsx'],
     // Needed in JS codebases too because of feature flags
     coveragePathIgnorePatterns: ['/node_modules/', '.d.ts$'],

package-lock.json

@@ -18,6 +18,7 @@
             },
             "devDependencies": {
                 "@babel/eslint-parser": "^7.13.14",
+                "@intlify/vue-i18n-loader": "^4.1.0",
                 "@quasar/app-webpack": "^3.0.0",
                 "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.0.1",
                 "@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-alpha.9",
@@ -2013,6 +2014,39 @@
             "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
             "dev": true
         },
+        "node_modules/@intlify/bundle-utils": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-2.2.1.tgz",
+            "integrity": "sha512-8n8zhYEKypS+KP22KUAC6BnQifJDDWUGcn3OVPqsThqMMucU22MShGvOuiKqQ4AeT7XQ5O4pudlJmxv3L91JrQ==",
+            "dev": true,
+            "dependencies": {
+                "@intlify/message-compiler": "beta",
+                "@intlify/shared": "beta",
+                "jsonc-eslint-parser": "^1.0.1",
+                "source-map": "^0.6.1",
+                "yaml-eslint-parser": "^0.3.2"
+            },
+            "engines": {
+                "node": ">= 12"
+            },
+            "peerDependenciesMeta": {
+                "petite-vue-i18n": {
+                    "optional": true
+                },
+                "vue-i18n": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@intlify/bundle-utils/node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/@intlify/core-base": {
             "version": "9.1.9",
             "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.1.9.tgz",
@@ -2103,6 +2137,35 @@
                 "node": ">= 10"
             }
         },
+        "node_modules/@intlify/vue-i18n-loader": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@intlify/vue-i18n-loader/-/vue-i18n-loader-4.1.0.tgz",
+            "integrity": "sha512-Khf0CXi2rVjL4dWNk5WemoRSs20t7C7R+WhDrcpIIhAxJ2VQ7bjW4mLEmvvC7dc4uFyXI4q+WYaoFTVFzo90aA==",
+            "dev": true,
+            "dependencies": {
+                "@intlify/bundle-utils": "next",
+                "@intlify/shared": "beta",
+                "js-yaml": "^4.1.0",
+                "json5": "^2.2.0",
+                "loader-utils": "^2.0.0"
+            },
+            "engines": {
+                "node": ">= 12"
+            },
+            "peerDependencies": {
+                "petite-vue-i18n": "^9.0.0",
+                "vue": "^3.0.0",
+                "vue-i18n": "^9.0.0"
+            },
+            "peerDependenciesMeta": {
+                "petite-vue-i18n": {
+                    "optional": true
+                },
+                "vue-i18n": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@istanbuljs/load-nyc-config": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -12819,6 +12882,72 @@
                 "node": ">=6"
             }
         },
+        "node_modules/jsonc-eslint-parser": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/jsonc-eslint-parser/-/jsonc-eslint-parser-1.4.1.tgz",
+            "integrity": "sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==",
+            "dev": true,
+            "dependencies": {
+                "acorn": "^7.4.1",
+                "eslint-utils": "^2.1.0",
+                "eslint-visitor-keys": "^1.3.0",
+                "espree": "^6.0.0",
+                "semver": "^6.3.0"
+            },
+            "engines": {
+                "node": ">=8.10.0"
+            }
+        },
+        "node_modules/jsonc-eslint-parser/node_modules/acorn": {
+            "version": "7.4.1",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+            "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+            "dev": true,
+            "bin": {
+                "acorn": "bin/acorn"
+            },
+            "engines": {
+                "node": ">=0.4.0"
+            }
+        },
+        "node_modules/jsonc-eslint-parser/node_modules/eslint-utils": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
+            "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+            "dev": true,
+            "dependencies": {
+                "eslint-visitor-keys": "^1.1.0"
+            },
+            "engines": {
+                "node": ">=6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/mysticatea"
+            }
+        },
+        "node_modules/jsonc-eslint-parser/node_modules/eslint-visitor-keys": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+            "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/jsonc-eslint-parser/node_modules/espree": {
+            "version": "6.2.1",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
+            "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
+            "dev": true,
+            "dependencies": {
+                "acorn": "^7.1.1",
+                "acorn-jsx": "^5.2.0",
+                "eslint-visitor-keys": "^1.1.0"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
         "node_modules/jsonfile": {
             "version": "6.1.0",
             "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -19772,6 +19901,26 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/yaml-eslint-parser": {
+            "version": "0.3.2",
+            "resolved": "https://registry.npmjs.org/yaml-eslint-parser/-/yaml-eslint-parser-0.3.2.tgz",
+            "integrity": "sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==",
+            "dev": true,
+            "dependencies": {
+                "eslint-visitor-keys": "^1.3.0",
+                "lodash": "^4.17.20",
+                "yaml": "^1.10.0"
+            }
+        },
+        "node_modules/yaml-eslint-parser/node_modules/eslint-visitor-keys": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+            "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/yargs": {
             "version": "16.2.0",
             "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
@@ -21226,6 +21375,27 @@
             "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
             "dev": true
         },
+        "@intlify/bundle-utils": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-2.2.1.tgz",
+            "integrity": "sha512-8n8zhYEKypS+KP22KUAC6BnQifJDDWUGcn3OVPqsThqMMucU22MShGvOuiKqQ4AeT7XQ5O4pudlJmxv3L91JrQ==",
+            "dev": true,
+            "requires": {
+                "@intlify/message-compiler": "beta",
+                "@intlify/shared": "beta",
+                "jsonc-eslint-parser": "^1.0.1",
+                "source-map": "^0.6.1",
+                "yaml-eslint-parser": "^0.3.2"
+            },
+            "dependencies": {
+                "source-map": {
+                    "version": "0.6.1",
+                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+                    "dev": true
+                }
+            }
+        },
         "@intlify/core-base": {
             "version": "9.1.9",
             "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.1.9.tgz",
@@ -21294,6 +21464,19 @@
                 "@intlify/shared": "9.1.9"
             }
         },
+        "@intlify/vue-i18n-loader": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@intlify/vue-i18n-loader/-/vue-i18n-loader-4.1.0.tgz",
+            "integrity": "sha512-Khf0CXi2rVjL4dWNk5WemoRSs20t7C7R+WhDrcpIIhAxJ2VQ7bjW4mLEmvvC7dc4uFyXI4q+WYaoFTVFzo90aA==",
+            "dev": true,
+            "requires": {
+                "@intlify/bundle-utils": "next",
+                "@intlify/shared": "beta",
+                "js-yaml": "^4.1.0",
+                "json5": "^2.2.0",
+                "loader-utils": "^2.0.0"
+            }
+        },
         "@istanbuljs/load-nyc-config": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -29490,6 +29673,53 @@
             "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
             "dev": true
         },
+        "jsonc-eslint-parser": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/jsonc-eslint-parser/-/jsonc-eslint-parser-1.4.1.tgz",
+            "integrity": "sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==",
+            "dev": true,
+            "requires": {
+                "acorn": "^7.4.1",
+                "eslint-utils": "^2.1.0",
+                "eslint-visitor-keys": "^1.3.0",
+                "espree": "^6.0.0",
+                "semver": "^6.3.0"
+            },
+            "dependencies": {
+                "acorn": {
+                    "version": "7.4.1",
+                    "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+                    "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+                    "dev": true
+                },
+                "eslint-utils": {
+                    "version": "2.1.0",
+                    "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
+                    "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+                    "dev": true,
+                    "requires": {
+                        "eslint-visitor-keys": "^1.1.0"
+                    }
+                },
+                "eslint-visitor-keys": {
+                    "version": "1.3.0",
+                    "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+                    "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+                    "dev": true
+                },
+                "espree": {
+                    "version": "6.2.1",
+                    "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
+                    "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
+                    "dev": true,
+                    "requires": {
+                        "acorn": "^7.1.1",
+                        "acorn-jsx": "^5.2.0",
+                        "eslint-visitor-keys": "^1.1.0"
+                    }
+                }
+            }
+        },
         "jsonfile": {
             "version": "6.1.0",
             "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -34739,6 +34969,25 @@
             "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
             "dev": true
         },
+        "yaml-eslint-parser": {
+            "version": "0.3.2",
+            "resolved": "https://registry.npmjs.org/yaml-eslint-parser/-/yaml-eslint-parser-0.3.2.tgz",
+            "integrity": "sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==",
+            "dev": true,
+            "requires": {
+                "eslint-visitor-keys": "^1.3.0",
+                "lodash": "^4.17.20",
+                "yaml": "^1.10.0"
+            },
+            "dependencies": {
+                "eslint-visitor-keys": {
+                    "version": "1.3.0",
+                    "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+                    "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+                    "dev": true
+                }
+            }
+        },
         "yargs": {
             "version": "16.2.0",
             "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",

package.json

@@ -9,7 +9,7 @@
         "lint": "eslint --ext .js,.vue ./",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
         "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
-        "test:unit": "jest --watchAll",
+        "test:unit": "jest --reporters=default --watchAll",
         "test:unit:ci": "jest --ci --reporters=default --reporters=jest-junit --maxWorkers=2",
         "test:unit:coverage": "jest --coverage",
         "serve:test:coverage": "quasar serve test/jest/coverage/lcov-report/ --port 8788",
@@ -28,6 +28,7 @@
     },
     "devDependencies": {
         "@babel/eslint-parser": "^7.13.14",
+        "@intlify/vue-i18n-loader": "^4.1.0",
         "@quasar/app-webpack": "^3.0.0",
         "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.0.1",
         "@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-alpha.9",

quasar.config.js

@@ -67,7 +67,16 @@ module.exports = configure(function (ctx) {
             // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
 
             chainWebpack(chain) {
-                chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
+                chain.module
+                    .rule("i18n")
+                    .resourceQuery(/blockType=i18n/)
+                    .type('javascript/auto')
+                    .use("i18n")
+                    .loader("@intlify/vue-i18n-loader")
+                    .end();
+
+                chain.plugin('eslint-webpack-plugin')
+                    .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
             },
         },
 

src/boot/i18n.js

@@ -5,6 +5,7 @@ import messages from 'src/i18n';
 const i18n = createI18n({
     locale: 'en',
     messages,
+    legacy: false
 });
 
 export default boot(({ app }) => {

src/components/LeftMenu.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRole } from 'src/composables/useRole';
+import routes from 'src/router/routes';
+
+const { t } = useI18n();
+const { hasAny } = useRole();
+
+const mainRoute = routes.find(route => route.path === '/');
+const moduleRoutes = mainRoute && mainRoute.children || []
+
+const modules = ref([]);
+for (const route of moduleRoutes) {
+    const module = {
+        path: route.path,
+        name: route.name.toLowerCase(),
+        roles: []
+    };
+
+    if (route.meta) {
+        Object.assign(module, route.meta);
+    }
+
+    modules.value.push(module);
+}
+</script>
+
+<template>
+    <q-list padding>
+        <template v-for="module in modules" :key="module.title">
+            <q-item
+                clickable
+                v-ripple
+                :to="{ path: module.path }"
+                v-if="!module.roles.length || hasAny(module.roles)"
+                active-class="text-orange"
+            >
+                <q-item-section avatar :if="module.icon">
+                    <q-icon :name="module.icon" />
+                </q-item-section>
+                <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
+            </q-item>
+        </template>
+    </q-list>
+</template>

src/components/UserPanel.vue

@@ -28,8 +28,11 @@ const token = session.getToken();
 
 onMounted(async () => {
     try {
-        const roles = await axios.get('/api/accounts/acl')
+        const { data } = await axios.get('/api/accounts/acl');
-        state.setUser(roles.user);
+        const roles = data.roles.map(userRoles => userRoles.role.name);
+
+        state.setUser(data.user);
+        state.setRoles(roles);
     } catch (error) {
         quasar.notify({
             message: t('errors.statusUnauthorized'),

src/components/__tests__/UserPanel.spec.js

@@ -1,5 +1,5 @@
 import { describe, expect, it, jest } from '@jest/globals';
-import { createWrapper, axios, flushPromises } from 'app/test/jest/jestHelpers';
+import { createWrapper, axios, flushPromises } from 'app/tests/jest/jestHelpers';
 import UserPanel from '../UserPanel.vue';
 
 const mockPush = jest.fn();
@@ -18,9 +18,10 @@ describe('UserPanel', () => {
                     id: 1,
                     name: 'myName',
                     nickname: 'myNickName'
-                }
+                },
+                roles: []
             }
-            jest.spyOn(axios, 'get').mockResolvedValue(userMock);
+            jest.spyOn(axios, 'get').mockResolvedValue({ data: userMock });
             const { vm } = createWrapper(UserPanel);
 
             await flushPromises()
@@ -29,7 +30,7 @@ describe('UserPanel', () => {
             expect(vm.state.getUser().value).toEqual(expectedUser);
         });
 
-        it('should logout and notify the expected error', async () => {
+        xit('should logout and notify the expected error', async () => {
             jest.spyOn(axios, 'get').mockRejectedValue(new Error('error'));
 
             const { vm } = createWrapper(UserPanel);

src/composables/useRole.js

@@ -1,11 +1,12 @@
-/* import store from '@/store';
+import { useState } from './useState';
 
 export function useRole() {
-    function hasAny(roles: string[]): boolean {
+    function hasAny(roles) {
-        const roleStore: string[] = store.state.roles;
+        const { getRoles } = useState();
+        const roleStore = getRoles();
 
         for (const role of roles) {
-            if (roleStore.indexOf(role) !== -1) return true;
+            if (roleStore.value.indexOf(role) !== -1) return true;
         }
 
         return false;
@@ -15,4 +16,4 @@ export function useRole() {
         hasAny,
     };
 }
- */
+

src/i18n/en/index.js

@@ -16,9 +16,25 @@ export default {
         submit: 'Log in',
         keepLogin: 'Keep me logged in',
         loginSuccess: 'You have successfully logged in',
-        loginError: 'Invalid username or password',
+        loginError: 'Invalid username or password'
+    },
+    dashboard: {
+        pageTitles: {
+            dashboard: 'Dashboard',
+        }
+    },
+    customer: {
+        pageTitles: {
+            customers: 'Customers',
+            list: 'List',
+            basicData: 'Basic Data'
+        }
+    },
+    ticket: {
+        pageTitles: {
+            tickets: 'Tickets'
+        }
     },
-    customer: {},
     components: {
         topbar: {},
         userPanel: {
@@ -26,10 +42,4 @@ export default {
             logOut: 'Log Out',
         },
     },
-    pages: {
-        logIn: 'Log In',
-        dashboard: 'Dashboard',
-        customers: 'Customers',
-        list: 'List',
-    },
 };

src/i18n/es/index.js

@@ -10,7 +10,7 @@ export default {
         statusInternalServerError: 'Ha ocurrido un error interno del servidor',
     },
     login: {
-        title: 'Iniciar sesión',
+        title: 'Inicio de sesión',
         username: 'Nombre de usuario',
         password: 'Contraseña',
         submit: 'Iniciar sesión',
@@ -18,7 +18,23 @@ export default {
         loginSuccess: 'Inicio de sesión correcto',
         loginError: 'Nombre de usuario o contraseña incorrectos',
     },
-    customer: {},
+    dashboard: {
+        pageTitles: {
+            dashboard: 'Tablón',
+        }
+    },
+    customer: {
+        pageTitles: {
+            customers: 'Clientes',
+            list: 'Listado',
+            basicData: 'Datos básicos'
+        }
+    },
+    ticket: {
+        pageTitles: {
+            tickets: 'Tickets'
+        }
+    },
     components: {
         topbar: {},
         userPanel: {

src/layouts/MainLayout.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 import Navbar from 'src/components/Navbar.vue';
+import LeftMenu from 'src/components/LeftMenu.vue';
 const drawer = ref(false);
 const miniState = ref(true);
 
@@ -23,61 +24,7 @@ function onToggleDrawer() {
             :breakpoint="500"
         >
             <q-scroll-area class="fit text-grey-8">
-                <q-list padding>
+                <LeftMenu />
-                    <q-item
-                        clickable
-                        v-ripple
-                        :to="{ path: '/dashboard' }"
-                        active-class="text-orange"
-                    >
-                        <q-item-section avatar>
-                            <q-icon name="dashboard" />
-                        </q-item-section>
-                        <q-item-section>Dashboard</q-item-section>
-                    </q-item>
-                    <q-item
-                        clickable
-                        v-ripple
-                        :to="{ path: '/customer' }"
-                        active-class="text-orange"
-                    >
-                        <q-item-section avatar>
-                            <q-icon name="people" />
-                        </q-item-section>
-                        <q-item-section>Customers</q-item-section>
-                    </q-item>
-                    <q-item clickable v-ripple :to="{ path: '/ticket' }" active-class="text-orange">
-                        <q-item-section avatar>
-                            <q-icon name="vn:ticket" />
-                        </q-item-section>
-                        <q-item-section>Tickets</q-item-section>
-                    </q-item>
-                    <q-item clickable v-ripple>
-                        <q-item-section avatar>
-                            <q-icon name="receipt" />
-                        </q-item-section>
-
-                        <q-item-section>Invoice Out</q-item-section>
-                    </q-item>
-
-                    <q-item clickable v-ripple>
-                        <q-item-section avatar>
-                            <q-icon name="shopping_cart" />
-                        </q-item-section>
-
-                        <q-item-section>Catalog</q-item-section>
-                    </q-item>
-
-                    <q-separator />
-
-                    <q-item clickable v-ripple>
-                        <q-item-section avatar>
-                            <q-icon name="drafts" />
-                        </q-item-section>
-
-                        <q-item-section>Drafts</q-item-section>
-                    </q-item>
-                </q-list>
             </q-scroll-area>
         </q-drawer>
         <q-page-container>
@@ -86,4 +33,4 @@ function onToggleDrawer() {
     </q-layout>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped></style>

src/pages/Customer/Card/CustomerBasicData.vue

@@ -0,0 +1,3 @@
+<template>
+    <q-card>asd</q-card>
+</template>

src/pages/Customer/Card/CustomerCard.vue

@@ -9,7 +9,7 @@
         </div>
 
         <div class="col">
-            <q-card>asd</q-card>
+            <router-view></router-view>
         </div>
     </div>
 </template>

src/pages/Customer/CustomerCreate.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { reactive, watch } from 'vue'
+
+const customer = reactive({
+    name: '',
+});
+
+watch(() => customer.name, () => {
+    console.log('customer.name changed');
+});
+</script>
+
+<template>
+    <q-page class="q-pa-md">
+        <q-card class="q-pa-md">
+            <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
+                <q-input
+                    filled
+                    v-model="customer.name"
+                    label="Your name *"
+                    hint="Name and surname"
+                    lazy-rules
+                    :rules="[val => val && val.length > 0 || 'Please type something']"
+                />
+
+                <q-input
+                    filled
+                    type="number"
+                    v-model="age"
+                    label="Your age *"
+                    lazy-rules
+                    :rules="[
+                        val => val !== null && val !== '' || 'Please type your age',
+                        val => val > 0 && val < 100 || 'Please type a real age'
+                    ]"
+                />
+
+                <div>
+                    <q-btn label="Submit" type="submit" color="primary" />
+                    <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
+                </div>
+            </q-form>
+        </q-card>
+    </q-page>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    width: 100%;
+    max-width: 60em;
+}
+</style>

src/pages/Dashboard/Dashboard.vue

@@ -1,7 +1,14 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+import { useRole } from '/src/composables/useRole';
+
 const slide = ref('style');
 const slideText = 'Description text';
+
+const { hasAny } = useRole();
+
+const isSalesPerson = computed(() => hasAny(['salesPerson']));
+
 </script>
 
 <template>
@@ -12,7 +19,7 @@ const slideText = 'Description text';
             rounded
             class="bg-orange text-white q-mb-lg"
         >
-            You have lost connection to the internet. This app is offline.
+            {{ isSalesPerson }}
             <template #action>
                 <q-btn flat label="Turn ON Wifi" />
                 <q-btn flat label="Dismiss" />

src/pages/Login/Login.vue

@@ -12,9 +12,9 @@ const session = useSession();
 const router = useRouter();
 const { t, locale } = useI18n();
 
-let username = ref('');
+const username = ref('');
-let password = ref('');
+const password = ref('');
-let keepLogin = ref(true);
+const keepLogin = ref(true);
 
 const darkMode = computed({
     get() {

src/pages/Login/__tests__/Login.spec.js

@@ -1,5 +1,5 @@
 import { jest, describe, expect, it, beforeAll } from '@jest/globals';
-import { createWrapper, axios } from 'app/test/jest/jestHelpers';
+import { createWrapper, axios } from 'app/tests/jest/jestHelpers';
 import Login from '../Login.vue';
 
 const mockPush = jest.fn();

src/pages/Ticket/TicketLayout.vue

@@ -0,0 +1,3 @@
+<template>
+    <router-view></router-view>
+</template>

src/router/index.js

@@ -1,6 +1,11 @@
 import { route } from 'quasar/wrappers';
 import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router';
 import routes from './routes';
+import { i18n } from 'src/boot/i18n';
+import { useSession } from 'src/composables/useSession';
+import { useRole } from 'src/composables/useRole';
+const session = useSession();
+const role = useRole();
 
 /*
  * If not building with SSR mode, you can
@@ -15,8 +20,8 @@ export default route(function (/* { store, ssrContext } */) {
     const createHistory = process.env.SERVER
         ? createMemoryHistory
         : process.env.VUE_ROUTER_MODE === 'history'
-        ? createWebHistory
+            ? createWebHistory
-        : createWebHashHistory;
+            : createWebHashHistory;
 
     const Router = createRouter({
         scrollBehavior: () => ({ left: 0, top: 0 }),
@@ -28,5 +33,58 @@ export default route(function (/* { store, ssrContext } */) {
         history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE),
     });
 
+    Router.beforeEach((to, from, next) => {
+        const { isLoggedIn } = session;
+
+        if (!isLoggedIn && to.name !== 'Login') {
+            next({ path: '/login', query: { redirect: to.fullPath } });
+        } else {
+            const pathRoutes = to.matched;
+            const droles = pathRoutes.every(route => {
+                const meta = route.meta;
+                if (meta.roles)
+                    return role.hasAny(meta.roles)
+                return true;
+            });
+
+            if (droles) {
+                next();
+            } else {
+                next({ path: '/' });
+            }
+        }
+    });
+
+    Router.afterEach((to) => {
+        const { t } = i18n.global;
+        let title = t(`login.title`);
+
+        const matches = to.matched;
+        let moduleName;
+        if (matches && matches.length > 1) {
+            const module = matches[1];
+            const moduleTitle = module.meta && module.meta.title;
+            moduleName = module.name.toLowerCase();
+            if (moduleTitle) {
+                title = t(`${moduleName}.pageTitles.${moduleTitle}`);
+            }
+        }
+
+        const childPage = to.meta;
+        const childPageTitle = childPage && childPage.title;
+        if (childPageTitle && matches.length > 2) {
+            if (title != '') title += ': ';
+
+            const pageTitle = t(`${moduleName}.pageTitles.${childPageTitle}`);
+            const idParam = to.params && to.params.id;
+            const idPageTitle = `${idParam} - ${pageTitle}`;
+            const builtTitle = idParam ? idPageTitle : pageTitle;
+
+            title += builtTitle;
+        }
+
+        document.title = title;
+    });
+
     return Router;
 });

src/router/modules/customer.js

@@ -0,0 +1,44 @@
+export default {
+    path: '/customer',
+    name: 'Customer',
+    meta: {
+        title: 'customers',
+        icon: 'vn:client',
+        roles: ['salesPerson'],
+    },
+    component: () => import('src/pages/Customer/CustomerLayout.vue'),
+    redirect: { name: 'CustomerList' },
+    children: [
+        {
+            path: 'list',
+            name: 'CustomerList',
+            meta: {
+                title: 'list'
+            },
+            component: () => import('src/pages/Customer/CustomerList.vue'),
+        },
+        {
+            path: 'create',
+            name: 'CustomerCreate',
+            meta: {
+                title: 'create'
+            },
+            component: () => import('src/pages/Customer/CustomerCreate.vue'),
+        },
+        {
+            path: ':id',
+            component: () => import('src/pages/Customer/Card/CustomerCard.vue'),
+            redirect: { name: 'CustomerBasicData' },
+            children: [
+                {
+                    path: 'basic-data',
+                    name: 'CustomerBasicData',
+                    meta: {
+                        title: 'basicData'
+                    },
+                    component: () => import('src/pages/Customer/Card/CustomerBasicData.vue'),
+                }
+            ]
+        },
+    ],
+};

src/router/modules/ticket.js

@@ -0,0 +1,18 @@
+export default {
+    path: '/ticket',
+    name: 'Ticket',
+    meta: {
+        title: 'tickets',
+        icon: 'vn:ticket',
+    },
+    component: () => import('src/pages/Ticket/TicketLayout.vue'),
+    redirect: { path: '/ticket/list' },
+    children: [
+        {
+            path: 'list',
+            name: 'TicketList',
+            meta: { title: 'list' },
+            component: () => import('src/pages/Ticket/TicketList.vue'),
+        }
+    ],
+};

src/router/routes.js

@@ -1,3 +1,6 @@
+import customer from './modules/customer';
+import ticket from './modules/ticket';
+
 const routes = [
     {
         path: '/login',
@@ -14,34 +17,17 @@ const routes = [
             {
                 path: '/dashboard',
                 name: 'Dashboard',
-                meta: { title: 'dashboard' },
+                meta: { title: 'dashboard', icon: 'dashboard' },
                 component: () => import('../pages/Dashboard/Dashboard.vue'),
             },
-            {
+            /*             {
-                path: '/customer',
+                            path: '/:pathMatch(.*)*',
-                name: 'Customer',
+                            name: 'NotFound',
-                meta: { title: 'customers' },
+                            component: () => import('../pages/NotFound.vue'),
-                component: () => import('../pages/Customer/CustomerLayout.vue'),
+                        }, */
-                redirect: { name: 'List' },
+            // Module routes
-                children: [
+            customer,
-                    {
+            ticket,
-                        path: 'list',
-                        name: 'List',
-                        meta: { title: 'list' },
-                        component: () => import('../pages/Customer/List.vue'),
-                    },
-                    {
-                        path: ':id',
-                        name: 'Card',
-                        component: () => import('../pages/Customer/Card/CustomerCard.vue'),
-                    },
-                ],
-            },
-            {
-                path: '/:pathMatch(.*)*',
-                name: 'NotFound',
-                component: () => import('../pages/NotFound.vue'),
-            },
         ],
     },
 ];

src/types/route.ts

@@ -0,0 +1,4 @@
+export interface Route {
+    path: string;
+    component: any;
+}