verdnatura/hedera-web
verdnatura
/
hedera-web
0
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Modulo Administración #78

Merged
jsegarra merged 19 commits from wbuezas/hedera-web-mindshore:feature/Administracion into 4922-vueMigration 2024-08-23 19:29:46 +00:00
Conversation 0 Commits 19 Files Changed 42 +2481 -615
42 changed files with 2481 additions and 615 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
.eslintrc.js
View File

@ -15,22 +15,8 @@ module.exports = {
'vue/setup-compiler-macros': true
},
extends: [
// Base ESLint recommended rules
// 'eslint:recommended',
// Uncomment any of the lines below to choose desired strictness,
// but leave only one uncommented!
// See https://eslint.vuejs.org/rules/#available-rules
// 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
'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'
],
extends: ['standard'],
plugins: ['vue', 'prettier'],
globals: {
ga: 'readonly', // Google Analytics
cordova: 'readonly',
@ -66,28 +52,34 @@ module.exports = {
'prefer-promise-reject-errors': 'off',
semi: 'off',
// allow debugger during development only
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'vue/html-indent': [
'error',
4,
{
attribute: 1,
baseIndent: 1,
closeBracket: 0,
alignAttributesVertically: true,
ignores: []
}
]
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
overrides: [
{
extends: ['plugin:vue/vue3-essential'],
files: ['src/**/*.{js,vue,scss}'], // Aplica ESLint solo a archivos .js, .vue y .scss dentro de src (Proyecto de quasar)
files: ['src/**/*.{js,vue,scss}', 'quasar.config.js'], // Aplica ESLint solo a archivos .js, .vue y .scss dentro de src (Proyecto de quasar)
extends: [
// Base ESLint recommended rules
'eslint:recommended',
// Uncomment any of the lines below to choose desired strictness,
// but leave only one uncommented!
// See https://eslint.vuejs.org/rules/#available-rules
// 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
// 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
// https://github.com/prettier/eslint-config-prettier#installation
// usage with Prettier, provided by 'eslint-config-prettier'.
'prettier'
],
rules: {
semi: 'off',
indent: ['error', 4, { SwitchCase: 1 }],
'space-before-function-paren': 'off'
}
'space-before-function-paren': 'off',
'prefer-promise-reject-errors': 'off',
'vue/no-multiple-template-root': 'off'
},
parserOptions: {
ecmaVersion: '2021'
},
plugins: ['vue']
}
]
};

10
.vscode/settings.json vendored
View File

@ -1,13 +1,9 @@
{
"files.eol": "\n",
"eslint.autoFixOnSave": true,
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.formatOnSave": false,
"editor.defaultFormatter": null,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": ["source.fixAll.eslint"],
"eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
"[sql]": {
"editor.formatOnSave": true
}
"cSpell.words": ["axios", "composables"]
}

454
quasar.config.js
View File

@ -14,249 +14,243 @@ const path = require('path');
const { configure } = require('quasar/wrappers');
module.exports = configure(function (ctx) {
return {
// fix: true,
// include = [],
// exclude = [],
// rawOptions = {},
warnings: true,
errors: true,
// 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', 'vnDate', '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', 'vnDate', '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:3002',
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', 'Dialog']
},
// 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', 'Dialog']
},
// 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'] }]);
}
}
};
};
});

6
src/boot/app.js
View File

@ -1,10 +1,10 @@
import { boot } from 'quasar/wrappers';
import { useAppStore } from 'stores/app';
import { userStore } from 'stores/user';
import { useUserStore } from 'stores/user';
export default boot(({ app }) => {
const props = app.config.globalProperties;
const userStore = useUserStore();
props.$app = useAppStore();
props.$user = userStore();
props.$actions = document.createElement('div');
props.$user = userStore.user;
});

8
src/boot/axios.js
View File

@ -1,6 +1,6 @@
import { boot } from 'quasar/wrappers';
import { Connection } from '../js/db/connection';
import { userStore } from 'stores/user';
import { useUserStore } from 'stores/user';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
@ -36,10 +36,10 @@ const onResponseError = error => {
};
export default boot(({ app }) => {
const user = userStore();
const userStore = useUserStore();
function addToken(config) {
if (user.token) {
config.headers.Authorization = user.token;
if (userStore.token) {
config.headers.Authorization = userStore.token;
}
return config;
}

50
src/components/common/VnForm.vue
View File

@ -2,6 +2,8 @@
import { ref, inject, onMounted, computed, Teleport } from 'vue';
import { useI18n } from 'vue-i18n';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
import useNotify from 'src/composables/useNotify.js';
import {
generateUpdateSqlQuery,
@ -73,6 +75,10 @@ const props = defineProps({
saveFn: {
type: Function,
default: null
},
separationBetweenInputs: {
type: String,
default: 'xs'
}
});
@ -81,6 +87,8 @@ const emit = defineEmits(['onDataSaved']);
const { t } = useI18n();
const jApi = inject('jApi');
const { notify } = useNotify();
const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);
const loading = ref(false);
const formData = ref({});
@ -101,6 +109,10 @@ const updatedColumns = computed(() => {
const hasChanges = computed(() => !!updatedColumns.value.length);
const separationBetweenInputs = computed(() => {
return `q-gutter-y-${props.separationBetweenInputs}`;
});
const fetchFormData = async () => {
if (!props.fetchFormDataSql.query) return;
loading.value = true;
@ -167,8 +179,17 @@ const generateSqlQuery = () => {
};
onMounted(async () => {
if (!props.formInitialData && props.autoLoad) {
if (!props.formInitialData) {
fetchFormData();
} else {
formData.value = { ...props.formInitialData };
// Como no se ejecuta la query fetchFormData y no se obtienen las columnas de la tabla, se inicializan con las keys del objeto formInitialData
modelInfo.value = {
columns: Object.keys(props.formInitialData).map(col => ({
name: col
})),
data: [props.formInitialData]
};
}
});
@ -186,9 +207,10 @@ defineExpose({
<QForm
v-if="!loading"
ref="addressFormRef"
class="column full-width q-gutter-y-xs"
class="form"
:class="separationBetweenInputs"
>
<span class="text-h6 text-bold">
<span v-if="title" class="text-h6 text-bold">
{{ title }}
</span>
<slot
@ -200,8 +222,9 @@ defineExpose({
:data="formData"
/>
<component
v-if="isHeaderMounted"
:is="showBottomActions ? 'div' : Teleport"
:to="$actions"
to="#actions"
class="flex row justify-end q-gutter-x-sm"
:class="{ 'q-mt-md': showBottomActions }"
>
@ -213,7 +236,9 @@ defineExpose({
no-caps
flat
v-close-popup
/>
>
<QTooltip>{{ t('cancel') }}</QTooltip>
</QBtn>
<QBtn
v-if="defaultActions"
:label="t('save')"
@ -223,8 +248,10 @@ defineExpose({
flat
:disabled="!showBottomActions && !updatedColumns.length"
@click="submit()"
/>
<slot name="actions" />
>
<QTooltip>{{ t('save') }}</QTooltip>
</QBtn>
<slot name="actions" :data="formData" />
</component>
</QForm>
<QSpinner
@ -244,9 +271,16 @@ defineExpose({
.form-container {
width: 100%;
height: max-content;
padding: 0 !important;
max-width: 544px;
padding: 32px;
display: flex;
justify-content: center;
}
.form {
display: flex;
flex-direction: column;
padding: 32px;
width: 100%;
}
</style>

174
src/components/common/VnInputDate.vue Normal file
View File

@ -0,0 +1,174 @@
<script setup>
import { onMounted, watch, computed, ref } from 'vue';
import { date } from 'quasar';
import { useI18n } from 'vue-i18n';
const model = defineModel({ type: String });
const props = defineProps({
isOutlined: {
type: Boolean,
default: false
}
});
const { t } = useI18n();
const requiredFieldRule = val => !!val || t('globals.fieldRequired');
const dateFormat = 'DD/MM/YYYY';
const isPopupOpen = ref();
const hover = ref();
const mask = ref();
onMounted(() => {
// fix quasar bug
mask.value = '##/##/####';
});
const styleAttrs = computed(() => {
return props.isOutlined
? {
dense: true,
outlined: true,
rounded: true
}
: {};
});
const formattedDate = computed({
get() {
if (!model.value) return model.value;
return date.formatDate(new Date(model.value), dateFormat);
},
set(value) {
if (value === model.value) return;
let newDate;
if (value) {
// parse input
if (value.includes('/')) {
if (value.length === 6) {
value = value + new Date().getFullYear();
}
if (value.length >= 10) {
if (value.at(2) === '/') {
value = value.split('/').reverse().join('/');
}
value = date.formatDate(
new Date(value).toISOString(),
'YYYY-MM-DDTHH:mm:ss.SSSZ'
);
}
}
const [year, month, day] = value.split('-').map(e => parseInt(e));
newDate = new Date(year, month - 1, day);
if (model.value) {
const orgDate =
model.value instanceof Date
? model.value
: new Date(model.value);
newDate.setHours(
orgDate.getHours(),
orgDate.getMinutes(),
orgDate.getSeconds(),
orgDate.getMilliseconds()
);
}
}
if (!isNaN(newDate)) model.value = newDate.toISOString();
}
});
const popupDate = computed(() =>
model.value
? date.formatDate(new Date(model.value), 'YYYY/MM/DD')
: model.value
);
watch(
() => model.value,
val => (formattedDate.value = val),
{ immediate: true }
);
</script>
<template>
<div @mouseover="hover = true" @mouseleave="hover = false">
<QInput
v-model="formattedDate"
class="vn-input-date"
:mask="mask"
placeholder="dd/mm/aaaa"
v-bind="{ ...$attrs, ...styleAttrs }"
:class="{ required: $attrs.required }"
:rules="$attrs.required ? [requiredFieldRule] : null"
:clearable="false"
>
<template #append>
<QIcon
name="close"
size="xs"
v-if="
($attrs.clearable == undefined || $attrs.clearable) &&
hover &&
model &&
!$attrs.disable
"
@click="
model = null;
isPopupOpen = false;
"
/>
<QIcon
name="event"
class="cursor-pointer"
@click="isPopupOpen = !isPopupOpen"
:title="t('openDate')"
/>
</template>
<QMenu
transition-show="scale"
transition-hide="scale"
v-model="isPopupOpen"
anchor="bottom left"
self="top start"
:no-focus="true"
:no-parent-event="true"
>
<QDate
v-model="popupDate"
:landscape="true"
:today-btn="true"
color="accent"
@update:model-value="
date => {
formattedDate = date;
isPopupOpen = false;
}
"
/>
</QMenu>
</QInput>
</div>
</template>
<style lang="scss">
.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
border-bottom-style: solid;
}
.vn-input-date.q-field--outlined.q-field--readonly .q-field__control:before {
border-style: solid;
}
</style>
<i18n lang="yaml">
en-US:
openDate: Open date
es-ES:
openDate: Abrir fecha
ca-ES:
openDate: Obrir data
fr-FR:
openDate: Ouvrir la date
pt-PT:
openDate: Abrir data
</i18n>

35
src/components/ui/CardList.vue
View File

@ -22,20 +22,15 @@ const handleClick = () => {
:class="{ 'cursor-pointer': clickable, 'no-radius': !rounded }"
@click="handleClick()"
>
<QItemSection class="no-padding">
<div class="row no-wrap">
<slot name="prepend" />
<div class="column full-width">
<slot name="content" />
</div>
<div class="no-padding content-container col-10">
<slot name="prepend" />
<div class="content">
<slot name="content" />
</div>
</QItemSection>
<QItemSection
class="no-padding"
side
>
</div>
<div class="no-padding flex full-width justify-center">
<slot name="actions" />
</QItemSection>
</div>
</QItem>
</template>
@ -44,4 +39,20 @@ const handleClick = () => {
border-bottom: 1px solid $gray-light;
padding: 20px;
}
.content {
display: flex;
flex-direction: column;
overflow: hidden;
* {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.content-container {
display: flex;
}
</style>

19
src/components/ui/ChangePasswordForm.vue
View File

@ -5,8 +5,10 @@ import { useI18n } from 'vue-i18n';
import VnInput from 'src/components/common/VnInput.vue';
import VnForm from 'src/components/common/VnForm.vue';
import { userStore as useUserStore } from 'stores/user';
import { useUserStore } from 'stores/user';
import useNotify from 'src/composables/useNotify.js';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
const props = defineProps({
verificationToken: {
@ -24,6 +26,8 @@ const { t } = useI18n();
const api = inject('api');
const userStore = useUserStore();
const { notify } = useNotify();
const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);
const oldPasswordRef = ref(null);
const newPasswordRef = ref(null);
@ -33,7 +37,7 @@ const repeatPassword = ref('');
const passwordRequirements = ref(null);
const formData = ref({
userId: userStore.id,
userId: userStore?.user?.id,
oldPassword: '',
newPassword: ''
});
@ -75,7 +79,7 @@ const getPasswordRequirements = async () => {
};
const login = async () => {
await userStore.login(userStore.name, formData.value.newPassword);
await userStore.login(userStore.user.name, formData.value.newPassword);
};
const onPasswordChanged = async () => {
@ -149,7 +153,7 @@ onMounted(async () => {
</template>
</VnInput>
</template>
<template #actions>
<template v-if="isHeaderMounted" #actions>
<QBtn
:label="t('requirements')"
rounded
@ -159,10 +163,10 @@ onMounted(async () => {
/>
<QBtn
:label="t('modify')"
type="submit"
rounded
no-caps
flat
@click="vnFormRef.submit()"
/>
</template>
</VnForm>
@ -171,10 +175,7 @@ onMounted(async () => {
<span class="text-h6 text-bold q-mb-md">
{{ t('passwordRequirements') }}
</span>
<div
class="column"
style="max-width: max-content"
>
<div class="column" style="max-width: max-content">
<span>
{{
t('charactersLong', {

125
src/components/ui/ImageEditor.vue Normal file
View File

@ -0,0 +1,125 @@
<script setup>
import { ref, inject } from 'vue';
import { useI18n } from 'vue-i18n';
import VnInput from 'src/components/common/VnInput.vue';
import useNotify from 'src/composables/useNotify.js';
const props = defineProps({
schema: {
type: String,
default: ''
},
imageName: {
type: String,
default: ''
}
});
const emit = defineEmits(['close']);
const api = inject('api');
const { t } = useI18n();
const { notify } = useNotify();
const inputFileRef = ref(null);
const loading = ref(false);
const name = ref(props.imageName ?? '');
const file = ref(null);
const onSubmit = async () => {
try {
loading.value = true;
const formData = new FormData();
formData.append('name', name.value);
formData.append('image', file.value);
formData.append('schema', props.schema);
formData.append('srv', 'json:image/upload');
await api({
method: 'post',
url: location.origin,
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
});
notify(t('imageAdded'), 'positive');
emit('close');
} catch (error) {
console.error('Error uploading image:', error);
} finally {
loading.value = false;
}
};
</script>
<template>
<QForm @submit="onSubmit">
<QCard class="q-pa-lg">
<VnInput v-model="name" :label="t('name')" />
<QFile
ref="inputFileRef"
:label="t('file')"
v-model="file"
:multiple="false"
class="q-mb-xs"
>
<template #append>
<QIcon
name="attach_file"
class="cursor-pointer"
@click="inputFileRef.pickFiles()"
/>
</template>
</QFile>
<div class="flex row justify-end q-gutter-x-sm">
<QSpinner
v-if="loading"
color="primary"
size="3em"
:thickness="2"
/>
<QBtn
v-else
type="submit"
:label="t('send')"
flat
class="q-mt-md"
rounded
/>
</div>
</QCard>
</QForm>
</template>
<style lang="scss" scoped></style>
<i18n lang="yaml">
en-US:
name: Name
file: File
send: Send
imageAdded: Image added successfully
es-ES:
name: Nombre
file: Archivo
send: Enviar
imageAdded: Imagen añadida correctamente
ca-ES:
name: Nom
file: Arxiu
send: Enviar
imageAdded: Imatge afegida correctament
fr-FR:
name: Nom
file: Fichier
send: Envoyer
imageAdded: Image ajoutée correctement
pt-PT:
name: Nome
file: Arquivo
send: Enviar
imageAdded: Imagen adicionada corretamente
</i18n>

136
src/components/ui/VnImg.vue
View File

@ -2,6 +2,10 @@
import { ref, computed } from 'vue';
import { useAppStore } from 'stores/app';
import ImageEditor from 'src/components/ui/ImageEditor.vue';
import { useI18n } from 'vue-i18n';
const props = defineProps({
baseURL: {
type: String,
@ -27,26 +31,84 @@ const props = defineProps({
rounded: {
type: Boolean,
default: false
},
fullRounded: {
type: Boolean,
default: false
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
editable: {
type: Boolean,
default: false
},
editSchema: {
type: String,
default: ''
},
editImageName: {
type: String,
default: ''
},
alwaysShowEditButton: {
type: Boolean,
default: false
}
});
const { t } = useI18n();
const app = useAppStore();
const show = ref(false);
const showZoom = ref(false);
const showEditForm = ref(false);
const url = computed(() => {
return `${props.baseURL ?? app.imageUrl}/${props.storage}/${props.size}/${props.id}`;
});
</script>
<template>
<QImg
:class="{ zoomIn: props.zoomSize, rounded: props.rounded }"
:src="url"
v-bind="$attrs"
@click="show = !show"
spinner-color="primary"
/>
<QDialog
v-model="show"
v-if="props.zoomSize"
>
<div class="relative-position main-image-container">
<QBtn
v-if="props.editable"
icon="add_a_photo"
class="show-edit-button absolute-top-left"
:class="{ hide: !props.alwaysShowEditButton }"
round
text-color="black"
@click.stop.prevent="showEditForm = !showEditForm"
>
<QTooltip>{{ t('addOrEditImage') }}</QTooltip>
</QBtn>
<QImg
:class="{
zoomIn: props.zoomSize,
rounded: props.rounded,
'full-rounded': props.fullRounded
}"
class="main-image"
:src="url"
v-bind="$attrs"
@click="showZoom = !showZoom"
spinner-color="primary"
:width="props.width"
:height="props.height"
>
<template #error>
<div
class="full-width full-height flex justify-center items-center"
>
<QIcon name="image" size="sm" />
</div>
</template>
</QImg>
</div>
<QDialog v-if="props.zoomSize" v-model="showZoom">
<QImg
:src="url"
size="full"
@ -55,19 +117,65 @@ const url = computed(() => {
spinner-color="primary"
/>
</QDialog>
<QDialog v-if="props.editable" v-model="showEditForm">
<ImageEditor
class="all-pointer-events"
:schema="props.editSchema"
:image-name="props.editImageName"
@close="showEditForm = false"
/>
</QDialog>
</template>
<style lang="scss" scoped>
.q-img {
.main-image-container {
&:hover {
.show-edit-button {
visibility: visible !important;
}
.main-image {
filter: brightness(80%);
}
}
}
.main-image {
&.zoomIn {
cursor: zoom-in;
}
min-width: 50px;
}
.hide {
visibility: hidden;
}
.show-edit-button {
cursor: pointer;
background-color: $gray-light;
z-index: 1;
}
.rounded {
border-radius: 50%;
border-radius: 0.6em;
}
.full-rounded {
border-radius: 50px;
}
.img_zoom {
border-radius: 0%;
}
</style>
<i18n lang="yaml">
en-US:
addOrEditImage: Add or update an image
es-ES:
addOrEditImage: Añadir o actualizar imagen
ca-ES:
addOrEditImage: Afegir o actualitzar Imatge
fr-FR:
addOrEditImage: Ajouter our mettre à jour l'image
pt-PT:
addOrEditImage: Adicionar ou atualizar imagem
</i18n>

91
src/components/ui/VnSearchBar.vue Normal file
View File

@ -0,0 +1,91 @@
<script setup>
import { onMounted, ref, inject } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import VnInput from 'src/components/common/VnInput.vue';
const props = defineProps({
searchFn: {
type: Function,
default: null
},
placeholder: {
type: String,
default: 'Search'
},
sqlQuery: {
type: String,
default: null
},
searchField: {
type: String,
default: 'search'
}
});
const emit = defineEmits(['onSearch', 'onSearchError']);
const jApi = inject('jApi');
const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const searchTerm = ref('');
const search = async () => {
try {
let data = null;
router.replace({
query: searchTerm.value ? { search: searchTerm.value } : {}
});
if (props.sqlQuery) {
data = await jApi.query(props.sqlQuery, {
[props.searchField]: searchTerm.value
});
} else if (props.searchFn) {
data = props.searchFn(searchTerm.value);
}
emit('onSearch', data);
} catch (error) {
console.error('Error searching:', error);
emit('onSearchError');
}
};
onMounted(() => {
if (route.query.search) {
searchTerm.value = route.query.search;
search();
}
});
</script>
<template>
<VnInput
v-model="searchTerm"
@keyup.enter="search()"
:placeholder="props.placeholder || t('search')"
bg-color="white"
is-outlined
:clearable="false"
>
<template #prepend>
<QIcon name="search" class="cursor-pointer" @click="search()" />
</template>
</VnInput>
</template>
<i18n lang="yaml">
en-US:
search: Search
es-ES:
search: Buscar
ca-ES:
search: Cercar
fr-FR:
search: Rechercher
pt-PT:
search: Pesquisar
</i18n>

14
src/components/ui/VnTable.vue
View File

@ -10,7 +10,7 @@ const props = defineProps({
},
hideBottom: {
type: Boolean,
default: true
default: false
},
rowsPerPageOptions: {
type: Array,
@ -22,19 +22,13 @@ const props = defineProps({
<template>
<QTable
v-bind="$attrs"
:no-data-label="props.noDataLabel || t('noInvoicesFound')"
:no-data-label="props.noDataLabel || t('noData')"
:hide-bottom="props.hideBottom"
:rows-per-page-options="props.rowsPerPageOptions"
table-header-class="vntable-header-default"
>
<template
v-for="(_, slotName) in $slots"
#[slotName]="slotProps"
>
<slot
:name="slotName"
v-bind="slotProps"
/>
<template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
<slot :name="slotName" v-bind="slotProps" />
</template>
</QTable>
</template>

2
src/composables/usePrintService.js
View File

@ -1,4 +1,4 @@
import { userStore as useUserStore } from 'stores/user';
import { useUserStore } from 'stores/user';
import axios from 'axios';
import { useQuasar } from 'quasar';

14
src/i18n/ca-ES/index.js
View File

@ -51,6 +51,18 @@ export default {
addressesList: 'Adreces',
addressDetails: 'Configuració',
checkout: 'Configurar encàrrec',
controlPanel: 'Panell de control',
adminConnections: 'Connexions',
adminItems: 'Articles',
adminVisits: 'Visites',
adminUsers: "Gestió d'usuaris",
adminPhotos: 'Imatges',
adminNews: 'Gestió de noticies',
adminNewsDetails: 'Afegir o editar notícia',
//
orderLoadedIntoBasket: 'Comanda carregada a la cistella!'
orderLoadedIntoBasket: 'Comanda carregada a la cistella!',
at: 'a les',
back: 'Tornar',
remove: 'Esborrar',
noData: 'Sense dades'
};

12
src/i18n/en-US/index.js
View File

@ -64,8 +64,20 @@ export default {
addressesList: 'Addresses',
addressDetails: 'Configuration',
checkout: 'Configure order',
controlPanel: 'Control panel',
adminConnections: 'Connections',
adminItems: 'Items',
adminVisits: 'Visits',
adminUsers: 'User management',
adminPhotos: 'Images',
adminNews: 'News management',
adminNewsDetails: 'Add or edit new',
//
orderLoadedIntoBasket: 'Order loaded into basket!',
at: 'at',
back: 'Back',
remove: 'Remove',
noData: 'No data',
orders: 'Orders',
order: 'Pending order',

15
src/i18n/es-ES/index.js
View File

@ -1,6 +1,3 @@
// This is just an example,
// so you can safely delete all default props below
export default {
failed: 'Acción fallida',
success: 'Acción exitosa',
@ -73,8 +70,20 @@ export default {
addressesList: 'Direcciones',
addressDetails: 'Configuración',
checkout: 'Configurar pedido',
controlPanel: 'Panel de control',
adminConnections: 'Conexiones',
adminItems: 'Artículos',
adminVisits: 'Visitas',
adminUsers: 'Gestión de usuarios',
adminPhotos: 'Imágenes',
adminNews: 'Gestión de noticias',
adminNewsDetails: 'Añadir o editar noticia',
//
orderLoadedIntoBasket: '¡Pedido cargado en la cesta!',
at: 'a las',
back: 'Volver',
remove: 'Borrar',
noData: 'Sin datos',
orders: 'Pedidos',
order: 'Pedido pendiente',

14
src/i18n/fr-FR/index.js
View File

@ -51,6 +51,18 @@ export default {
addressesList: 'Adresses',
addressDetails: 'Configuration',
checkout: "Définissez l'ordre",
controlPanel: 'Panneau de configuration',
adminConnections: 'Connexions',
adminItems: 'Articles',
adminVisits: 'Visites',
adminUsers: 'Gestion des utilisateurs',
adminPhotos: 'Images',
adminNews: 'Gestion des nouvelles',
adminNewsDetails: 'Ajouter ou editer nouvelles',
//
orderLoadedIntoBasket: 'Commande chargée dans le panier!'
orderLoadedIntoBasket: 'Commande chargée dans le panier!',
at: 'à',
back: 'Retour',
remove: 'Effacer',
noData: 'Aucune donnée'
};

14
src/i18n/pt-PT/index.js
View File

@ -52,6 +52,18 @@ export default {
addressesList: 'Moradas',
addressDetails: 'Configuração',
checkout: 'Configurar encomenda',
controlPanel: 'Painel de controle',
adminConnections: 'Conexões',
adminItems: 'Artigos',
adminVisits: 'Visitas',
adminUsers: 'Gestão de usuários',
adminPhotos: 'Imagens',
adminNews: 'Gestão de notícias',
adminNewsDetails: 'Ajouter ou editer nouvelles',
//
orderLoadedIntoBasket: 'Pedido carregado na cesta!'
orderLoadedIntoBasket: 'Pedido carregado na cesta!',
at: 'às',
back: 'Voltar',
remove: 'Eliminar',
noData: 'Sem dados'
};

16
src/js/db/sqlService.js
View File

@ -37,12 +37,18 @@ export const generateInsertSqlQuery = (
columnsUpdated,
createModelDefault
) => {
const columns = [createModelDefault.field, ...columnsUpdated].join(', ');
const values = [
createModelDefault.value,
...columnsUpdated.map(colName => sanitizeValue(formData[colName]))
].join(', ');
const columns = createModelDefault.field
? [createModelDefault.field, ...columnsUpdated].join(', ')
: columnsUpdated.join(', ');
const values = createModelDefault.value
? [
createModelDefault.value,
...columnsUpdated.map(colName => sanitizeValue(formData[colName]))
].join(', ')
: columnsUpdated
.map(colName => sanitizeValue(formData[colName]))
.join(', ');
return `
START TRANSACTION;
INSERT INTO ${schema}.${table} (${columns}) VALUES (${values});

174
src/layouts/MainLayout.vue
View File

@ -1,3 +1,45 @@
<script setup>
import { ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import { useUserStore } from 'stores/user';
import { useAppStore } from 'stores/app';
const router = useRouter();
const userStore = useUserStore();
const appStore = useAppStore();
const { user, supplantedUser } = storeToRefs(userStore);
const { menuEssentialLinks, title, subtitle, useRightDrawer, rightDrawerOpen } =
storeToRefs(appStore);
const actions = ref(null);
const leftDrawerOpen = ref(false);
const toggleLeftDrawer = () => {
leftDrawerOpen.value = !leftDrawerOpen.value;
};
onMounted(async () => {
appStore.isHeaderMounted = true;
await userStore.fetchUser();
await appStore.loadConfig();
await userStore.supplantInit();
await appStore.getMenuLinks();
});
const logout = async () => {
await userStore.logout();
router.push('/login');
};
const logoutSupplantedUser = async () => {
await userStore.logoutSupplantedUser();
await appStore.getMenuLinks();
};
</script>
<template>
<QLayout view="lHh Lpr lFf">
<QHeader>
@ -11,21 +53,15 @@
@click="toggleLeftDrawer"
/>
<QToolbarTitle>
{{ $app.title }}
<div
v-if="$app.subtitle"
class="subtitle text-caption"
>
{{ $app.subtitle }}
{{ title }}
<div v-if="subtitle" class="subtitle text-caption">
{{ subtitle }}
</div>
</QToolbarTitle>
<div
id="actions"
ref="actions"
/>
<div id="actions" ref="actions" class="flex items-center"></div>
<QBtn
v-if="$app.useRightDrawer"
@click="$app.rightDrawerOpen = !$app.rightDrawerOpen"
v-if="useRightDrawer"
@click="rightDrawerOpen = !rightDrawerOpen"
aria-label="Menu"
flat
dense
@ -35,44 +71,29 @@
</QBtn>
</QToolbar>
</QHeader>
<QDrawer
v-model="leftDrawerOpen"
:width="250"
show-if-above
>
<QDrawer v-model="leftDrawerOpen" :width="250" show-if-above>
<QToolbar class="logo">
<img src="statics/logo-dark.svg">
<img src="statics/logo-dark.svg" />
</QToolbar>
<div class="user-info">
<div>
<span id="user-name">{{ user.nickname }}</span>
<QBtn
flat
icon="logout"
alt="_Exit"
@click="logout()"
/>
<span id="user-name">{{ user?.nickname }}</span>
<QBtn flat icon="logout" alt="_Exit" @click="logout()" />
</div>
<div
id="supplant"
class="supplant"
>
<span id="supplanted">{{ supplantedUser }}</span>
<div v-if="supplantedUser" id="supplant" class="supplant">
<span id="supplanted">
{{ supplantedUser?.nickname }}
</span>
<QBtn
flat
icon="logout"
alt="_Exit"
@click="logoutSupplantedUser()"
/>
</div>
</div>
<QList
v-for="item in essentialLinks"
:key="item.id"
>
<QItem
v-if="!item.childs"
:to="`/${item.path}`"
>
<QList v-for="item in menuEssentialLinks" :key="item.id">
<QItem v-if="!item.childs" :to="`/${item.path}`">
<QItemSection>
<QItemLabel>{{ item.description }}</QItemLabel>
</QItemSection>
@ -146,12 +167,7 @@
}
}
&.supplant {
display: none;
border-top: none;
&.show {
display: flex;
}
}
}
}
@ -171,12 +187,9 @@
.q-page-container > * {
padding: 16px;
}
#actions > div {
display: flex;
align-items: center;
}
@include mobile {
#actions > div {
#actions {
.q-btn {
border-radius: 50%;
padding: 10px;
@ -194,71 +207,6 @@
}
</style>
<script>
import { defineComponent, ref } from 'vue';
import { userStore } from 'stores/user';
export default defineComponent({
name: 'MainLayout',
props: {},
setup() {
const leftDrawerOpen = ref(false);
return {
user: userStore(),
supplantedUser: ref(''),
essentialLinks: ref(null),
leftDrawerOpen,
toggleLeftDrawer() {
leftDrawerOpen.value = !leftDrawerOpen.value;
}
};
},
async mounted() {
this.$refs.actions.appendChild(this.$actions);
await this.user.loadData();
await this.$app.loadConfig();
await this.fetchData();
},
methods: {
async fetchData() {
const sections = await this.$jApi.query('SELECT * FROM myMenu');
const sectionMap = new Map();
for (const section of sections) {
sectionMap.set(section.id, section);
}
const sectionTree = [];
for (const section of sections) {
const parent = section.parentFk;
if (parent) {
const parentSection = sectionMap.get(parent);
if (!parentSection) continue;
let childs = parentSection.childs;
if (!childs) {
childs = parentSection.childs = [];
}
childs.push(section);
} else {
sectionTree.push(section);
}
}
this.essentialLinks = sectionTree;
},
async logout() {
this.user.logout();
this.$router.push('/login');
}
}
});
</script>
<i18n lang="yaml">
en-US:
visitor: Visitor

6
src/lib/filters.js
View File

@ -6,7 +6,7 @@ export function currency(val) {
return typeof val === 'number' ? val.toFixed(2) + '€' : val;
}
export function date(val, format) {
export function date(val, format = 'YYYY-MM-DD') {
if (val == null) return val;
if (!(val instanceof Date)) {
val = new Date(val);
@ -43,8 +43,8 @@ export const formatDateTitle = (
const timeFormat = options.showTime
? options.showSeconds
? ` [${t('at')}] hh:mm:ss`
: ` [${t('at')}] hh:mm`
? ` [${t('at')}] HH:mm:ss`
: ` [${t('at')}] HH:mm`
: '';
const day = options.shortDay ? 'dd' : 'dddd';

10
src/pages/Account/AccountConfig.vue
View File

@ -6,18 +6,22 @@ import VnSelect from 'src/components/common/VnSelect.vue';
import VnForm from 'src/components/common/VnForm.vue';
import ChangePasswordForm from 'src/components/ui/ChangePasswordForm.vue';
import { userStore as useUserStore } from 'stores/user';
import { useUserStore } from 'stores/user';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
const userStore = useUserStore();
const { t } = useI18n();
const jApi = inject('jApi');
const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);
const vnFormRef = ref(null);
const vnFormRef2 = ref(null);
const changePasswordFormDialog = ref(null);
const showChangePasswordForm = ref(false);
const langOptions = ref([]);
const pks = computed(() => ({ id: userStore.id }));
const pks = computed(() => ({ id: userStore?.user?.id }));
const fetchConfigDataSql = {
query: `
SELECT u.id, u.name, u.email, u.nickname,
@ -45,7 +49,7 @@ onMounted(() => fetchLanguagesSql());
<template>
<QPage>
<QPage class="q-pa-md flex justify-center">
<Teleport :to="$actions">
<Teleport v-if="isHeaderMounted" to="#actions">
<QBtn
:label="t('addresses')"
icon="location_on"

18
src/pages/Account/AddressDetails.vue
View File

@ -7,10 +7,15 @@ import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnForm from 'src/components/common/VnForm.vue';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
const router = useRouter();
const route = useRoute();
const { t } = useI18n();
const jApi = inject('jApi');
const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);
const vnFormRef = ref(null);
const countriesOptions = ref([]);
@ -56,14 +61,18 @@ onMounted(() => getCountries());
<template>
<QPage class="q-pa-md flex justify-center">
<Teleport :to="$actions">
<Teleport v-if="isHeaderMounted" to="#actions">
<QBtn
:label="t('back')"
icon="close"
rounded
no-caps
@click="goBack()"
/>
>
<QTooltip>
{{ t('back') }}
</QTooltip>
</QBtn>
</Teleport>
<VnForm
ref="vnFormRef"
@ -124,7 +133,6 @@ onMounted(() => getCountries());
<i18n lang="yaml">
en-US:
back: Back
accept: Accept
name: Consignee
address: Address
@ -136,7 +144,6 @@ en-US:
addAddress: Add address
editAddress: Edit address
es-ES:
back: Volver
accept: Aceptar
name: Consignatario
address: Dirección
@ -148,7 +155,6 @@ es-ES:
addAddress: Añadir dirección
editAddress: Modificar dirección
ca-ES:
back: Tornar
accept: Acceptar
name: Consignatari
address: Direcció
@ -160,7 +166,6 @@ ca-ES:
addAddress: Afegir adreça
editAddress: Modificar adreça
fr-FR:
back: Retour
accept: Accepter
name: Destinataire
address: Numéro Rue
@ -172,7 +177,6 @@ fr-FR:
addAddress: Ajouter adresse
editAddress: Modifier adresse
pt-PT:
back: Voltar
accept: Aceitar
name: Consignatario
address: Morada

12
src/pages/Account/AddressList.vue
View File

@ -7,12 +7,16 @@ import CardList from 'src/components/ui/CardList.vue';
import useNotify from 'src/composables/useNotify.js';
import { useVnConfirm } from 'src/composables/useVnConfirm.js';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
const router = useRouter();
const jApi = inject('jApi');
const { notify } = useNotify();
const { t } = useI18n();
const { openConfirmationModal } = useVnConfirm();
const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);
const addresses = ref([]);
const defaultAddress = ref(null);
@ -86,14 +90,18 @@ onMounted(async () => {
</script>
<template>
<Teleport :to="$actions">
<Teleport v-if="isHeaderMounted" to="#actions">
<QBtn
:label="t('addAddress')"
icon="add"
@click="goToAddressDetails()"
rounded
no-caps
/>
>
<QTooltip>
{{ t('addAddress') }}
</QTooltip>
</QBtn>
</Teleport>
<QPage class="vn-w-sm">
<QList

160
src/pages/Admin/ConnectionsView.vue Normal file
View File

@ -0,0 +1,160 @@
<script setup>
import { ref, onMounted, inject, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardList from 'src/components/ui/CardList.vue';
import { date as qdate } from 'quasar';
import { useUserStore } from 'stores/user';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
const { t } = useI18n();
const jApi = inject('jApi');
const router = useRouter();
const userStore = useUserStore();
const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);
const connections = ref([]);
const loading = ref(false);
const intervalId = ref(null);
const getConnections = async () => {
try {
loading.value = true;
connections.value = await jApi.query(
`SELECT vu.userFk userId, vu.stamp, u.nickname, s.lastUpdate,
a.platform, a.browser, a.version, u.name user
FROM userSession s
JOIN visitUser vu ON vu.id = s.userVisitFk
JOIN visitAccess ac ON ac.id = vu.accessFk
JOIN visitAgent a ON a.id = ac.agentFk
JOIN visit v ON v.id = a.visitFk
JOIN account.user u ON u.id = vu.userFk
ORDER BY lastUpdate DESC`
);
loading.value = false;
} catch (error) {
console.error('Error getting connections:', error);
}
};
const supplantUser = async user => {
try {
await userStore.supplantUser(user);
await appStore.getMenuLinks();
router.push({ name: 'confirmedOrders' });
} catch (error) {
console.error('Error supplanting user:', error);
}
};
onMounted(async () => {
getConnections();
intervalId.value = setInterval(getConnections, 60000);
});
onBeforeUnmount(() => clearInterval(intervalId.value));
</script>
<template>
<Teleport v-if="isHeaderMounted" to="#actions">
<div class="flex">
<QBtn
:label="t('refresh')"
icon="refresh"
@click="getConnections()"
rounded
no-caps
class="q-mr-sm"
>
<QTooltip>
{{ t('refresh') }}
</QTooltip>
</QBtn>
<QBadge class="q-pa-sm" v-if="connections.length" color="blue">
{{ connections?.length }} {{ t('connections') }}
</QBadge>
</div>
</Teleport>
<QPage class="vn-w-xs">
<QList class="flex justify-center">
<QSpinner
v-if="loading"
color="primary"
size="3em"
:thickness="2"
/>
<CardList
v-else
v-for="(connection, index) in connections"
:key="index"
>
<template #content>
<span class="text-bold q-mb-sm">
{{ connection.nickname }}
</span>
<span>
{{
qdate.formatDate(connection.stamp, 'dd, hh:mm:ss A')
}}
-
{{
qdate.formatDate(
connection.lastUpdate,
'hh:mm:ss A'
)
}}</span
>
<span
v-if="
connection.platform &&
connection.browser &&
connection.version
"
>
{{ connection.platform }} - {{ connection.browser }} -
{{ connection.version }}
</span>
</template>
<template #actions>
<QBtn
icon="people"
flat
rounded
@click="supplantUser(connection.user)"
>
<QTooltip>
{{ t('supplantUser') }}
</QTooltip>
</QBtn>
</template>
</CardList>
</QList>
</QPage>
</template>
<i18n lang="yaml">
en-US:
refresh: Refresh
connections: Connections
supplantUser: Supplant user
es-ES:
refresh: Actualizar
connections: Conexiones
supplantUser: Suplantar usuario
ca-ES:
refresh: Actualitzar
connections: Connexions
supplantUser: Suplantar usuari
fr-FR:
refresh: Rafraîchir
connections: Connexions
supplantUser: Supplanter l'utilisateur
pt-PT:
refresh: Atualizar
connections: Conexões
supplantUser: Suplantar usuário
</i18n>

100
src/pages/Admin/ItemsView.vue Normal file
View File

@ -0,0 +1,100 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import CardList from 'src/components/ui/CardList.vue';
import VnImg from 'src/components/ui/VnImg.vue';
import VnSearchBar from 'src/components/ui/VnSearchBar.vue';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
const { t } = useI18n();
const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);
const loading = ref(false);
const items = ref([]);
const query = `SELECT i.id, i.longName, i.size, i.category,
i.value5, i.value6, i.value7,
i.image, im.updated
FROM vn.item i
LEFT JOIN image im
ON im.collectionFk = 'catalog'
AND im.name = i.image
WHERE i.longName LIKE CONCAT('%', #search, '%')
OR i.id = #search
ORDER BY i.longName LIMIT 50`;
const onSearch = data => (items.value = data || []);
</script>
<template>
<Teleport v-if="isHeaderMounted" to="#actions">
<VnSearchBar
:sqlQuery="query"
@onSearch="onSearch"
@onSearchError="items = []"
/>
</Teleport>
<QPage class="vn-w-xs">
<QList class="flex justify-center">
<span v-if="!loading && !items.length" class="flex items-center">
<QIcon name="refresh" size="sm" class="q-mr-sm" />
{{ t('introduceSearchTerm') }}
</span>
<QSpinner
v-if="loading"
color="primary"
size="3em"
:thickness="2"
/>
<CardList
v-else
v-for="(item, index) in items"
:key="index"
:clickable="false"
>
<template #prepend>
<VnImg
storage="catalog"
size="200x200"
:id="item.id"
width="80px"
height="80px"
class="q-mr-md"
rounded
editable
editSchema="catalog"
:editImageName="item.image"
/>
</template>
<template #content>
<span class="text-bold q-mb-sm">
{{ item.longName }}
</span>
<span>
{{ item.value5 }} {{ item.value6 }}
{{ item.value7 }}
</span>
<span>{{ item.id }}</span>
<span>{{ item.image }}</span>
</template>
</CardList>
</QList>
</QPage>
</template>
<i18n lang="yaml">
en-US:
introduceSearchTerm: Enter a search term
es-ES:
introduceSearchTerm: Introduce un término de búsqueda
ca-ES:
introduceSearchTerm: Introdueix un terme de cerca
fr-FR:
introduceSearchTerm: Entrez un terme de recherche
pt-PT:
introduceSearchTerm: Digite um termo de pesquisa
</i18n>

66
src/pages/Admin/LinksView.vue Normal file
View File

@ -0,0 +1,66 @@
<script setup>
import { ref, onMounted, inject } from 'vue';
const jApi = inject('jApi');
const links = ref([]);
const getLinks = async () => {
try {
links.value = await jApi.query(
`SELECT image, name, description, link FROM link
ORDER BY name`
);
} catch (error) {
console.error('Error getting links:', error);
}
};
onMounted(async () => getLinks());
</script>
<template>
<QPage>
<QList class="flex justify-center q-gutter-md">
<QItem
v-for="(link, index) in links"
:key="index"
:href="link.link"
target="_blank"
class="flex no-padding"
>
<QCard class="card-container">
<QImg
:src="`http://cdn.verdnatura.es/image/link/full/${link.image}`"
width="60px"
height="60px"
/>
<span class="card-title q-mt-md">{{ link.name }}</span>
<p class="card-description">{{ link.description }}</p>
</QCard>
</QItem>
</QList>
</QPage>
</template>
<style lang="scss" scoped>
.card-container {
width: 140px;
height: 170px;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.card-title {
font-size: 0.7rem;
font-weight: bold;
}
.card-description {
font-size: 0.65rem;
text-align: center;
}
</style>

250
src/pages/Admin/NewsDetails.vue Normal file
View File

@ -0,0 +1,250 @@
<script setup>
import { onMounted, ref, inject, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from 'vue-router';
import VnImg from 'src/components/ui/VnImg.vue';
import VnForm from 'src/components/common/VnForm.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
const jApi = inject('jApi');
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);
const newsTags = ref([]);
const pks = computed(() => ({ id: route.params.id }));
const isEditMode = !!route.params.id;
const formData = ref(
!route.params.id
? {
title: '',
tag: '',
priority: '',
text: ''
}
: undefined
);
const fetchNewDataSql = computed(() => {
if (!route.params.id) return undefined;
return {
query: `
SELECT id, title, text, tag, priority, image
FROM news WHERE id = #id`,
params: { id: route.params.id }
};
});
const getNewsTag = async () => {
try {
newsTags.value = await jApi.query(
`SELECT name, description FROM newsTag
ORDER BY description`
);
} catch (error) {
console.error('Error getting newsTag:', error);
}
};
const goBack = () => router.push({ name: 'adminNews' });
onMounted(async () => {
getNewsTag();
});
</script>
<template>
<QPage class="vn-w-sm">
<Teleport v-if="isHeaderMounted" to="#actions">
<QBtn
:label="t('back')"
icon="close"
rounded
no-caps
@click="goBack()"
>
<QTooltip>{{ t('back') }}</QTooltip>
</QBtn>
</Teleport>
<VnForm
ref="vnFormRef"
:fetch-form-data-sql="fetchNewDataSql"
:form-initial-data="formData"
:create-model-default="{
field: 'userFk',
value: 'account.myUser_getId()'
}"
:pks="pks"
:is-edit-mode="isEditMode"
table="news"
schema="hedera"
separation-between-inputs="lg"
@on-data-saved="goBack()"
>
<template #form="{ data }">
<VnImg
:id="data.image"
:edit-image-name="data.image"
storage="news"
edit-schema="news"
size="200x200"
width="80px"
height="80px"
class="full-width"
rounded
editable
always-show-edit-button
/>
<VnInput
v-model="data.title"
:label="t('title')"
:clearable="false"
/>
<div class="row justify-between q-gutter-x-md">
<VnSelect
v-model="data.tag"
:label="t('tag')"
option-label="description"
option-value="name"
:options="newsTags"
class="col"
/>
<VnInput
v-model="data.priority"
:label="t('priority')"
:clearable="false"
class="col"
/>
</div>
<QEditor
v-model="data.text"
:toolbar="[
[
{
jsegarra commented 2024-08-22 21:17:56 +00:00
Review
Copy Link

Está 2 veces

Está 2 veces
jsegarra commented 2024-08-22 21:28:25 +00:00
Review
Copy Link

053b9f8457

053b9f845787404b46118f2a99ebacd3602f753e
label: $q.lang.editor.align,
icon: $q.iconSet.editor.align,
fixedLabel: true,
options: ['left', 'center', 'right', 'justify']
}
],
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript'
],
['token', 'hr', 'link', 'custom_btn'],
['print', 'fullscreen'],
[
{
label: $q.lang.editor.formatting,
icon: $q.iconSet.editor.formatting,
list: 'no-icons',
options: [
'p',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'code'
]
},
{
label: $q.lang.editor.fontSize,
icon: $q.iconSet.editor.fontSize,
fixedLabel: true,
fixedIcon: true,
list: 'no-icons',
options: [
'size-1',
'size-2',
'size-3',
'size-4',
'size-5',
'size-6',
'size-7'
]
},
{
label: $q.lang.editor.defaultFont,
icon: $q.iconSet.editor.font,
fixedIcon: true,
list: 'no-icons',
options: [
'default_font',
'arial',
'arial_black',
'comic_sans',
'courier_new',
'impact',
'lucida_grande',
'times_new_roman',
'verdana'
]
},
'removeFormat'
],
['quote', 'unordered', 'ordered', 'outdent', 'indent'],
['undo', 'redo'],
['viewsource']
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana'
}"
/>
</template>
</VnForm>
</QPage>
</template>
<i18n lang="yaml">
en-US:
addNew: Add new
confirmDeleteAddress: Are you sure you want to delete this new?
title: Title
tag: Tag
priority: Priority
es-ES:
addNew: Añadir noticia
confirmDeleteAddress: ¿Estás seguro de que quieres eliminar esta noticia?
title: Título
tag: Etiqueta
priority: Prioridad
ca-ES:
addNew: Afegir noticia
confirmDeleteAddress: Estàs segur que vols eliminar aquesta notícia?
title: Títol
tag: Etiqueta
priority: Prioritat
fr-FR:
addNew: Ajouter nouvelles
confirmDeleteAddress: Êtes-vous sûr de vouloir supprimer cette nouvelle?
title: Titre
tag: Tag
priority: Priorité
pt-PT:
addNew: Adicionar noticia
confirmDeleteAddress: Tem a certeza que deseja eliminar esta notícia?
title: Título
tag: Etiqueta
priority: Prioridade
</i18n>

138
src/pages/Admin/NewsView.vue Normal file
View File

@ -0,0 +1,138 @@
<script setup>
import { onMounted, ref, inject } from 'vue';
import { useI18n } from 'vue-i18n';
import CardList from 'src/components/ui/CardList.vue';
import VnImg from 'src/components/ui/VnImg.vue';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
import { useVnConfirm } from 'src/composables/useVnConfirm.js';
import useNotify from 'src/composables/useNotify.js';
const jApi = inject('jApi');
const { t } = useI18n();
const appStore = useAppStore();
const { openConfirmationModal } = useVnConfirm();
const { isHeaderMounted } = storeToRefs(appStore);
const { notify } = useNotify();
const loading = ref(false);
const news = ref([]);
const getNews = async () => {
try {
news.value = await jApi.query(
`SELECT n.id, u.nickname, n.priority, n.image, n.title
FROM news n
JOIN account.user u ON u.id = n.userFk
ORDER BY priority, n.created DESC`
);
} catch (error) {
console.error('Error getting news:', error);
}
};
const deleteNew = async (id, index) => {
try {
await jApi.execQuery(
`START TRANSACTION;
DELETE FROM hedera.news WHERE ((id = #id));
COMMIT`,
{
id
}
);
news.value.splice(index, 1);
notify(t('dataSaved'), 'positive');
} catch (error) {
console.error('Error deleting news:', error);
}
};
onMounted(async () => getNews());
</script>
<template>
<Teleport v-if="isHeaderMounted" to="#actions">
<QBtn
:label="t('addNew')"
icon="add"
:to="{ name: 'adminNewsDetails' }"
rounded
no-caps
>
<QTooltip>{{ t('addNew') }}</QTooltip>
</QBtn>
</Teleport>
<QPage class="vn-w-xs">
<QList class="flex justify-center">
<QSpinner
v-if="loading"
color="primary"
size="3em"
:thickness="2"
/>
<CardList
v-else
v-for="(newsItem, index) in news"
:key="index"
:to="{ name: 'adminNewsDetails', params: { id: newsItem.id } }"
>
<template #prepend>
<VnImg
:id="newsItem.image"
:edit-image-name="newsItem.image"
storage="news"
edit-schema="news"
size="200x200"
width="80px"
height="80px"
class="q-mr-md"
rounded
editable
/>
</template>
<template #content>
<span class="text-bold q-mb-sm">{{ newsItem.title }} </span>
<span>{{ newsItem.nickname }} </span>
<span>{{ newsItem.priority }}</span>
</template>
<template #actions>
<QBtn
icon="delete"
flat
rounded
@click.stop.prevent="
openConfirmationModal(
null,
t('confirmDeleteAddress'),
() => deleteNew(newsItem.id, index)
)
"
>
<QTooltip>{{ t('remove') }}</QTooltip>
</QBtn>
</template>
</CardList>
</QList>
</QPage>
</template>
<i18n lang="yaml">
en-US:
addNew: Add new
confirmDeleteAddress: Are you sure you want to delete this new?
es-ES:
addNew: Añadir noticia
confirmDeleteAddress: ¿Estás seguro de que quieres eliminar esta noticia?
ca-ES:
addNew: Afegir noticia
confirmDeleteAddress: Estàs segur que vols eliminar aquesta notícia?
fr-FR:
addNew: Ajouter nouvelles
confirmDeleteAddress: Êtes-vous sûr de vouloir supprimer cette nouvelle?
pt-PT:
addNew: Adicionar noticia
confirmDeleteAddress: Tem a certeza que deseja eliminar esta notícia?
</i18n>

278
src/pages/Admin/PhotosView.vue Normal file
View File

@ -0,0 +1,278 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { ref, onMounted, inject, reactive, computed } from 'vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnForm from 'src/components/common/VnForm.vue';
import VnInput from 'src/components/common/VnInput.vue';
import useNotify from 'src/composables/useNotify.js';
const jApi = inject('jApi');
const api = inject('api');
const { t } = useI18n();
const { notify } = useNotify();
const fileUploaderRef = ref(null);
const statusIcons = {
uploading: 'cloud_upload',
fulfilled: 'cloud_done',
rejected: 'error',
pending: 'add'
};
const formInitialData = reactive({
schema: 'catalog',
updateMatching: true
});
const imageCollections = ref([]);
const addedFiles = ref([]);
const isSubmitable = computed(() =>
addedFiles.value.some(file => file.uploadStatus === 'pending')
);
const getImageCollections = async () => {
try {
imageCollections.value = await jApi.query(
'SELECT name, `desc` FROM imageCollection ORDER BY `desc`'
);
} catch (error) {
console.error('Error getting image collections:', error);
}
};
const onSubmit = async data => {
if (!addedFiles.value.length) {
notify(t('noFilesToUpload'), 'warning');
return;
}
const filteredFiles = addedFiles.value.filter(
file => file.uploadStatus === 'pending'
);
const promises = filteredFiles.map((file, index) => {
const fileIndex = filteredFiles[index].index;
addedFiles.value[fileIndex].uploadStatus = 'uploading';
const formData = new FormData();
formData.append('updateMatching', data.updateMatching);
formData.append('image', file.file);
formData.append('name', file.name);
formData.append('schema', data.schema);
formData.append('srv', 'json:image/upload');
return api({
method: 'post',
url: location.origin,
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
});
});
const results = await Promise.allSettled(promises);
results.forEach((result, index) => {
const fileIndex = filteredFiles[index].index;
addedFiles.value[fileIndex].uploadStatus = result.status;
});
const allSuccessful = results.every(
result => result.status === 'fulfilled'
);
if (allSuccessful) {
notify(t('uploadSuccess'), 'positive');
} else {
notify(t('uploadError'), 'negative');
}
};
const onFilesAdded = files => {
const initialFilesLength = addedFiles.value.length;
files.forEach((file, index) => {
const [name] = file.name.split('.');
const fileData = {
name,
file,
index: initialFilesLength + index,
uploadStatus: 'pending'
};
addedFiles.value.push(fileData);
});
};
const recalculateFilesIndexes = () => {
addedFiles.value.forEach((_, index) => {
addedFiles.value[index].index = index;
});
};
const removeFile = (file, index) => {
fileUploaderRef.value.removeFile(file);
addedFiles.value.splice(index, 1);
recalculateFilesIndexes();
};
const clearFiles = () => {
fileUploaderRef.value.reset();
addedFiles.value = [];
};
onMounted(async () => getImageCollections());
</script>
<template>
<QPage class="vn-w-sm">
<VnForm
ref="vnFormRef"
:defaultActions="false"
:formInitialData="formInitialData"
separationBetweenInputs="md"
showBottomActions
>
<template #form="{ data }">
<VnSelect
v-model="data.schema"
:label="t('collection')"
option-label="desc"
option-value="name"
:options="imageCollections"
/>
<QUploader
ref="fileUploaderRef"
:label="t('dropYourFiles')"
class="full-width"
square
flat
multiple
bordered
hide-upload-btn
@added="onFilesAdded"
>
<template v-slot:list="scope">
<QList v-if="addedFiles.length" separator>
<QItem
v-for="(file, index) in scope.files"
:key="file.__key"
class="flex full-width row items-center justify-center"
>
<img
:src="file.__img.src"
style="width: 28px; height: 21px"
class="q-mr-md"
/>
<VnInput
v-model="addedFiles[index].name"
:clearable="false"
dense
class="full-width"
/>
<QSpinner
v-if="
addedFiles[index].uploadStatus ===
'uploading'
"
color="primary"
size="2em"
:thickness="1"
/>
<QIcon
v-else-if="
addedFiles[index].uploadStatus &&
addedFiles[index].uploadStatus !==
'uploading'
"
:name="
statusIcons[
addedFiles[index].uploadStatus
]
"
size="sm"
/>
<QBtn
v-if="
addedFiles[index].uploadStatus !==
'uploading'
"
class="gt-xs"
size="md"
flat
dense
round
icon="delete"
@click="removeFile(file, index)"
/>
</QItem>
</QList>
</template>
</QUploader>
<QCheckbox
v-model="data.updateMatching"
:label="t('updateMatching')"
/>
</template>
<template #actions="{ data }">
<QBtn
:label="t('clearAll')"
rounded
no-caps
flat
@click="clearFiles()"
/>
<QBtn
:label="t('uploadFiles')"
rounded
no-caps
flat
:disable="!isSubmitable"
@click="onSubmit(data)"
/>
</template>
</VnForm>
</QPage>
</template>
<i18n lang="yaml">
en-US:
collection: Collection
updateMatching: Update items with matching id
dropYourFiles: Click or drop files here
clearAll: Clear all
uploadFiles: Upload files
uploadSuccess: Upload finished successfully
uploadError: Some errors happened on upload
noFilesToUpload: There are no files to upload
es-ES:
collection: Colección
updateMatching: Actualizar artículos con id coincidente
dropYourFiles: Pulsa o suelta los archivos aquí
clearAll: Limpiar todo
uploadFiles: Subir archivos
uploadSuccess: Imágenes subidas correctamente
uploadError: Ocurrieron errores al subir alguna de las imágenes
noFilesToUpload: No se han seleccionado archivos para subir
ca-ES:
collection: Col·lecció
updateMatching: Actualitzar els elements amb id coincident
dropYourFiles: Prem o deixa anar els arxius aquí
clearAll: Netejar tot
uploadFiles: Pujar arxius
uploadSuccess: Imatges pujades correctament
uploadError: Van ocórrer errors en pujar alguna de les imatges
noFilesToUpload: No s'ha seleccionat arxius per pujar
fr-FR:
collection: Collection
updateMatching: Mettre à jour les éléments avec l'identifiant correspondant
dropYourFiles: Cliquez ici ou déposer des fichiers
clearAll: Tout effacer
uploadFiles: Upload Files
uploadSuccess: Les images téléchargées correctement
uploadError: Des erreurs sont survenues lors du téléchargement des images
noFilesToUpload: Aucun fichier sélectionné pour télécharger
pt-PT:
collection: Coleção
updateMatching: Atualizar itens com id correspondente
dropYourFiles: Clique ou solte arquivos aqui
clearAll: Limpar tudo
uploadFiles: Fazer upload de arquivos
uploadSuccess: Upload concluído com sucesso
uploadError: Ocorreram erros ao subir alguma das imagens
noFilesToUpload: Não há arquivos selecionados para upload
</i18n>

120
src/pages/Admin/UsersView.vue Normal file
View File

@ -0,0 +1,120 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import CardList from 'src/components/ui/CardList.vue';
import VnSearchBar from 'src/components/ui/VnSearchBar.vue';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
import { useUserStore } from 'stores/user';
import useNotify from 'src/composables/useNotify.js';
const { t } = useI18n();
const router = useRouter();
const userStore = useUserStore();
const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);
const { notify } = useNotify();
const loading = ref(false);
const users = ref([]);
const query = `SELECT u.id, u.name, u.nickname, u.active
FROM account.user u
WHERE u.name LIKE CONCAT('%', #user, '%')
OR u.nickname LIKE CONCAT('%', #user, '%')
OR u.id = #user
ORDER BY u.name LIMIT 200`;
const onSearch = data => (users.value = data || []);
const supplantUser = async user => {
try {
await userStore.supplantUser(user);
await appStore.getMenuLinks();
router.push({ name: 'confirmedOrders' });
} catch (error) {
console.error('Error supplanting user:', error);
notify(error.message, 'negative');
}
};
</script>
<template>
<Teleport v-if="isHeaderMounted" to="#actions">
<VnSearchBar
:sql-query="query"
search-field="user"
@on-search="onSearch"
@on-search-error="users = []"
/>
</Teleport>
<QPage class="vn-w-xs">
<QList class="flex justify-center">
<span v-if="!loading && !users.length" class="flex items-center">
<QIcon name="refresh" size="sm" class="q-mr-sm" />
{{ t('noData') }}
</span>
<QSpinner
v-if="loading"
color="primary"
size="3em"
:thickness="2"
/>
<CardList
v-else
v-for="(user, index) in users"
:key="index"
:clickable="false"
>
<template #content>
<span class="text-bold q-mb-sm">
{{ user.nickname }}
</span>
<span>#{{ user.id }} - {{ user.name }} </span>
</template>
<template #actions>
<QBtn
icon="people"
jsegarra commented 2024-08-22 21:00:21 +00:00
Review
Copy Link

tooltip

tooltip
jsegarra commented 2024-08-22 21:28:23 +00:00
Review
Copy Link

053b9f8457

053b9f845787404b46118f2a99ebacd3602f753e
flat
rounded
@click="supplantUser(user.name)"
><QTooltip>
{{ t('Impersonate user') }}
</QTooltip></QBtn
>
</template>
</CardList>
</QList>
</QPage>
</template>
<i18n lang="yaml">
en-US:
User management: User management
Disabled: Disabled
Impersonate user: Impersonate user
Access log: Access log
es-ES:
User management: Gestión de usuarios
Disabled: Desactivado
Impersonate user: Suplantar usuario
Access log: Registro de accesos
ca-ES:
User management: Gestió d'usuaris
Disabled: Deshabilitat
Impersonate user: Suplantar usuari
Access log: Registre d'accessos
fr-FR:
User management: Gestion des utilisateurs
Disabled: Désactivé
Impersonate user: Accès utilisateur
Access log: Journal des accès
pt-PT:
User management: Gestão de usuarios
Disabled: Desativado
Impersonate user: Suplantar usuario
Access log: Registro de acessos
</i18n>

176
src/pages/Admin/VisitsView.vue Normal file
View File

@ -0,0 +1,176 @@
<script setup>
import { ref, inject, watch, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import { formatDateTitle, date } from 'src/lib/filters.js';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
const { t } = useI18n();
const jApi = inject('jApi');
const route = useRoute();
const router = useRouter();
const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);
const loading = ref(false);
const from = ref(Date.vnNew(route.query.from) || Date.vnNew());
const to = ref(Date.vnNew(route.query.to) || Date.vnNew());
const visitsData = ref(null);
const getVisits = async () => {
try {
loading.value = true;
const [visitsResponse] = await jApi.query(
`SELECT browser,
MIN(CAST(version AS DECIMAL(4,1))) minVersion,
MAX(CAST(version AS DECIMAL(4,1))) maxVersion,
MAX(c.stamp) lastVisit,
COUNT(DISTINCT c.id) visits,
SUM(a.firstAccessFk = c.id AND v.firstAgentFk = a.id) newVisits
FROM visitUser e
JOIN visitAccess c ON c.id = e.accessFk
JOIN visitAgent a ON a.id = c.agentFk
JOIN visit v ON v.id = a.visitFk
WHERE c.stamp BETWEEN TIMESTAMP(#from,'00:00:00') AND TIMESTAMP(#to,'23:59:59')
GROUP BY browser ORDER BY visits DESC`,
{
from: date(from.value),
to: date(to.value)
}
);
visitsData.value = visitsResponse;
loading.value = false;
} catch (error) {
console.error('Error getting visits:', error);
}
};
const visitsCardText = computed(
() =>
`${visitsData?.value?.visits || 0} ${t('visits')}, ${visitsData?.value?.newVisits || 0} ${t('news')}`
);
watch(
[() => from.value, () => to.value],
async () => {
await router.replace({
query: {
from: date(from.value),
to: date(to.value)
}
});
await getVisits();
},
{ immediate: true }
);
</script>
<template>
<Teleport v-if="isHeaderMounted" to="#actions">
<QBtn
:label="t('refresh')"
icon="refresh"
@click="getVisits()"
rounded
no-caps
class="q-mr-sm"
>
<QTooltip>
{{ t('refresh') }}
</QTooltip>
</QBtn>
<QBtn
:label="t('connections')"
icon="visibility"
rounded
no-caps
:to="{ name: 'adminConnections' }"
>
<QTooltip>
{{ t('connections') }}
</QTooltip>
</QBtn>
</Teleport>
<QPage class="vn-w-xs column">
<QCard class="column q-pa-lg q-mb-md">
<VnInputDate :label="t('from')" v-model="from" class="q-mb-sm" />
<VnInputDate :label="t('to')" v-model="to" />
</QCard>
<QCard v-if="!loading" class="q-pa-lg flex q-mb-md">
<span class="full-width text-right text-h6">
{{ visitsCardText }}
</span>
</QCard>
<QCard v-if="!loading" class="q-pa-lg column">
<span
v-if="
visitsData?.browser &&
visitsData?.minVersion &&
visitsData?.maxVersion
"
>
{{ visitsData?.browser }} - {{ visitsData?.minVersion }} -
{{ visitsData?.maxVersion }}
</span>
<span>{{ visitsCardText }}</span>
<span v-if="visitsData">
{{
formatDateTitle(visitsData.lastVisit, {
showTime: true,
showSeconds: true,
shortDay: true
})
}}
</span>
</QCard>
<QSpinner
v-else
color="primary"
size="3em"
:thickness="2"
style="margin: 0 auto"
/>
</QPage>
</template>
<i18n lang="yaml">
en-US:
from: From
to: To
visits: Visits
news: New
connections: Connections
refresh: Refresh
es-ES:
from: Desde
to: Hasta
visits: Visitas
news: Nuevas
connections: Conexiones
refresh: Actualizar
ca-ES:
from: Desde
to: Fins
visits: Visites
news: Noves
connections: Connexions
refresh: Actualitzar
fr-FR:
from: À partir de
to: Jusqu'à
visits: Visites
news: Nouveau
connections: Connexions
refresh: Rafraîchir
pt-PT:
from: Desde
to: Até
visits: Visitas
news: Novo
connections: Conexões
refresh: Atualizar
</i18n>

87
src/pages/Ecomerce/Catalog.vue
View File

@ -1,5 +1,5 @@
<template>
<Teleport :to="$actions">
<Teleport v-if="isHeaderMounted" to="#actions">
<QInput
:placeholder="$t('search')"
v-model="search"
@ -11,10 +11,7 @@
standout
>
<template #prepend>
<QIcon
v-if="search === ''"
name="search"
/>
<QIcon v-if="search === ''" name="search" />
<QIcon
v-else
name="clear"
@ -32,11 +29,7 @@
/>
</Teleport>
<div style="padding-bottom: 5em">
<QDrawer
v-model="$app.rightDrawerOpen"
side="right"
:width="250"
>
<QDrawer v-model="$app.rightDrawerOpen" side="right" :width="250">
<div class="q-pa-md">
<div class="basket-info">
<p>{{ date(new Date()) }}</p>
@ -44,11 +37,7 @@
{{ $t('warehouse') }}
{{ 'Algemesi' }}
</p>
<QBtn
flat
rounded
no-caps
>
<QBtn flat rounded no-caps>
{{ $t('modify') }}
</QBtn>
</div>
@ -77,14 +66,11 @@
:title="cat.name"
:to="{ params: { category: cat.id, type: null } }"
>
<img :src="`statics/category/${cat.code}.svg`">
<img :src="`statics/category/${cat.code}.svg`" />
</QBtn>
</div>
</div>
<div
class="q-mt-md"
v-if="category || search"
>
<div class="q-mt-md" v-if="category || search">
<div class="q-mb-xs text-grey-7">
{{ $t('filterBy') }}
</div>
@ -109,15 +95,8 @@
/>
</div>
</div>
<div
class="q-pa-md"
v-if="typeId || search"
>
<div
class="q-mb-md"
v-for="tag in tags"
:key="tag.uid"
>
<div class="q-pa-md" v-if="typeId || search">
<div class="q-mb-md" v-for="tag in tags" :key="tag.uid">
<div class="q-mb-xs text-caption text-grey-7">
{{ tag.name }}
<QIcon
@ -187,11 +166,7 @@
:disable="disableScroll"
>
<div class="q-pa-md row justify-center q-gutter-md">
<QSpinner
v-if="isLoading"
color="primary"
size="50px"
/>
<QSpinner v-if="isLoading" color="primary" size="50px" />
<div
v-if="items && !items.length"
class="text-subtitle1 text-grey-7 q-pa-md"
@ -204,12 +179,10 @@
>
{{ $t('pleaseSetFilter') }}
</div>
<QCard
class="my-card"
v-for="_item in items"
:key="_item.id"
>
<img :src="`${$imageBase}/catalog/200x200/${_item.image}`">
<QCard class="my-card" v-for="_item in items" :key="_item.id">
<img
:src="`${$imageBase}/catalog/200x200/${_item.image}`"
/>
<QCardSection>
<div class="name text-subtitle1">
{{ _item.longName }}
@ -220,10 +193,7 @@
{{ _item.subName }}
</div>
<div class="tags q-pt-xs">
<div
v-for="tag in _item.tags"
:key="tag.tagFk"
>
<div v-for="tag in _item.tags" :key="tag.tagFk">
<span class="text-grey-7">{{
tag.tag.name
}}</span>
@ -252,11 +222,7 @@
</div>
<template #loading>
<div class="row justify-center q-my-md">
<QSpinner
color="primary"
name="dots"
size="40px"
/>
<QSpinner color="primary" name="dots" size="40px" />
</div>
</template>
</QInfiniteScroll>
@ -278,30 +244,19 @@
>
{{ item.subName }}
</div>
<div class="text-grey-7">
#{{ item.id }}
</div>
<div class="text-grey-7">#{{ item.id }}</div>
</QCardSection>
<QCardSection>
<div
v-for="tag in item.tags"
:key="tag.tagFk"
>
<div v-for="tag in item.tags" :key="tag.tagFk">
<span class="text-grey-7">{{ tag.tag.name }}</span>
{{ tag.value }}
</div>
</QCardSection>
<QCardActions align="right">
<QBtn
@click="showItemDialog = false"
flat
>
<QBtn @click="showItemDialog = false" flat>
{{ $t('cancel') }}
</QBtn>
<QBtn
@click="showItemDialog = false"
flat
>
<QBtn @click="showItemDialog = false" flat>
{{ $t('accept') }}
</QBtn>
</QCardActions>
@ -391,6 +346,7 @@
import { date, currency, formatDate } from 'src/lib/filters.js';
import axios from 'axios';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
const CancelToken = axios.CancelToken;
@ -398,7 +354,8 @@ export default {
name: 'HederaCatalog',
setup() {
const appStore = useAppStore();
return { appStore };
const { isHeaderMounted } = storeToRefs(appStore);
return { isHeaderMounted };
},
data() {
return {

11
src/pages/Ecomerce/InvoicesView.vue
View File

@ -6,11 +6,14 @@ import VnTable from 'src/components/ui/VnTable.vue';
import { currency, formatDate } from 'src/lib/filters.js';
import { usePrintService } from 'src/composables/usePrintService';
// import { date as qdate } from 'quasar';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
const { t } = useI18n();
const jApi = inject('jApi');
const { openReport } = usePrintService();
const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);
const currentYear = ref(Date.vnNew().getFullYear());
const years = ref([]);
@ -36,6 +39,7 @@ const columns = computed(() => [
name: 'amount',
label: t('amount'),
field: 'amount',
align: 'right',
sortable: true,
format: val => currency(val)
},
@ -59,6 +63,7 @@ const fetchInvoices = async () => {
LIMIT 100`,
params
);
console.log(invoices.value);
};
onMounted(async () => {
@ -70,7 +75,7 @@ onMounted(async () => {
</script>
<template>
<Teleport :to="$actions">
<Teleport v-if="isHeaderMounted" to="#actions">
<QSelect
v-model="currentYear"
:options="years"
@ -86,7 +91,7 @@ onMounted(async () => {
<VnTable
:columns="columns"
:rows="invoices"
:hide-header="!invoices.length"
:hide-header="!invoices?.length"
>
<template #body-cell-hasPdf="{ row }">
<QTd

28
src/pages/Ecomerce/OrdersView.vue
View File

@ -10,11 +10,15 @@ import VnConfirm from 'src/components/ui/VnConfirm.vue';
import useNotify from 'src/composables/useNotify.js';
import { currency, formatDateTitle } from 'src/lib/filters.js';
import { tpvStore } from 'stores/tpv';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
const { t } = useI18n();
const route = useRoute();
const jApi = inject('jApi');
const { notify } = useNotify();
const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);
const showAmountToPayDialog = ref(null);
const amountToPay = ref(null);
@ -38,33 +42,25 @@ const onPayClick = async () => {
};
const onConfirmPay = async () => {
if (amountToPay.value <= 0) {
if (!amountToPay.value || amountToPay.value <= 0) {
notify(t('amountError'), 'negative');
return;
}
if (amountToPay.value) {
const amount = amountToPay.value.toString().replace('.', ',');
amountToPay.value = parseFloat(amount);
await tpv.pay(amountToPay.value);
}
const amount = amountToPay.value.toString().replace('.', ',');
amountToPay.value = parseFloat(amount);
await tpv.pay(amountToPay.value);
};
</script>
<template>
<Teleport :to="$actions">
<Teleport v-if="isHeaderMounted" to="#actions">
<div class="balance">
<span class="label">{{ t('balance') }}</span>
<span
class="amount"
:class="{ negative: debt < 0 }"
>
<span class="amount" :class="{ negative: debt < 0 }">
{{ currency(debt || 0) }}
</span>
<QIcon
name="info"
class="info"
size="sm"
>
<QIcon name="info" class="info" size="sm">
<QTooltip max-width="450px">
{{ t('paymentInfo') }}
</QTooltip>

10
src/pages/Ecomerce/PendingOrders.vue
View File

@ -7,13 +7,15 @@ import CardList from 'src/components/ui/CardList.vue';
import { currency, formatDateTitle } from 'src/lib/filters.js';
import { useVnConfirm } from 'src/composables/useVnConfirm.js';
import useNotify from 'src/composables/useNotify.js';
import { useAppStore } from 'src/stores/app.js';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
const jApi = inject('jApi');
const { t } = useI18n();
const { openConfirmationModal } = useVnConfirm();
const { notify } = useNotify();
const store = useAppStore();
const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);
const router = useRouter();
const orders = ref([]);
@ -52,7 +54,7 @@ const removeOrder = async (id, index) => {
};
const loadOrder = orderId => {
store.loadIntoBasket(orderId);
appStore.loadIntoBasket(orderId);
router.push({ name: 'catalog' });
};
@ -62,7 +64,7 @@ onMounted(async () => {
</script>
<template>
<Teleport :to="$actions">
<Teleport v-if="isHeaderMounted" to="#actions">
<QBtn
:to="{ name: 'checkout' }"
icon="add_shopping_cart"

8
src/pages/Ecomerce/TicketView.vue
View File

@ -5,12 +5,16 @@ import { useI18n } from 'vue-i18n';
import TicketDetails from 'src/pages/Ecomerce/TicketDetails.vue';
import { userStore as useUserStore } from 'stores/user';
import { useUserStore } from 'stores/user';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
const { t } = useI18n();
const jApi = inject('jApi');
const route = useRoute();
const userStore = useUserStore();
const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);
const ticket = ref({});
const rows = ref([]);
@ -46,7 +50,7 @@ const onPrintClick = () => {
</script>
<template>
<Teleport :to="$actions">
<Teleport v-if="isHeaderMounted" to="#actions">
<QBtn
icon="print"
:label="t('printDeliveryNote')"

45
src/pages/Login/LoginView.vue
View File

@ -1,13 +1,13 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { userStore } from 'stores/user';
import { useUserStore } from 'stores/user';
import { onMounted, ref } from 'vue';
import useNotify from 'src/composables/useNotify.js';
import { useRouter, useRoute } from 'vue-router';
const { notify } = useNotify();
const t = useI18n();
const user = userStore();
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const email = ref(null);
@ -29,7 +29,7 @@ onMounted(() => {
}
});
async function onLogin() {
await user.login(email.value, password.value, remember.value);
await userStore.login(email.value, password.value, remember.value);
router.push('/');
}
</script>
@ -37,27 +37,13 @@ async function onLogin() {
<template>
<div class="main">
<div class="header">
<router-link
to="/"
class="block"
>
<img
src="statics/logo.svg"
alt="Verdnatura"
class="block"
>
<router-link to="/" class="block">
<img src="statics/logo.svg" alt="Verdnatura" class="block" />
</router-link>
</div>
<QForm
@submit="onLogin"
class="q-gutter-y-md"
>
<QForm @submit="onLogin" class="q-gutter-y-md">
<div class="q-gutter-y-sm">
<QInput
v-model="email"
:label="$t('user')"
autofocus
/>
<QInput v-model="email" :label="$t('user')" autofocus />
<QInput
v-model="password"
:label="$t('password')"
@ -87,16 +73,8 @@ async function onLogin() {
rounded
>
<QMenu auto-close>
<QList
dense
v-for="lang in langs"
:key="lang"
>
<QItem
disabled
v-ripple
clickable
>
<QList dense v-for="lang in langs" :key="lang">
<QItem disabled v-ripple clickable>
{{ $t(`langs.${lang}`) }}
</QItem>
</QList>
@ -127,10 +105,7 @@ async function onLogin() {
/>
</div>
<p class="password-forgotten text-center q-mt-lg">
<router-link
to="/remember-password"
class="link"
>
<router-link to="/remember-password" class="link">
{{ $t('haveForgottenPassword') }}
</router-link>
</p>

40
src/router/routes.js
View File

@ -88,6 +88,46 @@ const routes = [
name: 'addressDetails',
path: '/account/address/:id?',
component: () => import('pages/Account/AddressDetails.vue')
},
{
name: 'controlPanel',
path: 'admin/links',
component: () => import('pages/Admin/LinksView.vue')
},
{
name: 'adminUsers',
path: 'admin/users',
component: () => import('pages/Admin/UsersView.vue')
},
{
name: 'adminConnections',
path: 'admin/connections',
component: () => import('pages/Admin/ConnectionsView.vue')
},
{
name: 'adminVisits',
path: 'admin/visits',
component: () => import('pages/Admin/VisitsView.vue')
},
{
name: 'adminNews',
path: 'news/news',
component: () => import('pages/Admin/NewsView.vue')
},
{
name: 'adminNewsDetails',
path: 'news/new/:id?',
component: () => import('pages/Admin/NewsDetails.vue')
},
{
name: 'adminPhotos',
path: 'admin/photos',
component: () => import('pages/Admin/PhotosView.vue')
},
{
name: 'adminItems',
path: 'admin/items',
component: () => import('pages/Admin/ItemsView.vue')
}
]
},

41
src/stores/app.js
View File

@ -11,11 +11,43 @@ export const useAppStore = defineStore('hedera', {
imageUrl: '',
useRightDrawer: false,
rightDrawerOpen: false,
basketOrderId: null,
isHeaderMounted: false
isHeaderMounted: false,
menuEssentialLinks: [],
basketOrderId: null
}),
actions: {
async getMenuLinks() {
const sections = await jApi.query('SELECT * FROM myMenu');
const sectionMap = new Map();
for (const section of sections) {
sectionMap.set(section.id, section);
}
const sectionTree = [];
for (const section of sections) {
const parent = section.parentFk;
if (parent) {
const parentSection = sectionMap.get(parent);
if (!parentSection) continue;
let childs = parentSection.childs;
if (!childs) {
childs = parentSection.childs = [];
}
childs.push(section);
} else {
sectionTree.push(section);
}
}
this.menuEssentialLinks = sectionTree;
},
async loadConfig() {
const imageUrl = await jApi.getValue('SELECT url FROM imageConfig');
this.$patch({ imageUrl });
},
async init() {
this.getBasketOrderId();
},
@ -24,11 +56,6 @@ export const useAppStore = defineStore('hedera', {
this.basketOrderId = localStorage.getItem('hederaBasket');
},
async loadConfig() {
const imageUrl = await jApi.getValue('SELECT url FROM imageConfig');
this.$patch({ imageUrl });
},
async checkOrder(orderId) {
try {
const resultSet = await jApi.execQuery(

53
src/stores/user.js
View File

@ -1,7 +1,7 @@
import { defineStore } from 'pinia';
import { api, jApi } from 'boot/axios';
export const userStore = defineStore('user', {
export const useUserStore = defineStore('user', {
state: () => {
const token =
sessionStorage.getItem('vnToken') ||
@ -9,10 +9,9 @@ export const userStore = defineStore('user', {
return {
token,
id: null,
name: null,
nickname: null,
isGuest: false
isGuest: false,
user: null,
supplantedUser: null
};
},
@ -21,6 +20,11 @@ export const userStore = defineStore('user', {
},
actions: {
async getToken() {
this.token =
sessionStorage.getItem('vnToken') ||
localStorage.getItem('vnToken');
},
async login(user, password, remember) {
const params = { user, password };
const res = await api.post('Accounts/login', params);
@ -36,7 +40,6 @@ export const userStore = defineStore('user', {
name: user
});
},
async logout() {
if (this.token != null) {
try {
@ -48,16 +51,38 @@ export const userStore = defineStore('user', {
this.$reset();
},
async loadData() {
const userData = await jApi.getObject(
'SELECT id, nickname, name FROM account.myUser'
);
async fetchUser(userType = 'user') {
try {
const userData = await jApi.getObject(
'SELECT id, nickname, name FROM account.myUser'
);
this.$patch({ [userType]: userData });
} catch (error) {
console.error('Error fetching user: ', error);
}
},
this.$patch({
id: userData.id,
nickname: userData.nickname,
name: userData.name
async supplantUser(supplantUser) {
const json = await jApi.send('client/supplant', {
supplantUser
});
this.token = json;
sessionStorage.setItem('supplantUser', supplantUser);
await this.fetchUser('supplantedUser');
},
async supplantInit() {
const user = sessionStorage.getItem('supplantUser');
if (user == null) return;
await this.supplantUser(user);
},
async logoutSupplantedUser() {
sessionStorage.removeItem('supplantUser');
this.supplantedUser = null;
await api.post('Accounts/logout');
this.getToken();
await this.fetchUser();
}
}
});