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

Merge branch 'salix-front-js' of https://gitea.verdnatura.es/verdnatura/salix-front into router-navigation

This commit is contained in:
Joan Sanchez 2022-03-28 09:05:56 +02:00
parent 760c89aff9 d9099d1d84
commit 6141f9a136
63 changed files with 2114 additions and 2644 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.babelrc
View File

@ -1,12 +1,8 @@
{
"plugins": [
"@babel/plugin-syntax-dynamic-import"
],
"plugins": ["@babel/plugin-syntax-dynamic-import"],
"env": {
"test": {
"plugins": [
"dynamic-import-node"
],
"plugins": ["dynamic-import-node"],
"presets": [
[
"@babel/preset-env",

2
.editorconfig
View File

@ -3,7 +3,7 @@ root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

1
.eslintignore
View File

@ -6,4 +6,3 @@
/node_modules
.eslintrc.js
babel.config.js
/src-ssr

37
.eslintrc.js
View File

@ -1,21 +1,11 @@
const { resolve } = require('path');
module.exports = {
// 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,
// https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
// Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
// `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
parserOptions: {
// https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser#configuration
// https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#eslint
// Needed to make the parser take into account 'vue' files
extraFileExtensions: ['.vue'],
parser: '@typescript-eslint/parser',
project: resolve(__dirname, './tsconfig.json'),
tsconfigRootDir: __dirname,
parser: '@babel/eslint-parser',
ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
},
@ -27,13 +17,7 @@ module.exports = {
// Rules order is important, please avoid shuffling them
extends: [
// Base ESLint recommended rules
// 'eslint:recommended',
// https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage
// ESLint typescript rules
'plugin:@typescript-eslint/recommended',
// consider disabling this class of rules if linting takes too long
'plugin:@typescript-eslint/recommended-requiring-type-checking',
'eslint:recommended',
// Uncomment any of the lines below to choose desired strictness,
// but leave only one uncommented!
@ -48,9 +32,6 @@ module.exports = {
],
plugins: [
// required to apply rules which need type information
'@typescript-eslint',
// https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
// required to lint *.vue files
'vue',
@ -71,25 +52,19 @@ module.exports = {
process: 'readonly',
Capacitor: 'readonly',
chrome: 'readonly',
defineProps: 'readonly', // Vue SFC setup compiler macro
defineEmits: 'readonly', // Vue SFC setup compiler macro
defineExpose: 'readonly', // Vue SFC setup compiler macro
},
// add your custom rules here
rules: {
'prefer-promise-reject-errors': 'off',
// TypeScript
quotes: ['warn', 'single', { avoidEscape: true }],
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/unbound-method': 'off',
'@typescript-eslint/no-unsafe-assignment': 'off',
'@typescript-eslint/no-unsafe-member-access': 'off',
'@typescript-eslint/no-unsafe-call': 'off',
'@typescript-eslint/no-floating-promises': 'off',
// allow debugger during development only
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
overrides: [
{
files: ['**/*.spec.{js,ts}'],

1
.gitignore vendored
View File

@ -26,7 +26,6 @@ yarn-debug.log*
yarn-error.log*
# Editor directories and files
.vscode
.idea
*.suo
*.ntvs*

1
.postcssrc.js
View File

@ -1,3 +1,4 @@
/* eslint-disable */
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {

7
.prettierrc
View File

@ -1,7 +0,0 @@
{
"singleQuote": true,
"printWidth": 120,
"tabWidth": 4,
"semi": true,
"endOfLine": "auto"
}

7
.prettierrc.js Normal file
View File

@ -0,0 +1,7 @@
module.exports = {
singleQuote: true,
printWidth: 120,
tabWidth: 4,
semi: true,
endOfLine: 'auto',
};

15
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,15 @@
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"editorconfig.editorconfig",
"johnsoncodehk.volar",
"wayou.vscode-todo-highlight"
],
"unwantedRecommendations": [
"octref.vetur",
"hookyqr.beautify",
"dbaeumer.jshint",
"ms-vscode.vscode-typescript-tslint-plugin"
]
}

13
.vscode/settings.json vendored
View File

@ -2,6 +2,17 @@
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "johnsoncodehk.volar",
"editor.codeActionsOnSave": ["source.fixAll.eslint"],
"eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"]
"eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
"jest.jestCommandLine": "jest",
"json.schemas": [
{
"fileMatch": ["cypress.json"],
"url": "https://on.cypress.io/cypress.schema.json"
}
],
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
}
}

8
README.md
View File

@ -5,6 +5,8 @@ Salix front-end
## Install the dependencies
```bash
yarn
# or
npm install
```
@ -17,12 +19,16 @@ quasar dev
### Lint the files
```bash
yarn lint
# or
npm run lint
```
### Format the files
```bash
yarn format
# or
npm run format
```
@ -34,4 +40,4 @@ quasar build
### Customize the configuration
See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js).
See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js).

47
jest.config.js
View File

@ -1,6 +1,5 @@
const esModules = ['quasar', 'quasar/lang', 'lodash-es'].join('|');
/* eslint-env node */
module.exports = {
globals: {
__DEV__: true,
@ -9,12 +8,9 @@ module.exports = {
'vue-jest': {
pug: { doctype: 'html' },
},
// Remove if using `const enums`
// See https://huafu.github.io/ts-jest/user/config/isolatedModules#example
'ts-jest': {
isolatedModules: true,
},
},
// Jest assumes we are testing in node environment, specify jsdom environment instead
testEnvironment: 'jsdom',
// noStackTrace: true,
// bail: true,
// cache: false,
@ -22,13 +18,8 @@ module.exports = {
// watch: true,
collectCoverage: false,
coverageDirectory: '<rootDir>/test/jest/coverage',
collectCoverageFrom: [
'<rootDir>/src/**/*.vue',
'<rootDir>/src/**/*.js',
'<rootDir>/src/**/*.ts',
'<rootDir>/src/**/*.jsx',
'<rootDir>/src/**/*.tsx',
],
collectCoverageFrom: ['<rootDir>/src/**/*.vue', '<rootDir>/src/**/*.js', '<rootDir>/src/**/*.jsx'],
// Needed in JS codebases too because of feature flags
coveragePathIgnorePatterns: ['/node_modules/', '.d.ts$'],
coverageThreshold: {
global: {
@ -38,27 +29,14 @@ module.exports = {
// statements: 50
},
},
testMatch: [
// Matches tests in any subfolder of 'src' or into 'test/jest/__tests__'
// Matches all files with extension 'js', 'jsx', 'ts' and 'tsx'
'<rootDir>/test/jest/__tests__/**/*.(spec|test).+(ts|js)?(x)',
//'<rootDir>/src/**/*.jest.(spec|test).+(ts|js)?(x)',
],
// Extension-less imports of components are resolved to .ts files by TS,
// grating correct type-checking in test files.
// Being 'vue' the first moduleFileExtension option, the very same imports
// will be resolved to .vue files by Jest, if both .vue and .ts files are
// in the same folder.
// This guarantee a great dev experience both for testing and type-checking.
// See https://github.com/vuejs/vue-jest/issues/188#issuecomment-620750728
moduleFileExtensions: ['vue', 'js', 'jsx', 'json', 'ts', 'tsx'],
testMatch: ['<rootDir>/src/**/__tests__/*.(spec|test).+(ts|js)?(x)'],
moduleFileExtensions: ['vue', 'js', 'jsx', 'json'],
moduleNameMapper: {
'^quasar$': 'quasar/dist/quasar.esm.prod.js',
'^~/(.*)$': '<rootDir>/$1',
'^src/(.*)$': '<rootDir>/src/$1',
'^app/(.*)$': '<rootDir>/$1',
'^components/(.*)$': '<rootDir>/src/components/$1',
'^composables/(.*)$': '<rootDir>/src/composables/$1',
'^layouts/(.*)$': '<rootDir>/src/layouts/$1',
'^pages/(.*)$': '<rootDir>/src/pages/$1',
'^assets/(.*)$': '<rootDir>/src/assets/$1',
@ -66,16 +44,13 @@ module.exports = {
'.*css$': '@quasar/quasar-app-extension-testing-unit-jest/stub.css',
},
transform: {
// See https://jestjs.io/docs/en/configuration.html#transformignorepatterns-array-string
[`^(${esModules}).+\\.js$`]: 'babel-jest',
'^.+\\.(ts|js|html)$': 'ts-jest',
// vue-jest uses find-babel-file, which searches by this order:
// (async) .babelrc, .babelrc.js, package.json, babel.config.js
// (sync) .babelrc, .babelrc.js, babel.config.js, package.json
// https://github.com/tleunen/find-babel-config/issues/33
'.*\\.vue$': 'vue-jest',
'.*\\.js$': 'babel-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
// use these if NPM is being flaky, care as hosting could interfere with these
// '.*\\.vue$': '@quasar/quasar-app-extension-testing-unit-jest/node_modules/vue-jest',
// '.*\\.js$': '@quasar/quasar-app-extension-testing-unit-jest/node_modules/babel-jest'
},
transformIgnorePatterns: [`node_modules/(?!(${esModules}))`],
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
snapshotSerializers: ['jest-serializer-vue'],
};

17
jsconfig.json Normal file
View File

@ -0,0 +1,17 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"src/*": ["src/*"],
"app/*": ["*"],
"components/*": ["src/components/*"],
"layouts/*": ["src/layouts/*"],
"pages/*": ["src/pages/*"],
"assets/*": ["src/assets/*"],
"boot/*": ["src/boot/*"],
"stores/*": ["src/stores/*"],
"vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"]
}
},
"exclude": ["dist", ".quasar", "node_modules"]
}

3221
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

30
package.json
View File

@ -3,41 +3,39 @@
"version": "0.0.1",
"description": "Salix front-end",
"productName": "Salix",
"author": "Salix",
"author": "Verdnatura",
"private": true,
"scripts": {
"lint": "eslint --ext .js,.ts,.vue ./",
"format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
"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:coverage": "jest --coverage",
"test:unit": "jest --watchAll",
"test:e2e": "cross-env E2E_TEST=true start-test \"quasar dev\" http-get://localhost:8080 \"cypress open --config-file cypress.json\"",
"test:e2e:ci": "cross-env E2E_TEST=true start-test \"quasar dev\" http-get://localhost:8080 \"cypress run\"",
"test:unit:ci": "jest --ci",
"test:unit:coverage": "jest --coverage",
"serve:test:coverage": "quasar serve test/jest/coverage/lcov-report/ --port 8788",
"concurrently:dev:jest": "concurrently \"quasar dev\" \"jest --watch\""
"concurrently:dev:jest": "concurrently \"quasar dev\" \"jest --watch\"",
"test:e2e": "cross-env E2E_TEST=true start-test \"quasar dev\" http-get://localhost:8080 \"cypress open\"",
"test:e2e:ci": "cross-env E2E_TEST=true start-test \"quasar dev\" http-get://localhost:8080 \"cypress run\""
},
"dependencies": {
"@quasar/extras": "^1.0.0",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"quasar": "^2.0.0",
"quasar": "^2.6.0",
"vue": "^3.0.0",
"vue-i18n": "^9.0.0",
"vue-router": "^4.0.0"
},
"devDependencies": {
"@babel/eslint-parser": "^7.13.14",
"@intlify/vue-i18n-loader": "^4.1.0",
"@quasar/app": "^3.0.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.8",
"@types/node": "^12.20.21",
"@typescript-eslint/eslint-plugin": "^5.10.0",
"@typescript-eslint/parser": "^5.10.0",
"eslint": "^7.14.0",
"@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-alpha.9",
"eslint": "^8.10.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-jest": "^25.2.2",
"eslint-plugin-vue": "^7.0.0",
"eslint-plugin-vue": "^8.5.0",
"eslint-webpack-plugin": "^3.1.1",
"prettier": "^2.5.1",
"eslint-plugin-cypress": "^2.11.3"
},

79
quasar.conf.js → quasar.config.js
View File

@ -1,43 +1,38 @@
/* eslint-env node */
/*
* This file runs in a Node context (it's NOT transpiled by Babel), so use only
* the ES6 features that are supported by your Node version. https://node.green/
*/
// Configuration for your app
// https://quasar.dev/quasar-cli/quasar-conf-js
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js
const ESLintPlugin = require('eslint-webpack-plugin');
/* eslint-env node */
/* eslint-disable @typescript-eslint/no-var-requires */
const { configure } = require('quasar/wrappers');
module.exports = configure(function (ctx) {
return {
// https://quasar.dev/quasar-cli/supporting-ts
supportTS: {
tsCheckerConfig: {
eslint: {
enabled: true,
files: './src/**/*.{ts,tsx,js,jsx,vue}',
},
},
},
// https://v2.quasar.dev/quasar-cli-webpack/supporting-ts
supportTS: false,
// https://quasar.dev/quasar-cli/prefetch-feature
// https://v2.quasar.dev/quasar-cli-webpack/prefetch-feature
// preFetch: true,
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://quasar.dev/quasar-cli/boot-files
// https://v2.quasar.dev/quasar-cli-webpack/boot-files
boot: ['i18n', 'axios'],
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
css: ['app.scss'],
// https://github.com/quasarframework/quasar/tree/dev/extras
extras: [
// 'ionicons-v4',
// 'mdi-v5',
// 'fontawesome-v5',
// 'fontawesome-v6',
// 'eva-icons',
// 'themify',
// 'line-awesome',
@ -47,7 +42,7 @@ module.exports = configure(function (ctx) {
'material-icons', // optional, you are not bound to it
],
// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-build
build: {
vueRouterMode: 'hash', // available values: 'hash', 'history'
@ -68,14 +63,15 @@ module.exports = configure(function (ctx) {
// Options below are automatically set depending on the env, set them if you want to override
// extractCSS: false,
// https://quasar.dev/quasar-cli/handling-webpack
// https://v2.quasar.dev/quasar-cli-webpack/handling-webpack
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
chainWebpack(/* chain */) {
//
chainWebpack(chain) {
chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
},
},
// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-devServer
devServer: {
server: {
type: 'http',
@ -92,7 +88,7 @@ module.exports = configure(function (ctx) {
},
},
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-framework
framework: {
config: {},
@ -107,14 +103,14 @@ module.exports = configure(function (ctx) {
// directives: [],
// Quasar plugins
plugins: ['Notify'],
plugins: ['Notify', 'Dialog'],
},
// animations: 'all', // --- includes all animations
// https://quasar.dev/options/animations
animations: [],
// https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
// https://v2.quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr
ssr: {
pwa: false,
@ -127,8 +123,8 @@ module.exports = configure(function (ctx) {
maxAge: 1000 * 60 * 60 * 24 * 30,
// Tell browser when a file from the server should expire from cache (in ms)
chainWebpackWebserver(/* chain */) {
//
chainWebpackWebserver(chain) {
chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
},
middlewares: [
@ -137,21 +133,22 @@ module.exports = configure(function (ctx) {
],
},
// https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
// https://v2.quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa
pwa: {
workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
workboxOptions: {}, // only for GenerateSW
// for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
// if using workbox in InjectManifest mode
chainWebpackCustomSW(/* chain */) {
//
chainWebpackCustomSW(chain) {
chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
},
manifest: {
name: 'Salix',
short_name: 'Salix',
description: 'Salix front-end',
name: `Salix`,
short_name: `Salix`,
description: `Salix front-end`,
display: 'standalone',
orientation: 'portrait',
background_color: '#ffffff',
@ -186,17 +183,17 @@ module.exports = configure(function (ctx) {
},
},
// Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova
cordova: {
// noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
},
// Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor
capacitor: {
hideSplashscreen: true,
},
// Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron
electron: {
bundler: 'packager', // 'packager' or 'builder'
@ -218,15 +215,13 @@ module.exports = configure(function (ctx) {
},
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
chainWebpack(/* chain */) {
// do something with the Electron main process Webpack cfg
// extendWebpackMain also available besides this chainWebpackMain
chainWebpackMain(chain) {
chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
},
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
chainWebpackPreload(/* chain */) {
// do something with the Electron main process Webpack cfg
// extendWebpackPreload also available besides this chainWebpackPreload
chainWebpackPreload(chain) {
chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
},
},
};

2
quasar.extensions.json
View File

@ -1,7 +1,7 @@
{
"@quasar/testing-unit-jest": {
"babel": "babelrc",
"options": ["scripts", "typescript"]
"options": ["scripts"]
},
"@quasar/testing-e2e-cypress": {
"options": ["scripts"]

2
src/App.vue
View File

@ -1,4 +1,4 @@
<script lang="ts" setup>
<script setup>
import { useQuasar } from 'quasar';
const quasar = useQuasar();

10
src/boot/axios.ts → src/boot/axios.js
View File

@ -1,14 +1,7 @@
import { boot } from 'quasar/wrappers';
import axios, { AxiosInstance } from 'axios';
import axios from 'axios';
import { useSession } from 'src/composables/useSession';
const { getToken } = useSession();
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$axios: AxiosInstance;
}
}
// Be careful when using SSR for cross-request state pollution
// due to creating a Singleton instance here;
@ -17,6 +10,7 @@ declare module '@vue/runtime-core' {
// "export default () => {}" function below (which runs individually
// for each client)
const api = axios.create({ baseURL: 'https://api.example.com' });
const { getToken } = useSession();
axios.interceptors.request.use(
function (context) {

1
src/boot/i18n.ts → src/boot/i18n.js
View File

@ -1,6 +1,5 @@
import { boot } from 'quasar/wrappers';
import { createI18n } from 'vue-i18n';
import messages from 'src/i18n';
const i18n = createI18n({

31
src/components/Navbar.vue
View File

@ -1,3 +1,19 @@
<script setup>
import { useState } from 'src/composables/useState';
import { useSession } from 'src/composables/useSession';
import UserPanel from 'src/components/UserPanel.vue';
const session = useSession();
const state = useState();
const user = state.getUser();
const token = session.getToken();
defineEmits(['toggle-drawer']);
</script>
<template>
<q-header class="bg-dark" color="white" elevated bordered>
<q-toolbar class="q-py-sm q-px-md">
@ -41,18 +57,3 @@
</q-toolbar>
</q-header>
</template>
<script lang="ts" setup>
import { useState } from 'src/composables/useState';
import { useSession } from 'src/composables/useSession';
import UserPanel from 'src/components/UserPanel.vue';
const session = useSession();
const state = useState();
const user = state.getUser();
const token = session.getToken();
defineEmits<{
(event: 'toggle-drawer'): void;
}>();
</script>

119
src/components/UserPanel.vue
View File

@ -1,3 +1,51 @@
<script setup>
import { onMounted, computed } from 'vue';
import { Dark, useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { useState } from 'src/composables/useState';
import { useSession } from 'src/composables/useSession';
const quasar = useQuasar();
const state = useState();
const session = useSession();
const router = useRouter();
const { t, locale } = useI18n();
const darkMode = computed({
get() {
return Dark.isActive;
},
set(value) {
Dark.set(value);
},
});
const user = state.getUser();
const token = session.getToken();
onMounted(async () => {
try {
const roles = await axios.get('/api/accounts/acl')
state.setUser(roles.user);
} catch (error) {
quasar.notify({
message: t('errors.statusUnauthorized'),
type: 'negative',
});
logout();
}
});
function logout() {
session.destroy();
router.push('/login');
}
</script>
<template>
<q-menu>
<div class="row no-wrap q-pa-md">
@ -34,7 +82,7 @@
<div class="text-subtitle1 q-mt-md">
<strong>{{ user.nickname }}</strong>
</div>
<div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.username }}</div>
<div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.name }}</div>
<q-btn
color="orange"
@ -49,72 +97,3 @@
</div>
</q-menu>
</template>
<script lang="ts" setup>
import { onMounted, computed } from 'vue';
import { Dark, useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { useState } from 'src/composables/useState';
import { useSession } from 'src/composables/useSession';
const quasar = useQuasar();
const state = useState();
const session = useSession();
const router = useRouter();
const { t, locale } = useI18n();
const darkMode = computed({
get(): boolean {
return Dark.isActive;
},
set(value: boolean): void {
Dark.set(value);
},
});
const user = state.getUser();
const token = session.getToken();
interface Role {
name: string
}
interface RoleList {
roleId: number;
role: Role
}
onMounted(() => {
axios
.get('/api/accounts/acl')
.then(({ data }) => {
state.setUser({
id: data.user.id,
username: data.user.name,
nickname: data.user.nickname,
});
if (data.roles) {
const roleList: RoleList[] = data.roles;
const roles: string[] = roleList.map(item => item.role.name);
state.setRoles(roles);
}
})
.catch(() => {
quasar.notify({
message: t('errors.statusUnauthorized'),
type: 'negative',
});
logout();
});
});
function logout(): void {
session.destroy();
router.push('/login');
}
</script>

42
src/components/__tests__/QuasarButton.e2e.spec.js
View File

@ -1,42 +0,0 @@
import { mount } from '@cypress/vue';
import QuasarButton from '../QuasarButton.vue';
describe('QuasarButton', () => {
it('renders a message', () => {
const label = 'Hello there';
mount(QuasarButton, {
props: {
label,
},
});
cy.dataCy('button').should('contain', label);
});
it('renders another message', () => {
const label = 'Will this work?';
mount(QuasarButton, {
props: {
label,
},
});
cy.dataCy('button').should('contain', label);
});
it('should have a `positive` color', () => {
mount(QuasarButton);
cy.dataCy('button').should('have.backgroundColor', 'var(--q-positive)').should('have.color', 'white');
});
it('should emit `test` upon click', () => {
mount(QuasarButton);
cy.dataCy('button')
.click()
.should(() => {
expect(Cypress.vueWrapper.emitted('test')).to.have.length(1);
});
});
});

24
src/components/__tests__/QuasarDialog.spec.js
View File

@ -1,24 +0,0 @@
import { mount } from '@cypress/vue';
import DialogWrapper from 'app/test/cypress/wrappers/DialogWrapper.vue';
import QuasarDialog from '../QuasarDialog.vue';
describe('QuasarDialog', () => {
it('should show a dialog with a message', () => {
const message = 'Hello, I am a dialog';
mount(DialogWrapper, {
props: {
component: QuasarDialog,
componentProps: {
message,
},
},
});
cy.dataCy('dialog').should('exist').should('contain', message);
});
it('should close a dialog when clikcing ok', () => {
// The dialog is still visible from the previous test
cy.dataCy('dialog').should('exist').dataCy('ok-button').click();
cy.dataCy('dialog').should('not.exist');
});
});

15
src/components/__tests__/QuasarDrawer.spec.js
View File

@ -1,15 +0,0 @@
import { mount } from '@cypress/vue';
import LayoutContainer from 'app/test/cypress/wrappers/LayoutContainer.vue';
import QuasarDrawer from '../QuasarDrawer.vue';
describe('QuasarDrawer', () => {
it('should show a drawer', () => {
mount(LayoutContainer, {
props: {
component: QuasarDrawer,
},
});
cy.dataCy('drawer').should('exist').dataCy('button').should('not.be.visible');
cy.get('.q-scrollarea .scroll').scrollTo('bottom', { duration: 500 }).dataCy('button').should('be.visible');
});
});

22
src/components/__tests__/QuasarPageSticky.spec.js
View File

@ -1,22 +0,0 @@
import { mount } from '@cypress/vue';
import LayoutContainer from 'app/test/cypress/wrappers/LayoutContainer.vue';
import QuasarPageSticky from '../QuasarPageSticky.vue';
describe('QuasarPageSticky', () => {
it('should show a sticky at the bottom-right of the page', () => {
mount(LayoutContainer, {
props: {
component: QuasarPageSticky,
title: 'Test',
},
});
cy.dataCy('button')
.should('be.visible')
.should(($el) => {
const rect = $el[0].getBoundingClientRect();
expect(rect.bottom).to.equal(window.innerHeight - 18);
expect(rect.right).to.equal(window.innerWidth - 18);
});
});
});

11
src/components/__tests__/QuasarTooltip.spec.js
View File

@ -1,11 +0,0 @@
import { mount } from '@cypress/vue';
import QuasarTooltip from '../QuasarTooltip.vue';
describe('QuasarTooltip', () => {
it('should show a tooltip', () => {
mount(QuasarTooltip);
cy.dataCy('button').trigger('mouseover');
cy.dataCy('tooltip').contains('Here I am!');
});
});

46
src/components/__tests__/UserPanel.spec.js Normal file
View File

@ -0,0 +1,46 @@
import { describe, expect, it, jest } from '@jest/globals';
import { createWrapper, axios, flushPromises } from 'app/test/jest/jestHelpers';
import UserPanel from '../UserPanel.vue';
const mockPush = jest.fn();
jest.mock('vue-router', () => ({
useRouter: () => ({
push: mockPush,
}),
}));
describe('UserPanel', () => {
describe('onMounted', () => {
it('should define the user into state', async () => {
const userMock = {
user: {
id: 1,
name: 'myName',
nickname: 'myNickName'
}
}
jest.spyOn(axios, 'get').mockResolvedValue(userMock);
const { vm } = createWrapper(UserPanel);
await flushPromises()
const expectedUser = expect.objectContaining(userMock.user)
expect(vm.state.getUser().value).toEqual(expectedUser);
});
it('should logout and notify the expected error', async () => {
jest.spyOn(axios, 'get').mockRejectedValue(new Error('error'));
const { vm } = createWrapper(UserPanel);
jest.spyOn(vm.quasar, 'notify');
await flushPromises()
expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
{ 'type': 'negative' }
));
});
});
});

8
src/components/models.ts
View File

@ -1,8 +0,0 @@
export interface Todo {
id: number;
content: string;
}
export interface Meta {
totalCount: number;
}

0
src/composables/useRole.ts → src/composables/useRole.js
View File

20
src/composables/useSession.ts → src/composables/useSession.js
View File

@ -1,26 +1,14 @@
import { useState } from './useState';
interface Session {
token: string;
keepLogin: boolean;
}
interface useSession {
getToken: () => string;
setToken: (data: Session) => void;
destroy: () => void;
isLoggedIn: () => boolean;
}
export function useSession(): useSession {
function getToken(): string {
export function useSession() {
function getToken() {
const localToken = localStorage.getItem('token');
const sessionToken = sessionStorage.getItem('token');
return localToken || sessionToken || '';
}
function setToken(data: Session): void {
function setToken(data) {
if (data.keepLogin) {
localStorage.setItem('token', data.token);
} else {
@ -28,7 +16,7 @@ export function useSession(): useSession {
}
}
function destroy(): void {
function destroy() {
localStorage.removeItem('token');
sessionStorage.getItem('token');

46
src/composables/useState.js Normal file
View File

@ -0,0 +1,46 @@
import { ref, computed } from 'vue';
const user = ref({
id: 0,
name: '',
nickname: '',
});
const roles = ref([]);
export function useState() {
function getUser() {
return computed(() => {
return {
id: user.value.id,
name: user.value.name,
nickname: user.value.nickname,
};
});
}
function setUser(data) {
user.value = {
id: data.id,
name: data.name,
nickname: data.nickname,
};
}
function getRoles() {
return computed(() => {
return roles.value;
});
}
function setRoles(data) {
roles.value = data;
}
return {
getUser,
setUser,
getRoles,
setRoles,
};
}

59
src/composables/useState.ts
View File

@ -1,59 +0,0 @@
import { ref, Ref, computed, ComputedRef } from 'vue';
interface User {
id: number;
username: string;
nickname: string;
}
interface useState {
getUser: () => ComputedRef<User>;
setUser: (data: User) => void;
getRoles: () => ComputedRef<string[]>;
setRoles: (data: string[]) => void;
}
const user: Ref<User> = ref({
id: 0,
username: '',
nickname: '',
});
const roles: Ref<string[]> = ref([]);
export function useState(): useState {
function getUser(): ComputedRef<User> {
return computed(() => {
return {
id: user.value.id,
username: user.value.username,
nickname: user.value.nickname,
};
});
}
function setUser(data: User): void {
user.value = {
id: data.id,
username: data.username,
nickname: data.nickname,
};
}
function getRoles(): ComputedRef<string[]> {
return computed(() => {
return roles.value;
});
}
function setRoles(data: string[]): void {
roles.value = data;
}
return {
getUser,
setUser,
getRoles,
setRoles,
};
}

7
src/env.d.ts vendored
View File

@ -1,7 +0,0 @@
declare namespace NodeJS {
interface ProcessEnv {
NODE_ENV: string;
VUE_ROUTER_MODE: 'hash' | 'history' | 'abstract' | undefined;
VUE_ROUTER_BASE: string | undefined;
}
}

0
src/filters/index.ts → src/filters/index.js
View File

3
src/filters/toLowerCase.js Normal file
View File

@ -0,0 +1,3 @@
export default function toLowerCase(value) {
return value.toLowerCase();
}

3
src/filters/toLowerCase.ts
View File

@ -1,3 +0,0 @@
export default function toLowerCase(value: string): string {
return value.toLowerCase();
}

0
src/i18n/en/index.ts → src/i18n/en/index.js
View File

0
src/i18n/es/index.ts → src/i18n/es/index.js
View File

0
src/i18n/index.ts → src/i18n/index.js
View File

1
src/index.template.html
View File

@ -18,7 +18,6 @@
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
<link rel="icon" type="image/ico" href="favicon.ico" />
</head>
<body>
<!-- DO NOT touch the following DIV -->
<div id="q-app"></div>

24
src/layouts/Main.vue → src/layouts/MainLayout.vue
View File

@ -1,3 +1,15 @@
<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);
function onToggleDrawer() {
drawer.value = !drawer.value;
}
</script>
<template>
<q-layout view="hHh lpR fFf">
<Navbar @toggle-drawer="onToggleDrawer()" />
@ -21,16 +33,4 @@
</q-layout>
</template>
<script lang="ts" 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);
function onToggleDrawer(): void {
drawer.value = !drawer.value;
}
</script>
<style lang="scss" scoped></style>

0
src/pages/Customer/Card/Card.vue → src/pages/Customer/Card/CustomerCard.vue
View File

0
src/pages/Customer/Customer.vue → src/pages/Customer/CustomerLayout.vue
View File

74
src/pages/Customer/List.vue
View File

@ -1,3 +1,32 @@
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const customers = [
{
id: 1101,
name: 'Bruce Wayne',
username: 'batman',
email: 'batman@gotham',
phone: '555-555-5555',
expanded: ref(false),
},
{
id: 1102,
name: 'James Gordon',
username: 'jamesgordon',
email: 'jamesgordon@gotham',
phone: '555-555-1111',
expanded: ref(false),
},
];
function navigate(id) {
router.push({ path: `/customer/${id}` });
}
</script>
<template>
<q-page class="q-pa-md">
<div class="column items-center q-gutter-y-md">
@ -38,7 +67,13 @@
</q-btn>
<q-separator vertical />
<q-card-actions vertical class="justify-between">
<q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(customer.id)" />
<q-btn
flat
round
color="orange"
icon="arrow_circle_right"
@click="navigate(customer.id)"
/>
<q-btn flat round color="accent" icon="preview" />
<q-btn flat round color="accent" icon="vn:ticket" />
<q-card-actions>
@ -100,43 +135,6 @@
</q-page>
</template>
<script lang="ts" setup>
import { ref, Ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
interface Customer {
id: number;
name: string;
username: string;
email: string;
phone: string;
expanded: Ref<boolean>;
}
const customers: Customer[] = [
{
id: 1101,
name: 'Bruce Wayne',
username: 'batman',
email: 'batman@gotham',
phone: '555-555-5555',
expanded: ref(false),
},
{
id: 1102,
name: 'James Gordon',
username: 'jamesgordon',
email: 'jamesgordon@gotham',
phone: '555-555-1111',
expanded: ref(false),
},
];
function navigate(id: number) {
router.push({ path: `/customer/${id}` });
}
</script>
<style lang="scss" scoped>
.card {
width: 100%;

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

@ -1,6 +1,84 @@
<script setup>
import { ref } from 'vue';
const slide = ref('style');
const slideText = 'Description text';
</script>
<template>
<q-page class="q-pa-md">
<q-banner
v-if="$q.screen.gt.xs"
inline-actions
rounded
class="bg-orange text-white q-mb-lg"
>
You have lost connection to the internet. This app is offline.
<template #action>
<q-btn flat label="Turn ON Wifi" />
<q-btn flat label="Dismiss" />
</template>
</q-banner>
<div class="row items-start wrap q-col-gutter-md q-mb-lg">
<div class="col-12 col-md">
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
<q-carousel
v-model="slide"
transition-prev="scale"
transition-next="scale"
swipeable
animated
control-color="white"
navigation
padding
arrows
height="300px"
class="bg-orange-3 text-white shadow-1 rounded-borders"
>
<q-carousel-slide name="style" class="column no-wrap flex-center">
<q-icon name="style" size="56px" />
<div class="q-mt-md text-center">{{ slideText }}</div>
</q-carousel-slide>
<q-carousel-slide name="tv" class="column no-wrap flex-center">
<q-icon name="live_tv" size="56px" />
<div class="q-mt-md text-center">{{ slideText }}</div>
</q-carousel-slide>
<q-carousel-slide name="layers" class="column no-wrap flex-center">
<q-icon name="layers" size="56px" />
<div class="q-mt-md text-center">{{ slideText }}</div>
</q-carousel-slide>
<q-carousel-slide name="map" class="column no-wrap flex-center">
<q-icon name="terrain" size="56px" />
<div class="q-mt-md text-center">{{ slideText }}</div>
</q-carousel-slide>
</q-carousel>
</div>
<div class="col-12 col-md">
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
<q-card class="q-pa-md">Dashboard page..</q-card>
</div>
<div class="col-12 col-md">
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
<q-card class="q-pa-md">Dashboard page..</q-card>
</div>
</div>
<div class="row items-start q-col-gutter-md q-mb-lg">
<div class="col-12 col-md">
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
<q-card class="q-pa-md">Dashboard page..</q-card>
</div>
<div class="col-12 col-md">
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
<q-card class="q-pa-md">Dashboard page..</q-card>
</div>
</div>
<div class="row items-start q-col-gutter-md q-mb-lg">
<div class="col">
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
<q-card class="q-pa-md">Dashboard page..</q-card>
</div>
</div>
</q-page>
</template>

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

@ -1,60 +1,4 @@
<template>
<q-layout>
<q-header class="transparent">
<q-toolbar>
<q-space></q-space>
<q-toggle
:label="t(`globals.lang['${locale}']`)"
icon="public"
color="orange"
false-value="es"
true-value="en"
v-model="locale"
/>
<q-toggle v-model="darkMode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
</q-toolbar>
</q-header>
<q-page-container>
<q-page>
<div id="login">
<q-card class="login q-pa-xl">
<q-img src="~/assets/logo.svg" alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
<q-form @submit="onSubmit" class="q-gutter-md">
<q-input
filled
color="orange"
v-model="username"
:label="t('login.username')"
lazy-rules
:rules="[
(val: string) => (val && val.length > 0) || 'Please type something',
]"
/>
<q-input
filled
color="orange"
type="password"
v-model="password"
:label="t('login.password')"
lazy-rules
:rules="[
(val: string) => (val && val.length > 0) || 'Please type something',
]"
/>
<q-toggle v-model="keepLogin" :label="t('login.keepLogin')" color="orange" />
<div>
<q-btn :label="t('login.submit')" type="submit" color="orange" />
</div>
</q-form>
</q-card>
</div>
</q-page>
</q-page-container>
</q-layout>
</template>
<script lang="ts" setup>
<script setup>
import { computed, ref } from 'vue';
import { Dark, useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
@ -73,20 +17,21 @@ let password = ref('');
let keepLogin = ref(true);
const darkMode = computed({
get(): boolean {
get() {
return Dark.isActive;
},
set(value: boolean): void {
set(value) {
Dark.set(value);
},
});
async function onSubmit(): Promise<void> {
async function onSubmit() {
try {
const { data } = await axios.post('/api/accounts/login', {
user: username.value,
password: password.value,
});
session.setToken({
token: data.token,
keepLogin: keepLogin.value,
@ -96,6 +41,7 @@ async function onSubmit(): Promise<void> {
message: t('login.loginSuccess'),
type: 'positive',
});
await router.push({ path: '/dashboard' });
} catch (error) {
if (axios.isAxiosError(error)) {
@ -116,6 +62,77 @@ async function onSubmit(): Promise<void> {
}
</script>
<template>
<q-layout>
<q-header class="transparent">
<q-toolbar>
<q-space></q-space>
<q-toggle
:label="t(`globals.lang['${locale}']`)"
icon="public"
color="orange"
false-value="es"
true-value="en"
v-model="locale"
/>
<q-toggle
v-model="darkMode"
checked-icon="dark_mode"
color="orange"
unchecked-icon="light_mode"
/>
</q-toolbar>
</q-header>
<q-page-container>
<q-page>
<div id="login">
<q-card class="login q-pa-xl">
<q-img
src="~/assets/logo.svg"
alt="Logo"
fit="contain"
:ratio="16 / 9"
class="q-mb-md"
/>
<q-form @submit="onSubmit" class="q-gutter-md">
<q-input
filled
color="orange"
v-model="username"
:label="t('login.username')"
lazy-rules
:rules="[
(val) => (val && val.length > 0) || 'Please type something',
]"
/>
<q-input
filled
color="orange"
type="password"
v-model="password"
:label="t('login.password')"
lazy-rules
:rules="[
(val) => (val && val.length > 0) || 'Please type something',
]"
/>
<q-toggle
v-model="keepLogin"
:label="t('login.keepLogin')"
color="orange"
/>
<div>
<q-btn :label="t('login.submit')" type="submit" color="orange" />
</div>
</q-form>
</q-card>
</div>
</q-page>
</q-page-container>
</q-layout>
</template>
<style lang="scss" scoped>
#login {
display: flex;

46
src/pages/Login/__tests__/Login.spec.js Normal file
View File

@ -0,0 +1,46 @@
import { jest, describe, expect, it, beforeAll } from '@jest/globals';
import { createWrapper, axios } from 'app/test/jest/jestHelpers';
import Login from '../Login.vue';
const mockPush = jest.fn();
jest.mock('vue-router', () => ({
useRouter: () => ({
push: mockPush,
}),
}));
describe('Login', () => {
let vm;
beforeAll(() => {
vm = createWrapper(Login).vm;
});
it('should successfully set the token into session', async () => {
jest.spyOn(axios, 'post').mockResolvedValue({ data: { token: 'token' } });
jest.spyOn(vm.quasar, 'notify')
expect(vm.session.getToken()).toEqual('');
await vm.onSubmit();
expect(vm.session.getToken()).toEqual('token');
expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
{ 'type': 'positive' }
));
vm.session.destroy();
});
it('should not set the token into session if any error occurred', async () => {
jest.spyOn(axios, 'post').mockRejectedValue(new Error('error'));
jest.spyOn(vm.quasar, 'notify')
expect(vm.session.getToken()).toEqual('');
await vm.onSubmit();
expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
{ 'type': 'negative' }
));
});
});

17
src/pages/NotFound.vue
View File

@ -5,15 +5,16 @@
<div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
<q-btn class="q-mt-xl" color="white" text-color="blue" unelevated to="/" label="Go Home" no-caps />
<q-btn
class="q-mt-xl"
color="white"
text-color="blue"
unelevated
to="/"
label="Go Home"
no-caps
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Error404',
});
</script>

7
src/quasar.d.ts vendored
View File

@ -1,7 +0,0 @@
// Forces TS to apply `@quasar/app` augmentations of `quasar` package
// Removing this would break `quasar/wrappers` imports as those typings are declared
// into `@quasar/app`
// As a side effect, since `@quasar/app` reference `quasar` to augment it,
// this declaration also apply `quasar` own
// augmentations (eg. adds `$q` into Vue component context)
/// <reference types="@quasar/app" />

32
src/router/index.js Normal file
View File

@ -0,0 +1,32 @@
import { route } from 'quasar/wrappers';
import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router';
import routes from './routes';
/*
* If not building with SSR mode, you can
* directly export the Router instantiation;
*
* The function below can be async too; either use
* async/await or return a Promise which resolves
* with the Router instance.
*/
export default route(function (/* { store, ssrContext } */) {
const createHistory = process.env.SERVER
? createMemoryHistory
: process.env.VUE_ROUTER_MODE === 'history'
? createWebHistory
: createWebHashHistory;
const Router = createRouter({
scrollBehavior: () => ({ left: 0, top: 0 }),
routes,
// Leave this as is and make changes in quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode
// quasar.conf.js -> build -> publicPath
history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE),
});
return Router;
});

104
src/router/index.ts
View File

@ -1,104 +0,0 @@
import { route } from 'quasar/wrappers';
import { createMemoryHistory, createRouter, createWebHashHistory, createWebHistory } 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
* directly export the Router instantiation;
*
* The function below can be async too; either use
* async/await or return a Promise which resolves
* with the Router instance.
*/
interface ItemMeta {
title?: string;
icon?: string;
roles?: string[];
}
export default route(function (/* { store, ssrContext } */) {
const createHistory = process.env.SERVER
? createMemoryHistory
: process.env.VUE_ROUTER_MODE === 'history'
? createWebHistory
: createWebHashHistory;
const Router = createRouter({
scrollBehavior: () => ({ left: 0, top: 0 }),
routes,
// Leave this as is and make changes in quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode
// quasar.conf.js -> build -> publicPath
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 as ItemMeta;
if (meta.roles)
return role.hasAny(meta.roles)
return true;
});
if (droles) {
next();
} else {
next({ path: '/' });
}
}
});
Router.afterEach((to) => {
interface Meta {
title?: string;
}
const { t } = i18n.global;
let title = '';
if (to.matched && to.matched.length > 2) {
const parent = to.matched[1];
const parentMeta: Meta = parent.meta;
if (parentMeta && parentMeta.title) {
title += t(`pages.${parentMeta.title}`);
}
}
const childMeta: Meta = to.meta;
if (childMeta && childMeta.title) {
if (title != '') title += ': ';
const childTitle = t(`pages.${childMeta.title}`);
if (to.params && to.params.id) {
const idParam = to.params.id;
if (idParam instanceof Array) {
title += `${idParam[0]} - ${childTitle}`
} else {
title += `${idParam} - ${childTitle}`;
}
} else {
title += t(`pages.${childMeta.title}`);
}
}
document.title = title;
});
return Router;
});

5
src/router/routes.ts → src/router/routes.js
View File

@ -1,8 +1,7 @@
import { RouteRecordRaw } from 'vue-router';
import customer from './modules/customer';
import ticket from './modules/ticket';
const routes: RouteRecordRaw[] = [
const routes = [
{
path: '/login',
name: 'Login',
@ -12,7 +11,7 @@ const routes: RouteRecordRaw[] = [
{
path: '/',
name: 'Main',
component: () => import('../layouts/Main.vue'),
component: () => import('../layouts/MainLayout.vue'),
redirect: { name: 'Dashboard' },
children: [
{

7
src/shims-vue.d.ts vendored
View File

@ -1,7 +0,0 @@
// Mocks all files ending in `.vue` showing them as plain Vue instances
/* eslint-disable */
declare module '*.vue' {
import type { DefineComponent } from 'vue';
const component: DefineComponent<{}, {}, any>;
export default component;
}

40
test/cypress/integration/home.spec.js
View File

@ -1,40 +0,0 @@
/// <reference types="cypress" />
// Use `cy.dataCy` custom command for more robust tests
// See https://docs.cypress.io/guides/references/best-practices.html#Selecting-Elements
// ** This file is an example of how to write Cypress tests, you can safely delete it **
// This test will pass when run against a clean Quasar project
describe('Landing', () => {
beforeEach(() => {
cy.visit('/');
});
it('.should() - assert that <title> is correct', () => {
cy.title().should('include', 'Salix');
});
});
// ** The following code is an example to show you how to write some tests for your home page **
//
// describe('Home page tests', () => {
// beforeEach(() => {
// cy.visit('/');
// });
// it('has pretty background', () => {
// cy.dataCy('landing-wrapper')
// .should('have.css', 'background').and('match', /(".+(\/img\/background).+\.png)/);
// });
// it('has pretty logo', () => {
// cy.dataCy('landing-wrapper img')
// .should('have.class', 'logo-main')
// .and('have.attr', 'src')
// .and('match', /^(data:image\/svg\+xml).+/);
// });
// it('has very important information', () => {
// cy.dataCy('instruction-wrapper')
// .should('contain', 'SETUP INSTRUCTIONS')
// .and('contain', 'Configure Authentication')
// .and('contain', 'Database Configuration and CRUD operations')
// .and('contain', 'Continuous Integration & Continuous Deployment CI/CD');
// });
// });

13
test/cypress/integration/login.spec.js Executable file
View File

@ -0,0 +1,13 @@
/// <reference types="cypress" />
describe('Login', () => {
beforeEach(() => {
cy.visit('/#/login');
});
it('should log in', () => {
cy.get('input[aria-label="Username"]').type('developer')
cy.get('input[aria-label="Password"]').type('nightmare')
cy.get('button[type="submit"]').click()
});
});

12
test/cypress/plugins/index.js
View File

@ -15,14 +15,14 @@
// cypress/plugins/index.js
const { injectDevServer } = require('@quasar/quasar-app-extension-testing-e2e-cypress/cct-dev-server');
// const {injectDevServer} = require('@quasar/quasar-app-extension-testing-e2e-cypress/cct-dev-server');
/**
* @type {Cypress.PluginConfig}
*/
// /**
// * @type {Cypress.PluginConfig}
// */
module.exports = async (on, config) => {
// Enable component testing, you can safely remove this
// if you don't plan to use Cypress for unit tests
// // Enable component testing, you can safely remove this
// // if you don't plan to use Cypress for unit tests
// if (config.testingType === 'component') {
// await injectDevServer(on, config);
// }

41
test/jest/__tests__/MyButton.spec.js
View File

@ -1,41 +0,0 @@
import { describe, expect, it } from '@jest/globals';
import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
import { mount, shallowMount } from '@vue/test-utils';
import { QBtn } from 'quasar';
import MyButton from './demo/MyButton.vue';
// Specify here Quasar config you'll need to test your component
installQuasarPlugin();
describe('MyButton', () => {
it('has increment method', () => {
const wrapper = mount(MyButton);
const { vm } = wrapper;
expect(typeof vm.increment).toBe('function');
});
it('can check the inner text content', () => {
const wrapper = mount(MyButton);
const { vm } = wrapper;
expect(vm.$el.textContent).toContain('rocket muffin');
expect(wrapper.find('.content').text()).toContain('rocket muffin');
});
it('sets the correct default data', () => {
const wrapper = mount(MyButton);
const { vm } = wrapper;
expect(typeof vm.counter).toBe('number');
expect(vm.counter).toBe(0);
});
it('correctly updates counter when button is pressed', async () => {
const wrapper = shallowMount(MyButton);
const { vm } = wrapper;
const button = wrapper.findComponent(QBtn);
await button.trigger('click');
expect(vm.counter).toBe(1);
});
});

18
test/jest/__tests__/MyDialog.spec.js
View File

@ -1,18 +0,0 @@
import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
import { describe, expect, it } from '@jest/globals';
import { mount } from '@vue/test-utils';
import MyDialog from './demo/MyDialog.vue';
installQuasarPlugin();
describe('MyDialog', () => {
it('should mount MyDialog', () => {
const wrapper = mount(MyDialog, {
data: () => ({
isDialogOpen: true,
}),
});
expect(wrapper.exists()).toBe(true);
});
});

23
test/jest/__tests__/demo/MyButton.vue
View File

@ -1,23 +0,0 @@
<script lang="ts" setup>
import { ref } from 'vue';
const props = defineProps({
incrementStep: {
type: Number,
default: 1,
},
});
const counter = ref(0);
const input = ref('rocket muffin');
function increment() {
counter.value += props.incrementStep;
}
</script>
<template>
<div>
<p class="content">{{ input }}</p>
<span>{{ counter }}</span>
<q-btn class="button" @click="increment()"></q-btn>
</div>
</template>

12
test/jest/__tests__/demo/MyDialog.vue
View File

@ -1,12 +0,0 @@
<script lang="ts" setup>
import { ref } from 'vue';
const isDialogOpen = ref(false);
</script>
<template>
<q-dialog v-model="isDialogOpen">
<q-card>
<q-card-section>Custom dialog which should be tested</q-card-section>
</q-card>
</q-dialog>
</template>

28
test/jest/jestHelpers.js Normal file
View File

@ -0,0 +1,28 @@
import { mount, flushPromises } from '@vue/test-utils';
import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
import { i18n } from 'src/boot/i18n';
import { Notify } from 'quasar';
import axios from 'axios';
// Specify here Quasar config you'll need to test your component
installQuasarPlugin({
plugins: {
Notify
}
});
export function createWrapper(component) {
const wrapper = mount(component, {
global: {
plugins: [i18n]
}
});
const vm = wrapper.vm;
return { vm, wrapper };
}
export {
axios,
flushPromises
}

6
tsconfig.json
View File

@ -1,6 +0,0 @@
{
"extends": "@quasar/app/tsconfig-preset",
"compilerOptions": {
"baseUrl": "."
}
}