forked from verdnatura/hedera-web
Merge pull request 'Home view adjustments' (!70) from wbuezas/hedera-web-mindshore:feature/HomeViewAdjustments into 4922-vueMigration
Reviewed-on: verdnatura/hedera-web#70 Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>
This commit is contained in:
commit
d589b89a62
18
.eslintrc.js
18
.eslintrc.js
|
|
@ -7,12 +7,12 @@ module.exports = {
|
|||
parserOptions: {
|
||||
parser: '@babel/eslint-parser',
|
||||
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
|
||||
sourceType: 'module', // Allows for the use of imports
|
||||
sourceType: 'module' // Allows for the use of imports
|
||||
},
|
||||
|
||||
env: {
|
||||
browser: true,
|
||||
'vue/setup-compiler-macros': true,
|
||||
'vue/setup-compiler-macros': true
|
||||
},
|
||||
|
||||
extends: [
|
||||
|
|
@ -26,7 +26,7 @@ module.exports = {
|
|||
// 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
|
||||
// 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
|
||||
|
||||
'standard',
|
||||
'standard'
|
||||
],
|
||||
|
||||
plugins: ['vue', 'prettier'],
|
||||
|
|
@ -41,7 +41,7 @@ module.exports = {
|
|||
__QUASAR_SSR_PWA__: 'readonly',
|
||||
process: 'readonly',
|
||||
Capacitor: 'readonly',
|
||||
chrome: 'readonly',
|
||||
chrome: 'readonly'
|
||||
},
|
||||
|
||||
// add your custom rules here
|
||||
|
|
@ -66,7 +66,7 @@ module.exports = {
|
|||
'prefer-promise-reject-errors': 'off',
|
||||
semi: 'off',
|
||||
// allow debugger during development only
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
|
|
@ -75,8 +75,8 @@ module.exports = {
|
|||
rules: {
|
||||
semi: 'off',
|
||||
indent: ['error', 4, { SwitchCase: 1 }],
|
||||
'space-before-function-paren': 'off',
|
||||
},
|
||||
},
|
||||
],
|
||||
'space-before-function-paren': 'off'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
18
README.md
18
README.md
|
|
@ -5,17 +5,26 @@ Hedera is the main web page for Verdnatura.
|
|||
## Getting Started
|
||||
|
||||
Required dependencies.
|
||||
* PHP >= 7.0
|
||||
* Node.js >= 8.0
|
||||
|
||||
- PHP >= 7.0
|
||||
- Node.js >= 8.0
|
||||
|
||||
Launch application for development.
|
||||
|
||||
```
|
||||
$ npm run dev
|
||||
$ npm run dev
|
||||
```
|
||||
|
||||
Launch project backend.
|
||||
|
||||
```
|
||||
$ php -S 127.0.0.1:3002 -t . index.php
|
||||
|
||||
Run server side method from command line.
|
||||
```
|
||||
$ php hedera-web.php -m method_path
|
||||
|
||||
$ php hedera-web.php -m method_path
|
||||
|
||||
```
|
||||
|
||||
## Built with
|
||||
|
|
@ -23,3 +32,4 @@ $ php hedera-web.php -m method_path
|
|||
* [Webpack](https://webpack.js.org/)
|
||||
* [MooTools](https://mootools.net/)
|
||||
* [TinyMCE](https://www.tinymce.com/)
|
||||
```
|
||||
|
|
|
|||
464
quasar.config.js
464
quasar.config.js
|
|
@ -8,259 +8,249 @@
|
|||
// Configuration for your app
|
||||
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js
|
||||
|
||||
const ESLintPlugin = require('eslint-webpack-plugin')
|
||||
const path = require('path')
|
||||
const ESLintPlugin = require('eslint-webpack-plugin');
|
||||
const path = require('path');
|
||||
|
||||
const { configure } = require('quasar/wrappers')
|
||||
const { configure } = require('quasar/wrappers');
|
||||
|
||||
module.exports = configure(function (ctx) {
|
||||
return {
|
||||
// https://v2.quasar.dev/quasar-cli-webpack/supporting-ts
|
||||
supportTS: false,
|
||||
return {
|
||||
// https://v2.quasar.dev/quasar-cli-webpack/supporting-ts
|
||||
supportTS: false,
|
||||
|
||||
// https://v2.quasar.dev/quasar-cli-webpack/prefetch-feature
|
||||
// preFetch: true,
|
||||
// https://v2.quasar.dev/quasar-cli-webpack/prefetch-feature
|
||||
// preFetch: true,
|
||||
|
||||
// app boot file (/src/boot)
|
||||
// --> boot files are part of "main.js"
|
||||
// https://v2.quasar.dev/quasar-cli-webpack/boot-files
|
||||
boot: [
|
||||
'i18n',
|
||||
'axios',
|
||||
'error-handler',
|
||||
'app'
|
||||
],
|
||||
// app boot file (/src/boot)
|
||||
// --> boot files are part of "main.js"
|
||||
// https://v2.quasar.dev/quasar-cli-webpack/boot-files
|
||||
boot: ['i18n', 'axios', 'error-handler', 'app'],
|
||||
|
||||
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
|
||||
css: [
|
||||
'app.scss',
|
||||
'width.scss',
|
||||
'responsive.scss'
|
||||
],
|
||||
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
|
||||
css: ['app.scss', 'width.scss', 'responsive.scss'],
|
||||
|
||||
// https://github.com/quasarframework/quasar/tree/dev/extras
|
||||
extras: [
|
||||
// 'ionicons-v4',
|
||||
// 'mdi-v5',
|
||||
// 'fontawesome-v6',
|
||||
// 'eva-icons',
|
||||
// 'themify',
|
||||
// 'line-awesome',
|
||||
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
|
||||
// https://github.com/quasarframework/quasar/tree/dev/extras
|
||||
extras: [
|
||||
// 'ionicons-v4',
|
||||
// 'mdi-v5',
|
||||
// 'fontawesome-v6',
|
||||
// 'eva-icons',
|
||||
// 'themify',
|
||||
// 'line-awesome',
|
||||
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
|
||||
|
||||
'roboto-font', // optional, you are not bound to it
|
||||
'material-icons' // optional, you are not bound to it
|
||||
],
|
||||
'roboto-font', // optional, you are not bound to it
|
||||
'material-icons' // optional, you are not bound to it
|
||||
],
|
||||
|
||||
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-build
|
||||
build: {
|
||||
vueRouterMode: 'hash', // available values: 'hash', 'history'
|
||||
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-build
|
||||
build: {
|
||||
vueRouterMode: 'hash', // available values: 'hash', 'history'
|
||||
|
||||
// transpile: false,
|
||||
// publicPath: '/',
|
||||
// transpile: false,
|
||||
// publicPath: '/',
|
||||
|
||||
// Add dependencies for transpiling with Babel (Array of string/regex)
|
||||
// (from node_modules, which are by default not transpiled).
|
||||
// Applies only if "transpile" is set to true.
|
||||
// transpileDependencies: [],
|
||||
// Add dependencies for transpiling with Babel (Array of string/regex)
|
||||
// (from node_modules, which are by default not transpiled).
|
||||
// Applies only if "transpile" is set to true.
|
||||
// transpileDependencies: [],
|
||||
|
||||
// rtl: true, // https://quasar.dev/options/rtl-support
|
||||
// preloadChunks: true,
|
||||
// showProgress: false,
|
||||
// gzip: true,
|
||||
// analyze: true,
|
||||
// rtl: true, // https://quasar.dev/options/rtl-support
|
||||
// preloadChunks: true,
|
||||
// showProgress: false,
|
||||
// gzip: true,
|
||||
// analyze: true,
|
||||
|
||||
// Options below are automatically set depending on the env, set them if you want to override
|
||||
// extractCSS: false,
|
||||
// Options below are automatically set depending on the env, set them if you want to override
|
||||
// extractCSS: false,
|
||||
|
||||
// https://v2.quasar.dev/quasar-cli-webpack/handling-webpack
|
||||
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
|
||||
// https://v2.quasar.dev/quasar-cli-webpack/handling-webpack
|
||||
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
|
||||
|
||||
chainWebpack (chain) {
|
||||
chain.plugin('eslint-webpack-plugin')
|
||||
.use(ESLintPlugin, [{ extensions: ['js', 'vue'] }])
|
||||
chainWebpack(chain) {
|
||||
chain
|
||||
.plugin('eslint-webpack-plugin')
|
||||
.use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
|
||||
|
||||
chain.module
|
||||
.rule('i18n-resource')
|
||||
.test(/\.(json5?|ya?ml)$/)
|
||||
.include.add(path.resolve(__dirname, './src/i18n'))
|
||||
.end()
|
||||
.type('javascript/auto')
|
||||
.use('i18n-resource')
|
||||
.loader('@intlify/vue-i18n-loader')
|
||||
chain.module
|
||||
.rule('i18n')
|
||||
.resourceQuery(/blockType=i18n/)
|
||||
.type('javascript/auto')
|
||||
.use('i18n')
|
||||
.loader('@intlify/vue-i18n-loader')
|
||||
}
|
||||
chain.module
|
||||
.rule('i18n-resource')
|
||||
.test(/\.(json5?|ya?ml)$/)
|
||||
.include.add(path.resolve(__dirname, './src/i18n'))
|
||||
.end()
|
||||
.type('javascript/auto')
|
||||
.use('i18n-resource')
|
||||
.loader('@intlify/vue-i18n-loader');
|
||||
chain.module
|
||||
.rule('i18n')
|
||||
.resourceQuery(/blockType=i18n/)
|
||||
.type('javascript/auto')
|
||||
.use('i18n')
|
||||
.loader('@intlify/vue-i18n-loader');
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-devServer
|
||||
devServer: {
|
||||
server: {
|
||||
type: 'http'
|
||||
},
|
||||
port: 8080,
|
||||
open: false,
|
||||
// static: __dirname,
|
||||
headers: { 'Access-Control-Allow-Origin': '*' },
|
||||
// stats: { chunks: false },
|
||||
proxy: {
|
||||
'/api': 'http://localhost:3000',
|
||||
'/': {
|
||||
target: 'http://localhost:3001',
|
||||
bypass: req => (req.path !== '/' ? req.path : null)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-devServer
|
||||
devServer: {
|
||||
server: {
|
||||
type: 'http'
|
||||
},
|
||||
port: 8080,
|
||||
open: false,
|
||||
// static: __dirname,
|
||||
headers: { 'Access-Control-Allow-Origin': '*' },
|
||||
// stats: { chunks: false },
|
||||
proxy: {
|
||||
'/api': 'http://localhost:3000',
|
||||
'/': {
|
||||
target: 'http://localhost:3001',
|
||||
bypass: (req) => req.path !== '/' ? req.path : null
|
||||
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-framework
|
||||
framework: {
|
||||
config: {},
|
||||
autoImportComponentCase: 'pascal',
|
||||
// iconSet: 'material-icons', // Quasar icon set
|
||||
// lang: 'en-US', // Quasar language pack
|
||||
|
||||
// For special cases outside of where the auto-import strategy can have an impact
|
||||
// (like functional components as one of the examples),
|
||||
// you can manually specify Quasar components/directives to be available everywhere:
|
||||
//
|
||||
// components: [],
|
||||
// directives: [],
|
||||
|
||||
// Quasar plugins
|
||||
plugins: ['Notify']
|
||||
},
|
||||
|
||||
// animations: 'all', // --- includes all animations
|
||||
// https://quasar.dev/options/animations
|
||||
animations: [],
|
||||
|
||||
// https://v2.quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr
|
||||
ssr: {
|
||||
pwa: false,
|
||||
|
||||
// manualStoreHydration: true,
|
||||
// manualPostHydrationTrigger: true,
|
||||
|
||||
prodPort: 3000, // The default port that the production server should use
|
||||
// (gets superseded if process.env.PORT is specified at runtime)
|
||||
|
||||
maxAge: 1000 * 60 * 60 * 24 * 30,
|
||||
// Tell browser when a file from the server should expire from cache (in ms)
|
||||
|
||||
chainWebpackWebserver(chain) {
|
||||
chain
|
||||
.plugin('eslint-webpack-plugin')
|
||||
.use(ESLintPlugin, [{ extensions: ['js'] }]);
|
||||
},
|
||||
|
||||
middlewares: [
|
||||
ctx.prod ? 'compression' : '',
|
||||
'render' // keep this as last one
|
||||
]
|
||||
},
|
||||
|
||||
// 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) {
|
||||
chain
|
||||
.plugin('eslint-webpack-plugin')
|
||||
.use(ESLintPlugin, [{ extensions: ['js'] }]);
|
||||
},
|
||||
|
||||
manifest: {
|
||||
name: 'Hedera',
|
||||
short_name: 'Hedera',
|
||||
description: "Verdnatura's webshop",
|
||||
display: 'standalone',
|
||||
orientation: 'portrait',
|
||||
background_color: '#ffffff',
|
||||
theme_color: '#027be3',
|
||||
icons: [
|
||||
{
|
||||
src: 'icons/icon-128x128.png',
|
||||
sizes: '128x128',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: 'icons/icon-192x192.png',
|
||||
sizes: '192x192',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: 'icons/icon-256x256.png',
|
||||
sizes: '256x256',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: 'icons/icon-384x384.png',
|
||||
sizes: '384x384',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: 'icons/icon-512x512.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
// 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://v2.quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor
|
||||
capacitor: {
|
||||
hideSplashscreen: true
|
||||
},
|
||||
|
||||
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron
|
||||
electron: {
|
||||
bundler: 'packager', // 'packager' or 'builder'
|
||||
|
||||
packager: {
|
||||
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
|
||||
// OS X / Mac App Store
|
||||
// appBundleId: '',
|
||||
// appCategoryType: '',
|
||||
// osxSign: '',
|
||||
// protocol: 'myapp://path',
|
||||
// Windows only
|
||||
// win32metadata: { ... }
|
||||
},
|
||||
|
||||
builder: {
|
||||
// https://www.electron.build/configuration/configuration
|
||||
|
||||
appId: 'hedera-web'
|
||||
},
|
||||
|
||||
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
|
||||
|
||||
chainWebpackMain(chain) {
|
||||
chain
|
||||
.plugin('eslint-webpack-plugin')
|
||||
.use(ESLintPlugin, [{ extensions: ['js'] }]);
|
||||
},
|
||||
|
||||
chainWebpackPreload(chain) {
|
||||
chain
|
||||
.plugin('eslint-webpack-plugin')
|
||||
.use(ESLintPlugin, [{ extensions: ['js'] }]);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-framework
|
||||
framework: {
|
||||
config: {},
|
||||
autoImportComponentCase: 'pascal',
|
||||
// iconSet: 'material-icons', // Quasar icon set
|
||||
// lang: 'en-US', // Quasar language pack
|
||||
|
||||
// For special cases outside of where the auto-import strategy can have an impact
|
||||
// (like functional components as one of the examples),
|
||||
// you can manually specify Quasar components/directives to be available everywhere:
|
||||
//
|
||||
// components: [],
|
||||
// directives: [],
|
||||
|
||||
// Quasar plugins
|
||||
plugins: [
|
||||
'Notify'
|
||||
]
|
||||
},
|
||||
|
||||
// animations: 'all', // --- includes all animations
|
||||
// https://quasar.dev/options/animations
|
||||
animations: [],
|
||||
|
||||
// https://v2.quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr
|
||||
ssr: {
|
||||
pwa: false,
|
||||
|
||||
// manualStoreHydration: true,
|
||||
// manualPostHydrationTrigger: true,
|
||||
|
||||
prodPort: 3000, // The default port that the production server should use
|
||||
// (gets superseded if process.env.PORT is specified at runtime)
|
||||
|
||||
maxAge: 1000 * 60 * 60 * 24 * 30,
|
||||
// Tell browser when a file from the server should expire from cache (in ms)
|
||||
|
||||
chainWebpackWebserver (chain) {
|
||||
chain.plugin('eslint-webpack-plugin')
|
||||
.use(ESLintPlugin, [{ extensions: ['js'] }])
|
||||
},
|
||||
|
||||
middlewares: [
|
||||
ctx.prod ? 'compression' : '',
|
||||
'render' // keep this as last one
|
||||
]
|
||||
},
|
||||
|
||||
// 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) {
|
||||
chain.plugin('eslint-webpack-plugin')
|
||||
.use(ESLintPlugin, [{ extensions: ['js'] }])
|
||||
},
|
||||
|
||||
manifest: {
|
||||
name: 'Hedera',
|
||||
short_name: 'Hedera',
|
||||
description: 'Verdnatura\'s webshop',
|
||||
display: 'standalone',
|
||||
orientation: 'portrait',
|
||||
background_color: '#ffffff',
|
||||
theme_color: '#027be3',
|
||||
icons: [
|
||||
{
|
||||
src: 'icons/icon-128x128.png',
|
||||
sizes: '128x128',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: 'icons/icon-192x192.png',
|
||||
sizes: '192x192',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: 'icons/icon-256x256.png',
|
||||
sizes: '256x256',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: 'icons/icon-384x384.png',
|
||||
sizes: '384x384',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: 'icons/icon-512x512.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
// 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://v2.quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor
|
||||
capacitor: {
|
||||
hideSplashscreen: true
|
||||
},
|
||||
|
||||
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron
|
||||
electron: {
|
||||
bundler: 'packager', // 'packager' or 'builder'
|
||||
|
||||
packager: {
|
||||
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
|
||||
|
||||
// OS X / Mac App Store
|
||||
// appBundleId: '',
|
||||
// appCategoryType: '',
|
||||
// osxSign: '',
|
||||
// protocol: 'myapp://path',
|
||||
|
||||
// Windows only
|
||||
// win32metadata: { ... }
|
||||
},
|
||||
|
||||
builder: {
|
||||
// https://www.electron.build/configuration/configuration
|
||||
|
||||
appId: 'hedera-web'
|
||||
},
|
||||
|
||||
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
|
||||
|
||||
chainWebpackMain (chain) {
|
||||
chain.plugin('eslint-webpack-plugin')
|
||||
.use(ESLintPlugin, [{ extensions: ['js'] }])
|
||||
},
|
||||
|
||||
chainWebpackPreload (chain) {
|
||||
chain.plugin('eslint-webpack-plugin')
|
||||
.use(ESLintPlugin, [{ extensions: ['js'] }])
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { boot } from 'quasar/wrappers'
|
||||
import { Connection } from '../js/db/connection'
|
||||
import { userStore } from 'stores/user'
|
||||
import axios from 'axios'
|
||||
import { boot } from 'quasar/wrappers';
|
||||
import { Connection } from '../js/db/connection';
|
||||
import { userStore } from 'stores/user';
|
||||
import axios from 'axios';
|
||||
|
||||
// Be careful when using SSR for cross-request state pollution
|
||||
// due to creating a Singleton instance here;
|
||||
|
|
@ -11,32 +11,33 @@ import axios from 'axios'
|
|||
// for each client)
|
||||
const api = axios.create({
|
||||
baseURL: `//${location.hostname}:${location.port}/api/`
|
||||
})
|
||||
});
|
||||
|
||||
const jApi = new Connection()
|
||||
const jApi = new Connection();
|
||||
|
||||
export default boot(({ app }) => {
|
||||
const user = userStore()
|
||||
function addToken (config) {
|
||||
const user = userStore();
|
||||
function addToken(config) {
|
||||
if (user.token) {
|
||||
config.headers.Authorization = user.token
|
||||
config.headers.Authorization = user.token;
|
||||
}
|
||||
return config
|
||||
return config;
|
||||
}
|
||||
api.interceptors.request.use(addToken)
|
||||
jApi.use(addToken)
|
||||
api.interceptors.request.use(addToken);
|
||||
jApi.use(addToken);
|
||||
|
||||
// for use inside Vue files (Options API) through this.$axios and this.$api
|
||||
|
||||
app.config.globalProperties.$axios = axios
|
||||
app.config.globalProperties.$axios = axios;
|
||||
// ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
|
||||
// so you won't necessarily have to import axios in each vue file
|
||||
|
||||
app.config.globalProperties.$api = api
|
||||
app.config.globalProperties.$api = api;
|
||||
// ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
|
||||
// so you can easily perform requests against your app's API
|
||||
|
||||
app.config.globalProperties.$jApi = jApi
|
||||
})
|
||||
app.config.globalProperties.$jApi = jApi;
|
||||
app.provide('jApi', jApi);
|
||||
});
|
||||
|
||||
export { api, jApi }
|
||||
export { api, jApi };
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { appStore } from 'stores/app';
|
||||
|
||||
const $props = defineProps({
|
||||
baseURL: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
storage: {
|
||||
type: [String, Number],
|
||||
default: 'Images'
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'full'
|
||||
},
|
||||
zoomSize: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'lg'
|
||||
},
|
||||
id: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
const app = appStore();
|
||||
const show = ref(false);
|
||||
const url = computed(() => {
|
||||
return `${$props.baseURL ?? app.imageUrl}/${$props.storage}/${$props.size}/${$props.id}`;
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<QImg
|
||||
:class="{ zoomIn: $props.zoomSize }"
|
||||
:src="url"
|
||||
v-bind="$attrs"
|
||||
@click="show = !show"
|
||||
spinner-color="primary"
|
||||
/>
|
||||
<QDialog v-model="show" v-if="$props.zoomSize">
|
||||
<QImg
|
||||
:src="url"
|
||||
size="full"
|
||||
class="img_zoom"
|
||||
v-bind="$attrs"
|
||||
spinner-color="primary"
|
||||
/>
|
||||
</QDialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.q-img {
|
||||
&.zoomIn {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
min-width: 50px;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.img_zoom {
|
||||
border-radius: 0%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<script setup>
|
||||
import { ref, onMounted, inject } from 'vue';
|
||||
import VnImg from 'src/components/ui/VnImg.vue';
|
||||
const jApi = inject('jApi');
|
||||
const news = ref([]);
|
||||
const showPreview = ref(false);
|
||||
const selectedImageSrc = ref('');
|
||||
|
||||
const fetchData = async () => {
|
||||
news.value = await jApi.query(
|
||||
`SELECT title, text, image, id
|
||||
FROM news
|
||||
ORDER BY priority, created DESC`
|
||||
);
|
||||
};
|
||||
|
||||
onMounted(async () => await fetchData());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="padding: 0">
|
||||
<div class="q-pa-sm row items-start">
|
||||
<div class="new-card q-pa-sm" v-for="myNew in news" :key="myNew.id">
|
||||
<QCard>
|
||||
<VnImg :id="myNew.image" storage="news" />
|
||||
|
||||
<QCardSection>
|
||||
<div class="text-h5">{{ myNew.title }}</div>
|
||||
</QCardSection>
|
||||
<QCardSection class="new-body">
|
||||
<div v-html="myNew.text" class="card-text" />
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
</div>
|
||||
</div>
|
||||
<QPageSticky>
|
||||
<QBtn
|
||||
fab
|
||||
icon="add_shopping_cart"
|
||||
color="accent"
|
||||
to="/ecomerce/catalog"
|
||||
:title="$t('startOrder')"
|
||||
/>
|
||||
</QPageSticky>
|
||||
</div>
|
||||
<QDialog v-model="showPreview" @hide="selectedImageSrc = ''">
|
||||
<QImg :src="selectedImageSrc" />
|
||||
</QDialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.new-card {
|
||||
width: 100%;
|
||||
|
||||
@media screen and (min-width: 800px) and (max-width: 1400px) {
|
||||
width: 50%;
|
||||
}
|
||||
@media screen and (min-width: 1401px) and (max-width: 1920px) {
|
||||
width: 33.33%;
|
||||
}
|
||||
@media screen and (min-width: 19021) {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.new-body {
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.card-text {
|
||||
:deep(a) {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n lang="yaml">
|
||||
en-US:
|
||||
startOrder: Start order
|
||||
es-ES:
|
||||
startOrder: Empezar pedido
|
||||
ca-ES:
|
||||
startOrder: Començar comanda
|
||||
fr-FR:
|
||||
startOrder: Lancer commande
|
||||
pt-PT:
|
||||
startOrder: Comece uma encomenda
|
||||
</i18n>
|
||||
|
|
@ -27,12 +27,12 @@ const routes = [
|
|||
{
|
||||
name: '',
|
||||
path: '',
|
||||
component: () => import('src/pages/Cms/Home.vue')
|
||||
component: () => import('src/pages/Cms/HomeView.vue')
|
||||
},
|
||||
{
|
||||
name: 'home',
|
||||
path: '/cms/home',
|
||||
component: () => import('src/pages/Cms/Home.vue')
|
||||
component: () => import('src/pages/Cms/HomeView.vue')
|
||||
},
|
||||
{
|
||||
name: 'orders',
|
||||
|
|
@ -63,6 +63,6 @@ const routes = [
|
|||
path: '/:catchAll(.*)*',
|
||||
component: () => import('pages/ErrorNotFound.vue')
|
||||
}
|
||||
]
|
||||
];
|
||||
|
||||
export default routes
|
||||
export default routes;
|
||||
|
|
|
|||
Loading…
Reference in New Issue