Merge branch 'dev' into 4560-gastos-reparto
This commit is contained in:
commit
ca4193e11a
|
|
@ -58,13 +58,13 @@ module.exports = {
|
||||||
rules: {
|
rules: {
|
||||||
'prefer-promise-reject-errors': 'off',
|
'prefer-promise-reject-errors': 'off',
|
||||||
'no-unused-vars': 'warn',
|
'no-unused-vars': 'warn',
|
||||||
|
"vue/no-multiple-template-root": "off" ,
|
||||||
// allow debugger during development only
|
// allow debugger during development only
|
||||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||||
},
|
},
|
||||||
overrides: [
|
overrides: [
|
||||||
{
|
{
|
||||||
files: ['test/cypress/**/*.spec.{js,ts}'],
|
files: ['test/cypress/**/*.*'],
|
||||||
extends: [
|
extends: [
|
||||||
// Add Cypress-specific lint rules, globals and Cypress plugin
|
// Add Cypress-specific lint rules, globals and Cypress plugin
|
||||||
// See https://github.com/cypress-io/eslint-plugin-cypress#rules
|
// See https://github.com/cypress-io/eslint-plugin-cypress#rules
|
||||||
|
|
|
||||||
|
|
@ -13,5 +13,6 @@
|
||||||
],
|
],
|
||||||
"[vue]": {
|
"[vue]": {
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||||
}
|
},
|
||||||
|
"cSpell.words": ["axios"]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
48
CHANGELOG.md
48
CHANGELOG.md
|
|
@ -5,6 +5,54 @@ All notable changes to this project will be documented in this file.
|
||||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||||
|
|
||||||
|
## [2420.01]
|
||||||
|
|
||||||
|
## [2418.01]
|
||||||
|
|
||||||
|
## [2416.01] - 2024-04-18
|
||||||
|
|
||||||
|
### Added
|
||||||
|
|
||||||
|
### Fixed
|
||||||
|
|
||||||
|
- (General) => Se vuelven a mostrar los parámetros en la url al aplicar un filtro
|
||||||
|
|
||||||
|
## [2414.01] - 2024-04-04
|
||||||
|
|
||||||
|
### Added
|
||||||
|
|
||||||
|
- (Tickets) => Se añade la opción de clonar ticket. #6951
|
||||||
|
- (Parking) => Se añade la sección Parking. #5186
|
||||||
|
|
||||||
|
- (Rutas) => Se añade el campo "servida" a la tabla y se añade también a los filtros. #7130
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
|
||||||
|
### Fixed
|
||||||
|
|
||||||
|
- (General) => Se corrige la redirección cuando hay 1 solo registro y cuando se aplica un filtro diferente al id al hacer una búsqueda general. #6893
|
||||||
|
|
||||||
|
## [2400.01] - 2024-01-04
|
||||||
|
|
||||||
|
### Added
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
|
||||||
|
### Fixed
|
||||||
|
|
||||||
|
## [2350.01] - 2023-12-14
|
||||||
|
|
||||||
|
### Added
|
||||||
|
|
||||||
|
- (Carros) => Se añade contador de carros. #6545
|
||||||
|
- (Reclamaciones) => Se añade la sección para hacer acciones sobre una reclamación. #5654
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
|
||||||
|
### Fixed
|
||||||
|
|
||||||
|
- (Reclamaciones) => Se corrige el color de la barra según el tema y el evento de actualziar cantidades #6334
|
||||||
|
|
||||||
## [2253.01] - 2023-01-05
|
## [2253.01] - 2023-01-05
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
FROM node:stretch-slim
|
FROM node:stretch-slim
|
||||||
RUN npm install -g @quasar/cli
|
RUN corepack enable pnpm
|
||||||
|
RUN pnpm install -g @quasar/cli
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
COPY dist/spa ./
|
COPY dist/spa ./
|
||||||
CMD ["quasar", "serve", "./", "--history", "--hostname", "0.0.0.0"]
|
CMD ["quasar", "serve", "./", "--history", "--hostname", "0.0.0.0"]
|
||||||
|
|
|
||||||
|
|
@ -1,99 +1,119 @@
|
||||||
#!/usr/bin/env groovy
|
#!/usr/bin/env groovy
|
||||||
|
|
||||||
|
def PROTECTED_BRANCH
|
||||||
|
|
||||||
|
def BRANCH_ENV = [
|
||||||
|
test: 'test',
|
||||||
|
master: 'production'
|
||||||
|
]
|
||||||
|
|
||||||
|
node {
|
||||||
|
stage('Setup') {
|
||||||
|
env.FRONT_REPLICAS = 1
|
||||||
|
env.NODE_ENV = BRANCH_ENV[env.BRANCH_NAME] ?: 'dev'
|
||||||
|
|
||||||
|
PROTECTED_BRANCH = [
|
||||||
|
'dev',
|
||||||
|
'test',
|
||||||
|
'master'
|
||||||
|
].contains(env.BRANCH_NAME)
|
||||||
|
|
||||||
|
// https://www.jenkins.io/doc/book/pipeline/jenkinsfile/#using-environment-variables
|
||||||
|
echo "NODE_NAME: ${env.NODE_NAME}"
|
||||||
|
echo "WORKSPACE: ${env.WORKSPACE}"
|
||||||
|
|
||||||
|
configFileProvider([
|
||||||
|
configFile(fileId: 'salix-front.properties',
|
||||||
|
variable: 'PROPS_FILE')
|
||||||
|
]) {
|
||||||
|
def props = readProperties file: PROPS_FILE
|
||||||
|
props.each {key, value -> env."${key}" = value }
|
||||||
|
props.each {key, value -> echo "${key}: ${value}" }
|
||||||
|
}
|
||||||
|
|
||||||
|
if (PROTECTED_BRANCH) {
|
||||||
|
configFileProvider([
|
||||||
|
configFile(fileId: "salix-front.branch.${env.BRANCH_NAME}",
|
||||||
|
variable: 'BRANCH_PROPS_FILE')
|
||||||
|
]) {
|
||||||
|
def props = readProperties file: BRANCH_PROPS_FILE
|
||||||
|
props.each {key, value -> env."${key}" = value }
|
||||||
|
props.each {key, value -> echo "${key}: ${value}" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
pipeline {
|
pipeline {
|
||||||
agent any
|
agent any
|
||||||
options {
|
options {
|
||||||
disableConcurrentBuilds()
|
disableConcurrentBuilds()
|
||||||
}
|
}
|
||||||
|
tools {
|
||||||
|
nodejs 'node-v18'
|
||||||
|
}
|
||||||
environment {
|
environment {
|
||||||
PROJECT_NAME = 'lilium'
|
PROJECT_NAME = 'lilium'
|
||||||
STACK_NAME = "${env.PROJECT_NAME}-${env.BRANCH_NAME}"
|
STACK_NAME = "${env.PROJECT_NAME}-${env.BRANCH_NAME}"
|
||||||
}
|
}
|
||||||
stages {
|
stages {
|
||||||
stage('Checkout') {
|
|
||||||
steps {
|
|
||||||
script {
|
|
||||||
switch (env.BRANCH_NAME) {
|
|
||||||
case 'master':
|
|
||||||
env.NODE_ENV = 'production'
|
|
||||||
env.FRONT_REPLICAS = 2
|
|
||||||
break
|
|
||||||
case 'test':
|
|
||||||
env.NODE_ENV = 'test'
|
|
||||||
env.FRONT_REPLICAS = 1
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setEnv()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
stage('Install') {
|
stage('Install') {
|
||||||
environment {
|
environment {
|
||||||
NODE_ENV = ""
|
NODE_ENV = ""
|
||||||
}
|
}
|
||||||
steps {
|
steps {
|
||||||
nodejs('node-v18') {
|
sh 'pnpm install --prefer-offline'
|
||||||
sh 'npm install --no-audit --prefer-offline'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
stage('Test') {
|
stage('Test') {
|
||||||
when { not { anyOf {
|
when {
|
||||||
branch 'test'
|
expression { !PROTECTED_BRANCH }
|
||||||
branch 'master'
|
}
|
||||||
}}}
|
|
||||||
environment {
|
environment {
|
||||||
NODE_ENV = ""
|
NODE_ENV = ""
|
||||||
}
|
}
|
||||||
parallel {
|
steps {
|
||||||
stage('Frontend') {
|
sh 'pnpm run test:unit:ci'
|
||||||
steps {
|
}
|
||||||
nodejs('node-v18') {
|
post {
|
||||||
sh 'npm run test:unit:ci'
|
always {
|
||||||
}
|
junit(
|
||||||
}
|
testResults: 'junitresults.xml',
|
||||||
|
allowEmptyResults: true
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
stage('Build') {
|
stage('Build') {
|
||||||
when { anyOf {
|
when {
|
||||||
branch 'test'
|
expression { PROTECTED_BRANCH }
|
||||||
branch 'master'
|
}
|
||||||
}}
|
|
||||||
environment {
|
environment {
|
||||||
CREDENTIALS = credentials('docker-registry')
|
CREDENTIALS = credentials('docker-registry')
|
||||||
}
|
}
|
||||||
steps {
|
steps {
|
||||||
nodejs('node-v18') {
|
sh 'quasar build'
|
||||||
sh 'quasar build'
|
script {
|
||||||
|
def packageJson = readJSON file: 'package.json'
|
||||||
|
env.VERSION = packageJson.version
|
||||||
}
|
}
|
||||||
dockerBuild()
|
dockerBuild()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
stage('Deploy') {
|
stage('Deploy') {
|
||||||
when { anyOf {
|
when {
|
||||||
branch 'test'
|
expression { PROTECTED_BRANCH }
|
||||||
branch 'master'
|
}
|
||||||
}}
|
|
||||||
environment {
|
environment {
|
||||||
DOCKER_HOST = "${env.SWARM_HOST}"
|
DOCKER_HOST = "${env.SWARM_HOST}"
|
||||||
}
|
}
|
||||||
steps {
|
steps {
|
||||||
|
script {
|
||||||
|
def packageJson = readJSON file: 'package.json'
|
||||||
|
env.VERSION = packageJson.version
|
||||||
|
}
|
||||||
sh "docker stack deploy --with-registry-auth --compose-file docker-compose.yml ${env.STACK_NAME}"
|
sh "docker stack deploy --with-registry-auth --compose-file docker-compose.yml ${env.STACK_NAME}"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
post {
|
}
|
||||||
always {
|
|
||||||
script {
|
|
||||||
if (!['master', 'test'].contains(env.BRANCH_NAME)) {
|
|
||||||
try {
|
|
||||||
junit 'junitresults.xml'
|
|
||||||
junit 'junit.xml'
|
|
||||||
} catch (e) {
|
|
||||||
echo e.toString()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ Lilium frontend
|
||||||
## Install the dependencies
|
## Install the dependencies
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install
|
pnpm install
|
||||||
```
|
```
|
||||||
|
|
||||||
### Install quasar cli
|
### Install quasar cli
|
||||||
|
|
@ -23,13 +23,13 @@ quasar dev
|
||||||
### Run unit tests
|
### Run unit tests
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run test:unit
|
pnpm run test:unit
|
||||||
```
|
```
|
||||||
|
|
||||||
### Run e2e tests
|
### Run e2e tests
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run test:e2e
|
pnpm run test:e2e
|
||||||
```
|
```
|
||||||
|
|
||||||
### Build the app for production
|
### Build the app for production
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,13 @@ const { defineConfig } = require('cypress');
|
||||||
module.exports = defineConfig({
|
module.exports = defineConfig({
|
||||||
e2e: {
|
e2e: {
|
||||||
baseUrl: 'http://localhost:9000/',
|
baseUrl: 'http://localhost:9000/',
|
||||||
|
experimentalStudio: true,
|
||||||
fixturesFolder: 'test/cypress/fixtures',
|
fixturesFolder: 'test/cypress/fixtures',
|
||||||
screenshotsFolder: 'test/cypress/screenshots',
|
screenshotsFolder: 'test/cypress/screenshots',
|
||||||
supportFile: 'test/cypress/support/index.js',
|
supportFile: 'test/cypress/support/index.js',
|
||||||
videosFolder: 'test/cypress/videos',
|
videosFolder: 'test/cypress/videos',
|
||||||
video: true,
|
video: false,
|
||||||
specPattern: 'test/cypress/integration/*.spec.js',
|
specPattern: 'test/cypress/integration/**/*.spec.js',
|
||||||
experimentalRunAllSpecs: true,
|
experimentalRunAllSpecs: true,
|
||||||
component: {
|
component: {
|
||||||
componentFolder: 'src',
|
componentFolder: 'src',
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
63
package.json
63
package.json
|
|
@ -1,54 +1,59 @@
|
||||||
{
|
{
|
||||||
"name": "salix-front",
|
"name": "salix-front",
|
||||||
"version": "0.0.1",
|
"version": "24.22.0",
|
||||||
"description": "Salix frontend",
|
"description": "Salix frontend",
|
||||||
"productName": "Salix",
|
"productName": "Salix",
|
||||||
"author": "Verdnatura",
|
"author": "Verdnatura",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
"packageManager": "pnpm@8.15.1",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"lint": "eslint --ext .js,.vue ./",
|
"lint": "eslint --ext .js,.vue ./",
|
||||||
"format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
|
"format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
|
||||||
"test:e2e": "cypress open",
|
"test:e2e": "cypress open",
|
||||||
"test:e2e:ci": "cypress run --browser chromium",
|
"test:e2e:ci": "cd ../salix && gulp docker && cd ../salix-front && cypress run",
|
||||||
"test": "echo \"See package.json => scripts for available tests.\" && exit 0",
|
"test": "echo \"See package.json => scripts for available tests.\" && exit 0",
|
||||||
"test:unit": "vitest",
|
"test:unit": "vitest",
|
||||||
"test:unit:ci": "vitest run"
|
"test:unit:ci": "vitest run"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@quasar/extras": "^1.15.11",
|
"@quasar/cli": "^2.3.0",
|
||||||
"axios": "^1.2.1",
|
"@quasar/extras": "^1.16.9",
|
||||||
"pinia": "^2.0.28",
|
"axios": "^1.4.0",
|
||||||
"quasar": "^2.11.7",
|
"chromium": "^3.0.3",
|
||||||
"validator": "^13.7.0",
|
"croppie": "^2.6.5",
|
||||||
"vue": "^3.2.45",
|
"pinia": "^2.1.3",
|
||||||
|
"quasar": "^2.14.5",
|
||||||
|
"validator": "^13.9.0",
|
||||||
|
"vue": "^3.3.4",
|
||||||
"vue-i18n": "^9.2.2",
|
"vue-i18n": "^9.2.2",
|
||||||
"vue-router": "^4.1.6",
|
"vue-router": "^4.2.1"
|
||||||
"vue-router-mock": "^0.1.9"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@intlify/unplugin-vue-i18n": "^0.8.1",
|
"@intlify/unplugin-vue-i18n": "^0.8.1",
|
||||||
"@pinia/testing": "^0.0.14",
|
"@pinia/testing": "^0.1.2",
|
||||||
"@quasar/app-vite": "^1.2.1",
|
"@quasar/app-vite": "^1.7.3",
|
||||||
"@quasar/quasar-app-extension-testing-unit-vitest": "^0.2.1",
|
"@quasar/quasar-app-extension-qcalendar": "4.0.0-beta.15",
|
||||||
"@vue/test-utils": "^2.0.0",
|
"@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
|
||||||
"autoprefixer": "^10.4.13",
|
"@vue/test-utils": "^2.4.4",
|
||||||
"cypress": "^12.2.0",
|
"autoprefixer": "^10.4.14",
|
||||||
"eslint": "^8.30.0",
|
"cypress": "^13.6.6",
|
||||||
"eslint-config-prettier": "^8.5.0",
|
"eslint": "^8.41.0",
|
||||||
"eslint-plugin-cypress": "^2.12.1",
|
"eslint-config-prettier": "^8.8.0",
|
||||||
"eslint-plugin-vue": "^9.8.0",
|
"eslint-plugin-cypress": "^2.13.3",
|
||||||
"postcss": "^8.4.20",
|
"eslint-plugin-vue": "^9.14.1",
|
||||||
"prettier": "^2.8.1",
|
"postcss": "^8.4.23",
|
||||||
"vitest": "^0.26.3"
|
"prettier": "^2.8.8",
|
||||||
|
"vitest": "^0.31.1"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "^18 || ^16 || ^14.19",
|
"node": "^20 || ^18 || ^16",
|
||||||
"npm": ">= 6.13.4",
|
"npm": ">= 8.1.2",
|
||||||
"yarn": ">= 1.21.1"
|
"yarn": ">= 1.21.1",
|
||||||
|
"bun": ">= 1.0.25"
|
||||||
},
|
},
|
||||||
"overrides": {
|
"overrides": {
|
||||||
"@vitejs/plugin-vue": "^4.0.0",
|
"@vitejs/plugin-vue": "^5.0.4",
|
||||||
"vite": "^4.0.3",
|
"vite": "^5.1.4",
|
||||||
"vitest": "^0.26.3"
|
"vitest": "^0.31.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -29,7 +29,7 @@ module.exports = configure(function (/* ctx */) {
|
||||||
// app boot file (/src/boot)
|
// app boot file (/src/boot)
|
||||||
// --> boot files are part of "main.js"
|
// --> boot files are part of "main.js"
|
||||||
// https://v2.quasar.dev/quasar-cli/boot-files
|
// https://v2.quasar.dev/quasar-cli/boot-files
|
||||||
boot: ['i18n', 'axios', 'vnDate'],
|
boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar.defaults'],
|
||||||
|
|
||||||
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
|
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
|
||||||
css: ['app.scss'],
|
css: ['app.scss'],
|
||||||
|
|
@ -66,7 +66,9 @@ module.exports = configure(function (/* ctx */) {
|
||||||
// publicPath: '/',
|
// publicPath: '/',
|
||||||
// analyze: true,
|
// analyze: true,
|
||||||
// env: {},
|
// env: {},
|
||||||
// rawDefine: {}
|
rawDefine: {
|
||||||
|
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
|
||||||
|
},
|
||||||
// ignorePublicFolder: true,
|
// ignorePublicFolder: true,
|
||||||
// minify: false,
|
// minify: false,
|
||||||
// polyfillModulePreload: true,
|
// polyfillModulePreload: true,
|
||||||
|
|
@ -89,14 +91,13 @@ module.exports = configure(function (/* ctx */) {
|
||||||
|
|
||||||
vitePlugins: [
|
vitePlugins: [
|
||||||
[
|
[
|
||||||
VueI18nPlugin,
|
VueI18nPlugin({
|
||||||
{
|
runtimeOnly: false,
|
||||||
// if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
|
include: [
|
||||||
// compositionOnly: false,
|
path.resolve(__dirname, './src/i18n/locale/**'),
|
||||||
|
path.resolve(__dirname, './src/pages/**/locale/**'),
|
||||||
// you need to set i18n resource including paths !
|
],
|
||||||
include: path.resolve(__dirname, './src/i18n/**'),
|
}),
|
||||||
},
|
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
@ -114,15 +115,13 @@ module.exports = configure(function (/* ctx */) {
|
||||||
secure: false,
|
secure: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
open: false,
|
||||||
},
|
},
|
||||||
|
|
||||||
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
|
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
|
||||||
framework: {
|
framework: {
|
||||||
config: {
|
config: {
|
||||||
config: {
|
config: {
|
||||||
brand: {
|
|
||||||
primary: 'orange',
|
|
||||||
},
|
|
||||||
dark: 'auto',
|
dark: 'auto',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
{
|
{
|
||||||
"@quasar/testing-unit-vitest": {
|
"@quasar/testing-unit-vitest": {
|
||||||
"options": [
|
"options": ["scripts"]
|
||||||
"scripts"
|
},
|
||||||
]
|
"@quasar/qcalendar": {}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted } from 'vue';
|
import { onMounted } from 'vue';
|
||||||
import { useQuasar } from 'quasar';
|
import { useQuasar, Dark } from 'quasar';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
const quasar = useQuasar();
|
const quasar = useQuasar();
|
||||||
const { availableLocales, locale, fallbackLocale } = useI18n();
|
const { availableLocales, locale, fallbackLocale } = useI18n();
|
||||||
|
Dark.set(true);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
let userLang = window.navigator.language;
|
let userLang = window.navigator.language;
|
||||||
|
|
@ -15,7 +16,7 @@ onMounted(() => {
|
||||||
if (availableLocales.includes(userLang)) {
|
if (availableLocales.includes(userLang)) {
|
||||||
locale.value = userLang;
|
locale.value = userLang;
|
||||||
} else {
|
} else {
|
||||||
locale.value = fallbackLocale;
|
locale.value = fallbackLocale.value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
|
|
@ -0,0 +1,32 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 400 168.6" style="enable-background:new 0 0 400 168.6;" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#3D3D3F;}
|
||||||
|
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#8EBB27;}
|
||||||
|
.st2{fill:#8EBB27;}
|
||||||
|
.st3{fill:#F19300;}
|
||||||
|
</style>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path class="st0" d="M106.1,40L92.3,0h10.9l5.6,20.6l0.5,1.7c0.7,2.5,1.2,4.5,1.6,6.2c0.2-0.8,0.4-1.8,0.7-2.9 c0.3-1.1,0.7-2.6,1.2-4.3L118.7,0h10.8l-13.9,40H106.1z" style="fill: rgb(255, 255, 255);"/>
|
||||||
|
<path class="st1" d="M386.1,40h-9.8c0-0.5,0.1-1,0.1-1.5l0.2-1.6c-1.7,1.4-3.5,2.4-5.2,3c-1.7,0.6-3.5,1-5.3,1 c-2.8,0-4.9-0.8-6.1-2.3c-1.2-1.6-1.5-3.7-0.7-6.3c0.7-2.4,1.9-4.4,3.6-6c1.7-1.5,4-2.6,6.8-3.2c1.5-0.3,3.5-0.7,5.8-1.1 c3.5-0.5,5.4-1.3,5.7-2.4l0.2-0.7c0.2-0.9,0.1-1.5-0.4-2c-0.5-0.4-1.4-0.7-2.7-0.7c-1.4,0-2.6,0.3-3.5,0.8c-1,0.6-1.7,1.4-2.2,2.5 h-8.9c1.4-3.3,3.5-5.8,6.2-7.5c2.7-1.6,6.2-2.4,10.5-2.4c2.6,0,4.7,0.3,6.4,1c1.6,0.6,2.8,1.6,3.4,2.9c0.4,0.9,0.6,2,0.6,3.3 c-0.1,1.3-0.5,3.3-1.3,6.2l-3.1,11.2c-0.4,1.3-0.5,2.4-0.5,3.2c0,0.8,0.2,1.3,0.7,1.5L386.1,40z M379.4,26.1 c-0.9,0.5-2.3,0.9-4.3,1.3c-1,0.2-1.7,0.3-2.2,0.5c-1.3,0.3-2.2,0.7-2.8,1.2c-0.6,0.5-1.1,1.2-1.3,2c-0.3,1.1-0.2,1.9,0.3,2.5 c0.5,0.6,1.2,1,2.3,1c1.7,0,3.1-0.5,4.4-1.4c1.3-1,2.2-2.2,2.6-3.7L379.4,26.1z"/>
|
||||||
|
<path class="st1" d="M337.3,40l8.3-29.5h9.3l-1.4,5.2c1.6-2,3.3-3.5,5.1-4.4c1.8-0.9,3.9-1.4,6.3-1.5l-2.7,9.6 c-0.4-0.1-0.8-0.1-1.2-0.1c-0.4,0-0.8,0-1.1,0c-1.5,0-2.8,0.2-3.9,0.7c-1.1,0.4-2.1,1.1-2.9,2.1c-0.5,0.6-1,1.5-1.5,2.6 c-0.5,1.1-1.1,3-1.8,5.6l-2.8,9.9H337.3z"/>
|
||||||
|
<path class="st1" d="M340.8,10.5L332.5,40h-9.5l1.1-4.1c-1.6,1.6-3.3,2.9-4.9,3.6c-1.7,0.8-3.5,1.2-5.4,1.2 c-3.3,0-5.5-0.8-6.7-2.5c-1.2-1.7-1.3-4.2-0.4-7.4l5.7-20.3h9.7L317.6,27c-0.7,2.4-0.8,4.1-0.5,5c0.4,0.9,1.3,1.4,2.8,1.4 c1.7,0,3.1-0.6,4.1-1.7c1.1-1.1,2-2.9,2.7-5.5l4.4-15.8H340.8z"/>
|
||||||
|
<path class="st1" d="M290.1,16.3l1.6-5.8h4l2.3-8.3h9.7l-2.3,8.3h5l-1.6,5.8h-5l-3.6,12.8c-0.5,2-0.7,3.3-0.3,3.9 c0.3,0.6,1.2,1,2.6,1l0.7,0l0.5,0l-1.7,6.2c-1.1,0.2-2.1,0.3-3.1,0.5c-1,0.1-2,0.2-2.9,0.2c-3.4,0-5.4-0.8-6.2-2.5 c-0.8-1.6-0.4-5.1,1.1-10.5l3.2-11.4H290.1z"/>
|
||||||
|
<path class="st1" d="M283.5,40h-9.8c0-0.5,0.1-1,0.1-1.5L274,37c-1.7,1.4-3.5,2.4-5.2,3c-1.7,0.6-3.5,1-5.3,1 c-2.8,0-4.9-0.8-6.1-2.3c-1.2-1.6-1.5-3.7-0.7-6.3c0.7-2.4,1.9-4.4,3.6-6c1.7-1.5,4-2.6,6.8-3.2c1.5-0.3,3.5-0.7,5.8-1.1 c3.5-0.5,5.4-1.3,5.7-2.4l0.2-0.7c0.2-0.9,0.1-1.5-0.4-2c-0.5-0.4-1.4-0.7-2.7-0.7c-1.4,0-2.6,0.3-3.5,0.8c-1,0.6-1.7,1.4-2.2,2.5 H261c1.4-3.3,3.5-5.8,6.2-7.5c2.7-1.6,6.2-2.4,10.5-2.4c2.6,0,4.7,0.3,6.4,1c1.6,0.6,2.8,1.6,3.4,2.9c0.4,0.9,0.6,2,0.6,3.3 c-0.1,1.3-0.5,3.3-1.3,6.2l-3.1,11.2c-0.4,1.3-0.5,2.4-0.5,3.2c0,0.8,0.2,1.3,0.7,1.5L283.5,40z M276.7,26.1 c-0.9,0.5-2.3,0.9-4.3,1.3c-1,0.2-1.7,0.3-2.2,0.5c-1.3,0.3-2.2,0.7-2.8,1.2c-0.6,0.5-1.1,1.2-1.3,2c-0.3,1.1-0.2,1.9,0.3,2.5 c0.5,0.6,1.2,1,2.3,1c1.7,0,3.1-0.5,4.4-1.4c1.3-1,2.2-2.2,2.6-3.7L276.7,26.1z"/>
|
||||||
|
<path class="st0" d="M219.6,0l-11.2,40h-9.7l1.1-3.9c-1.5,1.6-3.1,2.8-4.8,3.6c-1.6,0.8-3.4,1.2-5.3,1.2c-3.7,0-6.3-1.4-7.8-4.3 c-1.5-2.9-1.6-6.6-0.3-11.2c1.3-4.7,3.5-8.4,6.7-11.4c3.1-2.9,6.5-4.4,10.1-4.4c1.9,0,3.6,0.4,4.8,1.2c1.3,0.8,2.2,1.9,2.8,3.5 L210,0H219.6z M189.8,24.9c-0.7,2.6-0.8,4.7-0.2,6.1c0.6,1.4,1.8,2.1,3.7,2.1c1.8,0,3.4-0.7,4.8-2.1c1.3-1.4,2.4-3.4,3.1-6.1 c0.7-2.5,0.7-4.4,0.1-5.8c-0.6-1.4-1.8-2-3.7-2c-1.7,0-3.3,0.7-4.7,2.1C191.5,20.6,190.4,22.5,189.8,24.9z" style="fill: rgb(255, 255, 255);"/>
|
||||||
|
<path class="st0" d="M153.6,40l8.3-29.5h9.3l-1.4,5.2c1.6-2,3.3-3.5,5.1-4.4c1.8-0.9,7.9-1.4,10.3-1.5l-2.7,9.6 c-0.4-0.1-0.8-0.1-1.2-0.1c-0.4,0-0.8,0-1.1,0c-1.5,0-6.8,0.2-7.9,0.7c-1.1,0.4-2.1,1.1-2.9,2.1c-0.5,0.6-1,1.5-1.5,2.6 c-0.5,1.1-1.1,3-1.8,5.6l-2.8,9.9H153.6z" style="fill: rgb(255, 255, 255);"/>
|
||||||
|
<path class="st0" d="M143.5,30.7h9.3c-1.8,3.2-4.2,5.7-7.2,7.5c-3,1.8-6.4,2.7-10.2,2.7c-4.6,0-7.8-1.4-9.7-4.2 c-1.9-2.8-2.2-6.6-0.8-11.4c1.4-4.9,3.8-8.8,7.3-11.6c3.5-2.9,7.5-4.3,12-4.3c4.7,0,8,1.5,9.8,4.3c1.9,2.9,2.1,6.9,0.7,12 l-0.3,1.1l-0.2,0.6h-20c-0.6,2.1-0.6,3.7,0,4.8c0.6,1.1,1.8,1.6,3.5,1.6c1.3,0,2.4-0.3,3.4-0.8C142.1,32.6,142.9,31.8,143.5,30.7z M135.4,22.1l11,0c0.5-1.9,0.4-3.4-0.3-4.4c-0.7-1.1-1.8-1.6-3.5-1.6c-1.6,0-3,0.5-4.3,1.6C137.1,18.6,136.1,20.1,135.4,22.1z" style="fill: rgb(255, 255, 255);"/>
|
||||||
|
<path class="st2" d="M241.2,40.4l-8.4-24.6l-8.5,24.6h-9.6l12.6-40h10.8L244,21l0.5,1.7c0.7,2.5,1.2,4.5,1.6,6.2l0.7-2.9 c0.3-1.1,0.7-2.6,1.2-4.3l5.9-21.2h10.8l-13.9,40H241.2z"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path class="st3" d="M106.1,54.4h4.8l48.9,113.9h-5.9L137,129H79.9l-16.8,39.3H57L106.1,54.4z M135.3,124.2l-26.8-62.7l-26.9,62.7 H135.3z"/>
|
||||||
|
<path class="st3" d="M178.1,168.3V54.4h5.6v108.7h69.8v5.1H178.1z"/>
|
||||||
|
<path class="st3" d="M271.1,168.3V54.4h5.6v113.9H271.1z"/>
|
||||||
|
<path class="st3" d="M300.2,54.4l42,53.6l42-53.6h6.4l-45.4,57.7l44.1,56.1H383l-40.7-52l-40.7,52h-6.7l44.1-56.1l-45.4-57.7 H300.2z"/>
|
||||||
|
<g>
|
||||||
|
<path class="st3" d="M5.8,168.3L5.3,163l0.2,2.7L5.3,163c0.4,0,10.4-1.1,18.9-11.8c10.5-13.1,14.1-35.2,10.5-63.9 C31,57.7,35.4,34.8,47.6,19.1C60.3,3,76.6,0.9,77.3,0.8l0.6,5.3c-0.1,0-11.9,1.6-22.4,12.1c-14,14-19.3,37.7-15.5,68.4 c3.8,30.7-0.1,53.6-11.8,68.1C18.3,167.1,6.3,168.2,5.8,168.3z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
|
@ -0,0 +1,158 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
version="1.1"
|
||||||
|
x="0px"
|
||||||
|
y="0px"
|
||||||
|
width="226.229px"
|
||||||
|
height="31.038px"
|
||||||
|
viewBox="0 0 226.229 31.038"
|
||||||
|
enable-background="new 0 0 226.229 31.038"
|
||||||
|
xml:space="preserve"
|
||||||
|
id="svg2"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||||
|
sodipodi:docname="logo.svg"><metadata
|
||||||
|
id="metadata61"><rdf:RDF><cc:Work
|
||||||
|
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
|
||||||
|
id="defs59">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</defs><sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1016"
|
||||||
|
id="namedview57"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="4.8159974"
|
||||||
|
inkscape:cx="90.91814"
|
||||||
|
inkscape:cy="16.509992"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg2"
|
||||||
|
inkscape:document-rotation="0" />
|
||||||
|
<g
|
||||||
|
id="Background">
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="Guides">
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M 10.417,30.321 0,0 h 8.233 l 4.26,15.582 0.349,1.276 c 0.521,1.866 0.918,3.431 1.191,4.693 0.15,-0.618 0.335,-1.345 0.555,-2.182 0.219,-0.837 0.528,-1.935 0.925,-3.293 L 19.981,0 h 8.19 l -10.5,30.321 z"
|
||||||
|
id="path11"
|
||||||
|
style="fill:#1a1a1a;fill-opacity:1" /><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill="#A0CE67"
|
||||||
|
d="m 139.809,19.787 c -0.665,0.357 -1.748,0.686 -3.25,0.988 -0.727,0.137 -1.283,0.254 -1.667,0.35 -0.95,0.247 -1.661,0.563 -2.134,0.947 -0.472,0.384 -0.799,0.899 -0.979,1.544 -0.223,0.796 -0.155,1.438 0.204,1.925 0.359,0.488 0.945,0.731 1.757,0.731 1.252,0 2.375,-0.36 3.369,-1.081 0.994,-0.721 1.653,-1.665 1.98,-2.831 z m 5.106,10.534 h -7.458 c 0.017,-0.356 0.048,-0.726 0.094,-1.11 l 0.159,-1.192 c -1.318,1.026 -2.627,1.786 -3.927,2.279 -1.299,0.493 -2.643,0.739 -4.031,0.739 -2.158,0 -3.7,-0.593 -4.625,-1.779 -0.925,-1.187 -1.106,-2.788 -0.542,-4.804 0.519,-1.851 1.431,-3.356 2.737,-4.515 1.307,-1.159 3.021,-1.972 5.142,-2.438 1.169,-0.247 2.641,-0.515 4.413,-0.803 2.646,-0.412 4.082,-1.016 4.304,-1.812 l 0.151,-0.539 c 0.182,-0.65 0.076,-1.145 -0.317,-1.483 -0.393,-0.339 -1.071,-0.508 -2.033,-0.508 -1.045,0 -1.934,0.214 -2.666,0.643 -0.731,0.428 -1.289,1.058 -1.673,1.887 h -6.748 c 1.065,-2.53 2.64,-4.413 4.723,-5.65 2.083,-1.237 4.724,-1.856 7.923,-1.856 1.991,0 3.602,0.241 4.833,0.722 1.231,0.481 2.095,1.209 2.59,2.185 0.339,0.701 0.483,1.536 0.432,2.504 -0.052,0.969 -0.377,2.525 -0.978,4.669 l -2.375,8.483 c -0.284,1.014 -0.416,1.812 -0.396,2.395 0.02,0.583 0.188,0.962 0.503,1.141 z"
|
||||||
|
id="path15"
|
||||||
|
style="fill:#97d700;fill-opacity:1" /><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill="#A0CE67"
|
||||||
|
d="m 185.7,30.321 6.27,-22.393 h 7.049 l -1.097,3.918 c 1.213,-1.537 2.502,-2.659 3.867,-3.366 1.365,-0.707 2.951,-1.074 4.758,-1.101 l -2.03,7.25 c -0.304,-0.042 -0.608,-0.072 -0.912,-0.093 -0.303,-0.02 -0.592,-0.03 -0.867,-0.03 -1.126,0 -2.104,0.168 -2.932,0.504 -0.829,0.336 -1.561,0.854 -2.197,1.555 -0.406,0.467 -0.789,1.136 -1.149,2.007 -0.361,0.872 -0.814,2.282 -1.359,4.232 l -2.104,7.516 H 185.7 Z"
|
||||||
|
id="path19"
|
||||||
|
style="fill:#97d700;fill-opacity:1" /><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill="#A0CE67"
|
||||||
|
d="m 217.631,19.787 c -0.664,0.357 -1.748,0.686 -3.25,0.988 -0.727,0.137 -1.282,0.254 -1.667,0.35 -0.95,0.247 -1.661,0.563 -2.134,0.947 -0.472,0.384 -0.799,0.899 -0.979,1.544 -0.223,0.796 -0.155,1.438 0.205,1.925 0.359,0.488 0.945,0.731 1.757,0.731 1.252,0 2.375,-0.36 3.369,-1.081 0.994,-0.721 1.654,-1.665 1.98,-2.831 z m 5.106,10.534 h -7.458 c 0.017,-0.356 0.048,-0.726 0.094,-1.11 l 0.159,-1.192 c -1.318,1.026 -2.627,1.786 -3.927,2.279 -1.299,0.493 -2.643,0.739 -4.031,0.739 -2.158,0 -3.7,-0.593 -4.625,-1.779 -0.926,-1.187 -1.106,-2.788 -0.542,-4.804 0.519,-1.851 1.431,-3.356 2.737,-4.515 1.306,-1.159 3.02,-1.972 5.142,-2.438 1.169,-0.247 2.641,-0.515 4.413,-0.803 2.647,-0.412 4.082,-1.016 4.304,-1.812 l 0.151,-0.539 c 0.182,-0.65 0.077,-1.145 -0.317,-1.483 -0.393,-0.339 -1.071,-0.508 -2.033,-0.508 -1.045,0 -1.934,0.214 -2.666,0.643 -0.731,0.428 -1.289,1.058 -1.672,1.887 h -6.748 c 1.065,-2.53 2.64,-4.413 4.723,-5.65 2.083,-1.237 4.724,-1.856 7.923,-1.856 1.99,0 3.601,0.241 4.833,0.722 1.232,0.481 2.095,1.209 2.591,2.185 0.339,0.701 0.483,1.536 0.431,2.504 -0.051,0.969 -0.377,2.525 -0.978,4.669 l -2.375,8.483 c -0.284,1.014 -0.416,1.812 -0.396,2.395 0.02,0.583 0.188,0.962 0.503,1.141 z"
|
||||||
|
id="path23"
|
||||||
|
style="fill:#97d700;fill-opacity:1" /><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill="#A0CE67"
|
||||||
|
d="m 188.386,7.928 -6.269,22.393 h -7.174 l 0.864,-3.085 c -1.227,1.246 -2.476,2.163 -3.746,2.751 -1.27,0.588 -2.625,0.882 -4.067,0.882 -2.471,0 -4.154,-0.634 -5.048,-1.901 -0.895,-1.268 -0.993,-3.149 -0.294,-5.644 l 4.31,-15.396 h 7.338 l -3.508,12.53 c -0.516,1.842 -0.641,3.109 -0.375,3.803 0.266,0.694 0.967,1.041 2.105,1.041 1.275,0 2.323,-0.422 3.142,-1.267 0.819,-0.845 1.497,-2.223 2.031,-4.133 l 3.353,-11.974 z"
|
||||||
|
id="path27"
|
||||||
|
style="fill:#97d700;fill-opacity:1" /><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill="#A0CE67"
|
||||||
|
d="m 149.937,12.356 1.239,-4.428 h 2.995 l 1.771,-6.326 h 7.338 l -1.771,6.326 h 3.753 l -1.24,4.428 h -3.753 l -2.716,9.702 c -0.416,1.483 -0.498,2.465 -0.247,2.946 0.25,0.48 0.905,0.721 1.964,0.721 l 0.549,-0.011 0.39,-0.031 -1.31,4.678 c -0.811,0.148 -1.596,0.263 -2.354,0.344 -0.758,0.081 -1.48,0.122 -2.167,0.122 -2.543,0 -4.108,-0.621 -4.695,-1.863 -0.587,-1.242 -0.313,-3.887 0.82,-7.936 l 2.428,-8.672 z"
|
||||||
|
id="path31"
|
||||||
|
style="fill:#97d700;fill-opacity:1" /><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill="#ffffff"
|
||||||
|
d="m 73.875,18.896 c -0.561,2.004 -0.616,3.537 -0.167,4.601 0.449,1.064 1.375,1.595 2.774,1.595 1.399,0 2.605,-0.524 3.62,-1.574 1.015,-1.05 1.806,-2.59 2.375,-4.622 0.526,-1.879 0.556,-3.334 0.09,-4.363 -0.466,-1.029 -1.393,-1.543 -2.778,-1.543 -1.304,0 -2.487,0.528 -3.551,1.585 -1.064,1.057 -1.852,2.496 -2.363,4.321 z M 96.513,0 88.024,30.321 h -7.337 l 0.824,-2.944 c -1.166,1.22 -2.369,2.121 -3.61,2.703 -1.241,0.582 -2.583,0.874 -4.025,0.874 -2.802,0 -4.772,-1.081 -5.912,-3.243 -1.139,-2.162 -1.218,-4.993 -0.238,-8.493 0.988,-3.528 2.668,-6.404 5.042,-8.627 2.374,-2.224 4.927,-3.336 7.661,-3.336 1.47,0 2.695,0.296 3.676,0.887 0.981,0.591 1.681,1.465 2.099,2.62 L 89.217,0 Z"
|
||||||
|
id="path35" /><g
|
||||||
|
id="g37">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="m 73.875,18.896 c -0.561,2.004 -0.616,3.537 -0.167,4.601 0.449,1.064 1.375,1.595 2.774,1.595 1.399,0 2.605,-0.524 3.62,-1.574 1.015,-1.05 1.806,-2.59 2.375,-4.622 0.526,-1.879 0.556,-3.334 0.09,-4.363 -0.466,-1.029 -1.393,-1.543 -2.778,-1.543 -1.304,0 -2.487,0.528 -3.551,1.585 -1.064,1.057 -1.852,2.496 -2.363,4.321 z M 96.513,0 88.024,30.321 h -7.337 l 0.824,-2.944 c -1.166,1.22 -2.369,2.121 -3.61,2.703 -1.241,0.582 -2.583,0.874 -4.025,0.874 -2.802,0 -4.772,-1.081 -5.912,-3.243 -1.139,-2.162 -1.218,-4.993 -0.238,-8.493 0.988,-3.528 2.668,-6.404 5.042,-8.627 2.374,-2.224 4.927,-3.336 7.661,-3.336 1.47,0 2.695,0.296 3.676,0.887 0.981,0.591 1.681,1.465 2.099,2.62 L 89.217,0 Z"
|
||||||
|
id="path39"
|
||||||
|
style="fill:#1a1a1a;fill-opacity:1" />
|
||||||
|
</g><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M 46.488,30.321 52.757,7.928 h 7.049 l -1.098,3.918 C 59.921,10.309 61.21,9.187 62.576,8.48 63.942,7.773 68.591,7.406 70.398,7.379 l -2.03,7.25 c -0.304,-0.042 -0.608,-0.072 -0.911,-0.093 -0.304,-0.02 -0.592,-0.03 -0.867,-0.03 -1.126,0 -5.167,0.168 -5.997,0.504 -0.829,0.336 -1.561,0.854 -2.196,1.555 -0.406,0.467 -0.789,1.136 -1.149,2.007 -0.361,0.872 -0.814,2.282 -1.36,4.232 l -2.104,7.516 h -7.296 z"
|
||||||
|
id="path43"
|
||||||
|
style="fill:#1a1a1a;fill-opacity:1" /><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill="#ffffff"
|
||||||
|
d="m 32.673,16.742 8.351,-0.021 c 0.375,-1.436 0.308,-2.558 -0.201,-3.365 -0.509,-0.807 -1.402,-1.211 -2.68,-1.211 -1.209,0 -2.285,0.397 -3.229,1.19 -0.944,0.793 -1.69,1.93 -2.241,3.407 z m 6.144,6.536 h 7.043 c -1.347,2.456 -3.172,4.356 -5.477,5.7 -2.305,1.345 -4.885,2.017 -7.74,2.017 -3.473,0 -5.923,-1.054 -7.351,-3.161 -1.427,-2.107 -1.632,-4.98 -0.613,-8.618 1.038,-3.707 2.875,-6.641 5.512,-8.803 2.637,-2.163 5.678,-3.244 9.123,-3.244 3.555,0 6.04,1.099 7.456,3.298 1.417,2.198 1.582,5.234 0.498,9.109 l -0.239,0.814 -0.167,0.484 H 31.721 c -0.441,1.575 -0.438,2.777 0.01,3.606 0.448,0.829 1.332,1.244 2.65,1.244 0.975,0 1.836,-0.206 2.583,-0.617 0.747,-0.411 1.366,-1.021 1.853,-1.829 z"
|
||||||
|
id="path47" /><g
|
||||||
|
id="g49"
|
||||||
|
style="fill:#1a1a1a;fill-opacity:1">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="m 32.673,16.742 8.351,-0.021 c 0.375,-1.436 0.308,-2.558 -0.201,-3.365 -0.509,-0.807 -1.402,-1.211 -2.68,-1.211 -1.209,0 -2.285,0.397 -3.229,1.19 -0.944,0.793 -1.69,1.93 -2.241,3.407 z m 6.144,6.536 h 7.043 c -1.347,2.456 -3.172,4.356 -5.477,5.7 -2.305,1.345 -4.885,2.017 -7.74,2.017 -3.473,0 -5.923,-1.054 -7.351,-3.161 -1.427,-2.107 -1.632,-4.98 -0.613,-8.618 1.038,-3.707 2.875,-6.641 5.512,-8.803 2.637,-2.163 5.678,-3.244 9.123,-3.244 3.555,0 6.04,1.099 7.456,3.298 1.417,2.198 1.582,5.234 0.498,9.109 l -0.239,0.814 -0.167,0.484 H 31.721 c -0.441,1.575 -0.438,2.777 0.01,3.606 0.448,0.829 1.332,1.244 2.65,1.244 0.975,0 1.836,-0.206 2.583,-0.617 0.747,-0.411 1.366,-1.021 1.853,-1.829 z"
|
||||||
|
id="path51"
|
||||||
|
style="fill:#1a1a1a;fill-opacity:1" />
|
||||||
|
</g><path
|
||||||
|
fill="#A0CE67"
|
||||||
|
d="m 112.881,30.643 -6.404,-18.639 -6.455,18.639 h -7.254 l 9.565,-30.321 h 8.19 l 4.434,15.582 0.35,1.276 c 0.521,1.866 0.917,3.431 1.191,4.693 l 0.555,-2.182 c 0.219,-0.837 0.528,-1.935 0.925,-3.293 l 4.468,-16.076 h 8.19 l -10.501,30.321 z"
|
||||||
|
id="path55"
|
||||||
|
style="fill:#97d700;fill-opacity:1" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -0,0 +1,161 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
version="1.1"
|
||||||
|
x="0px"
|
||||||
|
y="0px"
|
||||||
|
width="226.229px"
|
||||||
|
height="31.038px"
|
||||||
|
viewBox="0 0 226.229 31.038"
|
||||||
|
enable-background="new 0 0 226.229 31.038"
|
||||||
|
xml:space="preserve"
|
||||||
|
id="svg2"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||||
|
sodipodi:docname="logo-dark.svg"><metadata
|
||||||
|
id="metadata61"><rdf:RDF><cc:Work
|
||||||
|
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
|
||||||
|
id="defs59">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</defs><sodipodi:namedview
|
||||||
|
pagecolor="#1a1a1a"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1016"
|
||||||
|
id="namedview57"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="3.4054244"
|
||||||
|
inkscape:cx="112.21891"
|
||||||
|
inkscape:cy="27.15689"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg2"
|
||||||
|
inkscape:document-rotation="0" />
|
||||||
|
<g
|
||||||
|
id="Background">
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="Guides">
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M 10.417,30.321 0,0 h 8.233 l 4.26,15.582 0.349,1.276 c 0.521,1.866 0.918,3.431 1.191,4.693 0.15,-0.618 0.335,-1.345 0.555,-2.182 0.219,-0.837 0.528,-1.935 0.925,-3.293 L 19.981,0 h 8.19 l -10.5,30.321 z"
|
||||||
|
id="path11"
|
||||||
|
style="fill:#ffffff;fill-opacity:1" /><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill="#A0CE67"
|
||||||
|
d="m 139.809,19.787 c -0.665,0.357 -1.748,0.686 -3.25,0.988 -0.727,0.137 -1.283,0.254 -1.667,0.35 -0.95,0.247 -1.661,0.563 -2.134,0.947 -0.472,0.384 -0.799,0.899 -0.979,1.544 -0.223,0.796 -0.155,1.438 0.204,1.925 0.359,0.488 0.945,0.731 1.757,0.731 1.252,0 2.375,-0.36 3.369,-1.081 0.994,-0.721 1.653,-1.665 1.98,-2.831 z m 5.106,10.534 h -7.458 c 0.017,-0.356 0.048,-0.726 0.094,-1.11 l 0.159,-1.192 c -1.318,1.026 -2.627,1.786 -3.927,2.279 -1.299,0.493 -2.643,0.739 -4.031,0.739 -2.158,0 -3.7,-0.593 -4.625,-1.779 -0.925,-1.187 -1.106,-2.788 -0.542,-4.804 0.519,-1.851 1.431,-3.356 2.737,-4.515 1.307,-1.159 3.021,-1.972 5.142,-2.438 1.169,-0.247 2.641,-0.515 4.413,-0.803 2.646,-0.412 4.082,-1.016 4.304,-1.812 l 0.151,-0.539 c 0.182,-0.65 0.076,-1.145 -0.317,-1.483 -0.393,-0.339 -1.071,-0.508 -2.033,-0.508 -1.045,0 -1.934,0.214 -2.666,0.643 -0.731,0.428 -1.289,1.058 -1.673,1.887 h -6.748 c 1.065,-2.53 2.64,-4.413 4.723,-5.65 2.083,-1.237 4.724,-1.856 7.923,-1.856 1.991,0 3.602,0.241 4.833,0.722 1.231,0.481 2.095,1.209 2.59,2.185 0.339,0.701 0.483,1.536 0.432,2.504 -0.052,0.969 -0.377,2.525 -0.978,4.669 l -2.375,8.483 c -0.284,1.014 -0.416,1.812 -0.396,2.395 0.02,0.583 0.188,0.962 0.503,1.141 z"
|
||||||
|
id="path15"
|
||||||
|
style="fill:#97d700;fill-opacity:1" /><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill="#A0CE67"
|
||||||
|
d="m 185.7,30.321 6.27,-22.393 h 7.049 l -1.097,3.918 c 1.213,-1.537 2.502,-2.659 3.867,-3.366 1.365,-0.707 2.951,-1.074 4.758,-1.101 l -2.03,7.25 c -0.304,-0.042 -0.608,-0.072 -0.912,-0.093 -0.303,-0.02 -0.592,-0.03 -0.867,-0.03 -1.126,0 -2.104,0.168 -2.932,0.504 -0.829,0.336 -1.561,0.854 -2.197,1.555 -0.406,0.467 -0.789,1.136 -1.149,2.007 -0.361,0.872 -0.814,2.282 -1.359,4.232 l -2.104,7.516 H 185.7 Z"
|
||||||
|
id="path19"
|
||||||
|
style="fill:#97d700;fill-opacity:1" /><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill="#A0CE67"
|
||||||
|
d="m 217.631,19.787 c -0.664,0.357 -1.748,0.686 -3.25,0.988 -0.727,0.137 -1.282,0.254 -1.667,0.35 -0.95,0.247 -1.661,0.563 -2.134,0.947 -0.472,0.384 -0.799,0.899 -0.979,1.544 -0.223,0.796 -0.155,1.438 0.205,1.925 0.359,0.488 0.945,0.731 1.757,0.731 1.252,0 2.375,-0.36 3.369,-1.081 0.994,-0.721 1.654,-1.665 1.98,-2.831 z m 5.106,10.534 h -7.458 c 0.017,-0.356 0.048,-0.726 0.094,-1.11 l 0.159,-1.192 c -1.318,1.026 -2.627,1.786 -3.927,2.279 -1.299,0.493 -2.643,0.739 -4.031,0.739 -2.158,0 -3.7,-0.593 -4.625,-1.779 -0.926,-1.187 -1.106,-2.788 -0.542,-4.804 0.519,-1.851 1.431,-3.356 2.737,-4.515 1.306,-1.159 3.02,-1.972 5.142,-2.438 1.169,-0.247 2.641,-0.515 4.413,-0.803 2.647,-0.412 4.082,-1.016 4.304,-1.812 l 0.151,-0.539 c 0.182,-0.65 0.077,-1.145 -0.317,-1.483 -0.393,-0.339 -1.071,-0.508 -2.033,-0.508 -1.045,0 -1.934,0.214 -2.666,0.643 -0.731,0.428 -1.289,1.058 -1.672,1.887 h -6.748 c 1.065,-2.53 2.64,-4.413 4.723,-5.65 2.083,-1.237 4.724,-1.856 7.923,-1.856 1.99,0 3.601,0.241 4.833,0.722 1.232,0.481 2.095,1.209 2.591,2.185 0.339,0.701 0.483,1.536 0.431,2.504 -0.051,0.969 -0.377,2.525 -0.978,4.669 l -2.375,8.483 c -0.284,1.014 -0.416,1.812 -0.396,2.395 0.02,0.583 0.188,0.962 0.503,1.141 z"
|
||||||
|
id="path23"
|
||||||
|
style="fill:#97d700;fill-opacity:1" /><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill="#A0CE67"
|
||||||
|
d="m 188.386,7.928 -6.269,22.393 h -7.174 l 0.864,-3.085 c -1.227,1.246 -2.476,2.163 -3.746,2.751 -1.27,0.588 -2.625,0.882 -4.067,0.882 -2.471,0 -4.154,-0.634 -5.048,-1.901 -0.895,-1.268 -0.993,-3.149 -0.294,-5.644 l 4.31,-15.396 h 7.338 l -3.508,12.53 c -0.516,1.842 -0.641,3.109 -0.375,3.803 0.266,0.694 0.967,1.041 2.105,1.041 1.275,0 2.323,-0.422 3.142,-1.267 0.819,-0.845 1.497,-2.223 2.031,-4.133 l 3.353,-11.974 z"
|
||||||
|
id="path27"
|
||||||
|
style="fill:#97d700;fill-opacity:1" /><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill="#A0CE67"
|
||||||
|
d="m 149.937,12.356 1.239,-4.428 h 2.995 l 1.771,-6.326 h 7.338 l -1.771,6.326 h 3.753 l -1.24,4.428 h -3.753 l -2.716,9.702 c -0.416,1.483 -0.498,2.465 -0.247,2.946 0.25,0.48 0.905,0.721 1.964,0.721 l 0.549,-0.011 0.39,-0.031 -1.31,4.678 c -0.811,0.148 -1.596,0.263 -2.354,0.344 -0.758,0.081 -1.48,0.122 -2.167,0.122 -2.543,0 -4.108,-0.621 -4.695,-1.863 -0.587,-1.242 -0.313,-3.887 0.82,-7.936 l 2.428,-8.672 z"
|
||||||
|
id="path31"
|
||||||
|
style="fill:#97d700;fill-opacity:1" /><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill="#ffffff"
|
||||||
|
d="m 73.875,18.896 c -0.561,2.004 -0.616,3.537 -0.167,4.601 0.449,1.064 1.375,1.595 2.774,1.595 1.399,0 2.605,-0.524 3.62,-1.574 1.015,-1.05 1.806,-2.59 2.375,-4.622 0.526,-1.879 0.556,-3.334 0.09,-4.363 -0.466,-1.029 -1.393,-1.543 -2.778,-1.543 -1.304,0 -2.487,0.528 -3.551,1.585 -1.064,1.057 -1.852,2.496 -2.363,4.321 z M 96.513,0 88.024,30.321 h -7.337 l 0.824,-2.944 c -1.166,1.22 -2.369,2.121 -3.61,2.703 -1.241,0.582 -2.583,0.874 -4.025,0.874 -2.802,0 -4.772,-1.081 -5.912,-3.243 -1.139,-2.162 -1.218,-4.993 -0.238,-8.493 0.988,-3.528 2.668,-6.404 5.042,-8.627 2.374,-2.224 4.927,-3.336 7.661,-3.336 1.47,0 2.695,0.296 3.676,0.887 0.981,0.591 1.681,1.465 2.099,2.62 L 89.217,0 Z"
|
||||||
|
id="path35"
|
||||||
|
style="fill:#ffffff;fill-opacity:1" /><g
|
||||||
|
id="g37"
|
||||||
|
style="fill:#ffffff;fill-opacity:1">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="m 73.875,18.896 c -0.561,2.004 -0.616,3.537 -0.167,4.601 0.449,1.064 1.375,1.595 2.774,1.595 1.399,0 2.605,-0.524 3.62,-1.574 1.015,-1.05 1.806,-2.59 2.375,-4.622 0.526,-1.879 0.556,-3.334 0.09,-4.363 -0.466,-1.029 -1.393,-1.543 -2.778,-1.543 -1.304,0 -2.487,0.528 -3.551,1.585 -1.064,1.057 -1.852,2.496 -2.363,4.321 z M 96.513,0 88.024,30.321 h -7.337 l 0.824,-2.944 c -1.166,1.22 -2.369,2.121 -3.61,2.703 -1.241,0.582 -2.583,0.874 -4.025,0.874 -2.802,0 -4.772,-1.081 -5.912,-3.243 -1.139,-2.162 -1.218,-4.993 -0.238,-8.493 0.988,-3.528 2.668,-6.404 5.042,-8.627 2.374,-2.224 4.927,-3.336 7.661,-3.336 1.47,0 2.695,0.296 3.676,0.887 0.981,0.591 1.681,1.465 2.099,2.62 L 89.217,0 Z"
|
||||||
|
id="path39"
|
||||||
|
style="fill:#ffffff;fill-opacity:1" />
|
||||||
|
</g><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M 46.488,30.321 52.757,7.928 h 7.049 l -1.098,3.918 C 59.921,10.309 61.21,9.187 62.576,8.48 63.942,7.773 68.591,7.406 70.398,7.379 l -2.03,7.25 c -0.304,-0.042 -0.608,-0.072 -0.911,-0.093 -0.304,-0.02 -0.592,-0.03 -0.867,-0.03 -1.126,0 -5.167,0.168 -5.997,0.504 -0.829,0.336 -1.561,0.854 -2.196,1.555 -0.406,0.467 -0.789,1.136 -1.149,2.007 -0.361,0.872 -0.814,2.282 -1.36,4.232 l -2.104,7.516 h -7.296 z"
|
||||||
|
id="path43"
|
||||||
|
style="fill:#ffffff;fill-opacity:1" /><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill="#ffffff"
|
||||||
|
d="m 32.673,16.742 8.351,-0.021 c 0.375,-1.436 0.308,-2.558 -0.201,-3.365 -0.509,-0.807 -1.402,-1.211 -2.68,-1.211 -1.209,0 -2.285,0.397 -3.229,1.19 -0.944,0.793 -1.69,1.93 -2.241,3.407 z m 6.144,6.536 h 7.043 c -1.347,2.456 -3.172,4.356 -5.477,5.7 -2.305,1.345 -4.885,2.017 -7.74,2.017 -3.473,0 -5.923,-1.054 -7.351,-3.161 -1.427,-2.107 -1.632,-4.98 -0.613,-8.618 1.038,-3.707 2.875,-6.641 5.512,-8.803 2.637,-2.163 5.678,-3.244 9.123,-3.244 3.555,0 6.04,1.099 7.456,3.298 1.417,2.198 1.582,5.234 0.498,9.109 l -0.239,0.814 -0.167,0.484 H 31.721 c -0.441,1.575 -0.438,2.777 0.01,3.606 0.448,0.829 1.332,1.244 2.65,1.244 0.975,0 1.836,-0.206 2.583,-0.617 0.747,-0.411 1.366,-1.021 1.853,-1.829 z"
|
||||||
|
id="path47"
|
||||||
|
style="fill:#ffffff;fill-opacity:1" /><g
|
||||||
|
id="g49"
|
||||||
|
style="fill:#ffffff;fill-opacity:1">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="m 32.673,16.742 8.351,-0.021 c 0.375,-1.436 0.308,-2.558 -0.201,-3.365 -0.509,-0.807 -1.402,-1.211 -2.68,-1.211 -1.209,0 -2.285,0.397 -3.229,1.19 -0.944,0.793 -1.69,1.93 -2.241,3.407 z m 6.144,6.536 h 7.043 c -1.347,2.456 -3.172,4.356 -5.477,5.7 -2.305,1.345 -4.885,2.017 -7.74,2.017 -3.473,0 -5.923,-1.054 -7.351,-3.161 -1.427,-2.107 -1.632,-4.98 -0.613,-8.618 1.038,-3.707 2.875,-6.641 5.512,-8.803 2.637,-2.163 5.678,-3.244 9.123,-3.244 3.555,0 6.04,1.099 7.456,3.298 1.417,2.198 1.582,5.234 0.498,9.109 l -0.239,0.814 -0.167,0.484 H 31.721 c -0.441,1.575 -0.438,2.777 0.01,3.606 0.448,0.829 1.332,1.244 2.65,1.244 0.975,0 1.836,-0.206 2.583,-0.617 0.747,-0.411 1.366,-1.021 1.853,-1.829 z"
|
||||||
|
id="path51"
|
||||||
|
style="fill:#ffffff;fill-opacity:1" />
|
||||||
|
</g><path
|
||||||
|
fill="#A0CE67"
|
||||||
|
d="m 112.881,30.643 -6.404,-18.639 -6.455,18.639 h -7.254 l 9.565,-30.321 h 8.19 l 4.434,15.582 0.35,1.276 c 0.521,1.866 0.917,3.431 1.191,4.693 l 0.555,-2.182 c 0.219,-0.837 0.528,-1.935 0.925,-3.293 l 4.468,-16.076 h 8.19 l -10.501,30.321 z"
|
||||||
|
id="path55"
|
||||||
|
style="fill:#97d700;fill-opacity:1" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -0,0 +1,72 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
version="1.1"
|
||||||
|
x="0px"
|
||||||
|
y="0px"
|
||||||
|
width="187"
|
||||||
|
height="187"
|
||||||
|
viewBox="0 0 187 187"
|
||||||
|
enable-background="new 0 0 595 842"
|
||||||
|
xml:space="preserve"
|
||||||
|
id="svg2"
|
||||||
|
inkscape:version="0.91 r13725"
|
||||||
|
sodipodi:docname="logo.svg"><metadata
|
||||||
|
id="metadata21"><rdf:RDF><cc:Work
|
||||||
|
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
|
||||||
|
id="defs19" /><sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1016"
|
||||||
|
id="namedview17"
|
||||||
|
showgrid="false"
|
||||||
|
fit-margin-top="0"
|
||||||
|
fit-margin-left="0"
|
||||||
|
fit-margin-right="0"
|
||||||
|
fit-margin-bottom="0"
|
||||||
|
inkscape:zoom="4.6900433"
|
||||||
|
inkscape:cx="83.335292"
|
||||||
|
inkscape:cy="99.203526"
|
||||||
|
inkscape:window-x="1920"
|
||||||
|
inkscape:window-y="27"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg2" /><g
|
||||||
|
id="Background"
|
||||||
|
transform="translate(-211.7456,-282.24899)" /><g
|
||||||
|
id="Guides"
|
||||||
|
transform="translate(-211.7456,-282.24899)" /><g
|
||||||
|
id="g7"
|
||||||
|
transform="matrix(1.0030446,0,0,1.0030446,-212.39029,-288.74375)"
|
||||||
|
style="fill:#8ed300;fill-opacity:1"><path
|
||||||
|
style="fill:#8ed300;fill-opacity:1"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
id="path9"
|
||||||
|
d="m 339.611,301.147 c 1.324,-0.375 2.663,-0.656 4.017,-0.838 l 54.55,-7.391 -1.039,30.924 c -0.862,25.488 -15.732,48.394 -34.025,53.571 -1.319,0.374 -2.654,0.654 -4.003,0.837 l -54.551,7.379 1.038,-30.923 c 0.864,-25.481 15.725,-48.38 34.013,-53.559 z" /><path
|
||||||
|
style="fill:#8ed300;fill-opacity:1"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
id="path11"
|
||||||
|
d="m 304.353,399.358 27.265,-3.692 c 10.052,-1.368 17.809,8.612 17.351,22.267 l -0.523,15.469 -27.265,3.692 c -10.041,1.366 -17.811,-8.612 -17.354,-22.279 l 0.526,-15.457 z" /><path
|
||||||
|
style="fill:#8ed300;fill-opacity:1"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
id="path13"
|
||||||
|
d="m 212.72,326.05 49.089,-6.647 c 18.083,-2.444 32.068,15.502 31.238,40.103 l -0.941,27.826 -49.09,6.647 c -18.081,2.456 -32.057,-15.506 -31.236,-40.09 l 0.94,-27.839 z" /><path
|
||||||
|
style="fill:#8ed300;fill-opacity:1"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
id="path15"
|
||||||
|
d="m 248.296,407.657 c 0.966,-0.272 1.943,-0.478 2.93,-0.611 l 39.76,-5.383 -0.75,22.539 c -0.624,18.584 -11.458,35.275 -24.792,39.049 -0.966,0.272 -1.943,0.48 -2.931,0.613 l -39.772,5.385 0.761,-22.542 c 0.625,-18.573 11.461,-35.274 24.794,-39.05 z" /></g></svg>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -11,7 +11,7 @@ axios.defaults.baseURL = '/api/';
|
||||||
|
|
||||||
const onRequest = (config) => {
|
const onRequest = (config) => {
|
||||||
const token = session.getToken();
|
const token = session.getToken();
|
||||||
if (token.length && config.headers) {
|
if (token.length && !config.headers.Authorization) {
|
||||||
config.headers.Authorization = token;
|
config.headers.Authorization = token;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -46,7 +46,7 @@ const onResponseError = (error) => {
|
||||||
message = responseError.message;
|
message = responseError.message;
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (response.status) {
|
switch (response?.status) {
|
||||||
case 500:
|
case 500:
|
||||||
message = 'errors.statusInternalServerError';
|
message = 'errors.statusInternalServerError';
|
||||||
break;
|
break;
|
||||||
|
|
@ -58,12 +58,13 @@ const onResponseError = (error) => {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (session.isLoggedIn() && response.status === 401) {
|
if (session.isLoggedIn() && response?.status === 401) {
|
||||||
session.destroy();
|
session.destroy();
|
||||||
Router.push({ path: '/login' });
|
const hash = window.location.hash;
|
||||||
} else if(!session.isLoggedIn())
|
const url = hash.slice(1);
|
||||||
{
|
Router.push({ path: url });
|
||||||
message = 'login.loginError';
|
} else if (!session.isLoggedIn()) {
|
||||||
|
return Promise.reject(error);
|
||||||
}
|
}
|
||||||
|
|
||||||
Notify.create({
|
Notify.create({
|
||||||
|
|
@ -77,7 +78,4 @@ const onResponseError = (error) => {
|
||||||
axios.interceptors.request.use(onRequest, onRequestError);
|
axios.interceptors.request.use(onRequest, onRequestError);
|
||||||
axios.interceptors.response.use(onResponse, onResponseError);
|
axios.interceptors.response.use(onResponse, onResponseError);
|
||||||
|
|
||||||
export {
|
export { onRequest, onResponseError };
|
||||||
onRequest,
|
|
||||||
onResponseError
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import { QTable } from 'quasar';
|
||||||
|
import setDefault from './setDefault';
|
||||||
|
|
||||||
|
setDefault(QTable, 'pagination', { rowsPerPage: 0 });
|
||||||
|
setDefault(QTable, 'hidePagination', true);
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
export default function (component, key, value) {
|
||||||
|
const prop = component.props[key];
|
||||||
|
switch (typeof prop) {
|
||||||
|
case 'object':
|
||||||
|
prop.default = value;
|
||||||
|
break;
|
||||||
|
case 'function':
|
||||||
|
component.props[key] = {
|
||||||
|
type: prop,
|
||||||
|
default: value,
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
case 'undefined':
|
||||||
|
throw new Error('unknown prop: ' + key);
|
||||||
|
default:
|
||||||
|
throw new Error('unhandled type: ' + typeof prop);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { getCurrentInstance } from 'vue';
|
||||||
|
|
||||||
|
const filterAvailableInput = element => element.classList.contains('q-field__native') && !element.disabled
|
||||||
|
const filterAvailableText = element => element.__vueParentComponent.type.name === 'QInput' && element.__vueParentComponent?.attrs?.class !== 'vn-input-date';
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mounted: function () {
|
||||||
|
const vm = getCurrentInstance();
|
||||||
|
if (vm.type.name === 'QForm')
|
||||||
|
if (!['searchbarForm','filterPanelForm'].includes(this.$el?.id)) {
|
||||||
|
// AUTOFOCUS
|
||||||
|
const elementsArray = Array.from(this.$el.elements);
|
||||||
|
const firstInputElement = elementsArray.filter(filterAvailableInput).find(filterAvailableText);
|
||||||
|
|
||||||
|
if (firstInputElement) {
|
||||||
|
firstInputElement.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './defaults/qTable';
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { boot } from 'quasar/wrappers';
|
||||||
|
import qFormMixin from './qformMixin';
|
||||||
|
|
||||||
|
export default boot(({ app }) => {
|
||||||
|
app.mixin(qFormMixin);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { boot } from 'quasar/wrappers';
|
||||||
|
import { useValidationsStore } from 'src/stores/useValidationsStore';
|
||||||
|
|
||||||
|
export default boot(async ({ store }) => {
|
||||||
|
await useValidationsStore(store).fetchModels();
|
||||||
|
});
|
||||||
|
|
@ -15,4 +15,14 @@ export default boot(() => {
|
||||||
Date.vnNow = () => {
|
Date.vnNow = () => {
|
||||||
return new Date(Date.vnUTC()).getTime();
|
return new Date(Date.vnUTC()).getTime();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Date.vnFirstDayOfMonth = () => {
|
||||||
|
const date = new Date(Date.vnUTC());
|
||||||
|
return new Date(date.getFullYear(), date.getMonth(), 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
Date.vnLastDayOfMonth = () => {
|
||||||
|
const date = new Date(Date.vnUTC());
|
||||||
|
return new Date(date.getFullYear(), date.getMonth() + 1, 0);
|
||||||
|
};
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref, onMounted, nextTick } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
|
||||||
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import FormModelPopup from './FormModelPopup.vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
showEntityField: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['onDataSaved']);
|
||||||
|
const { t } = useI18n();
|
||||||
|
const bicInputRef = ref(null);
|
||||||
|
const bankEntityFormData = reactive({
|
||||||
|
name: null,
|
||||||
|
bic: null,
|
||||||
|
countryFk: null,
|
||||||
|
id: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const countriesFilter = {
|
||||||
|
fields: ['id', 'country', 'code'],
|
||||||
|
};
|
||||||
|
|
||||||
|
const countriesOptions = ref([]);
|
||||||
|
|
||||||
|
const onDataSaved = (formData, requestResponse) => {
|
||||||
|
emit('onDataSaved', formData, requestResponse);
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await nextTick();
|
||||||
|
bicInputRef.value.focus();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
url="Countries"
|
||||||
|
:filter="countriesFilter"
|
||||||
|
auto-load
|
||||||
|
@on-fetch="(data) => (countriesOptions = data)"
|
||||||
|
/>
|
||||||
|
<FormModelPopup
|
||||||
|
url-create="bankEntities"
|
||||||
|
model="bankEntity"
|
||||||
|
:title="t('title')"
|
||||||
|
:subtitle="t('subtitle')"
|
||||||
|
:form-initial-data="bankEntityFormData"
|
||||||
|
@on-data-saved="onDataSaved"
|
||||||
|
>
|
||||||
|
<template #form-inputs="{ data, validate }">
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<VnInput
|
||||||
|
:label="t('name')"
|
||||||
|
v-model="data.name"
|
||||||
|
:required="true"
|
||||||
|
:rules="validate('bankEntity.name')"
|
||||||
|
/>
|
||||||
|
<VnInput
|
||||||
|
ref="bicInputRef"
|
||||||
|
:label="t('swift')"
|
||||||
|
v-model="data.bic"
|
||||||
|
:required="true"
|
||||||
|
:rules="validate('bankEntity.bic')"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<div class="col">
|
||||||
|
<VnSelect
|
||||||
|
:label="t('country')"
|
||||||
|
v-model="data.countryFk"
|
||||||
|
:options="countriesOptions"
|
||||||
|
option-value="id"
|
||||||
|
option-label="country"
|
||||||
|
hide-selected
|
||||||
|
:required="true"
|
||||||
|
:rules="validate('bankEntity.countryFk')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-if="showEntityField" class="col">
|
||||||
|
<VnInput
|
||||||
|
:label="t('id')"
|
||||||
|
v-model="data.id"
|
||||||
|
:required="true"
|
||||||
|
:rules="validate('city.name')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</VnRow>
|
||||||
|
</template>
|
||||||
|
</FormModelPopup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
en:
|
||||||
|
title: New bank entity
|
||||||
|
subtitle: Please, ensure you put the correct data!
|
||||||
|
name: Name
|
||||||
|
swift: Swift
|
||||||
|
country: Country
|
||||||
|
id: Entity code
|
||||||
|
es:
|
||||||
|
title: Nueva entidad bancaria
|
||||||
|
subtitle: ¡Por favor, asegúrate de poner los datos correctos!
|
||||||
|
name: Nombre
|
||||||
|
swift: Swift
|
||||||
|
country: País
|
||||||
|
id: Código de la entidad
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
import FormModel from 'components/FormModel.vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['onDataSaved']);
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
parentId: {
|
||||||
|
type: Number,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const departmentChildData = reactive({
|
||||||
|
name: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const closeButton = ref(null);
|
||||||
|
const isLoading = ref(false);
|
||||||
|
|
||||||
|
const onDataSaved = () => {
|
||||||
|
emit('onDataSaved');
|
||||||
|
closeForm();
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeForm = () => {
|
||||||
|
if (closeButton.value) closeButton.value.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if ($props.parentId) departmentChildData.parentId = $props.parentId;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FormModel
|
||||||
|
:form-initial-data="departmentChildData"
|
||||||
|
:observe-form-changes="false"
|
||||||
|
:default-actions="false"
|
||||||
|
url-create="departments/createChild"
|
||||||
|
@on-data-saved="onDataSaved()"
|
||||||
|
>
|
||||||
|
<template #form="{ data }">
|
||||||
|
<span ref="closeButton" class="close-icon" v-close-popup>
|
||||||
|
<QIcon name="close" size="sm" />
|
||||||
|
</span>
|
||||||
|
<h1 class="title">{{ t('New department') }}</h1>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md" style="min-width: 250px">
|
||||||
|
<VnInput :label="t('Name')" v-model="data.name" />
|
||||||
|
</VnRow>
|
||||||
|
<div class="q-mt-lg row justify-end">
|
||||||
|
<QBtn
|
||||||
|
:label="t('globals.cancel')"
|
||||||
|
type="reset"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
class="q-ml-sm"
|
||||||
|
:disabled="isLoading"
|
||||||
|
:loading="isLoading"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
<QBtn
|
||||||
|
:label="t('globals.save')"
|
||||||
|
type="submit"
|
||||||
|
color="primary"
|
||||||
|
:disabled="isLoading"
|
||||||
|
:loading="isLoading"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</FormModel>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.close-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Name: Nombre
|
||||||
|
New department: Nuevo departamento
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,162 @@
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref, computed } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
import FormModelPopup from './FormModelPopup.vue';
|
||||||
|
import VnInputDate from './common/VnInputDate.vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['onDataSaved']);
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const manualInvoiceFormData = reactive({
|
||||||
|
maxShipped: Date.vnNew(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const formModelPopupRef = ref();
|
||||||
|
const invoiceOutSerialsOptions = ref([]);
|
||||||
|
const taxAreasOptions = ref([]);
|
||||||
|
const ticketsOptions = ref([]);
|
||||||
|
const clientsOptions = ref([]);
|
||||||
|
const isLoading = computed(() => formModelPopupRef.value?.isLoading);
|
||||||
|
|
||||||
|
const onDataSaved = async (formData, requestResponse) => {
|
||||||
|
emit('onDataSaved', formData, requestResponse);
|
||||||
|
if (requestResponse && requestResponse.id)
|
||||||
|
router.push({ name: 'InvoiceOutSummary', params: { id: requestResponse.id } });
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
url="InvoiceOutSerials"
|
||||||
|
:filter="{ where: { code: { neq: 'R' } }, order: ['code'] }"
|
||||||
|
@on-fetch="(data) => (invoiceOutSerialsOptions = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="TaxAreas"
|
||||||
|
:filter="{ order: ['code'] }"
|
||||||
|
@on-fetch="(data) => (taxAreasOptions = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="Tickets"
|
||||||
|
:filter="{ fields: ['id', 'nickname'], order: 'shipped DESC', limit: 30 }"
|
||||||
|
@on-fetch="(data) => (ticketsOptions = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="Clients"
|
||||||
|
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||||
|
@on-fetch="(data) => (clientsOptions = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FormModelPopup
|
||||||
|
ref="formModelPopupRef"
|
||||||
|
:title="t('Create manual invoice')"
|
||||||
|
url-create="InvoiceOuts/createManualInvoice"
|
||||||
|
model="invoiceOut"
|
||||||
|
:form-initial-data="manualInvoiceFormData"
|
||||||
|
@on-data-saved="onDataSaved"
|
||||||
|
>
|
||||||
|
<template #form-inputs="{ data }">
|
||||||
|
<span v-if="isLoading" class="text-primary invoicing-text">
|
||||||
|
<QIcon name="warning" class="fill-icon q-mr-sm" size="md" />
|
||||||
|
{{ t('Invoicing in progress...') }}
|
||||||
|
</span>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Ticket')"
|
||||||
|
:options="ticketsOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="id"
|
||||||
|
option-value="id"
|
||||||
|
v-model="data.ticketFk"
|
||||||
|
@update:model-value="data.clientFk = null"
|
||||||
|
>
|
||||||
|
<template #option="scope">
|
||||||
|
<QItem v-bind="scope.itemProps">
|
||||||
|
<QItemSection>
|
||||||
|
<QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
|
||||||
|
<QItemLabel caption>{{ scope.opt?.nickname }}</QItemLabel>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</template>
|
||||||
|
</VnSelect>
|
||||||
|
<span class="row items-center" style="max-width: max-content">{{
|
||||||
|
t('Or')
|
||||||
|
}}</span>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Client')"
|
||||||
|
:options="clientsOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
v-model="data.clientFk"
|
||||||
|
@update:model-value="data.ticketFk = null"
|
||||||
|
/>
|
||||||
|
<VnInputDate :label="t('Max date')" v-model="data.maxShipped" />
|
||||||
|
</VnRow>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Serial')"
|
||||||
|
:options="invoiceOutSerialsOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="description"
|
||||||
|
option-value="code"
|
||||||
|
v-model="data.serial"
|
||||||
|
:required="true"
|
||||||
|
/>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Area')"
|
||||||
|
:options="taxAreasOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="code"
|
||||||
|
option-value="code"
|
||||||
|
v-model="data.taxArea"
|
||||||
|
:required="true"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<VnInput
|
||||||
|
:label="t('Reference')"
|
||||||
|
type="textarea"
|
||||||
|
v-model="data.reference"
|
||||||
|
fill-input
|
||||||
|
autogrow
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
</template>
|
||||||
|
</FormModelPopup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.invoicing-text {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: $primary;
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Create manual invoice: Crear factura manual
|
||||||
|
Ticket: Ticket
|
||||||
|
Client: Cliente
|
||||||
|
Max date: Fecha límite
|
||||||
|
Serial: Serie
|
||||||
|
Area: Area
|
||||||
|
Reference: Referencia
|
||||||
|
Or: O
|
||||||
|
Invoicing in progress...: Facturación en progreso...
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
import FormModelPopup from './FormModelPopup.vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['onDataSaved']);
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const cityFormData = reactive({
|
||||||
|
name: null,
|
||||||
|
provinceFk: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const provincesOptions = ref([]);
|
||||||
|
|
||||||
|
const onDataSaved = (dataSaved) => {
|
||||||
|
emit('onDataSaved', dataSaved);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
@on-fetch="(data) => (provincesOptions = data)"
|
||||||
|
auto-load
|
||||||
|
url="Provinces"
|
||||||
|
/>
|
||||||
|
<FormModelPopup
|
||||||
|
:title="t('New city')"
|
||||||
|
:subtitle="t('Please, ensure you put the correct data!')"
|
||||||
|
:form-initial-data="cityFormData"
|
||||||
|
url-create="towns"
|
||||||
|
model="city"
|
||||||
|
@on-data-saved="onDataSaved($event)"
|
||||||
|
>
|
||||||
|
<template #form-inputs="{ data, validate }">
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<VnInput
|
||||||
|
:label="t('Name')"
|
||||||
|
v-model="data.name"
|
||||||
|
:rules="validate('city.name')"
|
||||||
|
/>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Province')"
|
||||||
|
:options="provincesOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
v-model="data.provinceFk"
|
||||||
|
:rules="validate('city.provinceFk')"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
</template>
|
||||||
|
</FormModelPopup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
New city: Nueva ciudad
|
||||||
|
Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
|
||||||
|
Name: Nombre
|
||||||
|
Province: Provincia
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,154 @@
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
import CreateNewCityForm from './CreateNewCityForm.vue';
|
||||||
|
import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
|
||||||
|
import VnSelectDialog from 'components/common/VnSelectDialog.vue';
|
||||||
|
import FormModelPopup from './FormModelPopup.vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['onDataSaved']);
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const postcodeFormData = reactive({
|
||||||
|
code: null,
|
||||||
|
countryFk: null,
|
||||||
|
provinceFk: null,
|
||||||
|
townFk: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const townsFetchDataRef = ref(null);
|
||||||
|
const provincesFetchDataRef = ref(null);
|
||||||
|
const countriesOptions = ref([]);
|
||||||
|
const provincesOptions = ref([]);
|
||||||
|
const townsLocationOptions = ref([]);
|
||||||
|
|
||||||
|
const onDataSaved = (formData) => {
|
||||||
|
const newPostcode = {
|
||||||
|
...formData,
|
||||||
|
};
|
||||||
|
const townObject = townsLocationOptions.value.find(
|
||||||
|
({ id }) => id === formData.townFk
|
||||||
|
);
|
||||||
|
newPostcode.town = townObject?.name;
|
||||||
|
const provinceObject = provincesOptions.value.find(
|
||||||
|
({ id }) => id === formData.provinceFk
|
||||||
|
);
|
||||||
|
newPostcode.province = provinceObject?.name;
|
||||||
|
const countryObject = countriesOptions.value.find(
|
||||||
|
({ id }) => id === formData.countryFk
|
||||||
|
);
|
||||||
|
newPostcode.country = countryObject?.country;
|
||||||
|
emit('onDataSaved', newPostcode);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onCityCreated = async ({ name, provinceFk }, formData) => {
|
||||||
|
await townsFetchDataRef.value.fetch();
|
||||||
|
formData.townFk = townsLocationOptions.value.find((town) => town.name === name).id;
|
||||||
|
formData.provinceFk = provinceFk;
|
||||||
|
formData.countryFk = provincesOptions.value.find(
|
||||||
|
(province) => province.id === provinceFk
|
||||||
|
).countryFk;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onProvinceCreated = async ({ name }, formData) => {
|
||||||
|
await provincesFetchDataRef.value.fetch();
|
||||||
|
formData.provinceFk = provincesOptions.value.find(
|
||||||
|
(province) => province.name === name
|
||||||
|
).id;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
ref="townsFetchDataRef"
|
||||||
|
@on-fetch="(data) => (townsLocationOptions = data)"
|
||||||
|
auto-load
|
||||||
|
url="Towns/location"
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
ref="provincesFetchDataRef"
|
||||||
|
@on-fetch="(data) => (provincesOptions = data)"
|
||||||
|
auto-load
|
||||||
|
url="Provinces"
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
@on-fetch="(data) => (countriesOptions = data)"
|
||||||
|
auto-load
|
||||||
|
url="Countries"
|
||||||
|
/>
|
||||||
|
<FormModelPopup
|
||||||
|
url-create="postcodes"
|
||||||
|
model="postcode"
|
||||||
|
:title="t('New postcode')"
|
||||||
|
:subtitle="t('Please, ensure you put the correct data!')"
|
||||||
|
:form-initial-data="postcodeFormData"
|
||||||
|
@on-data-saved="onDataSaved"
|
||||||
|
>
|
||||||
|
<template #form-inputs="{ data, validate }">
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<VnInput
|
||||||
|
:label="t('Postcode')"
|
||||||
|
v-model="data.code"
|
||||||
|
:rules="validate('postcode.code')"
|
||||||
|
/>
|
||||||
|
<VnSelectDialog
|
||||||
|
:label="t('City')"
|
||||||
|
:options="townsLocationOptions"
|
||||||
|
v-model="data.townFk"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
:rules="validate('postcode.city')"
|
||||||
|
:roles-allowed-to-create="['deliveryAssistant']"
|
||||||
|
>
|
||||||
|
<template #form>
|
||||||
|
<CreateNewCityForm @on-data-saved="onCityCreated($event, data)" />
|
||||||
|
</template>
|
||||||
|
</VnSelectDialog>
|
||||||
|
</VnRow>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-xl">
|
||||||
|
<VnSelectDialog
|
||||||
|
:label="t('Province')"
|
||||||
|
:options="provincesOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
v-model="data.provinceFk"
|
||||||
|
:rules="validate('postcode.provinceFk')"
|
||||||
|
:roles-allowed-to-create="['deliveryAssistant']"
|
||||||
|
>
|
||||||
|
<template #form>
|
||||||
|
<CreateNewProvinceForm
|
||||||
|
@on-data-saved="onProvinceCreated($event, data)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</VnSelectDialog>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Country')"
|
||||||
|
:options="countriesOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="country"
|
||||||
|
option-value="id"
|
||||||
|
v-model="data.countryFk"
|
||||||
|
:rules="validate('postcode.countryFk')"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
</template>
|
||||||
|
</FormModelPopup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
New postcode: Nuevo código postal
|
||||||
|
Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
|
||||||
|
City: Población
|
||||||
|
Province: Provincia
|
||||||
|
Country: País
|
||||||
|
Postcode: Código postal
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
import FormModelPopup from './FormModelPopup.vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['onDataSaved']);
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const provinceFormData = reactive({
|
||||||
|
name: null,
|
||||||
|
autonomyFk: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const autonomiesOptions = ref([]);
|
||||||
|
|
||||||
|
const onDataSaved = (dataSaved) => {
|
||||||
|
emit('onDataSaved', dataSaved);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
@on-fetch="(data) => (autonomiesOptions = data)"
|
||||||
|
auto-load
|
||||||
|
url="Autonomies"
|
||||||
|
/>
|
||||||
|
<FormModelPopup
|
||||||
|
:title="t('New province')"
|
||||||
|
:subtitle="t('Please, ensure you put the correct data!')"
|
||||||
|
url-create="provinces"
|
||||||
|
model="province"
|
||||||
|
:form-initial-data="provinceFormData"
|
||||||
|
@on-data-saved="onDataSaved($event)"
|
||||||
|
>
|
||||||
|
<template #form-inputs="{ data, validate }">
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<VnInput
|
||||||
|
:label="t('Name')"
|
||||||
|
v-model="data.name"
|
||||||
|
:rules="validate('province.name')"
|
||||||
|
/>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Autonomy')"
|
||||||
|
:options="autonomiesOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
v-model="data.autonomyFk"
|
||||||
|
:rules="validate('province.autonomyFk')"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
</template>
|
||||||
|
</FormModelPopup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
New province: Nueva provincia
|
||||||
|
Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
|
||||||
|
Name: Nombre
|
||||||
|
Autonomy: Autonomía
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
import FormModelPopup from './FormModelPopup.vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['onDataSaved']);
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const thermographFormData = reactive({
|
||||||
|
thermographId: null,
|
||||||
|
model: 'DISPOSABLE',
|
||||||
|
warehouseId: null,
|
||||||
|
temperatureFk: 'cool',
|
||||||
|
});
|
||||||
|
|
||||||
|
const thermographsModels = ref(null);
|
||||||
|
const warehousesOptions = ref([]);
|
||||||
|
const temperaturesOptions = ref([]);
|
||||||
|
|
||||||
|
const onDataSaved = (dataSaved) => {
|
||||||
|
emit('onDataSaved', dataSaved);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
@on-fetch="(data) => (thermographsModels = data)"
|
||||||
|
auto-load
|
||||||
|
url="Thermographs/getThermographModels"
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
@on-fetch="(data) => (warehousesOptions = data)"
|
||||||
|
auto-load
|
||||||
|
url="Warehouses"
|
||||||
|
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
@on-fetch="(data) => (temperaturesOptions = data)"
|
||||||
|
auto-load
|
||||||
|
url="Temperatures"
|
||||||
|
/>
|
||||||
|
<FormModelPopup
|
||||||
|
url-create="Thermographs/createThermograph"
|
||||||
|
model="thermograph"
|
||||||
|
:title="t('New thermograph')"
|
||||||
|
:form-initial-data="thermographFormData"
|
||||||
|
@on-data-saved="onDataSaved($event)"
|
||||||
|
>
|
||||||
|
<template #form-inputs="{ data, validate }">
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<VnInput
|
||||||
|
:label="t('Identifier')"
|
||||||
|
v-model="data.thermographId"
|
||||||
|
:required="true"
|
||||||
|
:rules="validate('thermograph.id')"
|
||||||
|
/>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Model')"
|
||||||
|
:options="thermographsModels"
|
||||||
|
hide-selected
|
||||||
|
option-label="value"
|
||||||
|
option-value="value"
|
||||||
|
v-model="data.model"
|
||||||
|
:required="true"
|
||||||
|
:rules="validate('thermograph.model')"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-xl">
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Warehouse')"
|
||||||
|
:options="warehousesOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
v-model="data.warehouseId"
|
||||||
|
:required="true"
|
||||||
|
/>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Temperature')"
|
||||||
|
:options="temperaturesOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="code"
|
||||||
|
v-model="data.temperatureFk"
|
||||||
|
:required="true"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
</template>
|
||||||
|
</FormModelPopup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Identifier: Identificador
|
||||||
|
Model: Modelo
|
||||||
|
Warehouse: Almacén
|
||||||
|
Temperature: Temperatura
|
||||||
|
New thermograph: Nuevo termógrafo
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,331 @@
|
||||||
|
<script setup>
|
||||||
|
import axios from 'axios';
|
||||||
|
import { computed, ref, watch } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useQuasar } from 'quasar';
|
||||||
|
import { useValidator } from 'src/composables/useValidator';
|
||||||
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
|
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||||
|
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||||
|
import SkeletonTable from 'components/ui/SkeletonTable.vue';
|
||||||
|
import { tMobile } from 'src/composables/tMobile';
|
||||||
|
|
||||||
|
const quasar = useQuasar();
|
||||||
|
const stateStore = useStateStore();
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { validate } = useValidator();
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
model: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
url: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
limit: {
|
||||||
|
type: Number,
|
||||||
|
default: 20,
|
||||||
|
},
|
||||||
|
saveUrl: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
primaryKey: {
|
||||||
|
type: String,
|
||||||
|
default: 'id',
|
||||||
|
},
|
||||||
|
dataRequired: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
defaultSave: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
defaultReset: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
defaultRemove: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
saveFn: {
|
||||||
|
type: Function,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const isLoading = ref(false);
|
||||||
|
const hasChanges = ref(false);
|
||||||
|
const originalData = ref();
|
||||||
|
const vnPaginateRef = ref();
|
||||||
|
const formData = ref();
|
||||||
|
const saveButtonRef = ref(null);
|
||||||
|
const formUrl = computed(() => $props.url);
|
||||||
|
|
||||||
|
const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
reload,
|
||||||
|
insert,
|
||||||
|
remove,
|
||||||
|
onSubmit,
|
||||||
|
reset,
|
||||||
|
hasChanges,
|
||||||
|
saveChanges,
|
||||||
|
getChanges,
|
||||||
|
formData,
|
||||||
|
});
|
||||||
|
|
||||||
|
async function fetch(data) {
|
||||||
|
if (data && Array.isArray(data)) {
|
||||||
|
let $index = 0;
|
||||||
|
data.map((d) => (d.$index = $index++));
|
||||||
|
}
|
||||||
|
|
||||||
|
originalData.value = data && JSON.parse(JSON.stringify(data));
|
||||||
|
formData.value = data && JSON.parse(JSON.stringify(data));
|
||||||
|
watch(formData, () => (hasChanges.value = true), { deep: true });
|
||||||
|
|
||||||
|
emit('onFetch', data);
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function reset() {
|
||||||
|
await fetch(originalData.value);
|
||||||
|
hasChanges.value = false;
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line vue/no-dupe-keys
|
||||||
|
function filter(value, update, filterOptions) {
|
||||||
|
update(
|
||||||
|
() => {
|
||||||
|
const { options, filterFn, field } = filterOptions;
|
||||||
|
|
||||||
|
options.value = filterFn(options, value, field);
|
||||||
|
},
|
||||||
|
(ref) => {
|
||||||
|
ref.setOptionIndex(-1);
|
||||||
|
ref.moveOptionSelection(1, true);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onSubmit() {
|
||||||
|
if (!hasChanges.value) {
|
||||||
|
return quasar.notify({
|
||||||
|
type: 'negative',
|
||||||
|
message: t('globals.noChanges'),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
isLoading.value = true;
|
||||||
|
await saveChanges($props.saveFn ? formData.value : null);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveChanges(data) {
|
||||||
|
if ($props.saveFn) {
|
||||||
|
$props.saveFn(data, getChanges);
|
||||||
|
isLoading.value = false;
|
||||||
|
hasChanges.value = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const changes = data || getChanges();
|
||||||
|
try {
|
||||||
|
await axios.post($props.saveUrl || $props.url + '/crud', changes);
|
||||||
|
} catch (e) {
|
||||||
|
return (isLoading.value = false);
|
||||||
|
}
|
||||||
|
originalData.value = JSON.parse(JSON.stringify(formData.value));
|
||||||
|
if (changes.creates?.length) await vnPaginateRef.value.fetch();
|
||||||
|
|
||||||
|
hasChanges.value = false;
|
||||||
|
isLoading.value = false;
|
||||||
|
emit('saveChanges', data);
|
||||||
|
quasar.notify({
|
||||||
|
type: 'positive',
|
||||||
|
message: t('globals.dataSaved'),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function insert() {
|
||||||
|
const $index = formData.value.length
|
||||||
|
? formData.value[formData.value.length - 1].$index + 1
|
||||||
|
: 0;
|
||||||
|
formData.value.push(Object.assign({ $index }, $props.dataRequired));
|
||||||
|
hasChanges.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function remove(data) {
|
||||||
|
if (!data.length)
|
||||||
|
return quasar.notify({
|
||||||
|
type: 'warning',
|
||||||
|
message: t('globals.noChanges'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const pk = $props.primaryKey;
|
||||||
|
let ids = data.map((d) => d[pk]).filter(Boolean);
|
||||||
|
let preRemove = data.map((d) => (d[pk] ? null : d.$index)).filter(Boolean);
|
||||||
|
let newData = formData.value;
|
||||||
|
|
||||||
|
if (preRemove.length) {
|
||||||
|
newData = newData.filter(
|
||||||
|
(form) => !preRemove.some((index) => index == form.$index)
|
||||||
|
);
|
||||||
|
const changes = getChanges();
|
||||||
|
if (!changes.creates?.length && !changes.updates?.length)
|
||||||
|
hasChanges.value = false;
|
||||||
|
fetch(newData);
|
||||||
|
}
|
||||||
|
if (ids.length) {
|
||||||
|
quasar
|
||||||
|
.dialog({
|
||||||
|
component: VnConfirm,
|
||||||
|
componentProps: {
|
||||||
|
title: t('globals.confirmDeletion'),
|
||||||
|
message: t('globals.confirmDeletionMessage'),
|
||||||
|
newData,
|
||||||
|
ids,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.onOk(async () => {
|
||||||
|
await saveChanges({ deletes: ids });
|
||||||
|
newData = newData.filter((form) => !ids.some((id) => id == form[pk]));
|
||||||
|
fetch(newData);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
emit('update:selected', []);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getChanges() {
|
||||||
|
const updates = [];
|
||||||
|
const creates = [];
|
||||||
|
|
||||||
|
const pk = $props.primaryKey;
|
||||||
|
for (const [i, row] of formData.value.entries()) {
|
||||||
|
if (!row[pk]) {
|
||||||
|
creates.push(row);
|
||||||
|
} else if (originalData.value) {
|
||||||
|
const data = getDifferences(originalData.value[i], row);
|
||||||
|
if (!isEmpty(data)) {
|
||||||
|
updates.push({
|
||||||
|
data,
|
||||||
|
where: { [pk]: row[pk] },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const changes = { updates, creates };
|
||||||
|
|
||||||
|
for (let prop in changes) {
|
||||||
|
if (changes[prop].length === 0) changes[prop] = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
return changes;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDifferences(obj1, obj2) {
|
||||||
|
let diff = {};
|
||||||
|
delete obj1.$index;
|
||||||
|
delete obj2.$index;
|
||||||
|
|
||||||
|
for (let key in obj1) {
|
||||||
|
if (obj2[key] && JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])) {
|
||||||
|
diff[key] = obj2[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let key in obj2) {
|
||||||
|
if (
|
||||||
|
obj1[key] === undefined ||
|
||||||
|
JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])
|
||||||
|
) {
|
||||||
|
diff[key] = obj2[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return diff;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isEmpty(obj) {
|
||||||
|
if (obj == null) return true;
|
||||||
|
if (obj === undefined) return true;
|
||||||
|
if (Object.keys(obj).length === 0) return true;
|
||||||
|
|
||||||
|
if (obj.length > 0) return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function reload() {
|
||||||
|
vnPaginateRef.value.fetch();
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(formUrl, async () => {
|
||||||
|
originalData.value = null;
|
||||||
|
reset();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<VnPaginate
|
||||||
|
:url="url"
|
||||||
|
:limit="limit"
|
||||||
|
v-bind="$attrs"
|
||||||
|
@on-fetch="fetch"
|
||||||
|
:skeleton="false"
|
||||||
|
ref="vnPaginateRef"
|
||||||
|
>
|
||||||
|
<template #body v-if="formData">
|
||||||
|
<slot
|
||||||
|
name="body"
|
||||||
|
:rows="formData"
|
||||||
|
:validate="validate"
|
||||||
|
:filter="filter"
|
||||||
|
></slot>
|
||||||
|
</template>
|
||||||
|
</VnPaginate>
|
||||||
|
<SkeletonTable v-if="!formData" />
|
||||||
|
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
|
||||||
|
<QBtnGroup push style="column-gap: 10px">
|
||||||
|
<slot name="moreBeforeActions" />
|
||||||
|
<QBtn
|
||||||
|
:label="tMobile('globals.remove')"
|
||||||
|
color="primary"
|
||||||
|
icon="delete"
|
||||||
|
flat
|
||||||
|
@click="remove(selected)"
|
||||||
|
:disable="!selected?.length"
|
||||||
|
:title="t('globals.remove')"
|
||||||
|
v-if="$props.defaultRemove"
|
||||||
|
/>
|
||||||
|
<QBtn
|
||||||
|
:label="tMobile('globals.reset')"
|
||||||
|
color="primary"
|
||||||
|
icon="restart_alt"
|
||||||
|
flat
|
||||||
|
@click="reset"
|
||||||
|
:disable="!hasChanges"
|
||||||
|
:title="t('globals.reset')"
|
||||||
|
v-if="$props.defaultReset"
|
||||||
|
/>
|
||||||
|
<QBtn
|
||||||
|
:label="tMobile('globals.save')"
|
||||||
|
ref="saveButtonRef"
|
||||||
|
color="primary"
|
||||||
|
icon="save"
|
||||||
|
@click="onSubmit"
|
||||||
|
:disable="!hasChanges"
|
||||||
|
:title="t('globals.save')"
|
||||||
|
v-if="$props.defaultSave"
|
||||||
|
/>
|
||||||
|
<slot name="moreAfterActions" />
|
||||||
|
</QBtnGroup>
|
||||||
|
</Teleport>
|
||||||
|
<QInnerLoading
|
||||||
|
:showing="isLoading"
|
||||||
|
:label="t && t('globals.pleaseWait')"
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,353 @@
|
||||||
|
<script setup>
|
||||||
|
import { reactive, computed, ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
|
||||||
|
import Croppie from 'croppie/croppie';
|
||||||
|
import 'croppie/croppie.css';
|
||||||
|
import useNotify from 'src/composables/useNotify.js';
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
const emit = defineEmits(['closeForm', 'onPhotoUploaded']);
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
collection: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { notify } = useNotify();
|
||||||
|
|
||||||
|
const uploadMethodsOptions = [
|
||||||
|
{ label: t('Select from computer'), value: 'computer' },
|
||||||
|
{ label: t('Import from external URL'), value: 'URL' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const viewportTypes = [
|
||||||
|
{
|
||||||
|
code: 'normal',
|
||||||
|
description: t('Normal'),
|
||||||
|
viewport: {
|
||||||
|
width: 400,
|
||||||
|
height: 400,
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
width: 1200,
|
||||||
|
height: 1200,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'panoramic',
|
||||||
|
description: t('Panoramic'),
|
||||||
|
viewport: {
|
||||||
|
width: 675,
|
||||||
|
height: 450,
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
width: 1350,
|
||||||
|
height: 900,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'vertical',
|
||||||
|
description: t('Vertical'),
|
||||||
|
viewport: {
|
||||||
|
width: 306.66,
|
||||||
|
height: 533.33,
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
width: 460,
|
||||||
|
height: 800,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const uploadMethodSelected = ref('computer');
|
||||||
|
const viewPortTypeSelected = ref(viewportTypes[0]);
|
||||||
|
const inputFileRef = ref(null);
|
||||||
|
const allowedContentTypes = ref('');
|
||||||
|
const photoContainerRef = ref(null);
|
||||||
|
const editor = ref(null);
|
||||||
|
const newPhoto = reactive({
|
||||||
|
id: props.id,
|
||||||
|
collection: props.collection,
|
||||||
|
file: null,
|
||||||
|
url: null,
|
||||||
|
blob: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const openInputFile = () => {
|
||||||
|
inputFileRef.value.pickFiles();
|
||||||
|
};
|
||||||
|
|
||||||
|
const displayEditor = () => {
|
||||||
|
const viewportType = viewPortTypeSelected.value;
|
||||||
|
const viewport = viewportType.viewport;
|
||||||
|
const boundaryWidth = viewport.width + 200;
|
||||||
|
const boundaryHeight = viewport.height + 200;
|
||||||
|
|
||||||
|
if (editor.value) editor.value.destroy();
|
||||||
|
editor.value = new Croppie(photoContainerRef.value, {
|
||||||
|
viewport: { width: viewport.width, height: viewport.height },
|
||||||
|
boundary: { width: boundaryWidth, height: boundaryHeight },
|
||||||
|
enableOrientation: true,
|
||||||
|
showZoomer: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const viewportSelection = computed({
|
||||||
|
get() {
|
||||||
|
return viewPortTypeSelected.value;
|
||||||
|
},
|
||||||
|
set(val) {
|
||||||
|
viewPortTypeSelected.value = val;
|
||||||
|
|
||||||
|
const hasFile = newPhoto.files || newPhoto.url;
|
||||||
|
if (!val || !hasFile) return;
|
||||||
|
|
||||||
|
let file;
|
||||||
|
if (uploadMethodSelected.value == 'computer') file = newPhoto.files;
|
||||||
|
else if (uploadMethodSelected.value == 'URL') file = newPhoto.url;
|
||||||
|
|
||||||
|
updatePhotoPreview(file);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const updatePhotoPreview = (value) => {
|
||||||
|
if (value) {
|
||||||
|
displayEditor();
|
||||||
|
if (uploadMethodSelected.value == 'computer') {
|
||||||
|
newPhoto.files = value;
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = (e) => editor.value.bind({ url: e.target.result });
|
||||||
|
reader.readAsDataURL(value);
|
||||||
|
} else if (uploadMethodSelected.value == 'URL') {
|
||||||
|
newPhoto.url = value;
|
||||||
|
const img = new Image();
|
||||||
|
img.crossOrigin = 'Anonymous';
|
||||||
|
img.src = value;
|
||||||
|
img.onload = () => editor.value.bind({ url: value });
|
||||||
|
img.onerror = () => {
|
||||||
|
notify(
|
||||||
|
t("This photo provider doesn't allow remote downloads"),
|
||||||
|
'negative'
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const rotateLeft = () => {
|
||||||
|
editor.value.rotate(90);
|
||||||
|
};
|
||||||
|
|
||||||
|
const rotateRight = () => {
|
||||||
|
editor.value.rotate(-90);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onUploadAccept = () => {
|
||||||
|
try {
|
||||||
|
if (!newPhoto.files && !newPhoto.url) {
|
||||||
|
notify(t('Select an image'), 'negative');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
type: 'blob',
|
||||||
|
};
|
||||||
|
|
||||||
|
editor.value
|
||||||
|
.result(options)
|
||||||
|
.then((result) => {
|
||||||
|
const file = new File([result], newPhoto.files?.name || '');
|
||||||
|
newPhoto.blob = file;
|
||||||
|
})
|
||||||
|
.then(() => makeRequest());
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error uploading image');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const makeRequest = async () => {
|
||||||
|
const formData = new FormData();
|
||||||
|
const now = Date.vnNew();
|
||||||
|
const timestamp = now.getTime();
|
||||||
|
const fileName = `${newPhoto.files?.name}_${timestamp}`;
|
||||||
|
formData.append('blob', newPhoto.blob, fileName);
|
||||||
|
|
||||||
|
await axios.post('Images/upload', formData, {
|
||||||
|
params: newPhoto,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'multipart/form-data',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
emit('closeForm');
|
||||||
|
emit('onPhotoUploaded');
|
||||||
|
|
||||||
|
notify(t('globals.dataSaved'), 'positive');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
ref="allowTypesRef"
|
||||||
|
url="ImageContainers/allowedContentTypes"
|
||||||
|
@on-fetch="(data) => (allowedContentTypes = data.join(', '))"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<QForm @submit="onUploadAccept()" class="all-pointer-events">
|
||||||
|
<QCard class="q-pa-lg">
|
||||||
|
<span ref="closeButton" class="close-icon" v-close-popup>
|
||||||
|
<QIcon name="close" size="sm" />
|
||||||
|
</span>
|
||||||
|
<h1 class="title">{{ t('Edit photo') }}</h1>
|
||||||
|
<div class="row q-gutter-lg">
|
||||||
|
<div
|
||||||
|
v-show="newPhoto.files || newPhoto.url"
|
||||||
|
class="row q-gutter-lg items-center"
|
||||||
|
>
|
||||||
|
<QIcon
|
||||||
|
name="rotate_left"
|
||||||
|
size="sm"
|
||||||
|
color="primary"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="rotateLeft()"
|
||||||
|
>
|
||||||
|
<!-- <QTooltip class="no-pointer-events">
|
||||||
|
{{ t('Rotate left') }}
|
||||||
|
</QTooltip> -->
|
||||||
|
</QIcon>
|
||||||
|
<div>
|
||||||
|
<div ref="photoContainerRef" />
|
||||||
|
</div>
|
||||||
|
<QIcon
|
||||||
|
name="rotate_right"
|
||||||
|
size="sm"
|
||||||
|
color="primary"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="rotateRight()"
|
||||||
|
>
|
||||||
|
<!-- <QTooltip class="no-pointer-events">
|
||||||
|
{{ t('Rotate right') }}
|
||||||
|
</QTooltip> -->
|
||||||
|
</QIcon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<QOptionGroup
|
||||||
|
:options="uploadMethodsOptions"
|
||||||
|
type="radio"
|
||||||
|
v-model="uploadMethodSelected"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<QFile
|
||||||
|
v-if="uploadMethodSelected === 'computer'"
|
||||||
|
ref="inputFileRef"
|
||||||
|
:label="t('File')"
|
||||||
|
:multiple="false"
|
||||||
|
v-model="newPhoto.files"
|
||||||
|
@update:model-value="updatePhotoPreview($event)"
|
||||||
|
:accept="allowedContentTypes"
|
||||||
|
class="required cursor-pointer"
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<QIcon
|
||||||
|
name="vn:attach"
|
||||||
|
class="cursor-pointer q-mr-sm"
|
||||||
|
@click="openInputFile()"
|
||||||
|
>
|
||||||
|
<!-- <QTooltip>{{ t('globals.selectFile') }}</QTooltip> -->
|
||||||
|
</QIcon>
|
||||||
|
<QIcon name="info" class="cursor-pointer">
|
||||||
|
<QTooltip>{{
|
||||||
|
t('globals.allowedFilesText', {
|
||||||
|
allowedContentTypes: allowedContentTypes,
|
||||||
|
})
|
||||||
|
}}</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
</template>
|
||||||
|
</QFile>
|
||||||
|
<VnInput
|
||||||
|
v-if="uploadMethodSelected === 'URL'"
|
||||||
|
v-model="newPhoto.url"
|
||||||
|
@update:model-value="updatePhotoPreview($event)"
|
||||||
|
placeholder="https://"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Orientation')"
|
||||||
|
:options="viewportTypes"
|
||||||
|
hide-selected
|
||||||
|
option-label="description"
|
||||||
|
v-model="viewportSelection"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
<div class="q-mt-lg row justify-end">
|
||||||
|
<QBtn
|
||||||
|
:label="t('globals.save')"
|
||||||
|
type="submit"
|
||||||
|
color="primary"
|
||||||
|
:disabled="isLoading"
|
||||||
|
:loading="isLoading"
|
||||||
|
/>
|
||||||
|
<QBtn
|
||||||
|
:label="t('globals.cancel')"
|
||||||
|
type="reset"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
class="q-ml-sm"
|
||||||
|
:disabled="isLoading"
|
||||||
|
:loading="isLoading"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</QCard>
|
||||||
|
</QForm>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.title {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Edit photo: Editar foto
|
||||||
|
Select from computer: Seleccionar desde ordenador
|
||||||
|
Import from external URL: Importar desde URL externa
|
||||||
|
Vertical: Vertical
|
||||||
|
Normal: Normal
|
||||||
|
Panoramic: Panorámica
|
||||||
|
Orientation: Orientación
|
||||||
|
File: Fichero
|
||||||
|
This photo provider doesn't allow remote downloads: Este proveedor de fotos no permite descargas remotas
|
||||||
|
Rotate left: Girar a la izquierda
|
||||||
|
Rotate right: Girar a la derecha
|
||||||
|
Select an image: Selecciona una imagen
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,151 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, markRaw } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import { QCheckbox } from 'quasar';
|
||||||
|
|
||||||
|
import axios from 'axios';
|
||||||
|
import useNotify from 'src/composables/useNotify.js';
|
||||||
|
|
||||||
|
const emit = defineEmits(['onDataSaved']);
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
rows: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
fieldsOptions: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
editUrl: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { notify } = useNotify();
|
||||||
|
|
||||||
|
const inputs = {
|
||||||
|
input: markRaw(VnInput),
|
||||||
|
number: markRaw(VnInput),
|
||||||
|
date: markRaw(VnInputDate),
|
||||||
|
checkbox: markRaw(QCheckbox),
|
||||||
|
select: markRaw(VnSelect),
|
||||||
|
};
|
||||||
|
|
||||||
|
const newValue = ref(null);
|
||||||
|
const selectedField = ref(null);
|
||||||
|
const closeButton = ref(null);
|
||||||
|
const isLoading = ref(false);
|
||||||
|
|
||||||
|
const onDataSaved = () => {
|
||||||
|
notify('globals.dataSaved', 'positive');
|
||||||
|
emit('onDataSaved');
|
||||||
|
closeForm();
|
||||||
|
};
|
||||||
|
|
||||||
|
const submitData = async () => {
|
||||||
|
try {
|
||||||
|
isLoading.value = true;
|
||||||
|
const rowsToEdit = $props.rows.map((row) => ({ id: row.id, itemFk: row.itemFk }));
|
||||||
|
const payload = {
|
||||||
|
field: selectedField.value.field,
|
||||||
|
newValue: newValue.value,
|
||||||
|
lines: rowsToEdit,
|
||||||
|
};
|
||||||
|
|
||||||
|
await axios.post($props.editUrl, payload);
|
||||||
|
onDataSaved();
|
||||||
|
isLoading.value = false;
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error submitting table cell edit');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeForm = () => {
|
||||||
|
if (closeButton.value) closeButton.value.click();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<QForm @submit="submitData()" class="all-pointer-events">
|
||||||
|
<QCard class="q-pa-lg">
|
||||||
|
<span ref="closeButton" class="close-icon" v-close-popup>
|
||||||
|
<QIcon name="close" size="sm" />
|
||||||
|
</span>
|
||||||
|
<span class="title">{{ t('Edit') }}</span>
|
||||||
|
<span class="countLines">{{ ` ${rows.length} ` }}</span>
|
||||||
|
<span class="title">{{ t('buy(s)') }}</span>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Field to edit')"
|
||||||
|
:options="fieldsOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="label"
|
||||||
|
v-model="selectedField"
|
||||||
|
/>
|
||||||
|
<component
|
||||||
|
:is="inputs[selectedField?.component || 'input']"
|
||||||
|
v-bind="selectedField?.attrs || {}"
|
||||||
|
v-model="newValue"
|
||||||
|
:label="t('Value')"
|
||||||
|
style="width: 200px"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
<div class="q-mt-lg row justify-end">
|
||||||
|
<QBtn
|
||||||
|
:label="t('globals.cancel')"
|
||||||
|
type="reset"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
:disabled="isLoading"
|
||||||
|
:loading="isLoading"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
<QBtn
|
||||||
|
:label="t('globals.save')"
|
||||||
|
type="submit"
|
||||||
|
color="primary"
|
||||||
|
class="q-ml-sm"
|
||||||
|
:disabled="isLoading"
|
||||||
|
:loading="isLoading"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</QCard>
|
||||||
|
</QForm>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.title {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countLines {
|
||||||
|
font-size: 24px;
|
||||||
|
color: $primary;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Edit: Editar
|
||||||
|
buy(s): compra(s)
|
||||||
|
Field to edit: Campo a editar
|
||||||
|
Value: Valor
|
||||||
|
</i18n>
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { h, onMounted } from 'vue';
|
import { onMounted } from 'vue';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
|
|
@ -27,6 +27,10 @@ const $props = defineProps({
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
|
params: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['onFetch']);
|
const emit = defineEmits(['onFetch']);
|
||||||
|
|
@ -38,27 +42,24 @@ onMounted(async () => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
async function fetch() {
|
async function fetch(fetchFilter = {}) {
|
||||||
try {
|
try {
|
||||||
const filter = Object.assign({}, $props.filter);
|
const filter = Object.assign(fetchFilter, $props.filter); // eslint-disable-line vue/no-dupe-keys
|
||||||
if ($props.where) filter.where = $props.where;
|
if ($props.where && !fetchFilter.where) filter.where = $props.where;
|
||||||
if ($props.sortBy) filter.order = $props.sortBy;
|
if ($props.sortBy) filter.order = $props.sortBy;
|
||||||
if ($props.limit) filter.limit = $props.limit;
|
if ($props.limit) filter.limit = $props.limit;
|
||||||
|
|
||||||
const { data } = await axios.get($props.url, {
|
const { data } = await axios.get($props.url, {
|
||||||
params: { filter },
|
params: { filter: JSON.stringify(filter), ...$props.params },
|
||||||
});
|
});
|
||||||
|
|
||||||
emit('onFetch', data);
|
emit('onFetch', data);
|
||||||
|
return data;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
//
|
//
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const render = () => {
|
|
||||||
return h('div', []);
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<render />
|
<template></template>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,230 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, computed } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
import VnSelect from 'components/common/VnSelect.vue';
|
||||||
|
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
||||||
|
|
||||||
|
import axios from 'axios';
|
||||||
|
import { dashIfEmpty } from 'src/filters';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
url: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['itemSelected']);
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const itemFilter = {
|
||||||
|
include: [
|
||||||
|
{
|
||||||
|
relation: 'producer',
|
||||||
|
scope: {
|
||||||
|
fields: ['name'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
relation: 'ink',
|
||||||
|
scope: {
|
||||||
|
fields: ['name'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const itemFilterParams = reactive({});
|
||||||
|
const closeButton = ref(null);
|
||||||
|
const isLoading = ref(false);
|
||||||
|
const producersOptions = ref([]);
|
||||||
|
const ItemTypesOptions = ref([]);
|
||||||
|
const InksOptions = ref([]);
|
||||||
|
const tableRows = ref([]);
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const tableColumns = computed(() => [
|
||||||
|
{
|
||||||
|
label: t('entry.buys.id'),
|
||||||
|
name: 'id',
|
||||||
|
field: 'id',
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('entry.buys.name'),
|
||||||
|
name: 'name',
|
||||||
|
field: 'name',
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('entry.buys.size'),
|
||||||
|
name: 'size',
|
||||||
|
field: 'size',
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('entry.buys.producer'),
|
||||||
|
name: 'producerName',
|
||||||
|
field: 'producer',
|
||||||
|
align: 'left',
|
||||||
|
format: (val) => dashIfEmpty(val),
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: t('entry.buys.color'),
|
||||||
|
name: 'ink',
|
||||||
|
field: (row) => row?.ink?.name,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const fetchResults = async () => {
|
||||||
|
try {
|
||||||
|
let filter = itemFilter;
|
||||||
|
const params = itemFilterParams;
|
||||||
|
const where = {};
|
||||||
|
for (let key in params) {
|
||||||
|
const value = params[key];
|
||||||
|
if (!value) continue;
|
||||||
|
|
||||||
|
switch (key) {
|
||||||
|
case 'name':
|
||||||
|
where[key] = { like: `%${value}%` };
|
||||||
|
break;
|
||||||
|
case 'producerFk':
|
||||||
|
case 'typeFk':
|
||||||
|
case 'size':
|
||||||
|
case 'inkFk':
|
||||||
|
where[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
filter.where = where;
|
||||||
|
|
||||||
|
const { data } = await axios.get(props.url, {
|
||||||
|
params: { filter: JSON.stringify(filter) },
|
||||||
|
});
|
||||||
|
tableRows.value = data;
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error fetching entries items');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeForm = () => {
|
||||||
|
if (closeButton.value) closeButton.value.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectItem = ({ id }) => {
|
||||||
|
emit('itemSelected', id);
|
||||||
|
closeForm();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
url="Producers"
|
||||||
|
@on-fetch="(data) => (producersOptions = data)"
|
||||||
|
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="ItemTypes"
|
||||||
|
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||||
|
order="name"
|
||||||
|
@on-fetch="(data) => (ItemTypesOptions = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="Inks"
|
||||||
|
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||||
|
order="name"
|
||||||
|
@on-fetch="(data) => (InksOptions = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<QForm @submit="fetchResults()" class="all-pointer-events">
|
||||||
|
<QCard class="column" style="padding: 32px; z-index: 100">
|
||||||
|
<span ref="closeButton" class="close-icon" v-close-popup>
|
||||||
|
<QIcon name="close" size="sm" />
|
||||||
|
</span>
|
||||||
|
<h1 class="title">{{ t('Filter item') }}</h1>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<VnInput :label="t('entry.buys.name')" v-model="itemFilterParams.name" />
|
||||||
|
<VnInput :label="t('entry.buys.size')" v-model="itemFilterParams.size" />
|
||||||
|
<VnSelect
|
||||||
|
:label="t('entry.buys.producer')"
|
||||||
|
:options="producersOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
v-model="itemFilterParams.producerFk"
|
||||||
|
/>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('entry.buys.type')"
|
||||||
|
:options="ItemTypesOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
v-model="itemFilterParams.typeFk"
|
||||||
|
/>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('entry.buys.color')"
|
||||||
|
:options="InksOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
v-model="itemFilterParams.inkFk"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
<div class="q-mt-lg row justify-end">
|
||||||
|
<QBtn
|
||||||
|
:label="t('globals.search')"
|
||||||
|
type="submit"
|
||||||
|
color="primary"
|
||||||
|
:disabled="isLoading"
|
||||||
|
:loading="isLoading"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<QTable
|
||||||
|
:columns="tableColumns"
|
||||||
|
:rows="tableRows"
|
||||||
|
:loading="loading"
|
||||||
|
:hide-header="!tableRows || !tableRows.length > 0"
|
||||||
|
:no-data-label="t('Enter a new search')"
|
||||||
|
class="q-mt-lg"
|
||||||
|
@row-click="(_, row) => selectItem(row)"
|
||||||
|
>
|
||||||
|
<template #body-cell-id="{ row }">
|
||||||
|
<QTd auto-width @click.stop>
|
||||||
|
<QBtn flat color="blue">{{ row.id }}</QBtn>
|
||||||
|
<ItemDescriptorProxy :id="row.id" />
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
</QTable>
|
||||||
|
</QCard>
|
||||||
|
</QForm>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Filter item: Filtrar artículo
|
||||||
|
Enter a new search: Introduce una nueva búsqueda
|
||||||
|
</i18n>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.title {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,229 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, computed } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||||
|
import VnSelect from 'components/common/VnSelect.vue';
|
||||||
|
import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
|
||||||
|
|
||||||
|
import axios from 'axios';
|
||||||
|
import { toDate } from 'src/filters';
|
||||||
|
|
||||||
|
const emit = defineEmits(['travelSelected']);
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const travelFilter = {
|
||||||
|
include: [
|
||||||
|
{
|
||||||
|
relation: 'agency',
|
||||||
|
scope: {
|
||||||
|
fields: ['name'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
relation: 'warehouseIn',
|
||||||
|
scope: {
|
||||||
|
fields: ['name'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
relation: 'warehouseOut',
|
||||||
|
scope: {
|
||||||
|
fields: ['name'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const travelFilterParams = reactive({});
|
||||||
|
const closeButton = ref(null);
|
||||||
|
const isLoading = ref(false);
|
||||||
|
const agenciesOptions = ref([]);
|
||||||
|
const warehousesOptions = ref([]);
|
||||||
|
const tableRows = ref([]);
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const tableColumns = computed(() => [
|
||||||
|
{
|
||||||
|
label: t('entry.basicData.id'),
|
||||||
|
name: 'id',
|
||||||
|
field: 'id',
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('entry.basicData.warehouseOut'),
|
||||||
|
name: 'warehouseOutFk',
|
||||||
|
field: 'warehouseOutFk',
|
||||||
|
align: 'left',
|
||||||
|
format: (val) =>
|
||||||
|
warehousesOptions.value.find((warehouse) => warehouse.id === val).name,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('entry.basicData.warehouseIn'),
|
||||||
|
name: 'warehouseInFk',
|
||||||
|
field: 'warehouseInFk',
|
||||||
|
align: 'left',
|
||||||
|
format: (val) =>
|
||||||
|
warehousesOptions.value.find((warehouse) => warehouse.id === val).name,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('entry.basicData.shipped'),
|
||||||
|
name: 'shipped',
|
||||||
|
field: 'shipped',
|
||||||
|
align: 'left',
|
||||||
|
format: (val) => toDate(val),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('entry.basicData.landed'),
|
||||||
|
name: 'landed',
|
||||||
|
field: 'landed',
|
||||||
|
align: 'left',
|
||||||
|
format: (val) => toDate(val),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const fetchResults = async () => {
|
||||||
|
try {
|
||||||
|
let filter = travelFilter;
|
||||||
|
const params = travelFilterParams;
|
||||||
|
const where = {};
|
||||||
|
for (let key in params) {
|
||||||
|
const value = params[key];
|
||||||
|
if (!value) continue;
|
||||||
|
|
||||||
|
switch (key) {
|
||||||
|
case 'agencyModeFk':
|
||||||
|
case 'warehouseInFk':
|
||||||
|
case 'warehouseOutFk':
|
||||||
|
case 'shipped':
|
||||||
|
case 'landed':
|
||||||
|
where[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
filter.where = where;
|
||||||
|
const { data } = await axios.get('Travels', {
|
||||||
|
params: { filter: JSON.stringify(filter) },
|
||||||
|
});
|
||||||
|
tableRows.value = data;
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error fetching travels');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeForm = () => {
|
||||||
|
if (closeButton.value) closeButton.value.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectTravel = ({ id }) => {
|
||||||
|
emit('travelSelected', id);
|
||||||
|
closeForm();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
url="AgencyModes"
|
||||||
|
@on-fetch="(data) => (agenciesOptions = data)"
|
||||||
|
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="Warehouses"
|
||||||
|
:filter="{ fields: ['id', 'name'] }"
|
||||||
|
order="name"
|
||||||
|
@on-fetch="(data) => (warehousesOptions = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<QForm @submit="fetchResults()" class="all-pointer-events">
|
||||||
|
<QCard class="column" style="padding: 32px; z-index: 100">
|
||||||
|
<span ref="closeButton" class="close-icon" v-close-popup>
|
||||||
|
<QIcon name="close" size="sm" />
|
||||||
|
</span>
|
||||||
|
<h1 class="title">{{ t('Filter travels') }}</h1>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<VnSelect
|
||||||
|
:label="t('entry.basicData.agency')"
|
||||||
|
:options="agenciesOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
v-model="travelFilterParams.agencyModeFk"
|
||||||
|
/>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('entry.basicData.warehouseOut')"
|
||||||
|
:options="warehousesOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
v-model="travelFilterParams.warehouseOutFk"
|
||||||
|
/>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('entry.basicData.warehouseIn')"
|
||||||
|
:options="warehousesOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
v-model="travelFilterParams.warehouseInFk"
|
||||||
|
/>
|
||||||
|
<VnInputDate
|
||||||
|
:label="t('entry.basicData.shipped')"
|
||||||
|
v-model="travelFilterParams.shipped"
|
||||||
|
/>
|
||||||
|
<VnInputDate
|
||||||
|
:label="t('entry.basicData.landed')"
|
||||||
|
v-model="travelFilterParams.landed"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
<div class="q-mt-lg row justify-end">
|
||||||
|
<QBtn
|
||||||
|
:label="t('globals.search')"
|
||||||
|
type="submit"
|
||||||
|
color="primary"
|
||||||
|
:disabled="isLoading"
|
||||||
|
:loading="isLoading"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<QTable
|
||||||
|
:columns="tableColumns"
|
||||||
|
:rows="tableRows"
|
||||||
|
:loading="loading"
|
||||||
|
:hide-header="!tableRows || !tableRows.length > 0"
|
||||||
|
:no-data-label="t('Enter a new search')"
|
||||||
|
class="q-mt-lg"
|
||||||
|
@row-click="(_, row) => selectTravel(row)"
|
||||||
|
>
|
||||||
|
<template #body-cell-id="{ row }">
|
||||||
|
<QTd auto-width @click.stop>
|
||||||
|
<QBtn flat color="blue">{{ row.id }}</QBtn>
|
||||||
|
<TravelDescriptorProxy :id="row.id" />
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
</QTable>
|
||||||
|
</QCard>
|
||||||
|
</QForm>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Filter travels: Filtro envíos
|
||||||
|
Enter a new search: Introduce una nueva búsqueda
|
||||||
|
</i18n>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.title {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,16 +1,23 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { onMounted, onUnmounted, computed, ref, watch } from 'vue';
|
import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue';
|
||||||
|
import { onBeforeRouteLeave } from 'vue-router';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useQuasar } from 'quasar';
|
import { useQuasar } from 'quasar';
|
||||||
import { useState } from 'src/composables/useState';
|
import { useState } from 'src/composables/useState';
|
||||||
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
import { useValidator } from 'src/composables/useValidator';
|
import { useValidator } from 'src/composables/useValidator';
|
||||||
|
import useNotify from 'src/composables/useNotify.js';
|
||||||
import SkeletonForm from 'components/ui/SkeletonForm.vue';
|
import SkeletonForm from 'components/ui/SkeletonForm.vue';
|
||||||
|
import VnConfirm from './ui/VnConfirm.vue';
|
||||||
|
import { tMobile } from 'src/composables/tMobile';
|
||||||
|
|
||||||
const quasar = useQuasar();
|
const quasar = useQuasar();
|
||||||
const { t } = useI18n();
|
|
||||||
const state = useState();
|
const state = useState();
|
||||||
|
const stateStore = useStateStore();
|
||||||
|
const { t } = useI18n();
|
||||||
const { validate } = useValidator();
|
const { validate } = useValidator();
|
||||||
|
const { notify } = useNotify();
|
||||||
|
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
url: {
|
url: {
|
||||||
|
|
@ -25,59 +32,183 @@ const $props = defineProps({
|
||||||
type: Object,
|
type: Object,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
|
urlUpdate: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
urlCreate: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
defaultActions: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
defaultButtons: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
autoLoad: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
formInitialData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
observeFormChanges: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
description:
|
||||||
|
'Esto se usa principalmente para permitir guardar sin hacer cambios (Útil para la feature de clonar ya que en este caso queremos poder guardar de primeras)',
|
||||||
|
},
|
||||||
|
mapper: {
|
||||||
|
type: Function,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
clearStoreOnUnmount: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
saveFn: {
|
||||||
|
type: Function,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['onFetch']);
|
const emit = defineEmits(['onFetch', 'onDataSaved']);
|
||||||
|
|
||||||
defineExpose({
|
const componentIsRendered = ref(false);
|
||||||
save,
|
|
||||||
|
onMounted(async () => {
|
||||||
|
originalData.value = $props.formInitialData;
|
||||||
|
nextTick(() => {
|
||||||
|
componentIsRendered.value = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
|
||||||
|
state.set($props.model, $props.formInitialData);
|
||||||
|
if ($props.autoLoad && !$props.formInitialData) {
|
||||||
|
await fetch();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Si así se desea disparamos el watcher del form después de 100ms, asi darle tiempo de que se haya cargado la data inicial
|
||||||
|
// para evitar que detecte cambios cuando es data inicial default
|
||||||
|
if ($props.observeFormChanges) {
|
||||||
|
setTimeout(() => {
|
||||||
|
startFormWatcher();
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(async () => await fetch());
|
onBeforeRouteLeave((to, from, next) => {
|
||||||
|
if (hasChanges.value && $props.observeFormChanges)
|
||||||
|
quasar.dialog({
|
||||||
|
component: VnConfirm,
|
||||||
|
componentProps: {
|
||||||
|
title: t('Unsaved changes will be lost'),
|
||||||
|
message: t('Are you sure exit without saving?'),
|
||||||
|
promise: () => next(),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
else next();
|
||||||
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
state.unset($props.model);
|
// Restauramos los datos originales en el store si se realizaron cambios en el formulario pero no se guardaron, evitando modificaciones erróneas.
|
||||||
|
if (hasChanges.value) {
|
||||||
|
state.set($props.model, originalData.value);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if ($props.clearStoreOnUnmount) state.unset($props.model);
|
||||||
});
|
});
|
||||||
|
|
||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
const hasChanges = ref(false);
|
// Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
|
||||||
|
const isResetting = ref(false);
|
||||||
|
const hasChanges = ref(!$props.observeFormChanges);
|
||||||
|
const originalData = ref({});
|
||||||
const formData = computed(() => state.get($props.model));
|
const formData = computed(() => state.get($props.model));
|
||||||
const originalData = ref();
|
|
||||||
const formUrl = computed(() => $props.url);
|
const formUrl = computed(() => $props.url);
|
||||||
|
const defaultButtons = computed(() => ({
|
||||||
|
save: {
|
||||||
|
color: 'primary',
|
||||||
|
icon: 'save',
|
||||||
|
label: 'globals.save',
|
||||||
|
},
|
||||||
|
reset: {
|
||||||
|
color: 'primary',
|
||||||
|
icon: 'restart_alt',
|
||||||
|
label: 'globals.reset',
|
||||||
|
},
|
||||||
|
...$props.defaultButtons,
|
||||||
|
}));
|
||||||
|
const startFormWatcher = () => {
|
||||||
|
watch(
|
||||||
|
() => formData.value,
|
||||||
|
(val) => {
|
||||||
|
hasChanges.value = !isResetting.value && val;
|
||||||
|
isResetting.value = false;
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
async function fetch() {
|
async function fetch() {
|
||||||
const { data } = await axios.get($props.url, {
|
try {
|
||||||
params: { filter: $props.filter },
|
const { data } = await axios.get($props.url, {
|
||||||
});
|
params: { filter: JSON.stringify($props.filter) },
|
||||||
|
});
|
||||||
|
state.set($props.model, data);
|
||||||
|
originalData.value = data && JSON.parse(JSON.stringify(data));
|
||||||
|
|
||||||
state.set($props.model, data);
|
emit('onFetch', state.get($props.model));
|
||||||
originalData.value = Object.assign({}, data);
|
} catch (error) {
|
||||||
|
state.set($props.model, {});
|
||||||
watch(formData.value, () => (hasChanges.value = true));
|
originalData.value = {};
|
||||||
|
}
|
||||||
emit('onFetch', state.get($props.model));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function save() {
|
async function save() {
|
||||||
if (!hasChanges.value) {
|
if ($props.observeFormChanges && !hasChanges.value) {
|
||||||
return quasar.notify({
|
notify('globals.noChanges', 'negative');
|
||||||
type: 'negative',
|
return;
|
||||||
message: t('globals.noChanges'),
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
await axios.patch($props.url, formData.value);
|
|
||||||
|
|
||||||
originalData.value = formData.value;
|
try {
|
||||||
hasChanges.value = false;
|
const body = $props.mapper ? $props.mapper(formData.value) : formData.value;
|
||||||
|
let response;
|
||||||
|
if ($props.saveFn) response = await $props.saveFn(body);
|
||||||
|
else
|
||||||
|
response = await axios[$props.urlCreate ? 'post' : 'patch'](
|
||||||
|
$props.urlCreate || $props.urlUpdate || $props.url,
|
||||||
|
body
|
||||||
|
);
|
||||||
|
if ($props.urlCreate) notify('globals.dataCreated', 'positive');
|
||||||
|
|
||||||
|
emit('onDataSaved', formData.value, response?.data);
|
||||||
|
originalData.value = JSON.parse(JSON.stringify(formData.value));
|
||||||
|
hasChanges.value = false;
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
notify('errors.writeRequest', 'negative');
|
||||||
|
}
|
||||||
isLoading.value = false;
|
isLoading.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function reset() {
|
function reset() {
|
||||||
state.set($props.model, originalData.value);
|
state.set($props.model, originalData.value);
|
||||||
hasChanges.value = false;
|
originalData.value = JSON.parse(JSON.stringify(originalData.value));
|
||||||
|
|
||||||
|
emit('onFetch', state.get($props.model));
|
||||||
|
if ($props.observeFormChanges) {
|
||||||
|
hasChanges.value = false;
|
||||||
|
isResetting.value = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line vue/no-dupe-keys
|
||||||
function filter(value, update, filterOptions) {
|
function filter(value, update, filterOptions) {
|
||||||
update(
|
update(
|
||||||
() => {
|
() => {
|
||||||
|
|
@ -97,32 +228,82 @@ watch(formUrl, async () => {
|
||||||
reset();
|
reset();
|
||||||
fetch();
|
fetch();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
save,
|
||||||
|
isLoading,
|
||||||
|
hasChanges,
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<QBanner v-if="hasChanges" class="text-white bg-warning">
|
<div class="column items-center full-width">
|
||||||
<QIcon name="warning" size="md" class="q-mr-md" />
|
<QForm
|
||||||
<span>{{ t('globals.changesToSave') }}</span>
|
v-if="formData"
|
||||||
</QBanner>
|
@submit="save"
|
||||||
<QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md">
|
@reset="reset"
|
||||||
<slot name="form" :data="formData" :validate="validate" :filter="filter"></slot>
|
class="q-pa-md"
|
||||||
<div class="q-mt-lg">
|
id="formModel"
|
||||||
<slot name="actions">
|
>
|
||||||
<QBtn :label="t('globals.save')" type="submit" color="primary" />
|
<QCard>
|
||||||
<QBtn
|
<slot
|
||||||
:label="t('globals.reset')"
|
name="form"
|
||||||
type="reset"
|
:data="formData"
|
||||||
class="q-ml-sm"
|
:validate="validate"
|
||||||
color="primary"
|
:filter="filter"
|
||||||
flat
|
|
||||||
:disable="!hasChanges"
|
|
||||||
/>
|
/>
|
||||||
</slot>
|
</QCard>
|
||||||
|
</QForm>
|
||||||
|
</div>
|
||||||
|
<Teleport
|
||||||
|
to="#st-actions"
|
||||||
|
v-if="stateStore?.isSubToolbarShown() && componentIsRendered"
|
||||||
|
>
|
||||||
|
<div v-if="$props.defaultActions">
|
||||||
|
<QBtnGroup push class="q-gutter-x-sm">
|
||||||
|
<slot name="moreActions" />
|
||||||
|
<QBtn
|
||||||
|
:label="tMobile(defaultButtons.reset.label)"
|
||||||
|
:color="defaultButtons.reset.color"
|
||||||
|
:icon="defaultButtons.reset.icon"
|
||||||
|
flat
|
||||||
|
@click="reset"
|
||||||
|
:disable="!hasChanges"
|
||||||
|
:title="t(defaultButtons.reset.label)"
|
||||||
|
/>
|
||||||
|
<QBtn
|
||||||
|
:label="tMobile(defaultButtons.save.label)"
|
||||||
|
:color="defaultButtons.save.color"
|
||||||
|
:icon="defaultButtons.save.icon"
|
||||||
|
@click="save"
|
||||||
|
:disable="!hasChanges"
|
||||||
|
:title="t(defaultButtons.save.label)"
|
||||||
|
/>
|
||||||
|
</QBtnGroup>
|
||||||
</div>
|
</div>
|
||||||
</QForm>
|
</Teleport>
|
||||||
<SkeletonForm v-if="!formData" />
|
<SkeletonForm v-if="!formData" />
|
||||||
<QInnerLoading
|
<QInnerLoading
|
||||||
:showing="isLoading"
|
:showing="isLoading"
|
||||||
:label="t('globals.pleaseWait')"
|
:label="t('globals.pleaseWait')"
|
||||||
color="primary"
|
color="primary"
|
||||||
|
style="min-width: 100%"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.q-notifications {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
#formModel {
|
||||||
|
max-width: 800px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-card {
|
||||||
|
padding: 32px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Unsaved changes will be lost: Los cambios que no haya guardado se perderán
|
||||||
|
Are you sure exit without saving?: ¿Seguro que quiere salir sin guardar?
|
||||||
|
</i18n>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import FormModel from 'components/FormModel.vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['onDataSaved']);
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
url: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
model: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
filter: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
urlCreate: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
formInitialData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const formModelRef = ref(null);
|
||||||
|
const closeButton = ref(null);
|
||||||
|
|
||||||
|
const onDataSaved = (formData, requestResponse) => {
|
||||||
|
emit('onDataSaved', formData, requestResponse);
|
||||||
|
closeForm();
|
||||||
|
};
|
||||||
|
|
||||||
|
const isLoading = computed(() => formModelRef.value?.isLoading);
|
||||||
|
|
||||||
|
const closeForm = async () => {
|
||||||
|
if (closeButton.value) closeButton.value.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
isLoading,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FormModel
|
||||||
|
ref="formModelRef"
|
||||||
|
:form-initial-data="formInitialData"
|
||||||
|
:observe-form-changes="false"
|
||||||
|
:default-actions="false"
|
||||||
|
:url-create="urlCreate"
|
||||||
|
:model="model"
|
||||||
|
@on-data-saved="onDataSaved"
|
||||||
|
>
|
||||||
|
<template #form="{ data, validate }">
|
||||||
|
<span ref="closeButton" class="close-icon" v-close-popup>
|
||||||
|
<QIcon name="close" size="sm" />
|
||||||
|
</span>
|
||||||
|
<h1 class="title">{{ title }}</h1>
|
||||||
|
<p>{{ subtitle }}</p>
|
||||||
|
<slot name="form-inputs" :data="data" :validate="validate" />
|
||||||
|
<div class="q-mt-lg row justify-end">
|
||||||
|
<QBtn
|
||||||
|
:label="t('globals.cancel')"
|
||||||
|
:title="t('globals.cancel')"
|
||||||
|
type="reset"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
:disabled="isLoading"
|
||||||
|
:loading="isLoading"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
<QBtn
|
||||||
|
:label="t('globals.save')"
|
||||||
|
:title="t('globals.save')"
|
||||||
|
type="submit"
|
||||||
|
color="primary"
|
||||||
|
class="q-ml-sm"
|
||||||
|
:disabled="isLoading"
|
||||||
|
:loading="isLoading"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</FormModel>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.title {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
const emit = defineEmits(['onSubmit']);
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
defaultSubmitButton: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
defaultCancelButton: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
customSubmitButtonLabel: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const closeButton = ref(null);
|
||||||
|
const isLoading = ref(false);
|
||||||
|
|
||||||
|
const onSubmit = () => {
|
||||||
|
emit('onSubmit');
|
||||||
|
closeForm();
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeForm = () => {
|
||||||
|
if (closeButton.value) closeButton.value.click();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<QForm
|
||||||
|
@submit="onSubmit($event)"
|
||||||
|
class="all-pointer-events full-width"
|
||||||
|
style="max-width: 800px"
|
||||||
|
>
|
||||||
|
<QCard class="q-pa-lg">
|
||||||
|
<span ref="closeButton" class="close-icon" v-close-popup>
|
||||||
|
<QIcon name="close" size="sm" />
|
||||||
|
</span>
|
||||||
|
<h1 class="title">{{ title }}</h1>
|
||||||
|
<p>{{ subtitle }}</p>
|
||||||
|
<slot name="form-inputs" />
|
||||||
|
<div class="q-mt-lg row justify-end">
|
||||||
|
<QBtn
|
||||||
|
v-if="defaultCancelButton"
|
||||||
|
:label="t('globals.cancel')"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
class="q-ml-sm"
|
||||||
|
:disabled="isLoading"
|
||||||
|
:loading="isLoading"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
<QBtn
|
||||||
|
v-if="defaultSubmitButton"
|
||||||
|
:label="customSubmitButtonLabel || t('globals.save')"
|
||||||
|
type="submit"
|
||||||
|
color="primary"
|
||||||
|
:disabled="isLoading"
|
||||||
|
:loading="isLoading"
|
||||||
|
/>
|
||||||
|
<slot name="customButtons" />
|
||||||
|
</div>
|
||||||
|
</QCard>
|
||||||
|
</QForm>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.title {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,359 @@
|
||||||
|
<script setup>
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import VnInput from 'components/common/VnInput.vue';
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
|
||||||
|
import VnSelect from 'components/common/VnSelect.vue';
|
||||||
|
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
|
||||||
|
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const props = defineProps({
|
||||||
|
dataKey: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
customTags: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
exprBuilder: {
|
||||||
|
type: Function,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const itemCategories = ref([]);
|
||||||
|
const selectedCategoryFk = ref(null);
|
||||||
|
const selectedTypeFk = ref(null);
|
||||||
|
const itemTypesOptions = ref([]);
|
||||||
|
const suppliersOptions = ref([]);
|
||||||
|
const tagOptions = ref([]);
|
||||||
|
const tagValues = ref([]);
|
||||||
|
|
||||||
|
const categoryList = computed(() => {
|
||||||
|
return (itemCategories.value || [])
|
||||||
|
.filter((category) => category.display)
|
||||||
|
.map((category) => ({
|
||||||
|
...category,
|
||||||
|
icon: `vn:${(category.icon || '').split('-')[1]}`,
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
const selectedCategory = computed(() =>
|
||||||
|
(itemCategories.value || []).find(
|
||||||
|
(category) => category?.id === selectedCategoryFk.value
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
const selectedType = computed(() => {
|
||||||
|
return (itemTypesOptions.value || []).find(
|
||||||
|
(type) => type?.id === selectedTypeFk.value
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const selectCategory = async (params, categoryId, search) => {
|
||||||
|
if (params.categoryFk === categoryId) {
|
||||||
|
resetCategory(params);
|
||||||
|
search();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
selectedCategoryFk.value = categoryId;
|
||||||
|
params.categoryFk = categoryId;
|
||||||
|
await fetchItemTypes(categoryId);
|
||||||
|
search();
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetCategory = (params) => {
|
||||||
|
selectedCategoryFk.value = null;
|
||||||
|
itemTypesOptions.value = null;
|
||||||
|
if (params) {
|
||||||
|
params.categoryFk = null;
|
||||||
|
params.typeFk = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const applyTags = (params, search) => {
|
||||||
|
params.tags = tagValues.value
|
||||||
|
.filter((tag) => tag.selectedTag && tag.value)
|
||||||
|
.map((tag) => ({
|
||||||
|
tagFk: tag.selectedTag.id,
|
||||||
|
tagName: tag.selectedTag.name,
|
||||||
|
value: tag.value,
|
||||||
|
}));
|
||||||
|
search();
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchItemTypes = async (id) => {
|
||||||
|
try {
|
||||||
|
const filter = {
|
||||||
|
fields: ['id', 'name', 'categoryFk'],
|
||||||
|
where: { categoryFk: id },
|
||||||
|
include: 'category',
|
||||||
|
order: 'name ASC',
|
||||||
|
};
|
||||||
|
const { data } = await axios.get('ItemTypes', {
|
||||||
|
params: { filter: JSON.stringify(filter) },
|
||||||
|
});
|
||||||
|
itemTypesOptions.value = data;
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error fetching item types', err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getCategoryClass = (category, params) => {
|
||||||
|
if (category.id === params?.categoryFk) {
|
||||||
|
return 'active';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSelectedTagValues = async (tag) => {
|
||||||
|
try {
|
||||||
|
tag.value = null;
|
||||||
|
const filter = {
|
||||||
|
fields: ['value'],
|
||||||
|
order: 'value ASC',
|
||||||
|
limit: 30,
|
||||||
|
};
|
||||||
|
|
||||||
|
const params = { filter: JSON.stringify(filter) };
|
||||||
|
const { data } = await axios.get(`Tags/${tag.selectedTag.id}/filterValue`, {
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
tag.valueOptions = data;
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error getting selected tag values');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeTag = (index, params, search) => {
|
||||||
|
(tagValues.value || []).splice(index, 1);
|
||||||
|
applyTags(params, search);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
url="ItemCategories"
|
||||||
|
limit="30"
|
||||||
|
auto-load
|
||||||
|
@on-fetch="(data) => (itemCategories = data)"
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="Suppliers"
|
||||||
|
limit="30"
|
||||||
|
auto-load
|
||||||
|
:filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC', limit: 30 }"
|
||||||
|
@on-fetch="(data) => (suppliersOptions = data)"
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="Tags"
|
||||||
|
:filter="{ fields: ['id', 'name', 'isFree'] }"
|
||||||
|
auto-load
|
||||||
|
limit="30"
|
||||||
|
@on-fetch="(data) => (tagOptions = data)"
|
||||||
|
/>
|
||||||
|
<VnFilterPanel
|
||||||
|
:data-key="props.dataKey"
|
||||||
|
:expr-builder="exprBuilder"
|
||||||
|
:custom-tags="customTags"
|
||||||
|
>
|
||||||
|
<template #tags="{ tag, formatFn }">
|
||||||
|
<strong v-if="tag.label === 'categoryFk'">
|
||||||
|
{{ t(selectedCategory?.name || '') }}
|
||||||
|
</strong>
|
||||||
|
<strong v-else-if="tag.label === 'typeFk'">
|
||||||
|
{{ t(selectedType?.name || '') }}
|
||||||
|
</strong>
|
||||||
|
<div v-else class="q-gutter-x-xs">
|
||||||
|
<strong>{{ t(`components.itemsFilterPanel.${tag.label}`) }}: </strong>
|
||||||
|
<span>{{ formatFn(tag.value) }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #customTags="{ tags, params }">
|
||||||
|
<template v-for="tag in tags" :key="tag.label">
|
||||||
|
<VnFilterPanelChip
|
||||||
|
v-for="chip in tag.value"
|
||||||
|
:key="chip"
|
||||||
|
removable
|
||||||
|
@remove="removeTagChip(chip, params, searchFn)"
|
||||||
|
>
|
||||||
|
<div class="q-gutter-x-xs">
|
||||||
|
<strong>{{ chip.tagName }}: </strong>
|
||||||
|
<span>"{{ chip.value }}"</span>
|
||||||
|
</div>
|
||||||
|
</VnFilterPanelChip>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template #body="{ params, searchFn }">
|
||||||
|
<QItem class="category-filter q-mt-md">
|
||||||
|
<QBtn
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
v-for="category in categoryList"
|
||||||
|
:key="category.name"
|
||||||
|
:class="['category', getCategoryClass(category, params)]"
|
||||||
|
:icon="category.icon"
|
||||||
|
@click="selectCategory(params, category.id, searchFn)"
|
||||||
|
>
|
||||||
|
<QTooltip>
|
||||||
|
{{ t(category.name) }}
|
||||||
|
</QTooltip>
|
||||||
|
</QBtn>
|
||||||
|
</QItem>
|
||||||
|
<QItem class="q-my-md">
|
||||||
|
<QItemSection>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('components.itemsFilterPanel.typeFk')"
|
||||||
|
v-model="params.typeFk"
|
||||||
|
:options="itemTypesOptions"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
rounded
|
||||||
|
use-input
|
||||||
|
:disable="!selectedCategoryFk"
|
||||||
|
@update:model-value="
|
||||||
|
(value) => {
|
||||||
|
selectedTypeFk = value;
|
||||||
|
searchFn();
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<template #option="{ itemProps, opt }">
|
||||||
|
<QItem v-bind="itemProps">
|
||||||
|
<QItemSection>
|
||||||
|
<QItemLabel>{{ opt.name }}</QItemLabel>
|
||||||
|
<QItemLabel caption>
|
||||||
|
{{ opt.categoryName }}
|
||||||
|
</QItemLabel>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</template>
|
||||||
|
</VnSelect>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QSeparator />
|
||||||
|
<slot name="body" :params="params" :search-fn="searchFn" />
|
||||||
|
<QItem
|
||||||
|
v-for="(value, index) in tagValues"
|
||||||
|
:key="value"
|
||||||
|
class="q-mt-md filter-value"
|
||||||
|
>
|
||||||
|
<QItemSection class="col">
|
||||||
|
<VnSelect
|
||||||
|
:label="t('components.itemsFilterPanel.tag')"
|
||||||
|
v-model="value.selectedTag"
|
||||||
|
:options="tagOptions"
|
||||||
|
option-label="name"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
rounded
|
||||||
|
:emit-value="false"
|
||||||
|
use-input
|
||||||
|
:is-clearable="false"
|
||||||
|
@update:model-value="getSelectedTagValues(value)"
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
<QItemSection class="col">
|
||||||
|
<VnSelect
|
||||||
|
v-if="!value?.selectedTag?.isFree && value.valueOptions"
|
||||||
|
:label="t('components.itemsFilterPanel.value')"
|
||||||
|
v-model="value.value"
|
||||||
|
:options="value.valueOptions || []"
|
||||||
|
option-value="value"
|
||||||
|
option-label="value"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
rounded
|
||||||
|
emit-value
|
||||||
|
use-input
|
||||||
|
:disable="!value"
|
||||||
|
:is-clearable="false"
|
||||||
|
@update:model-value="applyTags(params, searchFn)"
|
||||||
|
/>
|
||||||
|
<VnInput
|
||||||
|
v-else
|
||||||
|
v-model="value.value"
|
||||||
|
:label="t('components.itemsFilterPanel.value')"
|
||||||
|
:disable="!value"
|
||||||
|
is-outlined
|
||||||
|
:is-clearable="false"
|
||||||
|
@keyup.enter="applyTags(params, searchFn)"
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
<QIcon
|
||||||
|
name="delete"
|
||||||
|
class="fill-icon-on-hover q-px-xs"
|
||||||
|
color="primary"
|
||||||
|
size="sm"
|
||||||
|
@click="removeTag(index, params, searchFn)"
|
||||||
|
/>
|
||||||
|
</QItem>
|
||||||
|
<QItem class="q-mt-lg">
|
||||||
|
<QIcon
|
||||||
|
name="add_circle"
|
||||||
|
class="fill-icon-on-hover q-px-xs"
|
||||||
|
color="primary"
|
||||||
|
size="sm"
|
||||||
|
@click="tagValues.push({})"
|
||||||
|
/>
|
||||||
|
</QItem>
|
||||||
|
</template>
|
||||||
|
</VnFilterPanel>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.category-filter {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
.category {
|
||||||
|
padding: 8px;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
background-color: var(--vn-accent-color);
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-value {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
en:
|
||||||
|
params:
|
||||||
|
supplier: Supplier
|
||||||
|
from: From
|
||||||
|
to: To
|
||||||
|
active: Is active
|
||||||
|
visible: Is visible
|
||||||
|
floramondo: Is floramondo
|
||||||
|
salesPersonFk: Buyer
|
||||||
|
categoryFk: Category
|
||||||
|
|
||||||
|
es:
|
||||||
|
params:
|
||||||
|
supplier: Proveedor
|
||||||
|
from: Desde
|
||||||
|
to: Hasta
|
||||||
|
active: Activo
|
||||||
|
visible: Visible
|
||||||
|
floramondo: Floramondo
|
||||||
|
salesPersonFk: Comprador
|
||||||
|
categoryFk: Categoría
|
||||||
|
</i18n>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { onMounted, ref, computed } from 'vue';
|
import { onMounted, ref, reactive } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { QSeparator, useQuasar } from 'quasar';
|
import { QSeparator, useQuasar } from 'quasar';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
|
@ -22,6 +22,8 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const expansionItemElements = reactive({});
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await navigation.fetchPinned();
|
await navigation.fetchPinned();
|
||||||
getRoutes();
|
getRoutes();
|
||||||
|
|
@ -31,7 +33,7 @@ function findMatches(search, item) {
|
||||||
const matches = [];
|
const matches = [];
|
||||||
function findRoute(search, item) {
|
function findRoute(search, item) {
|
||||||
for (const child of item.children) {
|
for (const child of item.children) {
|
||||||
if (search.indexOf(child.name) > -1) {
|
if (search?.indexOf(child.name) > -1) {
|
||||||
matches.push(child);
|
matches.push(child);
|
||||||
} else if (child.children) {
|
} else if (child.children) {
|
||||||
findRoute(search, child);
|
findRoute(search, child);
|
||||||
|
|
@ -55,10 +57,6 @@ function addChildren(module, route, parent) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const pinnedItems = computed(() => {
|
|
||||||
return items.value.filter((item) => item.isPinned);
|
|
||||||
});
|
|
||||||
|
|
||||||
const items = ref([]);
|
const items = ref([]);
|
||||||
function getRoutes() {
|
function getRoutes() {
|
||||||
if (props.source === 'main') {
|
if (props.source === 'main') {
|
||||||
|
|
@ -112,51 +110,72 @@ async function togglePinned(item, event) {
|
||||||
type: 'positive',
|
type: 'positive',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleItemExpansion = (itemName) => {
|
||||||
|
expansionItemElements[itemName].scrollToLastElement();
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<QList padding>
|
<QList padding class="column-max-width">
|
||||||
<template v-if="$props.source === 'main'">
|
<template v-if="$props.source === 'main'">
|
||||||
<QItemLabel header>
|
<template v-if="$route?.matched[1]?.name === 'Dashboard'">
|
||||||
{{ t('globals.pinnedModules') }}
|
<QItem class="header">
|
||||||
</QItemLabel>
|
<QItemSection avatar>
|
||||||
<template v-for="item in pinnedItems" :key="item.name">
|
<QIcon name="view_module" />
|
||||||
<template v-if="item.children">
|
</QItemSection>
|
||||||
<LeftMenuItemGroup :item="item" group="pinnedModules" class="pinned">
|
<QItemSection> {{ t('globals.modules') }}</QItemSection>
|
||||||
<template #side>
|
</QItem>
|
||||||
<QBtn
|
<QSeparator />
|
||||||
v-if="item.isPinned === true"
|
|
||||||
@click="togglePinned(item, $event)"
|
|
||||||
icon="remove_circle"
|
|
||||||
size="xs"
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
>
|
|
||||||
<QTooltip>{{
|
|
||||||
t('components.leftMenu.removeFromPinned')
|
|
||||||
}}</QTooltip>
|
|
||||||
</QBtn>
|
|
||||||
<QBtn
|
|
||||||
v-if="item.isPinned === false"
|
|
||||||
@click="togglePinned(item, $event)"
|
|
||||||
icon="push_pin"
|
|
||||||
size="xs"
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
>
|
|
||||||
<QTooltip>{{
|
|
||||||
t('components.leftMenu.addToPinned')
|
|
||||||
}}</QTooltip>
|
|
||||||
</QBtn>
|
|
||||||
</template>
|
|
||||||
</LeftMenuItemGroup>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<LeftMenuItem v-if="!item.children" :item="item" />
|
|
||||||
</template>
|
|
||||||
<QSeparator />
|
|
||||||
<QExpansionItem :label="t('moduleIndex.allModules')">
|
|
||||||
<template v-for="item in items" :key="item.name">
|
<template v-for="item in items" :key="item.name">
|
||||||
|
<template v-if="item.children">
|
||||||
|
<LeftMenuItem :item="item" group="modules">
|
||||||
|
<template #side>
|
||||||
|
<QBtn
|
||||||
|
v-if="item.isPinned === true"
|
||||||
|
@click="togglePinned(item, $event)"
|
||||||
|
icon="remove_circle"
|
||||||
|
size="xs"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
>
|
||||||
|
<QTooltip>
|
||||||
|
{{ t('components.leftMenu.removeFromPinned') }}
|
||||||
|
</QTooltip>
|
||||||
|
</QBtn>
|
||||||
|
<QBtn
|
||||||
|
v-if="item.isPinned === false"
|
||||||
|
@click="togglePinned(item, $event)"
|
||||||
|
icon="push_pin"
|
||||||
|
size="xs"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
>
|
||||||
|
<QTooltip>
|
||||||
|
{{ t('components.leftMenu.addToPinned') }}
|
||||||
|
</QTooltip>
|
||||||
|
</QBtn>
|
||||||
|
</template>
|
||||||
|
</LeftMenuItem>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-for="item in items" :key="item.name">
|
||||||
|
<template v-if="item.name === $route?.matched[1]?.name">
|
||||||
|
<QItem class="header">
|
||||||
|
<QItemSection avatar v-if="item.icon">
|
||||||
|
<QIcon :name="item.icon" />
|
||||||
|
</QItemSection>
|
||||||
|
<QItemSection avatar v-if="!item.icon">
|
||||||
|
<QIcon name="disabled_by_default" />
|
||||||
|
</QItemSection>
|
||||||
|
<QItemSection>{{ t(item.title) }}</QItemSection>
|
||||||
|
<QItemSection side>
|
||||||
|
<slot name="side" :item="item" />
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QSeparator />
|
||||||
<template v-if="item.children">
|
<template v-if="item.children">
|
||||||
<LeftMenuItemGroup :item="item" group="modules">
|
<LeftMenuItemGroup :item="item" group="modules">
|
||||||
<template #side>
|
<template #side>
|
||||||
|
|
@ -188,18 +207,32 @@ async function togglePinned(item, event) {
|
||||||
</LeftMenuItemGroup>
|
</LeftMenuItemGroup>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</QExpansionItem>
|
</template>
|
||||||
<QSeparator />
|
|
||||||
</template>
|
</template>
|
||||||
<template v-if="$props.source === 'card'">
|
<template v-if="$props.source === 'card'">
|
||||||
<template v-for="item in items" :key="item.name">
|
<template v-for="item in items" :key="item.name">
|
||||||
<LeftMenuItem v-if="!item.children" :item="item" />
|
<LeftMenuItem v-if="!item.children" :item="item" />
|
||||||
|
<QList v-else>
|
||||||
|
<QExpansionItem
|
||||||
|
v-ripple
|
||||||
|
clickable
|
||||||
|
:icon="item.icon"
|
||||||
|
:label="t(item.title)"
|
||||||
|
:content-inset-level="0.5"
|
||||||
|
@after-show="handleItemExpansion(item.name)"
|
||||||
|
>
|
||||||
|
<LeftMenuItemGroup
|
||||||
|
:ref="(el) => (expansionItemElements[item.name] = el)"
|
||||||
|
:item="item"
|
||||||
|
/>
|
||||||
|
</QExpansionItem>
|
||||||
|
</QList>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</QList>
|
</QList>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
.pinned .q-btn {
|
.pinned .q-btn {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
@ -207,4 +240,10 @@ async function togglePinned(item, event) {
|
||||||
.pinned:hover .q-btn {
|
.pinned:hover .q-btn {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
.column-max-width {
|
||||||
|
max-width: 256px;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
color: var(--vn-label-color);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t, te } = useI18n();
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
item: {
|
item: {
|
||||||
|
|
@ -11,16 +11,25 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const item = computed(() => props.item);
|
const itemComputed = computed(() => {
|
||||||
|
const item = JSON.parse(JSON.stringify(props.item));
|
||||||
|
const [, , section] = item.title.split('.');
|
||||||
|
|
||||||
|
if (!te(item.title)) item.title = t(`globals.pageTitles.${section}`);
|
||||||
|
return item;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<QItem active-class="text-primary" :to="{ name: item.name }" clickable v-ripple>
|
<QItem active-class="bg-hover" :to="{ name: itemComputed.name }" clickable v-ripple>
|
||||||
<QItemSection avatar v-if="item.icon">
|
<QItemSection avatar v-if="itemComputed.icon">
|
||||||
<QIcon :name="item.icon" />
|
<QIcon :name="itemComputed.icon" />
|
||||||
</QItemSection>
|
</QItemSection>
|
||||||
<QItemSection avatar v-if="!item.icon">
|
<QItemSection avatar v-if="!itemComputed.icon">
|
||||||
<QIcon name="disabled_by_default" />
|
<QIcon name="disabled_by_default" />
|
||||||
</QItemSection>
|
</QItemSection>
|
||||||
<QItemSection>{{ t(item.title) }}</QItemSection>
|
<QItemSection>{{ t(itemComputed.title) }}</QItemSection>
|
||||||
|
<QItemSection side>
|
||||||
|
<slot name="side" :item="itemComputed" />
|
||||||
|
</QItemSection>
|
||||||
</QItem>
|
</QItem>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,7 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed } from 'vue';
|
import { computed, ref } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
import LeftMenuItem from './LeftMenuItem.vue';
|
import LeftMenuItem from './LeftMenuItem.vue';
|
||||||
|
import { elementIsVisibleInViewport } from 'src/composables/elementIsVisibleInViewport';
|
||||||
const route = useRoute();
|
|
||||||
const { t } = useI18n();
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
item: {
|
item: {
|
||||||
|
|
@ -18,34 +14,27 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const item = computed(() => props.item);
|
const groupEnd = ref(null);
|
||||||
const isOpened = computed(() => {
|
|
||||||
const { matched } = route;
|
|
||||||
const { name } = item.value;
|
|
||||||
|
|
||||||
return matched.some((item) => item.name === name);
|
const scrollToLastElement = () => {
|
||||||
|
if (groupEnd.value && !elementIsVisibleInViewport(groupEnd.value)) {
|
||||||
|
groupEnd.value.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'end',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
scrollToLastElement,
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<QExpansionItem
|
<template v-for="section in item.children" :key="section.name">
|
||||||
:group="props.group"
|
<LeftMenuItem :item="section" />
|
||||||
active-class="text-primary"
|
</template>
|
||||||
:label="item.title"
|
<div ref="groupEnd" />
|
||||||
:to="{ name: item.name }"
|
|
||||||
expand-separator
|
|
||||||
:default-opened="isOpened"
|
|
||||||
>
|
|
||||||
<template #header>
|
|
||||||
<QItemSection avatar>
|
|
||||||
<QIcon :name="item.icon"></QIcon>
|
|
||||||
</QItemSection>
|
|
||||||
<QItemSection>{{ t(item.title) }}</QItemSection>
|
|
||||||
<QItemSection side>
|
|
||||||
<slot name="side" :item="item" />
|
|
||||||
</QItemSection>
|
|
||||||
</template>
|
|
||||||
<template v-for="section in item.children" :key="section.name">
|
|
||||||
<LeftMenuItem :item="section" />
|
|
||||||
</template>
|
|
||||||
</QExpansionItem>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,43 +1,41 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useSession } from 'src/composables/useSession';
|
import { useSession } from 'src/composables/useSession';
|
||||||
import UserPanel from 'components/UserPanel.vue';
|
|
||||||
import { useState } from 'src/composables/useState';
|
import { useState } from 'src/composables/useState';
|
||||||
import { useStateStore } from 'stores/useStateStore';
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
|
import { useQuasar } from 'quasar';
|
||||||
import PinnedModules from './PinnedModules.vue';
|
import PinnedModules from './PinnedModules.vue';
|
||||||
|
import UserPanel from 'components/UserPanel.vue';
|
||||||
|
import VnBreadcrumbs from './common/VnBreadcrumbs.vue';
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const session = useSession();
|
|
||||||
const stateStore = useStateStore();
|
const stateStore = useStateStore();
|
||||||
|
const quasar = useQuasar();
|
||||||
const state = useState();
|
const state = useState();
|
||||||
const user = state.getUser();
|
const user = state.getUser();
|
||||||
const token = session.getToken();
|
const { getTokenMultimedia } = useSession();
|
||||||
|
const token = getTokenMultimedia();
|
||||||
const appName = 'Lilium';
|
const appName = 'Lilium';
|
||||||
|
|
||||||
onMounted(() => stateStore.setMounted());
|
onMounted(() => stateStore.setMounted());
|
||||||
|
|
||||||
|
const pinnedModulesRef = ref();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<QHeader class="bg-dark" color="white" elevated>
|
<QHeader color="white" elevated>
|
||||||
<QToolbar class="q-py-sm q-px-md">
|
<QToolbar class="q-py-sm q-px-md">
|
||||||
<QBtn
|
<QBtn @click="stateStore.toggleLeftDrawer()" icon="menu" round dense flat>
|
||||||
@click="stateStore.toggleLeftDrawer()"
|
|
||||||
icon="menu"
|
|
||||||
class="q-mr-sm"
|
|
||||||
round
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
>
|
|
||||||
<QTooltip bottom anchor="bottom right">
|
<QTooltip bottom anchor="bottom right">
|
||||||
{{ t('globals.collapseMenu') }}
|
{{ t('globals.collapseMenu') }}
|
||||||
</QTooltip>
|
</QTooltip>
|
||||||
</QBtn>
|
</QBtn>
|
||||||
<RouterLink to="/">
|
<RouterLink to="/">
|
||||||
<QBtn class="q-ml-xs" color="primary" flat round>
|
<QBtn color="primary" flat round v-if="!quasar.platform.is.mobile">
|
||||||
<QAvatar square size="md">
|
<QAvatar square size="md">
|
||||||
<QImg
|
<QImg
|
||||||
src="~/assets/logo_icon.svg"
|
src="~/assets/salix_icon.svg"
|
||||||
:alt="appName"
|
:alt="appName"
|
||||||
spinner-color="primary"
|
spinner-color="primary"
|
||||||
/>
|
/>
|
||||||
|
|
@ -47,22 +45,43 @@ onMounted(() => stateStore.setMounted());
|
||||||
</QTooltip>
|
</QTooltip>
|
||||||
</QBtn>
|
</QBtn>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
<QToolbarTitle shrink class="text-weight-bold" v-if="$q.screen.gt.sm">
|
<VnBreadcrumbs v-if="$q.screen.gt.sm" />
|
||||||
{{ appName }}
|
|
||||||
<QBadge label="Beta" align="top" />
|
|
||||||
</QToolbarTitle>
|
|
||||||
<QSpace />
|
<QSpace />
|
||||||
<div id="searchbar"></div>
|
<div id="searchbar" class="searchbar"></div>
|
||||||
<QSpace />
|
<QSpace />
|
||||||
<div class="q-pl-sm q-gutter-sm row items-center no-wrap">
|
<div class="q-pl-sm q-gutter-sm row items-center no-wrap">
|
||||||
<div id="actions-prepend"></div>
|
<div id="actions-prepend"></div>
|
||||||
<QBtn id="pinnedModules" icon="apps" flat dense rounded>
|
<QBtn
|
||||||
|
flat
|
||||||
|
v-if="!quasar.platform.is.mobile"
|
||||||
|
@click="pinnedModulesRef.redirect($route.params.id)"
|
||||||
|
icon="more_up"
|
||||||
|
>
|
||||||
|
<QTooltip>
|
||||||
|
{{ t('Go to Salix') }}
|
||||||
|
</QTooltip>
|
||||||
|
</QBtn>
|
||||||
|
<QBtn
|
||||||
|
:class="{ 'q-pa-none': quasar.platform.is.mobile }"
|
||||||
|
id="pinnedModules"
|
||||||
|
icon="apps"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
rounded
|
||||||
|
>
|
||||||
<QTooltip bottom>
|
<QTooltip bottom>
|
||||||
{{ t('globals.pinnedModules') }}
|
{{ t('globals.pinnedModules') }}
|
||||||
</QTooltip>
|
</QTooltip>
|
||||||
<PinnedModules />
|
<PinnedModules ref="pinnedModulesRef" />
|
||||||
</QBtn>
|
</QBtn>
|
||||||
<QBtn rounded dense flat no-wrap id="user">
|
<QBtn
|
||||||
|
:class="{ 'q-pa-none': quasar.platform.is.mobile }"
|
||||||
|
rounded
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
no-wrap
|
||||||
|
id="user"
|
||||||
|
>
|
||||||
<QAvatar size="lg">
|
<QAvatar size="lg">
|
||||||
<QImg
|
<QImg
|
||||||
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
||||||
|
|
@ -78,5 +97,21 @@ onMounted(() => stateStore.setMounted());
|
||||||
<div id="actions-append"></div>
|
<div id="actions-append"></div>
|
||||||
</div>
|
</div>
|
||||||
</QToolbar>
|
</QToolbar>
|
||||||
|
<VnBreadcrumbs v-if="$q.screen.lt.md" class="q-ml-md" />
|
||||||
</QHeader>
|
</QHeader>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.searchbar {
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
.q-header {
|
||||||
|
background-color: var(--vn-section-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<i18n>
|
||||||
|
en:
|
||||||
|
Go to Salix: Go to Salix
|
||||||
|
es:
|
||||||
|
Go to Salix: Ir a Salix
|
||||||
|
</i18n>
|
||||||
|
|
|
||||||
|
|
@ -2,69 +2,85 @@
|
||||||
import { onMounted, computed } from 'vue';
|
import { onMounted, computed } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useNavigationStore } from 'src/stores/useNavigationStore';
|
import { useNavigationStore } from 'src/stores/useNavigationStore';
|
||||||
|
import { getUrl } from 'src/composables/getUrl';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
const navigation = useNavigationStore();
|
const navigation = useNavigationStore();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
navigation.fetchPinned();
|
navigation.fetchPinned();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
redirect,
|
||||||
|
});
|
||||||
|
|
||||||
const pinnedModules = computed(() => navigation.getPinnedModules());
|
const pinnedModules = computed(() => navigation.getPinnedModules());
|
||||||
|
|
||||||
|
async function redirect() {
|
||||||
|
if (route.path == '/dashboard') return (window.location.href = await getUrl(''));
|
||||||
|
let section = route.path.substring(1);
|
||||||
|
section = section.substring(0, section.indexOf('/'));
|
||||||
|
|
||||||
|
if (route?.params?.id)
|
||||||
|
return (window.location.href = await getUrl(
|
||||||
|
`${section}/${route.params.id}/summary`
|
||||||
|
));
|
||||||
|
return (window.location.href = await getUrl(section + '/index'));
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<QMenu
|
<QMenu anchor="bottom left" max-width="300px" max-height="400px">
|
||||||
anchor="bottom left"
|
<div v-if="pinnedModules.length >= 0" class="row justify-around q-pa-md">
|
||||||
class="row q-pa-md q-col-gutter-lg"
|
<QBtn flat stack size="lg" icon="more_up" @click="redirect($route.params.id)">
|
||||||
max-width="350px"
|
<div class="button-text">Salix</div>
|
||||||
max-height="400px"
|
</QBtn>
|
||||||
>
|
<QBtn flat stack size="lg" icon="home" to="/">
|
||||||
<template v-if="pinnedModules.length">
|
<div class="button-text">{{ t('Home') }}</div>
|
||||||
<div
|
</QBtn>
|
||||||
v-for="item of pinnedModules"
|
|
||||||
:key="item.title"
|
<div class="row col-12 justify-around q-mt-md">
|
||||||
class="row no-wrap q-pa-xs flex-item"
|
|
||||||
>
|
|
||||||
<QBtn
|
<QBtn
|
||||||
align="evenly"
|
|
||||||
padding="16px"
|
|
||||||
flat
|
flat
|
||||||
stack
|
stack
|
||||||
size="lg"
|
size="lg"
|
||||||
:icon="item.icon"
|
:icon="item.icon"
|
||||||
color="primary"
|
color="primary"
|
||||||
class="col-4 button"
|
class="col-5"
|
||||||
:to="{ name: item.name }"
|
:to="{ name: item.name }"
|
||||||
|
v-for="item of pinnedModules"
|
||||||
|
:key="item.title"
|
||||||
>
|
>
|
||||||
<div class="text-center text-primary button-text">
|
<div class="text-center text-primary button-text">
|
||||||
{{ t(item.title) }}
|
{{ t(item.title) }}
|
||||||
</div>
|
</div>
|
||||||
</QBtn>
|
</QBtn>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
<template v-else>
|
<div v-else>
|
||||||
<div
|
<div
|
||||||
class="row no-wrap q-pa-xs flex-item text-center text-grey-5"
|
class="row no-wrap q-pa-xs flex-item text-center text-grey-5"
|
||||||
style="min-width: 200px"
|
style="min-width: 200px"
|
||||||
>
|
>
|
||||||
{{ t('globals.noPinnedModules') }}
|
{{ t('globals.noPinnedModules') }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
</QMenu>
|
</QMenu>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.flex-item {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
.button {
|
|
||||||
width: 100%;
|
|
||||||
line-height: normal;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.button-text {
|
.button-text {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
en:
|
||||||
|
Home: Home
|
||||||
|
es:
|
||||||
|
Home: Inicio
|
||||||
|
</i18n>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import FormModelPopup from './FormModelPopup.vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['onDataSaved']);
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
itemFk: {
|
||||||
|
type: Number,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
warehouseFk: {
|
||||||
|
type: Boolean,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const regularizeFormData = reactive({
|
||||||
|
itemFk: props.itemFk,
|
||||||
|
warehouseFk: props.warehouseFk,
|
||||||
|
quantity: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const warehousesOptions = ref([]);
|
||||||
|
|
||||||
|
const onDataSaved = (data) => {
|
||||||
|
emit('onDataSaved', data);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
url="Warehouses"
|
||||||
|
@on-fetch="(data) => (warehousesOptions = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FormModelPopup
|
||||||
|
url-create="Items/regularize"
|
||||||
|
model="Items"
|
||||||
|
:title="t('Regularize stock')"
|
||||||
|
:form-initial-data="regularizeFormData"
|
||||||
|
@on-data-saved="onDataSaved($event)"
|
||||||
|
>
|
||||||
|
<template #form-inputs="{ data }">
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<QInput
|
||||||
|
:label="t('Type the visible quantity')"
|
||||||
|
v-model.number="data.quantity"
|
||||||
|
autofocus
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<div class="col">
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Warehouse')"
|
||||||
|
v-model="data.warehouseFk"
|
||||||
|
:options="warehousesOptions"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
hide-selected
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</VnRow>
|
||||||
|
</template>
|
||||||
|
</FormModelPopup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Warehouse: Almacén
|
||||||
|
Type the visible quantity: Introduce la cantidad visible
|
||||||
|
Regularize stock: Regularizar stock
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,160 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnSelect from 'components/common/VnSelect.vue';
|
||||||
|
import FormPopup from './FormPopup.vue';
|
||||||
|
|
||||||
|
import axios from 'axios';
|
||||||
|
import useNotify from 'src/composables/useNotify.js';
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
invoiceOutData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const router = useRouter();
|
||||||
|
const { notify } = useNotify();
|
||||||
|
|
||||||
|
const transferInvoiceParams = reactive({
|
||||||
|
id: $props.invoiceOutData?.id,
|
||||||
|
refFk: $props.invoiceOutData?.ref,
|
||||||
|
});
|
||||||
|
const closeButton = ref(null);
|
||||||
|
const clientsOptions = ref([]);
|
||||||
|
const rectificativeTypeOptions = ref([]);
|
||||||
|
const siiTypeInvoiceOutsOptions = ref([]);
|
||||||
|
const invoiceCorrectionTypesOptions = ref([]);
|
||||||
|
|
||||||
|
const closeForm = () => {
|
||||||
|
if (closeButton.value) closeButton.value.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
const transferInvoice = async () => {
|
||||||
|
try {
|
||||||
|
const { data } = await axios.post(
|
||||||
|
'InvoiceOuts/transferInvoice',
|
||||||
|
transferInvoiceParams
|
||||||
|
);
|
||||||
|
notify(t('Transferred invoice'), 'positive');
|
||||||
|
closeForm();
|
||||||
|
router.push('InvoiceOutSummary', { id: data.id });
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error transfering invoice', err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
url="Clients"
|
||||||
|
@on-fetch="(data) => (clientsOptions = data)"
|
||||||
|
:filter="{ fields: ['id', 'name'], order: 'id', limit: 30 }"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="CplusRectificationTypes"
|
||||||
|
:filter="{ order: 'description' }"
|
||||||
|
@on-fetch="(data) => (rectificativeTypeOptions = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="SiiTypeInvoiceOuts"
|
||||||
|
:filter="{ where: { code: { like: 'R%' } } }"
|
||||||
|
@on-fetch="(data) => (siiTypeInvoiceOutsOptions = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="InvoiceCorrectionTypes"
|
||||||
|
@on-fetch="(data) => (invoiceCorrectionTypesOptions = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FormPopup
|
||||||
|
@on-submit="transferInvoice()"
|
||||||
|
:title="t('Transfer invoice')"
|
||||||
|
:custom-submit-button-label="t('Transfer client')"
|
||||||
|
:default-cancel-button="false"
|
||||||
|
>
|
||||||
|
<template #form-inputs>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Client')"
|
||||||
|
:options="clientsOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
v-model="transferInvoiceParams.newClientFk"
|
||||||
|
:required="true"
|
||||||
|
>
|
||||||
|
<template #option="scope">
|
||||||
|
<QItem v-bind="scope.itemProps">
|
||||||
|
<QItemSection>
|
||||||
|
<QItemLabel>
|
||||||
|
#{{ scope.opt?.id }} -
|
||||||
|
{{ scope.opt?.name }}
|
||||||
|
</QItemLabel>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</template>
|
||||||
|
</VnSelect>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Rectificative type')"
|
||||||
|
:options="rectificativeTypeOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="description"
|
||||||
|
option-value="id"
|
||||||
|
v-model="transferInvoiceParams.cplusRectificationTypeFk"
|
||||||
|
:required="true"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Class')"
|
||||||
|
:options="siiTypeInvoiceOutsOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="description"
|
||||||
|
option-value="id"
|
||||||
|
v-model="transferInvoiceParams.siiTypeInvoiceOutFk"
|
||||||
|
:required="true"
|
||||||
|
>
|
||||||
|
<template #option="scope">
|
||||||
|
<QItem v-bind="scope.itemProps">
|
||||||
|
<QItemSection>
|
||||||
|
<QItemLabel>
|
||||||
|
{{ scope.opt?.code }} -
|
||||||
|
{{ scope.opt?.description }}
|
||||||
|
</QItemLabel>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</template>
|
||||||
|
</VnSelect>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('Type')"
|
||||||
|
:options="invoiceCorrectionTypesOptions"
|
||||||
|
hide-selected
|
||||||
|
option-label="description"
|
||||||
|
option-value="id"
|
||||||
|
v-model="transferInvoiceParams.invoiceCorrectionTypeFk"
|
||||||
|
:required="true"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
</template>
|
||||||
|
</FormPopup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Transfer invoice: Transferir factura
|
||||||
|
Transfer client: Transferir cliente
|
||||||
|
Client: Cliente
|
||||||
|
Rectificative type: Tipo rectificativa
|
||||||
|
Class: Clase
|
||||||
|
Type: Tipo
|
||||||
|
Transferred invoice: Factura transferida
|
||||||
|
</i18n>
|
||||||
|
|
@ -4,15 +4,20 @@ import { Dark, Quasar } from 'quasar';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
import { useState } from 'src/composables/useState';
|
import { useState } from 'src/composables/useState';
|
||||||
import { useSession } from 'src/composables/useSession';
|
import { useSession } from 'src/composables/useSession';
|
||||||
|
import { localeEquivalence } from 'src/i18n/index';
|
||||||
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
|
||||||
const state = useState();
|
const state = useState();
|
||||||
const session = useSession();
|
const session = useSession();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { t, locale } = useI18n();
|
const { t, locale } = useI18n();
|
||||||
|
import { useClipboard } from 'src/composables/useClipboard';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
const { copyText } = useClipboard();
|
||||||
const userLocale = computed({
|
const userLocale = computed({
|
||||||
get() {
|
get() {
|
||||||
return locale.value;
|
return locale.value;
|
||||||
|
|
@ -20,13 +25,11 @@ const userLocale = computed({
|
||||||
set(value) {
|
set(value) {
|
||||||
locale.value = value;
|
locale.value = value;
|
||||||
|
|
||||||
if (value === 'en') value = 'en-GB';
|
value = localeEquivalence[value] ?? value;
|
||||||
|
|
||||||
// FIXME: Dynamic imports from absolute paths are not compatible with vite:
|
|
||||||
// https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
|
|
||||||
try {
|
try {
|
||||||
const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs');
|
/* @vite-ignore */
|
||||||
langList[`../../node_modules/quasar/lang/${value}.mjs`]().then((lang) => {
|
import(`../../node_modules/quasar/lang/${value}.mjs`).then((lang) => {
|
||||||
Quasar.lang.set(lang.default);
|
Quasar.lang.set(lang.default);
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|
@ -45,7 +48,10 @@ const darkMode = computed({
|
||||||
});
|
});
|
||||||
|
|
||||||
const user = state.getUser();
|
const user = state.getUser();
|
||||||
const token = session.getToken();
|
const token = session.getTokenMultimedia();
|
||||||
|
const warehousesData = ref();
|
||||||
|
const companiesData = ref();
|
||||||
|
const accountBankData = ref();
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
updatePreferences();
|
updatePreferences();
|
||||||
|
|
@ -81,13 +87,35 @@ function logout() {
|
||||||
session.destroy();
|
session.destroy();
|
||||||
router.push('/login');
|
router.push('/login');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function copyUserToken() {
|
||||||
|
copyText(session.getToken(), { label: 'components.userPanel.copyToken' });
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<QMenu anchor="bottom left">
|
<FetchData
|
||||||
|
url="Warehouses"
|
||||||
|
order="name"
|
||||||
|
@on-fetch="(data) => (warehousesData = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="Companies"
|
||||||
|
order="name"
|
||||||
|
@on-fetch="(data) => (companiesData = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="Accountings"
|
||||||
|
order="name"
|
||||||
|
@on-fetch="(data) => (accountBankData = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<QMenu anchor="bottom left" class="bg-vn-section-color">
|
||||||
<div class="row no-wrap q-pa-md">
|
<div class="row no-wrap q-pa-md">
|
||||||
<div class="column panel">
|
<div class="col column">
|
||||||
<div class="text-h6 q-mb-md">
|
<div class="text-h6 q-ma-sm q-mb-none">
|
||||||
{{ t('components.userPanel.settings') }}
|
{{ t('components.userPanel.settings') }}
|
||||||
</div>
|
</div>
|
||||||
<QToggle
|
<QToggle
|
||||||
|
|
@ -111,7 +139,7 @@ function logout() {
|
||||||
|
|
||||||
<QSeparator vertical inset class="q-mx-lg" />
|
<QSeparator vertical inset class="q-mx-lg" />
|
||||||
|
|
||||||
<div class="column items-center panel">
|
<div class="col column items-center q-mb-sm">
|
||||||
<QAvatar size="80px">
|
<QAvatar size="80px">
|
||||||
<QImg
|
<QImg
|
||||||
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
||||||
|
|
@ -122,8 +150,12 @@ function logout() {
|
||||||
<div class="text-subtitle1 q-mt-md">
|
<div class="text-subtitle1 q-mt-md">
|
||||||
<strong>{{ user.nickname }}</strong>
|
<strong>{{ user.nickname }}</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.name }}</div>
|
<div
|
||||||
|
class="text-subtitle3 text-grey-7 q-mb-xs copyText"
|
||||||
|
@click="copyUserToken()"
|
||||||
|
>
|
||||||
|
@{{ user.name }}
|
||||||
|
</div>
|
||||||
<QBtn
|
<QBtn
|
||||||
id="logout"
|
id="logout"
|
||||||
color="orange"
|
color="orange"
|
||||||
|
|
@ -133,14 +165,75 @@ function logout() {
|
||||||
icon="logout"
|
icon="logout"
|
||||||
@click="logout()"
|
@click="logout()"
|
||||||
v-close-popup
|
v-close-popup
|
||||||
|
dense
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<QSeparator inset class="q-mx-lg" />
|
||||||
|
<div class="col q-gutter-xs q-pa-md">
|
||||||
|
<VnRow>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('components.userPanel.localWarehouse')"
|
||||||
|
v-model="user.localWarehouseFk"
|
||||||
|
:options="warehousesData"
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
/>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('components.userPanel.localBank')"
|
||||||
|
v-model="user.localBankFk"
|
||||||
|
:options="accountBankData"
|
||||||
|
option-label="bank"
|
||||||
|
option-value="id"
|
||||||
|
>
|
||||||
|
<template #option="{ itemProps, opt }">
|
||||||
|
<QItem v-bind="itemProps">
|
||||||
|
<QItemSection>
|
||||||
|
<QItemLabel>
|
||||||
|
{{ `${opt.id}: ${opt.bank}` }}
|
||||||
|
</QItemLabel>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</template>
|
||||||
|
</VnSelect>
|
||||||
|
</VnRow>
|
||||||
|
<VnRow>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('components.userPanel.localCompany')"
|
||||||
|
hide-selected
|
||||||
|
v-model="user.companyFk"
|
||||||
|
:options="companiesData"
|
||||||
|
option-label="code"
|
||||||
|
option-value="id"
|
||||||
|
/>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('components.userPanel.userWarehouse')"
|
||||||
|
hide-selected
|
||||||
|
v-model="user.warehouseFk"
|
||||||
|
:options="warehousesData"
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
<VnRow>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('components.userPanel.userCompany')"
|
||||||
|
hide-selected
|
||||||
|
v-model="user.companyFk"
|
||||||
|
:options="companiesData"
|
||||||
|
option-label="code"
|
||||||
|
option-value="id"
|
||||||
|
style="flex: 0"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
</div>
|
||||||
</QMenu>
|
</QMenu>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.panel {
|
.copyText {
|
||||||
width: 150px;
|
&:hover {
|
||||||
|
cursor: alias;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { useDialogPluginComponent } from 'quasar';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useDialogPluginComponent } from 'quasar';
|
||||||
|
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
|
|
@ -24,12 +26,13 @@ const address = ref(props.data.address);
|
||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
|
|
||||||
async function confirm() {
|
async function confirm() {
|
||||||
const response = { address };
|
const response = { address: address.value };
|
||||||
|
|
||||||
if (props.promise) {
|
if (props.promise) {
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
|
const { address: _address, ...restData } = props.data;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
Object.assign(response, props.data);
|
Object.assign(response, restData);
|
||||||
await props.promise(response);
|
await props.promise(response);
|
||||||
} finally {
|
} finally {
|
||||||
isLoading.value = false;
|
isLoading.value = false;
|
||||||
|
|
@ -40,7 +43,7 @@ async function confirm() {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<QDialog ref="dialogRef" persistent>
|
<QDialog ref="dialogRef">
|
||||||
<QCard class="q-pa-sm">
|
<QCard class="q-pa-sm">
|
||||||
<QCardSection class="row items-center q-pb-none">
|
<QCardSection class="row items-center q-pb-none">
|
||||||
<span class="text-h6 text-grey">{{ t('Send email notification') }}</span>
|
<span class="text-h6 text-grey">{{ t('Send email notification') }}</span>
|
||||||
|
|
@ -51,7 +54,7 @@ async function confirm() {
|
||||||
{{ t('The notification will be sent to the following address') }}
|
{{ t('The notification will be sent to the following address') }}
|
||||||
</QCardSection>
|
</QCardSection>
|
||||||
<QCardSection class="q-pt-none">
|
<QCardSection class="q-pt-none">
|
||||||
<QInput dense v-model="address" rounded outlined autofocus />
|
<VnInput v-model="address" is-outlined autofocus />
|
||||||
</QCardSection>
|
</QCardSection>
|
||||||
<QCardActions align="right">
|
<QCardActions align="right">
|
||||||
<QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
|
<QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,156 @@
|
||||||
|
<script setup>
|
||||||
|
import {useDialogPluginComponent} from 'quasar';
|
||||||
|
import {useI18n} from 'vue-i18n';
|
||||||
|
import {computed, ref} from 'vue';
|
||||||
|
import VnInput from 'components/common/VnInput.vue';
|
||||||
|
import axios from 'axios';
|
||||||
|
import useNotify from "composables/useNotify";
|
||||||
|
|
||||||
|
const MESSAGE_MAX_LENGTH = 160;
|
||||||
|
|
||||||
|
const {t} = useI18n();
|
||||||
|
const {notify} = useNotify();
|
||||||
|
const props = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
url: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
destination: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
destinationFk: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits([...useDialogPluginComponent.emits, 'sent']);
|
||||||
|
const {dialogRef, onDialogHide} = useDialogPluginComponent();
|
||||||
|
|
||||||
|
const smsRules = [
|
||||||
|
(val) => (val && val.length > 0) || t("The message can't be empty"),
|
||||||
|
(val) =>
|
||||||
|
(val && new Blob([val]).size <= MESSAGE_MAX_LENGTH) ||
|
||||||
|
t("The message it's too long"),
|
||||||
|
];
|
||||||
|
|
||||||
|
const message = ref('');
|
||||||
|
|
||||||
|
const charactersRemaining = computed(
|
||||||
|
() => MESSAGE_MAX_LENGTH - new Blob([message.value]).size
|
||||||
|
);
|
||||||
|
|
||||||
|
const charactersChipColor = computed(() => {
|
||||||
|
if (charactersRemaining.value < 0) {
|
||||||
|
return 'negative';
|
||||||
|
}
|
||||||
|
if (charactersRemaining.value <= 25) {
|
||||||
|
return 'warning';
|
||||||
|
}
|
||||||
|
return 'primary';
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = async () => {
|
||||||
|
if (!props.destination) {
|
||||||
|
throw new Error(`The destination can't be empty`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!message.value) {
|
||||||
|
throw new Error(`The message can't be empty`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (charactersRemaining.value < 0) {
|
||||||
|
throw new Error(`The message it's too long`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await axios.post(props.url, {
|
||||||
|
destination: props.destination,
|
||||||
|
destinationFk: props.destinationFk,
|
||||||
|
message: message.value,
|
||||||
|
...props.data,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.data) {
|
||||||
|
emit('sent', response.data);
|
||||||
|
notify('globals.smsSent', 'positive');
|
||||||
|
}
|
||||||
|
emit('ok', response.data);
|
||||||
|
emit('hide', response.data);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<QDialog ref="dialogRef" @hide="onDialogHide">
|
||||||
|
<QCard class="full-width dialog">
|
||||||
|
<QCardSection class="row">
|
||||||
|
<span v-if="title" class="text-h6">{{ title }}</span>
|
||||||
|
<QSpace />
|
||||||
|
<QBtn icon="close" flat round dense v-close-popup />
|
||||||
|
</QCardSection>
|
||||||
|
<QForm @submit="onSubmit">
|
||||||
|
<QCardSection>
|
||||||
|
<VnInput
|
||||||
|
v-model="message"
|
||||||
|
type="textarea"
|
||||||
|
:rules="smsRules"
|
||||||
|
:label="t('Message')"
|
||||||
|
:placeholder="t('Message')"
|
||||||
|
:rows="5"
|
||||||
|
required
|
||||||
|
clearable
|
||||||
|
no-error-icon
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<QIcon name="info">
|
||||||
|
<QTooltip>
|
||||||
|
{{
|
||||||
|
t(
|
||||||
|
'Special characters like accents counts as a multiple'
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
</template>
|
||||||
|
</VnInput>
|
||||||
|
<p class="q-mb-none q-mt-md">
|
||||||
|
{{ t('Characters remaining') }}:
|
||||||
|
<QChip :color="charactersChipColor">
|
||||||
|
{{ charactersRemaining }}
|
||||||
|
</QChip>
|
||||||
|
</p>
|
||||||
|
</QCardSection>
|
||||||
|
<QCardActions align="right">
|
||||||
|
<QBtn type="button" flat v-close-popup class="text-primary">
|
||||||
|
{{ t('globals.cancel') }}
|
||||||
|
</QBtn>
|
||||||
|
<QBtn type="submit" color="primary">{{ t('Send') }}</QBtn>
|
||||||
|
</QCardActions>
|
||||||
|
</QForm>
|
||||||
|
</QCard>
|
||||||
|
</QDialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dialog {
|
||||||
|
max-width: 450px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Message: Mensaje
|
||||||
|
Send: Enviar
|
||||||
|
Characters remaining: Carácteres restantes
|
||||||
|
Special characters like accents counts as a multiple: Carácteres especiales como los acentos cuentan como varios
|
||||||
|
The destination can't be empty: El destinatario no puede estar vacio
|
||||||
|
The message can't be empty: El mensaje no puede estar vacio
|
||||||
|
The message it's too long: El mensaje es demasiado largo
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,192 @@
|
||||||
|
<script setup>
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { ref, computed, onMounted } from 'vue';
|
||||||
|
|
||||||
|
import { useState } from 'src/composables/useState';
|
||||||
|
import axios from 'axios';
|
||||||
|
import useNotify from 'src/composables/useNotify.js';
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
allColumns: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
tableCode: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
labelsTraductionsPath: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['onConfigSaved']);
|
||||||
|
|
||||||
|
const { notify } = useNotify();
|
||||||
|
const state = useState();
|
||||||
|
const { t } = useI18n();
|
||||||
|
const popupProxyRef = ref(null);
|
||||||
|
const user = state.getUser();
|
||||||
|
const initialUserConfigViewData = ref(null);
|
||||||
|
|
||||||
|
const formattedCols = ref([]);
|
||||||
|
|
||||||
|
const areAllChecksMarked = computed(() => {
|
||||||
|
return formattedCols.value.every((col) => col.active);
|
||||||
|
});
|
||||||
|
|
||||||
|
const setUserConfigViewData = (data) => {
|
||||||
|
if (!data) return;
|
||||||
|
// Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
|
||||||
|
formattedCols.value = $props.allColumns.map((col) => ({
|
||||||
|
name: col,
|
||||||
|
active: data[col] == undefined ? true : data[col],
|
||||||
|
}));
|
||||||
|
emitSavedConfig();
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleMarkAll = (val) => {
|
||||||
|
formattedCols.value.forEach((col) => (col.active = val));
|
||||||
|
};
|
||||||
|
|
||||||
|
const getConfig = async (url, filter) => {
|
||||||
|
const response = await axios.get(url, {
|
||||||
|
params: { filter: filter },
|
||||||
|
});
|
||||||
|
return response.data && response.data.length > 0 ? response.data[0] : null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchViewConfigData = async () => {
|
||||||
|
try {
|
||||||
|
const userConfigFilter = {
|
||||||
|
where: { tableCode: $props.tableCode, userFk: user.id },
|
||||||
|
};
|
||||||
|
const userConfig = await getConfig('UserConfigViews', userConfigFilter);
|
||||||
|
|
||||||
|
if (userConfig) {
|
||||||
|
initialUserConfigViewData.value = userConfig;
|
||||||
|
setUserConfigViewData(userConfig.configuration);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultConfigFilter = { where: { tableCode: $props.tableCode } };
|
||||||
|
const defaultConfig = await getConfig('DefaultViewConfigs', defaultConfigFilter);
|
||||||
|
|
||||||
|
if (defaultConfig) {
|
||||||
|
setUserConfigViewData(defaultConfig.columns);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.err('Error fetching config view data', err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveConfig = async () => {
|
||||||
|
try {
|
||||||
|
const params = {};
|
||||||
|
const configuration = {};
|
||||||
|
|
||||||
|
formattedCols.value.forEach((col) => {
|
||||||
|
const { name, active } = col;
|
||||||
|
configuration[name] = active;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Si existe una view config del usuario hacemos un update si no la creamos
|
||||||
|
if (initialUserConfigViewData.value) {
|
||||||
|
params.updates = [
|
||||||
|
{
|
||||||
|
data: {
|
||||||
|
configuration: configuration,
|
||||||
|
},
|
||||||
|
where: {
|
||||||
|
id: initialUserConfigViewData.value.id,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
params.creates = [
|
||||||
|
{
|
||||||
|
userFk: user.value.id,
|
||||||
|
tableCode: $props.tableCode,
|
||||||
|
tableConfig: $props.tableCode,
|
||||||
|
configuration: configuration,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await axios.post('UserConfigViews/crud', params);
|
||||||
|
if (response.data && response.data[0]) {
|
||||||
|
initialUserConfigViewData.value = response.data[0];
|
||||||
|
}
|
||||||
|
emitSavedConfig();
|
||||||
|
notify('globals.dataSaved', 'positive');
|
||||||
|
popupProxyRef.value.hide();
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error saving user view config', err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const emitSavedConfig = () => {
|
||||||
|
const activeColumns = formattedCols.value
|
||||||
|
.filter((col) => col.active)
|
||||||
|
.map((col) => col.name);
|
||||||
|
emit('onConfigSaved', activeColumns);
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchViewConfigData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<QBtn color="primary" icon="view_column">
|
||||||
|
<QPopupProxy ref="popupProxyRef">
|
||||||
|
<QCard class="column q-pa-md">
|
||||||
|
<QIcon name="info" size="sm" class="info-icon">
|
||||||
|
<QTooltip>{{ t('Check the columns you want to see') }}</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
<span class="text-body1 q-mb-sm">{{ t('Visible columns') }}</span>
|
||||||
|
<QCheckbox
|
||||||
|
:label="t('Tick all')"
|
||||||
|
:model-value="areAllChecksMarked"
|
||||||
|
@update:model-value="toggleMarkAll($event)"
|
||||||
|
class="q-mb-sm"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-if="allColumns.length > 0 && formattedCols.length > 0"
|
||||||
|
class="checks-layout"
|
||||||
|
>
|
||||||
|
<QCheckbox
|
||||||
|
v-for="(col, index) in allColumns"
|
||||||
|
:key="index"
|
||||||
|
:label="t(`${$props.labelsTraductionsPath + '.' + col}`)"
|
||||||
|
v-model="formattedCols[index].active"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<QBtn class="full-width q-mt-md" color="primary" @click="saveConfig()">{{
|
||||||
|
t('globals.save')
|
||||||
|
}}</QBtn>
|
||||||
|
</QCard>
|
||||||
|
</QPopupProxy>
|
||||||
|
<QTooltip>{{ t('Visible columns') }}</QTooltip>
|
||||||
|
</QBtn>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.info-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checks-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 200px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Check the columns you want to see: Marca las columnas que quieres ver
|
||||||
|
Visible columns: Columnas visibles
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, watch } from 'vue';
|
||||||
|
import { QInput } from 'quasar';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue', 'accountShortToStandard']);
|
||||||
|
|
||||||
|
let internalValue = ref(props.modelValue);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
(newVal) => {
|
||||||
|
internalValue.value = newVal;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => internalValue.value,
|
||||||
|
(newVal) => {
|
||||||
|
emit('update:modelValue', newVal);
|
||||||
|
accountShortToStandard();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
function accountShortToStandard() {
|
||||||
|
internalValue.value = internalValue.value.replace(
|
||||||
|
'.',
|
||||||
|
'0'.repeat(11 - internalValue.value.length)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-input v-model="internalValue" />
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
<script setup>
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { ref, watchEffect } from 'vue';
|
||||||
|
import { useQuasar } from 'quasar';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useCamelCase } from 'src/composables/useCamelCase';
|
||||||
|
|
||||||
|
const { currentRoute } = useRouter();
|
||||||
|
const { screen } = useQuasar();
|
||||||
|
const { t, te } = useI18n();
|
||||||
|
|
||||||
|
let matched = ref([]);
|
||||||
|
let breadcrumbs = ref([]);
|
||||||
|
let root = ref(null);
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
matched.value = currentRoute.value.matched.filter(
|
||||||
|
(matched) => Object.keys(matched.meta).length
|
||||||
|
);
|
||||||
|
breadcrumbs.value.length = 0;
|
||||||
|
|
||||||
|
if (matched.value[0].name != 'Dashboard') {
|
||||||
|
root.value = useCamelCase(matched.value[0].path.substring(1).toLowerCase());
|
||||||
|
|
||||||
|
for (let index in matched.value)
|
||||||
|
breadcrumbs.value.push(getBreadcrumb(matched.value[index]));
|
||||||
|
|
||||||
|
breadcrumbs.value[breadcrumbs.value.length - 1].path = undefined;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function getBreadcrumb(param) {
|
||||||
|
const breadcrumb = {
|
||||||
|
icon: param.meta.icon,
|
||||||
|
path: param.path,
|
||||||
|
root: root.value,
|
||||||
|
locale: t(`globals.pageTitles.${param.meta.title}`),
|
||||||
|
};
|
||||||
|
|
||||||
|
if (screen.gt.sm) {
|
||||||
|
breadcrumb.name = param.name;
|
||||||
|
breadcrumb.title = useCamelCase(param.meta.title);
|
||||||
|
}
|
||||||
|
|
||||||
|
const moduleLocale = `${breadcrumb.root}.pageTitles.${breadcrumb.title}`;
|
||||||
|
if (te(moduleLocale)) breadcrumb.locale = t(moduleLocale);
|
||||||
|
|
||||||
|
return breadcrumb;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<QBreadcrumbs v-if="breadcrumbs.length && $q.screen.gt.sm" class="q-pa-xs">
|
||||||
|
<QBreadcrumbsEl
|
||||||
|
v-for="(breadcrumb, index) of breadcrumbs"
|
||||||
|
:key="index"
|
||||||
|
:icon="breadcrumb.icon"
|
||||||
|
:label="breadcrumb.locale"
|
||||||
|
:to="breadcrumb.path"
|
||||||
|
/>
|
||||||
|
</QBreadcrumbs>
|
||||||
|
<QBreadcrumbs v-else class="q-pa-xs">
|
||||||
|
<QBreadcrumbsEl
|
||||||
|
v-for="(breadcrumb, index) of breadcrumbs"
|
||||||
|
:key="index"
|
||||||
|
:icon="breadcrumb.icon"
|
||||||
|
:to="breadcrumb.path"
|
||||||
|
/>
|
||||||
|
</QBreadcrumbs>
|
||||||
|
</template>
|
||||||
|
<style lang="scss">
|
||||||
|
.q-breadcrumbs {
|
||||||
|
&__el,
|
||||||
|
> div {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
&--last,
|
||||||
|
&__separator {
|
||||||
|
color: var(--vn-label-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: $breakpoint-md) {
|
||||||
|
.q-breadcrumbs {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&__el:not(:first-child):not(:last-child) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
<script setup>
|
||||||
|
import { onBeforeMount, computed } from 'vue';
|
||||||
|
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useArrayData } from 'src/composables/useArrayData';
|
||||||
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
|
import useCardSize from 'src/composables/useCardSize';
|
||||||
|
import VnSubToolbar from '../ui/VnSubToolbar.vue';
|
||||||
|
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
||||||
|
import LeftMenu from 'components/LeftMenu.vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
dataKey: { type: String, required: true },
|
||||||
|
baseUrl: { type: String, default: undefined },
|
||||||
|
customUrl: { type: String, default: undefined },
|
||||||
|
filter: { type: Object, default: () => {} },
|
||||||
|
descriptor: { type: Object, required: true },
|
||||||
|
searchbarDataKey: { type: String, default: undefined },
|
||||||
|
searchbarUrl: { type: String, default: undefined },
|
||||||
|
searchbarLabel: { type: String, default: '' },
|
||||||
|
searchbarInfo: { type: String, default: '' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const stateStore = useStateStore();
|
||||||
|
const route = useRoute();
|
||||||
|
const url = computed(() => {
|
||||||
|
if (props.baseUrl) return `${props.baseUrl}/${route.params.id}`;
|
||||||
|
return props.customUrl;
|
||||||
|
});
|
||||||
|
|
||||||
|
const arrayData = useArrayData(props.dataKey, {
|
||||||
|
url: url.value,
|
||||||
|
filter: props.filter,
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeMount(async () => {
|
||||||
|
if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
|
||||||
|
await arrayData.fetch({ append: false });
|
||||||
|
});
|
||||||
|
|
||||||
|
if (props.baseUrl) {
|
||||||
|
onBeforeRouteUpdate(async (to, from) => {
|
||||||
|
if (to.params.id !== from.params.id) {
|
||||||
|
arrayData.store.url = `${props.baseUrl}/${route.params.id}`;
|
||||||
|
await arrayData.fetch({ append: false });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Teleport
|
||||||
|
to="#searchbar"
|
||||||
|
v-if="stateStore.isHeaderMounted() && props.searchbarDataKey"
|
||||||
|
>
|
||||||
|
<VnSearchbar
|
||||||
|
:data-key="props.searchbarDataKey"
|
||||||
|
:url="props.searchbarUrl"
|
||||||
|
:label="t(props.searchbarLabel)"
|
||||||
|
:info="t(props.searchbarInfo)"
|
||||||
|
/>
|
||||||
|
</Teleport>
|
||||||
|
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
|
||||||
|
<QScrollArea class="fit">
|
||||||
|
<component :is="descriptor" />
|
||||||
|
<QSeparator />
|
||||||
|
<LeftMenu source="card" />
|
||||||
|
</QScrollArea>
|
||||||
|
</QDrawer>
|
||||||
|
<QPageContainer>
|
||||||
|
<QPage>
|
||||||
|
<VnSubToolbar />
|
||||||
|
<div :class="[useCardSize(), $attrs.class]">
|
||||||
|
<RouterView />
|
||||||
|
</div>
|
||||||
|
</QPage>
|
||||||
|
</QPageContainer>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useCapitalize } from 'src/composables/useCapitalize';
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: { type: [String, Number], default: '' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const emit = defineEmits(['update:modelValue']);
|
||||||
|
|
||||||
|
const amount = computed({
|
||||||
|
get() {
|
||||||
|
return props.modelValue;
|
||||||
|
},
|
||||||
|
set(val) {
|
||||||
|
emit('update:modelValue', val);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<VnInput
|
||||||
|
v-model="amount"
|
||||||
|
type="number"
|
||||||
|
step="any"
|
||||||
|
:label="useCapitalize(t('amount'))"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
amount: importe
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,210 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
import FormModelPopup from 'components/FormModelPopup.vue';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const { t } = useI18n();
|
||||||
|
const emit = defineEmits(['onDataSaved']);
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
model: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
defaultDmsCode: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
formInitialData: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
url: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const warehouses = ref();
|
||||||
|
const companies = ref();
|
||||||
|
const dmsTypes = ref();
|
||||||
|
const allowedContentTypes = ref();
|
||||||
|
const inputFileRef = ref();
|
||||||
|
const dms = ref({});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
defaultData();
|
||||||
|
if (!$props.formInitialData)
|
||||||
|
dms.value.description = t($props.model + 'Description', dms.value);
|
||||||
|
});
|
||||||
|
function onFileChange(files) {
|
||||||
|
dms.value.hasFileAttached = !!files;
|
||||||
|
dms.value.file = files?.name;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapperDms(data) {
|
||||||
|
const formData = new FormData();
|
||||||
|
const { files } = data;
|
||||||
|
if (files) formData.append(files?.name, files);
|
||||||
|
delete data.files;
|
||||||
|
|
||||||
|
const dms = {
|
||||||
|
hasFile: !!data.hasFile,
|
||||||
|
hasFileAttached: data.hasFileAttached,
|
||||||
|
reference: data.reference,
|
||||||
|
warehouseId: data.warehouseFk,
|
||||||
|
companyId: data.companyFk,
|
||||||
|
dmsTypeId: data.dmsTypeFk,
|
||||||
|
description: data.description,
|
||||||
|
};
|
||||||
|
return [formData, { params: dms }];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getUrl() {
|
||||||
|
if ($props.url) return $props.url;
|
||||||
|
if ($props.formInitialData) return 'dms/' + $props.formInitialData.id + '/updateFile';
|
||||||
|
return `${$props.model}/${route.params.id}/uploadFile`;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function save() {
|
||||||
|
const body = mapperDms(dms.value);
|
||||||
|
const response = await axios.post(getUrl(), body[0], body[1]);
|
||||||
|
emit('onDataSaved', body[1].params, response);
|
||||||
|
}
|
||||||
|
|
||||||
|
function defaultData() {
|
||||||
|
if ($props.formInitialData) return (dms.value = $props.formInitialData);
|
||||||
|
return addDefaultData({
|
||||||
|
reference: route.params.id,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function setDmsTypes(data) {
|
||||||
|
dmsTypes.value = data;
|
||||||
|
if (!$props.formInitialData && $props.defaultDmsCode) {
|
||||||
|
const { id } = data.find((dmsType) => dmsType.code == $props.defaultDmsCode);
|
||||||
|
addDefaultData({ dmsTypeFk: id });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addDefaultData(data) {
|
||||||
|
Object.assign(dms.value, data);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<FetchData url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
|
||||||
|
<FetchData url="Companies" @on-fetch="(data) => (companies = data)" auto-load />
|
||||||
|
<FetchData url="DmsTypes" @on-fetch="setDmsTypes" auto-load />
|
||||||
|
<FetchData
|
||||||
|
url="DmsContainers/allowedContentTypes"
|
||||||
|
@on-fetch="(data) => (allowedContentTypes = data.join(','))"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="UserConfigs/getUserConfig"
|
||||||
|
@on-fetch="addDefaultData"
|
||||||
|
:auto-load="!$props.formInitialData"
|
||||||
|
/>
|
||||||
|
<FormModelPopup
|
||||||
|
:title="formInitialData ? t('globals.edit') : t('globals.create')"
|
||||||
|
model="dms"
|
||||||
|
:form-initial-data="formInitialData ?? {}"
|
||||||
|
:save-fn="save"
|
||||||
|
>
|
||||||
|
<template #form-inputs>
|
||||||
|
<div class="q-gutter-y-ms">
|
||||||
|
<VnRow>
|
||||||
|
<VnInput :label="t('globals.reference')" v-model="dms.reference" />
|
||||||
|
<VnSelect
|
||||||
|
:label="t('globals.company')"
|
||||||
|
v-model="dms.companyFk"
|
||||||
|
:options="companies"
|
||||||
|
option-value="id"
|
||||||
|
option-label="code"
|
||||||
|
input-debounce="0"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
<VnRow>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('globals.warehouse')"
|
||||||
|
v-model="dms.warehouseFk"
|
||||||
|
:options="warehouses"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
/>
|
||||||
|
<VnSelect
|
||||||
|
:label="t('globals.type')"
|
||||||
|
v-model="dms.dmsTypeFk"
|
||||||
|
:options="dmsTypes"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
<QInput
|
||||||
|
:label="t('globals.description')"
|
||||||
|
v-model="dms.description"
|
||||||
|
type="textarea"
|
||||||
|
/>
|
||||||
|
<QFile
|
||||||
|
ref="inputFileRef"
|
||||||
|
:label="t('entry.buys.file')"
|
||||||
|
v-model="dms.files"
|
||||||
|
:multiple="false"
|
||||||
|
:accept="allowedContentTypes"
|
||||||
|
@update:model-value="onFileChange(dms.files)"
|
||||||
|
class="required"
|
||||||
|
:display-value="dms.file"
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<QIcon
|
||||||
|
name="vn:attach"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="inputFileRef.pickFiles()"
|
||||||
|
>
|
||||||
|
<QTooltip>{{ t('globals.selectFile') }}</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
<QIcon name="info" class="cursor-pointer">
|
||||||
|
<QTooltip>{{
|
||||||
|
t('contentTypesInfo', { allowedContentTypes })
|
||||||
|
}}</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
</template>
|
||||||
|
</QFile>
|
||||||
|
<QCheckbox
|
||||||
|
v-model="dms.hasFile"
|
||||||
|
:label="t('Generate identifier for original file')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</FormModelPopup>
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
.q-gutter-y-ms {
|
||||||
|
display: grid;
|
||||||
|
row-gap: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<i18n>
|
||||||
|
en:
|
||||||
|
contentTypesInfo: Allowed file types {allowedContentTypes}
|
||||||
|
EntryDmsDescription: Reference {reference}
|
||||||
|
WorkersDescription: Working of employee id {reference}
|
||||||
|
SupplierDmsDescription: Reference {reference}
|
||||||
|
es:
|
||||||
|
Generate identifier for original file: Generar identificador para archivo original
|
||||||
|
contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes}
|
||||||
|
EntryDmsDescription: Referencia {reference}
|
||||||
|
WorkersDescription: Laboral del empleado {reference}
|
||||||
|
SupplierDmsDescription: Referencia {reference}
|
||||||
|
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,395 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
import { useQuasar, QCheckbox, QBtn, QInput } from 'quasar';
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||||
|
import VnDms from 'src/components/common/VnDms.vue';
|
||||||
|
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||||
|
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||||
|
import VnUserLink from '../ui/VnUserLink.vue';
|
||||||
|
import { downloadFile } from 'src/composables/downloadFile';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const quasar = useQuasar();
|
||||||
|
const { t } = useI18n();
|
||||||
|
const rows = ref();
|
||||||
|
const dmsRef = ref();
|
||||||
|
const formDialog = ref({});
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
model: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
updateModel: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
deleteModel: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
downloadModel: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
defaultDmsCode: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
filter: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const dmsFilter = {
|
||||||
|
include: {
|
||||||
|
relation: 'dms',
|
||||||
|
scope: {
|
||||||
|
fields: [
|
||||||
|
'dmsTypeFk',
|
||||||
|
'reference',
|
||||||
|
'hardCopyNumber',
|
||||||
|
'workerFk',
|
||||||
|
'description',
|
||||||
|
'hasFile',
|
||||||
|
'file',
|
||||||
|
'created',
|
||||||
|
'companyFk',
|
||||||
|
'warehouseFk',
|
||||||
|
],
|
||||||
|
include: [
|
||||||
|
{
|
||||||
|
relation: 'dmsType',
|
||||||
|
scope: {
|
||||||
|
fields: ['name'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
relation: 'worker',
|
||||||
|
scope: {
|
||||||
|
fields: ['id'],
|
||||||
|
include: {
|
||||||
|
relation: 'user',
|
||||||
|
scope: {
|
||||||
|
fields: ['name'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
where: { [$props.filter]: route.params.id },
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = computed(() => [
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
field: 'id',
|
||||||
|
label: t('globals.id'),
|
||||||
|
name: 'id',
|
||||||
|
component: 'span',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
field: 'type',
|
||||||
|
label: t('globals.type'),
|
||||||
|
name: 'type',
|
||||||
|
component: QInput,
|
||||||
|
props: (prop) => ({
|
||||||
|
readonly: true,
|
||||||
|
borderless: true,
|
||||||
|
'model-value': prop.row.dmsType?.name,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
field: 'hardCopyNumber',
|
||||||
|
label: t('globals.order'),
|
||||||
|
name: 'order',
|
||||||
|
component: 'span',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
field: 'reference',
|
||||||
|
label: t('globals.reference'),
|
||||||
|
name: 'reference',
|
||||||
|
component: 'span',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
field: 'description',
|
||||||
|
label: t('globals.description'),
|
||||||
|
name: 'description',
|
||||||
|
component: 'span',
|
||||||
|
props: (prop) => ({ value: prop.value?.toUpperCase() }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
field: 'hasFile',
|
||||||
|
label: t('globals.original'),
|
||||||
|
name: 'hasFile',
|
||||||
|
component: QCheckbox,
|
||||||
|
props: (prop) => ({
|
||||||
|
disable: true,
|
||||||
|
'model-value': Boolean(prop.value),
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
field: 'file',
|
||||||
|
label: t('globals.file'),
|
||||||
|
name: 'file',
|
||||||
|
component: 'span',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
field: 'worker',
|
||||||
|
label: t('globals.worker'),
|
||||||
|
name: 'worker',
|
||||||
|
component: VnUserLink,
|
||||||
|
props: (prop) => ({
|
||||||
|
name: prop.row.worker?.user?.name.toLowerCase(),
|
||||||
|
workerId: prop.row.worker?.id,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
field: 'created',
|
||||||
|
label: t('globals.created'),
|
||||||
|
name: 'created',
|
||||||
|
component: VnInputDate,
|
||||||
|
props: (prop) => ({
|
||||||
|
disable: true,
|
||||||
|
'model-value': prop.row.created,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'options',
|
||||||
|
name: 'options',
|
||||||
|
components: [
|
||||||
|
{
|
||||||
|
component: QBtn,
|
||||||
|
name: 'download',
|
||||||
|
isDocuware: true,
|
||||||
|
props: () => ({
|
||||||
|
icon: 'cloud_download',
|
||||||
|
flat: true,
|
||||||
|
color: 'primary',
|
||||||
|
}),
|
||||||
|
click: (prop) =>
|
||||||
|
downloadFile(
|
||||||
|
prop.row.id,
|
||||||
|
$props.downloadModel,
|
||||||
|
undefined,
|
||||||
|
prop.row.download
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: QBtn,
|
||||||
|
name: 'edit',
|
||||||
|
external: false,
|
||||||
|
props: () => ({
|
||||||
|
icon: 'edit',
|
||||||
|
flat: true,
|
||||||
|
color: 'primary',
|
||||||
|
}),
|
||||||
|
click: (prop) => showFormDialog(prop.row),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: QBtn,
|
||||||
|
name: 'delete',
|
||||||
|
external: false,
|
||||||
|
props: () => ({
|
||||||
|
icon: 'delete',
|
||||||
|
flat: true,
|
||||||
|
color: 'primary',
|
||||||
|
}),
|
||||||
|
click: (prop) => deleteDms(prop.row.id),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: QBtn,
|
||||||
|
name: 'open',
|
||||||
|
external: true,
|
||||||
|
props: () => ({
|
||||||
|
icon: 'open_in_new',
|
||||||
|
flat: true,
|
||||||
|
color: 'primary',
|
||||||
|
}),
|
||||||
|
click: (prop) => open(prop.row.url),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
function setData(data) {
|
||||||
|
const newData = data.map((value) => value.dms || value);
|
||||||
|
newData.sort((a, b) => new Date(b.created) - new Date(a.created));
|
||||||
|
rows.value = newData;
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteDms(dmsFk) {
|
||||||
|
quasar
|
||||||
|
.dialog({
|
||||||
|
component: VnConfirm,
|
||||||
|
componentProps: {
|
||||||
|
title: t('globals.confirmDeletion'),
|
||||||
|
message: t('globals.confirmDeletionMessage'),
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.onOk(async () => {
|
||||||
|
await axios.post(`${$props.deleteModel ?? $props.model}/${dmsFk}/removeFile`);
|
||||||
|
const index = rows.value.findIndex((row) => row.id == dmsFk);
|
||||||
|
rows.value.splice(index, 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function showFormDialog(dms) {
|
||||||
|
if (dms) dms = parseDms(dms);
|
||||||
|
formDialog.value = {
|
||||||
|
show: true,
|
||||||
|
dms,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseDms(data) {
|
||||||
|
for (let prop in data) {
|
||||||
|
if (prop.endsWith('Fk')) data[prop.replace('Fk', 'Id')] = data[prop];
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function open(url) {
|
||||||
|
window.open(url).focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function shouldRenderButton(button, isExternal = false) {
|
||||||
|
if (button.name == 'download') return true;
|
||||||
|
return button.external === isExternal;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<VnPaginate
|
||||||
|
ref="dmsRef"
|
||||||
|
:data-key="$props.model"
|
||||||
|
:url="$props.model"
|
||||||
|
:filter="dmsFilter"
|
||||||
|
:order="['dmsFk DESC']"
|
||||||
|
:auto-load="true"
|
||||||
|
@on-fetch="setData"
|
||||||
|
>
|
||||||
|
<template #body>
|
||||||
|
<QTable
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
class="full-width q-mt-md"
|
||||||
|
hide-bottom
|
||||||
|
row-key="clientFk"
|
||||||
|
:grid="$q.screen.lt.sm"
|
||||||
|
>
|
||||||
|
<template #body-cell="props">
|
||||||
|
<QTd :props="props">
|
||||||
|
<QTr :props="props">
|
||||||
|
<component
|
||||||
|
v-if="props.col.component"
|
||||||
|
:is="props.col.component"
|
||||||
|
v-bind="props.col.props && props.col.props(props)"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-if="props.col.component == 'span'"
|
||||||
|
style="white-space: wrap"
|
||||||
|
>{{ props.value }}</span
|
||||||
|
>
|
||||||
|
</component>
|
||||||
|
</QTr>
|
||||||
|
|
||||||
|
<div class="row no-wrap" v-if="props.col.name == 'options'">
|
||||||
|
<div v-for="button of props.col.components" :key="button.id">
|
||||||
|
<component
|
||||||
|
v-if="
|
||||||
|
shouldRenderButton(button, props.row.isDocuware)
|
||||||
|
"
|
||||||
|
:is="button.component"
|
||||||
|
v-bind="button.props(props)"
|
||||||
|
@click="button.click(props)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
<template #item="props">
|
||||||
|
<div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
|
||||||
|
<QCard
|
||||||
|
bordered
|
||||||
|
flat
|
||||||
|
@keyup.ctrl.enter.stop="claimDevelopmentForm?.saveChanges()"
|
||||||
|
>
|
||||||
|
<QSeparator />
|
||||||
|
<QList dense>
|
||||||
|
<QItem v-for="col in props.cols" :key="col.name">
|
||||||
|
<div v-if="col.name != 'options'" class="row">
|
||||||
|
<span class="labelColor">{{ col.label }}:</span>
|
||||||
|
<span>{{ col.value }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="col.name == 'options'" class="row">
|
||||||
|
<div
|
||||||
|
v-for="button of col.components"
|
||||||
|
:key="button.id"
|
||||||
|
class="row"
|
||||||
|
>
|
||||||
|
<component
|
||||||
|
v-if="
|
||||||
|
shouldRenderButton(
|
||||||
|
button.name,
|
||||||
|
props.row.isDocuware
|
||||||
|
)
|
||||||
|
"
|
||||||
|
:is="button.component"
|
||||||
|
v-bind="button.props(col)"
|
||||||
|
@click="button.click(col)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</QItem>
|
||||||
|
</QList>
|
||||||
|
</QCard>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</QTable>
|
||||||
|
</template>
|
||||||
|
</VnPaginate>
|
||||||
|
<QDialog v-model="formDialog.show">
|
||||||
|
<VnDms
|
||||||
|
:model="updateModel ?? model"
|
||||||
|
:default-dms-code="defaultDmsCode"
|
||||||
|
:form-initial-data="formDialog.dms"
|
||||||
|
@on-data-saved="dmsRef.fetch()"
|
||||||
|
:description="$props.description"
|
||||||
|
/>
|
||||||
|
</QDialog>
|
||||||
|
<QPageSticky position="bottom-right" :offset="[25, 25]">
|
||||||
|
<QBtn fab color="primary" icon="add" @click="showFormDialog()" />
|
||||||
|
</QPageSticky>
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
.q-gutter-y-ms {
|
||||||
|
display: grid;
|
||||||
|
row-gap: 20px;
|
||||||
|
}
|
||||||
|
.labelColor {
|
||||||
|
color: var(--vn-label-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<i18n>
|
||||||
|
en:
|
||||||
|
contentTypesInfo: Allowed file types {allowedContentTypes}
|
||||||
|
es:
|
||||||
|
contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes}
|
||||||
|
Generate identifier for original file: Generar identificador para archivo original
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
<script setup>
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
isOutlined: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
|
||||||
|
const vnInputRef = ref(null);
|
||||||
|
const value = computed({
|
||||||
|
get() {
|
||||||
|
return $props.modelValue;
|
||||||
|
},
|
||||||
|
set(value) {
|
||||||
|
emit('update:modelValue', value);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const hover = ref(false);
|
||||||
|
const styleAttrs = computed(() => {
|
||||||
|
return $props.isOutlined
|
||||||
|
? {
|
||||||
|
dense: true,
|
||||||
|
outlined: true,
|
||||||
|
rounded: true,
|
||||||
|
}
|
||||||
|
: {};
|
||||||
|
});
|
||||||
|
|
||||||
|
const onEnterPress = () => {
|
||||||
|
emit('keyup.enter');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleValue = (val = null) => {
|
||||||
|
value.value = val;
|
||||||
|
};
|
||||||
|
|
||||||
|
const focus = () => {
|
||||||
|
vnInputRef.value.focus();
|
||||||
|
};
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
focus,
|
||||||
|
});
|
||||||
|
|
||||||
|
const inputRules = [
|
||||||
|
(val) => {
|
||||||
|
const { min } = vnInputRef.value.$attrs;
|
||||||
|
if (min >= 0) if (Math.floor(val) < min) return t('inputMin', { value: min });
|
||||||
|
},
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
@mouseover="hover = true"
|
||||||
|
@mouseleave="hover = false"
|
||||||
|
:rules="$attrs.required ? [requiredFieldRule] : null"
|
||||||
|
>
|
||||||
|
<QInput
|
||||||
|
ref="vnInputRef"
|
||||||
|
v-model="value"
|
||||||
|
v-bind="{ ...$attrs, ...styleAttrs }"
|
||||||
|
:type="$attrs.type"
|
||||||
|
:class="{ required: $attrs.required }"
|
||||||
|
@keyup.enter="onEnterPress()"
|
||||||
|
:clearable="false"
|
||||||
|
:rules="inputRules"
|
||||||
|
:lazy-rules="true"
|
||||||
|
hide-bottom-space
|
||||||
|
>
|
||||||
|
<template v-if="$slots.prepend" #prepend>
|
||||||
|
<slot name="prepend" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #append>
|
||||||
|
<slot name="append" v-if="$slots.append" />
|
||||||
|
<QIcon
|
||||||
|
name="close"
|
||||||
|
size="xs"
|
||||||
|
v-if="hover && value"
|
||||||
|
@click="handleValue(null)"
|
||||||
|
></QIcon>
|
||||||
|
</template>
|
||||||
|
</QInput>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<i18n>
|
||||||
|
en:
|
||||||
|
inputMin: Must be more than {value}
|
||||||
|
es:
|
||||||
|
inputMin: Debe ser mayor a {value}
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,131 @@
|
||||||
|
<script setup>
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
import isValidDate from 'filters/isValidDate';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
readonly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
isOutlined: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
emitDateFormat: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const hover = ref(false);
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue']);
|
||||||
|
|
||||||
|
const joinDateAndTime = (date, time) => {
|
||||||
|
if (!date) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (!time) {
|
||||||
|
return new Date(date).toISOString();
|
||||||
|
}
|
||||||
|
const [year, month, day] = date.split('/');
|
||||||
|
return new Date(`${year}-${month}-${day}T${time}`).toISOString();
|
||||||
|
};
|
||||||
|
|
||||||
|
const time = computed(() => (props.modelValue ? props.modelValue.split('T')?.[1] : null));
|
||||||
|
const value = computed({
|
||||||
|
get() {
|
||||||
|
return props.modelValue;
|
||||||
|
},
|
||||||
|
set(value) {
|
||||||
|
emit(
|
||||||
|
'update:modelValue',
|
||||||
|
props.emitDateFormat ? new Date(value) : joinDateAndTime(value, time.value)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const isPopupOpen = ref(false);
|
||||||
|
|
||||||
|
const onDateUpdate = (date) => {
|
||||||
|
value.value = date;
|
||||||
|
isPopupOpen.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const padDate = (value) => value.toString().padStart(2, '0');
|
||||||
|
const formatDate = (dateString) => {
|
||||||
|
const date = new Date(dateString || '');
|
||||||
|
return `${date.getFullYear()}/${padDate(date.getMonth() + 1)}/${padDate(
|
||||||
|
date.getDate()
|
||||||
|
)}`;
|
||||||
|
};
|
||||||
|
const displayDate = (dateString) => {
|
||||||
|
if (!dateString || !isValidDate(dateString)) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
return new Date(dateString).toLocaleDateString([], {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const styleAttrs = computed(() => {
|
||||||
|
return props.isOutlined
|
||||||
|
? {
|
||||||
|
dense: true,
|
||||||
|
outlined: true,
|
||||||
|
rounded: true,
|
||||||
|
}
|
||||||
|
: {};
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div @mouseover="hover = true" @mouseleave="hover = false">
|
||||||
|
<QInput
|
||||||
|
class="vn-input-date"
|
||||||
|
readonly
|
||||||
|
:model-value="displayDate(value)"
|
||||||
|
v-bind="{ ...$attrs, ...styleAttrs }"
|
||||||
|
@click="isPopupOpen = true"
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<QIcon
|
||||||
|
name="close"
|
||||||
|
size="xs"
|
||||||
|
v-if="hover && value"
|
||||||
|
@click="onDateUpdate(null)"
|
||||||
|
></QIcon>
|
||||||
|
<QIcon name="event" class="cursor-pointer">
|
||||||
|
<QPopupProxy
|
||||||
|
v-model="isPopupOpen"
|
||||||
|
cover
|
||||||
|
transition-show="scale"
|
||||||
|
transition-hide="scale"
|
||||||
|
:no-parent-event="props.readonly"
|
||||||
|
>
|
||||||
|
<QDate
|
||||||
|
:today-btn="true"
|
||||||
|
:model-value="formatDate(value)"
|
||||||
|
@update:model-value="onDateUpdate"
|
||||||
|
/>
|
||||||
|
</QPopupProxy>
|
||||||
|
</QIcon>
|
||||||
|
</template>
|
||||||
|
</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>
|
||||||
|
|
@ -0,0 +1,125 @@
|
||||||
|
<script setup>
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import isValidDate from 'filters/isValidDate';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
readonly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
isOutlined: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const { t } = useI18n();
|
||||||
|
const emit = defineEmits(['update:modelValue']);
|
||||||
|
|
||||||
|
const value = computed({
|
||||||
|
get() {
|
||||||
|
return props.modelValue;
|
||||||
|
},
|
||||||
|
set(value) {
|
||||||
|
const [hours, minutes] = value.split(':');
|
||||||
|
const date = new Date(props.modelValue);
|
||||||
|
date.setHours(Number.parseInt(hours) || 0, Number.parseInt(minutes) || 0, 0, 0);
|
||||||
|
emit('update:modelValue', value ? date.toISOString() : null);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const isPopupOpen = ref(false);
|
||||||
|
const onDateUpdate = (date) => {
|
||||||
|
internalValue.value = date;
|
||||||
|
};
|
||||||
|
|
||||||
|
const save = () => {
|
||||||
|
value.value = internalValue.value;
|
||||||
|
};
|
||||||
|
const formatTime = (dateString) => {
|
||||||
|
if (!dateString || !isValidDate(dateString)) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
const date = new Date(dateString || '');
|
||||||
|
return date.toLocaleTimeString([], {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const internalValue = ref(formatTime(value));
|
||||||
|
|
||||||
|
const styleAttrs = computed(() => {
|
||||||
|
return props.isOutlined
|
||||||
|
? {
|
||||||
|
dense: true,
|
||||||
|
outlined: true,
|
||||||
|
rounded: true,
|
||||||
|
}
|
||||||
|
: {};
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<QInput
|
||||||
|
class="vn-input-time"
|
||||||
|
readonly
|
||||||
|
:model-value="formatTime(value)"
|
||||||
|
v-bind="{ ...$attrs, ...styleAttrs }"
|
||||||
|
@click="isPopupOpen = true"
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<QIcon name="schedule" class="cursor-pointer">
|
||||||
|
<QPopupProxy
|
||||||
|
v-model="isPopupOpen"
|
||||||
|
cover
|
||||||
|
transition-show="scale"
|
||||||
|
transition-hide="scale"
|
||||||
|
:no-parent-event="props.readonly"
|
||||||
|
>
|
||||||
|
<QTime
|
||||||
|
:format24h="false"
|
||||||
|
:model-value="formatTime(value)"
|
||||||
|
@update:model-value="onDateUpdate"
|
||||||
|
>
|
||||||
|
<div class="row items-center justify-end q-gutter-sm">
|
||||||
|
<QBtn
|
||||||
|
:label="t('Cancel')"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
<QBtn
|
||||||
|
label="Ok"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
@click="save"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</QTime>
|
||||||
|
</QPopupProxy>
|
||||||
|
</QIcon>
|
||||||
|
</template>
|
||||||
|
</QInput>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.vn-input-time.q-field--standard.q-field--readonly .q-field__control:before {
|
||||||
|
border-bottom-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vn-input-time.q-field--outlined.q-field--readonly .q-field__control:before {
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Cancel: Cancelar
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
<script setup>
|
||||||
|
import { watch } from 'vue';
|
||||||
|
import { toDateString } from 'src/filters';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
value: { type: [String, Number, Boolean, Object], default: undefined },
|
||||||
|
});
|
||||||
|
|
||||||
|
const maxStrLen = 512;
|
||||||
|
let t = '';
|
||||||
|
let cssClass = '';
|
||||||
|
let type;
|
||||||
|
const updateValue = () => {
|
||||||
|
type = typeof props.value;
|
||||||
|
|
||||||
|
if (props.value == null) {
|
||||||
|
t = '∅';
|
||||||
|
cssClass = 'json-null';
|
||||||
|
} else {
|
||||||
|
cssClass = `json-${type}`;
|
||||||
|
switch (type) {
|
||||||
|
case 'number':
|
||||||
|
if (Number.isInteger(props.value)) {
|
||||||
|
t = props.value.toString();
|
||||||
|
} else {
|
||||||
|
t = (
|
||||||
|
Math.round((props.value + Number.EPSILON) * 1000) / 1000
|
||||||
|
).toString();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'boolean':
|
||||||
|
t = props.value ? '✓' : '✗';
|
||||||
|
cssClass = `json-${props.value ? 'true' : 'false'}`;
|
||||||
|
break;
|
||||||
|
case 'string':
|
||||||
|
t =
|
||||||
|
props.value.length <= maxStrLen
|
||||||
|
? props.value
|
||||||
|
: props.value.substring(0, maxStrLen) + '...';
|
||||||
|
break;
|
||||||
|
case 'object':
|
||||||
|
if (props.value instanceof Date) {
|
||||||
|
t = toDateString(props.value);
|
||||||
|
} else {
|
||||||
|
t = props.value.toString();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
t = props.value.toString();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(() => props.value, updateValue);
|
||||||
|
|
||||||
|
updateValue();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<span
|
||||||
|
:title="type === 'string' && props.value.length > maxStrLen ? props.value : ''"
|
||||||
|
:class="{ [cssClass]: t !== '' }"
|
||||||
|
>
|
||||||
|
{{ t }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.json-string {
|
||||||
|
color: #d172cc;
|
||||||
|
}
|
||||||
|
.json-object {
|
||||||
|
color: #d1a572;
|
||||||
|
}
|
||||||
|
.json-number {
|
||||||
|
color: #85d0ff;
|
||||||
|
}
|
||||||
|
.json-true {
|
||||||
|
color: #7dc489;
|
||||||
|
}
|
||||||
|
.json-false {
|
||||||
|
color: #c74949;
|
||||||
|
}
|
||||||
|
.json-null {
|
||||||
|
color: #cd7c7c;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,146 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, toRefs, computed, watch, onMounted } from 'vue';
|
||||||
|
import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
|
||||||
|
import VnSelectDialog from 'components/common/VnSelectDialog.vue';
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
const emit = defineEmits(['update:modelValue', 'update:options']);
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const postcodesOptions = ref([]);
|
||||||
|
const postcodesRef = ref(null);
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: [String, Number, Object],
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
optionLabel: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
optionValue: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
filterOptions: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
isClearable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
defaultFilter: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { options } = toRefs($props);
|
||||||
|
const myOptions = ref([]);
|
||||||
|
const myOptionsOriginal = ref([]);
|
||||||
|
|
||||||
|
const value = computed({
|
||||||
|
get() {
|
||||||
|
return $props.modelValue;
|
||||||
|
},
|
||||||
|
set(value) {
|
||||||
|
emit(
|
||||||
|
'update:modelValue',
|
||||||
|
postcodesOptions.value.find((p) => p.code === value)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
locationFilter($props.modelValue);
|
||||||
|
});
|
||||||
|
|
||||||
|
function setOptions(data) {
|
||||||
|
myOptions.value = JSON.parse(JSON.stringify(data));
|
||||||
|
myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
|
||||||
|
}
|
||||||
|
setOptions(options.value);
|
||||||
|
|
||||||
|
watch(options, (newValue) => {
|
||||||
|
setOptions(newValue);
|
||||||
|
});
|
||||||
|
|
||||||
|
function showLabel(data) {
|
||||||
|
return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function locationFilter(search = '') {
|
||||||
|
if (
|
||||||
|
search &&
|
||||||
|
(search.includes('undefined') || search.startsWith(`${$props.modelValue} - `))
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
let where = { search };
|
||||||
|
postcodesRef.value.fetch({ filter: { where }, limit: 30 });
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFetch(data) {
|
||||||
|
postcodesOptions.value = data;
|
||||||
|
}
|
||||||
|
function onDataSaved(newPostcode) {
|
||||||
|
postcodesOptions.value.push(newPostcode);
|
||||||
|
value.value = newPostcode.code;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
ref="postcodesRef"
|
||||||
|
url="Postcodes/filter"
|
||||||
|
@on-fetch="(data) => handleFetch(data)"
|
||||||
|
/>
|
||||||
|
<VnSelectDialog
|
||||||
|
v-if="postcodesRef"
|
||||||
|
:option-label="(opt) => showLabel(opt) ?? 'code'"
|
||||||
|
:option-value="(opt) => opt.code"
|
||||||
|
v-model="value"
|
||||||
|
:options="postcodesOptions"
|
||||||
|
:label="t('Location')"
|
||||||
|
:placeholder="t('search_by_postalcode')"
|
||||||
|
@input-value="locationFilter"
|
||||||
|
:default-filter="false"
|
||||||
|
:input-debounce="300"
|
||||||
|
:class="{ required: $attrs.required }"
|
||||||
|
v-bind="$attrs"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<template #form>
|
||||||
|
<CreateNewPostcode
|
||||||
|
@on-data-saved="onDataSaved"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template #option="{ itemProps, opt }">
|
||||||
|
<QItem v-bind="itemProps">
|
||||||
|
<QItemSection v-if="opt.code">
|
||||||
|
<QItemLabel>{{ opt.code }}</QItemLabel>
|
||||||
|
<QItemLabel caption>{{ showLabel(opt) }}</QItemLabel>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</template>
|
||||||
|
</VnSelectDialog>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.add-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: $primary;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
en:
|
||||||
|
search_by_postalcode: Search by postalcode, town, province or country
|
||||||
|
es:
|
||||||
|
Location: Ubicación
|
||||||
|
search_by_postalcode: Buscar por código postal, ciudad o país
|
||||||
|
</i18n>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -38,28 +38,26 @@ const workers = ref();
|
||||||
minimal
|
minimal
|
||||||
>
|
>
|
||||||
</QDate>
|
</QDate>
|
||||||
<QList dense>
|
<QSeparator />
|
||||||
<QSeparator />
|
<QItem>
|
||||||
<QItem>
|
<QItemSection v-if="!workers">
|
||||||
<QItemSection v-if="!workers">
|
<QSkeleton type="QInput" class="full-width" />
|
||||||
<QSkeleton type="QInput" class="full-width" />
|
</QItemSection>
|
||||||
</QItemSection>
|
<QItemSection v-if="workers">
|
||||||
<QItemSection v-if="workers">
|
<QSelect
|
||||||
<QSelect
|
:label="t('User')"
|
||||||
:label="t('User')"
|
v-model="params.userFk"
|
||||||
v-model="params.userFk"
|
@update:model-value="searchFn()"
|
||||||
@update:model-value="searchFn()"
|
:options="workers"
|
||||||
:options="workers"
|
option-value="id"
|
||||||
option-value="id"
|
option-label="name"
|
||||||
option-label="name"
|
emit-value
|
||||||
emit-value
|
map-options
|
||||||
map-options
|
use-input
|
||||||
use-input
|
:input-debounce="0"
|
||||||
:input-debounce="0"
|
/>
|
||||||
/>
|
</QItemSection>
|
||||||
</QItemSection>
|
</QItem>
|
||||||
</QItem>
|
|
||||||
</QList>
|
|
||||||
</template>
|
</template>
|
||||||
</VnFilterPanel>
|
</VnFilterPanel>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,193 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, toRefs, computed, watch } from 'vue';
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import FetchData from 'src/components/FetchData.vue';
|
||||||
|
const emit = defineEmits(['update:modelValue', 'update:options']);
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: [String, Number, Object],
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
optionLabel: {
|
||||||
|
type: [String],
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
optionValue: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
url: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
filterOptions: {
|
||||||
|
type: [Array],
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
isClearable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
defaultFilter: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
fields: {
|
||||||
|
type: Array,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
where: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
sortBy: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
limit: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: '30',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
|
||||||
|
|
||||||
|
const { optionLabel, optionValue, options, modelValue } = toRefs($props);
|
||||||
|
const myOptions = ref([]);
|
||||||
|
const myOptionsOriginal = ref([]);
|
||||||
|
const vnSelectRef = ref();
|
||||||
|
const dataRef = ref();
|
||||||
|
|
||||||
|
const value = computed({
|
||||||
|
get() {
|
||||||
|
return $props.modelValue;
|
||||||
|
},
|
||||||
|
set(value) {
|
||||||
|
emit('update:modelValue', value);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function setOptions(data) {
|
||||||
|
myOptions.value = JSON.parse(JSON.stringify(data));
|
||||||
|
myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
setOptions(options.value);
|
||||||
|
if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
|
||||||
|
});
|
||||||
|
|
||||||
|
function filter(val, options) {
|
||||||
|
const search = val.toString().toLowerCase();
|
||||||
|
|
||||||
|
if (!search) return options;
|
||||||
|
|
||||||
|
return options.filter((row) => {
|
||||||
|
if ($props.filterOptions.length) {
|
||||||
|
return $props.filterOptions.some((prop) => {
|
||||||
|
const propValue = String(row[prop]).toLowerCase();
|
||||||
|
return propValue.includes(search);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const id = row.id;
|
||||||
|
const optionLabel = String(row[$props.optionLabel]).toLowerCase();
|
||||||
|
|
||||||
|
return id == search || optionLabel.includes(search);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchFilter(val) {
|
||||||
|
if (!$props.url || !dataRef.value) return;
|
||||||
|
|
||||||
|
const { fields, sortBy, limit } = $props;
|
||||||
|
let key = optionLabel.value;
|
||||||
|
|
||||||
|
if (new RegExp(/\d/g).test(val)) key = optionValue.value;
|
||||||
|
|
||||||
|
const where = { [key]: { like: `%${val}%` } };
|
||||||
|
return dataRef.value.fetch({ fields, where, order: sortBy, limit });
|
||||||
|
}
|
||||||
|
|
||||||
|
async function filterHandler(val, update) {
|
||||||
|
if (!$props.defaultFilter) return update();
|
||||||
|
let newOptions;
|
||||||
|
if ($props.url) {
|
||||||
|
newOptions = await fetchFilter(val);
|
||||||
|
} else newOptions = filter(val, myOptionsOriginal.value);
|
||||||
|
update(
|
||||||
|
() => {
|
||||||
|
myOptions.value = newOptions;
|
||||||
|
},
|
||||||
|
(ref) => {
|
||||||
|
if (val !== '' && ref.options.length > 0) {
|
||||||
|
ref.setOptionIndex(-1);
|
||||||
|
ref.moveOptionSelection(1, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(options, (newValue) => {
|
||||||
|
setOptions(newValue);
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(modelValue, (newValue) => {
|
||||||
|
if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
|
||||||
|
fetchFilter(newValue);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
ref="dataRef"
|
||||||
|
:url="$props.url"
|
||||||
|
@on-fetch="(data) => setOptions(data)"
|
||||||
|
:where="where || { [optionValue]: value }"
|
||||||
|
:limit="limit"
|
||||||
|
:sort-by="sortBy"
|
||||||
|
:fields="fields"
|
||||||
|
/>
|
||||||
|
<QSelect
|
||||||
|
v-model="value"
|
||||||
|
:options="myOptions"
|
||||||
|
:option-label="optionLabel"
|
||||||
|
:option-value="optionValue"
|
||||||
|
v-bind="$attrs"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
use-input
|
||||||
|
@filter="filterHandler"
|
||||||
|
hide-selected
|
||||||
|
fill-input
|
||||||
|
ref="vnSelectRef"
|
||||||
|
lazy-rules
|
||||||
|
:class="{ required: $attrs.required }"
|
||||||
|
:rules="$attrs.required ? [requiredFieldRule] : null"
|
||||||
|
virtual-scroll-slice-size="options.length"
|
||||||
|
>
|
||||||
|
<template v-if="isClearable" #append>
|
||||||
|
<QIcon
|
||||||
|
name="close"
|
||||||
|
@click.stop="value = null"
|
||||||
|
class="cursor-pointer"
|
||||||
|
size="xs"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
|
||||||
|
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
|
||||||
|
</template>
|
||||||
|
</QSelect>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.q-field--outlined {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
|
||||||
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
|
|
||||||
|
import { useRole } from 'src/composables/useRole';
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue']);
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: [String, Number, Object],
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
rolesAllowedToCreate: {
|
||||||
|
type: Array,
|
||||||
|
default: () => ['developer'],
|
||||||
|
},
|
||||||
|
actionIcon: {
|
||||||
|
type: String,
|
||||||
|
default: 'add',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const role = useRole();
|
||||||
|
const showForm = ref(false);
|
||||||
|
|
||||||
|
const value = computed({
|
||||||
|
get() {
|
||||||
|
return $props.modelValue;
|
||||||
|
},
|
||||||
|
set(value) {
|
||||||
|
emit('update:modelValue', value);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const isAllowedToCreate = computed(() => {
|
||||||
|
return role.hasAny($props.rolesAllowedToCreate);
|
||||||
|
});
|
||||||
|
|
||||||
|
const toggleForm = () => {
|
||||||
|
showForm.value = !showForm.value;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VnSelect v-model="value" :options="options" v-bind="$attrs">
|
||||||
|
<template v-if="isAllowedToCreate" #append>
|
||||||
|
<QIcon
|
||||||
|
@click.stop.prevent="toggleForm()"
|
||||||
|
:name="actionIcon"
|
||||||
|
:size="actionIcon === 'add' ? 'xs' : 'sm'"
|
||||||
|
:class="['default-icon', { '--add-icon': actionIcon === 'add' }]"
|
||||||
|
:style="{
|
||||||
|
'font-variation-settings': `'FILL' ${1}`,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<QTooltip v-if="tooltip">{{ tooltip }}</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
<QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
|
||||||
|
<slot name="form" />
|
||||||
|
</QDialog>
|
||||||
|
</template>
|
||||||
|
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
|
||||||
|
<slot :name="slotName" v-bind="slotData" :key="slotName" />
|
||||||
|
</template>
|
||||||
|
</VnSelect>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.default-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
color: $primary;
|
||||||
|
border-radius: 50px;
|
||||||
|
|
||||||
|
&.--add-icon {
|
||||||
|
color: var(--vn-text-color);
|
||||||
|
background-color: $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import { useDialogPluginComponent } from 'quasar';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useDialogPluginComponent } from 'quasar';
|
||||||
|
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
|
||||||
const { dialogRef, onDialogOK } = useDialogPluginComponent();
|
const { dialogRef, onDialogOK } = useDialogPluginComponent();
|
||||||
const { t, availableLocales } = useI18n();
|
const { t, availableLocales } = useI18n();
|
||||||
|
|
@ -19,7 +21,8 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
template: {
|
template: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: false,
|
||||||
|
default: '',
|
||||||
},
|
},
|
||||||
locale: {
|
locale: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|
@ -47,7 +50,7 @@ updateMessage();
|
||||||
|
|
||||||
function updateMessage() {
|
function updateMessage() {
|
||||||
const params = props.data;
|
const params = props.data;
|
||||||
const key = `templates['${props.template}']`;
|
const key = props.template ? `templates['${props.template}']` : '';
|
||||||
|
|
||||||
message.value = t(key, params, { locale: locale.value });
|
message.value = t(key, params, { locale: locale.value });
|
||||||
}
|
}
|
||||||
|
|
@ -83,7 +86,7 @@ async function send() {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<QDialog ref="dialogRef" persistent>
|
<QDialog ref="dialogRef">
|
||||||
<QCard class="q-pa-sm">
|
<QCard class="q-pa-sm">
|
||||||
<QCardSection class="row items-center q-pb-none">
|
<QCardSection class="row items-center q-pb-none">
|
||||||
<span class="text-h6 text-grey">
|
<span class="text-h6 text-grey">
|
||||||
|
|
@ -92,16 +95,6 @@ async function send() {
|
||||||
<QSpace />
|
<QSpace />
|
||||||
<QBtn icon="close" :disable="isLoading" flat round dense v-close-popup />
|
<QBtn icon="close" :disable="isLoading" flat round dense v-close-popup />
|
||||||
</QCardSection>
|
</QCardSection>
|
||||||
<QCardSection v-if="props.locale">
|
|
||||||
<QBanner class="bg-amber text-white" rounded dense>
|
|
||||||
<template #avatar>
|
|
||||||
<QIcon name="warning" />
|
|
||||||
</template>
|
|
||||||
<span
|
|
||||||
v-html="t('CustomerDefaultLanguage', { locale: t(props.locale) })"
|
|
||||||
></span>
|
|
||||||
</QBanner>
|
|
||||||
</QCardSection>
|
|
||||||
<QCardSection class="q-pb-xs">
|
<QCardSection class="q-pb-xs">
|
||||||
<QSelect
|
<QSelect
|
||||||
:label="t('Language')"
|
:label="t('Language')"
|
||||||
|
|
@ -112,29 +105,14 @@ async function send() {
|
||||||
map-options
|
map-options
|
||||||
:input-debounce="0"
|
:input-debounce="0"
|
||||||
rounded
|
rounded
|
||||||
outlined
|
|
||||||
dense
|
dense
|
||||||
/>
|
/>
|
||||||
</QCardSection>
|
</QCardSection>
|
||||||
<QCardSection class="q-pb-xs">
|
<QCardSection class="q-pb-xs">
|
||||||
<QInput
|
<VnInput :label="t('Phone')" v-model="phone" />
|
||||||
:label="t('Phone')"
|
|
||||||
v-model="phone"
|
|
||||||
rounded
|
|
||||||
outlined
|
|
||||||
autofocus
|
|
||||||
dense
|
|
||||||
/>
|
|
||||||
</QCardSection>
|
</QCardSection>
|
||||||
<QCardSection class="q-pb-xs">
|
<QCardSection class="q-pb-xs">
|
||||||
<QInput
|
<VnInput v-model="subject" :label="t('Subject')" />
|
||||||
:label="t('Subject')"
|
|
||||||
v-model="subject"
|
|
||||||
rounded
|
|
||||||
outlined
|
|
||||||
autofocus
|
|
||||||
dense
|
|
||||||
/>
|
|
||||||
</QCardSection>
|
</QCardSection>
|
||||||
<QCardSection class="q-mb-md" q-input>
|
<QCardSection class="q-mb-md" q-input>
|
||||||
<QInput
|
<QInput
|
||||||
|
|
@ -147,7 +125,6 @@ async function send() {
|
||||||
:bottom-slots="true"
|
:bottom-slots="true"
|
||||||
:rules="[(value) => value.length < maxLength || 'Error!']"
|
:rules="[(value) => value.length < maxLength || 'Error!']"
|
||||||
stack-label
|
stack-label
|
||||||
outlined
|
|
||||||
autofocus
|
autofocus
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
|
|
@ -157,6 +134,11 @@ async function send() {
|
||||||
@click="message = ''"
|
@click="message = ''"
|
||||||
class="cursor-pointer"
|
class="cursor-pointer"
|
||||||
/>
|
/>
|
||||||
|
<QIcon name="info" class="cursor-pointer">
|
||||||
|
<QTooltip>
|
||||||
|
{{ t('messageTooltip') }}
|
||||||
|
</QTooltip>
|
||||||
|
</QIcon>
|
||||||
</template>
|
</template>
|
||||||
<template #counter>
|
<template #counter>
|
||||||
<QChip :color="color" dense>
|
<QChip :color="color" dense>
|
||||||
|
|
@ -196,30 +178,31 @@ async function send() {
|
||||||
|
|
||||||
<i18n>
|
<i18n>
|
||||||
en:
|
en:
|
||||||
CustomerDefaultLanguage: This customer uses <strong>{locale}</strong> as their default language
|
|
||||||
templates:
|
templates:
|
||||||
pendingPayment: 'Your order is pending of payment.
|
pendingPayment: 'Your order is pending of payment.
|
||||||
Please, enter the website and make the payment with a credit card. Thank you.'
|
Please, enter the website and make the payment with a credit card. Thank you.'
|
||||||
minAmount: 'A minimum amount of 50€ (VAT excluded) is required for your order
|
minAmount: 'A minimum amount of 50€ (VAT excluded) is required for your order
|
||||||
{ orderId } of { shipped } to receive it without additional shipping costs.'
|
{ orderId } of { shipped } to receive it without additional shipping costs.'
|
||||||
orderChanges: 'Order {orderId} of { shipped }: { changes }'
|
orderChanges: 'Order {orderId} of { shipped }: { changes }'
|
||||||
en: English
|
en: English
|
||||||
es: Spanish
|
es: Spanish
|
||||||
fr: French
|
fr: French
|
||||||
pt: Portuguese
|
pt: Portuguese
|
||||||
|
messageTooltip: Special characters like accents counts as multiple
|
||||||
es:
|
es:
|
||||||
Send SMS: Enviar SMS
|
Send SMS: Enviar SMS
|
||||||
CustomerDefaultLanguage: Este cliente utiliza <strong>{locale}</strong> como idioma por defecto
|
|
||||||
Language: Idioma
|
Language: Idioma
|
||||||
Phone: Móvil
|
Phone: Móvil
|
||||||
Subject: Asunto
|
Subject: Asunto
|
||||||
Message: Mensaje
|
Message: Mensaje
|
||||||
|
messageTooltip: Carácteres especiales como acentos cuentan como varios
|
||||||
templates:
|
templates:
|
||||||
pendingPayment: 'Su pedido está pendiente de pago.
|
pendingPayment: 'Su pedido está pendiente de pago.
|
||||||
Por favor, entre en la página web y efectue el pago con tarjeta. Muchas gracias.'
|
Por favor, entre en la página web y efectue el pago con tarjeta. Muchas gracias.'
|
||||||
minAmount: 'Es necesario un importe mínimo de 50€ (Sin IVA) en su pedido
|
minAmount: 'Te recordamos que tu pedido {orderId} es inferior a 50€.
|
||||||
{ orderId } del día { shipped } para recibirlo sin portes adicionales.'
|
Te recomendamos amplíes para no generar costes extra, provocarán un incremento de tu tarifa.
|
||||||
orderChanges: 'Pedido {orderId} día { shipped }: { changes }'
|
¡Un saludo!'
|
||||||
|
orderChanges: 'Pedido {orderId} con llegada estimada día { landing }: { changes }'
|
||||||
en: Inglés
|
en: Inglés
|
||||||
es: Español
|
es: Español
|
||||||
fr: Francés
|
fr: Francés
|
||||||
|
|
@ -231,12 +214,14 @@ fr:
|
||||||
Phone: Mobile
|
Phone: Mobile
|
||||||
Subject: Affaire
|
Subject: Affaire
|
||||||
Message: Message
|
Message: Message
|
||||||
|
messageTooltip: Les caractères spéciaux comme les accents comptent comme plusieurs
|
||||||
templates:
|
templates:
|
||||||
pendingPayment: 'Votre commande est en attente de paiement.
|
pendingPayment: 'Verdnatura : Commande en attente de règlement. Veuillez régler votre commande avant 9h.
|
||||||
Veuillez vous connecter sur le site web et effectuer le paiement par carte. Merci beaucoup.'
|
Sinon elle sera décalée en fonction de vos jours de livraison . Merci'
|
||||||
minAmount: 'Un montant minimum de 50€ (TVA non incluse) est requis pour votre commande
|
minAmount: 'Verdnatura vous rappelle :
|
||||||
{ orderId } du { shipped } afin de la recevoir sans frais de port supplémentaires.'
|
Montant minimum nécessaire de 50 euros pour recevoir la commande { orderId } livraison { landing }.
|
||||||
orderChanges: 'Commande { orderId } du { shipped }: { changes }'
|
Merci.'
|
||||||
|
orderChanges: 'Commande {orderId} livraison {landing} indisponible/s. Désolés pour le dérangement.'
|
||||||
en: Anglais
|
en: Anglais
|
||||||
es: Espagnol
|
es: Espagnol
|
||||||
fr: Français
|
fr: Français
|
||||||
|
|
@ -248,12 +233,13 @@ pt:
|
||||||
Phone: Móvel
|
Phone: Móvel
|
||||||
Subject: Assunto
|
Subject: Assunto
|
||||||
Message: Mensagem
|
Message: Mensagem
|
||||||
|
messageTooltip: Caracteres especiais como acentos contam como vários
|
||||||
templates:
|
templates:
|
||||||
pendingPayment: 'Seu pedido está pendente de pagamento.
|
pendingPayment: 'Seu pedido está pendente de pagamento.
|
||||||
Por favor, acesse o site e faça o pagamento com cartão. Muito obrigado.'
|
Por favor, acesse o site e faça o pagamento com cartão. Muito obrigado.'
|
||||||
minAmount: 'É necessário um valor mínimo de 50€ (sem IVA) em seu pedido
|
minAmount: 'É necessário um valor mínimo de 50€ (sem IVA) em seu pedido
|
||||||
{ orderId } do dia { shipped } para recebê-lo sem custos de envio adicionais.'
|
{ orderId } do dia { landing } para recebê-lo sem custos de envio adicionais.'
|
||||||
orderChanges: 'Pedido { orderId } dia { shipped }: { changes }'
|
orderChanges: 'Pedido { orderId } com chegada dia { landing }: { changes }'
|
||||||
en: Inglês
|
en: Inglês
|
||||||
es: Espanhol
|
es: Espanhol
|
||||||
fr: Francês
|
fr: Francês
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,23 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { useDialogPluginComponent } from 'quasar';
|
import { useDialogPluginComponent } from 'quasar';
|
||||||
import WorkerSummary from './WorkerSummary.vue';
|
|
||||||
|
|
||||||
const $props = defineProps({
|
defineProps({
|
||||||
id: {
|
id: {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
summary: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
defineEmits([...useDialogPluginComponent.emits]);
|
defineEmits([...useDialogPluginComponent.emits]);
|
||||||
|
|
||||||
const { dialogRef, onDialogHide } = useDialogPluginComponent();
|
const { dialogRef, onDialogHide } = useDialogPluginComponent();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<QDialog ref="dialogRef" @hide="onDialogHide">
|
<QDialog ref="dialogRef" @hide="onDialogHide" full-width>
|
||||||
<WorkerSummary v-if="$props.id" :id="$props.id" />
|
<component :is="summary" :id="id" />
|
||||||
</QDialog>
|
</QDialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<script setup>
|
||||||
|
const $props = defineProps({
|
||||||
|
url: { type: String, default: null },
|
||||||
|
text: { type: String, default: null },
|
||||||
|
icon: { type: String, default: 'open_in_new' },
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="titleBox">
|
||||||
|
<div class="header-link">
|
||||||
|
<a :href="$props.url" :class="$props.url ? 'link' : 'color-vn-text'">
|
||||||
|
{{ $props.text }}
|
||||||
|
<QIcon v-if="url" :name="$props.icon" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
a {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
.titleBox {
|
||||||
|
padding-bottom: 2%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -36,7 +36,7 @@ const props = defineProps({
|
||||||
|
|
||||||
const emit = defineEmits(['onUpdate']);
|
const emit = defineEmits(['onUpdate']);
|
||||||
|
|
||||||
const discount = ref(0);
|
const discount = ref(0); // eslint-disable-line vue/no-dupe-keys
|
||||||
let canceller;
|
let canceller;
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, useSlots, ref, watch } from 'vue';
|
import { onBeforeMount, watch, computed, ref } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import axios from 'axios';
|
|
||||||
import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
|
import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
|
||||||
|
import { useArrayData } from 'composables/useArrayData';
|
||||||
|
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||||
|
import { useState } from 'src/composables/useState';
|
||||||
|
|
||||||
const props = defineProps({
|
const $props = defineProps({
|
||||||
url: {
|
url: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
|
|
@ -17,60 +19,102 @@ const props = defineProps({
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
dataKey: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
summary: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const slots = useSlots();
|
const state = useState();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
const { viewSummary } = useSummaryDialog();
|
||||||
onMounted(() => fetch());
|
const arrayData = useArrayData($props.dataKey || $props.module, {
|
||||||
|
url: $props.url,
|
||||||
const emit = defineEmits(['onFetch']);
|
filter: $props.filter,
|
||||||
|
skip: 0,
|
||||||
const entity = ref();
|
|
||||||
async function fetch() {
|
|
||||||
const params = {};
|
|
||||||
|
|
||||||
if (props.filter) params.filter = JSON.stringify(props.filter);
|
|
||||||
|
|
||||||
const { data } = await axios.get(props.url, { params });
|
|
||||||
entity.value = data;
|
|
||||||
|
|
||||||
emit('onFetch', data);
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(props, async () => {
|
|
||||||
entity.value = null;
|
|
||||||
await fetch();
|
|
||||||
});
|
});
|
||||||
|
const { store } = arrayData;
|
||||||
|
const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
|
||||||
|
const isLoading = ref(false);
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
getData,
|
||||||
|
});
|
||||||
|
onBeforeMount(async () => {
|
||||||
|
await getData();
|
||||||
|
watch($props, async () => await getData());
|
||||||
|
});
|
||||||
|
|
||||||
|
async function getData() {
|
||||||
|
store.url = $props.url;
|
||||||
|
store.filter = $props.filter ?? {};
|
||||||
|
isLoading.value = true;
|
||||||
|
try {
|
||||||
|
const { data } = await arrayData.fetch({ append: false, updateRouter: false });
|
||||||
|
state.set($props.dataKey, data);
|
||||||
|
emit('onFetch', Array.isArray(data) ? data[0] : data);
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const emit = defineEmits(['onFetch']);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="descriptor">
|
<div class="descriptor">
|
||||||
<template v-if="entity">
|
<template v-if="entity && !isLoading">
|
||||||
<div class="header bg-primary q-pa-sm">
|
<div class="header bg-primary q-pa-sm justify-between">
|
||||||
<RouterLink :to="{ name: `${module}List` }">
|
<slot name="header-extra-action" />
|
||||||
<QBtn round flat dense size="md" icon="view_list" color="white">
|
<QBtn
|
||||||
<QTooltip>
|
@click.stop="viewSummary(entity.id, $props.summary)"
|
||||||
{{ t('components.cardDescriptor.mainList') }}
|
round
|
||||||
</QTooltip>
|
flat
|
||||||
</QBtn>
|
dense
|
||||||
</RouterLink>
|
size="md"
|
||||||
|
icon="preview"
|
||||||
|
color="white"
|
||||||
|
class="link"
|
||||||
|
v-if="summary"
|
||||||
|
>
|
||||||
|
<QTooltip>
|
||||||
|
{{ t('components.smartCard.openSummary') }}
|
||||||
|
</QTooltip>
|
||||||
|
</QBtn>
|
||||||
<RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
|
<RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
|
||||||
<QBtn round flat dense size="md" icon="launch" color="white">
|
<QBtn
|
||||||
|
class="link"
|
||||||
|
color="white"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
icon="launch"
|
||||||
|
round
|
||||||
|
size="md"
|
||||||
|
>
|
||||||
<QTooltip>
|
<QTooltip>
|
||||||
{{ t('components.cardDescriptor.summary') }}
|
{{ t('components.cardDescriptor.summary') }}
|
||||||
</QTooltip>
|
</QTooltip>
|
||||||
</QBtn>
|
</QBtn>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
|
|
||||||
<QBtn
|
<QBtn
|
||||||
v-if="slots.menu"
|
|
||||||
size="md"
|
|
||||||
icon="more_vert"
|
|
||||||
color="white"
|
color="white"
|
||||||
round
|
|
||||||
flat
|
|
||||||
dense
|
dense
|
||||||
|
flat
|
||||||
|
icon="more_vert"
|
||||||
|
round
|
||||||
|
size="md"
|
||||||
|
:class="{ invisible: !$slots.menu }"
|
||||||
>
|
>
|
||||||
<QTooltip>
|
<QTooltip>
|
||||||
{{ t('components.cardDescriptor.moreOptions') }}
|
{{ t('components.cardDescriptor.moreOptions') }}
|
||||||
|
|
@ -86,48 +130,123 @@ watch(props, async () => {
|
||||||
<div class="body q-py-sm">
|
<div class="body q-py-sm">
|
||||||
<QList dense>
|
<QList dense>
|
||||||
<QItemLabel header class="ellipsis text-h5" :lines="1">
|
<QItemLabel header class="ellipsis text-h5" :lines="1">
|
||||||
<slot name="description" :entity="entity">
|
<div class="title">
|
||||||
<span>
|
<span v-if="$props.title" :title="$props.title">
|
||||||
{{ entity.name }}
|
{{ $props.title }}
|
||||||
<QTooltip>{{ entity.name }}</QTooltip>
|
|
||||||
</span>
|
</span>
|
||||||
</slot>
|
<slot v-else name="description" :entity="entity">
|
||||||
|
<span :title="entity.name">
|
||||||
|
{{ entity.name }}
|
||||||
|
</span>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
</QItemLabel>
|
</QItemLabel>
|
||||||
<QItem dense>
|
<QItem dense>
|
||||||
<QItemLabel class="text-subtitle2" caption>
|
<QItemLabel class="subtitle" caption>
|
||||||
#{{ entity.id }}
|
#{{ $props.subtitle ?? entity.id }}
|
||||||
</QItemLabel>
|
</QItemLabel>
|
||||||
</QItem>
|
</QItem>
|
||||||
</QList>
|
</QList>
|
||||||
<slot name="body" :entity="entity" />
|
<div class="list-box q-mt-xs">
|
||||||
|
<slot name="body" :entity="entity" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="icons">
|
||||||
|
<slot name="icons" :entity="entity" />
|
||||||
|
</div>
|
||||||
|
<div class="actions justify-center">
|
||||||
|
<slot name="actions" :entity="entity" />
|
||||||
</div>
|
</div>
|
||||||
<slot name="after" />
|
<slot name="after" />
|
||||||
</template>
|
</template>
|
||||||
<!-- Skeleton -->
|
<!-- Skeleton -->
|
||||||
<SkeletonDescriptor v-if="!entity" />
|
<SkeletonDescriptor v-if="!entity || isLoading" />
|
||||||
</div>
|
</div>
|
||||||
|
<QInnerLoading
|
||||||
|
:label="t('globals.pleaseWait')"
|
||||||
|
:showing="isLoading"
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.body {
|
.body {
|
||||||
.q-card__actions {
|
background-color: var(--vn-section-color);
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.text-h5 {
|
.text-h5 {
|
||||||
|
font-size: 20px;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
padding-bottom: 5px;
|
padding-bottom: 0px;
|
||||||
|
}
|
||||||
|
.q-item {
|
||||||
|
min-height: 20px;
|
||||||
|
|
||||||
|
.link {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.vn-label-value {
|
||||||
|
display: flex;
|
||||||
|
padding: 0px 16px;
|
||||||
|
.label {
|
||||||
|
color: var(--vn-label-color);
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&:not(:has(a))::after {
|
||||||
|
content: ':';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.value {
|
||||||
|
color: var(--vn-text-color);
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.title {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
span {
|
||||||
|
color: var(--vn-text-color);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
color: var(--vn-text-color);
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.list-box {
|
||||||
|
.q-item__label {
|
||||||
|
color: var(--vn-label-color);
|
||||||
|
padding-bottom: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
.descriptor {
|
.descriptor {
|
||||||
width: 256px;
|
width: 256px;
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
}
|
||||||
align-items: stretch;
|
.icons {
|
||||||
|
margin: 0 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.q-icon {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
margin: 0 5px;
|
||||||
|
justify-content: center !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,130 @@
|
||||||
|
<script setup>
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
element: { type: Object, default: null },
|
||||||
|
id: { type: Number, default: null },
|
||||||
|
isSelected: { type: Boolean, default: false },
|
||||||
|
title: { type: String, default: null },
|
||||||
|
showCheckbox: { type: Boolean, default: false },
|
||||||
|
hasInfoIcons: { type: Boolean, default: false },
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['toggleCardCheck']);
|
||||||
|
|
||||||
|
const toggleCardCheck = (item) => {
|
||||||
|
emit('toggleCardCheck', item);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<QCard class="card q-mb-md cursor-pointer q-hoverable bg-white-7 q-pa-lg">
|
||||||
|
<div>
|
||||||
|
<slot name="title">
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="title text-primary text-weight-bold text-h5">
|
||||||
|
{{ $props.title }}
|
||||||
|
</div>
|
||||||
|
<QChip class="q-chip-color" outline size="sm">
|
||||||
|
{{ t('ID') }}: {{ $props.id }}
|
||||||
|
</QChip>
|
||||||
|
</div>
|
||||||
|
<QCheckbox
|
||||||
|
v-if="showCheckbox"
|
||||||
|
:model-value="isSelected"
|
||||||
|
@click="toggleCardCheck($props.element)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</slot>
|
||||||
|
<div class="card-list-body">
|
||||||
|
<div v-if="hasInfoIcons" class="column q-mr-md q-gutter-y-xs">
|
||||||
|
<slot name="info-icons" />
|
||||||
|
</div>
|
||||||
|
<div class="list-items row flex-wrap-wrap">
|
||||||
|
<slot name="list-items" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions">
|
||||||
|
<slot name="actions" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</QCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.title {
|
||||||
|
margin-right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-chip-color {
|
||||||
|
color: var(--vn-label-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-list-body {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 10px;
|
||||||
|
.vn-label-value {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 2%;
|
||||||
|
width: 50%;
|
||||||
|
.label {
|
||||||
|
width: 35%;
|
||||||
|
color: var(--vn-label-color);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.value {
|
||||||
|
width: 65%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $breakpoint-xs) {
|
||||||
|
.card-list-body {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
.vn-label-value {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 15px;
|
||||||
|
padding: 0 15%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.card {
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
.card:hover {
|
||||||
|
background-color: var(--vn-section-color);
|
||||||
|
}
|
||||||
|
.list-items {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
ID: ID
|
||||||
|
</i18n>
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref, watch } from 'vue';
|
import { ref, computed, watch, onBeforeMount } from 'vue';
|
||||||
import axios from 'axios';
|
import { useRoute } from 'vue-router';
|
||||||
import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
|
import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
|
||||||
onMounted(() => fetch());
|
import VnLv from 'src/components/ui/VnLv.vue';
|
||||||
|
import { useArrayData } from 'src/composables/useArrayData';
|
||||||
|
|
||||||
const entity = ref();
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
url: {
|
url: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|
@ -14,42 +14,75 @@ const props = defineProps({
|
||||||
type: Object,
|
type: Object,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
|
entityId: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
dataKey: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
const emit = defineEmits(['onFetch']);
|
const emit = defineEmits(['onFetch']);
|
||||||
|
const route = useRoute();
|
||||||
|
const isSummary = ref();
|
||||||
|
const arrayData = useArrayData(props.dataKey || route.meta.moduleName, {
|
||||||
|
url: props.url,
|
||||||
|
filter: props.filter,
|
||||||
|
skip: 0,
|
||||||
|
});
|
||||||
|
const { store } = arrayData;
|
||||||
|
const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
|
||||||
|
const isLoading = ref(false);
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
entity,
|
entity,
|
||||||
fetch,
|
fetch,
|
||||||
});
|
});
|
||||||
|
|
||||||
async function fetch() {
|
onBeforeMount(async () => {
|
||||||
const params = {};
|
isSummary.value = String(route.path).endsWith('/summary');
|
||||||
|
await fetch();
|
||||||
if (props.filter) params.filter = props.filter;
|
watch(props, async () => await fetch());
|
||||||
|
|
||||||
const { data } = await axios.get(props.url, { params });
|
|
||||||
entity.value = data;
|
|
||||||
|
|
||||||
emit('onFetch', data);
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(props, async () => {
|
|
||||||
entity.value = null;
|
|
||||||
fetch();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
async function fetch() {
|
||||||
|
store.url = props.url;
|
||||||
|
store.filter = props.filter ?? {};
|
||||||
|
isLoading.value = true;
|
||||||
|
const { data } = await arrayData.fetch({ append: false, updateRouter: false });
|
||||||
|
emit('onFetch', Array.isArray(data) ? data[0] : data);
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="summary container">
|
<div class="summary container">
|
||||||
<QCard>
|
<QCard class="cardSummary">
|
||||||
<SkeletonSummary v-if="!entity" />
|
<SkeletonSummary v-if="!entity || isLoading" />
|
||||||
<template v-if="entity">
|
<template v-if="entity && !isLoading">
|
||||||
<div class="header bg-primary q-pa-sm q-mb-md">
|
<div class="summaryHeader bg-primary q-pa-sm text-weight-bolder">
|
||||||
<slot name="header" :entity="entity">
|
<slot name="header-left">
|
||||||
{{ entity.id }} - {{ entity.name }}
|
<router-link
|
||||||
|
v-if="!isSummary && route.meta.moduleName"
|
||||||
|
class="header link"
|
||||||
|
:to="{
|
||||||
|
name: `${route.meta.moduleName}Summary`,
|
||||||
|
params: { id: entityId || entity.id },
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<QIcon name="open_in_new" color="white" size="sm" />
|
||||||
|
</router-link>
|
||||||
|
<span v-else></span>
|
||||||
|
</slot>
|
||||||
|
<slot name="header" :entity="entity" dense>
|
||||||
|
<VnLv :label="`${entity.id} -`" :value="entity.name" />
|
||||||
|
</slot>
|
||||||
|
<slot name="header-right">
|
||||||
|
<span></span>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="body q-pa-md q-mb-md">
|
<div class="summaryBody row q-mb-md">
|
||||||
<slot name="body" :entity="entity" />
|
<slot name="body" :entity="entity" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -63,57 +96,102 @@ watch(props, async () => {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary {
|
.cardSummary {
|
||||||
.q-card {
|
width: 100%;
|
||||||
width: 100%;
|
.summaryHeader {
|
||||||
max-width: 1200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.negative {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
.q-list {
|
|
||||||
.q-item__label--header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.body > .q-card__section.row {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
& > .col {
|
|
||||||
min-width: 250px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 18px;
|
font-size: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
.summaryBody {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: var(--vn-section-color);
|
||||||
|
|
||||||
#slider-container {
|
> .q-card.vn-one {
|
||||||
max-width: 80%;
|
flex: 1;
|
||||||
margin: 0 auto;
|
}
|
||||||
|
> .q-card.vn-two {
|
||||||
|
flex: 40%;
|
||||||
|
}
|
||||||
|
> .q-card.vn-three {
|
||||||
|
flex: 75%;
|
||||||
|
}
|
||||||
|
> .q-card.vn-max {
|
||||||
|
flex: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.q-slider {
|
> .q-card {
|
||||||
.q-slider__marker-labels:nth-child(1) {
|
width: 100%;
|
||||||
transform: none;
|
background-color: var(--vn-section-color);
|
||||||
|
padding: 7px;
|
||||||
|
font-size: 16px;
|
||||||
|
min-width: 275px;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.vn-label-value {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-top: 2px;
|
||||||
|
.label {
|
||||||
|
color: var(--vn-label-color);
|
||||||
|
width: 8em;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
margin-right: 10px;
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.value {
|
||||||
|
color: var(--vn-text-color);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.q-slider__marker-labels:nth-child(2) {
|
.header {
|
||||||
transform: none;
|
color: $primary;
|
||||||
left: auto !important;
|
font-weight: bold;
|
||||||
right: 0%;
|
margin-bottom: 10px;
|
||||||
|
font-size: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.header.link:hover {
|
||||||
|
color: lighten($primary, 20%);
|
||||||
|
}
|
||||||
|
.q-checkbox {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 9px;
|
||||||
|
& .q-checkbox__label {
|
||||||
|
margin-left: 31px;
|
||||||
|
color: var(--vn-text-color);
|
||||||
|
}
|
||||||
|
& .q-checkbox__inner {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: var(--vn-label-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.q-dialog .summary {
|
@media (max-width: $breakpoint-xs) {
|
||||||
max-width: 1200px;
|
.summaryBody {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.summaryHeader .vn-label-value {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.summaryHeader {
|
||||||
|
color: $white;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -13,12 +13,49 @@ defineProps({
|
||||||
<template>
|
<template>
|
||||||
<div class="fetchedTags">
|
<div class="fetchedTags">
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="inline-tag" :class="{ empty: !$props.item.value5 }">{{ $props.item.value5 }}</div>
|
<div
|
||||||
<div class="inline-tag" :class="{ empty: !$props.item.value6 }">{{ $props.item.value6 }}</div>
|
class="inline-tag"
|
||||||
<div class="inline-tag" :class="{ empty: !$props.item.value7 }">{{ $props.item.value7 }}</div>
|
:class="{ empty: !$props.item.value5 }"
|
||||||
<div class="inline-tag" :class="{ empty: !$props.item.value8 }">{{ $props.item.value8 }}</div>
|
:title="$props.item.tag5 + ': ' + $props.item.value5"
|
||||||
<div class="inline-tag" :class="{ empty: !$props.item.value9 }">{{ $props.item.value9 }}</div>
|
>
|
||||||
<div class="inline-tag" :class="{ empty: !$props.item.value10 }">{{ $props.item.value10 }}</div>
|
{{ $props.item.value5 }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="inline-tag"
|
||||||
|
:class="{ empty: !$props.item.tag6 }"
|
||||||
|
:title="$props.item.tag6 + ': ' + $props.item.value6"
|
||||||
|
>
|
||||||
|
{{ $props.item.value6 }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="inline-tag"
|
||||||
|
:class="{ empty: !$props.item.value7 }"
|
||||||
|
:title="$props.item.tag7 + ': ' + $props.item.value7"
|
||||||
|
>
|
||||||
|
{{ $props.item.value7 }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="inline-tag"
|
||||||
|
:class="{ empty: !$props.item.value8 }"
|
||||||
|
:title="$props.item.tag8 + ': ' + $props.item.value8"
|
||||||
|
>
|
||||||
|
{{ $props.item.value8 }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="inline-tag"
|
||||||
|
:class="{ empty: !$props.item.value9 }"
|
||||||
|
:title="$props.item.tag9 + ': ' + $props.item.value9"
|
||||||
|
>
|
||||||
|
{{ $props.item.value9 }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="inline-tag"
|
||||||
|
:class="{ empty: !$props.item.value10 }"
|
||||||
|
:title="$props.item.tag10 + ': ' + $props.item.value10"
|
||||||
|
>
|
||||||
|
{{ $props.item.value10 }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,168 @@
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import { useQuasar } from 'quasar';
|
||||||
|
import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass';
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
bordered: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
transparentBackground: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
viewCustomization: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
|
||||||
|
// El objetivo de asignar las clases de personalización desde el wrapper es no tener conflictos entre vistas que usen el mismo componente
|
||||||
|
const viewCustomizationClasses = {
|
||||||
|
workerCalendar: 'worker-calendar-customizations',
|
||||||
|
};
|
||||||
|
|
||||||
|
const containerClasses = computed(() => {
|
||||||
|
const classes = ['main-container-background'];
|
||||||
|
if (viewCustomizationClasses[$props.viewCustomization])
|
||||||
|
classes.push(viewCustomizationClasses[$props.viewCustomization]);
|
||||||
|
if ($props.bordered) classes.push('--bordered');
|
||||||
|
if ($props.transparentBackground) classes.push('transparent-background');
|
||||||
|
else classes.push($q.dark.isActive ? '--dark' : '--light');
|
||||||
|
return classes;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div :class="containerClasses">
|
||||||
|
<div class="nav-container row"><slot name="header" /></div>
|
||||||
|
<slot name="calendar" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../../css/quasar.variables.scss';
|
||||||
|
|
||||||
|
:root {
|
||||||
|
// Cambia los colores del día actual del calendario por los de salix
|
||||||
|
--calendar-border-current-dark: #84d0e2 2px solid;
|
||||||
|
--calendar-border-current: #84d0e2 2px solid;
|
||||||
|
--calendar-current-color-dark: #84d0e2;
|
||||||
|
// Colores de fondo del calendario en dark mode
|
||||||
|
--calendar-outside-background-dark: #222;
|
||||||
|
--calendar-background-dark: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
|
||||||
|
.q-dark div .q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
|
||||||
|
background-color: $primary !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
|
||||||
|
background-color: $primary !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-calendar-month__head--weekday {
|
||||||
|
// Transforma los nombres de los días de la semana a mayúsculas
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transparent-background {
|
||||||
|
--calendar-background-dark: transparent;
|
||||||
|
--calendar-background: transparent;
|
||||||
|
--calendar-outside-background-dark: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-calendar__button {
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--vn-accent-color);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-container-background {
|
||||||
|
--calendar-current-background-dark: transparent;
|
||||||
|
|
||||||
|
&.--dark {
|
||||||
|
background-color: var(--calendar-background-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.--light {
|
||||||
|
background-color: var(--calendar-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.--bordered {
|
||||||
|
border: 1px solid #222;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.worker-calendar-customizations {
|
||||||
|
.q-calendar__button {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
font-size: 13px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--vn-accent-color);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-calendar-month__week--days > div:nth-child(6),
|
||||||
|
.q-calendar-month__week--days > div:nth-child(7) {
|
||||||
|
// Cambia el color de los días sábado y domingo
|
||||||
|
color: #777777;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-calendar-month__week--wrapper {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-calendar-month__workweek {
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-calendar__button--bordered {
|
||||||
|
color: $info !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-calendar-month__day--content {
|
||||||
|
position: absolute;
|
||||||
|
top: 1;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-outside .calendar-event {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-calendar-month__workweek,
|
||||||
|
.q-calendar-month__head--workweek,
|
||||||
|
.q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
|
||||||
|
text-transform: capitalize;
|
||||||
|
color: #777;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&.--bordered {
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,10 +1,39 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="descriptor-skeleton">
|
<div id="descriptor-skeleton">
|
||||||
<div class="col q-pl-sm q-pa-sm">
|
<div class="row justify-between q-pa-sm">
|
||||||
<QSkeleton type="text" square height="45px" />
|
<QSkeleton square size="40px" />
|
||||||
<QSkeleton type="text" square height="18px" />
|
<QSkeleton square size="40px" />
|
||||||
<QSkeleton type="text" square height="18px" />
|
<QSkeleton square height="40px" width="20px" />
|
||||||
<QSkeleton type="text" square height="18px" />
|
</div>
|
||||||
|
<div class="col justify-between q-pa-sm q-gutter-y-xs">
|
||||||
|
<QSkeleton square height="40px" width="150px" />
|
||||||
|
<QSkeleton square height="30px" width="70px" />
|
||||||
|
</div>
|
||||||
|
<div class="col q-pl-sm q-pa-sm q-mb-md">
|
||||||
|
<div class="row justify-between">
|
||||||
|
<QSkeleton type="text" square height="30px" width="20%" />
|
||||||
|
<QSkeleton type="text" square height="30px" width="60%" />
|
||||||
|
</div>
|
||||||
|
<div class="row justify-between">
|
||||||
|
<QSkeleton type="text" square height="30px" width="20%" />
|
||||||
|
<QSkeleton type="text" square height="30px" width="60%" />
|
||||||
|
</div>
|
||||||
|
<div class="row justify-between">
|
||||||
|
<QSkeleton type="text" square height="30px" width="20%" />
|
||||||
|
<QSkeleton type="text" square height="30px" width="60%" />
|
||||||
|
</div>
|
||||||
|
<div class="row justify-between">
|
||||||
|
<QSkeleton type="text" square height="30px" width="20%" />
|
||||||
|
<QSkeleton type="text" square height="30px" width="60%" />
|
||||||
|
</div>
|
||||||
|
<div class="row justify-between">
|
||||||
|
<QSkeleton type="text" square height="30px" width="20%" />
|
||||||
|
<QSkeleton type="text" square height="30px" width="60%" />
|
||||||
|
</div>
|
||||||
|
<div class="row justify-between">
|
||||||
|
<QSkeleton type="text" square height="30px" width="20%" />
|
||||||
|
<QSkeleton type="text" square height="30px" width="60%" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<QCardActions>
|
<QCardActions>
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="q-pa-md">
|
<div class="q-pa-md">
|
||||||
<div class="row q-gutter-md q-mb-md">
|
<div class="row q-gutter-md q-mb-md">
|
||||||
<div class="col">
|
<QSkeleton type="QInput" square />
|
||||||
<QSkeleton type="QInput" square />
|
<QSkeleton type="QInput" square />
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<QSkeleton type="QInput" square />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row q-gutter-md q-mb-md">
|
<div class="row q-gutter-md q-mb-md">
|
||||||
<div class="col">
|
<QSkeleton type="QInput" square />
|
||||||
<QSkeleton type="QInput" square />
|
<QSkeleton type="QInput" square />
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<QSkeleton type="QInput" square />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row q-gutter-md q-mb-md">
|
<div class="row q-gutter-md q-mb-md">
|
||||||
<div class="col">
|
<QSkeleton type="QInput" square />
|
||||||
<QSkeleton type="QInput" square />
|
<QSkeleton type="QInput" square />
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<QSkeleton type="QInput" square />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row q-gutter-md">
|
<div class="row q-gutter-md">
|
||||||
<QSkeleton type="QBtn" />
|
<QSkeleton type="QBtn" />
|
||||||
|
|
|
||||||
|
|
@ -3,46 +3,36 @@
|
||||||
<QSkeleton type="rect" square />
|
<QSkeleton type="rect" square />
|
||||||
</div>
|
</div>
|
||||||
<div class="row q-pa-md q-col-gutter-md q-mb-md">
|
<div class="row q-pa-md q-col-gutter-md q-mb-md">
|
||||||
<div class="col">
|
<QSkeleton type="rect" class="q-mb-md" square />
|
||||||
<QSkeleton type="rect" class="q-mb-md" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="rect" class="q-mb-md" square />
|
||||||
</div>
|
<QSkeleton type="text" square />
|
||||||
<div class="col">
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="rect" class="q-mb-md" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="rect" class="q-mb-md" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="text" square />
|
||||||
</div>
|
<QSkeleton type="text" square />
|
||||||
<div class="col">
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="rect" class="q-mb-md" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="rect" class="q-mb-md" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="text" square />
|
||||||
</div>
|
<QSkeleton type="text" square />
|
||||||
<div class="col">
|
<QSkeleton type="rect" class="q-mb-md" square />
|
||||||
<QSkeleton type="rect" class="q-mb-md" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
<QSkeleton type="text" square />
|
||||||
<QSkeleton type="text" square />
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<QSkeleton type="rect" class="q-mb-md" square />
|
|
||||||
<QSkeleton type="text" square />
|
|
||||||
<QSkeleton type="text" square />
|
|
||||||
<QSkeleton type="text" square />
|
|
||||||
<QSkeleton type="text" square />
|
|
||||||
<QSkeleton type="text" square />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<template>
|
||||||
|
<div class="q-pa-md w">
|
||||||
|
<div class="row q-gutter-md q-mb-md">
|
||||||
|
<QSkeleton type="rect" square />
|
||||||
|
<QSkeleton type="rect" square />
|
||||||
|
<QSkeleton type="rect" square />
|
||||||
|
<QSkeleton type="rect" square />
|
||||||
|
<QSkeleton type="rect" square />
|
||||||
|
<QSkeleton type="rect" square />
|
||||||
|
</div>
|
||||||
|
<div class="row q-gutter-md q-mb-md" v-for="n in 5" :key="n">
|
||||||
|
<QSkeleton type="QInput" square />
|
||||||
|
<QSkeleton type="QInput" square />
|
||||||
|
<QSkeleton type="QInput" square />
|
||||||
|
<QSkeleton type="QInput" square />
|
||||||
|
<QSkeleton type="QInput" square />
|
||||||
|
<QSkeleton type="QInput" square />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.w {
|
||||||
|
width: 80vw;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<script setup>
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useSession } from 'src/composables/useSession';
|
||||||
|
import { useColor } from 'src/composables/useColor';
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
workerId: { type: Number, required: true },
|
||||||
|
description: { type: String, default: null },
|
||||||
|
size: { type: String, default: null },
|
||||||
|
title: { type: String, default: null },
|
||||||
|
});
|
||||||
|
const { getTokenMultimedia } = useSession();
|
||||||
|
const token = getTokenMultimedia();
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const title = computed(() => $props.title ?? t('globals.system'));
|
||||||
|
const showLetter = ref(false);
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="avatar-picture column items-center">
|
||||||
|
<QAvatar
|
||||||
|
:style="{
|
||||||
|
backgroundColor: useColor(title),
|
||||||
|
}"
|
||||||
|
:size="$props.size"
|
||||||
|
:title="title"
|
||||||
|
>
|
||||||
|
<template v-if="showLetter">{{ title.charAt(0) }}</template>
|
||||||
|
<QImg
|
||||||
|
v-else
|
||||||
|
:src="`/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`"
|
||||||
|
spinner-color="white"
|
||||||
|
@error="showLetter = true"
|
||||||
|
/>
|
||||||
|
</QAvatar>
|
||||||
|
<div class="description">
|
||||||
|
<slot name="description" v-if="$props.description">
|
||||||
|
<p>
|
||||||
|
{{ $props.description }}
|
||||||
|
</p>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -51,7 +51,7 @@ async function confirm() {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<QDialog ref="dialogRef" persistent>
|
<QDialog ref="dialogRef">
|
||||||
<QCard class="q-pa-sm">
|
<QCard class="q-pa-sm">
|
||||||
<QCardSection class="row items-center q-pb-none">
|
<QCardSection class="row items-center q-pb-none">
|
||||||
<QAvatar
|
<QAvatar
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,12 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref, computed } from 'vue';
|
import { onMounted, ref, computed, watch } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useArrayData } from 'composables/useArrayData';
|
import { useArrayData } from 'composables/useArrayData';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
import toDate from 'filters/toDate';
|
import toDate from 'filters/toDate';
|
||||||
|
|
||||||
|
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
dataKey: {
|
dataKey: {
|
||||||
|
|
@ -20,70 +23,132 @@ const props = defineProps({
|
||||||
required: false,
|
required: false,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
|
showAll: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
unremovableParams: {
|
||||||
|
type: Array,
|
||||||
|
required: false,
|
||||||
|
default: () => [],
|
||||||
|
description:
|
||||||
|
'Algunos filtros vienen con parametros de búsqueda por default y necesitan tener si o si un valor, por eso de ser necesario, esta prop nos sirve para saber que filtros podemos remover y cuales no',
|
||||||
|
},
|
||||||
|
exprBuilder: {
|
||||||
|
type: Function,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
hiddenTags: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
customTags: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['refresh', 'clear']);
|
const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
|
||||||
|
|
||||||
const arrayData = useArrayData(props.dataKey);
|
const arrayData = useArrayData(props.dataKey, {
|
||||||
|
exprBuilder: props.exprBuilder,
|
||||||
|
});
|
||||||
|
const route = useRoute();
|
||||||
const store = arrayData.store;
|
const store = arrayData.store;
|
||||||
const userParams = ref({});
|
const userParams = ref({});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.params) userParams.value = props.params;
|
if (props.params) userParams.value = JSON.parse(JSON.stringify(props.params));
|
||||||
const params = store.userParams;
|
if (Object.keys(store.userParams).length > 0) {
|
||||||
if (Object.keys(params).length > 0) {
|
userParams.value = JSON.parse(JSON.stringify(store.userParams));
|
||||||
userParams.value = Object.assign({}, params);
|
|
||||||
}
|
}
|
||||||
|
emit('init', { params: userParams.value });
|
||||||
});
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => route.query.params,
|
||||||
|
(val) => {
|
||||||
|
if (!val) {
|
||||||
|
userParams.value = {};
|
||||||
|
} else {
|
||||||
|
const parsedParams = JSON.parse(val);
|
||||||
|
userParams.value = { ...parsedParams };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
async function search() {
|
async function search() {
|
||||||
const params = userParams.value;
|
store.filter.where = {};
|
||||||
for (const param in params) {
|
|
||||||
if (params[param] === '' || params[param] === null) {
|
|
||||||
delete userParams.value[param];
|
|
||||||
delete store.userParams[param];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
await arrayData.addFilter({ params });
|
const params = { ...userParams.value };
|
||||||
|
store.userParamsChanged = true;
|
||||||
|
store.filter.skip = 0;
|
||||||
|
store.skip = 0;
|
||||||
|
const { params: newParams } = await arrayData.addFilter({ params });
|
||||||
|
userParams.value = newParams;
|
||||||
|
|
||||||
|
if (!props.showAll && !Object.values(params).length) store.data = [];
|
||||||
|
|
||||||
isLoading.value = false;
|
isLoading.value = false;
|
||||||
|
emit('search');
|
||||||
}
|
}
|
||||||
|
|
||||||
async function reload() {
|
async function reload() {
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
|
const params = Object.values(userParams.value).filter((param) => param);
|
||||||
|
|
||||||
await arrayData.fetch({ append: false });
|
await arrayData.fetch({ append: false });
|
||||||
|
if (!props.showAll && !params.length) store.data = [];
|
||||||
isLoading.value = false;
|
isLoading.value = false;
|
||||||
emit('refresh');
|
emit('refresh');
|
||||||
}
|
}
|
||||||
|
|
||||||
async function clearFilters() {
|
async function clearFilters() {
|
||||||
userParams.value = {};
|
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
await arrayData.applyFilter({ params: {} });
|
store.userParamsChanged = true;
|
||||||
isLoading.value = false;
|
store.filter.skip = 0;
|
||||||
|
store.skip = 0;
|
||||||
|
// Filtrar los params no removibles
|
||||||
|
const removableFilters = Object.keys(userParams.value).filter((param) =>
|
||||||
|
props.unremovableParams.includes(param)
|
||||||
|
);
|
||||||
|
const newParams = {};
|
||||||
|
// Conservar solo los params que no son removibles
|
||||||
|
for (const key of removableFilters) {
|
||||||
|
newParams[key] = userParams.value[key];
|
||||||
|
}
|
||||||
|
userParams.value = { ...newParams }; // Actualizar los params con los removibles
|
||||||
|
await arrayData.applyFilter({ params: userParams.value });
|
||||||
|
|
||||||
|
if (!props.showAll) {
|
||||||
|
store.data = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
isLoading.value = false;
|
||||||
emit('clear');
|
emit('clear');
|
||||||
}
|
}
|
||||||
|
|
||||||
const tags = computed(() => {
|
const tagsList = computed(() =>
|
||||||
const params = [];
|
Object.entries(userParams.value)
|
||||||
|
.filter(([key, value]) => value && !(props.hiddenTags || []).includes(key))
|
||||||
|
.map(([key, value]) => ({
|
||||||
|
label: key,
|
||||||
|
value: value,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
|
||||||
for (const param in store.userParams) {
|
const tags = computed(() =>
|
||||||
params.push({
|
tagsList.value.filter((tag) => !(props.customTags || []).includes(tag.label))
|
||||||
label: param,
|
);
|
||||||
value: store.userParams[param],
|
const customTags = computed(() =>
|
||||||
});
|
tagsList.value.filter((tag) => (props.customTags || []).includes(tag.label))
|
||||||
}
|
);
|
||||||
|
|
||||||
return params;
|
|
||||||
});
|
|
||||||
|
|
||||||
async function remove(key) {
|
async function remove(key) {
|
||||||
delete userParams.value[key];
|
userParams.value[key] = null;
|
||||||
delete store.userParams[key];
|
|
||||||
await search();
|
await search();
|
||||||
|
emit('remove', key);
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatValue(value) {
|
function formatValue(value) {
|
||||||
|
|
@ -98,8 +163,9 @@ function formatValue(value) {
|
||||||
return `"${value}"`;
|
return `"${value}"`;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<QForm @submit="search">
|
<QForm @submit="search" id="filterPanelForm">
|
||||||
<QList dense>
|
<QList dense>
|
||||||
<QItem class="q-mt-xs">
|
<QItem class="q-mt-xs">
|
||||||
<QItemSection top>
|
<QItemSection top>
|
||||||
|
|
@ -111,48 +177,44 @@ function formatValue(value) {
|
||||||
<div class="q-gutter-xs">
|
<div class="q-gutter-xs">
|
||||||
<QBtn
|
<QBtn
|
||||||
@click="clearFilters"
|
@click="clearFilters"
|
||||||
icon="filter_list_off"
|
|
||||||
color="primary"
|
color="primary"
|
||||||
size="sm"
|
dense
|
||||||
|
flat
|
||||||
|
icon="filter_list_off"
|
||||||
padding="none"
|
padding="none"
|
||||||
round
|
round
|
||||||
flat
|
size="sm"
|
||||||
dense
|
|
||||||
>
|
>
|
||||||
<QTooltip>{{ t('Remove filters') }}</QTooltip>
|
<QTooltip>{{ t('Remove filters') }}</QTooltip>
|
||||||
</QBtn>
|
</QBtn>
|
||||||
<QBtn
|
<QBtn
|
||||||
@click="reload"
|
@click="reload"
|
||||||
icon="refresh"
|
|
||||||
color="primary"
|
color="primary"
|
||||||
size="sm"
|
dense
|
||||||
|
flat
|
||||||
|
icon="refresh"
|
||||||
padding="none"
|
padding="none"
|
||||||
round
|
round
|
||||||
flat
|
size="sm"
|
||||||
dense
|
|
||||||
>
|
>
|
||||||
<QTooltip>{{ t('Refresh') }}</QTooltip>
|
<QTooltip>{{ t('Refresh') }}</QTooltip>
|
||||||
</QBtn>
|
</QBtn>
|
||||||
</div>
|
</div>
|
||||||
</QItemSection>
|
</QItemSection>
|
||||||
</QItem>
|
</QItem>
|
||||||
<QItem>
|
<QItem class="q-mb-sm">
|
||||||
<div
|
<div
|
||||||
v-if="tags.length === 0"
|
v-if="tagsList.length === 0"
|
||||||
class="text-grey font-xs text-center full-width"
|
class="text-grey font-xs text-center full-width"
|
||||||
>
|
>
|
||||||
{{ t(`No filters applied`) }}
|
{{ t(`No filters applied`) }}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<QChip
|
<VnFilterPanelChip
|
||||||
v-for="chip of tags"
|
v-for="chip of tags"
|
||||||
:key="chip.label"
|
:key="chip.label"
|
||||||
|
:removable="!unremovableParams.includes(chip.label)"
|
||||||
@remove="remove(chip.label)"
|
@remove="remove(chip.label)"
|
||||||
icon="label"
|
|
||||||
color="primary"
|
|
||||||
class="text-dark"
|
|
||||||
size="sm"
|
|
||||||
removable
|
|
||||||
>
|
>
|
||||||
<slot name="tags" :tag="chip" :format-fn="formatValue">
|
<slot name="tags" :tag="chip" :format-fn="formatValue">
|
||||||
<div class="q-gutter-x-xs">
|
<div class="q-gutter-x-xs">
|
||||||
|
|
@ -160,39 +222,55 @@ function formatValue(value) {
|
||||||
<span>"{{ chip.value }}"</span>
|
<span>"{{ chip.value }}"</span>
|
||||||
</div>
|
</div>
|
||||||
</slot>
|
</slot>
|
||||||
</QChip>
|
</VnFilterPanelChip>
|
||||||
|
<slot
|
||||||
|
v-if="$slots.customTags"
|
||||||
|
name="customTags"
|
||||||
|
:params="userParams"
|
||||||
|
:tags="customTags"
|
||||||
|
:format-fn="formatValue"
|
||||||
|
:search-fn="search"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</QItem>
|
</QItem>
|
||||||
<QSeparator />
|
<QSeparator />
|
||||||
<template v-if="props.searchButton">
|
|
||||||
<QItem>
|
|
||||||
<QItemSection class="q-py-sm">
|
|
||||||
<QBtn
|
|
||||||
:label="t('Search')"
|
|
||||||
type="submit"
|
|
||||||
color="primary"
|
|
||||||
class="full-width"
|
|
||||||
icon="search"
|
|
||||||
unelevated
|
|
||||||
rounded
|
|
||||||
dense
|
|
||||||
/>
|
|
||||||
</QItemSection>
|
|
||||||
</QItem>
|
|
||||||
<QSeparator />
|
|
||||||
</template>
|
|
||||||
</QList>
|
</QList>
|
||||||
<slot name="body" :params="userParams" :search-fn="search"></slot>
|
<QList dense class="list q-gutter-y-sm q-mt-sm">
|
||||||
|
<slot name="body" :params="userParams" :search-fn="search"></slot>
|
||||||
|
</QList>
|
||||||
|
<template v-if="props.searchButton">
|
||||||
|
<QItem>
|
||||||
|
<QItemSection class="q-py-sm">
|
||||||
|
<QBtn
|
||||||
|
:label="t('Search')"
|
||||||
|
class="full-width"
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
icon="search"
|
||||||
|
rounded
|
||||||
|
type="submit"
|
||||||
|
unelevated
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QSeparator />
|
||||||
|
</template>
|
||||||
</QForm>
|
</QForm>
|
||||||
<QInnerLoading
|
<QInnerLoading
|
||||||
:showing="isLoading"
|
|
||||||
:label="t('globals.pleaseWait')"
|
:label="t('globals.pleaseWait')"
|
||||||
|
:showing="isLoading"
|
||||||
color="primary"
|
color="primary"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.list {
|
||||||
|
width: 256px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<i18n>
|
<i18n>
|
||||||
es:
|
es:
|
||||||
No filters applied: No se han aplicado filtros
|
No filters applied: No se han aplicado filtros
|
||||||
Applied filters: Filtros aplicados
|
Applied filters: Filtros aplicados
|
||||||
Remove filters: Eliminar filtros
|
Remove filters: Eliminar filtros
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<script setup></script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<QChip class="text-dark" color="primary" icon="label" size="sm" v-bind="$attrs">
|
||||||
|
<slot />
|
||||||
|
</QChip>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<script setup>
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
const props = defineProps({
|
||||||
|
phoneNumber: { type: [String, Number], default: null },
|
||||||
|
});
|
||||||
|
const { t } = useI18n();
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<QBtn
|
||||||
|
v-if="props.phoneNumber"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
icon="phone"
|
||||||
|
size="sm"
|
||||||
|
color="primary"
|
||||||
|
padding="none"
|
||||||
|
:href="`sip:${props.phoneNumber}`"
|
||||||
|
@click.stop
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<script setup>
|
||||||
|
import { Dark } from 'quasar';
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
logo: {
|
||||||
|
type: String,
|
||||||
|
default: 'salix',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const src = computed({
|
||||||
|
get() {
|
||||||
|
return new URL(
|
||||||
|
`../../assets/${$props.logo}${Dark.isActive ? '_dark' : ''}.svg`,
|
||||||
|
import.meta.url
|
||||||
|
).href;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<QImg :src="src" v-bind="$attrs" />
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
<script setup>
|
||||||
|
import { dashIfEmpty } from 'src/filters';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useClipboard } from 'src/composables/useClipboard';
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
label: { type: String, default: null },
|
||||||
|
value: {
|
||||||
|
type: [String, Boolean, Number],
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
info: { type: String, default: null },
|
||||||
|
dash: { type: Boolean, default: true },
|
||||||
|
copy: { type: Boolean, default: false },
|
||||||
|
});
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { copyText } = useClipboard();
|
||||||
|
|
||||||
|
function copyValueText() {
|
||||||
|
copyText($props.value, {
|
||||||
|
component: {
|
||||||
|
copyValue: $props.value,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.label,
|
||||||
|
.value {
|
||||||
|
white-space: pre-line;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<div class="vn-label-value">
|
||||||
|
<div v-if="$props.label || $slots.label" class="label">
|
||||||
|
<slot name="label">
|
||||||
|
<span>{{ $props.label }}</span>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
<div class="value">
|
||||||
|
<slot name="value">
|
||||||
|
<span :title="$props.value">
|
||||||
|
{{ $props.dash ? dashIfEmpty($props.value) : $props.value }}
|
||||||
|
</span>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
<div class="info" v-if="$props.info">
|
||||||
|
<QIcon name="info" class="cursor-pointer" size="xs" color="grey">
|
||||||
|
<QTooltip class="bg-dark text-white shadow-4" :offset="[10, 10]">
|
||||||
|
{{ $props.info }}
|
||||||
|
</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
</div>
|
||||||
|
<div class="copy" v-if="$props.copy && $props.value" @click="copyValueText()">
|
||||||
|
<QIcon name="Content_Copy" color="primary">
|
||||||
|
<QTooltip>{{ t('globals.copyClipboard') }}</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.vn-label-value:hover .copy {
|
||||||
|
visibility: visible;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.copy {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,135 @@
|
||||||
|
<script setup>
|
||||||
|
import VnAvatar from 'src/components/ui/VnAvatar.vue';
|
||||||
|
import { toDateHourMin } from 'src/filters';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import VnPaginate from './VnPaginate.vue';
|
||||||
|
import VnUserLink from '../ui/VnUserLink.vue';
|
||||||
|
import { useState } from 'src/composables/useState';
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
url: { type: String, default: null },
|
||||||
|
filter: { type: Object, default: () => {} },
|
||||||
|
body: { type: Object, default: () => {} },
|
||||||
|
addNote: { type: Boolean, default: false },
|
||||||
|
});
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const state = useState();
|
||||||
|
const currentUser = ref(state.getUser());
|
||||||
|
const newNote = ref('');
|
||||||
|
const vnPaginateRef = ref();
|
||||||
|
|
||||||
|
async function insert() {
|
||||||
|
const body = $props.body;
|
||||||
|
Object.assign(body, { text: newNote.value });
|
||||||
|
await axios.post($props.url, body);
|
||||||
|
await vnPaginateRef.value.fetch();
|
||||||
|
newNote.value = '';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">
|
||||||
|
<QCardSection horizontal>
|
||||||
|
<VnAvatar :worker-id="currentUser.id" size="md" />
|
||||||
|
<div class="full-width row justify-between q-pa-xs">
|
||||||
|
<VnUserLink :name="t('New note')" :worker-id="currentUser.id" />
|
||||||
|
{{ t('globals.now') }}
|
||||||
|
</div>
|
||||||
|
</QCardSection>
|
||||||
|
<QCardSection class="q-pa-xs q-my-none q-py-none" horizontal>
|
||||||
|
<QInput
|
||||||
|
v-model="newNote"
|
||||||
|
class="full-width"
|
||||||
|
type="textarea"
|
||||||
|
:label="t('Add note here...')"
|
||||||
|
filled
|
||||||
|
size="lg"
|
||||||
|
autogrow
|
||||||
|
autofocus
|
||||||
|
@keyup.ctrl.enter.stop="insert"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<template #append
|
||||||
|
><QBtn
|
||||||
|
:title="t('Save (ctrl + Enter)')"
|
||||||
|
icon="save"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
@click="insert"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</QInput>
|
||||||
|
</QCardSection>
|
||||||
|
</QCard>
|
||||||
|
<VnPaginate
|
||||||
|
:data-key="$props.url"
|
||||||
|
:url="$props.url"
|
||||||
|
order="created DESC"
|
||||||
|
:limit="0"
|
||||||
|
:filter="$props.filter"
|
||||||
|
auto-load
|
||||||
|
ref="vnPaginateRef"
|
||||||
|
class="show"
|
||||||
|
v-bind="$attrs"
|
||||||
|
>
|
||||||
|
<template #body="{ rows }">
|
||||||
|
<TransitionGroup name="list" tag="div" class="column items-center full-width">
|
||||||
|
<QCard
|
||||||
|
class="q-pa-xs q-mb-sm full-width"
|
||||||
|
v-for="(note, index) in rows"
|
||||||
|
:key="note.id ?? index"
|
||||||
|
>
|
||||||
|
<QCardSection horizontal>
|
||||||
|
<VnAvatar
|
||||||
|
:descriptor="false"
|
||||||
|
:worker-id="note.workerFk"
|
||||||
|
size="md"
|
||||||
|
/>
|
||||||
|
<div class="full-width row justify-between q-pa-xs">
|
||||||
|
<VnUserLink
|
||||||
|
:name="`${note.worker.user.nickname}`"
|
||||||
|
:worker-id="note.worker.id"
|
||||||
|
/>
|
||||||
|
{{ toDateHourMin(note.created) }}
|
||||||
|
</div>
|
||||||
|
</QCardSection>
|
||||||
|
<QCardSection class="q-pa-xs q-my-none q-py-none">
|
||||||
|
{{ note.text }}
|
||||||
|
</QCardSection>
|
||||||
|
</QCard>
|
||||||
|
</TransitionGroup>
|
||||||
|
</template>
|
||||||
|
</VnPaginate>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.q-card {
|
||||||
|
width: 90%;
|
||||||
|
@media (max-width: $breakpoint-sm) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
&__section {
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.q-dialog .q-card {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
.list-enter-active,
|
||||||
|
.list-leave-active {
|
||||||
|
transition: all 1s ease;
|
||||||
|
}
|
||||||
|
.list-enter-from,
|
||||||
|
.list-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
background-color: $primary;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Add note here...: Añadir nota aquí...
|
||||||
|
New note: Nueva nota
|
||||||
|
Save (ctrl + Enter): Guardar (Ctrl + Intro)
|
||||||
|
|
||||||
|
</i18n>
|
||||||
|
|
@ -31,7 +31,7 @@ const props = defineProps({
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
order: {
|
order: {
|
||||||
type: String,
|
type: [String, Array],
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
limit: {
|
limit: {
|
||||||
|
|
@ -44,7 +44,19 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
offset: {
|
offset: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 500,
|
default: 0,
|
||||||
|
},
|
||||||
|
skeleton: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
exprBuilder: {
|
||||||
|
type: Function,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
disableInfiniteScroll: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -63,6 +75,7 @@ const arrayData = useArrayData(props.dataKey, {
|
||||||
limit: props.limit,
|
limit: props.limit,
|
||||||
order: props.order,
|
order: props.order,
|
||||||
userParams: props.userParams,
|
userParams: props.userParams,
|
||||||
|
exprBuilder: props.exprBuilder,
|
||||||
});
|
});
|
||||||
const store = arrayData.store;
|
const store = arrayData.store;
|
||||||
|
|
||||||
|
|
@ -77,12 +90,17 @@ watch(
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const addFilter = async (filter, params) => {
|
||||||
|
await arrayData.addFilter({ filter, params });
|
||||||
|
};
|
||||||
|
|
||||||
async function fetch() {
|
async function fetch() {
|
||||||
|
store.filter.skip = 0;
|
||||||
|
store.skip = 0;
|
||||||
await arrayData.fetch({ append: false });
|
await arrayData.fetch({ append: false });
|
||||||
if (!arrayData.hasMoreData.value) {
|
if (!store.hasMoreData) {
|
||||||
isLoading.value = false;
|
isLoading.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
emit('onFetch', store.data);
|
emit('onFetch', store.data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -93,9 +111,10 @@ async function paginate() {
|
||||||
|
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
await arrayData.loadMore();
|
await arrayData.loadMore();
|
||||||
|
if (!store.hasMoreData) {
|
||||||
if (!arrayData.hasMoreData.value) {
|
if (store.userParamsChanged) store.hasMoreData = true;
|
||||||
isLoading.value = false;
|
store.userParamsChanged = false;
|
||||||
|
endPagination();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -105,29 +124,32 @@ async function paginate() {
|
||||||
pagination.value.sortBy = sortBy;
|
pagination.value.sortBy = sortBy;
|
||||||
pagination.value.descending = descending;
|
pagination.value.descending = descending;
|
||||||
|
|
||||||
isLoading.value = false;
|
endPagination();
|
||||||
|
}
|
||||||
|
|
||||||
|
function endPagination() {
|
||||||
|
isLoading.value = false;
|
||||||
emit('onFetch', store.data);
|
emit('onFetch', store.data);
|
||||||
emit('onPaginate');
|
emit('onPaginate');
|
||||||
}
|
}
|
||||||
|
async function onLoad(index, done) {
|
||||||
|
if (!store.data) return done();
|
||||||
|
|
||||||
async function onLoad(...params) {
|
|
||||||
if (!store.data) return;
|
|
||||||
|
|
||||||
const done = params[1];
|
|
||||||
if (store.data.length === 0 || !props.url) return done(false);
|
if (store.data.length === 0 || !props.url) return done(false);
|
||||||
|
|
||||||
pagination.value.page = pagination.value.page + 1;
|
pagination.value.page = pagination.value.page + 1;
|
||||||
|
|
||||||
await paginate();
|
await paginate();
|
||||||
|
let isDone = false;
|
||||||
const endOfPages = !arrayData.hasMoreData.value;
|
if (store.userParamsChanged) isDone = !store.hasMoreData;
|
||||||
done(endOfPages);
|
done(isDone);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
defineExpose({ fetch, addFilter });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="full-width">
|
||||||
<div
|
<div
|
||||||
v-if="!props.autoLoad && !store.data && !isLoading"
|
v-if="!props.autoLoad && !store.data && !isLoading"
|
||||||
class="info-row q-pa-md text-center"
|
class="info-row q-pa-md text-center"
|
||||||
|
|
@ -137,15 +159,10 @@ async function onLoad(...params) {
|
||||||
</h5>
|
</h5>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="store.data && store.data.length === 0 && !isLoading"
|
v-if="props.skeleton && props.autoLoad && !store.data"
|
||||||
class="info-row q-pa-md text-center"
|
class="card-list q-gutter-y-md"
|
||||||
>
|
>
|
||||||
<h5>
|
<QCard class="card" v-for="$index in props.limit" :key="$index">
|
||||||
{{ t('No results found') }}
|
|
||||||
</h5>
|
|
||||||
</div>
|
|
||||||
<div v-if="props.autoLoad && !store.data" class="card-list q-gutter-y-md">
|
|
||||||
<QCard class="card" v-for="$index in $props.limit" :key="$index">
|
|
||||||
<QItem v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
|
<QItem v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
|
||||||
<QItemSection class="q-pa-md">
|
<QItemSection class="q-pa-md">
|
||||||
<QSkeleton type="rect" class="q-mb-md" square />
|
<QSkeleton type="rect" class="q-mb-md" square />
|
||||||
|
|
@ -164,12 +181,25 @@ async function onLoad(...params) {
|
||||||
</QCard>
|
</QCard>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<QInfiniteScroll v-if="store.data" @load="onLoad" :offset="offset">
|
<QInfiniteScroll
|
||||||
|
v-if="store.data"
|
||||||
|
@load="onLoad"
|
||||||
|
:offset="offset"
|
||||||
|
class="full-width"
|
||||||
|
:disable="disableInfiniteScroll || !store.hasMoreData"
|
||||||
|
v-bind="$attrs"
|
||||||
|
>
|
||||||
<slot name="body" :rows="store.data"></slot>
|
<slot name="body" :rows="store.data"></slot>
|
||||||
<div v-if="isLoading" class="info-row q-pa-md text-center">
|
<div v-if="isLoading" class="info-row q-pa-md text-center">
|
||||||
<QSpinner color="orange" size="md" />
|
<QSpinner color="orange" size="md" />
|
||||||
</div>
|
</div>
|
||||||
</QInfiniteScroll>
|
</QInfiniteScroll>
|
||||||
|
<div
|
||||||
|
v-if="!isLoading && store.hasMoreData"
|
||||||
|
class="w-full flex justify-center q-mt-md"
|
||||||
|
>
|
||||||
|
<QBtn color="primary" :label="t('Load more data')" @click="paginate()" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
@ -186,4 +216,5 @@ async function onLoad(...params) {
|
||||||
es:
|
es:
|
||||||
No data to display: Sin datos que mostrar
|
No data to display: Sin datos que mostrar
|
||||||
No results found: No se han encontrado resultados
|
No results found: No se han encontrado resultados
|
||||||
|
Load more data: Cargar más resultados
|
||||||
</i18n>
|
</i18n>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<template>
|
||||||
|
<div class="vn-row q-gutter-md q-mb-md">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scopped>
|
||||||
|
.vn-row {
|
||||||
|
display: flex;
|
||||||
|
> * {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
.vn-row {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,7 +1,11 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
import { useRouter, useRoute } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
import { useQuasar } from 'quasar';
|
||||||
import { useArrayData } from 'composables/useArrayData';
|
import { useArrayData } from 'composables/useArrayData';
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
|
||||||
|
const quasar = useQuasar();
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
dataKey: {
|
dataKey: {
|
||||||
|
|
@ -47,12 +51,23 @@ const props = defineProps({
|
||||||
type: Object,
|
type: Object,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
|
staticParams: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
exprBuilder: {
|
||||||
|
type: Function,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
customRouteRedirectName: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const route = useRoute();
|
|
||||||
const arrayData = useArrayData(props.dataKey, { ...props });
|
const arrayData = useArrayData(props.dataKey, { ...props });
|
||||||
const store = arrayData.store;
|
const { store } = arrayData;
|
||||||
const searchText = ref('');
|
const searchText = ref('');
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
@ -63,28 +78,46 @@ onMounted(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
async function search() {
|
async function search() {
|
||||||
|
const staticParams = Object.entries(store.userParams).filter(
|
||||||
|
([key, value]) => value && (props.staticParams || []).includes(key)
|
||||||
|
);
|
||||||
|
// const filter =props?.where? { where: JSON.parse(props.where) }: {}
|
||||||
await arrayData.applyFilter({
|
await arrayData.applyFilter({
|
||||||
params: {
|
params: {
|
||||||
|
// filter ,
|
||||||
|
...Object.fromEntries(staticParams),
|
||||||
search: searchText.value,
|
search: searchText.value,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
if (!props.redirect) return;
|
if (!props.redirect) return;
|
||||||
|
|
||||||
const rows = store.data;
|
if (props.customRouteRedirectName)
|
||||||
const module = route.matched[1];
|
return router.push({
|
||||||
if (rows.length === 1) {
|
name: props.customRouteRedirectName,
|
||||||
const [firstRow] = rows;
|
params: { id: searchText.value },
|
||||||
await router.push({ path: `/${module.name}/${firstRow.id}` });
|
});
|
||||||
} else if (route.matched.length > 3) {
|
|
||||||
await router.push({ path: `/${module.name}` });
|
const { matched: matches } = router.currentRoute.value;
|
||||||
arrayData.updateStateParams();
|
const { path } = matches.at(-1);
|
||||||
}
|
const [, moduleName] = path.split('/');
|
||||||
|
|
||||||
|
if (!store.data.length || store.data.length > 1)
|
||||||
|
return router.push({ path: `/${moduleName}/list` });
|
||||||
|
|
||||||
|
const targetId = store.data[0].id;
|
||||||
|
let targetUrl;
|
||||||
|
|
||||||
|
if (path.endsWith('/list')) targetUrl = path.replace('/list', `/${targetId}/summary`);
|
||||||
|
if (path.endsWith('-list')) targetUrl = path.replace('-list', `/${targetId}/summary`);
|
||||||
|
else if (path.includes(':id')) targetUrl = path.replace(':id', targetId);
|
||||||
|
|
||||||
|
await router.push({ path: targetUrl });
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<QForm @submit="search">
|
<QForm @submit="search" id="searchbarForm">
|
||||||
<QInput
|
<VnInput
|
||||||
id="searchbar"
|
id="searchbar"
|
||||||
v-model="searchText"
|
v-model="searchText"
|
||||||
:placeholder="props.label"
|
:placeholder="props.label"
|
||||||
|
|
@ -93,32 +126,30 @@ async function search() {
|
||||||
autofocus
|
autofocus
|
||||||
>
|
>
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<QIcon name="search" />
|
<QIcon
|
||||||
|
v-if="!quasar.platform.is.mobile"
|
||||||
|
class="cursor-pointer"
|
||||||
|
name="search"
|
||||||
|
@click="search"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template #append>
|
<template #append>
|
||||||
<QIcon
|
<QIcon
|
||||||
v-if="searchText !== ''"
|
v-if="props.info && $q.screen.gt.xs"
|
||||||
name="close"
|
name="info"
|
||||||
@click="searchText = ''"
|
class="cursor-info"
|
||||||
class="cursor-pointer"
|
>
|
||||||
/>
|
|
||||||
|
|
||||||
<QIcon v-if="props.info" name="info" class="cursor-info">
|
|
||||||
<QTooltip>{{ props.info }}</QTooltip>
|
<QTooltip>{{ props.info }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
</template>
|
</template>
|
||||||
</QInput>
|
</VnInput>
|
||||||
</QForm>
|
</QForm>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.q-field {
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: $breakpoint-sm-max) {
|
@media screen and (min-width: $breakpoint-sm-max) {
|
||||||
.q-field {
|
.q-field {
|
||||||
width: 400px;
|
width: 450px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -131,11 +162,14 @@ async function search() {
|
||||||
.cursor-info {
|
.cursor-info {
|
||||||
cursor: help;
|
cursor: help;
|
||||||
}
|
}
|
||||||
|
#searchbar {
|
||||||
.body--light #searchbar {
|
|
||||||
.q-field--standout.q-field--highlighted .q-field__control {
|
.q-field--standout.q-field--highlighted .q-field__control {
|
||||||
background-color: $grey-7;
|
background-color: white;
|
||||||
color: #333;
|
color: black;
|
||||||
|
.q-field__native,
|
||||||
|
.q-icon {
|
||||||
|
color: black !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,114 @@
|
||||||
|
<script setup>
|
||||||
|
import { onBeforeMount } from 'vue';
|
||||||
|
import { date } from 'quasar';
|
||||||
|
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||||
|
import VnAvatar from '../ui/VnAvatar.vue';
|
||||||
|
import VnUserLink from 'src/components/ui/VnUserLink.vue';
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
url: { type: String, default: null },
|
||||||
|
where: { type: Object, default: () => {} },
|
||||||
|
});
|
||||||
|
|
||||||
|
const filter = {
|
||||||
|
fields: ['smsFk'],
|
||||||
|
include: {
|
||||||
|
relation: 'sms',
|
||||||
|
scope: {
|
||||||
|
fields: [
|
||||||
|
'senderFk',
|
||||||
|
'sender',
|
||||||
|
'destination',
|
||||||
|
'message',
|
||||||
|
'statusCode',
|
||||||
|
'status',
|
||||||
|
'created',
|
||||||
|
],
|
||||||
|
include: {
|
||||||
|
relation: 'sender',
|
||||||
|
scope: {
|
||||||
|
fields: ['name'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
onBeforeMount(() => (filter.where = $props.where));
|
||||||
|
|
||||||
|
function formatNumber(number) {
|
||||||
|
if (number.length <= 10) return number;
|
||||||
|
return number.slice(0, 4) + ' ' + number.slice(4);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="column items-center">
|
||||||
|
<div class="list">
|
||||||
|
<VnPaginate
|
||||||
|
:data-key="$props.url"
|
||||||
|
:url="$props.url"
|
||||||
|
:filter="filter"
|
||||||
|
order="smsFk DESC"
|
||||||
|
:offset="100"
|
||||||
|
:limit="5"
|
||||||
|
auto-load
|
||||||
|
>
|
||||||
|
<template #body="{ rows }">
|
||||||
|
<QCard
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
class="card q-pa-md q-mb-sm smsCard"
|
||||||
|
v-for="row of rows"
|
||||||
|
:key="row.smsFk"
|
||||||
|
>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection side top>
|
||||||
|
<VnUserLink :worker-id="row.sms?.senderFk">
|
||||||
|
<template #link>
|
||||||
|
<VnAvatar
|
||||||
|
:worker-id="row.sms?.senderFk"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:title="row.sms?.sender?.name"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</VnUserLink>
|
||||||
|
</QItemSection>
|
||||||
|
<QSeparator />
|
||||||
|
<QItemSection>
|
||||||
|
<QItemLabel caption>{{
|
||||||
|
formatNumber(row.sms.destination)
|
||||||
|
}}</QItemLabel>
|
||||||
|
<QItemLabel>{{ row.sms.message }}</QItemLabel>
|
||||||
|
</QItemSection>
|
||||||
|
<QItemSection side>
|
||||||
|
<QItemLabel caption>{{
|
||||||
|
date.formatDate(
|
||||||
|
row.sms.created,
|
||||||
|
'YYYY-MM-DD HH:mm:ss'
|
||||||
|
)
|
||||||
|
}}</QItemLabel>
|
||||||
|
<QItemLabel class="row center">
|
||||||
|
<QChip
|
||||||
|
:color="
|
||||||
|
row.sms.status == 'OK'
|
||||||
|
? 'positive'
|
||||||
|
: 'negative'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ row.sms.status }}
|
||||||
|
</QChip>
|
||||||
|
</QItemLabel>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</QCard>
|
||||||
|
</template>
|
||||||
|
</VnPaginate>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.q-item__section--side {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, onUnmounted, ref } from 'vue';
|
||||||
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
|
const stateStore = useStateStore();
|
||||||
|
const actions = ref(null);
|
||||||
|
const data = ref(null);
|
||||||
|
const opts = { subtree: true, childList: true, attributes: true };
|
||||||
|
const hasContent = ref(false);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
stateStore.toggleSubToolbar();
|
||||||
|
actions.value = document.querySelector('#st-actions');
|
||||||
|
data.value = document.querySelector('#st-data');
|
||||||
|
|
||||||
|
if (!actions.value && !data.value) return;
|
||||||
|
|
||||||
|
// Check if there's content to display
|
||||||
|
const observer = new MutationObserver(
|
||||||
|
() =>
|
||||||
|
(hasContent.value =
|
||||||
|
actions.value.childNodes.length + data.value.childNodes.length)
|
||||||
|
);
|
||||||
|
if (actions.value) observer.observe(actions.value, opts);
|
||||||
|
if (data.value) observer.observe(data.value, opts);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
stateStore.toggleSubToolbar();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<QToolbar
|
||||||
|
class="justify-end sticky"
|
||||||
|
v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
|
||||||
|
>
|
||||||
|
<slot name="st-data">
|
||||||
|
<div id="st-data"></div>
|
||||||
|
</slot>
|
||||||
|
<QSpace />
|
||||||
|
<slot name="st-actions">
|
||||||
|
<div id="st-actions"></div>
|
||||||
|
</slot>
|
||||||
|
</QToolbar>
|
||||||
|
</template>
|
||||||
|
<style lang="scss">
|
||||||
|
.q-toolbar {
|
||||||
|
background: var(--vn-section-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.sticky {
|
||||||
|
position: sticky;
|
||||||
|
top: 61px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
@media (max-width: $breakpoint-sm) {
|
||||||
|
.sticky {
|
||||||
|
top: 90px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,221 @@
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useState } from 'src/composables/useState';
|
||||||
|
import { useQuasar } from 'quasar';
|
||||||
|
import DepartmentDescriptorProxy from 'src/pages/Department/Card/DepartmentDescriptorProxy.vue';
|
||||||
|
import CreateDepartmentChild from '../CreateDepartmentChild.vue';
|
||||||
|
import axios from 'axios';
|
||||||
|
import useNotify from 'src/composables/useNotify.js';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
const quasar = useQuasar();
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { notify } = useNotify();
|
||||||
|
const state = useState();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const treeRef = ref();
|
||||||
|
const showCreateNodeFormVal = ref(false);
|
||||||
|
const creationNodeSelectedId = ref(null);
|
||||||
|
const expanded = ref([]);
|
||||||
|
|
||||||
|
const nodes = ref([{ id: null, name: t('Departments'), sons: true, children: [{}] }]);
|
||||||
|
|
||||||
|
const fetchedChildrensSet = ref(new Set());
|
||||||
|
|
||||||
|
const onNodeExpanded = (nodeKeysArray) => {
|
||||||
|
if (!fetchedChildrensSet.value.has(nodeKeysArray.at(-1))) {
|
||||||
|
fetchedChildrensSet.value.add(nodeKeysArray.at(-1));
|
||||||
|
fetchNodeLeaves(nodeKeysArray.at(-1));
|
||||||
|
}
|
||||||
|
|
||||||
|
state.set('Tree', nodeKeysArray);
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchNodeLeaves = async (nodeKey) => {
|
||||||
|
try {
|
||||||
|
const node = treeRef.value?.getNodeByKey(nodeKey);
|
||||||
|
|
||||||
|
if (!node || node.sons === 0) return;
|
||||||
|
|
||||||
|
const params = { parentId: node.id };
|
||||||
|
const response = await axios.get('/departments/getLeaves', { params });
|
||||||
|
if (response.data) {
|
||||||
|
node.children = response.data.map((n) => {
|
||||||
|
const hasChildrens = n.sons > 0;
|
||||||
|
|
||||||
|
n.children = hasChildrens ? [{}] : null;
|
||||||
|
n.clickable = true;
|
||||||
|
return n;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
state.set('Tree', node);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error fetching department leaves', err);
|
||||||
|
throw new Error();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeNode = (node) => {
|
||||||
|
const { id, parentFk } = node;
|
||||||
|
quasar
|
||||||
|
.dialog({
|
||||||
|
title: t('Are you sure you want to delete it?'),
|
||||||
|
message: t('Delete department'),
|
||||||
|
ok: {
|
||||||
|
push: true,
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
cancel: true,
|
||||||
|
})
|
||||||
|
.onOk(async () => {
|
||||||
|
try {
|
||||||
|
await axios.post(`/Departments/${id}/removeChild`, id);
|
||||||
|
notify(t('department.departmentRemoved'), 'positive');
|
||||||
|
await fetchNodeLeaves(parentFk);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error removing department');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const showCreateNodeForm = (nodeId) => {
|
||||||
|
showCreateNodeFormVal.value = true;
|
||||||
|
creationNodeSelectedId.value = nodeId;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onNodeCreated = async () => {
|
||||||
|
await fetchNodeLeaves(creationNodeSelectedId.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(async (n) => {
|
||||||
|
const tree = [...state.get('Tree'), 1];
|
||||||
|
const lastStateTree = state.get('TreeState');
|
||||||
|
if (tree) {
|
||||||
|
for (let n of tree) {
|
||||||
|
await fetchNodeLeaves(n);
|
||||||
|
}
|
||||||
|
expanded.value = tree;
|
||||||
|
|
||||||
|
if (lastStateTree) {
|
||||||
|
tree.push(lastStateTree);
|
||||||
|
await fetchNodeLeaves(lastStateTree);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
if (lastStateTree) {
|
||||||
|
document.getElementById(lastStateTree).scrollIntoView();
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleEvent(type, event, node) {
|
||||||
|
const isParent = node.sons > 0;
|
||||||
|
const lastId = isParent ? node.id : node.parentFk;
|
||||||
|
|
||||||
|
switch (type) {
|
||||||
|
case 'path':
|
||||||
|
state.set('TreeState', lastId);
|
||||||
|
node.id && router.push({ path: `/department/department/${node.id}/summary` });
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'tab':
|
||||||
|
state.set('TreeState', lastId);
|
||||||
|
node.id &&
|
||||||
|
window.open(`#/department/department/${node.id}/summary`, '_blank');
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
node.id &&
|
||||||
|
router.push({ path: `#/department/department/${node.id}/summary` });
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<QCard class="full-width" style="max-width: 800px">
|
||||||
|
<QTree
|
||||||
|
ref="treeRef"
|
||||||
|
:nodes="nodes"
|
||||||
|
node-key="id"
|
||||||
|
label-key="name"
|
||||||
|
v-model:expanded="expanded"
|
||||||
|
@update:expanded="onNodeExpanded($event)"
|
||||||
|
:default-expand-all="true"
|
||||||
|
>
|
||||||
|
<template #default-header="{ node }">
|
||||||
|
<div
|
||||||
|
:id="node.id"
|
||||||
|
class="qtr row justify-between full-width q-pr-md cursor-pointer"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<span
|
||||||
|
@click="handleEvent('row', $event, node)"
|
||||||
|
class="cursor-pointer"
|
||||||
|
>
|
||||||
|
{{ node.name }}
|
||||||
|
<DepartmentDescriptorProxy :id="node.id" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
@click.stop.exact="handleEvent('path', $event, node)"
|
||||||
|
@click.ctrl.stop="handleEvent('tab', $event, node)"
|
||||||
|
style="flex-grow: 1; width: 10px"
|
||||||
|
></div>
|
||||||
|
<div class="row justify-between" style="max-width: max-content">
|
||||||
|
<QIcon
|
||||||
|
v-if="node.id"
|
||||||
|
name="delete"
|
||||||
|
color="primary"
|
||||||
|
size="sm"
|
||||||
|
class="q-pr-xs cursor-pointer"
|
||||||
|
@click.stop="removeNode(node)"
|
||||||
|
>
|
||||||
|
<QTooltip>
|
||||||
|
{{ t('Remove') }}
|
||||||
|
</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
<QIcon
|
||||||
|
name="add"
|
||||||
|
color="primary"
|
||||||
|
size="sm"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click.stop="showCreateNodeForm(node.id)"
|
||||||
|
>
|
||||||
|
<QTooltip>
|
||||||
|
{{ t('Create') }}
|
||||||
|
</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</QTree>
|
||||||
|
<QDialog
|
||||||
|
v-model="showCreateNodeFormVal"
|
||||||
|
transition-show="scale"
|
||||||
|
transition-hide="scale"
|
||||||
|
>
|
||||||
|
<CreateDepartmentChild
|
||||||
|
:parent-id="creationNodeSelectedId"
|
||||||
|
@on-data-saved="onNodeCreated()"
|
||||||
|
/>
|
||||||
|
</QDialog>
|
||||||
|
</QCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
span {
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Departments: Departamentos
|
||||||
|
Remove: Quitar
|
||||||
|
Create: Crear
|
||||||
|
Are you sure you want to delete it?: ¿Seguro que quieres eliminarlo?
|
||||||
|
Delete department: Eliminar departamento
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<script setup>
|
||||||
|
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
name: { type: String, default: null },
|
||||||
|
workerId: { type: Number, default: null },
|
||||||
|
defaultName: { type: Boolean, default: false },
|
||||||
|
});
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<slot name="link">
|
||||||
|
<span :class="{ link: $props.workerId }">
|
||||||
|
{{ $props.defaultName ? $props.name ?? t('globals.system') : $props.name }}
|
||||||
|
</span>
|
||||||
|
</slot>
|
||||||
|
<WorkerDescriptorProxy v-if="$props.workerId" :id="$props.workerId" />
|
||||||
|
</template>
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { useSession } from 'src/composables/useSession';
|
||||||
|
import { getUrl } from './getUrl';
|
||||||
|
|
||||||
|
const { getTokenMultimedia } = useSession();
|
||||||
|
const token = getTokenMultimedia();
|
||||||
|
|
||||||
|
export async function downloadFile(id, model = 'dms', urlPath = '/downloadFile', url) {
|
||||||
|
let appUrl = await getUrl('', 'lilium');
|
||||||
|
appUrl = appUrl.replace('/#/', '');
|
||||||
|
window.open(url ?? `${appUrl}/api/${model}/${id}${urlPath}?access_token=${token}`);
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue