Compare commits
No commits in common. "dev" and "warmfix_vnTable_card_descriptor" have entirely different histories.
dev
...
warmfix_vn
|
|
@ -1 +0,0 @@
|
||||||
node_modules
|
|
||||||
3095
CHANGELOG.md
3095
CHANGELOG.md
File diff suppressed because it is too large
Load Diff
|
|
@ -1,7 +1,6 @@
|
||||||
#!/usr/bin/env groovy
|
#!/usr/bin/env groovy
|
||||||
|
|
||||||
def PROTECTED_BRANCH
|
def PROTECTED_BRANCH
|
||||||
def IS_LATEST
|
|
||||||
|
|
||||||
def BRANCH_ENV = [
|
def BRANCH_ENV = [
|
||||||
test: 'test',
|
test: 'test',
|
||||||
|
|
@ -11,18 +10,16 @@ def BRANCH_ENV = [
|
||||||
|
|
||||||
node {
|
node {
|
||||||
stage('Setup') {
|
stage('Setup') {
|
||||||
|
env.FRONT_REPLICAS = 1
|
||||||
env.NODE_ENV = BRANCH_ENV[env.BRANCH_NAME] ?: 'dev'
|
env.NODE_ENV = BRANCH_ENV[env.BRANCH_NAME] ?: 'dev'
|
||||||
|
|
||||||
PROTECTED_BRANCH = [
|
PROTECTED_BRANCH = [
|
||||||
'dev',
|
'dev',
|
||||||
'test',
|
'test',
|
||||||
'master',
|
'master',
|
||||||
'main',
|
|
||||||
'beta'
|
'beta'
|
||||||
].contains(env.BRANCH_NAME)
|
].contains(env.BRANCH_NAME)
|
||||||
|
|
||||||
IS_LATEST = ['master', 'main'].contains(env.BRANCH_NAME)
|
|
||||||
|
|
||||||
// https://www.jenkins.io/doc/book/pipeline/jenkinsfile/#using-environment-variables
|
// https://www.jenkins.io/doc/book/pipeline/jenkinsfile/#using-environment-variables
|
||||||
echo "NODE_NAME: ${env.NODE_NAME}"
|
echo "NODE_NAME: ${env.NODE_NAME}"
|
||||||
echo "WORKSPACE: ${env.WORKSPACE}"
|
echo "WORKSPACE: ${env.WORKSPACE}"
|
||||||
|
|
@ -61,19 +58,6 @@ pipeline {
|
||||||
PROJECT_NAME = 'lilium'
|
PROJECT_NAME = 'lilium'
|
||||||
}
|
}
|
||||||
stages {
|
stages {
|
||||||
stage('Version') {
|
|
||||||
when {
|
|
||||||
expression { PROTECTED_BRANCH }
|
|
||||||
}
|
|
||||||
steps {
|
|
||||||
script {
|
|
||||||
def packageJson = readJSON file: 'package.json'
|
|
||||||
def version = "${packageJson.version}-build${env.BUILD_ID}"
|
|
||||||
writeFile(file: 'VERSION.txt', text: version)
|
|
||||||
echo "VERSION: ${version}"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
stage('Install') {
|
stage('Install') {
|
||||||
environment {
|
environment {
|
||||||
NODE_ENV = ""
|
NODE_ENV = ""
|
||||||
|
|
@ -87,48 +71,17 @@ pipeline {
|
||||||
expression { !PROTECTED_BRANCH }
|
expression { !PROTECTED_BRANCH }
|
||||||
}
|
}
|
||||||
environment {
|
environment {
|
||||||
NODE_ENV = ''
|
NODE_ENV = ""
|
||||||
CI = 'true'
|
|
||||||
TZ = 'Europe/Madrid'
|
|
||||||
}
|
}
|
||||||
parallel {
|
steps {
|
||||||
stage('Unit') {
|
sh 'pnpm run test:unit:ci'
|
||||||
steps {
|
}
|
||||||
sh 'pnpm run test:unit:ci'
|
post {
|
||||||
}
|
always {
|
||||||
post {
|
junit(
|
||||||
always {
|
testResults: 'junitresults.xml',
|
||||||
junit(
|
allowEmptyResults: true
|
||||||
testResults: 'junit/vitest.xml',
|
)
|
||||||
allowEmptyResults: true
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
stage('E2E') {
|
|
||||||
environment {
|
|
||||||
CREDENTIALS = credentials('docker-registry')
|
|
||||||
COMPOSE_PROJECT = "${PROJECT_NAME}-${env.BUILD_ID}"
|
|
||||||
COMPOSE_PARAMS = "-p ${env.COMPOSE_PROJECT} -f test/cypress/docker-compose.yml --project-directory ."
|
|
||||||
}
|
|
||||||
steps {
|
|
||||||
script {
|
|
||||||
def image = docker.build('lilium-dev', '-f docs/Dockerfile.dev docs')
|
|
||||||
sh "docker-compose ${env.COMPOSE_PARAMS} up -d"
|
|
||||||
image.inside("--network ${env.COMPOSE_PROJECT}_default -e CI -e TZ") {
|
|
||||||
sh 'cypress run --browser chromium'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
post {
|
|
||||||
always {
|
|
||||||
sh "docker-compose ${env.COMPOSE_PARAMS} down"
|
|
||||||
junit(
|
|
||||||
testResults: 'junit/e2e.xml',
|
|
||||||
allowEmptyResults: true
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -138,30 +91,25 @@ pipeline {
|
||||||
}
|
}
|
||||||
environment {
|
environment {
|
||||||
CREDENTIALS = credentials('docker-registry')
|
CREDENTIALS = credentials('docker-registry')
|
||||||
VERSION = readFile 'VERSION.txt'
|
|
||||||
}
|
}
|
||||||
steps {
|
steps {
|
||||||
|
sh 'quasar build'
|
||||||
script {
|
script {
|
||||||
sh 'quasar build'
|
def packageJson = readJSON file: 'package.json'
|
||||||
|
env.VERSION = "${packageJson.version}-build${env.BUILD_ID}"
|
||||||
def baseImage = "salix-frontend:${env.VERSION}"
|
|
||||||
def image = docker.build(baseImage, ".")
|
|
||||||
docker.withRegistry("https://${env.REGISTRY}", 'docker-registry') {
|
|
||||||
image.push()
|
|
||||||
image.push(env.BRANCH_NAME)
|
|
||||||
if (IS_LATEST) image.push('latest')
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
dockerBuild()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
stage('Deploy') {
|
stage('Deploy') {
|
||||||
when {
|
when {
|
||||||
expression { PROTECTED_BRANCH }
|
expression { PROTECTED_BRANCH }
|
||||||
}
|
}
|
||||||
environment {
|
|
||||||
VERSION = readFile 'VERSION.txt'
|
|
||||||
}
|
|
||||||
steps {
|
steps {
|
||||||
|
script {
|
||||||
|
def packageJson = readJSON file: 'package.json'
|
||||||
|
env.VERSION = "${packageJson.version}-build${env.BUILD_ID}"
|
||||||
|
}
|
||||||
withKubeConfig([
|
withKubeConfig([
|
||||||
serverUrl: "$KUBERNETES_API",
|
serverUrl: "$KUBERNETES_API",
|
||||||
credentialsId: 'kubernetes',
|
credentialsId: 'kubernetes',
|
||||||
|
|
|
||||||
|
|
@ -3,39 +3,10 @@ import { defineConfig } from 'cypress';
|
||||||
// https://docs.cypress.io/app/references/configuration
|
// https://docs.cypress.io/app/references/configuration
|
||||||
// https://www.npmjs.com/package/cypress-mochawesome-reporter
|
// https://www.npmjs.com/package/cypress-mochawesome-reporter
|
||||||
|
|
||||||
let urlHost,
|
|
||||||
reporter,
|
|
||||||
reporterOptions;
|
|
||||||
|
|
||||||
if (process.env.CI) {
|
|
||||||
urlHost = 'front';
|
|
||||||
reporter = 'junit';
|
|
||||||
reporterOptions = {
|
|
||||||
mochaFile: 'junit/e2e.xml',
|
|
||||||
toConsole: false,
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
urlHost = 'localhost';
|
|
||||||
reporter = 'cypress-mochawesome-reporter';
|
|
||||||
reporterOptions = {
|
|
||||||
charts: true,
|
|
||||||
reportPageTitle: 'Cypress Inline Reporter',
|
|
||||||
reportFilename: '[status]_[datetime]-report',
|
|
||||||
embeddedScreenshots: true,
|
|
||||||
reportDir: 'test/cypress/reports',
|
|
||||||
inlineAssets: true,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
e2e: {
|
e2e: {
|
||||||
baseUrl: `http://${urlHost}:9000`,
|
baseUrl: 'http://localhost:9000/',
|
||||||
experimentalStudio: false, // Desactivado para evitar tiempos de espera innecesarios
|
experimentalStudio: true,
|
||||||
defaultCommandTimeout: 10000,
|
|
||||||
trashAssetsBeforeRuns: false,
|
|
||||||
requestTimeout: 10000,
|
|
||||||
responseTimeout: 30000,
|
|
||||||
pageLoadTimeout: 60000,
|
|
||||||
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',
|
||||||
|
|
@ -45,33 +16,27 @@ export default defineConfig({
|
||||||
specPattern: 'test/cypress/integration/**/*.spec.js',
|
specPattern: 'test/cypress/integration/**/*.spec.js',
|
||||||
experimentalRunAllSpecs: true,
|
experimentalRunAllSpecs: true,
|
||||||
watchForFileChanges: true,
|
watchForFileChanges: true,
|
||||||
reporter,
|
reporter: 'cypress-mochawesome-reporter',
|
||||||
reporterOptions,
|
reporterOptions: {
|
||||||
|
charts: true,
|
||||||
|
reportPageTitle: 'Cypress Inline Reporter',
|
||||||
|
reportFilename: '[status]_[datetime]-report',
|
||||||
|
embeddedScreenshots: true,
|
||||||
|
reportDir: 'test/cypress/reports',
|
||||||
|
inlineAssets: true,
|
||||||
|
},
|
||||||
component: {
|
component: {
|
||||||
componentFolder: 'src',
|
componentFolder: 'src',
|
||||||
testFiles: '**/*.spec.js',
|
testFiles: '**/*.spec.js',
|
||||||
supportFile: 'test/cypress/support/unit.js',
|
supportFile: 'test/cypress/support/unit.js',
|
||||||
},/*
|
},
|
||||||
setupNodeEvents: async (on, config) => {
|
setupNodeEvents: async (on, config) => {
|
||||||
const plugin = await import('cypress-mochawesome-reporter/plugin');
|
const plugin = await import('cypress-mochawesome-reporter/plugin');
|
||||||
plugin.default(on);
|
plugin.default(on);
|
||||||
const fs = await import('fs');
|
|
||||||
on('task', {
|
|
||||||
deleteFile(filePath) {
|
|
||||||
if (fs.existsSync(filePath)) {
|
|
||||||
fs.unlinkSync(filePath);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
},*/
|
},
|
||||||
viewportWidth: 1280,
|
viewportWidth: 1280,
|
||||||
viewportHeight: 720,
|
viewportHeight: 720,
|
||||||
},
|
},
|
||||||
experimentalMemoryManagement: true,
|
|
||||||
defaultCommandTimeout: 10000,
|
|
||||||
numTestsKeptInMemory: 2,
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
version: '3.7'
|
||||||
|
services:
|
||||||
|
main:
|
||||||
|
image: registry.verdnatura.es/salix-frontend:${VERSION:?}
|
||||||
|
build:
|
||||||
|
context: .
|
||||||
|
dockerfile: ./Dockerfile
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
FROM debian:12.9-slim
|
|
||||||
|
|
||||||
ARG DEBIAN_FRONTEND=noninteractive
|
|
||||||
|
|
||||||
RUN apt-get update \
|
|
||||||
&& apt-get install -y --no-install-recommends \
|
|
||||||
ca-certificates \
|
|
||||||
curl \
|
|
||||||
gnupg2 \
|
|
||||||
&& curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
|
|
||||||
&& apt-get install -y --no-install-recommends nodejs \
|
|
||||||
&& npm install -g corepack@0.31.0 \
|
|
||||||
&& corepack enable pnpm \
|
|
||||||
&& rm -rf /var/lib/apt/lists/*
|
|
||||||
|
|
||||||
RUN apt-get update \
|
|
||||||
&& apt-get -y --no-install-recommends install \
|
|
||||||
apt-utils \
|
|
||||||
chromium \
|
|
||||||
libasound2 \
|
|
||||||
libgbm-dev \
|
|
||||||
libgtk-3-0 \
|
|
||||||
libgtk2.0-0 \
|
|
||||||
libnotify-dev \
|
|
||||||
libnss3 \
|
|
||||||
libxss1 \
|
|
||||||
libxtst6 \
|
|
||||||
xauth \
|
|
||||||
xvfb \
|
|
||||||
&& apt-get clean \
|
|
||||||
&& rm -rf /var/lib/apt/lists/*
|
|
||||||
|
|
||||||
RUN groupadd -r -g 1000 app \
|
|
||||||
&& useradd -r -u 1000 -g app -m -d /home/app app
|
|
||||||
USER app
|
|
||||||
|
|
||||||
ENV SHELL=bash
|
|
||||||
ENV PNPM_HOME="/home/app/.local/share/pnpm"
|
|
||||||
ENV PATH="$PNPM_HOME:$PATH"
|
|
||||||
|
|
||||||
RUN pnpm setup \
|
|
||||||
&& pnpm install --global cypress@13.6.6 \
|
|
||||||
&& cypress install
|
|
||||||
|
|
||||||
WORKDIR /app
|
|
||||||
146
package.json
146
package.json
|
|
@ -1,74 +1,74 @@
|
||||||
{
|
{
|
||||||
"name": "salix-front",
|
"name": "salix-front",
|
||||||
"version": "25.10.0",
|
"version": "25.06.0",
|
||||||
"description": "Salix frontend",
|
"description": "Salix frontend",
|
||||||
"productName": "Salix",
|
"productName": "Salix",
|
||||||
"author": "Verdnatura",
|
"author": "Verdnatura",
|
||||||
"private": true,
|
"private": true,
|
||||||
"packageManager": "pnpm@8.15.1",
|
"packageManager": "pnpm@8.15.1",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"resetDatabase": "cd ../salix && gulp docker",
|
"resetDatabase": "cd ../salix && gulp docker",
|
||||||
"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": "npm run resetDatabase && cd ../salix-front && cypress run",
|
"test:e2e:ci": "npm run resetDatabase && 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",
|
||||||
"commitlint": "commitlint --edit",
|
"commitlint": "commitlint --edit",
|
||||||
"prepare": "npx husky install",
|
"prepare": "npx husky install",
|
||||||
"addReferenceTag": "node .husky/addReferenceTag.js",
|
"addReferenceTag": "node .husky/addReferenceTag.js",
|
||||||
"docs:dev": "vitepress dev docs",
|
"docs:dev": "vitepress dev docs",
|
||||||
"docs:build": "vitepress build docs",
|
"docs:build": "vitepress build docs",
|
||||||
"docs:preview": "vitepress preview docs"
|
"docs:preview": "vitepress preview docs"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@quasar/cli": "^2.4.1",
|
"@quasar/cli": "^2.4.1",
|
||||||
"@quasar/extras": "^1.16.16",
|
"@quasar/extras": "^1.16.16",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
"chromium": "^3.0.3",
|
"chromium": "^3.0.3",
|
||||||
"croppie": "^2.6.5",
|
"croppie": "^2.6.5",
|
||||||
"moment": "^2.30.1",
|
"moment": "^2.30.1",
|
||||||
"pinia": "^2.1.3",
|
"pinia": "^2.1.3",
|
||||||
"quasar": "^2.17.7",
|
"quasar": "^2.17.7",
|
||||||
"validator": "^13.9.0",
|
"validator": "^13.9.0",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
"vue-i18n": "^9.3.0",
|
"vue-i18n": "^9.3.0",
|
||||||
"vue-router": "^4.2.5"
|
"vue-router": "^4.2.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^19.2.1",
|
"@commitlint/cli": "^19.2.1",
|
||||||
"@commitlint/config-conventional": "^19.1.0",
|
"@commitlint/config-conventional": "^19.1.0",
|
||||||
"@intlify/unplugin-vue-i18n": "^0.8.2",
|
"@intlify/unplugin-vue-i18n": "^0.8.2",
|
||||||
"@pinia/testing": "^0.1.2",
|
"@pinia/testing": "^0.1.2",
|
||||||
"@quasar/app-vite": "^2.0.8",
|
"@quasar/app-vite": "^2.0.8",
|
||||||
"@quasar/quasar-app-extension-qcalendar": "^4.0.2",
|
"@quasar/quasar-app-extension-qcalendar": "^4.0.2",
|
||||||
"@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
|
"@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
|
||||||
"@vue/test-utils": "^2.4.4",
|
"@vue/test-utils": "^2.4.4",
|
||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.14",
|
||||||
"cypress": "^13.6.6",
|
"cypress": "^13.6.6",
|
||||||
"cypress-mochawesome-reporter": "^3.8.2",
|
"cypress-mochawesome-reporter": "^3.8.2",
|
||||||
"eslint": "^9.18.0",
|
"eslint": "^9.18.0",
|
||||||
"eslint-config-prettier": "^10.0.1",
|
"eslint-config-prettier": "^10.0.1",
|
||||||
"eslint-plugin-cypress": "^4.1.0",
|
"eslint-plugin-cypress": "^4.1.0",
|
||||||
"eslint-plugin-vue": "^9.32.0",
|
"eslint-plugin-vue": "^9.32.0",
|
||||||
"husky": "^8.0.0",
|
"husky": "^8.0.0",
|
||||||
"postcss": "^8.4.23",
|
"postcss": "^8.4.23",
|
||||||
"prettier": "^3.4.2",
|
"prettier": "^3.4.2",
|
||||||
"sass": "^1.83.4",
|
"sass": "^1.83.4",
|
||||||
"vitepress": "^1.6.3",
|
"vitepress": "^1.6.3",
|
||||||
"vitest": "^0.34.0"
|
"vitest": "^0.34.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "^20 || ^18 || ^16",
|
"node": "^20 || ^18 || ^16",
|
||||||
"npm": ">= 8.1.2",
|
"npm": ">= 8.1.2",
|
||||||
"yarn": ">= 1.21.1",
|
"yarn": ">= 1.21.1",
|
||||||
"bun": ">= 1.0.25"
|
"bun": ">= 1.0.25"
|
||||||
},
|
},
|
||||||
"overrides": {
|
"overrides": {
|
||||||
"@vitejs/plugin-vue": "^5.2.1",
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
"vite": "^6.0.11",
|
"vite": "^6.0.11",
|
||||||
"vitest": "^0.31.1"
|
"vitest": "^0.31.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
path: '/api',
|
path: '/api',
|
||||||
rule: { target: 'http://127.0.0.1:3000' },
|
rule: { target: 'http://0.0.0.0:3000' },
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,6 @@
|
||||||
import { configure } from 'quasar/wrappers';
|
import { configure } from 'quasar/wrappers';
|
||||||
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
|
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
const target = `http://${process.env.CI ? 'back' : 'localhost'}:3000`;
|
|
||||||
|
|
||||||
export default configure(function (/* ctx */) {
|
export default configure(function (/* ctx */) {
|
||||||
return {
|
return {
|
||||||
|
|
@ -31,6 +30,7 @@ export default configure(function (/* ctx */) {
|
||||||
// --> 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', 'validations', 'quasar', 'quasar.defaults'],
|
boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar', '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'],
|
||||||
|
|
||||||
|
|
@ -109,17 +109,13 @@ export default configure(function (/* ctx */) {
|
||||||
},
|
},
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
||||||
target: target,
|
target: 'http://0.0.0.0:3000',
|
||||||
logLevel: 'debug',
|
logLevel: 'debug',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
secure: false,
|
secure: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
open: false,
|
open: false,
|
||||||
allowedHosts: [
|
|
||||||
'front', // Agrega este nombre de host
|
|
||||||
'localhost', // Opcional, para pruebas locales
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
|
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
|
||||||
|
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
export const langs = ['en', 'es'];
|
|
||||||
export const decimalPlaces = 2;
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
export default {
|
export default {
|
||||||
mounted(el, binding) {
|
mounted: function (el, binding) {
|
||||||
const shortcut = binding.value || '+';
|
const shortcut = binding.value ?? '+';
|
||||||
|
|
||||||
const { key, ctrl, alt, callback } =
|
const { key, ctrl, alt, callback } =
|
||||||
typeof shortcut === 'string'
|
typeof shortcut === 'string'
|
||||||
|
|
@ -8,24 +8,25 @@ export default {
|
||||||
key: shortcut,
|
key: shortcut,
|
||||||
ctrl: true,
|
ctrl: true,
|
||||||
alt: true,
|
alt: true,
|
||||||
callback: () => el?.click(),
|
callback: () =>
|
||||||
|
document
|
||||||
|
.querySelector(`button[shortcut="${shortcut}"]`)
|
||||||
|
?.click(),
|
||||||
}
|
}
|
||||||
: binding.value;
|
: binding.value;
|
||||||
|
|
||||||
if (!el.hasAttribute('shortcut')) {
|
|
||||||
el.setAttribute('shortcut', key);
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleKeydown = (event) => {
|
const handleKeydown = (event) => {
|
||||||
if (event.key === key && (!ctrl || event.ctrlKey) && (!alt || event.altKey)) {
|
if (event.key === key && (!ctrl || event.ctrlKey) && (!alt || event.altKey)) {
|
||||||
callback();
|
callback();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Attach the event listener to the window
|
||||||
window.addEventListener('keydown', handleKeydown);
|
window.addEventListener('keydown', handleKeydown);
|
||||||
|
|
||||||
el._handleKeydown = handleKeydown;
|
el._handleKeydown = handleKeydown;
|
||||||
},
|
},
|
||||||
unmounted(el) {
|
unmounted: function (el) {
|
||||||
if (el._handleKeydown) {
|
if (el._handleKeydown) {
|
||||||
window.removeEventListener('keydown', el._handleKeydown);
|
window.removeEventListener('keydown', el._handleKeydown);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,19 +9,19 @@ export default {
|
||||||
if (!form) return;
|
if (!form) return;
|
||||||
try {
|
try {
|
||||||
const inputsFormCard = form.querySelectorAll(
|
const inputsFormCard = form.querySelectorAll(
|
||||||
`input:not([disabled]):not([type="checkbox"])`,
|
`input:not([disabled]):not([type="checkbox"])`
|
||||||
);
|
);
|
||||||
if (inputsFormCard.length) {
|
if (inputsFormCard.length) {
|
||||||
focusFirstInput(inputsFormCard[0]);
|
focusFirstInput(inputsFormCard[0]);
|
||||||
}
|
}
|
||||||
const textareas = document.querySelectorAll(
|
const textareas = document.querySelectorAll(
|
||||||
'textarea:not([disabled]), [contenteditable]:not([disabled])',
|
'textarea:not([disabled]), [contenteditable]:not([disabled])'
|
||||||
);
|
);
|
||||||
if (textareas.length) {
|
if (textareas.length) {
|
||||||
focusFirstInput(textareas[textareas.length - 1]);
|
focusFirstInput(textareas[textareas.length - 1]);
|
||||||
}
|
}
|
||||||
const inputs = document.querySelectorAll(
|
const inputs = document.querySelectorAll(
|
||||||
'form#formModel input:not([disabled]):not([type="checkbox"])',
|
'form#formModel input:not([disabled]):not([type="checkbox"])'
|
||||||
);
|
);
|
||||||
const input = inputs[0];
|
const input = inputs[0];
|
||||||
if (!input) return;
|
if (!input) return;
|
||||||
|
|
@ -30,5 +30,22 @@ export default {
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
|
form.addEventListener('keyup', function (evt) {
|
||||||
|
if (evt.key === 'Enter' && !that.$attrs['prevent-submit']) {
|
||||||
|
const input = evt.target;
|
||||||
|
if (input.type == 'textarea' && evt.shiftKey) {
|
||||||
|
evt.preventDefault();
|
||||||
|
let { selectionStart, selectionEnd } = input;
|
||||||
|
input.value =
|
||||||
|
input.value.substring(0, selectionStart) +
|
||||||
|
'\n' +
|
||||||
|
input.value.substring(selectionEnd);
|
||||||
|
selectionStart = selectionEnd = selectionStart + 1;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
evt.preventDefault();
|
||||||
|
that.onSubmit();
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -51,5 +51,4 @@ export default boot(({ app }) => {
|
||||||
|
|
||||||
await useCau(response, message);
|
await useCau(response, message);
|
||||||
};
|
};
|
||||||
app.provide('app', app);
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ const { t } = useI18n();
|
||||||
const bicInputRef = ref(null);
|
const bicInputRef = ref(null);
|
||||||
const state = useState();
|
const state = useState();
|
||||||
|
|
||||||
const customer = computed(() => state.get('Customer'));
|
const customer = computed(() => state.get('customer'));
|
||||||
|
|
||||||
const countriesFilter = {
|
const countriesFilter = {
|
||||||
fields: ['id', 'name', 'code'],
|
fields: ['id', 'name', 'code'],
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
import { reactive, ref } from 'vue';
|
import { reactive, ref } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
import VnRow from 'components/ui/VnRow.vue';
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
import VnSelectProvince from 'src/components/VnSelectProvince.vue';
|
import VnSelectProvince from 'src/components/VnSelectProvince.vue';
|
||||||
|
|
@ -20,11 +21,14 @@ const postcodeFormData = reactive({
|
||||||
provinceFk: null,
|
provinceFk: null,
|
||||||
townFk: null,
|
townFk: null,
|
||||||
});
|
});
|
||||||
|
const townsFetchDataRef = ref(false);
|
||||||
const townFilter = ref({});
|
const townFilter = ref({});
|
||||||
|
|
||||||
const countriesRef = ref(false);
|
const countriesRef = ref(false);
|
||||||
const provincesOptions = ref([]);
|
const provincesOptions = ref([]);
|
||||||
|
const townsOptions = ref([]);
|
||||||
const town = ref({});
|
const town = ref({});
|
||||||
|
const countryFilter = ref({});
|
||||||
|
|
||||||
function onDataSaved(formData) {
|
function onDataSaved(formData) {
|
||||||
const newPostcode = {
|
const newPostcode = {
|
||||||
|
|
@ -47,6 +51,7 @@ async function setCountry(countryFk, data) {
|
||||||
data.townFk = null;
|
data.townFk = null;
|
||||||
data.provinceFk = null;
|
data.provinceFk = null;
|
||||||
data.countryFk = countryFk;
|
data.countryFk = countryFk;
|
||||||
|
await fetchTowns();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Province
|
// Province
|
||||||
|
|
@ -55,11 +60,22 @@ async function setProvince(id, data) {
|
||||||
const newProvince = provincesOptions.value.find((province) => province.id == id);
|
const newProvince = provincesOptions.value.find((province) => province.id == id);
|
||||||
if (newProvince) data.countryFk = newProvince.countryFk;
|
if (newProvince) data.countryFk = newProvince.countryFk;
|
||||||
postcodeFormData.provinceFk = id;
|
postcodeFormData.provinceFk = id;
|
||||||
|
await fetchTowns();
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onProvinceCreated(data) {
|
async function onProvinceCreated(data) {
|
||||||
postcodeFormData.provinceFk = data.id;
|
postcodeFormData.provinceFk = data.id;
|
||||||
}
|
}
|
||||||
|
function provinceByCountry(countryFk = postcodeFormData.countryFk) {
|
||||||
|
return provincesOptions.value
|
||||||
|
.filter((province) => province.countryFk === countryFk)
|
||||||
|
.map(({ id }) => id);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Town
|
||||||
|
async function handleTowns(data) {
|
||||||
|
townsOptions.value = data;
|
||||||
|
}
|
||||||
function setTown(newTown, data) {
|
function setTown(newTown, data) {
|
||||||
town.value = newTown;
|
town.value = newTown;
|
||||||
data.provinceFk = newTown?.provinceFk ?? newTown;
|
data.provinceFk = newTown?.provinceFk ?? newTown;
|
||||||
|
|
@ -72,6 +88,18 @@ async function onCityCreated(newTown, formData) {
|
||||||
formData.townFk = newTown;
|
formData.townFk = newTown;
|
||||||
setTown(newTown, formData);
|
setTown(newTown, formData);
|
||||||
}
|
}
|
||||||
|
async function fetchTowns(countryFk = postcodeFormData.countryFk) {
|
||||||
|
if (!countryFk) return;
|
||||||
|
const provinces = postcodeFormData.provinceFk
|
||||||
|
? [postcodeFormData.provinceFk]
|
||||||
|
: provinceByCountry();
|
||||||
|
townFilter.value.where = {
|
||||||
|
provinceFk: {
|
||||||
|
inq: provinces,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
await townsFetchDataRef.value?.fetch();
|
||||||
|
}
|
||||||
|
|
||||||
async function filterTowns(name) {
|
async function filterTowns(name) {
|
||||||
if (name !== '') {
|
if (name !== '') {
|
||||||
|
|
@ -80,11 +108,22 @@ async function filterTowns(name) {
|
||||||
like: `%${name}%`,
|
like: `%${name}%`,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
await townsFetchDataRef.value?.fetch();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<FetchData
|
||||||
|
ref="townsFetchDataRef"
|
||||||
|
:sort-by="['name ASC']"
|
||||||
|
:limit="30"
|
||||||
|
:filter="townFilter"
|
||||||
|
@on-fetch="handleTowns"
|
||||||
|
auto-load
|
||||||
|
url="Towns/location"
|
||||||
|
/>
|
||||||
|
|
||||||
<FormModelPopup
|
<FormModelPopup
|
||||||
url-create="postcodes"
|
url-create="postcodes"
|
||||||
model="postcode"
|
model="postcode"
|
||||||
|
|
@ -110,13 +149,14 @@ async function filterTowns(name) {
|
||||||
@filter="filterTowns"
|
@filter="filterTowns"
|
||||||
:tooltip="t('Create city')"
|
:tooltip="t('Create city')"
|
||||||
v-model="data.townFk"
|
v-model="data.townFk"
|
||||||
url="Towns/location"
|
:options="townsOptions"
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
:rules="validate('postcode.city')"
|
:rules="validate('postcode.city')"
|
||||||
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
|
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
|
||||||
:emit-value="false"
|
:emit-value="false"
|
||||||
required
|
required
|
||||||
data-cy="locationTown"
|
data-cy="locationTown"
|
||||||
sort-by="name ASC"
|
|
||||||
>
|
>
|
||||||
<template #option="{ itemProps, opt }">
|
<template #option="{ itemProps, opt }">
|
||||||
<QItem v-bind="itemProps">
|
<QItem v-bind="itemProps">
|
||||||
|
|
@ -157,12 +197,16 @@ async function filterTowns(name) {
|
||||||
/>
|
/>
|
||||||
<VnSelect
|
<VnSelect
|
||||||
ref="countriesRef"
|
ref="countriesRef"
|
||||||
|
:limit="30"
|
||||||
|
:filter="countryFilter"
|
||||||
:sort-by="['name ASC']"
|
:sort-by="['name ASC']"
|
||||||
auto-load
|
auto-load
|
||||||
url="Countries"
|
url="Countries"
|
||||||
required
|
required
|
||||||
:label="t('Country')"
|
:label="t('Country')"
|
||||||
hide-selected
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
v-model="data.countryFk"
|
v-model="data.countryFk"
|
||||||
:rules="validate('postcode.countryFk')"
|
:rules="validate('postcode.countryFk')"
|
||||||
@update:model-value="(value) => setCountry(value, data)"
|
@update:model-value="(value) => setCountry(value, data)"
|
||||||
|
|
|
||||||
|
|
@ -62,9 +62,12 @@ const where = computed(() => {
|
||||||
auto-load
|
auto-load
|
||||||
:where="where"
|
:where="where"
|
||||||
url="Autonomies/location"
|
url="Autonomies/location"
|
||||||
sort-by="name ASC"
|
:sort-by="['name ASC']"
|
||||||
|
:limit="30"
|
||||||
:label="t('Autonomy')"
|
:label="t('Autonomy')"
|
||||||
hide-selected
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
v-model="data.autonomyFk"
|
v-model="data.autonomyFk"
|
||||||
:rules="validate('province.autonomyFk')"
|
:rules="validate('province.autonomyFk')"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -64,10 +64,6 @@ const $props = defineProps({
|
||||||
type: Function,
|
type: Function,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
beforeSaveFn: {
|
|
||||||
type: Function,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
goTo: {
|
goTo: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
|
|
@ -180,11 +176,7 @@ async function saveChanges(data) {
|
||||||
hasChanges.value = false;
|
hasChanges.value = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let changes = data || getChanges();
|
const changes = data || getChanges();
|
||||||
if ($props.beforeSaveFn) {
|
|
||||||
changes = await $props.beforeSaveFn(changes, getChanges);
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await axios.post($props.saveUrl || $props.url + '/crud', changes);
|
await axios.post($props.saveUrl || $props.url + '/crud', changes);
|
||||||
} finally {
|
} finally {
|
||||||
|
|
@ -237,12 +229,12 @@ async function remove(data) {
|
||||||
componentProps: {
|
componentProps: {
|
||||||
title: t('globals.confirmDeletion'),
|
title: t('globals.confirmDeletion'),
|
||||||
message: t('globals.confirmDeletionMessage'),
|
message: t('globals.confirmDeletionMessage'),
|
||||||
data: { deletes: ids },
|
newData,
|
||||||
ids,
|
ids,
|
||||||
promise: saveChanges,
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
.onOk(async () => {
|
.onOk(async () => {
|
||||||
|
await saveChanges({ deletes: ids });
|
||||||
newData = newData.filter((form) => !ids.some((id) => id == form[pk]));
|
newData = newData.filter((form) => !ids.some((id) => id == form[pk]));
|
||||||
fetch(newData);
|
fetch(newData);
|
||||||
});
|
});
|
||||||
|
|
@ -382,8 +374,6 @@ watch(formUrl, async () => {
|
||||||
@click="onSubmit"
|
@click="onSubmit"
|
||||||
:disable="!hasChanges"
|
:disable="!hasChanges"
|
||||||
:title="t('globals.save')"
|
:title="t('globals.save')"
|
||||||
v-shortcut="'s'"
|
|
||||||
shortcut="s"
|
|
||||||
data-cy="crudModelDefaultSaveBtn"
|
data-cy="crudModelDefaultSaveBtn"
|
||||||
/>
|
/>
|
||||||
<slot name="moreAfterActions" />
|
<slot name="moreAfterActions" />
|
||||||
|
|
|
||||||
|
|
@ -42,6 +42,7 @@ const itemFilter = {
|
||||||
const itemFilterParams = reactive({});
|
const itemFilterParams = reactive({});
|
||||||
const closeButton = ref(null);
|
const closeButton = ref(null);
|
||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
|
const producersOptions = ref([]);
|
||||||
const ItemTypesOptions = ref([]);
|
const ItemTypesOptions = ref([]);
|
||||||
const InksOptions = ref([]);
|
const InksOptions = ref([]);
|
||||||
const tableRows = ref([]);
|
const tableRows = ref([]);
|
||||||
|
|
@ -120,17 +121,23 @@ const selectItem = ({ id }) => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<FetchData
|
||||||
|
url="Producers"
|
||||||
|
@on-fetch="(data) => (producersOptions = data)"
|
||||||
|
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
<FetchData
|
<FetchData
|
||||||
url="ItemTypes"
|
url="ItemTypes"
|
||||||
:filter="{ fields: ['id', 'name'], order: 'name ASC' }"
|
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||||
order="name ASC"
|
order="name"
|
||||||
@on-fetch="(data) => (ItemTypesOptions = data)"
|
@on-fetch="(data) => (ItemTypesOptions = data)"
|
||||||
auto-load
|
auto-load
|
||||||
/>
|
/>
|
||||||
<FetchData
|
<FetchData
|
||||||
url="Inks"
|
url="Inks"
|
||||||
:filter="{ fields: ['id', 'name'], order: 'name ASC' }"
|
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||||
order="name ASC"
|
order="name"
|
||||||
@on-fetch="(data) => (InksOptions = data)"
|
@on-fetch="(data) => (InksOptions = data)"
|
||||||
auto-load
|
auto-load
|
||||||
/>
|
/>
|
||||||
|
|
@ -145,11 +152,11 @@ const selectItem = ({ id }) => {
|
||||||
<VnInput :label="t('entry.buys.size')" v-model="itemFilterParams.size" />
|
<VnInput :label="t('entry.buys.size')" v-model="itemFilterParams.size" />
|
||||||
<VnSelect
|
<VnSelect
|
||||||
:label="t('globals.producer')"
|
:label="t('globals.producer')"
|
||||||
|
:options="producersOptions"
|
||||||
hide-selected
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
v-model="itemFilterParams.producerFk"
|
v-model="itemFilterParams.producerFk"
|
||||||
url="Producers"
|
|
||||||
:fields="['id', 'name']"
|
|
||||||
sort-by="name ASC"
|
|
||||||
/>
|
/>
|
||||||
<VnSelect
|
<VnSelect
|
||||||
:label="t('globals.type')"
|
:label="t('globals.type')"
|
||||||
|
|
|
||||||
|
|
@ -124,7 +124,7 @@ const selectTravel = ({ id }) => {
|
||||||
<FetchData
|
<FetchData
|
||||||
url="AgencyModes"
|
url="AgencyModes"
|
||||||
@on-fetch="(data) => (agenciesOptions = data)"
|
@on-fetch="(data) => (agenciesOptions = data)"
|
||||||
:filter="{ fields: ['id', 'name'], order: 'name ASC' }"
|
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||||
auto-load
|
auto-load
|
||||||
/>
|
/>
|
||||||
<FetchData
|
<FetchData
|
||||||
|
|
@ -181,7 +181,6 @@ const selectTravel = ({ id }) => {
|
||||||
color="primary"
|
color="primary"
|
||||||
:disabled="isLoading"
|
:disabled="isLoading"
|
||||||
:loading="isLoading"
|
:loading="isLoading"
|
||||||
data-cy="save-filter-travel-form"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<QTable
|
<QTable
|
||||||
|
|
@ -192,10 +191,9 @@ const selectTravel = ({ id }) => {
|
||||||
:no-data-label="t('Enter a new search')"
|
:no-data-label="t('Enter a new search')"
|
||||||
class="q-mt-lg"
|
class="q-mt-lg"
|
||||||
@row-click="(_, row) => selectTravel(row)"
|
@row-click="(_, row) => selectTravel(row)"
|
||||||
data-cy="table-filter-travel-form"
|
|
||||||
>
|
>
|
||||||
<template #body-cell-id="{ row }">
|
<template #body-cell-id="{ row }">
|
||||||
<QTd auto-width @click.stop data-cy="travelFk-travel-form">
|
<QTd auto-width @click.stop>
|
||||||
<QBtn flat color="blue">{{ row.id }}</QBtn>
|
<QBtn flat color="blue">{{ row.id }}</QBtn>
|
||||||
<TravelDescriptorProxy :id="row.id" />
|
<TravelDescriptorProxy :id="row.id" />
|
||||||
</QTd>
|
</QTd>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { onMounted, onUnmounted, computed, ref, watch, nextTick, useAttrs } from 'vue';
|
import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue';
|
||||||
import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router';
|
import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useQuasar } from 'quasar';
|
import { useQuasar } from 'quasar';
|
||||||
|
|
@ -12,7 +12,6 @@ import SkeletonForm from 'components/ui/SkeletonForm.vue';
|
||||||
import VnConfirm from './ui/VnConfirm.vue';
|
import VnConfirm from './ui/VnConfirm.vue';
|
||||||
import { tMobile } from 'src/composables/tMobile';
|
import { tMobile } from 'src/composables/tMobile';
|
||||||
import { useArrayData } from 'src/composables/useArrayData';
|
import { useArrayData } from 'src/composables/useArrayData';
|
||||||
import { getDifferences, getUpdatedValues } from 'src/filters';
|
|
||||||
|
|
||||||
const { push } = useRouter();
|
const { push } = useRouter();
|
||||||
const quasar = useQuasar();
|
const quasar = useQuasar();
|
||||||
|
|
@ -23,7 +22,6 @@ const { validate } = useValidator();
|
||||||
const { notify } = useNotify();
|
const { notify } = useNotify();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const myForm = ref(null);
|
const myForm = ref(null);
|
||||||
const attrs = useAttrs();
|
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
url: {
|
url: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|
@ -86,7 +84,7 @@ const $props = defineProps({
|
||||||
},
|
},
|
||||||
reload: {
|
reload: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: false,
|
||||||
},
|
},
|
||||||
defaultTrim: {
|
defaultTrim: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
|
@ -99,7 +97,7 @@ const $props = defineProps({
|
||||||
});
|
});
|
||||||
const emit = defineEmits(['onFetch', 'onDataSaved']);
|
const emit = defineEmits(['onFetch', 'onDataSaved']);
|
||||||
const modelValue = computed(
|
const modelValue = computed(
|
||||||
() => $props.model ?? `formModel_${route?.meta?.title ?? route.name}`,
|
() => $props.model ?? `formModel_${route?.meta?.title ?? route.name}`
|
||||||
).value;
|
).value;
|
||||||
const componentIsRendered = ref(false);
|
const componentIsRendered = ref(false);
|
||||||
const arrayData = useArrayData(modelValue);
|
const arrayData = useArrayData(modelValue);
|
||||||
|
|
@ -107,15 +105,15 @@ const isLoading = ref(false);
|
||||||
// Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
|
// Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
|
||||||
const isResetting = ref(false);
|
const isResetting = ref(false);
|
||||||
const hasChanges = ref(!$props.observeFormChanges);
|
const hasChanges = ref(!$props.observeFormChanges);
|
||||||
const originalData = computed(() => state.get(modelValue));
|
const originalData = ref({});
|
||||||
const formData = ref();
|
const formData = computed(() => state.get(modelValue));
|
||||||
const defaultButtons = computed(() => ({
|
const defaultButtons = computed(() => ({
|
||||||
save: {
|
save: {
|
||||||
dataCy: 'saveDefaultBtn',
|
dataCy: 'saveDefaultBtn',
|
||||||
color: 'primary',
|
color: 'primary',
|
||||||
icon: 'save',
|
icon: 'save',
|
||||||
label: 'globals.save',
|
label: 'globals.save',
|
||||||
click: async () => await save(),
|
click: () => myForm.value.submit(),
|
||||||
type: 'submit',
|
type: 'submit',
|
||||||
},
|
},
|
||||||
reset: {
|
reset: {
|
||||||
|
|
@ -129,6 +127,8 @@ const defaultButtons = computed(() => ({
|
||||||
}));
|
}));
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
|
originalData.value = JSON.parse(JSON.stringify($props.formInitialData ?? {}));
|
||||||
|
|
||||||
nextTick(() => (componentIsRendered.value = true));
|
nextTick(() => (componentIsRendered.value = true));
|
||||||
|
|
||||||
// Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
|
// Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
|
||||||
|
|
@ -136,8 +136,7 @@ onMounted(async () => {
|
||||||
|
|
||||||
if (!$props.formInitialData) {
|
if (!$props.formInitialData) {
|
||||||
if ($props.autoLoad && $props.url) await fetch();
|
if ($props.autoLoad && $props.url) await fetch();
|
||||||
else if (arrayData.store.data)
|
else if (arrayData.store.data) updateAndEmit('onFetch', arrayData.store.data);
|
||||||
updateAndEmit('onFetch', { val: arrayData.store.data });
|
|
||||||
}
|
}
|
||||||
if ($props.observeFormChanges) {
|
if ($props.observeFormChanges) {
|
||||||
watch(
|
watch(
|
||||||
|
|
@ -149,7 +148,7 @@ onMounted(async () => {
|
||||||
JSON.stringify(newVal) !== JSON.stringify(originalData.value);
|
JSON.stringify(newVal) !== JSON.stringify(originalData.value);
|
||||||
isResetting.value = false;
|
isResetting.value = false;
|
||||||
},
|
},
|
||||||
{ deep: true },
|
{ deep: true }
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -157,24 +156,16 @@ onMounted(async () => {
|
||||||
if (!$props.url)
|
if (!$props.url)
|
||||||
watch(
|
watch(
|
||||||
() => arrayData.store.data,
|
() => arrayData.store.data,
|
||||||
(val) => updateAndEmit('onFetch', { val }),
|
(val) => updateAndEmit('onFetch', val)
|
||||||
);
|
);
|
||||||
|
|
||||||
watch(
|
|
||||||
originalData,
|
|
||||||
(val) => {
|
|
||||||
if (val) formData.value = JSON.parse(JSON.stringify(val));
|
|
||||||
},
|
|
||||||
{ immediate: true },
|
|
||||||
);
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => [$props.url, $props.filter],
|
() => [$props.url, $props.filter],
|
||||||
async () => {
|
async () => {
|
||||||
state.set(modelValue, null);
|
originalData.value = null;
|
||||||
reset();
|
reset();
|
||||||
await fetch();
|
await fetch();
|
||||||
},
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
onBeforeRouteLeave((to, from, next) => {
|
onBeforeRouteLeave((to, from, next) => {
|
||||||
|
|
@ -203,9 +194,10 @@ async function fetch() {
|
||||||
});
|
});
|
||||||
if (Array.isArray(data)) data = data[0] ?? {};
|
if (Array.isArray(data)) data = data[0] ?? {};
|
||||||
|
|
||||||
updateAndEmit('onFetch', { val: data });
|
updateAndEmit('onFetch', data);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
state.set(modelValue, {});
|
state.set(modelValue, {});
|
||||||
|
originalData.value = {};
|
||||||
throw e;
|
throw e;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -230,11 +222,7 @@ async function save() {
|
||||||
|
|
||||||
if ($props.urlCreate) notify('globals.dataCreated', 'positive');
|
if ($props.urlCreate) notify('globals.dataCreated', 'positive');
|
||||||
|
|
||||||
updateAndEmit('onDataSaved', {
|
updateAndEmit('onDataSaved', formData.value, response?.data);
|
||||||
val: formData.value,
|
|
||||||
res: response?.data,
|
|
||||||
old: originalData.value,
|
|
||||||
});
|
|
||||||
if ($props.reload) await arrayData.fetch({});
|
if ($props.reload) await arrayData.fetch({});
|
||||||
hasChanges.value = false;
|
hasChanges.value = false;
|
||||||
} finally {
|
} finally {
|
||||||
|
|
@ -248,8 +236,7 @@ async function saveAndGo() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function reset() {
|
function reset() {
|
||||||
formData.value = JSON.parse(JSON.stringify(originalData.value));
|
updateAndEmit('onFetch', originalData.value);
|
||||||
updateAndEmit('onFetch', { val: originalData.value });
|
|
||||||
if ($props.observeFormChanges) {
|
if ($props.observeFormChanges) {
|
||||||
hasChanges.value = false;
|
hasChanges.value = false;
|
||||||
isResetting.value = true;
|
isResetting.value = true;
|
||||||
|
|
@ -267,15 +254,16 @@ function filter(value, update, filterOptions) {
|
||||||
(ref) => {
|
(ref) => {
|
||||||
ref.setOptionIndex(-1);
|
ref.setOptionIndex(-1);
|
||||||
ref.moveOptionSelection(1, true);
|
ref.moveOptionSelection(1, true);
|
||||||
},
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateAndEmit(evt, { val, res, old } = { val: null, res: null, old: null }) {
|
function updateAndEmit(evt, val, res) {
|
||||||
state.set(modelValue, val);
|
state.set(modelValue, val);
|
||||||
|
originalData.value = val && JSON.parse(JSON.stringify(val));
|
||||||
if (!$props.url) arrayData.store.data = val;
|
if (!$props.url) arrayData.store.data = val;
|
||||||
|
|
||||||
emit(evt, state.get(modelValue), res, old);
|
emit(evt, state.get(modelValue), res);
|
||||||
}
|
}
|
||||||
|
|
||||||
function trimData(data) {
|
function trimData(data) {
|
||||||
|
|
@ -285,27 +273,6 @@ function trimData(data) {
|
||||||
}
|
}
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
function onBeforeSave(formData, originalData) {
|
|
||||||
return getUpdatedValues(
|
|
||||||
Object.keys(getDifferences(formData, originalData)),
|
|
||||||
formData,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
async function onKeyup(evt) {
|
|
||||||
if (evt.key === 'Enter' && !('prevent-submit' in attrs)) {
|
|
||||||
const input = evt.target;
|
|
||||||
if (input.type == 'textarea' && evt.shiftKey) {
|
|
||||||
let { selectionStart, selectionEnd } = input;
|
|
||||||
input.value =
|
|
||||||
input.value.substring(0, selectionStart) +
|
|
||||||
'\n' +
|
|
||||||
input.value.substring(selectionEnd);
|
|
||||||
selectionStart = selectionEnd = selectionStart + 1;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
await save();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
save,
|
save,
|
||||||
|
|
@ -321,13 +288,12 @@ defineExpose({
|
||||||
<QForm
|
<QForm
|
||||||
ref="myForm"
|
ref="myForm"
|
||||||
v-if="formData"
|
v-if="formData"
|
||||||
@submit.prevent
|
@submit="save"
|
||||||
@keyup.prevent="onKeyup"
|
|
||||||
@reset="reset"
|
@reset="reset"
|
||||||
class="q-pa-md"
|
class="q-pa-md"
|
||||||
:style="maxWidth ? 'max-width: ' + maxWidth : ''"
|
:style="maxWidth ? 'max-width: ' + maxWidth : ''"
|
||||||
id="formModel"
|
id="formModel"
|
||||||
:mapper="onBeforeSave"
|
:prevent-submit="$attrs['prevent-submit']"
|
||||||
>
|
>
|
||||||
<QCard>
|
<QCard>
|
||||||
<slot
|
<slot
|
||||||
|
|
|
||||||
|
|
@ -15,35 +15,23 @@ defineProps({
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
showSaveAndContinueBtn: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
const formModelRef = ref(null);
|
const formModelRef = ref(null);
|
||||||
const closeButton = ref(null);
|
const closeButton = ref(null);
|
||||||
const isSaveAndContinue = ref(false);
|
|
||||||
const onDataSaved = (formData, requestResponse) => {
|
const onDataSaved = (formData, requestResponse) => {
|
||||||
if (closeButton.value && !isSaveAndContinue.value) closeButton.value.click();
|
if (closeButton.value) closeButton.value.click();
|
||||||
emit('onDataSaved', formData, requestResponse);
|
emit('onDataSaved', formData, requestResponse);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClick = async (saveAndContinue) => {
|
|
||||||
isSaveAndContinue.value = saveAndContinue;
|
|
||||||
await formModelRef.value.save();
|
|
||||||
};
|
|
||||||
|
|
||||||
const isLoading = computed(() => formModelRef.value?.isLoading);
|
const isLoading = computed(() => formModelRef.value?.isLoading);
|
||||||
const reset = computed(() => formModelRef.value?.reset);
|
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
isLoading,
|
isLoading,
|
||||||
onDataSaved,
|
onDataSaved,
|
||||||
isSaveAndContinue,
|
|
||||||
reset,
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -71,19 +59,15 @@ defineExpose({
|
||||||
flat
|
flat
|
||||||
:disabled="isLoading"
|
:disabled="isLoading"
|
||||||
:loading="isLoading"
|
:loading="isLoading"
|
||||||
data-cy="FormModelPopup_cancel"
|
@click="emit('onDataCanceled')"
|
||||||
v-close-popup
|
v-close-popup
|
||||||
|
data-cy="FormModelPopup_cancel"
|
||||||
z-max
|
z-max
|
||||||
@click="
|
|
||||||
isSaveAndContinue = false;
|
|
||||||
emit('onDataCanceled');
|
|
||||||
"
|
|
||||||
/>
|
/>
|
||||||
<QBtn
|
<QBtn
|
||||||
:flat="showSaveAndContinueBtn"
|
|
||||||
:label="t('globals.save')"
|
:label="t('globals.save')"
|
||||||
:title="t('globals.save')"
|
:title="t('globals.save')"
|
||||||
@click="onClick(false)"
|
type="submit"
|
||||||
color="primary"
|
color="primary"
|
||||||
class="q-ml-sm"
|
class="q-ml-sm"
|
||||||
:disabled="isLoading"
|
:disabled="isLoading"
|
||||||
|
|
@ -91,18 +75,6 @@ defineExpose({
|
||||||
data-cy="FormModelPopup_save"
|
data-cy="FormModelPopup_save"
|
||||||
z-max
|
z-max
|
||||||
/>
|
/>
|
||||||
<QBtn
|
|
||||||
v-if="showSaveAndContinueBtn"
|
|
||||||
:label="t('globals.isSaveAndContinue')"
|
|
||||||
:title="t('globals.isSaveAndContinue')"
|
|
||||||
color="primary"
|
|
||||||
class="q-ml-sm"
|
|
||||||
:disabled="isLoading"
|
|
||||||
:loading="isLoading"
|
|
||||||
data-cy="FormModelPopup_isSaveAndContinue"
|
|
||||||
z-max
|
|
||||||
@click="onClick(true)"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</FormModel>
|
</FormModel>
|
||||||
|
|
|
||||||
|
|
@ -121,25 +121,23 @@ const removeTag = (index, params, search) => {
|
||||||
applyTags(params, search);
|
applyTags(params, search);
|
||||||
};
|
};
|
||||||
const setCategoryList = (data) => {
|
const setCategoryList = (data) => {
|
||||||
categoryList.value = (data || []).map((category) => ({
|
categoryList.value = (data || [])
|
||||||
...category,
|
.filter((category) => category.display)
|
||||||
icon: `vn:${(category.icon || '').split('-')[1]}`,
|
.map((category) => ({
|
||||||
}));
|
...category,
|
||||||
|
icon: `vn:${(category.icon || '').split('-')[1]}`,
|
||||||
|
}));
|
||||||
fetchItemTypes();
|
fetchItemTypes();
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<FetchData
|
<FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
|
||||||
url="ItemCategories"
|
|
||||||
auto-load
|
|
||||||
@on-fetch="setCategoryList"
|
|
||||||
:where="{ display: { neq: 0 } }"
|
|
||||||
/>
|
|
||||||
<FetchData
|
<FetchData
|
||||||
url="Tags"
|
url="Tags"
|
||||||
:filter="{ fields: ['id', 'name', 'isFree'] }"
|
:filter="{ fields: ['id', 'name', 'isFree'] }"
|
||||||
auto-load
|
auto-load
|
||||||
|
limit="30"
|
||||||
@on-fetch="(data) => (tagOptions = data)"
|
@on-fetch="(data) => (tagOptions = data)"
|
||||||
/>
|
/>
|
||||||
<VnFilterPanel
|
<VnFilterPanel
|
||||||
|
|
@ -197,6 +195,8 @@ const setCategoryList = (data) => {
|
||||||
:label="t('components.itemsFilterPanel.typeFk')"
|
:label="t('components.itemsFilterPanel.typeFk')"
|
||||||
v-model="params.typeFk"
|
v-model="params.typeFk"
|
||||||
:options="itemTypesOptions"
|
:options="itemTypesOptions"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
rounded
|
rounded
|
||||||
|
|
@ -234,6 +234,7 @@ const setCategoryList = (data) => {
|
||||||
:label="t('globals.tag')"
|
:label="t('globals.tag')"
|
||||||
v-model="value.selectedTag"
|
v-model="value.selectedTag"
|
||||||
:options="tagOptions"
|
:options="tagOptions"
|
||||||
|
option-label="name"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
rounded
|
rounded
|
||||||
|
|
@ -281,7 +282,7 @@ const setCategoryList = (data) => {
|
||||||
<QItem class="q-mt-lg">
|
<QItem class="q-mt-lg">
|
||||||
<QBtn
|
<QBtn
|
||||||
icon="add_circle"
|
icon="add_circle"
|
||||||
v-shortcut="'+'"
|
shortcut="+"
|
||||||
flat
|
flat
|
||||||
class="fill-icon-on-hover q-px-xs"
|
class="fill-icon-on-hover q-px-xs"
|
||||||
color="primary"
|
color="primary"
|
||||||
|
|
@ -327,6 +328,7 @@ en:
|
||||||
active: Is active
|
active: Is active
|
||||||
visible: Is visible
|
visible: Is visible
|
||||||
floramondo: Is floramondo
|
floramondo: Is floramondo
|
||||||
|
salesPersonFk: Buyer
|
||||||
categoryFk: Category
|
categoryFk: Category
|
||||||
|
|
||||||
es:
|
es:
|
||||||
|
|
@ -337,6 +339,7 @@ es:
|
||||||
active: Activo
|
active: Activo
|
||||||
visible: Visible
|
visible: Visible
|
||||||
floramondo: Floramondo
|
floramondo: Floramondo
|
||||||
|
salesPersonFk: Comprador
|
||||||
categoryFk: Categoría
|
categoryFk: Categoría
|
||||||
Plant: Planta natural
|
Plant: Planta natural
|
||||||
Flower: Flor fresca
|
Flower: Flor fresca
|
||||||
|
|
|
||||||
|
|
@ -41,6 +41,7 @@ const filteredItems = computed(() => {
|
||||||
return locale.includes(normalizedSearch);
|
return locale.includes(normalizedSearch);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const filteredPinnedModules = computed(() => {
|
const filteredPinnedModules = computed(() => {
|
||||||
if (!search.value) return pinnedModules.value;
|
if (!search.value) return pinnedModules.value;
|
||||||
const normalizedSearch = search.value
|
const normalizedSearch = search.value
|
||||||
|
|
@ -71,7 +72,7 @@ watch(
|
||||||
items.value = [];
|
items.value = [];
|
||||||
getRoutes();
|
getRoutes();
|
||||||
},
|
},
|
||||||
{ deep: true },
|
{ deep: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
function findMatches(search, item) {
|
function findMatches(search, item) {
|
||||||
|
|
@ -103,40 +104,33 @@ function addChildren(module, route, parent) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getRoutes() {
|
function getRoutes() {
|
||||||
const handleRoutes = {
|
if (props.source === 'main') {
|
||||||
main: getMainRoutes,
|
const modules = Object.assign([], navigation.getModules().value);
|
||||||
card: getCardRoutes,
|
|
||||||
};
|
|
||||||
try {
|
|
||||||
handleRoutes[props.source]();
|
|
||||||
} catch (error) {
|
|
||||||
throw new Error(`Method is not defined`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function getMainRoutes() {
|
|
||||||
const modules = Object.assign([], navigation.getModules().value);
|
|
||||||
|
|
||||||
for (const item of modules) {
|
for (const item of modules) {
|
||||||
const moduleDef = routes.find(
|
const moduleDef = routes.find(
|
||||||
(route) => toLowerCamel(route.name) === item.module,
|
(route) => toLowerCamel(route.name) === item.module
|
||||||
|
);
|
||||||
|
if (!moduleDef) continue;
|
||||||
|
item.children = [];
|
||||||
|
|
||||||
|
addChildren(item.module, moduleDef, item.children);
|
||||||
|
}
|
||||||
|
|
||||||
|
items.value = modules;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.source === 'card') {
|
||||||
|
const currentRoute = route.matched[1];
|
||||||
|
const currentModule = toLowerCamel(currentRoute.name);
|
||||||
|
let moduleDef = routes.find(
|
||||||
|
(route) => toLowerCamel(route.name) === currentModule
|
||||||
);
|
);
|
||||||
if (!moduleDef) continue;
|
|
||||||
item.children = [];
|
|
||||||
|
|
||||||
addChildren(item.module, moduleDef, item.children);
|
if (!moduleDef) return;
|
||||||
|
if (!moduleDef?.menus) moduleDef = betaGetRoutes();
|
||||||
|
addChildren(currentModule, moduleDef, items.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
items.value = modules;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getCardRoutes() {
|
|
||||||
const currentRoute = route.matched[1];
|
|
||||||
const currentModule = toLowerCamel(currentRoute.name);
|
|
||||||
let moduleDef = routes.find((route) => toLowerCamel(route.name) === currentModule);
|
|
||||||
|
|
||||||
if (!moduleDef) return;
|
|
||||||
if (!moduleDef?.menus) moduleDef = betaGetRoutes();
|
|
||||||
addChildren(currentModule, moduleDef, items.value);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function betaGetRoutes() {
|
function betaGetRoutes() {
|
||||||
|
|
@ -229,16 +223,9 @@ const searchModule = () => {
|
||||||
</template>
|
</template>
|
||||||
<template v-for="(item, index) in filteredItems" :key="item.name">
|
<template v-for="(item, index) in filteredItems" :key="item.name">
|
||||||
<template
|
<template
|
||||||
v-if="
|
v-if="search ||item.children && !filteredPinnedModules.has(item.name)"
|
||||||
search ||
|
|
||||||
(item.children && !filteredPinnedModules.has(item.name))
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<LeftMenuItem
|
<LeftMenuItem :item="item" group="modules" :class="search && index === 0 ? 'searched' : ''">
|
||||||
:item="item"
|
|
||||||
group="modules"
|
|
||||||
:class="search && index === 0 ? 'searched' : ''"
|
|
||||||
>
|
|
||||||
<template #side>
|
<template #side>
|
||||||
<QBtn
|
<QBtn
|
||||||
v-if="item.isPinned === true"
|
v-if="item.isPinned === true"
|
||||||
|
|
@ -355,7 +342,7 @@ const searchModule = () => {
|
||||||
.header {
|
.header {
|
||||||
color: var(--vn-label-color);
|
color: var(--vn-label-color);
|
||||||
}
|
}
|
||||||
.searched {
|
.searched{
|
||||||
background-color: var(--vn-section-hover-color);
|
background-color: var(--vn-section-hover-color);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,6 @@ const itemComputed = computed(() => {
|
||||||
:to="{ name: itemComputed.name }"
|
:to="{ name: itemComputed.name }"
|
||||||
clickable
|
clickable
|
||||||
v-ripple
|
v-ripple
|
||||||
:data-cy="`${itemComputed.name}-menu-item`"
|
|
||||||
>
|
>
|
||||||
<QItemSection avatar v-if="itemComputed.icon">
|
<QItemSection avatar v-if="itemComputed.icon">
|
||||||
<QIcon :name="itemComputed.icon" />
|
<QIcon :name="itemComputed.icon" />
|
||||||
|
|
|
||||||
|
|
@ -85,15 +85,7 @@ const refresh = () => window.location.reload();
|
||||||
</QTooltip>
|
</QTooltip>
|
||||||
<PinnedModules ref="pinnedModulesRef" />
|
<PinnedModules ref="pinnedModulesRef" />
|
||||||
</QBtn>
|
</QBtn>
|
||||||
<QBtn
|
<QBtn class="q-pa-none" rounded dense flat no-wrap id="user">
|
||||||
class="q-pa-none"
|
|
||||||
rounded
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
no-wrap
|
|
||||||
id="user"
|
|
||||||
data-cy="userPanel_btn"
|
|
||||||
>
|
|
||||||
<VnAvatar
|
<VnAvatar
|
||||||
:worker-id="user.id"
|
:worker-id="user.id"
|
||||||
:title="user.name"
|
:title="user.name"
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,6 @@ import VnSelect from 'components/common/VnSelect.vue';
|
||||||
import FormPopup from './FormPopup.vue';
|
import FormPopup from './FormPopup.vue';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import useNotify from 'src/composables/useNotify.js';
|
import useNotify from 'src/composables/useNotify.js';
|
||||||
import VnCheckbox from 'src/components/common/VnCheckbox.vue';
|
|
||||||
|
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
invoiceOutData: {
|
invoiceOutData: {
|
||||||
|
|
@ -132,11 +131,15 @@ const refund = async () => {
|
||||||
:required="true"
|
:required="true"
|
||||||
/> </VnRow
|
/> </VnRow
|
||||||
><VnRow>
|
><VnRow>
|
||||||
<VnCheckbox
|
<div>
|
||||||
v-model="invoiceParams.inheritWarehouse"
|
<QCheckbox
|
||||||
:label="t('Inherit warehouse')"
|
:label="t('Inherit warehouse')"
|
||||||
:info="t('Inherit warehouse tooltip')"
|
v-model="invoiceParams.inheritWarehouse"
|
||||||
/>
|
/>
|
||||||
|
<QIcon name="info" class="cursor-info q-ml-sm" size="sm">
|
||||||
|
<QTooltip>{{ t('Inherit warehouse tooltip') }}</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
</div>
|
||||||
</VnRow>
|
</VnRow>
|
||||||
</template>
|
</template>
|
||||||
</FormPopup>
|
</FormPopup>
|
||||||
|
|
|
||||||
|
|
@ -1,84 +1,39 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { toCurrency } from 'src/filters';
|
|
||||||
|
|
||||||
defineProps({ row: { type: Object, required: true } });
|
defineProps({ row: { type: Object, required: true } });
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<span class="q-gutter-x-xs">
|
<span>
|
||||||
<router-link
|
|
||||||
v-if="row.claim?.claimFk"
|
|
||||||
:to="{ name: 'ClaimBasicData', params: { id: row.claim?.claimFk } }"
|
|
||||||
class="link"
|
|
||||||
>
|
|
||||||
<QIcon name="vn:claims" size="xs">
|
|
||||||
<QTooltip>
|
|
||||||
{{ t('ticketSale.claim') }}:
|
|
||||||
{{ row.claim?.claimFk }}
|
|
||||||
</QTooltip>
|
|
||||||
</QIcon>
|
|
||||||
</router-link>
|
|
||||||
<QIcon
|
<QIcon
|
||||||
v-if="row?.risk"
|
v-if="row.isTaxDataChecked === 0"
|
||||||
name="vn:risk"
|
|
||||||
:color="row.hasHighRisk ? 'negative' : 'primary'"
|
|
||||||
size="xs"
|
|
||||||
>
|
|
||||||
<QTooltip>
|
|
||||||
{{ $t('salesTicketsTable.risk') }}:
|
|
||||||
{{ toCurrency(row.risk - row.credit) }}
|
|
||||||
</QTooltip>
|
|
||||||
</QIcon>
|
|
||||||
<QIcon
|
|
||||||
v-if="row?.hasComponentLack"
|
|
||||||
name="vn:components"
|
|
||||||
color="primary"
|
|
||||||
size="xs"
|
|
||||||
>
|
|
||||||
<QTooltip>{{ $t('salesTicketsTable.componentLack') }}</QTooltip>
|
|
||||||
</QIcon>
|
|
||||||
<QIcon v-if="row?.hasItemDelay" color="primary" size="xs" name="vn:hasItemDelay">
|
|
||||||
<QTooltip>
|
|
||||||
{{ $t('ticket.summary.hasItemDelay') }}
|
|
||||||
</QTooltip>
|
|
||||||
</QIcon>
|
|
||||||
<QIcon v-if="row?.hasItemLost" color="primary" size="xs" name="vn:hasItemLost">
|
|
||||||
<QTooltip>
|
|
||||||
{{ $t('salesTicketsTable.hasItemLost') }}
|
|
||||||
</QTooltip>
|
|
||||||
</QIcon>
|
|
||||||
<QIcon
|
|
||||||
v-if="row?.hasItemShortage"
|
|
||||||
name="vn:unavailable"
|
|
||||||
color="primary"
|
|
||||||
size="xs"
|
|
||||||
>
|
|
||||||
<QTooltip>{{ $t('salesTicketsTable.notVisible') }}</QTooltip>
|
|
||||||
</QIcon>
|
|
||||||
<QIcon v-if="row?.hasRounding" color="primary" name="sync_problem" size="xs">
|
|
||||||
<QTooltip>
|
|
||||||
{{ $t('ticketList.rounding') }}
|
|
||||||
</QTooltip>
|
|
||||||
</QIcon>
|
|
||||||
<QIcon
|
|
||||||
v-if="row?.hasTicketRequest"
|
|
||||||
name="vn:buyrequest"
|
|
||||||
color="primary"
|
|
||||||
size="xs"
|
|
||||||
>
|
|
||||||
<QTooltip>{{ $t('salesTicketsTable.purchaseRequest') }}</QTooltip>
|
|
||||||
</QIcon>
|
|
||||||
<QIcon
|
|
||||||
v-if="row?.isTaxDataChecked !== 0"
|
|
||||||
name="vn:no036"
|
name="vn:no036"
|
||||||
color="primary"
|
color="primary"
|
||||||
size="xs"
|
size="xs"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ $t('salesTicketsTable.noVerifiedData') }}</QTooltip>
|
<QTooltip>{{ $t('salesTicketsTable.noVerifiedData') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
<QIcon v-if="row?.isFreezed" name="vn:frozen" color="primary" size="xs">
|
<QIcon v-if="row.hasTicketRequest" name="vn:buyrequest" color="primary" size="xs">
|
||||||
|
<QTooltip>{{ $t('salesTicketsTable.purchaseRequest') }}</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
<QIcon v-if="row.itemShortage" name="vn:unavailable" color="primary" size="xs">
|
||||||
|
<QTooltip>{{ $t('salesTicketsTable.notVisible') }}</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
<QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
|
||||||
<QTooltip>{{ $t('salesTicketsTable.clientFrozen') }}</QTooltip>
|
<QTooltip>{{ $t('salesTicketsTable.clientFrozen') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
<QIcon v-if="row?.isTooLittle" name="vn:isTooLittle" color="primary" size="xs">
|
<QIcon
|
||||||
|
v-if="row.risk"
|
||||||
|
name="vn:risk"
|
||||||
|
:color="row.hasHighRisk ? 'negative' : 'primary'"
|
||||||
|
size="xs"
|
||||||
|
>
|
||||||
|
<QTooltip>
|
||||||
|
{{ $t('salesTicketsTable.risk') }}: {{ row.risk - row.credit }}
|
||||||
|
</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
<QIcon v-if="row.hasComponentLack" name="vn:components" color="primary" size="xs">
|
||||||
|
<QTooltip>{{ $t('salesTicketsTable.componentLack') }}</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
<QIcon v-if="row.isTooLittle" name="vn:isTooLittle" color="primary" size="xs">
|
||||||
<QTooltip>{{ $t('salesTicketsTable.tooLittle') }}</QTooltip>
|
<QTooltip>{{ $t('salesTicketsTable.tooLittle') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,6 @@ import VnSelect from 'components/common/VnSelect.vue';
|
||||||
import FormPopup from './FormPopup.vue';
|
import FormPopup from './FormPopup.vue';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import useNotify from 'src/composables/useNotify.js';
|
import useNotify from 'src/composables/useNotify.js';
|
||||||
import VnCheckbox from './common/VnCheckbox.vue';
|
|
||||||
|
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
invoiceOutData: {
|
invoiceOutData: {
|
||||||
|
|
@ -187,11 +186,15 @@ const makeInvoice = async () => {
|
||||||
/>
|
/>
|
||||||
</VnRow>
|
</VnRow>
|
||||||
<VnRow>
|
<VnRow>
|
||||||
<VnCheckbox
|
<div>
|
||||||
v-model="checked"
|
<QCheckbox
|
||||||
:label="t('Bill destination client')"
|
:label="t('Bill destination client')"
|
||||||
:info="t('transferInvoiceInfo')"
|
v-model="checked"
|
||||||
/>
|
/>
|
||||||
|
<QIcon name="info" class="cursor-info q-ml-sm" size="sm">
|
||||||
|
<QTooltip>{{ t('transferInvoiceInfo') }}</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
</div>
|
||||||
</VnRow>
|
</VnRow>
|
||||||
</template>
|
</template>
|
||||||
</FormPopup>
|
</FormPopup>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,9 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { markRaw, computed } from 'vue';
|
import { markRaw, computed } from 'vue';
|
||||||
import { QIcon, QToggle } from 'quasar';
|
import { QIcon, QCheckbox } from 'quasar';
|
||||||
import { dashIfEmpty } from 'src/filters';
|
import { dashIfEmpty } from 'src/filters';
|
||||||
|
|
||||||
|
/* basic input */
|
||||||
import VnSelect from 'components/common/VnSelect.vue';
|
import VnSelect from 'components/common/VnSelect.vue';
|
||||||
import VnSelectCache from 'components/common/VnSelectCache.vue';
|
import VnSelectCache from 'components/common/VnSelectCache.vue';
|
||||||
import VnInput from 'components/common/VnInput.vue';
|
import VnInput from 'components/common/VnInput.vue';
|
||||||
|
|
@ -11,11 +12,8 @@ import VnInputDate from 'components/common/VnInputDate.vue';
|
||||||
import VnInputTime from 'components/common/VnInputTime.vue';
|
import VnInputTime from 'components/common/VnInputTime.vue';
|
||||||
import VnComponent from 'components/common/VnComponent.vue';
|
import VnComponent from 'components/common/VnComponent.vue';
|
||||||
import VnUserLink from 'components/ui/VnUserLink.vue';
|
import VnUserLink from 'components/ui/VnUserLink.vue';
|
||||||
import VnSelectEnum from '../common/VnSelectEnum.vue';
|
|
||||||
import VnCheckbox from '../common/VnCheckbox.vue';
|
|
||||||
|
|
||||||
const model = defineModel(undefined, { required: true });
|
const model = defineModel(undefined, { required: true });
|
||||||
const emit = defineEmits(['blur']);
|
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
column: {
|
column: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
|
@ -41,18 +39,10 @@ const $props = defineProps({
|
||||||
type: Object,
|
type: Object,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
autofocus: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
showLabel: {
|
showLabel: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
eventHandlers: {
|
|
||||||
type: Object,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const defaultSelect = {
|
const defaultSelect = {
|
||||||
|
|
@ -109,8 +99,7 @@ const defaultComponents = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
checkbox: {
|
checkbox: {
|
||||||
ref: 'checkbox',
|
component: markRaw(QCheckbox),
|
||||||
component: markRaw(VnCheckbox),
|
|
||||||
attrs: ({ model }) => {
|
attrs: ({ model }) => {
|
||||||
const defaultAttrs = {
|
const defaultAttrs = {
|
||||||
disable: !$props.isEditable,
|
disable: !$props.isEditable,
|
||||||
|
|
@ -126,10 +115,6 @@ const defaultComponents = {
|
||||||
},
|
},
|
||||||
forceAttrs: {
|
forceAttrs: {
|
||||||
label: $props.showLabel && $props.column.label,
|
label: $props.showLabel && $props.column.label,
|
||||||
autofocus: true,
|
|
||||||
},
|
|
||||||
events: {
|
|
||||||
blur: () => emit('blur'),
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
select: {
|
select: {
|
||||||
|
|
@ -140,19 +125,12 @@ const defaultComponents = {
|
||||||
component: markRaw(VnSelect),
|
component: markRaw(VnSelect),
|
||||||
...defaultSelect,
|
...defaultSelect,
|
||||||
},
|
},
|
||||||
selectEnum: {
|
|
||||||
component: markRaw(VnSelectEnum),
|
|
||||||
...defaultSelect,
|
|
||||||
},
|
|
||||||
icon: {
|
icon: {
|
||||||
component: markRaw(QIcon),
|
component: markRaw(QIcon),
|
||||||
},
|
},
|
||||||
userLink: {
|
userLink: {
|
||||||
component: markRaw(VnUserLink),
|
component: markRaw(VnUserLink),
|
||||||
},
|
},
|
||||||
toggle: {
|
|
||||||
component: markRaw(QToggle),
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const value = computed(() => {
|
const value = computed(() => {
|
||||||
|
|
@ -182,28 +160,7 @@ const col = computed(() => {
|
||||||
return newColumn;
|
return newColumn;
|
||||||
});
|
});
|
||||||
|
|
||||||
const components = computed(() => {
|
const components = computed(() => $props.components ?? defaultComponents);
|
||||||
const sourceComponents = $props.components ?? defaultComponents;
|
|
||||||
|
|
||||||
return Object.keys(sourceComponents).reduce((acc, key) => {
|
|
||||||
const component = sourceComponents[key];
|
|
||||||
|
|
||||||
if (!component || typeof component !== 'object') {
|
|
||||||
acc[key] = component;
|
|
||||||
return acc;
|
|
||||||
}
|
|
||||||
|
|
||||||
acc[key] = {
|
|
||||||
...component,
|
|
||||||
attrs: {
|
|
||||||
...(component.attrs || {}),
|
|
||||||
autofocus: $props.autofocus,
|
|
||||||
},
|
|
||||||
event: { ...component?.event, ...$props?.eventHandlers },
|
|
||||||
};
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="row no-wrap">
|
<div class="row no-wrap">
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,14 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { markRaw, computed } from 'vue';
|
import { markRaw, computed } from 'vue';
|
||||||
import { QCheckbox, QToggle } from 'quasar';
|
import { QCheckbox } from 'quasar';
|
||||||
import { useArrayData } from 'composables/useArrayData';
|
import { useArrayData } from 'composables/useArrayData';
|
||||||
|
|
||||||
|
/* basic input */
|
||||||
import VnSelect from 'components/common/VnSelect.vue';
|
import VnSelect from 'components/common/VnSelect.vue';
|
||||||
import VnInput from 'components/common/VnInput.vue';
|
import VnInput from 'components/common/VnInput.vue';
|
||||||
import VnInputDate from 'components/common/VnInputDate.vue';
|
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||||
import VnInputTime from 'components/common/VnInputTime.vue';
|
import VnInputTime from 'components/common/VnInputTime.vue';
|
||||||
import VnColumn from 'components/VnTable/VnColumn.vue';
|
import VnTableColumn from 'components/VnTable/VnColumn.vue';
|
||||||
|
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
column: {
|
column: {
|
||||||
|
|
@ -25,10 +27,6 @@ const $props = defineProps({
|
||||||
type: String,
|
type: String,
|
||||||
default: 'table',
|
default: 'table',
|
||||||
},
|
},
|
||||||
customClass: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
defineExpose({ addFilter, props: $props });
|
defineExpose({ addFilter, props: $props });
|
||||||
|
|
@ -36,7 +34,7 @@ defineExpose({ addFilter, props: $props });
|
||||||
const model = defineModel(undefined, { required: true });
|
const model = defineModel(undefined, { required: true });
|
||||||
const arrayData = useArrayData(
|
const arrayData = useArrayData(
|
||||||
$props.dataKey,
|
$props.dataKey,
|
||||||
$props.searchUrl ? { searchUrl: $props.searchUrl } : null,
|
$props.searchUrl ? { searchUrl: $props.searchUrl } : null
|
||||||
);
|
);
|
||||||
const columnFilter = computed(() => $props.column?.columnFilter);
|
const columnFilter = computed(() => $props.column?.columnFilter);
|
||||||
|
|
||||||
|
|
@ -48,18 +46,19 @@ const enterEvent = {
|
||||||
|
|
||||||
const defaultAttrs = {
|
const defaultAttrs = {
|
||||||
filled: !$props.showTitle,
|
filled: !$props.showTitle,
|
||||||
|
class: 'q-px-xs q-pb-xs q-pt-none fit',
|
||||||
dense: true,
|
dense: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
const forceAttrs = {
|
const forceAttrs = {
|
||||||
label: $props.showTitle ? '' : (columnFilter.value?.label ?? $props.column.label),
|
label: $props.showTitle ? '' : columnFilter.value?.label ?? $props.column.label,
|
||||||
};
|
};
|
||||||
|
|
||||||
const selectComponent = {
|
const selectComponent = {
|
||||||
component: markRaw(VnSelect),
|
component: markRaw(VnSelect),
|
||||||
event: updateEvent,
|
event: updateEvent,
|
||||||
attrs: {
|
attrs: {
|
||||||
class: `q-pt-none fit ${$props.customClass}`,
|
class: 'q-px-sm q-pb-xs q-pt-none fit',
|
||||||
dense: true,
|
dense: true,
|
||||||
filled: !$props.showTitle,
|
filled: !$props.showTitle,
|
||||||
},
|
},
|
||||||
|
|
@ -110,24 +109,14 @@ const components = {
|
||||||
component: markRaw(QCheckbox),
|
component: markRaw(QCheckbox),
|
||||||
event: updateEvent,
|
event: updateEvent,
|
||||||
attrs: {
|
attrs: {
|
||||||
class: $props.showTitle ? 'q-py-sm' : 'q-px-md q-py-xs fit',
|
dense: true,
|
||||||
|
class: $props.showTitle ? 'q-py-sm q-mt-md' : 'q-px-md q-py-xs fit',
|
||||||
'toggle-indeterminate': true,
|
'toggle-indeterminate': true,
|
||||||
size: 'sm',
|
|
||||||
},
|
},
|
||||||
forceAttrs,
|
forceAttrs,
|
||||||
},
|
},
|
||||||
select: selectComponent,
|
select: selectComponent,
|
||||||
rawSelect: selectComponent,
|
rawSelect: selectComponent,
|
||||||
toggle: {
|
|
||||||
component: markRaw(QToggle),
|
|
||||||
event: updateEvent,
|
|
||||||
attrs: {
|
|
||||||
class: $props.showTitle ? 'q-py-sm' : 'q-px-md q-py-xs fit',
|
|
||||||
'toggle-indeterminate': true,
|
|
||||||
size: 'sm',
|
|
||||||
},
|
|
||||||
forceAttrs,
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
async function addFilter(value, name) {
|
async function addFilter(value, name) {
|
||||||
|
|
@ -143,8 +132,19 @@ async function addFilter(value, name) {
|
||||||
await arrayData.addFilter({ params: { [field]: value } });
|
await arrayData.addFilter({ params: { [field]: value } });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function alignRow() {
|
||||||
|
switch ($props.column.align) {
|
||||||
|
case 'left':
|
||||||
|
return 'justify-start items-start';
|
||||||
|
case 'right':
|
||||||
|
return 'justify-end items-end';
|
||||||
|
default:
|
||||||
|
return 'flex-center';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const showFilter = computed(
|
const showFilter = computed(
|
||||||
() => $props.column?.columnFilter !== false && $props.column.name != 'tableActions',
|
() => $props.column?.columnFilter !== false && $props.column.name != 'tableActions'
|
||||||
);
|
);
|
||||||
|
|
||||||
const onTabPressed = async () => {
|
const onTabPressed = async () => {
|
||||||
|
|
@ -152,8 +152,13 @@ const onTabPressed = async () => {
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div v-if="showFilter" class="full-width" style="overflow: hidden">
|
<div
|
||||||
<VnColumn
|
v-if="showFilter"
|
||||||
|
class="full-width"
|
||||||
|
:class="alignRow()"
|
||||||
|
style="max-height: 45px; overflow: hidden"
|
||||||
|
>
|
||||||
|
<VnTableColumn
|
||||||
:column="$props.column"
|
:column="$props.column"
|
||||||
default="input"
|
default="input"
|
||||||
v-model="model"
|
v-model="model"
|
||||||
|
|
@ -163,8 +168,3 @@ const onTabPressed = async () => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" scoped>
|
|
||||||
label.vn-label-padding > .q-field__inner > .q-field__control {
|
|
||||||
padding: inherit !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -23,10 +23,6 @@ const $props = defineProps({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
align: {
|
|
||||||
type: String,
|
|
||||||
default: 'end',
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
const hover = ref();
|
const hover = ref();
|
||||||
const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
|
const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
|
||||||
|
|
@ -45,78 +41,55 @@ async function orderBy(name, direction) {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
if (!direction) return await arrayData.deleteOrder(name);
|
if (!direction) return await arrayData.deleteOrder(name);
|
||||||
|
|
||||||
await arrayData.addOrder(name, direction);
|
await arrayData.addOrder(name, direction);
|
||||||
}
|
}
|
||||||
|
|
||||||
defineExpose({ orderBy });
|
defineExpose({ orderBy });
|
||||||
|
|
||||||
function textAlignToFlex(textAlign) {
|
|
||||||
return `justify-content: ${
|
|
||||||
{
|
|
||||||
'text-center': 'center',
|
|
||||||
'text-left': 'start',
|
|
||||||
'text-right': 'end',
|
|
||||||
}[textAlign] || 'start'
|
|
||||||
};`;
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
@mouseenter="hover = true"
|
@mouseenter="hover = true"
|
||||||
@mouseleave="hover = false"
|
@mouseleave="hover = false"
|
||||||
@click="orderBy(name, model?.direction)"
|
@click="orderBy(name, model?.direction)"
|
||||||
class="items-center no-wrap cursor-pointer title"
|
class="row items-center no-wrap cursor-pointer"
|
||||||
:style="textAlignToFlex(align)"
|
|
||||||
>
|
>
|
||||||
<span :title="label">{{ label }}</span>
|
<span :title="label">{{ label }}</span>
|
||||||
<div v-if="name && model?.index">
|
<QChip
|
||||||
<QChip
|
v-if="name"
|
||||||
:label="!vertical ? model?.index : ''"
|
:label="!vertical ? model?.index : ''"
|
||||||
:icon="
|
:icon="
|
||||||
(model?.index || hover) && !vertical
|
(model?.index || hover) && !vertical
|
||||||
? model?.direction == 'DESC'
|
? model?.direction == 'DESC'
|
||||||
? 'arrow_downward'
|
? 'arrow_downward'
|
||||||
: 'arrow_upward'
|
: 'arrow_upward'
|
||||||
: undefined
|
: undefined
|
||||||
"
|
"
|
||||||
:size="vertical ? '' : 'sm'"
|
:size="vertical ? '' : 'sm'"
|
||||||
:class="[
|
:class="[
|
||||||
model?.index ? 'color-vn-text' : 'bg-transparent',
|
model?.index ? 'color-vn-text' : 'bg-transparent',
|
||||||
vertical ? 'q-px-none' : '',
|
vertical ? 'q-px-none' : '',
|
||||||
]"
|
]"
|
||||||
class="no-box-shadow"
|
class="no-box-shadow"
|
||||||
:clickable="true"
|
:clickable="true"
|
||||||
style="min-width: 40px; max-height: 30px"
|
style="min-width: 40px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="column flex-center"
|
||||||
|
v-if="vertical"
|
||||||
|
:style="!model?.index && 'color: #5d5d5d'"
|
||||||
>
|
>
|
||||||
<div
|
{{ model?.index }}
|
||||||
class="column flex-center"
|
<QIcon
|
||||||
v-if="vertical"
|
:name="
|
||||||
:style="!model?.index && 'color: #5d5d5d'"
|
model?.index
|
||||||
>
|
? model?.direction == 'DESC'
|
||||||
{{ model?.index }}
|
? 'arrow_downward'
|
||||||
<QIcon
|
: 'arrow_upward'
|
||||||
:name="
|
: 'swap_vert'
|
||||||
model?.index
|
"
|
||||||
? model?.direction == 'DESC'
|
size="xs"
|
||||||
? 'arrow_downward'
|
/>
|
||||||
: 'arrow_upward'
|
</div>
|
||||||
: 'swap_vert'
|
</QChip>
|
||||||
"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</QChip>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" scoped>
|
|
||||||
.title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 30px;
|
|
||||||
width: 100%;
|
|
||||||
color: var(--vn-label-color);
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,22 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import {
|
import { ref, onBeforeMount, onMounted, computed, watch, useAttrs } from 'vue';
|
||||||
ref,
|
|
||||||
onBeforeMount,
|
|
||||||
onMounted,
|
|
||||||
onUnmounted,
|
|
||||||
computed,
|
|
||||||
watch,
|
|
||||||
h,
|
|
||||||
render,
|
|
||||||
inject,
|
|
||||||
useAttrs,
|
|
||||||
nextTick,
|
|
||||||
} from 'vue';
|
|
||||||
import { useArrayData } from 'src/composables/useArrayData';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
import { useQuasar, date } from 'quasar';
|
import { useQuasar } from 'quasar';
|
||||||
import { useStateStore } from 'stores/useStateStore';
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
import { useFilterParams } from 'src/composables/useFilterParams';
|
import { useFilterParams } from 'src/composables/useFilterParams';
|
||||||
import { dashIfEmpty, toDate } from 'src/filters';
|
|
||||||
|
|
||||||
import CrudModel from 'src/components/CrudModel.vue';
|
import CrudModel from 'src/components/CrudModel.vue';
|
||||||
import FormModelPopup from 'components/FormModelPopup.vue';
|
import FormModelPopup from 'components/FormModelPopup.vue';
|
||||||
|
|
||||||
import VnColumn from 'components/VnTable/VnColumn.vue';
|
import VnTableColumn from 'components/VnTable/VnColumn.vue';
|
||||||
import VnFilter from 'components/VnTable/VnFilter.vue';
|
import VnFilter from 'components/VnTable/VnFilter.vue';
|
||||||
import VnTableChip from 'components/VnTable/VnChip.vue';
|
import VnTableChip from 'components/VnTable/VnChip.vue';
|
||||||
import VnVisibleColumn from 'src/components/VnTable/VnVisibleColumn.vue';
|
import VnVisibleColumn from 'src/components/VnTable/VnVisibleColumn.vue';
|
||||||
import VnLv from 'components/ui/VnLv.vue';
|
import VnLv from 'components/ui/VnLv.vue';
|
||||||
import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
|
import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
|
||||||
import VnTableFilter from './VnTableFilter.vue';
|
import VnTableFilter from './VnTableFilter.vue';
|
||||||
import { getColAlign } from 'src/composables/getColAlign';
|
|
||||||
|
|
||||||
const arrayData = useArrayData(useAttrs()['data-key']);
|
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
columns: {
|
columns: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
|
@ -58,6 +42,10 @@ const $props = defineProps({
|
||||||
type: [Function, Boolean],
|
type: [Function, Boolean],
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
|
rowCtrlClick: {
|
||||||
|
type: [Function, Boolean],
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
redirect: {
|
redirect: {
|
||||||
type: String,
|
type: String,
|
||||||
default: null,
|
default: null,
|
||||||
|
|
@ -126,19 +114,7 @@ const $props = defineProps({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
withFilters: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
overlay: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
createComplement: {
|
|
||||||
type: Object,
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const stateStore = useStateStore();
|
const stateStore = useStateStore();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
@ -156,17 +132,10 @@ const showForm = ref(false);
|
||||||
const splittedColumns = ref({ columns: [] });
|
const splittedColumns = ref({ columns: [] });
|
||||||
const columnsVisibilitySkipped = ref();
|
const columnsVisibilitySkipped = ref();
|
||||||
const createForm = ref();
|
const createForm = ref();
|
||||||
const createRef = ref(null);
|
|
||||||
const tableRef = ref();
|
const tableRef = ref();
|
||||||
const params = ref(useFilterParams($attrs['data-key']).params);
|
const params = ref(useFilterParams($attrs['data-key']).params);
|
||||||
const orders = ref(useFilterParams($attrs['data-key']).orders);
|
const orders = ref(useFilterParams($attrs['data-key']).orders);
|
||||||
const app = inject('app');
|
|
||||||
|
|
||||||
const editingRow = ref(null);
|
|
||||||
const editingField = ref(null);
|
|
||||||
const isTableMode = computed(() => mode.value == TABLE_MODE);
|
|
||||||
const selectRegex = /select/;
|
|
||||||
const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
|
|
||||||
const tableModes = [
|
const tableModes = [
|
||||||
{
|
{
|
||||||
icon: 'view_column',
|
icon: 'view_column',
|
||||||
|
|
@ -187,8 +156,7 @@ onBeforeMount(() => {
|
||||||
hasParams.value = urlParams && Object.keys(urlParams).length !== 0;
|
hasParams.value = urlParams && Object.keys(urlParams).length !== 0;
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(() => {
|
||||||
if ($props.isEditable) document.addEventListener('click', clickHandler);
|
|
||||||
mode.value =
|
mode.value =
|
||||||
quasar.platform.is.mobile && !$props.disableOption?.card
|
quasar.platform.is.mobile && !$props.disableOption?.card
|
||||||
? CARD_MODE
|
? CARD_MODE
|
||||||
|
|
@ -210,25 +178,14 @@ onMounted(async () => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(async () => {
|
|
||||||
if ($props.isEditable) document.removeEventListener('click', clickHandler);
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => $props.columns,
|
() => $props.columns,
|
||||||
(value) => splitColumns(value),
|
(value) => splitColumns(value),
|
||||||
{ immediate: true },
|
{ immediate: true },
|
||||||
);
|
);
|
||||||
|
|
||||||
defineExpose({
|
const isTableMode = computed(() => mode.value == TABLE_MODE);
|
||||||
create: createForm,
|
const showRightIcon = computed(() => $props.rightSearch || $props.rightSearchIcon);
|
||||||
reload,
|
|
||||||
redirect: redirectFn,
|
|
||||||
selected,
|
|
||||||
CrudModelRef,
|
|
||||||
params,
|
|
||||||
tableRef,
|
|
||||||
});
|
|
||||||
|
|
||||||
function splitColumns(columns) {
|
function splitColumns(columns) {
|
||||||
splittedColumns.value = {
|
splittedColumns.value = {
|
||||||
|
|
@ -274,6 +231,16 @@ const rowClickFunction = computed(() => {
|
||||||
return () => {};
|
return () => {};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const rowCtrlClickFunction = computed(() => {
|
||||||
|
if ($props.rowCtrlClick != undefined) return $props.rowCtrlClick;
|
||||||
|
if ($props.redirect)
|
||||||
|
return (evt, { id }) => {
|
||||||
|
stopEventPropagation(evt);
|
||||||
|
window.open(`/#/${$props.redirect}/${id}`, '_blank');
|
||||||
|
};
|
||||||
|
return () => {};
|
||||||
|
});
|
||||||
|
|
||||||
function redirectFn(id) {
|
function redirectFn(id) {
|
||||||
router.push({ path: `/${$props.redirect}/${id}` });
|
router.push({ path: `/${$props.redirect}/${id}` });
|
||||||
}
|
}
|
||||||
|
|
@ -295,6 +262,21 @@ function columnName(col) {
|
||||||
return name;
|
return name;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getColAlign(col) {
|
||||||
|
return 'text-' + (col.align ?? 'left');
|
||||||
|
}
|
||||||
|
|
||||||
|
const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
|
||||||
|
defineExpose({
|
||||||
|
create: createForm,
|
||||||
|
reload,
|
||||||
|
redirect: redirectFn,
|
||||||
|
selected,
|
||||||
|
CrudModelRef,
|
||||||
|
params,
|
||||||
|
tableRef,
|
||||||
|
});
|
||||||
|
|
||||||
function handleOnDataSaved(_) {
|
function handleOnDataSaved(_) {
|
||||||
if (_.onDataSaved) _.onDataSaved({ CrudModelRef: CrudModelRef.value });
|
if (_.onDataSaved) _.onDataSaved({ CrudModelRef: CrudModelRef.value });
|
||||||
else $props.create.onDataSaved(_);
|
else $props.create.onDataSaved(_);
|
||||||
|
|
@ -323,237 +305,6 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function isEditableColumn(column) {
|
|
||||||
const isEditableCol = column?.isEditable ?? true;
|
|
||||||
const isVisible = column?.visible ?? true;
|
|
||||||
const hasComponent = column?.component;
|
|
||||||
|
|
||||||
return $props.isEditable && isVisible && hasComponent && isEditableCol;
|
|
||||||
}
|
|
||||||
|
|
||||||
function hasEditableFormat(column) {
|
|
||||||
if (isEditableColumn(column)) return 'editable-text';
|
|
||||||
}
|
|
||||||
|
|
||||||
const clickHandler = async (event) => {
|
|
||||||
const clickedElement = event.target.closest('td');
|
|
||||||
|
|
||||||
const isDateElement = event.target.closest('.q-date');
|
|
||||||
const isTimeElement = event.target.closest('.q-time');
|
|
||||||
const isQselectDropDown = event.target.closest('.q-select__dropdown-icon');
|
|
||||||
|
|
||||||
if (isDateElement || isTimeElement || isQselectDropDown) return;
|
|
||||||
|
|
||||||
if (clickedElement === null) {
|
|
||||||
await destroyInput(editingRow.value, editingField.value);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const rowIndex = clickedElement.getAttribute('data-row-index');
|
|
||||||
const colField = clickedElement.getAttribute('data-col-field');
|
|
||||||
const column = $props.columns.find((col) => col.name === colField);
|
|
||||||
|
|
||||||
if (editingRow.value !== null && editingField.value !== null) {
|
|
||||||
if (editingRow.value == rowIndex && editingField.value == colField) return;
|
|
||||||
|
|
||||||
await destroyInput(editingRow.value, editingField.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isEditableColumn(column)) {
|
|
||||||
await renderInput(Number(rowIndex), colField, clickedElement);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
async function handleTabKey(event, rowIndex, colField) {
|
|
||||||
if (editingRow.value == rowIndex && editingField.value == colField)
|
|
||||||
await destroyInput(editingRow.value, editingField.value);
|
|
||||||
|
|
||||||
const direction = event.shiftKey ? -1 : 1;
|
|
||||||
const { nextRowIndex, nextColumnName } = await handleTabNavigation(
|
|
||||||
rowIndex,
|
|
||||||
colField,
|
|
||||||
direction,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (nextRowIndex < 0 || nextRowIndex >= arrayData.store.data.length) return;
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
await renderInput(nextRowIndex, nextColumnName, null);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function renderInput(rowId, field, clickedElement) {
|
|
||||||
editingField.value = field;
|
|
||||||
editingRow.value = rowId;
|
|
||||||
|
|
||||||
const originalColumn = $props.columns.find((col) => col.name === field);
|
|
||||||
const column = { ...originalColumn, ...{ label: '' } };
|
|
||||||
const row = CrudModelRef.value.formData[rowId];
|
|
||||||
const oldValue = CrudModelRef.value.formData[rowId][column?.name];
|
|
||||||
|
|
||||||
if (!clickedElement)
|
|
||||||
clickedElement = document.querySelector(
|
|
||||||
`[data-row-index="${rowId}"][data-col-field="${field}"]`,
|
|
||||||
);
|
|
||||||
|
|
||||||
Array.from(clickedElement.childNodes).forEach((child) => {
|
|
||||||
child.style.visibility = 'hidden';
|
|
||||||
child.style.position = 'relative';
|
|
||||||
});
|
|
||||||
|
|
||||||
const isSelect = selectRegex.test(column?.component);
|
|
||||||
if (isSelect) column.attrs = { ...column.attrs, 'emit-value': false };
|
|
||||||
|
|
||||||
const node = h(VnColumn, {
|
|
||||||
row: row,
|
|
||||||
class: 'temp-input',
|
|
||||||
column: column,
|
|
||||||
modelValue: row[column.name],
|
|
||||||
componentProp: 'columnField',
|
|
||||||
autofocus: true,
|
|
||||||
focusOnMount: true,
|
|
||||||
eventHandlers: {
|
|
||||||
'update:modelValue': async (value) => {
|
|
||||||
if (isSelect && value) {
|
|
||||||
row[column.name] = value[column.attrs?.optionValue ?? 'id'];
|
|
||||||
row[column?.name + 'TextValue'] =
|
|
||||||
value[column.attrs?.optionLabel ?? 'name'];
|
|
||||||
await column?.cellEvent?.['update:modelValue']?.(
|
|
||||||
value,
|
|
||||||
oldValue,
|
|
||||||
row,
|
|
||||||
);
|
|
||||||
} else row[column.name] = value;
|
|
||||||
await column?.cellEvent?.['update:modelValue']?.(value, oldValue, row);
|
|
||||||
},
|
|
||||||
keyup: async (event) => {
|
|
||||||
if (event.key === 'Enter')
|
|
||||||
await destroyInput(rowIndex, field, clickedElement);
|
|
||||||
},
|
|
||||||
keydown: async (event) => {
|
|
||||||
switch (event.key) {
|
|
||||||
case 'Tab':
|
|
||||||
await handleTabKey(event, rowId, field);
|
|
||||||
event.stopPropagation();
|
|
||||||
break;
|
|
||||||
case 'Escape':
|
|
||||||
await destroyInput(rowId, field, clickedElement);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
click: (event) => {
|
|
||||||
column?.cellEvent?.['click']?.(event, row);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
node.appContext = app._context;
|
|
||||||
render(node, clickedElement);
|
|
||||||
|
|
||||||
if (['toggle'].includes(column?.component))
|
|
||||||
node.el?.querySelector('span > div').focus();
|
|
||||||
|
|
||||||
if (['checkbox', undefined].includes(column?.component))
|
|
||||||
node.el?.querySelector('span > div > div').focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function destroyInput(rowIndex, field, clickedElement) {
|
|
||||||
if (!clickedElement)
|
|
||||||
clickedElement = document.querySelector(
|
|
||||||
`[data-row-index="${rowIndex}"][data-col-field="${field}"]`,
|
|
||||||
);
|
|
||||||
if (clickedElement) {
|
|
||||||
await nextTick();
|
|
||||||
render(null, clickedElement);
|
|
||||||
Array.from(clickedElement.childNodes).forEach((child) => {
|
|
||||||
child.style.visibility = 'visible';
|
|
||||||
child.style.position = '';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (editingRow.value !== rowIndex || editingField.value !== field) return;
|
|
||||||
editingRow.value = null;
|
|
||||||
editingField.value = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleTabNavigation(rowIndex, colName, direction) {
|
|
||||||
const columns = $props.columns;
|
|
||||||
const totalColumns = columns.length;
|
|
||||||
let currentColumnIndex = columns.findIndex((col) => col.name === colName);
|
|
||||||
|
|
||||||
let iterations = 0;
|
|
||||||
let newColumnIndex = currentColumnIndex;
|
|
||||||
|
|
||||||
do {
|
|
||||||
iterations++;
|
|
||||||
newColumnIndex = (newColumnIndex + direction + totalColumns) % totalColumns;
|
|
||||||
|
|
||||||
if (isEditableColumn(columns[newColumnIndex])) break;
|
|
||||||
} while (iterations < totalColumns);
|
|
||||||
|
|
||||||
if (iterations >= totalColumns + 1) return;
|
|
||||||
|
|
||||||
if (direction === 1 && newColumnIndex <= currentColumnIndex) {
|
|
||||||
rowIndex++;
|
|
||||||
} else if (direction === -1 && newColumnIndex >= currentColumnIndex) {
|
|
||||||
rowIndex--;
|
|
||||||
}
|
|
||||||
return { nextRowIndex: rowIndex, nextColumnName: columns[newColumnIndex].name };
|
|
||||||
}
|
|
||||||
|
|
||||||
function getCheckboxIcon(value) {
|
|
||||||
switch (typeof value) {
|
|
||||||
case 'boolean':
|
|
||||||
return value ? 'check' : 'close';
|
|
||||||
case 'number':
|
|
||||||
return value === 0 ? 'close' : 'check';
|
|
||||||
case 'undefined':
|
|
||||||
return 'indeterminate_check_box';
|
|
||||||
default:
|
|
||||||
return 'indeterminate_check_box';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getToggleIcon(value) {
|
|
||||||
if (value === null) return 'help_outline';
|
|
||||||
return value ? 'toggle_on' : 'toggle_off';
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatColumnValue(col, row, dashIfEmpty) {
|
|
||||||
if (col?.format || row[col?.name + 'TextValue']) {
|
|
||||||
if (selectRegex.test(col?.component) && row[col?.name + 'TextValue']) {
|
|
||||||
return dashIfEmpty(row[col?.name + 'TextValue']);
|
|
||||||
} else {
|
|
||||||
return col.format(row, dashIfEmpty);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (col?.component === 'date') return dashIfEmpty(toDate(row[col?.name]));
|
|
||||||
|
|
||||||
if (col?.component === 'time')
|
|
||||||
return row[col?.name] >= 5
|
|
||||||
? dashIfEmpty(date.formatDate(new Date(row[col?.name]), 'HH:mm'))
|
|
||||||
: row[col?.name];
|
|
||||||
|
|
||||||
if (selectRegex.test(col?.component) && $props.isEditable) {
|
|
||||||
const { find, url } = col.attrs;
|
|
||||||
const urlRelation = url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1);
|
|
||||||
|
|
||||||
if (col?.attrs.options) {
|
|
||||||
const find = col?.attrs.options.find((option) => option.id === row[col.name]);
|
|
||||||
if (!col.attrs?.optionLabel || !find) return dashIfEmpty(row[col?.name]);
|
|
||||||
return dashIfEmpty(find[col.attrs?.optionLabel ?? 'name']);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof row[urlRelation] == 'object') {
|
|
||||||
if (typeof find == 'object')
|
|
||||||
return dashIfEmpty(row[urlRelation][find?.label ?? 'name']);
|
|
||||||
|
|
||||||
return dashIfEmpty(row[urlRelation][col?.attrs.optionLabel ?? 'name']);
|
|
||||||
}
|
|
||||||
if (typeof row[urlRelation] == 'string') return dashIfEmpty(row[urlRelation]);
|
|
||||||
}
|
|
||||||
return dashIfEmpty(row[col?.name]);
|
|
||||||
}
|
|
||||||
function cardClick(_, row) {
|
function cardClick(_, row) {
|
||||||
if ($props.redirect) router.push({ path: `/${$props.redirect}/${row.id}` });
|
if ($props.redirect) router.push({ path: `/${$props.redirect}/${row.id}` });
|
||||||
}
|
}
|
||||||
|
|
@ -564,7 +315,7 @@ function cardClick(_, row) {
|
||||||
v-model="stateStore.rightDrawer"
|
v-model="stateStore.rightDrawer"
|
||||||
side="right"
|
side="right"
|
||||||
:width="256"
|
:width="256"
|
||||||
:overlay="$props.overlay"
|
show-if-above
|
||||||
>
|
>
|
||||||
<QScrollArea class="fit">
|
<QScrollArea class="fit">
|
||||||
<VnTableFilter
|
<VnTableFilter
|
||||||
|
|
@ -585,7 +336,7 @@ function cardClick(_, row) {
|
||||||
<CrudModel
|
<CrudModel
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
:class="$attrs['class'] ?? 'q-px-md'"
|
:class="$attrs['class'] ?? 'q-px-md'"
|
||||||
:limit="$attrs['limit'] ?? 100"
|
:limit="$attrs['limit'] ?? 20"
|
||||||
ref="CrudModelRef"
|
ref="CrudModelRef"
|
||||||
@on-fetch="(...args) => emit('onFetch', ...args)"
|
@on-fetch="(...args) => emit('onFetch', ...args)"
|
||||||
:search-url="searchUrl"
|
:search-url="searchUrl"
|
||||||
|
|
@ -601,12 +352,8 @@ function cardClick(_, row) {
|
||||||
<QTable
|
<QTable
|
||||||
ref="tableRef"
|
ref="tableRef"
|
||||||
v-bind="table"
|
v-bind="table"
|
||||||
:class="[
|
class="vnTable"
|
||||||
'vnTable',
|
:class="{ 'last-row-sticky': $props.footer }"
|
||||||
table ? 'selection-cell' : '',
|
|
||||||
$props.footer ? 'last-row-sticky' : '',
|
|
||||||
]"
|
|
||||||
wrap-cells
|
|
||||||
:columns="splittedColumns.columns"
|
:columns="splittedColumns.columns"
|
||||||
:rows="rows"
|
:rows="rows"
|
||||||
v-model:selected="selected"
|
v-model:selected="selected"
|
||||||
|
|
@ -620,13 +367,11 @@ function cardClick(_, row) {
|
||||||
@row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
|
@row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
|
||||||
@update:selected="emit('update:selected', $event)"
|
@update:selected="emit('update:selected', $event)"
|
||||||
@selection="(details) => handleSelection(details, rows)"
|
@selection="(details) => handleSelection(details, rows)"
|
||||||
:hide-selected-banner="true"
|
|
||||||
>
|
>
|
||||||
<template #top-left v-if="!$props.withoutHeader">
|
<template #top-left v-if="!$props.withoutHeader">
|
||||||
<slot name="top-left"> </slot>
|
<slot name="top-left"></slot>
|
||||||
</template>
|
</template>
|
||||||
<template #top-right v-if="!$props.withoutHeader">
|
<template #top-right v-if="!$props.withoutHeader">
|
||||||
<slot name="top-right"></slot>
|
|
||||||
<VnVisibleColumn
|
<VnVisibleColumn
|
||||||
v-if="isTableMode"
|
v-if="isTableMode"
|
||||||
v-model="splittedColumns.columns"
|
v-model="splittedColumns.columns"
|
||||||
|
|
@ -640,43 +385,43 @@ function cardClick(_, row) {
|
||||||
dense
|
dense
|
||||||
:options="tableModes.filter((mode) => !mode.disable)"
|
:options="tableModes.filter((mode) => !mode.disable)"
|
||||||
/>
|
/>
|
||||||
|
<QBtn
|
||||||
|
v-if="showRightIcon"
|
||||||
|
icon="filter_alt"
|
||||||
|
class="bg-vn-section-color q-ml-sm"
|
||||||
|
dense
|
||||||
|
@click="stateStore.toggleRightDrawer()"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template #header-cell="{ col }">
|
<template #header-cell="{ col }">
|
||||||
<QTh
|
<QTh
|
||||||
v-if="col.visible ?? true"
|
v-if="col.visible ?? true"
|
||||||
v-bind:class="col.headerClass"
|
:style="col.headerStyle"
|
||||||
class="body-cell"
|
:class="col.headerClass"
|
||||||
:style="col?.width ? `max-width: ${col?.width}` : ''"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="no-padding"
|
class="column ellipsis"
|
||||||
:style="[
|
:class="`text-${col?.align ?? 'left'}`"
|
||||||
withFilters && $props.columnSearch ? 'height: 75px' : '',
|
:style="$props.columnSearch ? 'height: 75px' : ''"
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<div style="height: 30px">
|
<div class="row items-center no-wrap" style="height: 30px">
|
||||||
<QTooltip v-if="col.toolTip">{{ col.toolTip }}</QTooltip>
|
<QTooltip v-if="col.toolTip">{{ col.toolTip }}</QTooltip>
|
||||||
<VnTableOrder
|
<VnTableOrder
|
||||||
v-model="orders[col.orderBy ?? col.name]"
|
v-model="orders[col.orderBy ?? col.name]"
|
||||||
:name="col.orderBy ?? col.name"
|
:name="col.orderBy ?? col.name"
|
||||||
:label="col?.labelAbbreviation ?? col?.label"
|
:label="col?.label"
|
||||||
:data-key="$attrs['data-key']"
|
:data-key="$attrs['data-key']"
|
||||||
:search-url="searchUrl"
|
:search-url="searchUrl"
|
||||||
:align="getColAlign(col)"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<VnFilter
|
<VnFilter
|
||||||
v-if="
|
v-if="$props.columnSearch"
|
||||||
$props.columnSearch &&
|
|
||||||
col.columnSearch !== false &&
|
|
||||||
withFilters
|
|
||||||
"
|
|
||||||
:column="col"
|
:column="col"
|
||||||
:show-title="true"
|
:show-title="true"
|
||||||
:data-key="$attrs['data-key']"
|
:data-key="$attrs['data-key']"
|
||||||
v-model="params[columnName(col)]"
|
v-model="params[columnName(col)]"
|
||||||
:search-url="searchUrl"
|
:search-url="searchUrl"
|
||||||
customClass="header-filter"
|
class="full-width"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</QTh>
|
</QTh>
|
||||||
|
|
@ -694,67 +439,32 @@ function cardClick(_, row) {
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
<template #body-cell="{ col, row, rowIndex }">
|
<template #body-cell="{ col, row, rowIndex }">
|
||||||
|
<!-- Columns -->
|
||||||
<QTd
|
<QTd
|
||||||
class="no-margin q-px-xs"
|
auto-width
|
||||||
|
class="no-margin"
|
||||||
|
:class="[getColAlign(col), col.columnClass]"
|
||||||
|
:style="col.style"
|
||||||
v-if="col.visible ?? true"
|
v-if="col.visible ?? true"
|
||||||
:style="{
|
@click.ctrl="
|
||||||
'max-width': col?.width ?? false,
|
($event) =>
|
||||||
position: 'relative',
|
rowCtrlClickFunction && rowCtrlClickFunction($event, row)
|
||||||
}"
|
"
|
||||||
:class="[
|
|
||||||
col.columnClass,
|
|
||||||
'body-cell no-margin no-padding',
|
|
||||||
getColAlign(col),
|
|
||||||
]"
|
|
||||||
:data-row-index="rowIndex"
|
|
||||||
:data-col-field="col?.name"
|
|
||||||
>
|
>
|
||||||
<div
|
<slot
|
||||||
class="no-padding no-margin peter"
|
:name="`column-${col.name}`"
|
||||||
style="
|
:col="col"
|
||||||
overflow: hidden;
|
:row="row"
|
||||||
text-overflow: ellipsis;
|
:row-index="rowIndex"
|
||||||
white-space: nowrap;
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<slot
|
<VnTableColumn
|
||||||
:name="`column-${col.name}`"
|
:column="col"
|
||||||
:col="col"
|
|
||||||
:row="row"
|
:row="row"
|
||||||
:row-index="rowIndex"
|
:is-editable="col.isEditable ?? isEditable"
|
||||||
>
|
v-model="row[col.name]"
|
||||||
<QIcon
|
component-prop="columnField"
|
||||||
v-if="col?.component === 'toggle'"
|
/>
|
||||||
:name="
|
</slot>
|
||||||
col?.getIcon
|
|
||||||
? col.getIcon(row[col?.name])
|
|
||||||
: getToggleIcon(row[col?.name])
|
|
||||||
"
|
|
||||||
style="color: var(--vn-text-color)"
|
|
||||||
:class="hasEditableFormat(col)"
|
|
||||||
size="14px"
|
|
||||||
/>
|
|
||||||
<QIcon
|
|
||||||
v-else-if="col?.component === 'checkbox'"
|
|
||||||
:name="getCheckboxIcon(row[col?.name])"
|
|
||||||
style="color: var(--vn-text-color)"
|
|
||||||
:class="hasEditableFormat(col)"
|
|
||||||
size="14px"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
v-else
|
|
||||||
:class="hasEditableFormat(col)"
|
|
||||||
:style="
|
|
||||||
typeof col?.style == 'function'
|
|
||||||
? col.style(row)
|
|
||||||
: col?.style
|
|
||||||
"
|
|
||||||
style="bottom: 0"
|
|
||||||
>
|
|
||||||
{{ formatColumnValue(col, row, dashIfEmpty) }}
|
|
||||||
</span>
|
|
||||||
</slot>
|
|
||||||
</div>
|
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
<template #body-cell-tableActions="{ col, row }">
|
<template #body-cell-tableActions="{ col, row }">
|
||||||
|
|
@ -775,7 +485,7 @@ function cardClick(_, row) {
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
:class="
|
:class="
|
||||||
btn.isPrimary ? 'text-primary-light' : 'color-vn-label'
|
btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
|
||||||
"
|
"
|
||||||
:style="`visibility: ${
|
:style="`visibility: ${
|
||||||
((btn.show && btn.show(row)) ?? true)
|
((btn.show && btn.show(row)) ?? true)
|
||||||
|
|
@ -783,7 +493,6 @@ function cardClick(_, row) {
|
||||||
: 'hidden'
|
: 'hidden'
|
||||||
}`"
|
}`"
|
||||||
@click="btn.action(row)"
|
@click="btn.action(row)"
|
||||||
:data-cy="btn?.name ?? `tableAction-${index}`"
|
|
||||||
/>
|
/>
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -832,7 +541,7 @@ function cardClick(_, row) {
|
||||||
</QCardSection>
|
</QCardSection>
|
||||||
<!-- Fields -->
|
<!-- Fields -->
|
||||||
<QCardSection
|
<QCardSection
|
||||||
class="q-pl-sm q-py-xs"
|
class="q-pl-sm q-pr-lg q-py-xs"
|
||||||
:class="$props.cardClass"
|
:class="$props.cardClass"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
|
@ -853,7 +562,7 @@ function cardClick(_, row) {
|
||||||
:row="row"
|
:row="row"
|
||||||
:row-index="index"
|
:row-index="index"
|
||||||
>
|
>
|
||||||
<VnColumn
|
<VnTableColumn
|
||||||
:column="col"
|
:column="col"
|
||||||
:row="row"
|
:row="row"
|
||||||
:is-editable="false"
|
:is-editable="false"
|
||||||
|
|
@ -879,14 +588,13 @@ function cardClick(_, row) {
|
||||||
:key="index"
|
:key="index"
|
||||||
:title="btn.title"
|
:title="btn.title"
|
||||||
:icon="btn.icon"
|
:icon="btn.icon"
|
||||||
data-cy="cardBtn"
|
|
||||||
class="q-pa-xs"
|
class="q-pa-xs"
|
||||||
|
flat
|
||||||
:class="
|
:class="
|
||||||
btn.isPrimary
|
btn.isPrimary
|
||||||
? 'text-primary-light'
|
? 'text-primary-light'
|
||||||
: 'color-vn-label'
|
: 'color-vn-text '
|
||||||
"
|
"
|
||||||
flat
|
|
||||||
@click="btn.action(row)"
|
@click="btn.action(row)"
|
||||||
/>
|
/>
|
||||||
</QCardSection>
|
</QCardSection>
|
||||||
|
|
@ -894,17 +602,14 @@ function cardClick(_, row) {
|
||||||
</component>
|
</component>
|
||||||
</template>
|
</template>
|
||||||
<template #bottom-row="{ cols }" v-if="$props.footer">
|
<template #bottom-row="{ cols }" v-if="$props.footer">
|
||||||
<QTr v-if="rows.length" style="height: 45px">
|
<QTr v-if="rows.length" style="height: 30px">
|
||||||
<QTh v-if="table.selection" />
|
|
||||||
<QTh
|
<QTh
|
||||||
v-for="col of cols.filter((cols) => cols.visible ?? true)"
|
v-for="col of cols.filter((cols) => cols.visible ?? true)"
|
||||||
:key="col?.id"
|
:key="col?.id"
|
||||||
|
class="text-center"
|
||||||
:class="getColAlign(col)"
|
:class="getColAlign(col)"
|
||||||
>
|
>
|
||||||
<slot
|
<slot :name="`column-footer-${col.name}`" />
|
||||||
:name="`column-footer-${col.name}`"
|
|
||||||
:isEditableColumn="isEditableColumn(col)"
|
|
||||||
/>
|
|
||||||
</QTh>
|
</QTh>
|
||||||
</QTr>
|
</QTr>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -923,7 +628,7 @@ function cardClick(_, row) {
|
||||||
size="md"
|
size="md"
|
||||||
round
|
round
|
||||||
flat
|
flat
|
||||||
v-shortcut="'+'"
|
shortcut="+"
|
||||||
:disabled="!disabledAttr"
|
:disabled="!disabledAttr"
|
||||||
/>
|
/>
|
||||||
<QTooltip>
|
<QTooltip>
|
||||||
|
|
@ -941,60 +646,39 @@ function cardClick(_, row) {
|
||||||
color="primary"
|
color="primary"
|
||||||
fab
|
fab
|
||||||
icon="add"
|
icon="add"
|
||||||
v-shortcut="'+'"
|
shortcut="+"
|
||||||
data-cy="vnTableCreateBtn"
|
data-cy="vnTableCreateBtn"
|
||||||
/>
|
/>
|
||||||
<QTooltip self="top right">
|
<QTooltip self="top right">
|
||||||
{{ createForm?.title }}
|
{{ createForm?.title }}
|
||||||
</QTooltip>
|
</QTooltip>
|
||||||
</QPageSticky>
|
</QPageSticky>
|
||||||
<QDialog
|
<QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
|
||||||
v-model="showForm"
|
|
||||||
transition-show="scale"
|
|
||||||
transition-hide="scale"
|
|
||||||
:full-width="createComplement?.isFullWidth ?? false"
|
|
||||||
@before-hide="
|
|
||||||
() => {
|
|
||||||
if (createRef.isSaveAndContinue) {
|
|
||||||
showForm = true;
|
|
||||||
createForm.formInitialData = { ...create.formInitialData };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
"
|
|
||||||
data-cy="vn-table-create-dialog"
|
|
||||||
>
|
|
||||||
<FormModelPopup
|
<FormModelPopup
|
||||||
ref="createRef"
|
|
||||||
v-bind="createForm"
|
v-bind="createForm"
|
||||||
:model="$attrs['data-key'] + 'Create'"
|
:model="$attrs['data-key'] + 'Create'"
|
||||||
@on-data-saved="(_, res) => createForm.onDataSaved(res)"
|
@on-data-saved="(_, res) => createForm.onDataSaved(res)"
|
||||||
>
|
>
|
||||||
<template #form-inputs="{ data }">
|
<template #form-inputs="{ data }">
|
||||||
<div :style="createComplement?.containerStyle">
|
<div class="grid-create">
|
||||||
<div>
|
<slot
|
||||||
<slot name="previous-create-dialog" :data="data" />
|
v-for="column of splittedColumns.create"
|
||||||
</div>
|
:key="column.name"
|
||||||
<div class="grid-create" :style="createComplement?.columnGridStyle">
|
:name="`column-create-${column.name}`"
|
||||||
<slot
|
:data="data"
|
||||||
v-for="column of splittedColumns.create"
|
:column-name="column.name"
|
||||||
:key="column.name"
|
:label="column.label"
|
||||||
:name="`column-create-${column.name}`"
|
>
|
||||||
:data="data"
|
<VnTableColumn
|
||||||
:column-name="column.name"
|
:column="column"
|
||||||
:label="column.label"
|
:row="{}"
|
||||||
>
|
default="input"
|
||||||
<VnColumn
|
v-model="data[column.name]"
|
||||||
:column="column"
|
:show-label="true"
|
||||||
:row="{}"
|
component-prop="columnCreate"
|
||||||
default="input"
|
/>
|
||||||
v-model="data[column.name]"
|
</slot>
|
||||||
:show-label="true"
|
<slot name="more-create-dialog" :data="data" />
|
||||||
component-prop="columnCreate"
|
|
||||||
:data-cy="`${column.name}-create-popup`"
|
|
||||||
/>
|
|
||||||
</slot>
|
|
||||||
<slot name="more-create-dialog" :data="data" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</FormModelPopup>
|
</FormModelPopup>
|
||||||
|
|
@ -1012,42 +696,6 @@ es:
|
||||||
</i18n>
|
</i18n>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.selection-cell {
|
|
||||||
table td:first-child {
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.side-padding {
|
|
||||||
padding-left: 1px;
|
|
||||||
padding-right: 1px;
|
|
||||||
}
|
|
||||||
.editable-text:hover {
|
|
||||||
border-bottom: 1px dashed var(--q-primary);
|
|
||||||
@extend .side-padding;
|
|
||||||
}
|
|
||||||
.editable-text {
|
|
||||||
border-bottom: 1px dashed var(--vn-label-color);
|
|
||||||
@extend .side-padding;
|
|
||||||
}
|
|
||||||
.cell-input {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
padding-top: 0px !important;
|
|
||||||
}
|
|
||||||
.q-field--labeled .q-field__native,
|
|
||||||
.q-field--labeled .q-field__prefix,
|
|
||||||
.q-field--labeled .q-field__suffix {
|
|
||||||
padding-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.body-cell {
|
|
||||||
padding-left: 4px !important;
|
|
||||||
padding-right: 4px !important;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.bg-chip-secondary {
|
.bg-chip-secondary {
|
||||||
background-color: var(--vn-page-color);
|
background-color: var(--vn-page-color);
|
||||||
color: var(--vn-text-color);
|
color: var(--vn-text-color);
|
||||||
|
|
@ -1064,8 +712,8 @@ es:
|
||||||
|
|
||||||
.grid-three {
|
.grid-three {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
|
grid-template-columns: repeat(auto-fit, minmax(350px, max-content));
|
||||||
width: 100%;
|
max-width: 100%;
|
||||||
grid-gap: 20px;
|
grid-gap: 20px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
@ -1073,6 +721,7 @@ es:
|
||||||
.grid-create {
|
.grid-create {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
|
grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
|
||||||
|
max-width: 100%;
|
||||||
grid-gap: 20px;
|
grid-gap: 20px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
@ -1088,9 +737,7 @@ es:
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.q-table tbody tr td {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.q-table {
|
.q-table {
|
||||||
th {
|
th {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -1139,7 +786,6 @@ es:
|
||||||
.vn-label-value {
|
.vn-label-value {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
|
||||||
color: var(--vn-text-color);
|
color: var(--vn-text-color);
|
||||||
.value {
|
.value {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -1191,15 +837,4 @@ es:
|
||||||
.q-table__middle.q-virtual-scroll.q-virtual-scroll--vertical.scroll {
|
.q-table__middle.q-virtual-scroll.q-virtual-scroll--vertical.scroll {
|
||||||
background-color: var(--vn-section-color);
|
background-color: var(--vn-section-color);
|
||||||
}
|
}
|
||||||
.temp-input {
|
|
||||||
top: 0;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
label.header-filter > .q-field__inner > .q-field__control {
|
|
||||||
padding: inherit;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -27,36 +27,31 @@ function columnName(col) {
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<VnFilterPanel v-bind="$attrs" :search-button="true" :disable-submit-event="true">
|
<VnFilterPanel v-bind="$attrs" :search-button="true" :disable-submit-event="true">
|
||||||
<template #body="{ params, orders, searchFn }">
|
<template #body="{ params, orders }">
|
||||||
<div
|
<div
|
||||||
class="container"
|
class="row no-wrap flex-center"
|
||||||
v-for="col of columns.filter((c) => c.columnFilter ?? true)"
|
v-for="col of columns.filter((c) => c.columnFilter ?? true)"
|
||||||
:key="col.id"
|
:key="col.id"
|
||||||
>
|
>
|
||||||
<div class="filter">
|
<VnFilter
|
||||||
<VnFilter
|
ref="tableFilterRef"
|
||||||
ref="tableFilterRef"
|
:column="col"
|
||||||
:column="col"
|
:data-key="$attrs['data-key']"
|
||||||
:data-key="$attrs['data-key']"
|
v-model="params[columnName(col)]"
|
||||||
v-model="params[columnName(col)]"
|
:search-url="searchUrl"
|
||||||
:search-url="searchUrl"
|
/>
|
||||||
/>
|
<VnTableOrder
|
||||||
</div>
|
v-if="col?.columnFilter !== false && col?.name !== 'tableActions'"
|
||||||
<div class="order">
|
v-model="orders[col.orderBy ?? col.name]"
|
||||||
<VnTableOrder
|
:name="col.orderBy ?? col.name"
|
||||||
v-if="col?.columnFilter !== false && col?.name !== 'tableActions'"
|
:data-key="$attrs['data-key']"
|
||||||
v-model="orders[col.orderBy ?? col.name]"
|
:search-url="searchUrl"
|
||||||
:name="col.orderBy ?? col.name"
|
:vertical="true"
|
||||||
:data-key="$attrs['data-key']"
|
/>
|
||||||
:search-url="searchUrl"
|
|
||||||
:vertical="true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<slot
|
<slot
|
||||||
name="moreFilterPanel"
|
name="moreFilterPanel"
|
||||||
:params="params"
|
:params="params"
|
||||||
:search-fn="searchFn"
|
|
||||||
:orders="orders"
|
:orders="orders"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
/>
|
/>
|
||||||
|
|
@ -72,21 +67,3 @@ function columnName(col) {
|
||||||
</template>
|
</template>
|
||||||
</VnFilterPanel>
|
</VnFilterPanel>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" scoped>
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 45px;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter {
|
|
||||||
width: 70%;
|
|
||||||
height: 40px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.order {
|
|
||||||
width: 10%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -32,21 +32,16 @@ const areAllChecksMarked = computed(() => {
|
||||||
|
|
||||||
function setUserConfigViewData(data, isLocal) {
|
function setUserConfigViewData(data, isLocal) {
|
||||||
if (!data) return;
|
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
|
||||||
if (!isLocal) localColumns.value = [];
|
if (!isLocal) localColumns.value = [];
|
||||||
|
// Array to Object
|
||||||
const skippeds = $props.skip.reduce((a, v) => ({ ...a, [v]: v }), {});
|
const skippeds = $props.skip.reduce((a, v) => ({ ...a, [v]: v }), {});
|
||||||
|
|
||||||
for (let column of columns.value) {
|
for (let column of columns.value) {
|
||||||
const { label, name, labelAbbreviation } = column;
|
const { label, name } = column;
|
||||||
if (skippeds[name]) continue;
|
if (skippeds[name]) continue;
|
||||||
column.visible = data[name] ?? true;
|
column.visible = data[name] ?? true;
|
||||||
if (!isLocal)
|
if (!isLocal) localColumns.value.push({ name, label, visible: column.visible });
|
||||||
localColumns.value.push({
|
|
||||||
name,
|
|
||||||
label,
|
|
||||||
labelAbbreviation,
|
|
||||||
visible: column.visible,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -157,11 +152,7 @@ onMounted(async () => {
|
||||||
<QCheckbox
|
<QCheckbox
|
||||||
v-for="col in localColumns"
|
v-for="col in localColumns"
|
||||||
:key="col.name"
|
:key="col.name"
|
||||||
:label="
|
:label="col.label ?? col.name"
|
||||||
col?.labelAbbreviation
|
|
||||||
? col.labelAbbreviation + ` (${col.label ?? col.name})`
|
|
||||||
: (col.label ?? col.name)
|
|
||||||
"
|
|
||||||
v-model="col.visible"
|
v-model="col.visible"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,6 @@ describe('FormModel', () => {
|
||||||
vm.state.set(model, formInitialData);
|
vm.state.set(model, formInitialData);
|
||||||
expect(vm.hasChanges).toBe(false);
|
expect(vm.hasChanges).toBe(false);
|
||||||
|
|
||||||
await vm.$nextTick();
|
|
||||||
vm.formData.mockKey = 'newVal';
|
vm.formData.mockKey = 'newVal';
|
||||||
await vm.$nextTick();
|
await vm.$nextTick();
|
||||||
expect(vm.hasChanges).toBe(true);
|
expect(vm.hasChanges).toBe(true);
|
||||||
|
|
@ -94,13 +93,9 @@ describe('FormModel', () => {
|
||||||
|
|
||||||
it('should call axios.patch with the right data', async () => {
|
it('should call axios.patch with the right data', async () => {
|
||||||
const spy = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
|
const spy = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
|
||||||
const { vm } = mount({ propsData: { url, model } });
|
const { vm } = mount({ propsData: { url, model, formInitialData } });
|
||||||
|
vm.formData.mockKey = 'newVal';
|
||||||
vm.formData = {};
|
|
||||||
await vm.$nextTick();
|
await vm.$nextTick();
|
||||||
vm.formData = { mockKey: 'newVal' };
|
|
||||||
await vm.$nextTick();
|
|
||||||
|
|
||||||
await vm.save();
|
await vm.save();
|
||||||
expect(spy).toHaveBeenCalled();
|
expect(spy).toHaveBeenCalled();
|
||||||
vm.formData.mockKey = 'mockVal';
|
vm.formData.mockKey = 'mockVal';
|
||||||
|
|
@ -111,7 +106,6 @@ describe('FormModel', () => {
|
||||||
const { vm } = mount({
|
const { vm } = mount({
|
||||||
propsData: { url, model, formInitialData, urlCreate: 'mockUrlCreate' },
|
propsData: { url, model, formInitialData, urlCreate: 'mockUrlCreate' },
|
||||||
});
|
});
|
||||||
await vm.$nextTick();
|
|
||||||
vm.formData.mockKey = 'newVal';
|
vm.formData.mockKey = 'newVal';
|
||||||
await vm.$nextTick();
|
await vm.$nextTick();
|
||||||
await vm.save();
|
await vm.save();
|
||||||
|
|
@ -125,7 +119,7 @@ describe('FormModel', () => {
|
||||||
});
|
});
|
||||||
const spyPatch = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
|
const spyPatch = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
|
||||||
const spySaveFn = vi.spyOn(vm.$props, 'saveFn');
|
const spySaveFn = vi.spyOn(vm.$props, 'saveFn');
|
||||||
await vm.$nextTick();
|
|
||||||
vm.formData.mockKey = 'newVal';
|
vm.formData.mockKey = 'newVal';
|
||||||
await vm.$nextTick();
|
await vm.$nextTick();
|
||||||
await vm.save();
|
await vm.save();
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,8 @@
|
||||||
import { vi, describe, expect, it, beforeAll, beforeEach, afterEach } from 'vitest';
|
import { vi, describe, expect, it, beforeAll } from 'vitest';
|
||||||
import { createWrapper, axios } from 'app/test/vitest/helper';
|
import { createWrapper, axios } from 'app/test/vitest/helper';
|
||||||
import Leftmenu from 'components/LeftMenu.vue';
|
import Leftmenu from 'components/LeftMenu.vue';
|
||||||
import * as vueRouter from 'vue-router';
|
|
||||||
import { useNavigationStore } from 'src/stores/useNavigationStore';
|
|
||||||
|
|
||||||
let vm;
|
import { useNavigationStore } from 'src/stores/useNavigationStore';
|
||||||
let navigation;
|
|
||||||
|
|
||||||
vi.mock('src/router/modules', () => ({
|
vi.mock('src/router/modules', () => ({
|
||||||
default: [
|
default: [
|
||||||
|
|
@ -24,16 +21,6 @@ vi.mock('src/router/modules', () => ({
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
name: 'CustomerMain',
|
name: 'CustomerMain',
|
||||||
meta: {
|
|
||||||
menu: 'Customer',
|
|
||||||
menuChildren: [
|
|
||||||
{
|
|
||||||
name: 'CustomerCreditContracts',
|
|
||||||
title: 'creditContracts',
|
|
||||||
icon: 'vn:solunion',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'list',
|
path: 'list',
|
||||||
|
|
@ -41,13 +28,6 @@ vi.mock('src/router/modules', () => ({
|
||||||
meta: {
|
meta: {
|
||||||
title: 'list',
|
title: 'list',
|
||||||
icon: 'view_list',
|
icon: 'view_list',
|
||||||
menuChildren: [
|
|
||||||
{
|
|
||||||
name: 'CustomerCreditContracts',
|
|
||||||
title: 'creditContracts',
|
|
||||||
icon: 'vn:solunion',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -64,325 +44,51 @@ vi.mock('src/router/modules', () => ({
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}));
|
}));
|
||||||
vi.spyOn(vueRouter, 'useRoute').mockReturnValue({
|
|
||||||
matched: [
|
describe('Leftmenu', () => {
|
||||||
{
|
let vm;
|
||||||
path: '/',
|
let navigation;
|
||||||
redirect: {
|
beforeAll(() => {
|
||||||
name: 'Dashboard',
|
vi.spyOn(axios, 'get').mockResolvedValue({
|
||||||
|
data: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
vm = createWrapper(Leftmenu, {
|
||||||
|
propsData: {
|
||||||
|
source: 'main',
|
||||||
},
|
},
|
||||||
name: 'Main',
|
}).vm;
|
||||||
meta: {},
|
|
||||||
props: {
|
navigation = useNavigationStore();
|
||||||
default: false,
|
navigation.fetchPinned = vi.fn().mockReturnValue(Promise.resolve(true));
|
||||||
},
|
navigation.getModules = vi.fn().mockReturnValue({
|
||||||
children: [
|
value: [
|
||||||
{
|
{
|
||||||
path: '/dashboard',
|
name: 'customer',
|
||||||
name: 'Dashboard',
|
title: 'customer.pageTitles.customers',
|
||||||
meta: {
|
icon: 'vn:customer',
|
||||||
title: 'dashboard',
|
module: 'customer',
|
||||||
icon: 'dashboard',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/customer',
|
|
||||||
redirect: {
|
|
||||||
name: 'CustomerMain',
|
|
||||||
},
|
|
||||||
name: 'Customer',
|
|
||||||
meta: {
|
|
||||||
title: 'customers',
|
|
||||||
icon: 'vn:client',
|
|
||||||
moduleName: 'Customer',
|
|
||||||
keyBinding: 'c',
|
|
||||||
menu: 'customer',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
query: {},
|
|
||||||
params: {},
|
|
||||||
meta: { moduleName: 'mockName' },
|
|
||||||
path: 'mockName/1',
|
|
||||||
name: 'Customer',
|
|
||||||
});
|
|
||||||
function mount(source = 'main') {
|
|
||||||
vi.spyOn(axios, 'get').mockResolvedValue({
|
|
||||||
data: [],
|
|
||||||
});
|
|
||||||
const wrapper = createWrapper(Leftmenu, {
|
|
||||||
propsData: {
|
|
||||||
source,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
navigation = useNavigationStore();
|
|
||||||
navigation.fetchPinned = vi.fn().mockReturnValue(Promise.resolve(true));
|
|
||||||
navigation.getModules = vi.fn().mockReturnValue({
|
|
||||||
value: [
|
|
||||||
{
|
|
||||||
name: 'customer',
|
|
||||||
title: 'customer.pageTitles.customers',
|
|
||||||
icon: 'vn:customer',
|
|
||||||
module: 'customer',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
return wrapper;
|
|
||||||
}
|
|
||||||
|
|
||||||
describe('getRoutes', () => {
|
|
||||||
afterEach(() => vi.clearAllMocks());
|
|
||||||
const getRoutes = vi.fn().mockImplementation((props, getMethodA, getMethodB) => {
|
|
||||||
const handleRoutes = {
|
|
||||||
methodA: getMethodA,
|
|
||||||
methodB: getMethodB,
|
|
||||||
};
|
|
||||||
try {
|
|
||||||
handleRoutes[props.source]();
|
|
||||||
} catch (error) {
|
|
||||||
throw Error('Method not defined');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const getMethodA = vi.fn();
|
|
||||||
const getMethodB = vi.fn();
|
|
||||||
const fn = (props) => getRoutes(props, getMethodA, getMethodB);
|
|
||||||
|
|
||||||
it('should call getMethodB when source is card', () => {
|
|
||||||
let props = { source: 'methodB' };
|
|
||||||
fn(props);
|
|
||||||
|
|
||||||
expect(getMethodB).toHaveBeenCalled();
|
|
||||||
expect(getMethodA).not.toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
it('should call getMethodA when source is main', () => {
|
|
||||||
let props = { source: 'methodA' };
|
|
||||||
fn(props);
|
|
||||||
|
|
||||||
expect(getMethodA).toHaveBeenCalled();
|
|
||||||
expect(getMethodB).not.toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should call getMethodA when source is not exists or undefined', () => {
|
|
||||||
let props = { source: 'methodC' };
|
|
||||||
expect(() => fn(props)).toThrowError('Method not defined');
|
|
||||||
|
|
||||||
expect(getMethodA).not.toHaveBeenCalled();
|
|
||||||
expect(getMethodB).not.toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Leftmenu as card', () => {
|
|
||||||
beforeAll(() => {
|
|
||||||
vm = mount('card').vm;
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should get routes for card source', async () => {
|
|
||||||
vm.getRoutes();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
describe('Leftmenu as main', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
vm = mount().vm;
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should initialize with default props', () => {
|
|
||||||
expect(vm.source).toBe('main');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should filter items based on search input', async () => {
|
|
||||||
vm.search = 'cust';
|
|
||||||
await vm.$nextTick();
|
|
||||||
expect(vm.filteredItems[0].name).toEqual('customer');
|
|
||||||
expect(vm.filteredItems[0].module).toEqual('customer');
|
|
||||||
});
|
|
||||||
it('should filter items based on search input', async () => {
|
|
||||||
vm.search = 'Rou';
|
|
||||||
await vm.$nextTick();
|
|
||||||
expect(vm.filteredItems).toEqual([]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should return pinned items', () => {
|
|
||||||
vm.items = [
|
|
||||||
{ name: 'Item 1', isPinned: false },
|
|
||||||
{ name: 'Item 2', isPinned: true },
|
|
||||||
];
|
|
||||||
expect(vm.pinnedModules).toEqual(
|
|
||||||
new Map([['Item 2', { name: 'Item 2', isPinned: true }]]),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should find matches in routes', () => {
|
|
||||||
const search = 'child1';
|
|
||||||
const item = {
|
|
||||||
children: [
|
|
||||||
{ name: 'child1', children: [] },
|
|
||||||
{ name: 'child2', children: [] },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
const matches = vm.findMatches(search, item);
|
|
||||||
expect(matches).toEqual([{ name: 'child1', children: [] }]);
|
|
||||||
});
|
|
||||||
it('should not proceed if event is already prevented', async () => {
|
|
||||||
const item = { module: 'testModule', isPinned: false };
|
|
||||||
const event = {
|
|
||||||
preventDefault: vi.fn(),
|
|
||||||
stopPropagation: vi.fn(),
|
|
||||||
defaultPrevented: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
await vm.togglePinned(item, event);
|
|
||||||
|
|
||||||
expect(event.preventDefault).not.toHaveBeenCalled();
|
|
||||||
expect(event.stopPropagation).not.toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should call quasar.notify with success message', async () => {
|
|
||||||
const item = { module: 'testModule', isPinned: false };
|
|
||||||
const event = {
|
|
||||||
preventDefault: vi.fn(),
|
|
||||||
stopPropagation: vi.fn(),
|
|
||||||
defaultPrevented: false,
|
|
||||||
};
|
|
||||||
const response = { data: { id: 1 } };
|
|
||||||
|
|
||||||
vi.spyOn(axios, 'post').mockResolvedValue(response);
|
|
||||||
vi.spyOn(vm.quasar, 'notify');
|
|
||||||
|
|
||||||
await vm.togglePinned(item, event);
|
|
||||||
|
|
||||||
expect(vm.quasar.notify).toHaveBeenCalledWith({
|
|
||||||
message: 'Data saved',
|
|
||||||
type: 'positive',
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should handle a single matched route with a menu', () => {
|
it('should return a proper formated object with two child items', async () => {
|
||||||
const route = {
|
const expectedMenuItem = [
|
||||||
matched: [{ meta: { menu: 'customer' } }],
|
{
|
||||||
};
|
children: null,
|
||||||
|
name: 'CustomerList',
|
||||||
const result = vm.betaGetRoutes();
|
title: 'globals.pageTitles.list',
|
||||||
|
icon: 'view_list',
|
||||||
expect(result.meta.menu).toEqual(route.matched[0].meta.menu);
|
|
||||||
});
|
|
||||||
it('should get routes for main source', () => {
|
|
||||||
vm.props.source = 'main';
|
|
||||||
vm.getRoutes();
|
|
||||||
expect(navigation.getModules).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should find direct child matches', () => {
|
|
||||||
const search = 'child1';
|
|
||||||
const item = {
|
|
||||||
children: [{ name: 'child1' }, { name: 'child2' }],
|
|
||||||
};
|
|
||||||
const result = vm.findMatches(search, item);
|
|
||||||
expect(result).toEqual([{ name: 'child1' }]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should find nested child matches', () => {
|
|
||||||
const search = 'child3';
|
|
||||||
const item = {
|
|
||||||
children: [
|
|
||||||
{ name: 'child1' },
|
|
||||||
{
|
|
||||||
name: 'child2',
|
|
||||||
children: [{ name: 'child3' }],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
const result = vm.findMatches(search, item);
|
|
||||||
expect(result).toEqual([{ name: 'child3' }]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('normalize', () => {
|
|
||||||
beforeAll(() => {
|
|
||||||
vm = mount('card').vm;
|
|
||||||
});
|
|
||||||
it('should normalize and lowercase text', () => {
|
|
||||||
const input = 'ÁÉÍÓÚáéíóú';
|
|
||||||
const expected = 'aeiouaeiou';
|
|
||||||
expect(vm.normalize(input)).toBe(expected);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should handle empty string', () => {
|
|
||||||
const input = '';
|
|
||||||
const expected = '';
|
|
||||||
expect(vm.normalize(input)).toBe(expected);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should handle text without diacritics', () => {
|
|
||||||
const input = 'hello';
|
|
||||||
const expected = 'hello';
|
|
||||||
expect(vm.normalize(input)).toBe(expected);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should handle mixed text', () => {
|
|
||||||
const input = 'Héllo Wórld!';
|
|
||||||
const expected = 'hello world!';
|
|
||||||
expect(vm.normalize(input)).toBe(expected);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('addChildren', () => {
|
|
||||||
const module = 'testModule';
|
|
||||||
beforeEach(() => {
|
|
||||||
vm = mount().vm;
|
|
||||||
vi.clearAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should add menu items to parent if matches are found', () => {
|
|
||||||
const parent = 'testParent';
|
|
||||||
const route = {
|
|
||||||
meta: {
|
|
||||||
menu: 'testMenu',
|
|
||||||
},
|
},
|
||||||
children: [{ name: 'child1' }, { name: 'child2' }],
|
{
|
||||||
};
|
children: null,
|
||||||
vm.addChildren(module, route, parent);
|
name: 'CustomerCreate',
|
||||||
|
title: 'globals.pageTitles.createCustomer',
|
||||||
expect(navigation.addMenuItem).toHaveBeenCalled();
|
icon: 'vn:addperson',
|
||||||
});
|
|
||||||
|
|
||||||
it('should handle routes with no meta menu', () => {
|
|
||||||
const route = {
|
|
||||||
meta: {},
|
|
||||||
menus: {},
|
|
||||||
};
|
|
||||||
|
|
||||||
const parent = [];
|
|
||||||
|
|
||||||
vm.addChildren(module, route, parent);
|
|
||||||
expect(navigation.addMenuItem).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should handle empty parent array', () => {
|
|
||||||
const parent = [];
|
|
||||||
const route = {
|
|
||||||
meta: {
|
|
||||||
menu: 'child11',
|
|
||||||
},
|
},
|
||||||
children: [
|
];
|
||||||
{
|
const firstMenuItem = vm.items[0];
|
||||||
name: 'child1',
|
expect(firstMenuItem.children).toEqual(expect.arrayContaining(expectedMenuItem));
|
||||||
meta: {
|
|
||||||
menuChildren: [
|
|
||||||
{
|
|
||||||
name: 'CustomerCreditContracts',
|
|
||||||
title: 'creditContracts',
|
|
||||||
icon: 'vn:solunion',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
vm.addChildren(module, route, parent);
|
|
||||||
expect(navigation.addMenuItem).toHaveBeenCalled();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,65 +1,61 @@
|
||||||
import { vi, describe, expect, it, beforeEach, afterEach } from 'vitest';
|
import { vi, describe, expect, it, beforeEach, beforeAll, afterEach } from 'vitest';
|
||||||
import { createWrapper } from 'app/test/vitest/helper';
|
import { createWrapper } from 'app/test/vitest/helper';
|
||||||
import UserPanel from 'src/components/UserPanel.vue';
|
import UserPanel from 'src/components/UserPanel.vue';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { useState } from 'src/composables/useState';
|
import { useState } from 'src/composables/useState';
|
||||||
|
|
||||||
vi.mock('src/utils/quasarLang', () => ({
|
|
||||||
default: vi.fn(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe('UserPanel', () => {
|
describe('UserPanel', () => {
|
||||||
let wrapper;
|
let wrapper;
|
||||||
let vm;
|
let vm;
|
||||||
let state;
|
let state;
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
wrapper = createWrapper(UserPanel, {});
|
wrapper = createWrapper(UserPanel, {});
|
||||||
state = useState();
|
state = useState();
|
||||||
state.setUser({
|
state.setUser({
|
||||||
id: 115,
|
id: 115,
|
||||||
name: 'itmanagement',
|
name: 'itmanagement',
|
||||||
nickname: 'itManagementNick',
|
nickname: 'itManagementNick',
|
||||||
lang: 'en',
|
lang: 'en',
|
||||||
darkMode: false,
|
darkMode: false,
|
||||||
companyFk: 442,
|
companyFk: 442,
|
||||||
warehouseFk: 1,
|
warehouseFk: 1,
|
||||||
|
});
|
||||||
|
wrapper = wrapper.wrapper;
|
||||||
|
vm = wrapper.vm;
|
||||||
});
|
});
|
||||||
wrapper = wrapper.wrapper;
|
|
||||||
vm = wrapper.vm;
|
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
vi.clearAllMocks();
|
vi.clearAllMocks();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should fetch warehouses data on mounted', async () => {
|
it('should fetch warehouses data on mounted', async () => {
|
||||||
const fetchData = wrapper.findComponent({ name: 'FetchData' });
|
const fetchData = wrapper.findComponent({ name: 'FetchData' });
|
||||||
expect(fetchData.props('url')).toBe('Warehouses');
|
expect(fetchData.props('url')).toBe('Warehouses');
|
||||||
expect(fetchData.props('autoLoad')).toBe(true);
|
expect(fetchData.props('autoLoad')).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should toggle dark mode correctly and update preferences', async () => {
|
it('should toggle dark mode correctly and update preferences', async () => {
|
||||||
await vm.saveDarkMode(true);
|
await vm.saveDarkMode(true);
|
||||||
expect(axios.patch).toHaveBeenCalledWith('/UserConfigs/115', { darkMode: true });
|
expect(axios.patch).toHaveBeenCalledWith('/UserConfigs/115', { darkMode: true });
|
||||||
expect(vm.user.darkMode).toBe(true);
|
expect(vm.user.darkMode).toBe(true);
|
||||||
await vm.updatePreferences();
|
vm.updatePreferences();
|
||||||
expect(vm.darkMode).toBe(true);
|
expect(vm.darkMode).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should change user language and update preferences', async () => {
|
it('should change user language and update preferences', async () => {
|
||||||
const userLanguage = 'es';
|
const userLanguage = 'es';
|
||||||
await vm.saveLanguage(userLanguage);
|
await vm.saveLanguage(userLanguage);
|
||||||
expect(axios.patch).toHaveBeenCalledWith('/VnUsers/115', { lang: userLanguage });
|
expect(axios.patch).toHaveBeenCalledWith('/VnUsers/115', { lang: userLanguage });
|
||||||
expect(vm.user.lang).toBe(userLanguage);
|
expect(vm.user.lang).toBe(userLanguage);
|
||||||
await vm.updatePreferences();
|
vm.updatePreferences();
|
||||||
expect(vm.locale).toBe(userLanguage);
|
expect(vm.locale).toBe(userLanguage);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should update user data', async () => {
|
it('should update user data', async () => {
|
||||||
const key = 'name';
|
const key = 'name';
|
||||||
const value = 'itboss';
|
const value = 'itboss';
|
||||||
await vm.saveUserData(key, value);
|
await vm.saveUserData(key, value);
|
||||||
expect(axios.post).toHaveBeenCalledWith('UserConfigs/setUserConfig', { [key]: value });
|
expect(axios.post).toHaveBeenCalledWith('UserConfigs/setUserConfig', { [key]: value });
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -10,11 +10,11 @@ import LeftMenu from 'components/LeftMenu.vue';
|
||||||
import RightMenu from 'components/common/RightMenu.vue';
|
import RightMenu from 'components/common/RightMenu.vue';
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
dataKey: { type: String, required: true },
|
dataKey: { type: String, required: true },
|
||||||
url: { type: String, default: undefined },
|
baseUrl: { type: String, default: undefined },
|
||||||
|
customUrl: { type: String, default: undefined },
|
||||||
filter: { type: Object, default: () => {} },
|
filter: { type: Object, default: () => {} },
|
||||||
descriptor: { type: Object, required: true },
|
descriptor: { type: Object, required: true },
|
||||||
filterPanel: { type: Object, default: undefined },
|
filterPanel: { type: Object, default: undefined },
|
||||||
idInWhere: { type: Boolean, default: false },
|
|
||||||
searchDataKey: { type: String, default: undefined },
|
searchDataKey: { type: String, default: undefined },
|
||||||
searchbarProps: { type: Object, default: undefined },
|
searchbarProps: { type: Object, default: undefined },
|
||||||
redirectOnError: { type: Boolean, default: false },
|
redirectOnError: { type: Boolean, default: false },
|
||||||
|
|
@ -23,20 +23,25 @@ const props = defineProps({
|
||||||
const stateStore = useStateStore();
|
const stateStore = useStateStore();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const url = computed(() => {
|
||||||
|
if (props.baseUrl) {
|
||||||
|
return `${props.baseUrl}/${route.params.id}`;
|
||||||
|
}
|
||||||
|
return props.customUrl;
|
||||||
|
});
|
||||||
const searchRightDataKey = computed(() => {
|
const searchRightDataKey = computed(() => {
|
||||||
if (!props.searchDataKey) return route.name;
|
if (!props.searchDataKey) return route.name;
|
||||||
return props.searchDataKey;
|
return props.searchDataKey;
|
||||||
});
|
});
|
||||||
|
|
||||||
const arrayData = useArrayData(props.dataKey, {
|
const arrayData = useArrayData(props.dataKey, {
|
||||||
url: props.url,
|
url: url.value,
|
||||||
userFilter: props.filter,
|
filter: props.filter,
|
||||||
oneRecord: true,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeMount(async () => {
|
onBeforeMount(async () => {
|
||||||
try {
|
try {
|
||||||
await fetch(route.params.id);
|
if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
|
||||||
|
await arrayData.fetch({ append: false, updateRouter: false });
|
||||||
} catch {
|
} catch {
|
||||||
const { matched: matches } = router.currentRoute.value;
|
const { matched: matches } = router.currentRoute.value;
|
||||||
const { path } = matches.at(-1);
|
const { path } = matches.at(-1);
|
||||||
|
|
@ -44,17 +49,13 @@ onBeforeMount(async () => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeRouteUpdate(async (to, from) => {
|
if (props.baseUrl) {
|
||||||
const id = to.params.id;
|
onBeforeRouteUpdate(async (to, from) => {
|
||||||
if (id !== from.params.id) await fetch(id, true);
|
if (to.params.id !== from.params.id) {
|
||||||
});
|
arrayData.store.url = `${props.baseUrl}/${to.params.id}`;
|
||||||
|
await arrayData.fetch({ append: false, updateRouter: false });
|
||||||
async function fetch(id, append = false) {
|
}
|
||||||
const regex = /\/(\d+)/;
|
});
|
||||||
if (props.idInWhere) arrayData.store.filter.where = { id };
|
|
||||||
else if (!regex.test(props.url)) arrayData.store.url = `${props.url}/${id}`;
|
|
||||||
else arrayData.store.url = props.url.replace(regex, `/${id}`);
|
|
||||||
await arrayData.fetch({ append, updateRouter: false });
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -82,7 +83,7 @@ async function fetch(id, append = false) {
|
||||||
<QPage>
|
<QPage>
|
||||||
<VnSubToolbar />
|
<VnSubToolbar />
|
||||||
<div :class="[useCardSize(), $attrs.class]">
|
<div :class="[useCardSize(), $attrs.class]">
|
||||||
<RouterView :key="$route.path" />
|
<RouterView :key="route.path" />
|
||||||
</div>
|
</div>
|
||||||
</QPage>
|
</QPage>
|
||||||
</QPageContainer>
|
</QPageContainer>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onBeforeMount } from 'vue';
|
import { onBeforeMount, computed } from 'vue';
|
||||||
import { useRouter, onBeforeRouteUpdate } from 'vue-router';
|
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
|
||||||
import { useArrayData } from 'src/composables/useArrayData';
|
import { useArrayData } from 'src/composables/useArrayData';
|
||||||
import { useStateStore } from 'stores/useStateStore';
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
import useCardSize from 'src/composables/useCardSize';
|
import useCardSize from 'src/composables/useCardSize';
|
||||||
|
|
@ -9,9 +9,10 @@ import VnSubToolbar from '../ui/VnSubToolbar.vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
dataKey: { type: String, required: true },
|
dataKey: { type: String, required: true },
|
||||||
url: { type: String, default: undefined },
|
baseUrl: { type: String, default: undefined },
|
||||||
idInWhere: { type: Boolean, default: false },
|
customUrl: { type: String, default: undefined },
|
||||||
filter: { type: Object, default: () => {} },
|
filter: { type: Object, default: () => {} },
|
||||||
|
userFilter: { type: Object, default: () => {} },
|
||||||
descriptor: { type: Object, required: true },
|
descriptor: { type: Object, required: true },
|
||||||
filterPanel: { type: Object, default: undefined },
|
filterPanel: { type: Object, default: undefined },
|
||||||
searchDataKey: { type: String, default: undefined },
|
searchDataKey: { type: String, default: undefined },
|
||||||
|
|
@ -20,45 +21,39 @@ const props = defineProps({
|
||||||
});
|
});
|
||||||
|
|
||||||
const stateStore = useStateStore();
|
const stateStore = useStateStore();
|
||||||
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const url = computed(() => {
|
||||||
|
if (props.baseUrl) {
|
||||||
|
return `${props.baseUrl}/${route.params.id}`;
|
||||||
|
}
|
||||||
|
return props.customUrl;
|
||||||
|
});
|
||||||
|
|
||||||
const arrayData = useArrayData(props.dataKey, {
|
const arrayData = useArrayData(props.dataKey, {
|
||||||
url: props.url,
|
url: url.value,
|
||||||
userFilter: props.filter,
|
filter: props.filter,
|
||||||
oneRecord: true,
|
userFilter: props.userFilter,
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeMount(async () => {
|
onBeforeMount(async () => {
|
||||||
const route = router.currentRoute.value;
|
|
||||||
try {
|
try {
|
||||||
await fetch(route.params.id);
|
if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
|
||||||
|
await arrayData.fetch({ append: false, updateRouter: false });
|
||||||
} catch {
|
} catch {
|
||||||
const { matched: matches } = route;
|
const { matched: matches } = router.currentRoute.value;
|
||||||
const { path } = matches.at(-1);
|
const { path } = matches.at(-1);
|
||||||
router.push({ path: path.replace(/:id.*/, '') });
|
router.push({ path: path.replace(/:id.*/, '') });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeRouteUpdate(async (to, from) => {
|
if (props.baseUrl) {
|
||||||
if (hasRouteParam(to.params)) {
|
onBeforeRouteUpdate(async (to, from) => {
|
||||||
const { matched } = router.currentRoute.value;
|
if (to.params.id !== from.params.id) {
|
||||||
const { name } = matched.at(-3);
|
arrayData.store.url = `${props.baseUrl}/${to.params.id}`;
|
||||||
if (name) {
|
await arrayData.fetch({ append: false, updateRouter: false });
|
||||||
router.push({ name, params: to.params });
|
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
const id = to.params.id;
|
|
||||||
if (id !== from.params.id) await fetch(id, true);
|
|
||||||
});
|
|
||||||
|
|
||||||
async function fetch(id, append = false) {
|
|
||||||
const regex = /\/(\d+)/;
|
|
||||||
if (props.idInWhere) arrayData.store.filter.where = { id };
|
|
||||||
else if (!regex.test(props.url)) arrayData.store.url = `${props.url}/${id}`;
|
|
||||||
else arrayData.store.url = props.url.replace(regex, `/${id}`);
|
|
||||||
await arrayData.fetch({ append, updateRouter: false });
|
|
||||||
}
|
|
||||||
function hasRouteParam(params, valueToCheck = ':addressId') {
|
|
||||||
return Object.values(params).includes(valueToCheck);
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -69,6 +64,6 @@ function hasRouteParam(params, valueToCheck = ':addressId') {
|
||||||
</Teleport>
|
</Teleport>
|
||||||
<VnSubToolbar />
|
<VnSubToolbar />
|
||||||
<div :class="[useCardSize(), $attrs.class]">
|
<div :class="[useCardSize(), $attrs.class]">
|
||||||
<RouterView :key="$route.path" />
|
<RouterView :key="route.path" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
const model = defineModel({ type: [Number, Boolean] });
|
|
||||||
const $props = defineProps({
|
|
||||||
info: {
|
|
||||||
type: String,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const checkboxModel = computed({
|
|
||||||
get() {
|
|
||||||
if (typeof model.value === 'number') {
|
|
||||||
return model.value !== 0;
|
|
||||||
}
|
|
||||||
return model.value;
|
|
||||||
},
|
|
||||||
set(value) {
|
|
||||||
if (typeof model.value === 'number') {
|
|
||||||
model.value = value ? 1 : 0;
|
|
||||||
} else {
|
|
||||||
model.value = value;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<QCheckbox v-bind="$attrs" v-on="$attrs" v-model="checkboxModel" />
|
|
||||||
<QIcon
|
|
||||||
v-if="info"
|
|
||||||
v-bind="$attrs"
|
|
||||||
class="cursor-info q-ml-sm"
|
|
||||||
name="info"
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
<QTooltip>
|
|
||||||
{{ info }}
|
|
||||||
</QTooltip>
|
|
||||||
</QIcon>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
<script setup>
|
|
||||||
const $props = defineProps({
|
|
||||||
colors: {
|
|
||||||
type: String,
|
|
||||||
default: '{"value": []}',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const colorArray = JSON.parse($props.colors)?.value;
|
|
||||||
const maxHeight = 30;
|
|
||||||
const colorHeight = maxHeight / colorArray?.length;
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div v-if="colors" class="color-div" :style="{ height: `${maxHeight}px` }">
|
|
||||||
<div
|
|
||||||
v-for="(color, index) in colorArray"
|
|
||||||
:key="index"
|
|
||||||
:style="{
|
|
||||||
backgroundColor: `#${color}`,
|
|
||||||
height: `${colorHeight}px`,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<style scoped>
|
|
||||||
.color-div {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -17,8 +17,6 @@ const $props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['blur']);
|
|
||||||
|
|
||||||
const componentArray = computed(() => {
|
const componentArray = computed(() => {
|
||||||
if (typeof $props.prop === 'object') return [$props.prop];
|
if (typeof $props.prop === 'object') return [$props.prop];
|
||||||
return $props.prop;
|
return $props.prop;
|
||||||
|
|
@ -48,8 +46,7 @@ function toValueAttrs(attrs) {
|
||||||
<span
|
<span
|
||||||
v-for="toComponent of componentArray"
|
v-for="toComponent of componentArray"
|
||||||
:key="toComponent.name"
|
:key="toComponent.name"
|
||||||
class="column fit"
|
class="column flex-center fit"
|
||||||
:class="toComponent?.component == 'checkbox' ? 'flex-center' : ''"
|
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
v-if="toComponent?.component"
|
v-if="toComponent?.component"
|
||||||
|
|
@ -57,7 +54,6 @@ function toValueAttrs(attrs) {
|
||||||
v-bind="mix(toComponent).attrs"
|
v-bind="mix(toComponent).attrs"
|
||||||
v-on="mix(toComponent).event ?? {}"
|
v-on="mix(toComponent).event ?? {}"
|
||||||
v-model="model"
|
v-model="model"
|
||||||
@blur="emit('blur')"
|
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@ import { useSession } from 'src/composables/useSession';
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const quasar = useQuasar();
|
const quasar = useQuasar();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const rows = ref([]);
|
const rows = ref();
|
||||||
const dmsRef = ref();
|
const dmsRef = ref();
|
||||||
const formDialog = ref({});
|
const formDialog = ref({});
|
||||||
const token = useSession().getTokenMultimedia();
|
const token = useSession().getTokenMultimedia();
|
||||||
|
|
@ -389,14 +389,6 @@ defineExpose({
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</QTable>
|
</QTable>
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="info-row q-pa-md text-center"
|
|
||||||
>
|
|
||||||
<h5>
|
|
||||||
{{ t('No data to display') }}
|
|
||||||
</h5>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</VnPaginate>
|
</VnPaginate>
|
||||||
<QDialog v-model="formDialog.show">
|
<QDialog v-model="formDialog.show">
|
||||||
|
|
@ -413,7 +405,7 @@ defineExpose({
|
||||||
fab
|
fab
|
||||||
color="primary"
|
color="primary"
|
||||||
icon="add"
|
icon="add"
|
||||||
v-shortcut
|
shortcut="+"
|
||||||
@click="showFormDialog()"
|
@click="showFormDialog()"
|
||||||
class="fill-icon"
|
class="fill-icon"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,6 @@ const emit = defineEmits([
|
||||||
'update:options',
|
'update:options',
|
||||||
'keyup.enter',
|
'keyup.enter',
|
||||||
'remove',
|
'remove',
|
||||||
'blur',
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
|
|
@ -137,7 +136,6 @@ const handleUppercase = () => {
|
||||||
:type="$attrs.type"
|
:type="$attrs.type"
|
||||||
:class="{ required: isRequired }"
|
:class="{ required: isRequired }"
|
||||||
@keyup.enter="emit('keyup.enter')"
|
@keyup.enter="emit('keyup.enter')"
|
||||||
@blur="emit('blur')"
|
|
||||||
@keydown="handleKeydown"
|
@keydown="handleKeydown"
|
||||||
:clearable="false"
|
:clearable="false"
|
||||||
:rules="mixinRules"
|
:rules="mixinRules"
|
||||||
|
|
@ -145,7 +143,7 @@ const handleUppercase = () => {
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:data-cy="$attrs.dataCy ?? $attrs.label + '_input'"
|
:data-cy="$attrs.dataCy ?? $attrs.label + '_input'"
|
||||||
>
|
>
|
||||||
<template #prepend v-if="$slots.prepend">
|
<template #prepend>
|
||||||
<slot name="prepend" />
|
<slot name="prepend" />
|
||||||
</template>
|
</template>
|
||||||
<template #append>
|
<template #append>
|
||||||
|
|
@ -170,11 +168,11 @@ const handleUppercase = () => {
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
></QIcon>
|
></QIcon>
|
||||||
|
|
||||||
<QIcon
|
<QIcon
|
||||||
name="match_case"
|
name="match_case"
|
||||||
size="xs"
|
size="xs"
|
||||||
v-if="!$attrs.disabled && !$attrs.readonly && $props.uppercase"
|
v-if="!$attrs.disabled && !($attrs.readonly) && $props.uppercase"
|
||||||
@click="handleUppercase"
|
@click="handleUppercase"
|
||||||
class="uppercase-icon"
|
class="uppercase-icon"
|
||||||
>
|
>
|
||||||
|
|
@ -182,7 +180,7 @@ const handleUppercase = () => {
|
||||||
{{ t('Convert to uppercase') }}
|
{{ t('Convert to uppercase') }}
|
||||||
</QTooltip>
|
</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
|
|
||||||
<slot name="append" v-if="$slots.append && !$attrs.disabled" />
|
<slot name="append" v-if="$slots.append && !$attrs.disabled" />
|
||||||
<QIcon v-if="info" name="info">
|
<QIcon v-if="info" name="info">
|
||||||
<QTooltip max-width="350px">
|
<QTooltip max-width="350px">
|
||||||
|
|
@ -196,15 +194,13 @@ const handleUppercase = () => {
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.uppercase-icon {
|
.uppercase-icon {
|
||||||
transition:
|
transition: color 0.3s, transform 0.2s;
|
||||||
color 0.3s,
|
cursor: pointer;
|
||||||
transform 0.2s;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.uppercase-icon:hover {
|
.uppercase-icon:hover {
|
||||||
color: #ed9937;
|
color: #ed9937;
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<i18n>
|
<i18n>
|
||||||
|
|
@ -218,4 +214,4 @@ const handleUppercase = () => {
|
||||||
maxLength: El valor excede los {value} carácteres
|
maxLength: El valor excede los {value} carácteres
|
||||||
inputMax: Debe ser menor a {value}
|
inputMax: Debe ser menor a {value}
|
||||||
Convert to uppercase: Convertir a mayúsculas
|
Convert to uppercase: Convertir a mayúsculas
|
||||||
</i18n>
|
</i18n>
|
||||||
|
|
@ -42,7 +42,7 @@ const formattedDate = computed({
|
||||||
if (value.at(2) == '/') value = value.split('/').reverse().join('/');
|
if (value.at(2) == '/') value = value.split('/').reverse().join('/');
|
||||||
value = date.formatDate(
|
value = date.formatDate(
|
||||||
new Date(value).toISOString(),
|
new Date(value).toISOString(),
|
||||||
'YYYY-MM-DDTHH:mm:ss.SSSZ',
|
'YYYY-MM-DDTHH:mm:ss.SSSZ'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
const [year, month, day] = value.split('-').map((e) => parseInt(e));
|
const [year, month, day] = value.split('-').map((e) => parseInt(e));
|
||||||
|
|
@ -55,7 +55,7 @@ const formattedDate = computed({
|
||||||
orgDate.getHours(),
|
orgDate.getHours(),
|
||||||
orgDate.getMinutes(),
|
orgDate.getMinutes(),
|
||||||
orgDate.getSeconds(),
|
orgDate.getSeconds(),
|
||||||
orgDate.getMilliseconds(),
|
orgDate.getMilliseconds()
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -64,7 +64,7 @@ const formattedDate = computed({
|
||||||
});
|
});
|
||||||
|
|
||||||
const popupDate = computed(() =>
|
const popupDate = computed(() =>
|
||||||
model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value,
|
model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value
|
||||||
);
|
);
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// fix quasar bug
|
// fix quasar bug
|
||||||
|
|
@ -73,7 +73,7 @@ onMounted(() => {
|
||||||
watch(
|
watch(
|
||||||
() => model.value,
|
() => model.value,
|
||||||
(val) => (formattedDate.value = val),
|
(val) => (formattedDate.value = val),
|
||||||
{ immediate: true },
|
{ immediate: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
const styleAttrs = computed(() => {
|
const styleAttrs = computed(() => {
|
||||||
|
|
@ -107,7 +107,6 @@ const manageDate = (date) => {
|
||||||
@click="isPopupOpen = !isPopupOpen"
|
@click="isPopupOpen = !isPopupOpen"
|
||||||
@keydown="isPopupOpen = false"
|
@keydown="isPopupOpen = false"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:data-cy="$attrs.dataCy ?? $attrs.label + '_inputDate'"
|
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<QIcon
|
<QIcon
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,6 @@ defineProps({
|
||||||
});
|
});
|
||||||
|
|
||||||
const model = defineModel({ type: [Number, String] });
|
const model = defineModel({ type: [Number, String] });
|
||||||
const emit = defineEmits(['blur']);
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<VnInput
|
<VnInput
|
||||||
|
|
@ -25,6 +24,5 @@ const emit = defineEmits(['blur']);
|
||||||
model = parseFloat(val).toFixed(decimalPlaces);
|
model = parseFloat(val).toFixed(decimalPlaces);
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
@blur="emit('blur')"
|
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -85,7 +85,6 @@ const handleModelValue = (data) => {
|
||||||
:tooltip="t('Create new location')"
|
:tooltip="t('Create new location')"
|
||||||
:rules="mixinRules"
|
:rules="mixinRules"
|
||||||
:lazy-rules="true"
|
:lazy-rules="true"
|
||||||
required
|
|
||||||
>
|
>
|
||||||
<template #form>
|
<template #form>
|
||||||
<CreateNewPostcode
|
<CreateNewPostcode
|
||||||
|
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
label: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: 'primary',
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
type: String,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const popupProxyRef = ref(null);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<QBtn :color="$props.color" :icon="$props.icon" :label="$t($props.label)">
|
|
||||||
<template #default>
|
|
||||||
<slot name="extraIcon"></slot>
|
|
||||||
<QPopupProxy ref="popupProxyRef" style="max-width: none">
|
|
||||||
<QCard>
|
|
||||||
<slot :popup="popupProxyRef"></slot>
|
|
||||||
</QCard>
|
|
||||||
</QPopupProxy>
|
|
||||||
<QTooltip>{{ $t($props.tooltip) }}</QTooltip>
|
|
||||||
</template>
|
|
||||||
</QBtn>
|
|
||||||
</template>
|
|
||||||
|
|
@ -106,14 +106,7 @@ function checkIsMain() {
|
||||||
:data-key="dataKey"
|
:data-key="dataKey"
|
||||||
:array-data="arrayData"
|
:array-data="arrayData"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
>
|
/>
|
||||||
<template #moreFilterPanel="{ params, orders, searchFn }">
|
|
||||||
<slot
|
|
||||||
name="moreFilterPanel"
|
|
||||||
v-bind="{ params, orders, searchFn }"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</VnTableFilter>
|
|
||||||
</slot>
|
</slot>
|
||||||
</template>
|
</template>
|
||||||
</RightAdvancedMenu>
|
</RightAdvancedMenu>
|
||||||
|
|
|
||||||
|
|
@ -171,8 +171,7 @@ onMounted(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
const arrayDataKey =
|
const arrayDataKey =
|
||||||
$props.dataKey ??
|
$props.dataKey ?? ($props.url?.length > 0 ? $props.url : $attrs.name ?? $attrs.label);
|
||||||
($props.url?.length > 0 ? $props.url : ($attrs.name ?? $attrs.label));
|
|
||||||
|
|
||||||
const arrayData = useArrayData(arrayDataKey, {
|
const arrayData = useArrayData(arrayDataKey, {
|
||||||
url: $props.url,
|
url: $props.url,
|
||||||
|
|
@ -221,7 +220,7 @@ async function fetchFilter(val) {
|
||||||
optionFilterValue.value ??
|
optionFilterValue.value ??
|
||||||
(new RegExp(/\d/g).test(val)
|
(new RegExp(/\d/g).test(val)
|
||||||
? optionValue.value
|
? optionValue.value
|
||||||
: (optionFilter.value ?? optionLabel.value));
|
: optionFilter.value ?? optionLabel.value);
|
||||||
|
|
||||||
let defaultWhere = {};
|
let defaultWhere = {};
|
||||||
if ($props.filterOptions.length) {
|
if ($props.filterOptions.length) {
|
||||||
|
|
@ -240,7 +239,7 @@ async function fetchFilter(val) {
|
||||||
|
|
||||||
const { data } = await arrayData.applyFilter(
|
const { data } = await arrayData.applyFilter(
|
||||||
{ filter: filterOptions },
|
{ filter: filterOptions },
|
||||||
{ updateRouter: false },
|
{ updateRouter: false }
|
||||||
);
|
);
|
||||||
setOptions(data);
|
setOptions(data);
|
||||||
return data;
|
return data;
|
||||||
|
|
@ -273,7 +272,7 @@ async function filterHandler(val, update) {
|
||||||
ref.setOptionIndex(-1);
|
ref.setOptionIndex(-1);
|
||||||
ref.moveOptionSelection(1, true);
|
ref.moveOptionSelection(1, true);
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -309,7 +308,7 @@ function handleKeyDown(event) {
|
||||||
if (inputValue) {
|
if (inputValue) {
|
||||||
const matchingOption = myOptions.value.find(
|
const matchingOption = myOptions.value.find(
|
||||||
(option) =>
|
(option) =>
|
||||||
option[optionLabel.value].toLowerCase() === inputValue.toLowerCase(),
|
option[optionLabel.value].toLowerCase() === inputValue.toLowerCase()
|
||||||
);
|
);
|
||||||
|
|
||||||
if (matchingOption) {
|
if (matchingOption) {
|
||||||
|
|
@ -321,11 +320,11 @@ function handleKeyDown(event) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const focusableElements = document.querySelectorAll(
|
const focusableElements = document.querySelectorAll(
|
||||||
'a:not([disabled]), button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])',
|
'a:not([disabled]), button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])'
|
||||||
);
|
);
|
||||||
const currentIndex = Array.prototype.indexOf.call(
|
const currentIndex = Array.prototype.indexOf.call(
|
||||||
focusableElements,
|
focusableElements,
|
||||||
event.target,
|
event.target
|
||||||
);
|
);
|
||||||
if (currentIndex >= 0 && currentIndex < focusableElements.length - 1) {
|
if (currentIndex >= 0 && currentIndex < focusableElements.length - 1) {
|
||||||
focusableElements[currentIndex + 1].focus();
|
focusableElements[currentIndex + 1].focus();
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ const $props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const options = ref([]);
|
const options = ref([]);
|
||||||
const emit = defineEmits(['blur']);
|
|
||||||
onBeforeMount(async () => {
|
onBeforeMount(async () => {
|
||||||
const { url, optionValue, optionLabel } = useAttrs();
|
const { url, optionValue, optionLabel } = useAttrs();
|
||||||
const findBy = $props.find ?? url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1);
|
const findBy = $props.find ?? url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1);
|
||||||
|
|
@ -35,5 +35,5 @@ onBeforeMount(async () => {
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<VnSelect v-bind="$attrs" :options="$attrs.options ?? options" @blur="emit('blur')" />
|
<VnSelect v-bind="$attrs" :options="$attrs.options ?? options" />
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,7 @@ const isAllowedToCreate = computed(() => {
|
||||||
|
|
||||||
defineExpose({ vnSelectDialogRef: select });
|
defineExpose({ vnSelectDialogRef: select });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VnSelect
|
<VnSelect
|
||||||
ref="select"
|
ref="select"
|
||||||
|
|
@ -66,6 +67,7 @@ defineExpose({ vnSelectDialogRef: select });
|
||||||
</template>
|
</template>
|
||||||
</VnSelect>
|
</VnSelect>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.default-icon {
|
.default-icon {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
import VnSelect from 'components/common/VnSelect.vue';
|
import VnSelect from 'components/common/VnSelect.vue';
|
||||||
|
|
||||||
const model = defineModel({ type: [String, Number, Object] });
|
const model = defineModel({ type: [String, Number, Object] });
|
||||||
|
const url = 'Suppliers';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -9,13 +11,11 @@ const model = defineModel({ type: [String, Number, Object] });
|
||||||
:label="$t('globals.supplier')"
|
:label="$t('globals.supplier')"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
v-model="model"
|
v-model="model"
|
||||||
url="Suppliers"
|
:url="url"
|
||||||
option-value="id"
|
option-value="id"
|
||||||
option-label="nickname"
|
option-label="nickname"
|
||||||
:fields="['id', 'name', 'nickname', 'nif']"
|
:fields="['id', 'name', 'nickname', 'nif']"
|
||||||
:filter-options="['id', 'name', 'nickname', 'nif']"
|
|
||||||
sort-by="name ASC"
|
sort-by="name ASC"
|
||||||
data-cy="vnSupplierSelect"
|
|
||||||
>
|
>
|
||||||
<template #option="scope">
|
<template #option="scope">
|
||||||
<QItem v-bind="scope.itemProps">
|
<QItem v-bind="scope.itemProps">
|
||||||
|
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import VnSelectDialog from './VnSelectDialog.vue';
|
|
||||||
import FilterTravelForm from 'src/components/FilterTravelForm.vue';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
import { toDate } from 'src/filters';
|
|
||||||
const { t } = useI18n();
|
|
||||||
|
|
||||||
const $props = defineProps({
|
|
||||||
data: {
|
|
||||||
type: Object,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
onFilterTravelSelected: {
|
|
||||||
type: Function,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<VnSelectDialog
|
|
||||||
:label="t('entry.basicData.travel')"
|
|
||||||
v-bind="$attrs"
|
|
||||||
url="Travels/filter"
|
|
||||||
:fields="['id', 'warehouseInName']"
|
|
||||||
option-value="id"
|
|
||||||
option-label="warehouseInName"
|
|
||||||
map-options
|
|
||||||
hide-selected
|
|
||||||
:required="true"
|
|
||||||
action-icon="filter_alt"
|
|
||||||
:roles-allowed-to-create="['buyer']"
|
|
||||||
>
|
|
||||||
<template #form>
|
|
||||||
<FilterTravelForm @travel-selected="onFilterTravelSelected(data, $event)" />
|
|
||||||
</template>
|
|
||||||
<template #option="scope">
|
|
||||||
<QItem v-bind="scope.itemProps">
|
|
||||||
<QItemSection>
|
|
||||||
<QItemLabel>
|
|
||||||
{{ scope.opt?.agencyModeName }} -
|
|
||||||
{{ scope.opt?.warehouseInName }}
|
|
||||||
({{ toDate(scope.opt?.shipped) }}) →
|
|
||||||
{{ scope.opt?.warehouseOutName }}
|
|
||||||
({{ toDate(scope.opt?.landed) }})
|
|
||||||
</QItemLabel>
|
|
||||||
</QItemSection>
|
|
||||||
</QItem>
|
|
||||||
</template>
|
|
||||||
</VnSelectDialog>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,78 +1,51 @@
|
||||||
import {
|
import { describe, it, expect, vi, beforeAll, afterEach, beforeEach } from 'vitest';
|
||||||
describe,
|
|
||||||
it,
|
|
||||||
expect,
|
|
||||||
vi,
|
|
||||||
beforeAll,
|
|
||||||
afterEach,
|
|
||||||
beforeEach,
|
|
||||||
afterAll,
|
|
||||||
} from 'vitest';
|
|
||||||
import { createWrapper, axios } from 'app/test/vitest/helper';
|
import { createWrapper, axios } from 'app/test/vitest/helper';
|
||||||
import VnNotes from 'src/components/ui/VnNotes.vue';
|
import VnNotes from 'src/components/ui/VnNotes.vue';
|
||||||
import vnDate from 'src/boot/vnDate';
|
|
||||||
|
|
||||||
describe('VnNotes', () => {
|
describe('VnNotes', () => {
|
||||||
let vm;
|
let vm;
|
||||||
let wrapper;
|
let wrapper;
|
||||||
let spyFetch;
|
let spyFetch;
|
||||||
let postMock;
|
let postMock;
|
||||||
let patchMock;
|
let expectedBody;
|
||||||
let expectedInsertBody;
|
const mockData= {name: 'Tony', lastName: 'Stark', text: 'Test Note', observationTypeFk: 1};
|
||||||
let expectedUpdateBody;
|
|
||||||
const defaultOptions = {
|
function generateExpectedBody() {
|
||||||
url: '/test',
|
expectedBody = {...vm.$props.body, ...{ text: vm.newNote.text, observationTypeFk: vm.newNote.observationTypeFk }};
|
||||||
body: { name: 'Tony', lastName: 'Stark' },
|
}
|
||||||
selectType: false,
|
|
||||||
saveUrl: null,
|
async function setTestParams(text, observationType, type){
|
||||||
justInput: false,
|
vm.newNote.text = text;
|
||||||
};
|
vm.newNote.observationTypeFk = observationType;
|
||||||
function generateWrapper(
|
wrapper.setProps({ selectType: type });
|
||||||
options = defaultOptions,
|
}
|
||||||
text = null,
|
|
||||||
observationType = null,
|
beforeAll(async () => {
|
||||||
) {
|
vi.spyOn(axios, 'get').mockReturnValue({ data: [] });
|
||||||
vi.spyOn(axios, 'get').mockResolvedValue({ data: [] });
|
|
||||||
wrapper = createWrapper(VnNotes, {
|
wrapper = createWrapper(VnNotes, {
|
||||||
propsData: options,
|
propsData: {
|
||||||
|
url: '/test',
|
||||||
|
body: { name: 'Tony', lastName: 'Stark' },
|
||||||
|
}
|
||||||
});
|
});
|
||||||
wrapper = wrapper.wrapper;
|
wrapper = wrapper.wrapper;
|
||||||
vm = wrapper.vm;
|
vm = wrapper.vm;
|
||||||
vm.newNote.text = text;
|
});
|
||||||
vm.newNote.observationTypeFk = observationType;
|
|
||||||
}
|
|
||||||
|
|
||||||
function createSpyFetch() {
|
|
||||||
spyFetch = vi.spyOn(vm.$refs.vnPaginateRef, 'fetch');
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateExpectedBody() {
|
|
||||||
expectedInsertBody = {
|
|
||||||
...vm.$props.body,
|
|
||||||
...{ text: vm.newNote.text, observationTypeFk: vm.newNote.observationTypeFk },
|
|
||||||
};
|
|
||||||
expectedUpdateBody = { ...vm.$props.body, ...{ notes: vm.newNote.text } };
|
|
||||||
}
|
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
postMock = vi.spyOn(axios, 'post');
|
postMock = vi.spyOn(axios, 'post').mockResolvedValue(mockData);
|
||||||
patchMock = vi.spyOn(axios, 'patch');
|
spyFetch = vi.spyOn(vm.vnPaginateRef, 'fetch').mockImplementation(() => vi.fn());
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
vi.clearAllMocks();
|
vi.clearAllMocks();
|
||||||
expectedInsertBody = {};
|
expectedBody = {};
|
||||||
expectedUpdateBody = {};
|
|
||||||
});
|
|
||||||
|
|
||||||
afterAll(() => {
|
|
||||||
vi.restoreAllMocks();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('insert', () => {
|
describe('insert', () => {
|
||||||
it('should not call axios.post and vnPaginateRef.fetch when newNote.text is null', async () => {
|
it('should not call axios.post and vnPaginateRef.fetch if newNote.text is null', async () => {
|
||||||
generateWrapper({ selectType: true });
|
await setTestParams( null, null, true );
|
||||||
createSpyFetch();
|
|
||||||
|
|
||||||
await vm.insert();
|
await vm.insert();
|
||||||
|
|
||||||
|
|
@ -80,9 +53,8 @@ describe('VnNotes', () => {
|
||||||
expect(spyFetch).not.toHaveBeenCalled();
|
expect(spyFetch).not.toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should not call axios.post and vnPaginateRef.fetch when newNote.text is empty', async () => {
|
it('should not call axios.post and vnPaginateRef.fetch if newNote.text is empty', async () => {
|
||||||
generateWrapper(null, '');
|
await setTestParams( "", null, false );
|
||||||
createSpyFetch();
|
|
||||||
|
|
||||||
await vm.insert();
|
await vm.insert();
|
||||||
|
|
||||||
|
|
@ -90,9 +62,8 @@ describe('VnNotes', () => {
|
||||||
expect(spyFetch).not.toHaveBeenCalled();
|
expect(spyFetch).not.toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should not call axios.post and vnPaginateRef.fetch when observationTypeFk is null and selectType is true', async () => {
|
it('should not call axios.post and vnPaginateRef.fetch if observationTypeFk is missing and selectType is true', async () => {
|
||||||
generateWrapper({ selectType: true }, 'Test Note');
|
await setTestParams( "Test Note", null, true );
|
||||||
createSpyFetch();
|
|
||||||
|
|
||||||
await vm.insert();
|
await vm.insert();
|
||||||
|
|
||||||
|
|
@ -100,57 +71,37 @@ describe('VnNotes', () => {
|
||||||
expect(spyFetch).not.toHaveBeenCalled();
|
expect(spyFetch).not.toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should call axios.post and vnPaginateRef.fetch when observationTypeFk is missing and selectType is false', async () => {
|
it('should call axios.post and vnPaginateRef.fetch if observationTypeFk is missing and selectType is false', async () => {
|
||||||
generateWrapper(null, 'Test Note');
|
await setTestParams( "Test Note", null, false );
|
||||||
createSpyFetch();
|
|
||||||
generateExpectedBody();
|
generateExpectedBody();
|
||||||
|
|
||||||
await vm.insert();
|
await vm.insert();
|
||||||
|
|
||||||
expect(postMock).toHaveBeenCalledWith(vm.$props.url, expectedInsertBody);
|
expect(postMock).toHaveBeenCalledWith(vm.$props.url, expectedBody);
|
||||||
|
expect(spyFetch).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should call axios.post and vnPaginateRef.fetch if observationTypeFk is setted and selectType is false', async () => {
|
||||||
|
await setTestParams( "Test Note", 1, false );
|
||||||
|
|
||||||
|
generateExpectedBody();
|
||||||
|
|
||||||
|
await vm.insert();
|
||||||
|
|
||||||
|
expect(postMock).toHaveBeenCalledWith(vm.$props.url, expectedBody);
|
||||||
expect(spyFetch).toHaveBeenCalled();
|
expect(spyFetch).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should call axios.post and vnPaginateRef.fetch when newNote is valid', async () => {
|
it('should call axios.post and vnPaginateRef.fetch when newNote is valid', async () => {
|
||||||
generateWrapper({ selectType: true }, 'Test Note', 1);
|
await setTestParams( "Test Note", 1, true );
|
||||||
createSpyFetch();
|
|
||||||
generateExpectedBody();
|
|
||||||
|
|
||||||
|
generateExpectedBody();
|
||||||
|
|
||||||
await vm.insert();
|
await vm.insert();
|
||||||
|
|
||||||
expect(postMock).toHaveBeenCalledWith(vm.$props.url, expectedInsertBody);
|
expect(postMock).toHaveBeenCalledWith(vm.$props.url, expectedBody);
|
||||||
expect(spyFetch).toHaveBeenCalled();
|
expect(spyFetch).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
});
|
||||||
describe('update', () => {
|
|
||||||
it('should call axios.patch with saveUrl when saveUrl is set and justInput is true', async () => {
|
|
||||||
generateWrapper({
|
|
||||||
url: '/business',
|
|
||||||
justInput: true,
|
|
||||||
saveUrl: '/saveUrlTest',
|
|
||||||
});
|
|
||||||
generateExpectedBody();
|
|
||||||
|
|
||||||
await vm.update();
|
|
||||||
|
|
||||||
expect(patchMock).toHaveBeenCalledWith(vm.$props.saveUrl, expectedUpdateBody);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should call axios.patch with url when saveUrl is not set and justInput is true', async () => {
|
|
||||||
generateWrapper({
|
|
||||||
url: '/business',
|
|
||||||
body: { workerFk: 1110 },
|
|
||||||
justInput: true,
|
|
||||||
});
|
|
||||||
generateExpectedBody();
|
|
||||||
|
|
||||||
await vm.update();
|
|
||||||
|
|
||||||
expect(patchMock).toHaveBeenCalledWith(
|
|
||||||
`${vm.$props.url}/${vm.$props.body.workerFk}`,
|
|
||||||
expectedUpdateBody,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -6,7 +6,6 @@ import { useArrayData } from 'composables/useArrayData';
|
||||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||||
import { useState } from 'src/composables/useState';
|
import { useState } from 'src/composables/useState';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import { useClipboard } from 'src/composables/useClipboard';
|
|
||||||
import VnMoreOptions from './VnMoreOptions.vue';
|
import VnMoreOptions from './VnMoreOptions.vue';
|
||||||
|
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
|
|
@ -30,6 +29,10 @@ const $props = defineProps({
|
||||||
type: String,
|
type: String,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
|
module: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
summary: {
|
summary: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: null,
|
default: null,
|
||||||
|
|
@ -43,7 +46,6 @@ const $props = defineProps({
|
||||||
const state = useState();
|
const state = useState();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { copyText } = useClipboard();
|
|
||||||
const { viewSummary } = useSummaryDialog();
|
const { viewSummary } = useSummaryDialog();
|
||||||
let arrayData;
|
let arrayData;
|
||||||
let store;
|
let store;
|
||||||
|
|
@ -55,13 +57,12 @@ defineExpose({ getData });
|
||||||
onBeforeMount(async () => {
|
onBeforeMount(async () => {
|
||||||
arrayData = useArrayData($props.dataKey, {
|
arrayData = useArrayData($props.dataKey, {
|
||||||
url: $props.url,
|
url: $props.url,
|
||||||
userFilter: $props.filter,
|
filter: $props.filter,
|
||||||
skip: 0,
|
skip: 0,
|
||||||
oneRecord: true,
|
|
||||||
});
|
});
|
||||||
store = arrayData.store;
|
store = arrayData.store;
|
||||||
entity = computed(() => {
|
entity = computed(() => {
|
||||||
const data = store.data ?? {};
|
const data = (Array.isArray(store.data) ? store.data[0] : store.data) ?? {};
|
||||||
if (data) emit('onFetch', data);
|
if (data) emit('onFetch', data);
|
||||||
return data;
|
return data;
|
||||||
});
|
});
|
||||||
|
|
@ -72,7 +73,7 @@ onBeforeMount(async () => {
|
||||||
() => [$props.url, $props.filter],
|
() => [$props.url, $props.filter],
|
||||||
async () => {
|
async () => {
|
||||||
if (!isSameDataKey.value) await getData();
|
if (!isSameDataKey.value) await getData();
|
||||||
},
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -83,7 +84,7 @@ async function getData() {
|
||||||
try {
|
try {
|
||||||
const { data } = await arrayData.fetch({ append: false, updateRouter: false });
|
const { data } = await arrayData.fetch({ append: false, updateRouter: false });
|
||||||
state.set($props.dataKey, data);
|
state.set($props.dataKey, data);
|
||||||
emit('onFetch', data);
|
emit('onFetch', Array.isArray(data) ? data[0] : data);
|
||||||
} finally {
|
} finally {
|
||||||
isLoading.value = false;
|
isLoading.value = false;
|
||||||
}
|
}
|
||||||
|
|
@ -101,21 +102,13 @@ function getValueFromPath(path) {
|
||||||
return current;
|
return current;
|
||||||
}
|
}
|
||||||
|
|
||||||
function copyIdText(id) {
|
|
||||||
copyText(id, {
|
|
||||||
component: {
|
|
||||||
copyValue: id,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const emit = defineEmits(['onFetch']);
|
const emit = defineEmits(['onFetch']);
|
||||||
|
|
||||||
const iconModule = computed(() => route.matched[1].meta.icon);
|
const iconModule = computed(() => route.matched[1].meta.icon);
|
||||||
const toModule = computed(() =>
|
const toModule = computed(() =>
|
||||||
route.matched[1].path.split('/').length > 2
|
route.matched[1].path.split('/').length > 2
|
||||||
? route.matched[1].redirect
|
? route.matched[1].redirect
|
||||||
: route.matched[1].children[0].redirect,
|
: route.matched[1].children[0].redirect
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -154,9 +147,7 @@ const toModule = computed(() =>
|
||||||
{{ t('components.smartCard.openSummary') }}
|
{{ t('components.smartCard.openSummary') }}
|
||||||
</QTooltip>
|
</QTooltip>
|
||||||
</QBtn>
|
</QBtn>
|
||||||
<RouterLink
|
<RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
|
||||||
:to="{ name: `${dataKey}Summary`, params: { id: entity.id } }"
|
|
||||||
>
|
|
||||||
<QBtn
|
<QBtn
|
||||||
class="link"
|
class="link"
|
||||||
color="white"
|
color="white"
|
||||||
|
|
@ -192,25 +183,10 @@ const toModule = computed(() =>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
</QItemLabel>
|
</QItemLabel>
|
||||||
<QItem>
|
<QItem dense>
|
||||||
<QItemLabel class="subtitle">
|
<QItemLabel class="subtitle" caption>
|
||||||
#{{ getValueFromPath(subtitle) ?? entity.id }}
|
#{{ getValueFromPath(subtitle) ?? entity.id }}
|
||||||
</QItemLabel>
|
</QItemLabel>
|
||||||
|
|
||||||
<QBtn
|
|
||||||
round
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
size="sm"
|
|
||||||
icon="content_copy"
|
|
||||||
color="primary"
|
|
||||||
@click.stop="copyIdText(entity.id)"
|
|
||||||
>
|
|
||||||
<QTooltip>
|
|
||||||
{{ t('globals.copyId') }}
|
|
||||||
</QTooltip>
|
|
||||||
</QBtn>
|
|
||||||
<!-- </QItemLabel> -->
|
|
||||||
</QItem>
|
</QItem>
|
||||||
</QList>
|
</QList>
|
||||||
<div class="list-box q-mt-xs">
|
<div class="list-box q-mt-xs">
|
||||||
|
|
@ -317,11 +293,3 @@ const toModule = computed(() =>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<i18n>
|
|
||||||
en:
|
|
||||||
globals:
|
|
||||||
copyId: Copy ID
|
|
||||||
es:
|
|
||||||
globals:
|
|
||||||
copyId: Copiar ID
|
|
||||||
</i18n>
|
|
||||||
|
|
|
||||||
|
|
@ -40,10 +40,9 @@ const arrayData = useArrayData(props.dataKey, {
|
||||||
filter: props.filter,
|
filter: props.filter,
|
||||||
userFilter: props.userFilter,
|
userFilter: props.userFilter,
|
||||||
skip: 0,
|
skip: 0,
|
||||||
oneRecord: true,
|
|
||||||
});
|
});
|
||||||
const { store } = arrayData;
|
const { store } = arrayData;
|
||||||
const entity = computed(() => store.data);
|
const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
|
||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
|
|
@ -62,7 +61,7 @@ async function fetch() {
|
||||||
store.filter = props.filter ?? {};
|
store.filter = props.filter ?? {};
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
const { data } = await arrayData.fetch({ append: false, updateRouter: false });
|
const { data } = await arrayData.fetch({ append: false, updateRouter: false });
|
||||||
emit('onFetch', data);
|
emit('onFetch', Array.isArray(data) ? data[0] : data);
|
||||||
isLoading.value = false;
|
isLoading.value = false;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -209,13 +208,4 @@ async function fetch() {
|
||||||
.summaryHeader {
|
.summaryHeader {
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardSummary :deep(.q-card__section[content]) {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 0;
|
|
||||||
> * {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,53 @@
|
||||||
<script setup>
|
|
||||||
defineProps({
|
|
||||||
hasImage: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<div id="descriptor-skeleton" class="bg-vn-page">
|
<div id="descriptor-skeleton">
|
||||||
<div class="row justify-between q-pa-sm">
|
<div class="row justify-between q-pa-sm">
|
||||||
<QSkeleton square size="30px" v-for="i in 3" :key="i" />
|
<QSkeleton square size="40px" />
|
||||||
|
<QSkeleton square size="40px" />
|
||||||
|
<QSkeleton square height="40px" width="20px" />
|
||||||
</div>
|
</div>
|
||||||
<div class="q-pa-xs" v-if="hasImage">
|
<div class="col justify-between q-pa-sm q-gutter-y-xs">
|
||||||
<QSkeleton square height="200px" width="100%" />
|
<QSkeleton square height="40px" width="150px" />
|
||||||
|
<QSkeleton square height="30px" width="70px" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col justify-between q-pa-md q-gutter-y-xs">
|
<div class="col q-pl-sm q-pa-sm q-mb-md">
|
||||||
<QSkeleton square height="25px" width="150px" />
|
<div class="row justify-between">
|
||||||
<QSkeleton square height="15px" width="70px" />
|
<QSkeleton type="text" square height="30px" width="20%" />
|
||||||
</div>
|
<QSkeleton type="text" square height="30px" width="60%" />
|
||||||
<div class="q-pl-sm q-pa-sm q-mb-md">
|
</div>
|
||||||
<div class="row q-gutter-x-sm q-pa-none q-ma-none" v-for="i in 5" :key="i">
|
<div class="row justify-between">
|
||||||
<QSkeleton type="text" square height="20px" width="30%" />
|
<QSkeleton type="text" square height="30px" width="20%" />
|
||||||
<QSkeleton type="text" square height="20px" width="60%" />
|
<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>
|
</div>
|
||||||
|
|
||||||
<QCardActions class="q-gutter-x-sm justify-between">
|
<QCardActions>
|
||||||
<QSkeleton size="40px" v-for="i in 5" :key="i" />
|
<QSkeleton size="40px" />
|
||||||
|
<QSkeleton size="40px" />
|
||||||
|
<QSkeleton size="40px" />
|
||||||
|
<QSkeleton size="40px" />
|
||||||
|
<QSkeleton size="40px" />
|
||||||
</QCardActions>
|
</QCardActions>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#descriptor-skeleton .q-card__actions {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -82,7 +82,7 @@ function cancel() {
|
||||||
@click="cancel()"
|
@click="cancel()"
|
||||||
/>
|
/>
|
||||||
</QCardSection>
|
</QCardSection>
|
||||||
<QCardSection class="q-pb-none" data-cy="VnConfirm_message">
|
<QCardSection class="q-pb-none">
|
||||||
<span v-if="message !== false" v-html="message" />
|
<span v-if="message !== false" v-html="message" />
|
||||||
</QCardSection>
|
</QCardSection>
|
||||||
<QCardSection class="row items-center q-pt-none">
|
<QCardSection class="row items-center q-pt-none">
|
||||||
|
|
@ -95,7 +95,6 @@ function cancel() {
|
||||||
:disable="isLoading"
|
:disable="isLoading"
|
||||||
flat
|
flat
|
||||||
@click="cancel()"
|
@click="cancel()"
|
||||||
data-cy="VnConfirm_cancel"
|
|
||||||
/>
|
/>
|
||||||
<QBtn
|
<QBtn
|
||||||
:label="t('globals.confirm')"
|
:label="t('globals.confirm')"
|
||||||
|
|
|
||||||
|
|
@ -114,7 +114,7 @@ async function clearFilters() {
|
||||||
arrayData.resetPagination();
|
arrayData.resetPagination();
|
||||||
// Filtrar los params no removibles
|
// Filtrar los params no removibles
|
||||||
const removableFilters = Object.keys(userParams.value).filter((param) =>
|
const removableFilters = Object.keys(userParams.value).filter((param) =>
|
||||||
$props.unremovableParams.includes(param),
|
$props.unremovableParams.includes(param)
|
||||||
);
|
);
|
||||||
const newParams = {};
|
const newParams = {};
|
||||||
// Conservar solo los params que no son removibles
|
// Conservar solo los params que no son removibles
|
||||||
|
|
@ -162,13 +162,13 @@ const formatTags = (tags) => {
|
||||||
|
|
||||||
const tags = computed(() => {
|
const tags = computed(() => {
|
||||||
const filteredTags = tagsList.value.filter(
|
const filteredTags = tagsList.value.filter(
|
||||||
(tag) => !($props.customTags || []).includes(tag.label),
|
(tag) => !($props.customTags || []).includes(tag.label)
|
||||||
);
|
);
|
||||||
return formatTags(filteredTags);
|
return formatTags(filteredTags);
|
||||||
});
|
});
|
||||||
|
|
||||||
const customTags = computed(() =>
|
const customTags = computed(() =>
|
||||||
tagsList.value.filter((tag) => ($props.customTags || []).includes(tag.label)),
|
tagsList.value.filter((tag) => ($props.customTags || []).includes(tag.label))
|
||||||
);
|
);
|
||||||
|
|
||||||
async function remove(key) {
|
async function remove(key) {
|
||||||
|
|
@ -188,13 +188,10 @@ function formatValue(value) {
|
||||||
const getLocale = (label) => {
|
const getLocale = (label) => {
|
||||||
const param = label.split('.').at(-1);
|
const param = label.split('.').at(-1);
|
||||||
const globalLocale = `globals.params.${param}`;
|
const globalLocale = `globals.params.${param}`;
|
||||||
const moduleName = route.meta.moduleName;
|
|
||||||
const moduleLocale = `${moduleName.toLowerCase()}.${param}`;
|
|
||||||
if (te(globalLocale)) return t(globalLocale);
|
if (te(globalLocale)) return t(globalLocale);
|
||||||
else if (te(moduleLocale)) return t(moduleLocale);
|
else if (te(t(`params.${param}`)));
|
||||||
else {
|
else {
|
||||||
const camelCaseModuleName =
|
const camelCaseModuleName = route.meta.moduleName.charAt(0).toLowerCase() + route.meta.moduleName.slice(1);
|
||||||
moduleName.charAt(0).toLowerCase() + moduleName.slice(1);
|
|
||||||
return t(`${camelCaseModuleName}.params.${param}`);
|
return t(`${camelCaseModuleName}.params.${param}`);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -293,9 +290,6 @@ const getLocale = (label) => {
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.q-field__label.no-pointer-events.absolute.ellipsis {
|
|
||||||
margin-left: 6px !important;
|
|
||||||
}
|
|
||||||
.list {
|
.list {
|
||||||
width: 256px;
|
width: 256px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
<QTooltip>
|
<QTooltip>
|
||||||
{{ $t('components.cardDescriptor.moreOptions') }}
|
{{ $t('components.cardDescriptor.moreOptions') }}
|
||||||
</QTooltip>
|
</QTooltip>
|
||||||
<QMenu ref="menuRef" data-cy="descriptor-more-opts-menu">
|
<QMenu ref="menuRef">
|
||||||
<QList>
|
<QList>
|
||||||
<slot name="menu" :menu-ref="$refs.menuRef" />
|
<slot name="menu" :menu-ref="$refs.menuRef" />
|
||||||
</QList>
|
</QList>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { ref, reactive, useAttrs, computed } from 'vue';
|
import { ref, reactive } from 'vue';
|
||||||
import { onBeforeRouteLeave } from 'vue-router';
|
import { onBeforeRouteLeave } from 'vue-router';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useQuasar } from 'quasar';
|
import { useQuasar } from 'quasar';
|
||||||
|
|
@ -16,27 +16,12 @@ import VnSelect from 'components/common/VnSelect.vue';
|
||||||
import FetchData from 'components/FetchData.vue';
|
import FetchData from 'components/FetchData.vue';
|
||||||
import VnInput from 'components/common/VnInput.vue';
|
import VnInput from 'components/common/VnInput.vue';
|
||||||
|
|
||||||
const emit = defineEmits(['onFetch']);
|
|
||||||
|
|
||||||
const originalAttrs = useAttrs();
|
|
||||||
|
|
||||||
const $attrs = computed(() => {
|
|
||||||
const { style, ...rest } = originalAttrs;
|
|
||||||
return rest;
|
|
||||||
});
|
|
||||||
|
|
||||||
const isRequired = computed(() => {
|
|
||||||
return Object.keys($attrs).includes('required')
|
|
||||||
});
|
|
||||||
|
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
url: { type: String, default: null },
|
url: { type: String, default: null },
|
||||||
saveUrl: {type: String, default: null},
|
|
||||||
filter: { type: Object, default: () => {} },
|
filter: { type: Object, default: () => {} },
|
||||||
body: { type: Object, default: () => {} },
|
body: { type: Object, default: () => {} },
|
||||||
addNote: { type: Boolean, default: false },
|
addNote: { type: Boolean, default: false },
|
||||||
selectType: { type: Boolean, default: false },
|
selectType: { type: Boolean, default: false },
|
||||||
justInput: { type: Boolean, default: false },
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
@ -44,13 +29,6 @@ const quasar = useQuasar();
|
||||||
const newNote = reactive({ text: null, observationTypeFk: null });
|
const newNote = reactive({ text: null, observationTypeFk: null });
|
||||||
const observationTypes = ref([]);
|
const observationTypes = ref([]);
|
||||||
const vnPaginateRef = ref();
|
const vnPaginateRef = ref();
|
||||||
let originalText;
|
|
||||||
|
|
||||||
function handleClick(e) {
|
|
||||||
if (e.shiftKey && e.key === 'Enter') return;
|
|
||||||
if ($props.justInput) confirmAndUpdate();
|
|
||||||
else insert();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function insert() {
|
async function insert() {
|
||||||
if (!newNote.text || ($props.selectType && !newNote.observationTypeFk)) return;
|
if (!newNote.text || ($props.selectType && !newNote.observationTypeFk)) return;
|
||||||
|
|
@ -63,36 +41,8 @@ async function insert() {
|
||||||
await axios.post($props.url, newBody);
|
await axios.post($props.url, newBody);
|
||||||
await vnPaginateRef.value.fetch();
|
await vnPaginateRef.value.fetch();
|
||||||
}
|
}
|
||||||
|
|
||||||
function confirmAndUpdate() {
|
|
||||||
if(!newNote.text && originalText)
|
|
||||||
quasar
|
|
||||||
.dialog({
|
|
||||||
component: VnConfirm,
|
|
||||||
componentProps: {
|
|
||||||
title: t('New note is empty'),
|
|
||||||
message: t('Are you sure remove this note?'),
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.onOk(update)
|
|
||||||
.onCancel(() => {
|
|
||||||
newNote.text = originalText;
|
|
||||||
});
|
|
||||||
else update();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function update() {
|
|
||||||
originalText = newNote.text;
|
|
||||||
const body = $props.body;
|
|
||||||
const newBody = {
|
|
||||||
...body,
|
|
||||||
...{ notes: newNote.text },
|
|
||||||
};
|
|
||||||
await axios.patch(`${$props.saveUrl ?? `${$props.url}/${$props.body.workerFk}`}`, newBody);
|
|
||||||
}
|
|
||||||
|
|
||||||
onBeforeRouteLeave((to, from, next) => {
|
onBeforeRouteLeave((to, from, next) => {
|
||||||
if ((newNote.text && !$props.justInput) || (newNote.text !== originalText) && $props.justInput)
|
if (newNote.text)
|
||||||
quasar.dialog({
|
quasar.dialog({
|
||||||
component: VnConfirm,
|
component: VnConfirm,
|
||||||
componentProps: {
|
componentProps: {
|
||||||
|
|
@ -103,13 +53,6 @@ onBeforeRouteLeave((to, from, next) => {
|
||||||
});
|
});
|
||||||
else next();
|
else next();
|
||||||
});
|
});
|
||||||
|
|
||||||
function fetchData([ data ]) {
|
|
||||||
newNote.text = data?.notes;
|
|
||||||
originalText = data?.notes;
|
|
||||||
emit('onFetch', data);
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<FetchData
|
<FetchData
|
||||||
|
|
@ -119,19 +62,8 @@ function fetchData([ data ]) {
|
||||||
auto-load
|
auto-load
|
||||||
@on-fetch="(data) => (observationTypes = data)"
|
@on-fetch="(data) => (observationTypes = data)"
|
||||||
/>
|
/>
|
||||||
<FetchData
|
<QCard class="q-pa-xs q-mb-lg full-width" v-if="$props.addNote">
|
||||||
v-if="justInput"
|
<QCardSection horizontal>
|
||||||
:url="url"
|
|
||||||
:filter="filter"
|
|
||||||
@on-fetch="fetchData"
|
|
||||||
auto-load
|
|
||||||
/>
|
|
||||||
<QCard
|
|
||||||
class="q-pa-xs q-mb-lg full-width"
|
|
||||||
:class="{ 'just-input': $props.justInput }"
|
|
||||||
v-if="$props.addNote || $props.justInput"
|
|
||||||
>
|
|
||||||
<QCardSection horizontal v-if="!$props.justInput">
|
|
||||||
{{ t('New note') }}
|
{{ t('New note') }}
|
||||||
</QCardSection>
|
</QCardSection>
|
||||||
<QCardSection class="q-px-xs q-my-none q-py-none">
|
<QCardSection class="q-px-xs q-my-none q-py-none">
|
||||||
|
|
@ -143,19 +75,19 @@ function fetchData([ data ]) {
|
||||||
v-model="newNote.observationTypeFk"
|
v-model="newNote.observationTypeFk"
|
||||||
option-label="description"
|
option-label="description"
|
||||||
style="flex: 0.15"
|
style="flex: 0.15"
|
||||||
:required="isRequired"
|
:required="true"
|
||||||
@keyup.enter.stop="insert"
|
@keyup.enter.stop="insert"
|
||||||
/>
|
/>
|
||||||
<VnInput
|
<VnInput
|
||||||
v-model.trim="newNote.text"
|
v-model.trim="newNote.text"
|
||||||
type="textarea"
|
type="textarea"
|
||||||
:label="$props.justInput && newNote.text ? '' : t('Add note here...')"
|
:label="t('Add note here...')"
|
||||||
filled
|
filled
|
||||||
size="lg"
|
size="lg"
|
||||||
autogrow
|
autogrow
|
||||||
@keyup.enter.stop="handleClick"
|
@keyup.enter.stop="insert"
|
||||||
:required="isRequired"
|
|
||||||
clearable
|
clearable
|
||||||
|
:required="true"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<QBtn
|
<QBtn
|
||||||
|
|
@ -163,7 +95,7 @@ function fetchData([ data ]) {
|
||||||
icon="save"
|
icon="save"
|
||||||
color="primary"
|
color="primary"
|
||||||
flat
|
flat
|
||||||
@click="handleClick"
|
@click="insert"
|
||||||
class="q-mb-xs"
|
class="q-mb-xs"
|
||||||
dense
|
dense
|
||||||
data-cy="saveNote"
|
data-cy="saveNote"
|
||||||
|
|
@ -174,7 +106,6 @@ function fetchData([ data ]) {
|
||||||
</QCardSection>
|
</QCardSection>
|
||||||
</QCard>
|
</QCard>
|
||||||
<VnPaginate
|
<VnPaginate
|
||||||
v-if="!$props.justInput"
|
|
||||||
:data-key="$props.url"
|
:data-key="$props.url"
|
||||||
:url="$props.url"
|
:url="$props.url"
|
||||||
order="created DESC"
|
order="created DESC"
|
||||||
|
|
@ -267,11 +198,6 @@ function fetchData([ data ]) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.just-input {
|
|
||||||
padding-right: 18px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<i18n>
|
<i18n>
|
||||||
es:
|
es:
|
||||||
|
|
@ -279,6 +205,4 @@ function fetchData([ data ]) {
|
||||||
New note: Nueva nota
|
New note: Nueva nota
|
||||||
Save (Enter): Guardar (Intro)
|
Save (Enter): Guardar (Intro)
|
||||||
Observation type: Tipo de observación
|
Observation type: Tipo de observación
|
||||||
New note is empty: La nueva nota esta vacia
|
|
||||||
Are you sure remove this note?: Estas seguro de quitar esta nota?
|
|
||||||
</i18n>
|
</i18n>
|
||||||
|
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import { toPercentage } from 'filters/index';
|
|
||||||
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
value: {
|
|
||||||
type: Number,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const valueClass = computed(() =>
|
|
||||||
props.value === 0 ? 'neutral' : props.value > 0 ? 'positive' : 'negative',
|
|
||||||
);
|
|
||||||
const iconName = computed(() =>
|
|
||||||
props.value === 0 ? 'equal' : props.value > 0 ? 'arrow_upward' : 'arrow_downward',
|
|
||||||
);
|
|
||||||
const formattedValue = computed(() => props.value);
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<span :class="valueClass">
|
|
||||||
<QIcon :name="iconName" size="sm" class="value-icon" />
|
|
||||||
{{ toPercentage(formattedValue) }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.positive {
|
|
||||||
color: $secondary;
|
|
||||||
}
|
|
||||||
.negative {
|
|
||||||
color: $negative;
|
|
||||||
}
|
|
||||||
.neutral {
|
|
||||||
color: $primary;
|
|
||||||
}
|
|
||||||
.value-icon {
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -19,26 +19,23 @@ onMounted(() => {
|
||||||
const observer = new MutationObserver(
|
const observer = new MutationObserver(
|
||||||
() =>
|
() =>
|
||||||
(hasContent.value =
|
(hasContent.value =
|
||||||
actions.value?.childNodes?.length + data.value?.childNodes?.length),
|
actions.value?.childNodes?.length + data.value?.childNodes?.length)
|
||||||
);
|
);
|
||||||
if (actions.value) observer.observe(actions.value, opts);
|
if (actions.value) observer.observe(actions.value, opts);
|
||||||
if (data.value) observer.observe(data.value, opts);
|
if (data.value) observer.observe(data.value, opts);
|
||||||
});
|
});
|
||||||
|
|
||||||
const actionsChildCount = () => !!actions.value?.childNodes?.length;
|
onBeforeUnmount(() => stateStore.toggleSubToolbar());
|
||||||
|
|
||||||
onBeforeUnmount(() => stateStore.toggleSubToolbar() && hasSubToolbar);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<QToolbar
|
<QToolbar
|
||||||
id="subToolbar"
|
id="subToolbar"
|
||||||
v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
|
|
||||||
class="justify-end sticky"
|
class="justify-end sticky"
|
||||||
|
v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
|
||||||
>
|
>
|
||||||
<slot name="st-data">
|
<slot name="st-data">
|
||||||
<div id="st-data" :class="{ 'full-width': !actionsChildCount() }">
|
<div id="st-data"></div>
|
||||||
</div>
|
|
||||||
</slot>
|
</slot>
|
||||||
<QSpace />
|
<QSpace />
|
||||||
<slot name="st-actions">
|
<slot name="st-actions">
|
||||||
|
|
|
||||||
|
|
@ -53,8 +53,3 @@ const manaCode = ref(props.manaCode);
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<i18n>
|
|
||||||
es:
|
|
||||||
Promotion mana: Maná promoción
|
|
||||||
Claim mana: Maná reclamación
|
|
||||||
</i18n>
|
|
||||||
|
|
|
||||||
|
|
@ -51,6 +51,16 @@ describe('CardSummary', () => {
|
||||||
expect(vm.store.filter).toEqual('cardFilter');
|
expect(vm.store.filter).toEqual('cardFilter');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should compute entity correctly from store data', () => {
|
||||||
|
vm.store.data = [{ id: 1, name: 'Entity 1' }];
|
||||||
|
expect(vm.entity).toEqual({ id: 1, name: 'Entity 1' });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle empty data gracefully', () => {
|
||||||
|
vm.store.data = [];
|
||||||
|
expect(vm.entity).toBeUndefined();
|
||||||
|
});
|
||||||
|
|
||||||
it('should respond to prop changes and refetch data', async () => {
|
it('should respond to prop changes and refetch data', async () => {
|
||||||
const newUrl = 'CardSummary/35';
|
const newUrl = 'CardSummary/35';
|
||||||
const newKey = 'cardSummaryKey/35';
|
const newKey = 'cardSummaryKey/35';
|
||||||
|
|
@ -62,7 +72,7 @@ describe('CardSummary', () => {
|
||||||
expect(vm.store.filter).toEqual({ key: newKey });
|
expect(vm.store.filter).toEqual({ key: newKey });
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should return true if route path ends with /summary', () => {
|
it('should return true if route path ends with /summary' , () => {
|
||||||
expect(vm.isSummary).toBe(true);
|
expect(vm.isSummary).toBe(true);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -16,7 +16,7 @@ describe('useArrayData', () => {
|
||||||
vi.clearAllMocks();
|
vi.clearAllMocks();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should fetch and replace url with new params', async () => {
|
it('should fetch and repalce url with new params', async () => {
|
||||||
vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [] });
|
vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [] });
|
||||||
|
|
||||||
const arrayData = useArrayData('ArrayData', { url: 'mockUrl' });
|
const arrayData = useArrayData('ArrayData', { url: 'mockUrl' });
|
||||||
|
|
@ -33,11 +33,11 @@ describe('useArrayData', () => {
|
||||||
});
|
});
|
||||||
expect(routerReplace.path).toEqual('mockSection/list');
|
expect(routerReplace.path).toEqual('mockSection/list');
|
||||||
expect(JSON.parse(routerReplace.query.params)).toEqual(
|
expect(JSON.parse(routerReplace.query.params)).toEqual(
|
||||||
expect.objectContaining(params),
|
expect.objectContaining(params)
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should get data and send new URL without keeping parameters, if there is only one record', async () => {
|
it('Should get data and send new URL without keeping parameters, if there is only one record', async () => {
|
||||||
vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }] });
|
vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }] });
|
||||||
|
|
||||||
const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
|
const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
|
||||||
|
|
@ -56,7 +56,7 @@ describe('useArrayData', () => {
|
||||||
expect(routerPush.query).toBeUndefined();
|
expect(routerPush.query).toBeUndefined();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should get data and send new URL keeping parameters, if you have more than one record', async () => {
|
it('Should get data and send new URL keeping parameters, if you have more than one record', async () => {
|
||||||
vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }, { id: 2 }] });
|
vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }, { id: 2 }] });
|
||||||
|
|
||||||
vi.spyOn(vueRouter, 'useRoute').mockReturnValue({
|
vi.spyOn(vueRouter, 'useRoute').mockReturnValue({
|
||||||
|
|
@ -95,25 +95,4 @@ describe('useArrayData', () => {
|
||||||
expect(routerPush.path).toEqual('mockName/');
|
expect(routerPush.path).toEqual('mockName/');
|
||||||
expect(routerPush.query.params).toBeDefined();
|
expect(routerPush.query.params).toBeDefined();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should return one record', async () => {
|
|
||||||
vi.spyOn(axios, 'get').mockReturnValueOnce({
|
|
||||||
data: [
|
|
||||||
{ id: 1, name: 'Entity 1' },
|
|
||||||
{ id: 2, name: 'Entity 2' },
|
|
||||||
],
|
|
||||||
});
|
|
||||||
const arrayData = useArrayData('ArrayData', { url: 'mockUrl', oneRecord: true });
|
|
||||||
await arrayData.fetch({});
|
|
||||||
|
|
||||||
expect(arrayData.store.data).toEqual({ id: 1, name: 'Entity 1' });
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should handle empty data gracefully if has to return one record', async () => {
|
|
||||||
vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [] });
|
|
||||||
const arrayData = useArrayData('ArrayData', { url: 'mockUrl', oneRecord: true });
|
|
||||||
await arrayData.fetch({});
|
|
||||||
|
|
||||||
expect(arrayData.store.data).toBeUndefined();
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
import { describe, it, expect, vi } from 'vitest';
|
|
||||||
import { useRequired } from '../useRequired';
|
|
||||||
|
|
||||||
vi.mock('../useValidator', () => ({
|
|
||||||
useValidator: () => ({
|
|
||||||
validations: () => ({
|
|
||||||
required: vi.fn((isRequired, val) => {
|
|
||||||
if (!isRequired) return true;
|
|
||||||
return val !== null && val !== undefined && val !== '';
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe('useRequired', () => {
|
|
||||||
it('should detect required when attr is boolean true', () => {
|
|
||||||
const attrs = { required: true };
|
|
||||||
const { isRequired } = useRequired(attrs);
|
|
||||||
expect(isRequired).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should detect required when attr is boolean false', () => {
|
|
||||||
const attrs = { required: false };
|
|
||||||
const { isRequired } = useRequired(attrs);
|
|
||||||
expect(isRequired).toBe(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should detect required when attr exists without value', () => {
|
|
||||||
const attrs = { required: '' };
|
|
||||||
const { isRequired } = useRequired(attrs);
|
|
||||||
expect(isRequired).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should return false when required attr does not exist', () => {
|
|
||||||
const attrs = { someOtherAttr: 'value' };
|
|
||||||
const { isRequired } = useRequired(attrs);
|
|
||||||
expect(isRequired).toBe(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('requiredFieldRule', () => {
|
|
||||||
it('should validate required field with value', () => {
|
|
||||||
const attrs = { required: true };
|
|
||||||
const { requiredFieldRule } = useRequired(attrs);
|
|
||||||
expect(requiredFieldRule('some value')).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should validate required field with empty value', () => {
|
|
||||||
const attrs = { required: true };
|
|
||||||
const { requiredFieldRule } = useRequired(attrs);
|
|
||||||
expect(requiredFieldRule('')).toBe(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should pass validation when field is not required', () => {
|
|
||||||
const attrs = { required: false };
|
|
||||||
const { requiredFieldRule } = useRequired(attrs);
|
|
||||||
expect(requiredFieldRule('')).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should handle null and undefined values', () => {
|
|
||||||
const attrs = { required: true };
|
|
||||||
const { requiredFieldRule } = useRequired(attrs);
|
|
||||||
expect(requiredFieldRule(null)).toBe(false);
|
|
||||||
expect(requiredFieldRule(undefined)).toBe(false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
import { useQuasar } from 'quasar';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
import { useRouter } from 'vue-router';
|
|
||||||
import axios from 'axios';
|
|
||||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
|
||||||
|
|
||||||
export async function checkEntryLock(entryFk, userFk) {
|
|
||||||
const { t } = useI18n();
|
|
||||||
const quasar = useQuasar();
|
|
||||||
const { push } = useRouter();
|
|
||||||
const { data } = await axios.get(`Entries/${entryFk}`, {
|
|
||||||
params: {
|
|
||||||
filter: JSON.stringify({
|
|
||||||
fields: ['id', 'locked', 'lockerUserFk'],
|
|
||||||
include: { relation: 'user', scope: { fields: ['id', 'nickname'] } },
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const entryConfig = await axios.get('EntryConfigs/findOne');
|
|
||||||
|
|
||||||
if (data?.lockerUserFk && data?.locked) {
|
|
||||||
const now = new Date(Date.vnNow()).getTime();
|
|
||||||
const lockedTime = new Date(data.locked).getTime();
|
|
||||||
const timeDiff = (now - lockedTime) / 1000;
|
|
||||||
const isMaxTimeLockExceeded = entryConfig.data.maxLockTime > timeDiff;
|
|
||||||
|
|
||||||
if (data?.lockerUserFk !== userFk && isMaxTimeLockExceeded) {
|
|
||||||
quasar
|
|
||||||
.dialog({
|
|
||||||
component: VnConfirm,
|
|
||||||
componentProps: {
|
|
||||||
'data-cy': 'entry-lock-confirm',
|
|
||||||
title: t('entry.lock.title'),
|
|
||||||
message: t('entry.lock.message', {
|
|
||||||
userName: data?.user?.nickname,
|
|
||||||
time: timeDiff / 60,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.onOk(
|
|
||||||
async () =>
|
|
||||||
await axios.patch(`Entries/${entryFk}`, {
|
|
||||||
locked: Date.vnNow(),
|
|
||||||
lockerUserFk: userFk,
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
.onCancel(() => {
|
|
||||||
push({ path: `summary` });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
await axios
|
|
||||||
.patch(`Entries/${entryFk}`, {
|
|
||||||
locked: Date.vnNow(),
|
|
||||||
lockerUserFk: userFk,
|
|
||||||
})
|
|
||||||
.then(
|
|
||||||
quasar.notify({
|
|
||||||
message: t('entry.lock.success'),
|
|
||||||
color: 'positive',
|
|
||||||
group: false,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
export function getColAlign(col) {
|
|
||||||
let align;
|
|
||||||
switch (col.component) {
|
|
||||||
case 'time':
|
|
||||||
case 'date':
|
|
||||||
case 'select':
|
|
||||||
align = 'left';
|
|
||||||
break;
|
|
||||||
case 'number':
|
|
||||||
align = 'right';
|
|
||||||
break;
|
|
||||||
case 'checkbox':
|
|
||||||
align = 'center';
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
align = col?.align;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (/^is[A-Z]/.test(col.name) || /^has[A-Z]/.test(col.name)) align = 'center';
|
|
||||||
|
|
||||||
return 'text-' + (align ?? 'center');
|
|
||||||
}
|
|
||||||
|
|
@ -57,7 +57,6 @@ export function useArrayData(key, userOptions) {
|
||||||
'navigate',
|
'navigate',
|
||||||
'mapKey',
|
'mapKey',
|
||||||
'keepData',
|
'keepData',
|
||||||
'oneRecord',
|
|
||||||
];
|
];
|
||||||
if (typeof userOptions === 'object') {
|
if (typeof userOptions === 'object') {
|
||||||
for (const option in userOptions) {
|
for (const option in userOptions) {
|
||||||
|
|
@ -113,11 +112,7 @@ export function useArrayData(key, userOptions) {
|
||||||
store.isLoading = false;
|
store.isLoading = false;
|
||||||
canceller = null;
|
canceller = null;
|
||||||
|
|
||||||
processData(response.data, {
|
processData(response.data, { map: !!store.mapKey, append });
|
||||||
map: !!store.mapKey,
|
|
||||||
append,
|
|
||||||
oneRecord: store.oneRecord,
|
|
||||||
});
|
|
||||||
|
|
||||||
return response;
|
return response;
|
||||||
}
|
}
|
||||||
|
|
@ -319,11 +314,7 @@ export function useArrayData(key, userOptions) {
|
||||||
return { params, limit };
|
return { params, limit };
|
||||||
}
|
}
|
||||||
|
|
||||||
function processData(data, { map = true, append = true, oneRecord = false }) {
|
function processData(data, { map = true, append = true }) {
|
||||||
if (oneRecord) {
|
|
||||||
store.data = Array.isArray(data) ? data[0] : data;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!append) {
|
if (!append) {
|
||||||
store.data = [];
|
store.data = [];
|
||||||
store.map = new Map();
|
store.map = new Map();
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ export async function useCau(res, message) {
|
||||||
const { config, headers, request, status, statusText, data } = res || {};
|
const { config, headers, request, status, statusText, data } = res || {};
|
||||||
const { params, url, method, signal, headers: confHeaders } = config || {};
|
const { params, url, method, signal, headers: confHeaders } = config || {};
|
||||||
const { message: resMessage, code, name } = data?.error || {};
|
const { message: resMessage, code, name } = data?.error || {};
|
||||||
delete confHeaders?.Authorization;
|
delete confHeaders.Authorization;
|
||||||
|
|
||||||
const additionalData = {
|
const additionalData = {
|
||||||
path: location.hash,
|
path: location.hash,
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,14 @@ import { useValidator } from 'src/composables/useValidator';
|
||||||
|
|
||||||
export function useRequired($attrs) {
|
export function useRequired($attrs) {
|
||||||
const { validations } = useValidator();
|
const { validations } = useValidator();
|
||||||
const isRequired =
|
const hasRequired = Object.keys($attrs).includes('required');
|
||||||
typeof $attrs['required'] === 'boolean'
|
let isRequired = false;
|
||||||
? $attrs['required']
|
if (hasRequired) {
|
||||||
: Object.keys($attrs).includes('required');
|
const required = $attrs['required'];
|
||||||
|
if (typeof required === 'boolean') {
|
||||||
|
isRequired = required;
|
||||||
|
}
|
||||||
|
}
|
||||||
const requiredFieldRule = (val) => validations().required(isRequired, val);
|
const requiredFieldRule = (val) => validations().required(isRequired, val);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -27,15 +27,6 @@ export function useRole() {
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
function likeAny(roles) {
|
|
||||||
const roleStore = state.getRoles();
|
|
||||||
for (const role of roles) {
|
|
||||||
if (!roleStore.value.findIndex((rs) => rs.startsWith(role)) !== -1)
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
function isEmployee() {
|
function isEmployee() {
|
||||||
return hasAny(['employee']);
|
return hasAny(['employee']);
|
||||||
}
|
}
|
||||||
|
|
@ -44,7 +35,6 @@ export function useRole() {
|
||||||
isEmployee,
|
isEmployee,
|
||||||
fetch,
|
fetch,
|
||||||
hasAny,
|
hasAny,
|
||||||
likeAny,
|
|
||||||
state,
|
state,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,10 +21,7 @@ body.body--light {
|
||||||
.q-header .q-toolbar {
|
.q-header .q-toolbar {
|
||||||
color: var(--vn-text-color);
|
color: var(--vn-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
--vn-color-negative: $negative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body.body--dark {
|
body.body--dark {
|
||||||
--vn-header-color: #5d5d5d;
|
--vn-header-color: #5d5d5d;
|
||||||
--vn-page-color: #222;
|
--vn-page-color: #222;
|
||||||
|
|
@ -40,8 +37,6 @@ body.body--dark {
|
||||||
--vn-text-color-contrast: black;
|
--vn-text-color-contrast: black;
|
||||||
|
|
||||||
background-color: var(--vn-page-color);
|
background-color: var(--vn-page-color);
|
||||||
|
|
||||||
--vn-color-negative: $negative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
@ -80,6 +75,7 @@ a {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Removes chrome autofill background
|
||||||
input:-webkit-autofill,
|
input:-webkit-autofill,
|
||||||
select:-webkit-autofill {
|
select:-webkit-autofill {
|
||||||
color: var(--vn-text-color);
|
color: var(--vn-text-color);
|
||||||
|
|
@ -153,6 +149,11 @@ select:-webkit-autofill {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vn-table-separation-row {
|
||||||
|
height: 16px !important;
|
||||||
|
background-color: var(--vn-section-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Estilo para el asterisco en campos requeridos */
|
/* Estilo para el asterisco en campos requeridos */
|
||||||
.q-field.required .q-field__label:after {
|
.q-field.required .q-field__label:after {
|
||||||
content: ' *';
|
content: ' *';
|
||||||
|
|
@ -211,10 +212,6 @@ select:-webkit-autofill {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.q-card__section[dense] {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='number'] {
|
input[type='number'] {
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
}
|
}
|
||||||
|
|
@ -229,12 +226,10 @@ input::-webkit-inner-spin-button {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.remove-bg {
|
|
||||||
filter: brightness(1.1);
|
|
||||||
mix-blend-mode: multiply;
|
|
||||||
}
|
|
||||||
|
|
||||||
.q-table__container {
|
.q-table__container {
|
||||||
|
/* ===== Scrollbar CSS ===== /
|
||||||
|
/ Firefox */
|
||||||
|
|
||||||
* {
|
* {
|
||||||
scrollbar-width: auto;
|
scrollbar-width: auto;
|
||||||
scrollbar-color: var(--vn-label-color) transparent;
|
scrollbar-color: var(--vn-label-color) transparent;
|
||||||
|
|
@ -275,6 +270,8 @@ input::-webkit-inner-spin-button {
|
||||||
font-size: 11pt;
|
font-size: 11pt;
|
||||||
}
|
}
|
||||||
td {
|
td {
|
||||||
|
font-size: 11pt;
|
||||||
|
border-top: 1px solid var(--vn-page-color);
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -318,6 +315,9 @@ input::-webkit-inner-spin-button {
|
||||||
max-width: fit-content;
|
max-width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.row > .column:has(.q-checkbox) {
|
||||||
|
max-width: fit-content;
|
||||||
|
}
|
||||||
.q-field__inner {
|
.q-field__inner {
|
||||||
.q-field__control {
|
.q-field__control {
|
||||||
min-height: auto !important;
|
min-height: auto !important;
|
||||||
|
|
@ -335,7 +335,3 @@ input::-webkit-inner-spin-button {
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
box-shadow: 0 4px 6px #00000000;
|
box-shadow: 0 4px 6px #00000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.containerShrinked {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
// Tip: Use the "Theme Builder" on Quasar's documentation website.
|
// Tip: Use the "Theme Builder" on Quasar's documentation website.
|
||||||
// Tip: to add new colors https://quasar.dev/style/color-palette/#adding-your-own-colors
|
// Tip: to add new colors https://quasar.dev/style/color-palette/#adding-your-own-colors
|
||||||
$primary: #ec8916;
|
$primary: #ec8916;
|
||||||
$secondary: #89be34;
|
$secondary: $primary;
|
||||||
$positive: #c8e484;
|
$positive: #c8e484;
|
||||||
$negative: #fb5252;
|
$negative: #fb5252;
|
||||||
$info: #84d0e2;
|
$info: #84d0e2;
|
||||||
|
|
@ -30,9 +30,7 @@ $color-spacer: #7979794d;
|
||||||
$border-thin-light: 1px solid $color-spacer-light;
|
$border-thin-light: 1px solid $color-spacer-light;
|
||||||
$primary-light: #f5b351;
|
$primary-light: #f5b351;
|
||||||
$dark-shadow-color: black;
|
$dark-shadow-color: black;
|
||||||
$layout-shadow-dark:
|
$layout-shadow-dark: 0 0 10px 2px #00000033, 0 0px 10px #0000003d;
|
||||||
0 0 10px 2px #00000033,
|
|
||||||
0 0px 10px #0000003d;
|
|
||||||
$spacing-md: 16px;
|
$spacing-md: 16px;
|
||||||
$color-font-secondary: #777;
|
$color-font-secondary: #777;
|
||||||
$width-xs: 400px;
|
$width-xs: 400px;
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,6 @@ import { useI18n } from 'vue-i18n';
|
||||||
export default function (value, options = {}) {
|
export default function (value, options = {}) {
|
||||||
if (!value) return;
|
if (!value) return;
|
||||||
|
|
||||||
if (!isValidDate(value)) return null;
|
|
||||||
|
|
||||||
if (!options.dateStyle && !options.timeStyle) {
|
if (!options.dateStyle && !options.timeStyle) {
|
||||||
options.day = '2-digit';
|
options.day = '2-digit';
|
||||||
options.month = '2-digit';
|
options.month = '2-digit';
|
||||||
|
|
@ -12,12 +10,7 @@ export default function (value, options = {}) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const { locale } = useI18n();
|
const { locale } = useI18n();
|
||||||
const newDate = new Date(value);
|
const date = new Date(value);
|
||||||
|
|
||||||
return new Intl.DateTimeFormat(locale.value, options).format(newDate);
|
return new Intl.DateTimeFormat(locale.value, options).format(date);
|
||||||
}
|
|
||||||
// handle 0000-00-00
|
|
||||||
function isValidDate(date) {
|
|
||||||
const parsedDate = new Date(date);
|
|
||||||
return parsedDate instanceof Date && !isNaN(parsedDate.getTime());
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,6 @@ globals:
|
||||||
reset: Reset
|
reset: Reset
|
||||||
close: Close
|
close: Close
|
||||||
cancel: Cancel
|
cancel: Cancel
|
||||||
isSaveAndContinue: Save and continue
|
|
||||||
clone: Clone
|
clone: Clone
|
||||||
confirm: Confirm
|
confirm: Confirm
|
||||||
assign: Assign
|
assign: Assign
|
||||||
|
|
@ -49,7 +48,6 @@ globals:
|
||||||
rowRemoved: Row removed
|
rowRemoved: Row removed
|
||||||
pleaseWait: Please wait...
|
pleaseWait: Please wait...
|
||||||
noPinnedModules: You don't have any pinned modules
|
noPinnedModules: You don't have any pinned modules
|
||||||
enterToConfirm: Press Enter to confirm
|
|
||||||
summary:
|
summary:
|
||||||
basicData: Basic data
|
basicData: Basic data
|
||||||
daysOnward: Days onward
|
daysOnward: Days onward
|
||||||
|
|
@ -157,7 +155,6 @@ globals:
|
||||||
changeState: Change state
|
changeState: Change state
|
||||||
raid: 'Raid {daysInForward} days'
|
raid: 'Raid {daysInForward} days'
|
||||||
isVies: Vies
|
isVies: Vies
|
||||||
noData: No data available
|
|
||||||
pageTitles:
|
pageTitles:
|
||||||
logIn: Login
|
logIn: Login
|
||||||
addressEdit: Update address
|
addressEdit: Update address
|
||||||
|
|
@ -170,7 +167,6 @@ globals:
|
||||||
workCenters: Work centers
|
workCenters: Work centers
|
||||||
modes: Modes
|
modes: Modes
|
||||||
zones: Zones
|
zones: Zones
|
||||||
negative: Negative
|
|
||||||
zonesList: List
|
zonesList: List
|
||||||
deliveryDays: Delivery days
|
deliveryDays: Delivery days
|
||||||
upcomingDeliveries: Upcoming deliveries
|
upcomingDeliveries: Upcoming deliveries
|
||||||
|
|
@ -178,7 +174,6 @@ globals:
|
||||||
alias: Alias
|
alias: Alias
|
||||||
aliasUsers: Users
|
aliasUsers: Users
|
||||||
subRoles: Subroles
|
subRoles: Subroles
|
||||||
myAccount: Mi cuenta
|
|
||||||
inheritedRoles: Inherited Roles
|
inheritedRoles: Inherited Roles
|
||||||
customers: Customers
|
customers: Customers
|
||||||
customerCreate: New customer
|
customerCreate: New customer
|
||||||
|
|
@ -337,13 +332,10 @@ globals:
|
||||||
wasteRecalc: Waste recaclulate
|
wasteRecalc: Waste recaclulate
|
||||||
operator: Operator
|
operator: Operator
|
||||||
parking: Parking
|
parking: Parking
|
||||||
vehicleList: Vehicles
|
|
||||||
vehicle: Vehicle
|
|
||||||
unsavedPopup:
|
unsavedPopup:
|
||||||
title: Unsaved changes will be lost
|
title: Unsaved changes will be lost
|
||||||
subtitle: Are you sure exit without saving?
|
subtitle: Are you sure exit without saving?
|
||||||
params:
|
params:
|
||||||
description: Description
|
|
||||||
clientFk: Client id
|
clientFk: Client id
|
||||||
salesPersonFk: Sales person
|
salesPersonFk: Sales person
|
||||||
warehouseFk: Warehouse
|
warehouseFk: Warehouse
|
||||||
|
|
@ -366,13 +358,7 @@ globals:
|
||||||
correctingFk: Rectificative
|
correctingFk: Rectificative
|
||||||
daysOnward: Days onward
|
daysOnward: Days onward
|
||||||
countryFk: Country
|
countryFk: Country
|
||||||
countryCodeFk: Country
|
|
||||||
companyFk: Company
|
companyFk: Company
|
||||||
model: Model
|
|
||||||
fuel: Fuel
|
|
||||||
active: Active
|
|
||||||
inactive: Inactive
|
|
||||||
deliveryPoint: Delivery point
|
|
||||||
errors:
|
errors:
|
||||||
statusUnauthorized: Access denied
|
statusUnauthorized: Access denied
|
||||||
statusInternalServerError: An internal server error has ocurred
|
statusInternalServerError: An internal server error has ocurred
|
||||||
|
|
@ -411,106 +397,6 @@ cau:
|
||||||
subtitle: By sending this ticket, all the data related to the error, the section, the user, etc., are already sent.
|
subtitle: By sending this ticket, all the data related to the error, the section, the user, etc., are already sent.
|
||||||
inputLabel: Explain why this error should not appear
|
inputLabel: Explain why this error should not appear
|
||||||
askPrivileges: Ask for privileges
|
askPrivileges: Ask for privileges
|
||||||
entry:
|
|
||||||
list:
|
|
||||||
newEntry: New entry
|
|
||||||
tableVisibleColumns:
|
|
||||||
isExcludedFromAvailable: Exclude from inventory
|
|
||||||
isOrdered: Ordered
|
|
||||||
isConfirmed: Ready to label
|
|
||||||
isReceived: Received
|
|
||||||
isRaid: Raid
|
|
||||||
landed: Date
|
|
||||||
supplierFk: Supplier
|
|
||||||
reference: Ref/Alb/Guide
|
|
||||||
invoiceNumber: Invoice
|
|
||||||
agencyModeId: Agency
|
|
||||||
isBooked: Booked
|
|
||||||
companyFk: Company
|
|
||||||
evaNotes: Notes
|
|
||||||
warehouseOutFk: Origin
|
|
||||||
warehouseInFk: Destiny
|
|
||||||
entryTypeDescription: Entry type
|
|
||||||
invoiceAmount: Import
|
|
||||||
travelFk: Travel
|
|
||||||
summary:
|
|
||||||
invoiceAmount: Amount
|
|
||||||
commission: Commission
|
|
||||||
currency: Currency
|
|
||||||
invoiceNumber: Invoice number
|
|
||||||
ordered: Ordered
|
|
||||||
booked: Booked
|
|
||||||
excludedFromAvailable: Inventory
|
|
||||||
travelReference: Reference
|
|
||||||
travelAgency: Agency
|
|
||||||
travelShipped: Shipped
|
|
||||||
travelDelivered: Delivered
|
|
||||||
travelLanded: Landed
|
|
||||||
travelReceived: Received
|
|
||||||
buys: Buys
|
|
||||||
stickers: Stickers
|
|
||||||
package: Package
|
|
||||||
packing: Pack.
|
|
||||||
grouping: Group.
|
|
||||||
buyingValue: Buying value
|
|
||||||
import: Import
|
|
||||||
pvp: PVP
|
|
||||||
basicData:
|
|
||||||
travel: Travel
|
|
||||||
currency: Currency
|
|
||||||
commission: Commission
|
|
||||||
observation: Observation
|
|
||||||
booked: Booked
|
|
||||||
excludedFromAvailable: Inventory
|
|
||||||
buys:
|
|
||||||
observations: Observations
|
|
||||||
packagingFk: Box
|
|
||||||
color: Color
|
|
||||||
printedStickers: Printed stickers
|
|
||||||
notes:
|
|
||||||
observationType: Observation type
|
|
||||||
latestBuys:
|
|
||||||
tableVisibleColumns:
|
|
||||||
image: Picture
|
|
||||||
itemFk: Item ID
|
|
||||||
weightByPiece: Weight/Piece
|
|
||||||
isActive: Active
|
|
||||||
family: Family
|
|
||||||
entryFk: Entry
|
|
||||||
freightValue: Freight value
|
|
||||||
comissionValue: Commission value
|
|
||||||
packageValue: Package value
|
|
||||||
isIgnored: Is ignored
|
|
||||||
price2: Grouping
|
|
||||||
price3: Packing
|
|
||||||
minPrice: Min
|
|
||||||
ektFk: Ekt
|
|
||||||
packingOut: Package out
|
|
||||||
landing: Landing
|
|
||||||
isExcludedFromAvailable: Exclude from inventory
|
|
||||||
isRaid: Raid
|
|
||||||
invoiceNumber: Invoice
|
|
||||||
reference: Ref/Alb/Guide
|
|
||||||
params:
|
|
||||||
isExcludedFromAvailable: Excluir del inventario
|
|
||||||
isOrdered: Pedida
|
|
||||||
isConfirmed: Lista para etiquetar
|
|
||||||
isReceived: Recibida
|
|
||||||
isRaid: Redada
|
|
||||||
landed: Fecha
|
|
||||||
supplierFk: Proveedor
|
|
||||||
invoiceNumber: Nº Factura
|
|
||||||
reference: Ref/Alb/Guía
|
|
||||||
agencyModeId: Agencia
|
|
||||||
isBooked: Asentado
|
|
||||||
companyFk: Empresa
|
|
||||||
travelFk: Envio
|
|
||||||
evaNotes: Notas
|
|
||||||
warehouseOutFk: Origen
|
|
||||||
warehouseInFk: Destino
|
|
||||||
entryTypeDescription: Tipo entrada
|
|
||||||
invoiceAmount: Importe
|
|
||||||
dated: Fecha
|
|
||||||
ticket:
|
ticket:
|
||||||
params:
|
params:
|
||||||
ticketFk: Ticket ID
|
ticketFk: Ticket ID
|
||||||
|
|
@ -740,8 +626,6 @@ wagon:
|
||||||
name: Name
|
name: Name
|
||||||
|
|
||||||
supplier:
|
supplier:
|
||||||
search: Search supplier
|
|
||||||
searchInfo: Search supplier by id or name
|
|
||||||
list:
|
list:
|
||||||
payMethod: Pay method
|
payMethod: Pay method
|
||||||
account: Account
|
account: Account
|
||||||
|
|
@ -831,8 +715,6 @@ travel:
|
||||||
CloneTravelAndEntries: Clone travel and his entries
|
CloneTravelAndEntries: Clone travel and his entries
|
||||||
deleteTravel: Delete travel
|
deleteTravel: Delete travel
|
||||||
AddEntry: Add entry
|
AddEntry: Add entry
|
||||||
availabled: Availabled
|
|
||||||
availabledHour: Availabled hour
|
|
||||||
thermographs: Thermographs
|
thermographs: Thermographs
|
||||||
hb: HB
|
hb: HB
|
||||||
basicData:
|
basicData:
|
||||||
|
|
|
||||||
|
|
@ -33,11 +33,9 @@ globals:
|
||||||
reset: Restaurar
|
reset: Restaurar
|
||||||
close: Cerrar
|
close: Cerrar
|
||||||
cancel: Cancelar
|
cancel: Cancelar
|
||||||
isSaveAndContinue: Guardar y continuar
|
|
||||||
clone: Clonar
|
clone: Clonar
|
||||||
confirm: Confirmar
|
confirm: Confirmar
|
||||||
assign: Asignar
|
assign: Asignar
|
||||||
replace: Sustituir
|
|
||||||
back: Volver
|
back: Volver
|
||||||
yes: Si
|
yes: Si
|
||||||
no: No
|
no: No
|
||||||
|
|
@ -50,8 +48,6 @@ globals:
|
||||||
rowRemoved: Fila eliminada
|
rowRemoved: Fila eliminada
|
||||||
pleaseWait: Por favor espera...
|
pleaseWait: Por favor espera...
|
||||||
noPinnedModules: No has fijado ningún módulo
|
noPinnedModules: No has fijado ningún módulo
|
||||||
split: Split
|
|
||||||
enterToConfirm: Pulsa Enter para confirmar
|
|
||||||
summary:
|
summary:
|
||||||
basicData: Datos básicos
|
basicData: Datos básicos
|
||||||
daysOnward: Días adelante
|
daysOnward: Días adelante
|
||||||
|
|
@ -59,8 +55,8 @@ globals:
|
||||||
today: Hoy
|
today: Hoy
|
||||||
yesterday: Ayer
|
yesterday: Ayer
|
||||||
dateFormat: es-ES
|
dateFormat: es-ES
|
||||||
noSelectedRows: No tienes ninguna línea seleccionada
|
|
||||||
microsip: Abrir en MicroSIP
|
microsip: Abrir en MicroSIP
|
||||||
|
noSelectedRows: No tienes ninguna línea seleccionada
|
||||||
downloadCSVSuccess: Descarga de CSV exitosa
|
downloadCSVSuccess: Descarga de CSV exitosa
|
||||||
reference: Referencia
|
reference: Referencia
|
||||||
agency: Agencia
|
agency: Agencia
|
||||||
|
|
@ -80,10 +76,8 @@ globals:
|
||||||
requiredField: Campo obligatorio
|
requiredField: Campo obligatorio
|
||||||
class: clase
|
class: clase
|
||||||
type: Tipo
|
type: Tipo
|
||||||
reason: Motivo
|
reason: motivo
|
||||||
removeSelection: Eliminar selección
|
|
||||||
noResults: Sin resultados
|
noResults: Sin resultados
|
||||||
results: resultados
|
|
||||||
system: Sistema
|
system: Sistema
|
||||||
notificationSent: Notificación enviada
|
notificationSent: Notificación enviada
|
||||||
warehouse: Almacén
|
warehouse: Almacén
|
||||||
|
|
@ -161,7 +155,6 @@ globals:
|
||||||
changeState: Cambiar estado
|
changeState: Cambiar estado
|
||||||
raid: 'Redada {daysInForward} días'
|
raid: 'Redada {daysInForward} días'
|
||||||
isVies: Vies
|
isVies: Vies
|
||||||
noData: Datos no disponibles
|
|
||||||
pageTitles:
|
pageTitles:
|
||||||
logIn: Inicio de sesión
|
logIn: Inicio de sesión
|
||||||
addressEdit: Modificar consignatario
|
addressEdit: Modificar consignatario
|
||||||
|
|
@ -173,7 +166,6 @@ globals:
|
||||||
agency: Agencia
|
agency: Agencia
|
||||||
workCenters: Centros de trabajo
|
workCenters: Centros de trabajo
|
||||||
modes: Modos
|
modes: Modos
|
||||||
negative: Tickets negativos
|
|
||||||
zones: Zonas
|
zones: Zonas
|
||||||
zonesList: Listado
|
zonesList: Listado
|
||||||
deliveryDays: Días de entrega
|
deliveryDays: Días de entrega
|
||||||
|
|
@ -294,9 +286,9 @@ globals:
|
||||||
buyRequest: Peticiones de compra
|
buyRequest: Peticiones de compra
|
||||||
wasteBreakdown: Deglose de mermas
|
wasteBreakdown: Deglose de mermas
|
||||||
itemCreate: Nuevo artículo
|
itemCreate: Nuevo artículo
|
||||||
tax: IVA
|
tax: 'IVA'
|
||||||
botanical: Botánico
|
botanical: 'Botánico'
|
||||||
barcode: Código de barras
|
barcode: 'Código de barras'
|
||||||
itemTypeCreate: Nueva familia
|
itemTypeCreate: Nueva familia
|
||||||
family: Familia
|
family: Familia
|
||||||
lastEntries: Últimas entradas
|
lastEntries: Últimas entradas
|
||||||
|
|
@ -340,13 +332,10 @@ globals:
|
||||||
wasteRecalc: Recalcular mermas
|
wasteRecalc: Recalcular mermas
|
||||||
operator: Operario
|
operator: Operario
|
||||||
parking: Parking
|
parking: Parking
|
||||||
vehicleList: Vehículos
|
|
||||||
vehicle: Vehículo
|
|
||||||
unsavedPopup:
|
unsavedPopup:
|
||||||
title: Los cambios que no haya guardado se perderán
|
title: Los cambios que no haya guardado se perderán
|
||||||
subtitle: ¿Seguro que quiere salir sin guardar?
|
subtitle: ¿Seguro que quiere salir sin guardar?
|
||||||
params:
|
params:
|
||||||
description: Descripción
|
|
||||||
clientFk: Id cliente
|
clientFk: Id cliente
|
||||||
salesPersonFk: Comercial
|
salesPersonFk: Comercial
|
||||||
warehouseFk: Almacén
|
warehouseFk: Almacén
|
||||||
|
|
@ -360,14 +349,13 @@ globals:
|
||||||
from: Desde
|
from: Desde
|
||||||
to: Hasta
|
to: Hasta
|
||||||
supplierFk: Proveedor
|
supplierFk: Proveedor
|
||||||
supplierRef: Nº factura
|
supplierRef: Ref. proveedor
|
||||||
serial: Serie
|
serial: Serie
|
||||||
amount: Importe
|
amount: Importe
|
||||||
awbCode: AWB
|
awbCode: AWB
|
||||||
daysOnward: Días adelante
|
daysOnward: Días adelante
|
||||||
packing: ITP
|
packing: ITP
|
||||||
countryFk: País
|
countryFk: País
|
||||||
countryCodeFk: País
|
|
||||||
companyFk: Empresa
|
companyFk: Empresa
|
||||||
errors:
|
errors:
|
||||||
statusUnauthorized: Acceso denegado
|
statusUnauthorized: Acceso denegado
|
||||||
|
|
@ -405,87 +393,6 @@ cau:
|
||||||
subtitle: Al enviar este cau ya se envían todos los datos relacionados con el error, la sección, el usuario, etc
|
subtitle: Al enviar este cau ya se envían todos los datos relacionados con el error, la sección, el usuario, etc
|
||||||
inputLabel: Explique el motivo por el que no deberia aparecer este fallo
|
inputLabel: Explique el motivo por el que no deberia aparecer este fallo
|
||||||
askPrivileges: Solicitar permisos
|
askPrivileges: Solicitar permisos
|
||||||
entry:
|
|
||||||
list:
|
|
||||||
newEntry: Nueva entrada
|
|
||||||
tableVisibleColumns:
|
|
||||||
isExcludedFromAvailable: Excluir del inventario
|
|
||||||
isOrdered: Pedida
|
|
||||||
isConfirmed: Lista para etiquetar
|
|
||||||
isReceived: Recibida
|
|
||||||
isRaid: Redada
|
|
||||||
landed: Fecha
|
|
||||||
supplierFk: Proveedor
|
|
||||||
invoiceNumber: Nº Factura
|
|
||||||
reference: Ref/Alb/Guía
|
|
||||||
agencyModeId: Agencia
|
|
||||||
isBooked: Asentado
|
|
||||||
companyFk: Empresa
|
|
||||||
travelFk: Envio
|
|
||||||
evaNotes: Notas
|
|
||||||
warehouseOutFk: Origen
|
|
||||||
warehouseInFk: Destino
|
|
||||||
entryTypeDescription: Tipo entrada
|
|
||||||
invoiceAmount: Importe
|
|
||||||
summary:
|
|
||||||
invoiceAmount: Importe
|
|
||||||
commission: Comisión
|
|
||||||
currency: Moneda
|
|
||||||
invoiceNumber: Núm. factura
|
|
||||||
ordered: Pedida
|
|
||||||
booked: Contabilizada
|
|
||||||
excludedFromAvailable: Inventario
|
|
||||||
travelReference: Referencia
|
|
||||||
travelAgency: Agencia
|
|
||||||
travelShipped: F. envio
|
|
||||||
travelWarehouseOut: Alm. salida
|
|
||||||
travelDelivered: Enviada
|
|
||||||
travelLanded: F. entrega
|
|
||||||
travelReceived: Recibida
|
|
||||||
buys: Compras
|
|
||||||
stickers: Etiquetas
|
|
||||||
package: Embalaje
|
|
||||||
packing: Pack.
|
|
||||||
grouping: Group.
|
|
||||||
buyingValue: Coste
|
|
||||||
import: Importe
|
|
||||||
pvp: PVP
|
|
||||||
basicData:
|
|
||||||
travel: Envío
|
|
||||||
currency: Moneda
|
|
||||||
observation: Observación
|
|
||||||
commission: Comisión
|
|
||||||
booked: Asentado
|
|
||||||
excludedFromAvailable: Inventario
|
|
||||||
buys:
|
|
||||||
observations: Observaciónes
|
|
||||||
packagingFk: Embalaje
|
|
||||||
color: Color
|
|
||||||
printedStickers: Etiquetas impresas
|
|
||||||
notes:
|
|
||||||
observationType: Tipo de observación
|
|
||||||
latestBuys:
|
|
||||||
tableVisibleColumns:
|
|
||||||
image: Foto
|
|
||||||
itemFk: Id Artículo
|
|
||||||
weightByPiece: Peso (gramos)/tallo
|
|
||||||
isActive: Activo
|
|
||||||
family: Familia
|
|
||||||
entryFk: Entrada
|
|
||||||
freightValue: Porte
|
|
||||||
comissionValue: Comisión
|
|
||||||
packageValue: Embalaje
|
|
||||||
isIgnored: Ignorado
|
|
||||||
price2: Grouping
|
|
||||||
price3: Packing
|
|
||||||
minPrice: Min
|
|
||||||
ektFk: Ekt
|
|
||||||
packingOut: Embalaje envíos
|
|
||||||
landing: Llegada
|
|
||||||
isExcludedFromAvailable: Excluir del inventario
|
|
||||||
isRaid: Redada
|
|
||||||
invoiceNumber: Nº Factura
|
|
||||||
reference: Ref/Alb/Guía
|
|
||||||
ticket:
|
ticket:
|
||||||
params:
|
params:
|
||||||
ticketFk: ID de ticket
|
ticketFk: ID de ticket
|
||||||
|
|
@ -499,38 +406,6 @@ ticket:
|
||||||
freightItemName: Nombre
|
freightItemName: Nombre
|
||||||
packageItemName: Embalaje
|
packageItemName: Embalaje
|
||||||
longName: Descripción
|
longName: Descripción
|
||||||
pageTitles:
|
|
||||||
tickets: Tickets
|
|
||||||
list: Listado
|
|
||||||
ticketCreate: Nuevo ticket
|
|
||||||
summary: Resumen
|
|
||||||
basicData: Datos básicos
|
|
||||||
boxing: Encajado
|
|
||||||
sms: Sms
|
|
||||||
notes: Notas
|
|
||||||
sale: Lineas del pedido
|
|
||||||
dms: Gestión documental
|
|
||||||
negative: Tickets negativos
|
|
||||||
volume: Volumen
|
|
||||||
observation: Notas
|
|
||||||
ticketAdvance: Adelantar tickets
|
|
||||||
futureTickets: Tickets a futuro
|
|
||||||
expedition: Expedición
|
|
||||||
purchaseRequest: Petición de compra
|
|
||||||
weeklyTickets: Tickets programados
|
|
||||||
saleTracking: Líneas preparadas
|
|
||||||
services: Servicios
|
|
||||||
tracking: Estados
|
|
||||||
components: Componentes
|
|
||||||
pictures: Fotos
|
|
||||||
packages: Bultos
|
|
||||||
list:
|
|
||||||
nickname: Alias
|
|
||||||
state: Estado
|
|
||||||
shipped: Enviado
|
|
||||||
landed: Entregado
|
|
||||||
salesPerson: Comercial
|
|
||||||
total: Total
|
|
||||||
card:
|
card:
|
||||||
customerId: ID cliente
|
customerId: ID cliente
|
||||||
customerCard: Ficha del cliente
|
customerCard: Ficha del cliente
|
||||||
|
|
@ -577,48 +452,6 @@ ticket:
|
||||||
consigneeStreet: Dirección
|
consigneeStreet: Dirección
|
||||||
create:
|
create:
|
||||||
address: Dirección
|
address: Dirección
|
||||||
invoiceOut:
|
|
||||||
card:
|
|
||||||
issued: Fecha emisión
|
|
||||||
customerCard: Ficha del cliente
|
|
||||||
ticketList: Listado de tickets
|
|
||||||
summary:
|
|
||||||
issued: Fecha
|
|
||||||
dued: Fecha límite
|
|
||||||
booked: Contabilizada
|
|
||||||
taxBreakdown: Desglose impositivo
|
|
||||||
taxableBase: Base imp.
|
|
||||||
rate: Tarifa
|
|
||||||
fee: Cuota
|
|
||||||
tickets: Tickets
|
|
||||||
totalWithVat: Importe
|
|
||||||
globalInvoices:
|
|
||||||
errors:
|
|
||||||
chooseValidClient: Selecciona un cliente válido
|
|
||||||
chooseValidCompany: Selecciona una empresa válida
|
|
||||||
chooseValidPrinter: Selecciona una impresora válida
|
|
||||||
chooseValidSerialType: Selecciona una tipo de serie válida
|
|
||||||
fillDates: La fecha de la factura y la fecha máxima deben estar completas
|
|
||||||
invoiceDateLessThanMaxDate: La fecha de la factura no puede ser menor que la fecha máxima
|
|
||||||
invoiceWithFutureDate: Existe una factura con una fecha futura
|
|
||||||
noTicketsToInvoice: No existen tickets para facturar
|
|
||||||
criticalInvoiceError: Error crítico en la facturación proceso detenido
|
|
||||||
invalidSerialTypeForAll: El tipo de serie debe ser global cuando se facturan todos los clientes
|
|
||||||
table:
|
|
||||||
addressId: Id dirección
|
|
||||||
streetAddress: Dirección fiscal
|
|
||||||
statusCard:
|
|
||||||
percentageText: '{getPercentage}% {getAddressNumber} de {getNAddresses}'
|
|
||||||
pdfsNumberText: '{nPdfs} de {totalPdfs} PDFs'
|
|
||||||
negativeBases:
|
|
||||||
clientId: Id cliente
|
|
||||||
base: Base
|
|
||||||
active: Activo
|
|
||||||
hasToInvoice: Facturar
|
|
||||||
verifiedData: Datos comprobados
|
|
||||||
comercial: Comercial
|
|
||||||
errors:
|
|
||||||
downloadCsvFailed: Error al descargar CSV
|
|
||||||
order:
|
order:
|
||||||
field:
|
field:
|
||||||
salesPersonFk: Comercial
|
salesPersonFk: Comercial
|
||||||
|
|
@ -629,34 +462,15 @@ order:
|
||||||
list:
|
list:
|
||||||
newOrder: Nuevo Pedido
|
newOrder: Nuevo Pedido
|
||||||
summary:
|
summary:
|
||||||
basket: Cesta
|
issued: Fecha
|
||||||
notConfirmed: No confirmada
|
dued: Fecha límite
|
||||||
created: Creado
|
booked: Contabilizada
|
||||||
createdFrom: Creado desde
|
taxBreakdown: Desglose impositivo
|
||||||
address: Dirección
|
taxableBase: Base imp.
|
||||||
total: Total
|
rate: Tarifa
|
||||||
vat: IVA
|
fee: Cuota
|
||||||
state: Estado
|
tickets: Tickets
|
||||||
alias: Alias
|
totalWithVat: Importe
|
||||||
items: Artículos
|
|
||||||
orderTicketList: Tickets del pedido
|
|
||||||
amount: Monto
|
|
||||||
confirm: Confirmar
|
|
||||||
confirmLines: Confirmar lineas
|
|
||||||
shelving:
|
|
||||||
list:
|
|
||||||
parking: Parking
|
|
||||||
priority: Prioridad
|
|
||||||
newShelving: Nuevo Carro
|
|
||||||
summary:
|
|
||||||
recyclable: Reciclable
|
|
||||||
parking:
|
|
||||||
pickingOrder: Orden de recogida
|
|
||||||
row: Fila
|
|
||||||
column: Columna
|
|
||||||
searchBar:
|
|
||||||
info: Puedes buscar por código de parking
|
|
||||||
label: Buscar parking...
|
|
||||||
department:
|
department:
|
||||||
chat: Chat
|
chat: Chat
|
||||||
bossDepartment: Jefe de departamento
|
bossDepartment: Jefe de departamento
|
||||||
|
|
@ -817,8 +631,8 @@ wagon:
|
||||||
volumeNotEmpty: El volumen no puede estar vacío
|
volumeNotEmpty: El volumen no puede estar vacío
|
||||||
typeNotEmpty: El tipo no puede estar vacío
|
typeNotEmpty: El tipo no puede estar vacío
|
||||||
maxTrays: Has alcanzado el número máximo de bandejas
|
maxTrays: Has alcanzado el número máximo de bandejas
|
||||||
minHeightBetweenTrays: La distancia mínima entre bandejas es
|
minHeightBetweenTrays: 'La distancia mínima entre bandejas es '
|
||||||
maxWagonHeight: La altura máxima del vagón es
|
maxWagonHeight: 'La altura máxima del vagón es '
|
||||||
uncompleteTrays: Hay bandejas sin completar
|
uncompleteTrays: Hay bandejas sin completar
|
||||||
params:
|
params:
|
||||||
label: Etiqueta
|
label: Etiqueta
|
||||||
|
|
@ -826,8 +640,6 @@ wagon:
|
||||||
volume: Volumen
|
volume: Volumen
|
||||||
name: Nombre
|
name: Nombre
|
||||||
supplier:
|
supplier:
|
||||||
search: Buscar proveedor
|
|
||||||
searchInfo: Buscar proveedor por id o nombre
|
|
||||||
list:
|
list:
|
||||||
payMethod: Método de pago
|
payMethod: Método de pago
|
||||||
account: Cuenta
|
account: Cuenta
|
||||||
|
|
@ -840,7 +652,6 @@ supplier:
|
||||||
verified: Verificado
|
verified: Verificado
|
||||||
isActive: Está activo
|
isActive: Está activo
|
||||||
billingData: Forma de pago
|
billingData: Forma de pago
|
||||||
financialData: Datos financieros
|
|
||||||
payDeadline: Plazo de pago
|
payDeadline: Plazo de pago
|
||||||
payDay: Día de pago
|
payDay: Día de pago
|
||||||
account: Cuenta
|
account: Cuenta
|
||||||
|
|
@ -918,8 +729,6 @@ travel:
|
||||||
deleteTravel: Eliminar envío
|
deleteTravel: Eliminar envío
|
||||||
AddEntry: Añadir entrada
|
AddEntry: Añadir entrada
|
||||||
thermographs: Termógrafos
|
thermographs: Termógrafos
|
||||||
availabled: F. Disponible
|
|
||||||
availabledHour: Hora Disponible
|
|
||||||
hb: HB
|
hb: HB
|
||||||
basicData:
|
basicData:
|
||||||
daysInForward: Desplazamiento automatico (redada)
|
daysInForward: Desplazamiento automatico (redada)
|
||||||
|
|
@ -968,7 +777,7 @@ components:
|
||||||
cardDescriptor:
|
cardDescriptor:
|
||||||
mainList: Listado principal
|
mainList: Listado principal
|
||||||
summary: Resumen
|
summary: Resumen
|
||||||
moreOptions: Más opciones
|
moreOptions: 'Más opciones'
|
||||||
leftMenu:
|
leftMenu:
|
||||||
addToPinned: Añadir a fijados
|
addToPinned: Añadir a fijados
|
||||||
removeFromPinned: Eliminar de fijados
|
removeFromPinned: Eliminar de fijados
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import Navbar from 'src/components/NavBar.vue';
|
import Navbar from 'src/components/NavBar.vue';
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<QLayout view="hHh LpR fFf">
|
<QLayout view="hHh LpR fFf" v-shortcut>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<RouterView></RouterView>
|
<RouterView></RouterView>
|
||||||
<QFooter v-if="$q.platform.is.mobile"></QFooter>
|
<QFooter v-if="$q.platform.is.mobile"></QFooter>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Dark, Quasar } from 'quasar';
|
import { Dark, Quasar } from 'quasar';
|
||||||
import { computed, onMounted } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { localeEquivalence } from 'src/i18n/index';
|
import { localeEquivalence } from 'src/i18n/index';
|
||||||
import quasarLang from 'src/utils/quasarLang';
|
import quasarLang from 'src/utils/quasarLang';
|
||||||
import { langs } from 'src/boot/defaults/constants.js';
|
|
||||||
|
|
||||||
const { t, locale } = useI18n();
|
const { t, locale } = useI18n();
|
||||||
|
|
||||||
const userLocale = computed({
|
const userLocale = computed({
|
||||||
get() {
|
get() {
|
||||||
return locale.value;
|
return locale.value;
|
||||||
|
|
@ -28,6 +28,7 @@ const darkMode = computed({
|
||||||
Dark.set(value);
|
Dark.set(value);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
const langs = ['en', 'es'];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@ import { useI18n } from 'vue-i18n';
|
||||||
import { ref, computed } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import VnTable from 'components/VnTable/VnTable.vue';
|
import VnTable from 'components/VnTable/VnTable.vue';
|
||||||
import VnSection from 'src/components/common/VnSection.vue';
|
import VnSection from 'src/components/common/VnSection.vue';
|
||||||
import exprBuilder from './Alias/AliasExprBuilder';
|
|
||||||
|
|
||||||
const tableRef = ref();
|
const tableRef = ref();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
@ -32,6 +31,15 @@ const columns = computed(() => [
|
||||||
create: true,
|
create: true,
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
const exprBuilder = (param, value) => {
|
||||||
|
switch (param) {
|
||||||
|
case 'search':
|
||||||
|
return /^\d+$/.test(value)
|
||||||
|
? { id: value }
|
||||||
|
: { alias: { like: `%${value}%` } };
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
export default (param, value) => {
|
|
||||||
switch (param) {
|
|
||||||
case 'search':
|
|
||||||
return /^\d+$/.test(value)
|
|
||||||
? { id: value }
|
|
||||||
: {
|
|
||||||
or: [
|
|
||||||
{ name: { like: `%${value}%` } },
|
|
||||||
{ nickname: { like: `%${value}%` } },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
case 'name':
|
|
||||||
case 'nickname':
|
|
||||||
return { [param]: { like: `%${value}%` } };
|
|
||||||
case 'roleFk':
|
|
||||||
return { [param]: value };
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -4,16 +4,15 @@ import { computed, ref } from 'vue';
|
||||||
import VnTable from 'components/VnTable/VnTable.vue';
|
import VnTable from 'components/VnTable/VnTable.vue';
|
||||||
import AccountSummary from './Card/AccountSummary.vue';
|
import AccountSummary from './Card/AccountSummary.vue';
|
||||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||||
import exprBuilder from './AccountExprBuilder.js';
|
|
||||||
import filter from './Card/AccountFilter.js';
|
|
||||||
import VnSection from 'src/components/common/VnSection.vue';
|
import VnSection from 'src/components/common/VnSection.vue';
|
||||||
import FetchData from 'src/components/FetchData.vue';
|
import FetchData from 'src/components/FetchData.vue';
|
||||||
import VnInputPassword from 'src/components/common/VnInputPassword.vue';
|
import VnInputPassword from 'src/components/common/VnInputPassword.vue';
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { viewSummary } = useSummaryDialog();
|
const { viewSummary } = useSummaryDialog();
|
||||||
const tableRef = ref();
|
const filter = {
|
||||||
|
include: { relation: 'role', scope: { fields: ['id', 'name'] } },
|
||||||
|
};
|
||||||
const dataKey = 'AccountList';
|
const dataKey = 'AccountList';
|
||||||
const roles = ref([]);
|
const roles = ref([]);
|
||||||
const columns = computed(() => [
|
const columns = computed(() => [
|
||||||
|
|
@ -118,6 +117,25 @@ const columns = computed(() => [
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
function exprBuilder(param, value) {
|
||||||
|
switch (param) {
|
||||||
|
case 'search':
|
||||||
|
return /^\d+$/.test(value)
|
||||||
|
? { id: value }
|
||||||
|
: {
|
||||||
|
or: [
|
||||||
|
{ name: { like: `%${value}%` } },
|
||||||
|
{ nickname: { like: `%${value}%` } },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
case 'name':
|
||||||
|
case 'nickname':
|
||||||
|
return { [param]: { like: `%${value}%` } };
|
||||||
|
case 'roleFk':
|
||||||
|
return { [param]: value };
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<FetchData url="VnRoles" @on-fetch="(data) => (roles = data)" auto-load />
|
<FetchData url="VnRoles" @on-fetch="(data) => (roles = data)" auto-load />
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
export default (param, value) => {
|
|
||||||
switch (param) {
|
|
||||||
case 'search':
|
|
||||||
return /^\d+$/.test(value)
|
|
||||||
? { id: value }
|
|
||||||
: { alias: { like: `%${value}%` } };
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,13 +1,21 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
import VnCardBeta from 'components/common/VnCardBeta.vue';
|
import VnCardBeta from 'components/common/VnCardBeta.vue';
|
||||||
import AliasDescriptor from './AliasDescriptor.vue';
|
import AliasDescriptor from './AliasDescriptor.vue';
|
||||||
|
const { t } = useI18n();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VnCardBeta
|
<VnCardBeta
|
||||||
data-key="Alias"
|
data-key="Alias"
|
||||||
url="MailAliases"
|
base-url="MailAliases"
|
||||||
:descriptor="AliasDescriptor"
|
:descriptor="AliasDescriptor"
|
||||||
search-data-key="AccountAliasList"
|
search-data-key="AccountAliasList"
|
||||||
|
:searchbar-props="{
|
||||||
|
url: 'MailAliases',
|
||||||
|
info: t('mailAlias.searchInfo'),
|
||||||
|
label: t('mailAlias.search'),
|
||||||
|
searchUrl: 'table',
|
||||||
|
}"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ import { useQuasar } from 'quasar';
|
||||||
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
||||||
import VnLv from 'src/components/ui/VnLv.vue';
|
import VnLv from 'src/components/ui/VnLv.vue';
|
||||||
|
|
||||||
|
import useCardDescription from 'src/composables/useCardDescription';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import useNotify from 'src/composables/useNotify.js';
|
import useNotify from 'src/composables/useNotify.js';
|
||||||
|
|
||||||
|
|
@ -28,6 +29,9 @@ const entityId = computed(() => {
|
||||||
return $props.id || route.params.id;
|
return $props.id || route.params.id;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const data = ref(useCardDescription());
|
||||||
|
const setData = (entity) => (data.value = useCardDescription(entity.alias, entity.id));
|
||||||
|
|
||||||
const removeAlias = () => {
|
const removeAlias = () => {
|
||||||
quasar
|
quasar
|
||||||
.dialog({
|
.dialog({
|
||||||
|
|
@ -51,8 +55,11 @@ const removeAlias = () => {
|
||||||
<CardDescriptor
|
<CardDescriptor
|
||||||
ref="descriptor"
|
ref="descriptor"
|
||||||
:url="`MailAliases/${entityId}`"
|
:url="`MailAliases/${entityId}`"
|
||||||
data-key="Alias"
|
module="Alias"
|
||||||
title="alias"
|
@on-fetch="setData"
|
||||||
|
data-key="aliasData"
|
||||||
|
:title="data.title"
|
||||||
|
:subtitle="data.subtitle"
|
||||||
>
|
>
|
||||||
<template #menu>
|
<template #menu>
|
||||||
<QItem v-ripple clickable @click="removeAlias()">
|
<QItem v-ripple clickable @click="removeAlias()">
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,13 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
import CardSummary from 'components/ui/CardSummary.vue';
|
import CardSummary from 'components/ui/CardSummary.vue';
|
||||||
import VnLv from 'src/components/ui/VnLv.vue';
|
import VnLv from 'src/components/ui/VnLv.vue';
|
||||||
|
|
||||||
|
import { useArrayData } from 'src/composables/useArrayData';
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
|
@ -16,15 +18,20 @@ const $props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const { store } = useArrayData('Alias');
|
||||||
|
const alias = ref(store.data);
|
||||||
const entityId = computed(() => $props.id || route.params.id);
|
const entityId = computed(() => $props.id || route.params.id);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<CardSummary ref="summary" :url="`MailAliases/${entityId}`" data-key="Alias">
|
<CardSummary
|
||||||
<template #header="{ entity: alias }">
|
ref="summary"
|
||||||
{{ alias.id }} - {{ alias.alias }}
|
:url="`MailAliases/${entityId}`"
|
||||||
</template>
|
@on-fetch="(data) => (alias = data)"
|
||||||
<template #body="{ entity: alias }">
|
data-key="MailAliasesSummary"
|
||||||
|
>
|
||||||
|
<template #header> {{ alias.id }} - {{ alias.alias }} </template>
|
||||||
|
<template #body>
|
||||||
<QCard class="vn-one">
|
<QCard class="vn-one">
|
||||||
<QCardSection class="q-pa-none">
|
<QCardSection class="q-pa-none">
|
||||||
<router-link
|
<router-link
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,46 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
import VnSelectEnum from 'src/components/common/VnSelectEnum.vue';
|
import VnSelectEnum from 'src/components/common/VnSelectEnum.vue';
|
||||||
import FormModel from 'components/FormModel.vue';
|
import FormModel from 'components/FormModel.vue';
|
||||||
import VnInput from 'src/components/common/VnInput.vue';
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
import { ref, watch } from 'vue';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const { t } = useI18n();
|
||||||
|
const formModelRef = ref(null);
|
||||||
|
|
||||||
|
const accountFilter = {
|
||||||
|
where: { id: route.params.id },
|
||||||
|
fields: ['id', 'email', 'nickname', 'name', 'accountStateFk', 'packages', 'pickup'],
|
||||||
|
include: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => route.params.id,
|
||||||
|
() => formModelRef.value.reset()
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<FormModel :url-update="`VnUsers/${$route.params.id}/update-user`" model="Account">
|
<FormModel
|
||||||
|
ref="formModelRef"
|
||||||
|
url="VnUsers/preview"
|
||||||
|
:url-update="`VnUsers/${route.params.id}/update-user`"
|
||||||
|
:filter="accountFilter"
|
||||||
|
model="Accounts"
|
||||||
|
auto-load
|
||||||
|
@on-data-saved="formModelRef.fetch()"
|
||||||
|
>
|
||||||
<template #form="{ data }">
|
<template #form="{ data }">
|
||||||
<div class="q-gutter-y-sm">
|
<div class="q-gutter-y-sm">
|
||||||
<VnInput v-model="data.name" :label="$t('account.card.nickname')" />
|
<VnInput v-model="data.name" :label="t('account.card.nickname')" />
|
||||||
<VnInput v-model="data.nickname" :label="$t('account.card.alias')" />
|
<VnInput v-model="data.nickname" :label="t('account.card.alias')" />
|
||||||
<VnInput v-model="data.email" :label="$t('globals.params.email')" />
|
<VnInput v-model="data.email" :label="t('globals.params.email')" />
|
||||||
<VnSelect
|
<VnSelect
|
||||||
url="Languages"
|
url="Languages"
|
||||||
v-model="data.lang"
|
v-model="data.lang"
|
||||||
:label="$t('account.card.lang')"
|
:label="t('account.card.lang')"
|
||||||
option-value="code"
|
option-value="code"
|
||||||
option-label="code"
|
option-label="code"
|
||||||
/>
|
/>
|
||||||
|
|
@ -23,7 +49,7 @@ import VnInput from 'src/components/common/VnInput.vue';
|
||||||
table="user"
|
table="user"
|
||||||
column="twoFactor"
|
column="twoFactor"
|
||||||
v-model="data.twoFactor"
|
v-model="data.twoFactor"
|
||||||
:label="$t('account.card.twoFactor')"
|
:label="t('account.card.twoFactor')"
|
||||||
option-value="code"
|
option-value="code"
|
||||||
option-label="code"
|
option-label="code"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,8 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import VnCardBeta from 'components/common/VnCardBeta.vue';
|
import VnCardBeta from 'components/common/VnCardBeta.vue';
|
||||||
import AccountDescriptor from './AccountDescriptor.vue';
|
import AccountDescriptor from './AccountDescriptor.vue';
|
||||||
import filter from './AccountFilter.js';
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VnCardBeta
|
<VnCardBeta data-key="AccountId" :descriptor="AccountDescriptor" />
|
||||||
url="VnUsers/preview"
|
|
||||||
:id-in-where="true"
|
|
||||||
data-key="Account"
|
|
||||||
:descriptor="AccountDescriptor"
|
|
||||||
:filter="filter"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,36 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted } from 'vue';
|
import { ref, computed, onMounted } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
||||||
import VnLv from 'src/components/ui/VnLv.vue';
|
import VnLv from 'src/components/ui/VnLv.vue';
|
||||||
|
import useCardDescription from 'src/composables/useCardDescription';
|
||||||
import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
|
import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
|
||||||
import VnImg from 'src/components/ui/VnImg.vue';
|
import VnImg from 'src/components/ui/VnImg.vue';
|
||||||
import filter from './AccountFilter.js';
|
|
||||||
import useHasAccount from 'src/composables/useHasAccount.js';
|
import useHasAccount from 'src/composables/useHasAccount.js';
|
||||||
|
|
||||||
const $props = defineProps({ id: { type: Number, default: null } });
|
const $props = defineProps({
|
||||||
|
id: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const entityId = computed(() => $props.id || route.params.id);
|
const { t } = useI18n();
|
||||||
|
const entityId = computed(() => {
|
||||||
|
return $props.id || route.params.id;
|
||||||
|
});
|
||||||
|
const data = ref(useCardDescription());
|
||||||
const hasAccount = ref();
|
const hasAccount = ref();
|
||||||
|
const setData = (entity) => (data.value = useCardDescription(entity.nickname, entity.id));
|
||||||
|
|
||||||
|
const filter = {
|
||||||
|
where: { id: entityId },
|
||||||
|
fields: ['id', 'nickname', 'name', 'role'],
|
||||||
|
include: { relation: 'role', scope: { fields: ['id', 'name'] } },
|
||||||
|
};
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
hasAccount.value = await useHasAccount(entityId.value);
|
hasAccount.value = await useHasAccount(entityId.value);
|
||||||
|
|
@ -23,9 +41,12 @@ onMounted(async () => {
|
||||||
<CardDescriptor
|
<CardDescriptor
|
||||||
ref="descriptor"
|
ref="descriptor"
|
||||||
:url="`VnUsers/preview`"
|
:url="`VnUsers/preview`"
|
||||||
:filter="{ ...filter, where: { id: entityId } }"
|
:filter="filter"
|
||||||
data-key="Account"
|
module="Account"
|
||||||
title="nickname"
|
@on-fetch="setData"
|
||||||
|
data-key="AccountId"
|
||||||
|
:title="data.title"
|
||||||
|
:subtitle="data.subtitle"
|
||||||
>
|
>
|
||||||
<template #menu>
|
<template #menu>
|
||||||
<AccountDescriptorMenu :entity-id="entityId" />
|
<AccountDescriptorMenu :entity-id="entityId" />
|
||||||
|
|
@ -41,7 +62,7 @@ onMounted(async () => {
|
||||||
<QIcon name="vn:claims" />
|
<QIcon name="vn:claims" />
|
||||||
</div>
|
</div>
|
||||||
<div class="text-grey-5" style="opacity: 0.4">
|
<div class="text-grey-5" style="opacity: 0.4">
|
||||||
{{ $t('account.imageNotFound') }}
|
{{ t('account.imageNotFound') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -49,8 +70,8 @@ onMounted(async () => {
|
||||||
</VnImg>
|
</VnImg>
|
||||||
</template>
|
</template>
|
||||||
<template #body="{ entity }">
|
<template #body="{ entity }">
|
||||||
<VnLv :label="$t('account.card.nickname')" :value="entity.name" />
|
<VnLv :label="t('account.card.nickname')" :value="entity.name" />
|
||||||
<VnLv :label="$t('account.card.role')" :value="entity.role?.name" />
|
<VnLv :label="t('account.card.role')" :value="entity.role.name" />
|
||||||
</template>
|
</template>
|
||||||
<template #actions="{ entity }">
|
<template #actions="{ entity }">
|
||||||
<QCardActions class="q-gutter-x-md">
|
<QCardActions class="q-gutter-x-md">
|
||||||
|
|
@ -63,7 +84,7 @@ onMounted(async () => {
|
||||||
size="sm"
|
size="sm"
|
||||||
class="fill-icon"
|
class="fill-icon"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ $t('account.card.deactivated') }}</QTooltip>
|
<QTooltip>{{ t('account.card.deactivated') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
<QIcon
|
<QIcon
|
||||||
color="primary"
|
color="primary"
|
||||||
|
|
@ -74,7 +95,7 @@ onMounted(async () => {
|
||||||
size="sm"
|
size="sm"
|
||||||
class="fill-icon"
|
class="fill-icon"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ $t('account.card.enabled') }}</QTooltip>
|
<QTooltip>{{ t('account.card.enabled') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
</QCardActions>
|
</QCardActions>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,6 @@ import VnInputPassword from 'src/components/common/VnInputPassword.vue';
|
||||||
import VnChangePassword from 'src/components/common/VnChangePassword.vue';
|
import VnChangePassword from 'src/components/common/VnChangePassword.vue';
|
||||||
import { useQuasar } from 'quasar';
|
import { useQuasar } from 'quasar';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import VnCheckbox from 'src/components/common/VnCheckbox.vue';
|
|
||||||
|
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
hasAccount: {
|
hasAccount: {
|
||||||
|
|
@ -30,7 +29,7 @@ const router = useRouter();
|
||||||
const state = useState();
|
const state = useState();
|
||||||
const user = state.getUser();
|
const user = state.getUser();
|
||||||
const { notify } = useQuasar();
|
const { notify } = useQuasar();
|
||||||
const account = computed(() => useArrayData('Account').store.data[0]);
|
const account = computed(() => useArrayData('AccountId').store.data[0]);
|
||||||
account.value.hasAccount = hasAccount.value;
|
account.value.hasAccount = hasAccount.value;
|
||||||
const entityId = computed(() => +route.params.id);
|
const entityId = computed(() => +route.params.id);
|
||||||
const hasitManagementAccess = ref();
|
const hasitManagementAccess = ref();
|
||||||
|
|
@ -125,14 +124,18 @@ onMounted(() => {
|
||||||
:promise="sync"
|
:promise="sync"
|
||||||
>
|
>
|
||||||
<template #customHTML>
|
<template #customHTML>
|
||||||
<VnCheckbox
|
{{ shouldSyncPassword }}
|
||||||
v-model="shouldSyncPassword"
|
<QCheckbox
|
||||||
:label="t('account.card.actions.sync.checkbox')"
|
:label="t('account.card.actions.sync.checkbox')"
|
||||||
:info="t('account.card.actions.sync.tooltip')"
|
v-model="shouldSyncPassword"
|
||||||
|
class="full-width"
|
||||||
clearable
|
clearable
|
||||||
clear-icon="close"
|
clear-icon="close"
|
||||||
color="primary"
|
>
|
||||||
/>
|
<QIcon style="padding-left: 10px" color="primary" name="info" size="sm">
|
||||||
|
<QTooltip>{{ t('account.card.actions.sync.tooltip') }}</QTooltip>
|
||||||
|
</QIcon></QCheckbox
|
||||||
|
>
|
||||||
<VnInputPassword
|
<VnInputPassword
|
||||||
v-if="shouldSyncPassword"
|
v-if="shouldSyncPassword"
|
||||||
:label="t('login.password')"
|
:label="t('login.password')"
|
||||||
|
|
@ -152,13 +155,13 @@ onMounted(() => {
|
||||||
openConfirmationModal(
|
openConfirmationModal(
|
||||||
t('account.card.actions.disableAccount.title'),
|
t('account.card.actions.disableAccount.title'),
|
||||||
t('account.card.actions.disableAccount.subtitle'),
|
t('account.card.actions.disableAccount.subtitle'),
|
||||||
() => deleteAccount(),
|
() => deleteAccount()
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<QItemSection>{{ t('globals.delete') }}</QItemSection>
|
<QItemSection>{{ t('globals.delete') }}</QItemSection>
|
||||||
</QItem>
|
</QItem>
|
||||||
<QItem v-if="hasSysadminAccess || isHimself" v-ripple clickable>
|
<QItem v-if="hasSysadminAccess" v-ripple clickable>
|
||||||
<QItemSection @click="onChangePass(isHimself)">
|
<QItemSection @click="onChangePass(isHimself)">
|
||||||
{{ isHimself ? t('globals.changePass') : t('globals.setPass') }}
|
{{ isHimself ? t('globals.changePass') : t('globals.setPass') }}
|
||||||
</QItemSection>
|
</QItemSection>
|
||||||
|
|
@ -171,7 +174,7 @@ onMounted(() => {
|
||||||
openConfirmationModal(
|
openConfirmationModal(
|
||||||
t('account.card.actions.enableAccount.title'),
|
t('account.card.actions.enableAccount.title'),
|
||||||
t('account.card.actions.enableAccount.subtitle'),
|
t('account.card.actions.enableAccount.subtitle'),
|
||||||
() => updateStatusAccount(true),
|
() => updateStatusAccount(true)
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
|
|
@ -185,7 +188,7 @@ onMounted(() => {
|
||||||
openConfirmationModal(
|
openConfirmationModal(
|
||||||
t('account.card.actions.disableAccount.title'),
|
t('account.card.actions.disableAccount.title'),
|
||||||
t('account.card.actions.disableAccount.subtitle'),
|
t('account.card.actions.disableAccount.subtitle'),
|
||||||
() => updateStatusAccount(false),
|
() => updateStatusAccount(false)
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
|
|
@ -200,7 +203,7 @@ onMounted(() => {
|
||||||
openConfirmationModal(
|
openConfirmationModal(
|
||||||
t('account.card.actions.activateUser.title'),
|
t('account.card.actions.activateUser.title'),
|
||||||
t('account.card.actions.activateUser.title'),
|
t('account.card.actions.activateUser.title'),
|
||||||
() => updateStatusUser(true),
|
() => updateStatusUser(true)
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
|
|
@ -214,7 +217,7 @@ onMounted(() => {
|
||||||
openConfirmationModal(
|
openConfirmationModal(
|
||||||
t('account.card.actions.deactivateUser.title'),
|
t('account.card.actions.deactivateUser.title'),
|
||||||
t('account.card.actions.deactivateUser.title'),
|
t('account.card.actions.deactivateUser.title'),
|
||||||
() => updateStatusUser(false),
|
() => updateStatusUser(false)
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
export default {
|
|
||||||
include: { relation: 'role', scope: { fields: ['id', 'name'] } },
|
|
||||||
};
|
|
||||||
|
|
@ -86,7 +86,7 @@ watch(
|
||||||
() => route.params.id,
|
() => route.params.id,
|
||||||
() => {
|
() => {
|
||||||
getAccountData();
|
getAccountData();
|
||||||
},
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
onMounted(async () => await getAccountData(false));
|
onMounted(async () => await getAccountData(false));
|
||||||
|
|
@ -130,8 +130,7 @@ onMounted(async () => await getAccountData(false));
|
||||||
openConfirmationModal(
|
openConfirmationModal(
|
||||||
t('User will be removed from alias'),
|
t('User will be removed from alias'),
|
||||||
t('¿Seguro que quieres continuar?'),
|
t('¿Seguro que quieres continuar?'),
|
||||||
() =>
|
() => deleteMailAlias(row, rows, rowIndex)
|
||||||
deleteMailAlias(row, rows, rowIndex),
|
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
|
|
@ -158,7 +157,7 @@ onMounted(async () => await getAccountData(false));
|
||||||
icon="add"
|
icon="add"
|
||||||
color="primary"
|
color="primary"
|
||||||
@click="openCreateMailAliasForm()"
|
@click="openCreateMailAliasForm()"
|
||||||
v-shortcut="'+'"
|
shortcut="+"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ t('warehouses.add') }}</QTooltip>
|
<QTooltip>{{ t('warehouses.add') }}</QTooltip>
|
||||||
</QBtn>
|
</QBtn>
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,58 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
import CardSummary from 'components/ui/CardSummary.vue';
|
import CardSummary from 'components/ui/CardSummary.vue';
|
||||||
import VnLv from 'src/components/ui/VnLv.vue';
|
import VnLv from 'src/components/ui/VnLv.vue';
|
||||||
import filter from './AccountFilter.js';
|
|
||||||
|
import { useArrayData } from 'src/composables/useArrayData';
|
||||||
import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
|
import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
|
||||||
|
|
||||||
const $props = defineProps({ id: { type: Number, default: 0 } });
|
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
id: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const { store } = useArrayData('Account');
|
||||||
|
const account = ref(store.data);
|
||||||
|
|
||||||
const entityId = computed(() => $props.id || route.params.id);
|
const entityId = computed(() => $props.id || route.params.id);
|
||||||
|
const filter = {
|
||||||
|
where: { id: entityId },
|
||||||
|
fields: ['id', 'nickname', 'name', 'role'],
|
||||||
|
include: { relation: 'role', scope: { fields: ['id', 'name'] } },
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<CardSummary
|
<CardSummary
|
||||||
data-key="Account"
|
data-key="AccountId"
|
||||||
ref="AccountSummary"
|
|
||||||
url="VnUsers/preview"
|
url="VnUsers/preview"
|
||||||
:filter="filter"
|
:filter="filter"
|
||||||
|
@on-fetch="(data) => (account = data)"
|
||||||
>
|
>
|
||||||
<template #header="{ entity }">{{ entity.id }} - {{ entity.nickname }}</template>
|
<template #header>{{ account.id }} - {{ account.nickname }}</template>
|
||||||
<template #menu>
|
<template #menu="">
|
||||||
<AccountDescriptorMenu :entity-id="entityId" />
|
<AccountDescriptorMenu :entity-id="entityId" />
|
||||||
</template>
|
</template>
|
||||||
<template #body="{ entity }">
|
<template #body>
|
||||||
<QCard class="vn-one">
|
<QCard class="vn-one">
|
||||||
<QCardSection class="q-pa-none">
|
<QCardSection class="q-pa-none">
|
||||||
<router-link
|
<router-link
|
||||||
:to="{ name: 'AccountBasicData', params: { id: entityId } }"
|
:to="{ name: 'AccountBasicData', params: { id: entityId } }"
|
||||||
class="header header-link"
|
class="header header-link"
|
||||||
>
|
>
|
||||||
{{ $t('globals.pageTitles.basicData') }}
|
{{ t('globals.pageTitles.basicData') }}
|
||||||
<QIcon name="open_in_new" />
|
<QIcon name="open_in_new" />
|
||||||
</router-link>
|
</router-link>
|
||||||
</QCardSection>
|
</QCardSection>
|
||||||
<VnLv :label="$t('account.card.nickname')" :value="entity.name" />
|
<VnLv :label="t('account.card.nickname')" :value="account.name" />
|
||||||
<VnLv :label="$t('account.card.role')" :value="entity.role?.name" />
|
<VnLv :label="t('account.card.role')" :value="account.role.name" />
|
||||||
</QCard>
|
</QCard>
|
||||||
</template>
|
</template>
|
||||||
</CardSummary>
|
</CardSummary>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@ import VnTable from 'components/VnTable/VnTable.vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||||
import RoleSummary from './Card/RoleSummary.vue';
|
import RoleSummary from './Card/RoleSummary.vue';
|
||||||
import exprBuilder from './RoleExprBuilder.js';
|
|
||||||
import VnSection from 'src/components/common/VnSection.vue';
|
import VnSection from 'src/components/common/VnSection.vue';
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
@ -67,7 +66,24 @@ const columns = computed(() => [
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
const exprBuilder = (param, value) => {
|
||||||
|
switch (param) {
|
||||||
|
case 'search':
|
||||||
|
return /^\d+$/.test(value)
|
||||||
|
? { id: value }
|
||||||
|
: {
|
||||||
|
or: [
|
||||||
|
{ name: { like: `%${value}%` } },
|
||||||
|
{ nickname: { like: `%${value}%` } },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
case 'name':
|
||||||
|
case 'description':
|
||||||
|
return { [param]: { like: `%${value}%` } };
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VnSection
|
<VnSection
|
||||||
:data-key="dataKey"
|
:data-key="dataKey"
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,24 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
import FormModel from 'components/FormModel.vue';
|
import FormModel from 'components/FormModel.vue';
|
||||||
import VnRow from 'components/ui/VnRow.vue';
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
import VnInput from 'src/components/common/VnInput.vue';
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
const route = useRoute();
|
||||||
|
const { t } = useI18n();
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<FormModel model="Role" auto-load>
|
<FormModel :url="`VnRoles/${route.params.id}`" model="VnRole" auto-load>
|
||||||
<template #form="{ data }">
|
<template #form="{ data }">
|
||||||
<VnRow>
|
<VnRow>
|
||||||
<VnInput v-model="data.name" :label="$t('globals.name')" />
|
<div class="col">
|
||||||
|
<VnInput v-model="data.name" :label="t('globals.name')" />
|
||||||
|
</div>
|
||||||
</VnRow>
|
</VnRow>
|
||||||
<VnRow>
|
<VnRow>
|
||||||
<VnInput v-model="data.description" :label="$t('role.description')" />
|
<div class="col">
|
||||||
|
<VnInput v-model="data.description" :label="t('role.description')" />
|
||||||
|
</div>
|
||||||
</VnRow>
|
</VnRow>
|
||||||
</template>
|
</template>
|
||||||
</FormModel>
|
</FormModel>
|
||||||
|
|
|
||||||
|
|
@ -3,10 +3,5 @@ import VnCardBeta from 'components/common/VnCardBeta.vue';
|
||||||
import RoleDescriptor from './RoleDescriptor.vue';
|
import RoleDescriptor from './RoleDescriptor.vue';
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<VnCardBeta
|
<VnCardBeta data-key="Role" :descriptor="RoleDescriptor" />
|
||||||
url="VnRoles"
|
|
||||||
data-key="Role"
|
|
||||||
:id-in-where="true"
|
|
||||||
:descriptor="RoleDescriptor"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
||||||
import VnLv from 'src/components/ui/VnLv.vue';
|
import VnLv from 'src/components/ui/VnLv.vue';
|
||||||
|
import useCardDescription from 'src/composables/useCardDescription';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import useNotify from 'src/composables/useNotify.js';
|
import useNotify from 'src/composables/useNotify.js';
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
|
|
@ -25,6 +26,11 @@ const { t } = useI18n();
|
||||||
const entityId = computed(() => {
|
const entityId = computed(() => {
|
||||||
return $props.id || route.params.id;
|
return $props.id || route.params.id;
|
||||||
});
|
});
|
||||||
|
const data = ref(useCardDescription());
|
||||||
|
const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id));
|
||||||
|
const filter = {
|
||||||
|
where: { id: entityId },
|
||||||
|
};
|
||||||
const removeRole = async () => {
|
const removeRole = async () => {
|
||||||
await axios.delete(`VnRoles/${entityId.value}`);
|
await axios.delete(`VnRoles/${entityId.value}`);
|
||||||
notify(t('Role removed'), 'positive');
|
notify(t('Role removed'), 'positive');
|
||||||
|
|
@ -33,9 +39,13 @@ const removeRole = async () => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<CardDescriptor
|
<CardDescriptor
|
||||||
url="VnRoles"
|
:url="`VnRoles/${entityId}`"
|
||||||
:filter="{ where: { id: entityId } }"
|
:filter="filter"
|
||||||
|
module="Role"
|
||||||
|
@on-fetch="setData"
|
||||||
data-key="Role"
|
data-key="Role"
|
||||||
|
:title="data.title"
|
||||||
|
:subtitle="data.subtitle"
|
||||||
:summary="$props.summary"
|
:summary="$props.summary"
|
||||||
>
|
>
|
||||||
<template #menu>
|
<template #menu>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import CardSummary from 'components/ui/CardSummary.vue';
|
import CardSummary from 'components/ui/CardSummary.vue';
|
||||||
import VnLv from 'src/components/ui/VnLv.vue';
|
import VnLv from 'src/components/ui/VnLv.vue';
|
||||||
|
import { useArrayData } from 'src/composables/useArrayData';
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
@ -15,18 +16,24 @@ const $props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const { store } = useArrayData('Role');
|
||||||
|
const role = ref(store.data);
|
||||||
const entityId = computed(() => $props.id || route.params.id);
|
const entityId = computed(() => $props.id || route.params.id);
|
||||||
|
const filter = {
|
||||||
|
where: { id: entityId },
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<CardSummary
|
<CardSummary
|
||||||
ref="summary"
|
ref="summary"
|
||||||
url="VnRoles"
|
:url="`VnRoles/${entityId}`"
|
||||||
:filter="{ where: { id: entityId } }"
|
:filter="filter"
|
||||||
|
@on-fetch="(data) => (role = data)"
|
||||||
data-key="Role"
|
data-key="Role"
|
||||||
>
|
>
|
||||||
<template #header="{ entity }"> {{ entity.id }} - {{ entity.name }} </template>
|
<template #header> {{ role.id }} - {{ role.name }} </template>
|
||||||
<template #body="{ entity }">
|
<template #body>
|
||||||
<QCard class="vn-one">
|
<QCard class="vn-one">
|
||||||
<QCardSection class="q-pa-none">
|
<QCardSection class="q-pa-none">
|
||||||
<a
|
<a
|
||||||
|
|
@ -37,9 +44,9 @@ const entityId = computed(() => $props.id || route.params.id);
|
||||||
<QIcon name="open_in_new" />
|
<QIcon name="open_in_new" />
|
||||||
</a>
|
</a>
|
||||||
</QCardSection>
|
</QCardSection>
|
||||||
<VnLv :label="t('role.id')" :value="entity.id" />
|
<VnLv :label="t('role.id')" :value="role.id" />
|
||||||
<VnLv :label="t('globals.name')" :value="entity.name" />
|
<VnLv :label="t('globals.name')" :value="role.name" />
|
||||||
<VnLv :label="t('role.description')" :value="entity.description" />
|
<VnLv :label="t('role.description')" :value="role.description" />
|
||||||
</QCard>
|
</QCard>
|
||||||
</template>
|
</template>
|
||||||
</CardSummary>
|
</CardSummary>
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue