forked from verdnatura/salix-front
Merge pull request 'router-navigation' (#7) from router-navigation into dev
Reviewed-on: verdnatura/salix-front#7
This commit is contained in:
commit
f20cd84df9
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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'] }]);
|
||||
},
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import messages from 'src/i18n';
|
|||
const i18n = createI18n({
|
||||
locale: 'en',
|
||||
messages,
|
||||
legacy: false
|
||||
});
|
||||
|
||||
export default boot(({ app }) => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -28,8 +28,11 @@ const token = session.getToken();
|
|||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const roles = await axios.get('/api/accounts/acl')
|
||||
state.setUser(roles.user);
|
||||
const { data } = await axios.get('/api/accounts/acl');
|
||||
const roles = data.roles.map(userRoles => userRoles.role.name);
|
||||
|
||||
state.setUser(data.user);
|
||||
state.setRoles(roles);
|
||||
} catch (error) {
|
||||
quasar.notify({
|
||||
message: t('errors.statusUnauthorized'),
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
/* import store from '@/store';
|
||||
import { useState } from './useState';
|
||||
|
||||
export function useRole() {
|
||||
function hasAny(roles: string[]): boolean {
|
||||
const roleStore: string[] = store.state.roles;
|
||||
function hasAny(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,
|
||||
};
|
||||
}
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
<LeftMenu />
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
<q-page-container>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<q-card>asd</q-card>
|
||||
</template>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
|
||||
<div class="col">
|
||||
<q-card>asd</q-card>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@ const session = useSession();
|
|||
const router = useRouter();
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
let username = ref('');
|
||||
let password = ref('');
|
||||
let keepLogin = ref(true);
|
||||
const username = ref('');
|
||||
const password = ref('');
|
||||
const keepLogin = ref(true);
|
||||
|
||||
const darkMode = computed({
|
||||
get() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
|
@ -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
|
||||
: createWebHashHistory;
|
||||
? createWebHistory
|
||||
: 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;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -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'),
|
||||
}
|
||||
],
|
||||
};
|
||||
|
|
@ -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',
|
||||
name: 'Customer',
|
||||
meta: { title: 'customers' },
|
||||
component: () => import('../pages/Customer/CustomerLayout.vue'),
|
||||
redirect: { name: 'List' },
|
||||
children: [
|
||||
{
|
||||
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'),
|
||||
},
|
||||
/* {
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'NotFound',
|
||||
component: () => import('../pages/NotFound.vue'),
|
||||
}, */
|
||||
// Module routes
|
||||
customer,
|
||||
ticket,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
export interface Route {
|
||||
path: string;
|
||||
component: any;
|
||||
}
|
||||
Loading…
Reference in New Issue