wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Merge pull request 'router-navigation' (#7) from router-navigation into dev 

Reviewed-on: verdnatura/salix-front#7
This commit is contained in:
Joan Sanchez 2022-04-01 13:07:51 +00:00
parent d3177e2869 4b4513ea44
commit f20cd84df9
24 changed files with 571 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

249
package-lock.json generated
View File

@ -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",

3
package.json
View File

@ -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",

11
quasar.config.js
View File

@ -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'] }]);
},
},

1
src/boot/i18n.js
View File

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

46
src/components/LeftMenu.vue Normal file
View File

@ -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>

7
src/components/UserPanel.vue
View File

@ -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'),

7
src/components/__tests__/UserPanel.spec.js
View File

@ -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);

11
src/composables/useRole.js
View File

@ -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,
};
}
*/

26
src/i18n/en/index.js
View File

@ -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',
},
};

20
src/i18n/es/index.js
View File

@ -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: {

59
src/layouts/MainLayout.vue
View File

@ -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>
@ -86,4 +33,4 @@ function onToggleDrawer() {
</q-layout>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped></style>

3
src/pages/Customer/Card/CustomerBasicData.vue Normal file
View File

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

2
src/pages/Customer/Card/CustomerCard.vue
View File

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

52
src/pages/Customer/CustomerCreate.vue Normal file
View File

@ -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>

0
src/pages/Customer/List.vue → src/pages/Customer/CustomerList.vue
View File

11
src/pages/Dashboard/Dashboard.vue
View File

@ -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" />

6
src/pages/Login/Login.vue
View File

@ -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() {

3
src/pages/Ticket/TicketLayout.vue Normal file
View File

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

0
src/pages/Ticket/TicketList.vue Normal file
View File

62
src/router/index.js
View File

@ -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;
});

44
src/router/modules/customer.js Normal file
View File

@ -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'),
}
]
},
],
};

18
src/router/modules/ticket.js Normal file
View File

@ -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'),
}
],
};

38
src/router/routes.js
View File

@ -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,
],
},
];

4
src/types/route.ts Normal file
View File

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