6629-addressObservation #1011

Open
robert wants to merge 10 commits from 6629-addressObservation into dev
403 changed files with 8093 additions and 5294 deletions
Showing only changes of commit f922bcb750 - Show all commits

View File

@ -1,3 +1,251 @@
# Version 24.52 - 2024-01-07
### Added 🆕
- chore: refs #8197 remove console log by:alexm
- chore: refs #8197 replace name by:alexm
- chore: refs #8197 unnecessary file by:alexm
- feat: #8110 apply mixin in quasar components by:Javier Segarra
- feat(Account & AccountRole): refs #8197 add VnCardMain by:alexm
- feat: addDptoLink by:Jtubau
- feat: added restore ticket function in ticket descriptor menu by:Jon
- feat: add support service wip by:jorgep
- feat: focus menu searchbar by:jorgep
- feat: make additional data object by:jorgep
- feat: message to grant access by:jorgep
- feat: refs #6583 add default param by:jorgep
- feat: refs #6583 add destination opt filter by:jorgep
- feat: refs #6583 add icon by:jorgep
- feat: refs #6583 add locale by:jorgep
- feat: refs #7072 added test to computed fn total by:Jtubau
- feat: refs #7235 update invoice out global form to fetch config based on serial type by:jgallego
- feat: refs #7301 add exclude inventory supplier from list by:pablone
- feat: refs #7301 enhance VnDateBadge styling and improve ItemLastEntries component by:pablone
- feat: refs #7882 Added distribution point by:guillermo
- feat: refs #7882 Added longitude & latitude by:guillermo
- feat: refs #7936 add autocomplete on tab fn by:jorgep
- feat: refs #7936 add company filter by:jorgep
- feat: refs #7936 add currency check before fetching by:jorgep
- feat: refs #7936 add dueDated field by:jorgep
- feat: refs #7936 add number validation to VnInputNumber & new daysAgo filter in InvoiceInFilter by:jorgep
- feat: refs #7936 add optionCaption by:jorgep
- feat: refs #7936 add row click navigation to InvoiceInSerial by:jorgep
- feat: refs #7936 add unit tests by:jorgep
- feat: refs #7936 add useAccountShortToStandard composable by:jorgep
- feat: refs #7936 calculate exchange & update taxable base by:jorgep
- feat: refs #7936 enhance downloadFile function to support opening in a new tab by:jorgep
- feat: refs #7936 enhance getTotal fn & add unit tests by:jorgep
- feat: refs #7936 enhance vn-select by:jorgep
- feat: refs #7936 improve optionLabel logic in InvoiceInVat component for better handling of numeric values by:jorgep
- feat: refs #7936 limit decimal places by:jorgep
- feat: refs #7936 make fields required by:jorgep
- feat: refs #7936 show country code & isVies fields by:jorgep
- feat: refs #7936 show id & value by:jorgep
- feat: refs #7936 simplify optionLabel wip by:jorgep
- feat: refs #7936 update 'isVies' label to use global translation key by:jorgep
- feat: refs #7936 update option labels in InvoiceIn components for better clarity by:jorgep
- feat: refs #7936 use default invoice data by:jorgep
- feat: refs #8001 change request by:robert
- feat: refs #8001 ticketExpeditionGrafana by:robert
- feat: refs #8194 created VnSelectWorker component and use it in Lilium by:Jon
- feat: refs #8197 better leftMenu and VnCardMain improvements by:alexm
- feat: refs #8197 default leftMenu by:alexm
- feat: refs #8197 default sectionName by:alexm
- feat: refs #8197 keepData in VnSection by:alexm
- feat: refs #8197 vnTableFilter by:alexm
- feat: refs #8197 working rightMenu by:alexm
- feat: remove re-fetch when add element by:Javier Segarra
- feat: remove search after category by:Javier Segarra
- feat: requested changes in item module by:Jon
- feat: update quantity by:Javier Segarra
- feat(VnPaginate): refs #8197 hold data when change to Card by:alexm
### Changed 📦
- perf: #6896 REMOVE COMMENTS by:Javier Segarra
- perf: qFormMixin by:Javier Segarra
- perf: qFormMixin improvement by:Javier Segarra
- perf: refs #8194 select worker component by:Jon
- perf: refs #8197 perf by:alexm
- perf: remove comments by:Javier Segarra
- perf: remove unused variables (origin/warmfix_noUsedVars) by:Javier Segarra
- refactor: added again search emit by:Jon
- refactor: add useCau composable by:jorgep
- refactor: deleted log by:Jon
- refactor: deleted onUnmounted code by:Jon
- refactor: deleted useless hidden tag by:Jon
- refactor: deleted warnings and corrected itemTag by:Jon
- refactor: drop logic by:jorgep
- refactor: ignore params when searching by id on searchbar (origin/VnSearchbar-SearchRemoveParams) by:Jon
- refactor: log error by:Jon
- refactor: refs #7936 locale by:jorgep
- refactor: refs #7936 simplify getTotal fn by:jorgep
- refactor: refs #7936 update label capitalization and replace invoice type options by:jorgep
- refactor: refs #8194 deleted unnecessary label by:Jon
- refactor: refs #8194 modified select worker template by:Jon
- refactor: refs #8194 modified select worker to allow no one filter from monitor ticket by:Jon
- refactor: refs #8194 moved translation to the correct place by:Jon
- refactor: refs #8194 requested changes by:Jon
- refactor: refs #8194 structure changes in component and related files by:Jon
- refactor: refs #8197 adapt AccountAcls to VnCardMain by:alexm
- refactor: refs #8197 adapt AccountAlias by:alexm
- refactor: refs #8197 adapt Ticket to VnCardMain by:alexm
- refactor: refs #8197 backward compatible (8197-VnCardMain_backwardCompatibility) by:alexm
- refactor: refs #8197 rename VnSectionMain to VnModule and VnCardMain to VnSection by:alexm
- refactor: refs #8288 changed invoice out spanish translation by:provira
- refactor: use locale keys by:jorgep
- refactor: use teleport to avoid qdrawer overlapping by:Jon
- refactor: use VnSelectWorker by:Jon
### Fixed 🛠️
- fix: account by:carlossa
- fix: account create by:carlossa
- fix: accountList create by:carlossa
- fix(AccountList): use $refs by:alexm
- fix: add data-key by:alexm
- fix: addLocales by:Jtubau
- fix: dated field by:Jon
- fix: e2e by:jorgep
- fix: fix department filter by:carlossa
- fix: fixed translations by:Javier Segarra
- fix: fixed translations by:provira
- fix: get total from api by:Javier Segarra
- fix: handle non-object options by:jorgep
- fix: monitorPayMethodFilter by:carlossa
- fix: orderBy priority by:Javier Segarra
- fix: prevent null by:jorgep
- fix: redirection vnTable VnTableFilter by:alexm
- fix: refs #6389 fix filter trad by:carlossa
- fix: refs #6389 fix front, filters, itp by:carlossa
- fix: refs #6389 front add packing filter by:carlossa
- fix: refs #6389 front by:carlossa
- fix: refs #6389 front filters by:carlossa
- fix: refs #6389 ipt by:carlossa
- fix: refs #6389 packing by:carlossa
- fix: refs #6583 update checkbox for filtering by destination in TicketAdvanceFilter by:jorgep
- fix: refs #7031 add test e2e by:carlossa
- fix: refs #7031 fix zoneTest by:carlossa
- fix: refs #7301 unnecessary console logs from ItemLastEntries.vue by:pablone
- fix: refs #7936 changes by:jorgep
- fix: refs #7936 decimal places & locale by:jorgep
- fix: refs #7936 descriptor & dueday by:jorgep
- fix: refs #7936 exclude disabled els on tab by:jorgep
- fix: refs #7936 format tax calculation to two decimal places by:jorgep
- fix: refs #7936 improve error handling by:jorgep
- fix: refs #7936 redirection by:jorgep
- fix: refs #7936 rollback by:jorgep
- fix: refs #7936 serial by:jorgep
- fix: refs #7936 tabulation wip by:jorgep
- fix: refs #7936 test by:jorgep
- fix: refs #8114 clean by:carlossa
- fix: refs #8114 fix agencyList by:carlossa
- fix: refs #8114 fix lifeCycle hooks by:carlossa
- fix: refs #8114 fix pr by:carlossa
- fix: refs #8114 fix removeAddress by:carlossa
- fix: refs #8114 orderList by:carlossa
- fix: refs #8114 remove logs by:carlossa
- fix: refs #8197 mapKey (origin/8197-perf_vnTableInside, 8197-perf_vnTableInside) by:alexm
- fix: refs #8197 redirection (8197-perf_redirection) by:alexm
- fix: refs #8197 staticParams and redirect by:alexm
- fix: refs #8197 vnPaginate onFetch emit by:alexm
- fix: refs #8197 vnPaginate when change :id by:alexm
- fix: refs #8197 vnTableFilter in vnTable by:alexm
- fix: refs #8315 ticketBoxing test by:alexm
- fix: remove url by:carlossa
- fix: rollback by:jorgep
- fix: test by:jorgep
- fix(VnDmsList): refs #8197 add mapKey by:alexm
- revert: refs #8197 arrayData changes by:alexm
- test: refs #8197 fix e2e by:alexm
- test: refs #8315 fix claimDevelopment fixtures by:alexm
- test: refs #8315 fix clientList by:alexm
- test: refs #8315 fix VnSelect in e2e by:alexm
# Version 24.50 - 2024-12-10
### Added 🆕
- feat: add reportFileName option by:Javier Segarra
- feat: all clients just with global series by:jgallego
- feat: improve Merge branch 'test' into dev by:Javier Segarra
- feat: manual invoice in two lines by:jgallego
- feat: manualInvoice with address by:jgallego
- feat: randomize functions and example by:Javier Segarra
- feat: refs #6999 added search when user tabs on a filter with value by:Jon
- feat: refs #6999 added tab to search in VnTable filter by:Jon
- feat: refs #7346 #7346 improve form by:Javier Segarra
- feat: refs #7346 address ordered by:jgallego
- feat: refs #7346 radioButton by:jgallego
- feat: refs #7346 style radioButton by:jgallego
- feat: refs #7346 traducciones en cammelCase (7346-manualInvoice) by:jgallego
- feat: refs #8038 added new functionality in VnSelect and refactor styles by:Jon
- feat: refs #8061 #8061 updates by:Javier Segarra
- feat: refs #8087 reactive data by:jorgep
- feat: refs #8087 refs#8087 Redadas en travel by:Carlos Andrés
- feat: refs #8138 add component ticket problems by:pablone
- feat: refs #8163 add max length and more tests by:wbuezas
- feat: refs #8163 add prop by:wbuezas
- feat: refs #8163 add VnInput insert functionality and e2e test by:wbuezas
- feat: refs #8163 limit with maxLength by:Javier Segarra
- feat: refs #8163 maxLength SupplierFD account by:Javier Segarra
- feat: refs #8163 maxLengthVnInput by:Javier Segarra
- feat: refs #8163 use VnAccountNumber in VnAccountNumber by:Javier Segarra
- feat: refs #8166 show notification by:jorgep
### Changed 📦
- feat: refs #8038 added new functionality in VnSelect and refactor styles by:Jon
- perf: add dataCy by:Javier Segarra
- perf: refs #7346 #7346 Imrpove interface dialog by:Javier Segarra
- perf: refs #7346 #7346 use v-show instead v-if by:Javier Segarra
- perf: refs #8036 currentFilter by:alexm
- perf: refs #8061 filter autonomy by:Javier Segarra
- perf: refs #8061 solve conflicts and random posCode it by:Javier Segarra
- perf: refs #8061 use opts from VnSelect by:Javier Segarra
- perf: refs #8163 #8061 createNewPostCodeForm by:Javier Segarra
- perf: remove console by:Javier Segarra
- perf: remove timeout by:Javier Segarra
- perf: test command fillInForm by:Javier Segarra
- refactor: refs #8162 remove comment by:wbuezas
- refactor: remove unnecesary things by:wbuezas
### Fixed 🛠️
- fix: #8016 fetching data by:Javier Segarra
- fix: icons by:jgallego
- fix: refs #7229 download file by:jorgep
- fix: refs #7229 remove catch by:jorgep
- fix: refs #7229 set url by:jorgep
- fix: refs #7229 test by:jorgep
- fix: refs #7229 url by:jorgep
- fix: refs #7229 url + test by:jorgep
- fix: refs #7304 7304 clean warning by:carlossa
- fix: refs #7304 fix list by:carlossa
- fix: refs #7304 fix warning by:carlossa
- fix: refs #7346 traslations by:jgallego
- fix: refs #7529 add save by:carlossa
- fix: refs #7529 fix e2e by:carlossa
- fix: refs #7529 fix front by:carlossa
- fix: refs #7529 fix scss by:carlossa
- fix: refs #7529 fix te2e by:carlossa
- fix: refs #7529 fix workerPit e2e by:carlossa
- fix: refs #7529 front by:carlossa
- fix: refs #8036 apply exprBuilder after save filters by:alexm
- fix: refs #8036 only add where when required by:alexm
- fix: refs #8038 solve conflicts by:Jon
- fix: refs #8061 improve code dependencies (origin/8061_improve_newCP) by:Javier Segarra
- fix: refs #8138 move component from ui folder by:pablone
- fix: refs #8138 sme minor issues by:pablone
- fix: refs #8163 #8061 createNewPostCodeForm by:Javier Segarra
- fix: refs #8163 minor problem when keypress by:Javier Segarra
- fix: refs #8166 show zone error by:jorgep
- fix: removed selectedClient by:jgallego
- refs #7529 fix workerPit by:carlossa
- revert: refs #8061 test #8061 updates by:Javier Segarra
- test: fix own test by:Javier Segarra
- test: refs #8162 #8162 fix TicketList spec by:Javier Segarra
# Version 24.48 - 2024-11-25
### Added 🆕

6
Jenkinsfile vendored
View File

@ -4,7 +4,8 @@ def PROTECTED_BRANCH
def BRANCH_ENV = [
test: 'test',
master: 'production'
master: 'production',
beta: 'production'
]
node {
@ -15,7 +16,8 @@ node {
PROTECTED_BRANCH = [
'dev',
'test',
'master'
'master',
'beta'
].contains(env.BRANCH_NAME)
// https://www.jenkins.io/doc/book/pipeline/jenkinsfile/#using-environment-variables

View File

@ -11,6 +11,7 @@ module.exports = defineConfig({
screenshotsFolder: 'test/cypress/screenshots',
supportFile: 'test/cypress/support/index.js',
videosFolder: 'test/cypress/videos',
downloadsFolder: 'test/cypress/downloads',
video: false,
specPattern: 'test/cypress/integration/**/*.spec.js',
experimentalRunAllSpecs: true,

View File

@ -1,6 +1,6 @@
{
"name": "salix-front",
"version": "24.50.0",
"version": "25.04.0",
"description": "Salix frontend",
"productName": "Salix",
"author": "Verdnatura",
@ -25,6 +25,7 @@
"axios": "^1.4.0",
"chromium": "^3.0.3",
"croppie": "^2.6.5",
"moment": "^2.30.1",
"pinia": "^2.1.3",
"quasar": "^2.14.5",
"validator": "^13.9.0",

View File

@ -20,6 +20,9 @@ dependencies:
croppie:
specifier: ^2.6.5
version: 2.6.5
moment:
specifier: ^2.30.1
version: 2.30.1
pinia:
specifier: ^2.1.3
version: 2.1.7(typescript@5.5.4)(vue@3.4.19)
@ -832,8 +835,8 @@ packages:
vue-i18n:
optional: true
dependencies:
'@intlify/message-compiler': 10.0.0
'@intlify/shared': 10.0.0
'@intlify/message-compiler': 11.0.0-rc.1
'@intlify/shared': 11.0.0-rc.1
jsonc-eslint-parser: 1.4.1
source-map: 0.6.1
vue-i18n: 9.9.1(vue@3.4.19)
@ -847,11 +850,11 @@ packages:
'@intlify/message-compiler': 9.9.1
'@intlify/shared': 9.9.1
/@intlify/message-compiler@10.0.0:
resolution: {integrity: sha512-OcaWc63NC/9p1cMdgoNKBj4d61BH8sUW1Hfs6YijTd9656ZR4rNqXAlRnBrfS5ABq0vjQjpa8VnyvH9hK49yBw==}
/@intlify/message-compiler@11.0.0-rc.1:
resolution: {integrity: sha512-TGw2uBfuTFTegZf/BHtUQBEKxl7Q/dVGLoqRIdw8lFsp9g/53sYn5iD+0HxIzdYjbWL6BTJMXCPUHp9PxDTRPw==}
engines: {node: '>= 16'}
dependencies:
'@intlify/shared': 10.0.0
'@intlify/shared': 11.0.0-rc.1
source-map-js: 1.0.2
dev: true
@ -862,8 +865,8 @@ packages:
'@intlify/shared': 9.9.1
source-map-js: 1.0.2
/@intlify/shared@10.0.0:
resolution: {integrity: sha512-6ngLfI7DOTew2dcF9WMJx+NnMWghMBhIiHbGg+wRvngpzD5KZJZiJVuzMsUQE1a5YebEmtpTEfUrDp/NqVGdiw==}
/@intlify/shared@11.0.0-rc.1:
resolution: {integrity: sha512-8tR1xe7ZEbkabTuE/tNhzpolygUn9OaYp9yuYAF4MgDNZg06C3Qny80bes2/e9/Wm3aVkPUlCw6WgU7mQd0yEg==}
engines: {node: '>= 16'}
dev: true
@ -887,7 +890,7 @@ packages:
optional: true
dependencies:
'@intlify/bundle-utils': 4.0.0(vue-i18n@9.9.1)
'@intlify/shared': 10.0.0
'@intlify/shared': 11.0.0-rc.1
'@rollup/pluginutils': 4.2.1
'@vue/compiler-sfc': 3.4.19
debug: 4.3.4(supports-color@8.1.1)
@ -4960,6 +4963,10 @@ packages:
uuid: 8.3.2
dev: true
/moment@2.30.1:
resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
dev: false
/ms@2.0.0:
resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}

View File

@ -1,4 +1,3 @@
import { Notify } from 'quasar';
import { onRequest, onResponseError } from 'src/boot/axios';
import { describe, expect, it, vi } from 'vitest';
@ -27,6 +26,7 @@ describe('Axios boot', () => {
expect(resultConfig).toEqual(
expect.objectContaining({
headers: {
'Accept-Language': 'en-US',
Authorization: 'DEFAULT_TOKEN',
},
})

View File

@ -3,12 +3,12 @@ import { useSession } from 'src/composables/useSession';
import { Router } from 'src/router';
import useNotify from 'src/composables/useNotify.js';
import { useStateQueryStore } from 'src/stores/useStateQueryStore';
import { i18n } from 'src/boot/i18n';
const session = useSession();
const { notify } = useNotify();
const stateQuery = useStateQueryStore();
const baseUrl = '/api/';
axios.defaults.baseURL = baseUrl;
const axiosNoError = axios.create({ baseURL: baseUrl });
@ -16,6 +16,7 @@ const onRequest = (config) => {
const token = session.getToken();
if (token.length && !config.headers.Authorization) {
config.headers.Authorization = token;
config.headers['Accept-Language'] = i18n.global.locale.value;
}
stateQuery.add(config);
return config;

View File

@ -1,9 +1,11 @@
import { boot } from 'quasar/wrappers';
import { createI18n } from 'vue-i18n';
import messages from 'src/i18n';
import { useState } from 'src/composables/useState';
const user = useState().getUser();
const i18n = createI18n({
locale: navigator.language || navigator.userLanguage,
locale: user.value.lang || navigator.language || navigator.userLanguage,
fallbackLocale: 'en',
globalInjection: true,
messages,

View File

@ -0,0 +1,36 @@
import routes from 'src/router/modules';
import { useRouter } from 'vue-router';
let isNotified = false;
export default {
created: function () {
const router = useRouter();
const keyBindingMap = routes
.filter((route) => route.meta.keyBinding)
.reduce((map, route) => {
map['Key' + route.meta.keyBinding.toUpperCase()] = route.path;
return map;
}, {});
const handleKeyDown = (event) => {
const { ctrlKey, altKey, code } = event;
if (ctrlKey && altKey && keyBindingMap[code] && !isNotified) {
event.preventDefault();
router.push(keyBindingMap[code]);
isNotified = true;
}
};
const handleKeyUp = (event) => {
const { ctrlKey, altKey } = event;
if (!ctrlKey || !altKey) {
isNotified = false;
}
};
window.addEventListener('keydown', handleKeyDown);
window.addEventListener('keyup', handleKeyUp);
},
};

View File

@ -1,30 +1,51 @@
import { getCurrentInstance } from 'vue';
function focusFirstInput(input) {
input.focus();
}
export default {
mounted: function () {
const vm = getCurrentInstance();
if (vm.type.name === 'QForm') {
if (!['searchbarForm', 'filterPanelForm'].includes(this.$el?.id)) {
// TODO: AUTOFOCUS IS NOT FOCUSING
const that = this;
this.$el.addEventListener('keyup', function (evt) {
if (evt.key === 'Enter') {
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();
}
});
const that = this;
const form = document.querySelector('.q-form#formModel');
if (!form) return;
try {
const inputsFormCard = form.querySelectorAll(
`input:not([disabled]):not([type="checkbox"])`
);
if (inputsFormCard.length) {
focusFirstInput(inputsFormCard[0]);
}
const textareas = document.querySelectorAll(
'textarea:not([disabled]), [contenteditable]:not([disabled])'
);
if (textareas.length) {
focusFirstInput(textareas[textareas.length - 1]);
}
const inputs = document.querySelectorAll(
'form#formModel input:not([disabled]):not([type="checkbox"])'
);
const input = inputs[0];
if (!input) return;
focusFirstInput(input);
} catch (error) {
console.error(error);
}
form.addEventListener('keyup', function (evt) {
if (evt.key === 'Enter') {
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();
}
});
},
};

View File

@ -1,15 +1,18 @@
import axios from 'axios';
import { boot } from 'quasar/wrappers';
import qFormMixin from './qformMixin';
import keyShortcut from './keyShortcut';
import useNotify from 'src/composables/useNotify.js';
import { CanceledError } from 'axios';
const { notify } = useNotify();
import { QForm } from 'quasar';
import { QLayout } from 'quasar';
import mainShortcutMixin from './mainShortcutMixin';
import { useCau } from 'src/composables/useCau';
export default boot(({ app }) => {
app.mixin(qFormMixin);
QForm.mixins = [qFormMixin];
QLayout.mixins = [mainShortcutMixin];
app.directive('shortcut', keyShortcut);
app.config.errorHandler = (error) => {
app.config.errorHandler = async (error) => {
let message;
const response = error.response;
const responseData = response?.data;
@ -40,12 +43,12 @@ export default boot(({ app }) => {
}
console.error(error);
if (error instanceof CanceledError) {
if (error instanceof axios.CanceledError) {
const env = process.env.NODE_ENV;
if (env && env !== 'development') return;
message = 'Duplicate request';
}
notify(message ?? 'globals.error', 'negative', 'error');
await useCau(response, message);
};
});

View File

@ -40,6 +40,7 @@ const onDataSaved = (...args) => {
url-create="towns"
model="city"
@on-data-saved="onDataSaved"
data-cy="newCityForm"
>
<template #form-inputs="{ data, validate }">
<VnRow>
@ -48,12 +49,14 @@ const onDataSaved = (...args) => {
v-model="data.name"
:rules="validate('city.name')"
required
data-cy="cityName"
/>
<VnSelectProvince
:province-selected="$props.provinceSelected"
:country-fk="$props.countryFk"
v-model="data.provinceFk"
required
data-cy="provinceCity"
/>
</VnRow>
</template>

View File

@ -1,5 +1,5 @@
<script setup>
import { computed, reactive, ref } from 'vue';
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
@ -21,14 +21,13 @@ const postcodeFormData = reactive({
provinceFk: null,
townFk: null,
});
const townsFetchDataRef = ref(false);
const countriesRef = ref(false);
const townsRef = ref(false);
const provincesFetchDataRef = ref(false);
const provincesOptions = ref([]);
const town = ref({});
const townFilter = ref({});
const countriesRef = ref(false);
const provincesOptions = ref([]);
const townsOptions = ref([]);
const town = ref({});
const countryFilter = ref({});
function onDataSaved(formData) {
@ -48,62 +47,81 @@ function onDataSaved(formData) {
emit('onDataSaved', newPostcode);
}
async function setCountry(countryFk, data) {
data.townFk = null;
data.provinceFk = null;
data.countryFk = countryFk;
await fetchTowns();
}
// Province
async function setProvince(id, data) {
if (data.provinceFk === id) return;
const newProvince = provincesOptions.value.find((province) => province.id == id);
if (newProvince) data.countryFk = newProvince.countryFk;
postcodeFormData.provinceFk = id;
await fetchTowns();
}
async function onProvinceCreated(data) {
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) {
town.value = newTown;
data.provinceFk = newTown?.provinceFk ?? newTown;
data.countryFk = newTown?.province?.countryFk ?? newTown;
}
async function onCityCreated(newTown, formData) {
await provincesFetchDataRef.value.fetch();
newTown.province = provincesOptions.value.find(
(province) => province.id === newTown.provinceFk
);
formData.townFk = newTown;
setTown(newTown, formData);
}
function setTown(newTown, data) {
town.value = newTown;
data.provinceFk = newTown?.provinceFk ?? newTown;
data.countryFk = newTown?.province?.countryFk ?? newTown;
}
async function setCountry(countryFk, data) {
data.townFk = null;
data.provinceFk = null;
data.countryFk = countryFk;
}
async function handleProvinces(data) {
provincesOptions.value = data;
}
async function setProvince(id, data) {
const newProvince = provincesOptions.value.find((province) => province.id == id);
if (!newProvince) return;
data.countryFk = newProvince.countryFk;
}
async function onProvinceCreated(data) {
await provincesFetchDataRef.value.fetch({
where: { countryFk: postcodeFormData.countryFk },
});
postcodeFormData.provinceFk = data.id;
}
const whereTowns = computed(() => {
return {
async function fetchTowns(countryFk = postcodeFormData.countryFk) {
if (!countryFk) return;
const provinces = postcodeFormData.provinceFk
? [postcodeFormData.provinceFk]
: provinceByCountry();
townFilter.value.where = {
provinceFk: {
inq: provincesOptions.value.map(({ id }) => id),
inq: provinces,
},
};
});
await townsFetchDataRef.value?.fetch();
}
async function filterTowns(name) {
if (name !== '') {
townFilter.value.where = {
name: {
like: `%${name}%`,
},
};
await townsFetchDataRef.value?.fetch();
}
}
</script>
<template>
<FetchData
ref="provincesFetchDataRef"
@on-fetch="handleProvinces"
ref="townsFetchDataRef"
:sort-by="['name ASC']"
:limit="30"
:filter="townFilter"
@on-fetch="handleTowns"
auto-load
url="Provinces/location"
url="Towns/location"
/>
<FormModelPopup
@ -123,25 +141,22 @@ const whereTowns = computed(() => {
:rules="validate('postcode.code')"
clearable
required
data-cy="locationPostcode"
/>
<VnSelectDialog
ref="townsRef"
:sort-by="['name ASC']"
:limit="30"
auto-load
url="Towns/location"
:where="whereTowns"
:label="t('City')"
@update:model-value="(value) => setTown(value, data)"
@filter="filterTowns"
:tooltip="t('Create city')"
v-model="data.townFk"
:options="townsOptions"
option-label="name"
option-value="id"
:rules="validate('postcode.city')"
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
:emit-value="false"
:clearable="true"
required
data-cy="locationTown"
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
@ -171,8 +186,12 @@ const whereTowns = computed(() => {
:country-fk="data.countryFk"
:province-selected="data.provinceFk"
@update:model-value="(value) => setProvince(value, data)"
@update:options="
(data) => {
provincesOptions = data;
}
"
v-model="data.provinceFk"
@on-province-fetched="handleProvinces"
@on-province-created="onProvinceCreated"
required
/>
@ -191,6 +210,7 @@ const whereTowns = computed(() => {
v-model="data.countryFk"
:rules="validate('postcode.countryFk')"
@update:model-value="(value) => setCountry(value, data)"
data-cy="locationCountry"
/>
</VnRow>
</template>

View File

@ -53,8 +53,10 @@ const where = computed(() => {
v-model="data.name"
:rules="validate('province.name')"
required
data-cy="provinceName"
/>
<VnSelect
data-cy="autonomyProvince"
required
ref="autonomiesRef"
auto-load

View File

@ -10,6 +10,7 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import SkeletonTable from 'components/ui/SkeletonTable.vue';
import { tMobile } from 'src/composables/tMobile';
import getDifferences from 'src/filters/getDifferences';
const { push } = useRouter();
const quasar = useQuasar();
@ -126,7 +127,7 @@ function resetData(data) {
originalData.value = JSON.parse(JSON.stringify(data));
formData.value = JSON.parse(JSON.stringify(data));
if (watchChanges.value) watchChanges.value(); //destoy watcher
if (watchChanges.value) watchChanges.value(); //destroy watcher
watchChanges.value = watch(formData, () => (hasChanges.value = true), { deep: true });
}
@ -175,14 +176,13 @@ async function saveChanges(data) {
const changes = data || getChanges();
try {
await axios.post($props.saveUrl || $props.url + '/crud', changes);
} catch (e) {
return (isLoading.value = false);
} finally {
isLoading.value = false;
}
originalData.value = JSON.parse(JSON.stringify(formData.value));
if (changes.creates?.length) await vnPaginateRef.value.fetch();
hasChanges.value = false;
isLoading.value = false;
emit('saveChanges', data);
quasar.notify({
type: 'positive',
@ -249,7 +249,7 @@ function getChanges() {
for (const [i, row] of formData.value.entries()) {
if (!row[pk]) {
creates.push(row);
} else if (originalData.value) {
} else if (originalData.value[i]) {
const data = getDifferences(originalData.value[i], row);
if (!isEmpty(data)) {
updates.push({
@ -268,34 +268,10 @@ function getChanges() {
return changes;
}
function getDifferences(obj1, obj2) {
let diff = {};
delete obj1.$index;
delete obj2.$index;
for (let key in obj1) {
if (obj2[key] && JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])) {
diff[key] = obj2[key];
}
}
for (let key in obj2) {
if (
obj1[key] === undefined ||
JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])
) {
diff[key] = obj2[key];
}
}
return diff;
}
function isEmpty(obj) {
if (obj == null) return true;
if (obj === undefined) return true;
if (Object.keys(obj).length === 0) return true;
if (obj.length > 0) return false;
if (Array.isArray(obj)) return !obj.length;
return !Object.keys(obj).length;
}
async function reload(params) {

View File

@ -85,12 +85,14 @@ const closeForm = () => {
hide-selected
option-label="label"
v-model="selectedField"
data-cy="field-to-edit"
/>
<component
:is="inputs[selectedField?.component || 'input']"
v-bind="selectedField?.attrs || {}"
v-model="newValue"
:label="t('Value')"
data-cy="value-to-edit"
style="width: 200px"
/>
</VnRow>

View File

@ -1,7 +1,7 @@
<script setup>
import axios from 'axios';
import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue';
import { onBeforeRouteLeave, useRouter } from 'vue-router';
import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { useState } from 'src/composables/useState';
@ -12,7 +12,6 @@ import SkeletonForm from 'components/ui/SkeletonForm.vue';
import VnConfirm from './ui/VnConfirm.vue';
import { tMobile } from 'src/composables/tMobile';
import { useArrayData } from 'src/composables/useArrayData';
import { useRoute } from 'vue-router';
const { push } = useRouter();
const quasar = useQuasar();
@ -110,6 +109,7 @@ const originalData = ref({});
const formData = computed(() => state.get(modelValue));
const defaultButtons = computed(() => ({
save: {
dataCy: 'saveDefaultBtn',
color: 'primary',
icon: 'save',
label: 'globals.save',
@ -117,6 +117,7 @@ const defaultButtons = computed(() => ({
type: 'submit',
},
reset: {
dataCy: 'resetDefaultBtn',
color: 'primary',
icon: 'restart_alt',
label: 'globals.reset',
@ -291,6 +292,7 @@ defineExpose({
class="q-pa-md"
:style="maxWidth ? 'max-width: ' + maxWidth : ''"
id="formModel"
:prevent-submit="$attrs['prevent-submit']"
>
<QCard>
<slot
@ -324,6 +326,7 @@ defineExpose({
:title="t(defaultButtons.reset.label)"
/>
<QBtnDropdown
data-cy="saveAndContinueDefaultBtn"
v-if="$props.goTo"
@click="saveAndGo"
:label="tMobile('globals.saveAndContinue')"

View File

@ -62,6 +62,7 @@ defineExpose({
@click="emit('onDataCanceled')"
v-close-popup
data-cy="FormModelPopup_cancel"
z-max
/>
<QBtn
:label="t('globals.save')"
@ -72,6 +73,7 @@ defineExpose({
:disabled="isLoading"
:loading="isLoading"
data-cy="FormModelPopup_save"
z-max
/>
</div>
</template>

View File

@ -9,6 +9,8 @@ import VnSelect from 'components/common/VnSelect.vue';
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
import axios from 'axios';
import { getParamWhere } from 'src/filters';
import { useRoute } from 'vue-router';
const { t } = useI18n();
const props = defineProps({
@ -26,28 +28,21 @@ const props = defineProps({
},
});
const itemCategories = ref([]);
const selectedCategoryFk = ref(null);
const selectedTypeFk = ref(null);
const route = useRoute();
const itemTypesOptions = ref([]);
const suppliersOptions = ref([]);
const tagOptions = ref([]);
const tagValues = ref([]);
const categoryList = ref(null);
const selectedCategoryFk = ref(getParamWhere(route.query.table, 'categoryFk', false));
const selectedTypeFk = ref(getParamWhere(route.query.table, 'typeFk', false));
const categoryList = computed(() => {
return (itemCategories.value || [])
.filter((category) => category.display)
.map((category) => ({
...category,
icon: `vn:${(category.icon || '').split('-')[1]}`,
}));
});
const selectedCategory = computed(() =>
(itemCategories.value || []).find(
const selectedCategory = computed(() => {
return (categoryList.value || []).find(
(category) => category?.id === selectedCategoryFk.value
)
);
);
});
const selectedType = computed(() => {
return (itemTypesOptions.value || []).find(
@ -87,7 +82,7 @@ const applyTags = (params, search) => {
search();
};
const fetchItemTypes = async (id) => {
const fetchItemTypes = async (id = selectedCategoryFk.value) => {
const filter = {
fields: ['id', 'name', 'categoryFk'],
where: { categoryFk: id },
@ -126,15 +121,19 @@ const removeTag = (index, params, search) => {
(tagValues.value || []).splice(index, 1);
applyTags(params, search);
};
const setCategoryList = (data) => {
categoryList.value = (data || [])
.filter((category) => category.display)
.map((category) => ({
...category,
icon: `vn:${(category.icon || '').split('-')[1]}`,
}));
fetchItemTypes();
};
</script>
<template>
<FetchData
url="ItemCategories"
limit="30"
auto-load
@on-fetch="(data) => (itemCategories = data)"
/>
<FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
<FetchData
url="Suppliers"
limit="30"

View File

@ -92,13 +92,13 @@ function findMatches(search, item) {
}
function addChildren(module, route, parent) {
if (route.menus) {
const mainMenus = route.menus[props.source];
const matches = findMatches(mainMenus, route);
const menus = route?.meta?.menu ?? route?.menus?.[props.source]; //backwards compatible
if (!menus) return;
for (const child of matches) {
navigation.addMenuItem(module, child, parent);
}
const matches = findMatches(menus, route);
for (const child of matches) {
navigation.addMenuItem(module, child, parent);
}
}
@ -122,16 +122,26 @@ function getRoutes() {
if (props.source === 'card') {
const currentRoute = route.matched[1];
const currentModule = toLowerCamel(currentRoute.name);
const moduleDef = routes.find(
let moduleDef = routes.find(
(route) => toLowerCamel(route.name) === currentModule
);
if (!moduleDef) return;
if (!moduleDef?.menus) moduleDef = betaGetRoutes();
addChildren(currentModule, moduleDef, items.value);
}
}
function betaGetRoutes() {
let menuRoute;
let index = route.matched.length - 1;
while (!menuRoute && index > 0) {
if (route.matched[index]?.meta?.menu) menuRoute = route.matched[index];
index--;
}
return menuRoute;
}
async function togglePinned(item, event) {
if (event.defaultPrevented) return;
event.preventDefault();
@ -177,6 +187,7 @@ function normalize(text) {
class="full-width"
filled
dense
autofocus
/>
</QItem>
<QSeparator />

View File

@ -17,12 +17,10 @@ const stateQuery = useStateQueryStore();
const state = useState();
const user = state.getUser();
const appName = 'Lilium';
const pinnedModulesRef = ref();
onMounted(() => stateStore.setMounted());
const pinnedModulesRef = ref();
</script>
<template>
<QHeader color="white" elevated>
<QToolbar class="q-py-sm q-px-md">
@ -59,22 +57,13 @@ const pinnedModulesRef = ref();
'no-visible': !stateQuery.isLoading().value,
}"
size="xs"
data-cy="loading-spinner"
/>
<QSpace />
<div id="searchbar" class="searchbar"></div>
<QSpace />
<div class="q-pl-sm q-gutter-sm row items-center no-wrap">
<div id="actions-prepend"></div>
<QBtn
flat
v-if="!quasar.platform.is.mobile"
@click="pinnedModulesRef.redirect($route.params.id)"
icon="more_up"
>
<QTooltip>
{{ t('Go to Salix') }}
</QTooltip>
</QBtn>
<QBtn
:class="{ 'q-pa-none': quasar.platform.is.mobile }"
id="pinnedModules"
@ -106,7 +95,6 @@ const pinnedModulesRef = ref();
<VnBreadcrumbs v-if="$q.screen.lt.md" class="q-ml-md" />
</QHeader>
</template>
<style lang="scss" scoped>
.searchbar {
width: max-content;
@ -115,9 +103,3 @@ const pinnedModulesRef = ref();
background-color: var(--vn-section-color);
}
</style>
<i18n>
en:
Go to Salix: Go to Salix
es:
Go to Salix: Ir a Salix
</i18n>

View File

@ -55,6 +55,7 @@ const onDataSaved = (data) => {
v-model.number="data.quantity"
type="number"
autofocus
data-cy="regularizeStockInput"
/>
</VnRow>
<VnRow>

View File

@ -87,10 +87,10 @@ async function saveDarkMode(value) {
async function saveLanguage(value) {
const query = `/VnUsers/${user.value.id}`;
try {
await axios.patch(query, {
lang: value,
});
await axios.patch(query, { lang: value });
user.value.lang = value;
useState().setUser(user.value);
onDataSaved();
} catch (error) {
onDataError();

View File

@ -7,7 +7,7 @@ import VnSelectDialog from 'components/common/VnSelectDialog.vue';
import FetchData from 'components/FetchData.vue';
import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
const emit = defineEmits(['onProvinceCreated', 'onProvinceFetched']);
const emit = defineEmits(['onProvinceCreated', 'onProvinceFetched', 'update:options']);
const $props = defineProps({
countryFk: {
type: Number,
@ -41,6 +41,7 @@ async function onProvinceCreated(_, data) {
}
async function handleProvinces(data) {
provincesOptions.value = data;
emit('update:options', data);
}
watch(
@ -64,11 +65,11 @@ watch(
auto-load
/>
<VnSelectDialog
data-cy="locationProvince"
:label="t('Province')"
:options="provincesOptions"
:tooltip="t('Create province')"
hide-selected
:clearable="true"
v-model="provinceFk"
:rules="validate && validate('postcode.provinceFk')"
:acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"

View File

@ -32,7 +32,10 @@ const $props = defineProps({
defineExpose({ addFilter, props: $props });
const model = defineModel(undefined, { required: true });
const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
const arrayData = useArrayData(
$props.dataKey,
$props.searchUrl ? { searchUrl: $props.searchUrl } : null
);
const columnFilter = computed(() => $props.column?.columnFilter);
const updateEvent = { 'update:modelValue': addFilter };

View File

@ -1,20 +1,21 @@
<script setup>
import { ref, onBeforeMount, onMounted, computed, watch } from 'vue';
import { ref, onBeforeMount, onMounted, computed, watch, useAttrs } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore';
import { useFilterParams } from 'src/composables/useFilterParams';
import CrudModel from 'src/components/CrudModel.vue';
import FormModelPopup from 'components/FormModelPopup.vue';
import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
import VnTableColumn from 'components/VnTable/VnColumn.vue';
import VnFilter from 'components/VnTable/VnFilter.vue';
import VnTableChip from 'components/VnTable/VnChip.vue';
import VnVisibleColumn from 'src/components/VnTable/VnVisibleColumn.vue';
import VnLv from 'components/ui/VnLv.vue';
import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
import VnTableFilter from './VnTableFilter.vue';
const $props = defineProps({
columns: {
@ -33,6 +34,10 @@ const $props = defineProps({
type: Boolean,
default: true,
},
rightSearchIcon: {
type: Boolean,
default: true,
},
rowClick: {
type: [Function, Boolean],
default: null,
@ -54,8 +59,8 @@ const $props = defineProps({
default: true,
},
bottom: {
type: Object,
default: null,
type: Boolean,
default: false,
},
cardClass: {
type: String,
@ -101,10 +106,6 @@ const $props = defineProps({
type: String,
default: '90vh',
},
chipLocale: {
type: String,
default: null,
},
footer: {
type: Boolean,
default: false,
@ -119,22 +120,21 @@ const stateStore = useStateStore();
const route = useRoute();
const router = useRouter();
const quasar = useQuasar();
const $attrs = useAttrs();
const CARD_MODE = 'card';
const TABLE_MODE = 'table';
const mode = ref(CARD_MODE);
const selected = ref([]);
const hasParams = ref(false);
const routeQuery = JSON.parse(route?.query[$props.searchUrl] ?? '{}');
const params = ref({ ...routeQuery, ...routeQuery.filter?.where });
const orders = ref(parseOrder(routeQuery.filter?.order));
const CrudModelRef = ref({});
const showForm = ref(false);
const splittedColumns = ref({ columns: [] });
const columnsVisibilitySkipped = ref();
const createForm = ref();
const tableFilterRef = ref([]);
const tableRef = ref();
const params = ref(useFilterParams($attrs['data-key']).params);
const orders = ref(useFilterParams($attrs['data-key']).orders);
const tableModes = [
{
@ -150,6 +150,7 @@ const tableModes = [
disable: $props.disableOption?.card,
},
];
onBeforeMount(() => {
const urlParams = route.query[$props.searchUrl];
hasParams.value = urlParams && Object.keys(urlParams).length !== 0;
@ -162,7 +163,9 @@ onMounted(() => {
: $props.defaultMode;
stateStore.rightDrawer = quasar.screen.gt.xs;
columnsVisibilitySkipped.value = [
...splittedColumns.value.columns.filter((c) => !c.visible).map((c) => c.name),
...splittedColumns.value.columns
.filter((c) => c.visible === false)
.map((c) => c.name),
...['tableActions'],
];
createForm.value = $props.create;
@ -181,41 +184,8 @@ watch(
{ immediate: true }
);
watch(
() => route.query[$props.searchUrl],
(val) => setUserParams(val),
{ immediate: true, deep: true }
);
const isTableMode = computed(() => mode.value == TABLE_MODE);
function setUserParams(watchedParams, watchedOrder) {
if (!watchedParams) return;
if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
const filter =
typeof watchedParams?.filter == 'string'
? JSON.parse(watchedParams?.filter ?? '{}')
: watchedParams?.filter;
const where = filter?.where;
const order = watchedOrder ?? filter?.order;
watchedParams = { ...watchedParams, ...where };
delete watchedParams.filter;
delete params.value?.filter;
params.value = { ...params.value, ...sanitizer(watchedParams) };
orders.value = parseOrder(order);
}
function sanitizer(params) {
for (const [key, value] of Object.entries(params)) {
if (value && typeof value == 'object') {
const param = Object.values(value)[0];
if (typeof param == 'string') params[key] = param.replaceAll('%', '');
}
}
return params;
}
const showRightIcon = computed(() => $props.rightSearch || $props.rightSearchIcon);
function splitColumns(columns) {
splittedColumns.value = {
@ -296,17 +266,6 @@ function getColAlign(col) {
return 'text-' + (col.align ?? 'left');
}
function parseOrder(urlOrders) {
const orderObject = {};
if (!urlOrders) return orderObject;
if (typeof urlOrders == 'string') urlOrders = [urlOrders];
for (const [index, orders] of urlOrders.entries()) {
const [name, direction] = orders.split(' ');
orderObject[name] = { direction, index: index + 1 };
}
return orderObject;
}
const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
defineExpose({
create: createForm,
@ -355,61 +314,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
show-if-above
>
<QScrollArea class="fit">
<VnFilterPanel
:data-key="$attrs['data-key']"
:search-button="true"
v-model="params"
:search-url="searchUrl"
:redirect="!!redirect"
@set-user-params="setUserParams"
:disable-submit-event="true"
@remove="
(key) =>
tableFilterRef
.find((f) => f.props?.column.name == key)
?.addFilter()
"
>
<template #body>
<div
class="row no-wrap flex-center"
v-for="col of splittedColumns.columns.filter(
(c) => c.columnFilter ?? true
)"
:key="col.id"
>
<VnFilter
ref="tableFilterRef"
:column="col"
:data-key="$attrs['data-key']"
v-model="params[columnName(col)]"
:search-url="searchUrl"
/>
<VnTableOrder
v-if="
col?.columnFilter !== false &&
col?.name !== 'tableActions'
"
v-model="orders[col.orderBy ?? col.name]"
:name="col.orderBy ?? col.name"
:data-key="$attrs['data-key']"
:search-url="searchUrl"
:vertical="false"
/>
</div>
<slot
name="moreFilterPanel"
:params="params"
:columns="splittedColumns.columns"
/>
</template>
<template #tags="{ tag, formatFn }" v-if="chipLocale">
<div class="q-gutter-x-xs">
<strong>{{ t(`${chipLocale}.${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
</VnFilterPanel>
<VnTableFilter :data-key="$attrs['data-key']" :columns="columns" :redirect="redirect" />
</QScrollArea>
</QDrawer>
<CrudModel
@ -465,7 +370,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
:options="tableModes.filter((mode) => !mode.disable)"
/>
<QBtn
v-if="$props.rightSearch"
v-if="showRightIcon"
icon="filter_alt"
class="bg-vn-section-color q-ml-sm"
dense
@ -479,7 +384,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
:class="col.headerClass"
>
<div
class="column self-start q-ml-xs ellipsis"
class="column ellipsis"
:class="`text-${col?.align ?? 'left'}`"
:style="$props.columnSearch ? 'height: 75px' : ''"
>
@ -521,7 +426,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
<!-- Columns -->
<QTd
auto-width
class="no-margin q-px-xs"
class="no-margin"
:class="[getColAlign(col), col.columnClass]"
:style="col.style"
v-if="col.visible ?? true"
@ -573,29 +478,6 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
/>
</QTd>
</template>
<template #bottom v-if="bottom">
<slot name="bottom-table">
<QBtn
@click="
() =>
createAsDialog
? (showForm = !showForm)
: handleOnDataSaved(create)
"
class="cursor-pointer fill-icon"
color="primary"
icon="add_circle"
size="md"
round
flat
shortcut="+"
:disabled="!disabledAttr"
/>
<QTooltip>
{{ createForm.title }}
</QTooltip>
</slot>
</template>
<template #item="{ row, colsMap }">
<component
:is="$props.redirect ? 'router-link' : 'span'"
@ -610,6 +492,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
$props.rowClick && $props.rowClick(row);
}
"
style="height: 100%"
>
<QCardSection
vertical
@ -655,13 +538,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
:key="col.name"
class="fields"
>
<VnLv
:label="
!col.component && col.label
? `${col.label}:`
: ''
"
>
<VnLv :label="col.label + ':'">
<template #value>
<span
@click="stopEventPropagation($event)"
@ -725,6 +602,27 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
</QTr>
</template>
</QTable>
<div class="full-width bottomButton" v-if="bottom">
<QBtn
@click="
() =>
createAsDialog
? (showForm = !showForm)
: handleOnDataSaved(create)
"
class="cursor-pointer fill-icon"
color="primary"
icon="add_circle"
size="md"
round
flat
shortcut="+"
:disabled="!disabledAttr"
/>
<QTooltip>
{{ createForm.title }}
</QTooltip>
</div>
</template>
</CrudModel>
<QPageSticky v-if="$props.create" :offset="[20, 20]" style="z-index: 2">
@ -802,7 +700,7 @@ es:
.grid-three {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, max-content));
grid-template-columns: repeat(auto-fit, minmax(350px, max-content));
max-width: 100%;
grid-gap: 20px;
margin: 0 auto;
@ -851,21 +749,6 @@ es:
top: 0;
padding: 12px 0;
}
tbody {
.q-checkbox {
display: flex;
margin-bottom: 9px;
& .q-checkbox__label {
margin-left: 31px;
color: var(--vn-text-color);
}
& .q-checkbox__inner {
position: absolute;
left: 0;
color: var(--vn-label-color);
}
}
}
.sticky {
position: sticky;
right: 0;

View File

@ -0,0 +1,66 @@
<script setup>
import { ref } from 'vue';
import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
import VnFilter from 'components/VnTable/VnFilter.vue';
import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
defineProps({
columns: {
type: Array,
required: true,
},
searchUrl: {
type: [String, Boolean],
default: 'table',
},
});
const tableFilterRef = ref([]);
function columnName(col) {
const column = { ...col, ...col.columnFilter };
let name = column.name;
if (column.alias) name = column.alias + '.' + name;
return name;
}
</script>
<template>
<VnFilterPanel v-bind="$attrs" :search-button="true" :disable-submit-event="true">
<template #body="{ params, orders }">
<div
class="row no-wrap flex-center"
v-for="col of columns.filter((c) => c.columnFilter ?? true)"
:key="col.id"
>
<VnFilter
ref="tableFilterRef"
:column="col"
:data-key="$attrs['data-key']"
v-model="params[columnName(col)]"
:search-url="searchUrl"
/>
<VnTableOrder
v-if="col?.columnFilter !== false && col?.name !== 'tableActions'"
v-model="orders[col.orderBy ?? col.name]"
:name="col.orderBy ?? col.name"
:data-key="$attrs['data-key']"
:search-url="searchUrl"
:vertical="true"
/>
</div>
<slot
name="moreFilterPanel"
:params="params"
:orders="orders"
:columns="columns"
/>
</template>
<template #tags="{ tag, formatFn, getLocale }">
<div class="q-gutter-x-xs">
<strong>{{ getLocale(`${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
</VnFilterPanel>
</template>

View File

@ -152,7 +152,7 @@ onMounted(async () => {
<QCheckbox
v-for="col in localColumns"
:key="col.name"
:label="col.label"
:label="col.label ?? col.name"
v-model="col.visible"
/>
</div>

View File

@ -1,4 +1,4 @@
import { describe, expect, it, beforeAll, beforeEach } from 'vitest';
import { describe, expect, it, beforeAll, beforeEach, vi } from 'vitest';
import { createWrapper } from 'app/test/vitest/helper';
import VnTable from 'src/components/VnTable/VnTable.vue';
@ -13,6 +13,15 @@ describe('VnTable', () => {
},
});
vm = wrapper.vm;
vi.mock('src/composables/useFilterParams', () => {
return {
useFilterParams: vi.fn(() => ({
params: {},
orders: {},
})),
};
});
});
beforeEach(() => (vm.selected = []));

View File

@ -0,0 +1,248 @@
import { createWrapper, axios } from 'app/test/vitest/helper';
import CrudModel from 'components/CrudModel.vue';
import { vi, afterEach, beforeEach, beforeAll, describe, expect, it } from 'vitest';
describe('CrudModel', () => {
let wrapper;
let vm;
let data;
beforeAll(() => {
wrapper = createWrapper(CrudModel, {
global: {
stubs: [
'vnPaginate',
'useState',
'arrayData',
'useStateStore',
'vue-i18n',
],
mocks: {
validate: vi.fn(),
},
},
propsData: {
dataRequired: {
fk: 1,
},
dataKey: 'crudModelKey',
model: 'crudModel',
url: 'crudModelUrl',
saveFn: '',
},
});
wrapper=wrapper.wrapper;
vm=wrapper.vm;
});
beforeEach(() => {
vm.fetch([]);
vm.watchChanges = null;
});
afterEach(() => {
vi.clearAllMocks();
});
describe('insert()', () => {
it('should new element in list with index 0 if formData not has data', () => {
vm.insert();
expect(vm.formData.length).toEqual(1);
expect(vm.formData[0].fk).toEqual(1);
expect(vm.formData[0].$index).toEqual(0);
});
});
describe('getChanges()', () => {
it('should return correct updates and creates', async () => {
vm.fetch([
{ id: 1, name: 'New name one' },
{ id: 2, name: 'New name two' },
{ id: 3, name: 'Bruce Wayne' },
]);
vm.originalData = [
{ id: 1, name: 'Tony Starks' },
{ id: 2, name: 'Jessica Jones' },
{ id: 3, name: 'Bruce Wayne' },
];
vm.insert();
const result = vm.getChanges();
const expected = {
creates: [
{
$index: 3,
fk: 1,
},
],
updates: [
{
data: {
name: 'New name one',
},
where: {
id: 1,
},
},
{
data: {
name: 'New name two',
},
where: {
id: 2,
},
},
],
};
expect(result).toEqual(expected);
});
});
describe('getDifferences()', () => {
it('should return the differences between two objects', async () => {
const obj1 = {
a: 1,
b: 2,
c: 3,
};
const obj2 = {
a: null,
b: 4,
d: 5,
};
const result = vm.getDifferences(obj1, obj2);
expect(result).toEqual({
a: null,
b: 4,
d: 5,
});
});
});
describe('isEmpty()', () => {
let dummyObj;
let dummyArray;
let result;
it('should return true if object si null', async () => {
dummyObj = null;
result = vm.isEmpty(dummyObj);
expect(result).toBe(true);
});
it('should return true if object si undefined', async () => {
dummyObj = undefined;
result = vm.isEmpty(dummyObj);
expect(result).toBe(true);
});
it('should return true if object is empty', async () => {
dummyObj ={};
result = vm.isEmpty(dummyObj);
expect(result).toBe(true);
});
it('should return false if object is not empty', async () => {
dummyObj = {a:1, b:2, c:3};
result = vm.isEmpty(dummyObj);
expect(result).toBe(false);
});
it('should return true if array is empty', async () => {
dummyArray = [];
result = vm.isEmpty(dummyArray);
expect(result).toBe(true);
});
it('should return false if array is not empty', async () => {
dummyArray = [1,2,3];
result = vm.isEmpty(dummyArray);
expect(result).toBe(false);
})
});
describe('resetData()', () => {
it('should add $index to elements in data[] and sets originalData and formData with data', async () => {
data = [{
name: 'Tony',
lastName: 'Stark',
age: 42,
}];
vm.resetData(data);
expect(vm.originalData).toEqual(data);
expect(vm.originalData[0].$index).toEqual(0);
expect(vm.formData).toEqual(data);
expect(vm.formData[0].$index).toEqual(0);
expect(vm.watchChanges).not.toBeNull();
});
it('should dont do nothing if data is null', async () => {
vm.resetData(null);
expect(vm.watchChanges).toBeNull();
});
it('should set originalData and formatData with data and generate watchChanges', async () => {
data = {
name: 'Tony',
lastName: 'Stark',
age: 42,
};
vm.resetData(data);
expect(vm.originalData).toEqual(data);
expect(vm.formData).toEqual(data);
expect(vm.watchChanges).not.toBeNull();
});
});
describe('saveChanges()', () => {
data = [{
name: 'Tony',
lastName: 'Stark',
age: 42,
}];
it('should call saveFn if exists', async () => {
await wrapper.setProps({ saveFn: vi.fn() });
vm.saveChanges(data);
expect(vm.saveFn).toHaveBeenCalledOnce();
expect(vm.isLoading).toBe(false);
expect(vm.hasChanges).toBe(false);
await wrapper.setProps({ saveFn: '' });
});
it("should use default url if there's not saveFn", async () => {
const postMock =vi.spyOn(axios, 'post');
vm.formData = [{
name: 'Bruce',
lastName: 'Wayne',
age: 45,
}]
await vm.saveChanges(data);
expect(postMock).toHaveBeenCalledWith(vm.url + '/crud', data);
expect(vm.isLoading).toBe(false);
expect(vm.hasChanges).toBe(false);
expect(vm.originalData).toEqual(JSON.parse(JSON.stringify(vm.formData)));
});
});
});

View File

@ -0,0 +1,56 @@
import { createWrapper, axios } from 'app/test/vitest/helper';
import EditForm from 'components/EditTableCellValueForm.vue';
import { vi, afterEach, beforeAll, describe, expect, it } from 'vitest';
const fieldA = 'fieldA';
const fieldB = 'fieldB';
describe('EditForm', () => {
let vm;
const mockRows = [
{ id: 1, itemFk: 101 },
{ id: 2, itemFk: 102 },
];
const mockFieldsOptions = [
{ label: 'Field A', field: fieldA, component: 'input', attrs: {} },
{ label: 'Field B', field: fieldB, component: 'date', attrs: {} },
];
const editUrl = '/api/edit';
beforeAll(() => {
vi.spyOn(axios, 'post').mockResolvedValue({ status: 200 });
vm = createWrapper(EditForm, {
props: {
rows: mockRows,
fieldsOptions: mockFieldsOptions,
editUrl,
},
}).vm;
});
afterEach(() => {
vi.clearAllMocks();
});
describe('onSubmit()', () => {
it('should call axios.post with the correct parameters in the payload', async () => {
const selectedField = { field: fieldA, component: 'input', attrs: {} };
const newValue = 'Test Value';
vm.selectedField = selectedField;
vm.newValue = newValue;
await vm.onSubmit();
const payload = axios.post.mock.calls[0][1];
expect(axios.post).toHaveBeenCalledWith(editUrl, expect.any(Object));
expect(payload.field).toEqual(fieldA);
expect(payload.newValue).toEqual(newValue);
expect(payload.lines).toEqual(expect.arrayContaining(mockRows));
expect(vm.isLoading).toEqual(false);
});
});
});

View File

@ -0,0 +1,149 @@
import { describe, expect, it, beforeAll, vi, afterAll } from 'vitest';
import { createWrapper, axios } from 'app/test/vitest/helper';
import FormModel from 'src/components/FormModel.vue';
describe('FormModel', () => {
const model = 'mockModel';
const url = 'mockUrl';
const formInitialData = { mockKey: 'mockVal' };
describe('modelValue', () => {
it('should use the provided model', () => {
const { vm } = mount({ propsData: { model } });
expect(vm.modelValue).toBe(model);
});
it('should use the route meta title when model is not provided', () => {
const { vm } = mount({});
expect(vm.modelValue).toBe('formModel_mockTitle');
});
});
describe('onMounted()', () => {
let mockGet;
beforeAll(() => {
mockGet = vi.spyOn(axios, 'get').mockResolvedValue({ data: {} });
});
afterAll(() => {
mockGet.mockRestore();
});
it('should not fetch when has formInitialData', () => {
mount({ propsData: { url, model, autoLoad: true, formInitialData } });
expect(mockGet).not.toHaveBeenCalled();
});
it('should fetch when there is url and auto-load', () => {
mount({ propsData: { url, model, autoLoad: true } });
expect(mockGet).toHaveBeenCalled();
});
it('should not observe changes', () => {
const { vm } = mount({
propsData: { url, model, observeFormChanges: false, formInitialData },
});
expect(vm.hasChanges).toBe(true);
vm.reset();
expect(vm.hasChanges).toBe(true);
});
it('should observe changes', async () => {
const { vm } = mount({
propsData: { url, model, formInitialData },
});
vm.state.set(model, formInitialData);
expect(vm.hasChanges).toBe(false);
vm.formData.mockKey = 'newVal';
await vm.$nextTick();
expect(vm.hasChanges).toBe(true);
vm.formData.mockKey = 'mockVal';
});
});
describe('trimData()', () => {
let vm;
beforeAll(() => {
vm = mount({}).vm;
});
it('should trim whitespace from string values', () => {
const data = { key1: ' value1 ', key2: ' value2 ' };
const trimmedData = vm.trimData(data);
expect(trimmedData).toEqual({ key1: 'value1', key2: 'value2' });
});
it('should not modify non-string values', () => {
const data = { key1: 123, key2: true, key3: null, key4: undefined };
const trimmedData = vm.trimData(data);
expect(trimmedData).toEqual(data);
});
});
describe('save()', async () => {
it('should not call if there are not changes', async () => {
const { vm } = mount({ propsData: { url, model } });
await vm.save();
expect(vm.hasChanges).toBe(false);
});
it('should call axios.patch with the right data', async () => {
const spy = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
const { vm } = mount({ propsData: { url, model, formInitialData } });
vm.formData.mockKey = 'newVal';
await vm.$nextTick();
await vm.save();
expect(spy).toHaveBeenCalled();
vm.formData.mockKey = 'mockVal';
});
it('should call axios.post with the right data', async () => {
const spy = vi.spyOn(axios, 'post').mockResolvedValue({ data: {} });
const { vm } = mount({
propsData: { url, model, formInitialData, urlCreate: 'mockUrlCreate' },
});
vm.formData.mockKey = 'newVal';
await vm.$nextTick();
await vm.save();
expect(spy).toHaveBeenCalled();
vm.formData.mockKey = 'mockVal';
});
it('should use the saveFn', async () => {
const { vm } = mount({
propsData: { url, model, formInitialData, saveFn: () => {} },
});
const spyPatch = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
const spySaveFn = vi.spyOn(vm.$props, 'saveFn');
vm.formData.mockKey = 'newVal';
await vm.$nextTick();
await vm.save();
expect(spyPatch).not.toHaveBeenCalled();
expect(spySaveFn).toHaveBeenCalled();
vm.formData.mockKey = 'mockVal';
});
it('should reload the data after save', async () => {
const { vm } = mount({
propsData: { url, model, formInitialData, reload: true },
});
vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
vm.formData.mockKey = 'newVal';
await vm.$nextTick();
await vm.save();
vm.formData.mockKey = 'mockVal';
});
});
});
function mount({ propsData = {} }) {
return createWrapper(FormModel, {
propsData,
});
}

View File

@ -2,7 +2,11 @@
import { ref, onMounted, useSlots } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import { useQuasar } from 'quasar';
const { t } = useI18n();
const quasar = useQuasar();
const stateStore = useStateStore();
const slots = useSlots();
const hasContent = ref(false);
const rightPanel = ref(null);
@ -11,7 +15,6 @@ onMounted(() => {
rightPanel.value = document.querySelector('#right-panel');
if (!rightPanel.value) return;
// Check if there's content to display
const observer = new MutationObserver(() => {
hasContent.value = rightPanel.value.childNodes.length;
});
@ -21,12 +24,9 @@ onMounted(() => {
childList: true,
attributes: true,
});
if (!slots['right-panel'] && !hasContent.value) stateStore.rightDrawer = false;
if ((!slots['right-panel'] && !hasContent.value) || quasar.platform.is.mobile)
stateStore.rightDrawer = false;
});
const { t } = useI18n();
const stateStore = useStateStore();
</script>
<template>
<Teleport to="#actions-append" v-if="stateStore.isHeaderMounted()">
@ -45,7 +45,7 @@ const stateStore = useStateStore();
</QBtn>
</div>
</Teleport>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256">
<QScrollArea class="fit">
<div id="right-panel"></div>
<slot v-if="!hasContent" name="right-panel" />

View File

@ -15,7 +15,7 @@ let root = ref(null);
watchEffect(() => {
matched.value = currentRoute.value.matched.filter(
(matched) => Object.keys(matched.meta).length
(matched) => !!matched?.meta?.title || !!matched?.meta?.icon
);
breadcrumbs.value.length = 0;
if (!matched.value[0]) return;

View File

@ -14,6 +14,7 @@ defineProps({
hide-dropdown-icon
focus-on-mount
@update:model-value="promise"
data-cy="vnBtnSelect_select"
/>
</QBtnDropdown>
</template>

View File

@ -0,0 +1,67 @@
<script setup>
import { onBeforeMount, computed } from 'vue';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
import { useArrayData } from 'src/composables/useArrayData';
import { useStateStore } from 'stores/useStateStore';
import useCardSize from 'src/composables/useCardSize';
import LeftMenu from 'components/LeftMenu.vue';
import VnSubToolbar from '../ui/VnSubToolbar.vue';
const props = defineProps({
dataKey: { type: String, required: true },
baseUrl: { type: String, default: undefined },
customUrl: { type: String, default: undefined },
filter: { type: Object, default: () => {} },
descriptor: { type: Object, required: true },
filterPanel: { type: Object, default: undefined },
searchDataKey: { type: String, default: undefined },
searchbarProps: { type: Object, default: undefined },
redirectOnError: { type: Boolean, default: false },
});
const stateStore = useStateStore();
const route = useRoute();
const router = useRouter();
const url = computed(() => {
if (props.baseUrl) {
return `${props.baseUrl}/${route.params.id}`;
}
return props.customUrl;
});
const arrayData = useArrayData(props.dataKey, {
url: url.value,
filter: props.filter,
});
onBeforeMount(async () => {
try {
if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
await arrayData.fetch({ append: false, updateRouter: false });
} catch {
const { matched: matches } = router.currentRoute.value;
const { path } = matches.at(-1);
router.push({ path: path.replace(/:id.*/, '') });
}
});
if (props.baseUrl) {
onBeforeRouteUpdate(async (to, from) => {
if (to.params.id !== from.params.id) {
arrayData.store.url = `${props.baseUrl}/${to.params.id}`;
await arrayData.fetch({ append: false, updateRouter: false });
}
});
}
</script>
<template>
<Teleport to="#left-panel" v-if="stateStore.isHeaderMounted()">
<component :is="descriptor" />
<QSeparator />
<LeftMenu source="card" />
</Teleport>
<VnSubToolbar />
<div :class="[useCardSize(), $attrs.class]">
<RouterView :key="route.path" />
</div>
</template>

View File

@ -2,9 +2,9 @@
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnRow from '../ui/VnRow.vue';
import VnInput from './VnInput.vue';
import FetchData from '../FetchData.vue';
import useNotify from 'src/composables/useNotify';
import VnInputPassword from 'src/components/common/VnInputPassword.vue';
const props = defineProps({
submitFn: { type: Function, default: () => {} },
@ -70,19 +70,19 @@ defineExpose({ show: () => changePassDialog.value.show() });
</QCardSection>
<QForm ref="form">
<QCardSection>
<VnInput
<VnInputPassword
v-if="props.askOldPass"
:label="t('Old password')"
v-model="passwords.oldPassword"
type="password"
:required="true"
:toggle-visibility="true"
autofocus
/>
<VnInput
<VnInputPassword
:label="t('New password')"
v-model="passwords.newPassword"
type="password"
:required="true"
:toggle-visibility="true"
:info="
t('passwordRequirements', {
length: requirements.length,
@ -95,10 +95,10 @@ defineExpose({ show: () => changePassDialog.value.show() });
autofocus
/>
<VnInput
<VnInputPassword
:label="t('Repeat password')"
v-model="passwords.repeatPassword"
type="password"
:toggle-visibility="true"
/>
</QCardSection>
</QForm>

View File

@ -0,0 +1,39 @@
<script setup>
import { toDateFormat } from 'src/filters/date.js';
defineProps({ date: { type: [Date, String], required: true } });
function getBadgeAttrs(date) {
let today = Date.vnNew();
today.setHours(0, 0, 0, 0);
let timeTicket = new Date(date);
timeTicket.setHours(0, 0, 0, 0);
let timeDiff = today - timeTicket;
if (timeDiff == 0) return { color: 'warning', class: 'black-text-color' };
if (timeDiff < 0) return { color: 'success', class: 'black-text-color' };
return { color: 'transparent', class: 'normal-text-color' };
}
function formatShippedDate(date) {
if (!date) return '-';
const dateSplit = date.split('T');
const [year, month, day] = dateSplit[0].split('-');
const newDate = new Date(year, month - 1, day);
return toDateFormat(newDate);
}
</script>
<template>
<QBadge v-bind="getBadgeAttrs(date)" class="q-pa-sm" style="font-size: 14px">
{{ formatShippedDate(date) }}
</QBadge>
</template>
<style lang="scss">
.black-text-color {
color: var(--vn-black-text-color);
}
.normal-text-color {
color: var(--vn-text-color);
}
</style>

View File

@ -297,7 +297,7 @@ defineExpose({
ref="dmsRef"
:data-key="$props.model"
:url="$props.model"
:filter="dmsFilter"
:user-filter="dmsFilter"
:order="['dmsFk DESC']"
:auto-load="true"
@on-fetch="setData"

View File

@ -45,6 +45,7 @@ const $props = defineProps({
});
const vnInputRef = ref(null);
const showPassword = ref(false);
const value = computed({
get() {
return $props.modelValue;
@ -134,20 +135,23 @@ const handleInsertMode = (e) => {
hide-bottom-space
:data-cy="$attrs.dataCy ?? $attrs.label + '_input'"
>
<template v-if="$slots.prepend" #prepend>
<template #prepend>
<slot name="prepend" />
</template>
<template #append>
<QIcon
name="close"
size="xs"
v-if="
hover &&
value &&
!$attrs.disabled &&
!$attrs.readonly &&
$props.clearable
"
:style="{
visibility:
hover &&
value &&
!$attrs.disabled &&
!$attrs.readonly &&
$props.clearable
? 'visible'
: 'hidden',
}"
@click="
() => {
value = null;
@ -155,7 +159,7 @@ const handleInsertMode = (e) => {
emit('remove');
}
"
></QIcon>
/>
<slot name="append" v-if="$slots.append && !$attrs.disabled" />
<QIcon v-if="info" name="info">
<QTooltip max-width="350px">
@ -166,18 +170,3 @@ const handleInsertMode = (e) => {
</QInput>
</div>
</template>
<i18n>
en:
inputMin: Must be more than {value}
maxLength: The value exceeds {value} characters
inputMax: Must be less than {value}
es:
inputMin: Debe ser mayor a {value}
maxLength: El valor excede los {value} carácteres
inputMax: Debe ser menor a {value}
</i18n>
<style lang="scss">
.q-field__append {
padding-inline: 0;
}
</style>

View File

@ -1,14 +1,12 @@
<script setup>
import { onMounted, watch, computed, ref, useAttrs } from 'vue';
import { date } from 'quasar';
import { useI18n } from 'vue-i18n';
import VnDate from './VnDate.vue';
import { useRequired } from 'src/composables/useRequired';
const $attrs = useAttrs();
const { isRequired, requiredFieldRule } = useRequired($attrs);
const model = defineModel({ type: [String, Date] });
const { t } = useI18n();
const $props = defineProps({
isOutlined: {
@ -106,7 +104,7 @@ const manageDate = (date) => {
:class="{ required: isRequired }"
:rules="mixinRules"
:clearable="false"
@click="isPopupOpen = true"
@click="isPopupOpen = !isPopupOpen"
hide-bottom-space
>
<template #append>
@ -125,13 +123,6 @@ const manageDate = (date) => {
isPopupOpen = false;
"
/>
<QIcon
v-if="showEvent"
name="event"
class="cursor-pointer"
@click="isPopupOpen = !isPopupOpen"
:title="t('Open date')"
/>
</template>
<QMenu
v-if="$q.screen.gt.xs"
@ -151,15 +142,6 @@ const manageDate = (date) => {
</QInput>
</div>
</template>
<style lang="scss">
.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
border-bottom-style: solid;
}
.vn-input-date.q-field--outlined.q-field--readonly .q-field__control:before {
border-style: solid;
}
</style>
<i18n>
es:
Open date: Abrir fecha

View File

@ -1,13 +1,28 @@
<script setup>
import VnInput from 'src/components/common/VnInput.vue';
import { ref } from 'vue';
import { useAttrs } from 'vue';
defineProps({
step: { type: Number, default: 0.01 },
decimalPlaces: { type: Number, default: 2 },
positive: { type: Boolean, default: true },
});
const model = defineModel({ type: [Number, String] });
const $attrs = useAttrs();
const step = ref($attrs.step || 0.01);
</script>
<template>
<VnInput v-bind="$attrs" v-model.number="model" type="number" :step="step" />
<VnInput
v-bind="$attrs"
v-model.number="model"
type="number"
:step="step"
@input="
(evt) => {
const val = evt.target.value;
if (positive && val < 0) return (model = 0);
const [, decimal] = val.split('.');
if (val && decimal?.length > decimalPlaces)
model = parseFloat(val).toFixed(decimalPlaces);
}
"
/>
</template>

View File

@ -0,0 +1,31 @@
<script setup>
import VnInput from 'src/components/common/VnInput.vue';
import { ref } from 'vue';
const model = defineModel({ type: [Number, String] });
const $props = defineProps({
toggleVisibility: {
type: Boolean,
default: false,
},
});
const showPassword = ref(false);
</script>
<template>
<VnInput
v-bind="{ ...$attrs }"
v-model="model"
:type="
$props.toggleVisibility ? (showPassword ? 'text' : 'password') : $attrs.type
"
>
<template #append v-if="toggleVisibility">
<QIcon
:name="showPassword ? 'visibility_off' : 'visibility'"
class="cursor-pointer"
@click="showPassword = !showPassword"
/>
</template>
</VnInput>
</template>

View File

@ -1,13 +1,11 @@
<script setup>
import { computed, ref, useAttrs } from 'vue';
import { useI18n } from 'vue-i18n';
import { date } from 'quasar';
import VnTime from './VnTime.vue';
import { useRequired } from 'src/composables/useRequired';
const $attrs = useAttrs();
const { isRequired, requiredFieldRule } = useRequired($attrs);
const { t } = useI18n();
const model = defineModel({ type: String });
const props = defineProps({
timeOnly: {
@ -80,7 +78,7 @@ function dateToTime(newDate) {
:class="{ required: isRequired }"
style="min-width: 100px"
:rules="mixinRules"
@click="isPopupOpen = false"
@click="isPopupOpen = !isPopupOpen"
type="time"
hide-bottom-space
>
@ -100,12 +98,6 @@ function dateToTime(newDate) {
isPopupOpen = false;
"
/>
<QIcon
name="Schedule"
class="cursor-pointer"
@click="isPopupOpen = !isPopupOpen"
:title="t('Open time')"
/>
</template>
<QMenu
v-if="$q.screen.gt.xs"

View File

@ -2,7 +2,7 @@
import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import VnSelectDialog from 'components/common/VnSelectDialog.vue';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import { computed } from 'vue';
import { useAttrs } from 'vue';
import { useRequired } from 'src/composables/useRequired';
const { t } = useI18n();
@ -26,7 +26,7 @@ const locationProperties = [
(obj) => obj.country?.name,
];
const formatLocation = (obj, properties) => {
const formatLocation = (obj, properties = locationProperties) => {
const parts = properties.map((prop) => {
if (typeof prop === 'string') {
return obj[prop];
@ -43,7 +43,7 @@ const formatLocation = (obj, properties) => {
return filteredParts.join(', ');
};
const modelValue = ref(
const modelValue = computed(() =>
props.location ? formatLocation(props.location, locationProperties) : null
);
@ -75,7 +75,6 @@ const handleModelValue = (data) => {
:input-debounce="300"
:class="{ required: isRequired }"
v-bind="$attrs"
clearable
:emit-value="false"
:tooltip="t('Create new location')"
:rules="mixinRules"

View File

@ -238,6 +238,7 @@ async function openPointRecord(id, modelLog) {
pointRecord.value = parseProps(propNames, locale, data);
}
async function setLogTree(data) {
if (!data) return;
logTree.value = getLogTree(data);
}

View File

@ -1,8 +1,8 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import LeftMenu from 'components/LeftMenu.vue';
import { onMounted } from 'vue';
import { onMounted, ref } from 'vue';
import { useQuasar } from 'quasar';
import LeftMenu from '../LeftMenu.vue';
const stateStore = useStateStore();
const $props = defineProps({
@ -14,12 +14,29 @@ const $props = defineProps({
onMounted(
() => (stateStore.leftDrawer = useQuasar().screen.gt.xs ? $props.leftDrawer : false)
);
const teleportRef = ref({});
const hasContent = ref();
let observer;
onMounted(() => {
if (!teleportRef.value) return;
const checkContent = () => {
hasContent.value = teleportRef.value?.innerHTML?.trim() !== '';
};
observer = new MutationObserver(checkContent);
observer.observe(teleportRef.value, { childList: true, subtree: true });
checkContent();
});
</script>
<template>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit text-grey-8">
<LeftMenu />
<div id="left-panel" ref="teleportRef"></div>
<LeftMenu v-if="!hasContent" />
</QScrollArea>
</QDrawer>
<QPageContainer>

View File

@ -0,0 +1,94 @@
<script setup>
import RightMenu from './RightMenu.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import VnTableFilter from '../VnTable/VnTableFilter.vue';
import { onBeforeMount, computed } from 'vue';
import { useArrayData } from 'src/composables/useArrayData';
import { useRoute } from 'vue-router';
const $props = defineProps({
section: {
type: String,
default: null,
},
dataKey: {
type: String,
default: null,
},
searchBar: {
type: Boolean,
default: true,
},
prefix: {
type: String,
default: null,
},
rightFilter: {
type: Boolean,
default: true,
},
columns: {
type: Array,
default: null,
},
arrayDataProps: {
type: Object,
default: null,
},
redirect: {
type: Boolean,
default: true,
},
keepData: {
type: Boolean,
default: true,
},
});
const route = useRoute();
let arrayData;
const sectionValue = computed(() => $props.section ?? $props.dataKey);
const isMainSection = computed(() => {
const isSame = sectionValue.value == route.name;
if (!isSame && arrayData) {
arrayData.reset(['userParams', 'userFilter']);
}
return isSame;
});
onBeforeMount(() => {
if ($props.dataKey)
arrayData = useArrayData($props.dataKey, {
searchUrl: 'table',
keepData: $props.keepData,
...$props.arrayDataProps,
navigate: $props.redirect,
});
});
</script>
<template>
<slot name="searchbar">
<VnSearchbar
v-if="searchBar"
v-bind="arrayDataProps"
:data-key="dataKey"
:label="$t(`${prefix}.search`)"
:info="$t(`${prefix}.searchInfo`)"
/>
</slot>
<RightMenu>
<template #right-panel v-if="$slots['rightMenu'] || rightFilter">
<slot name="rightMenu">
<VnTableFilter
v-if="rightFilter && columns"
:data-key="dataKey"
:array-data="arrayData"
:columns="columns"
/>
</slot>
</template>
</RightMenu>
<slot name="body" v-if="isMainSection" />
<RouterView v-else />
</template>

View File

@ -4,11 +4,19 @@ import { useI18n } from 'vue-i18n';
import { useArrayData } from 'src/composables/useArrayData';
import { useRequired } from 'src/composables/useRequired';
import dataByOrder from 'src/utils/dataByOrder';
import { QItemLabel } from 'quasar';
const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
const $attrs = useAttrs();
const { t } = useI18n();
const { isRequired, requiredFieldRule } = useRequired($attrs);
const isRequired = computed(() => {
return useRequired($attrs).isRequired;
});
const requiredFieldRule = computed(() => {
return useRequired($attrs).requiredFieldRule;
});
const $props = defineProps({
modelValue: {
type: [String, Number, Object],
@ -26,6 +34,10 @@ const $props = defineProps({
type: String,
default: 'id',
},
optionCaption: {
type: String,
default: null,
},
optionFilter: {
type: String,
default: null,
@ -94,11 +106,22 @@ const $props = defineProps({
type: String,
default: null,
},
isOutlined: {
type: Boolean,
default: false,
},
});
const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
const { optionLabel, optionValue, optionFilter, optionFilterValue, options, modelValue } =
toRefs($props);
const {
optionLabel,
optionValue,
optionCaption,
optionFilter,
optionFilterValue,
options,
modelValue,
} = toRefs($props);
const myOptions = ref([]);
const myOptionsOriginal = ref([]);
const vnSelectRef = ref();
@ -108,6 +131,15 @@ const noOneOpt = ref({
[optionValue.value]: false,
[optionLabel.value]: noOneText,
});
const styleAttrs = computed(() => {
return $props.isOutlined
? {
dense: true,
outlined: true,
rounded: true,
}
: {};
});
const isLoading = ref(false);
const useURL = computed(() => $props.url);
const value = computed({
@ -141,7 +173,11 @@ onMounted(() => {
const arrayDataKey =
$props.dataKey ?? ($props.url?.length > 0 ? $props.url : $attrs.name ?? $attrs.label);
const arrayData = useArrayData(arrayDataKey, { url: $props.url, searchUrl: false });
const arrayData = useArrayData(arrayDataKey, {
url: $props.url,
searchUrl: false,
mapKey: $attrs['map-key'],
});
function findKeyInOptions() {
if (!$props.options) return;
@ -169,10 +205,10 @@ function filter(val, options) {
}
if (!row) return;
const id = row[$props.optionValue];
const id = String(row[$props.optionValue]);
const optionLabel = String(row[$props.optionLabel]).toLowerCase();
return id == search || optionLabel.includes(search);
return id.includes(search) || optionLabel.includes(search);
});
}
@ -199,7 +235,7 @@ async function fetchFilter(val) {
const fetchOptions = { where, include, limit };
if (fields) fetchOptions.fields = fields;
if (sortBy) fetchOptions.order = sortBy;
arrayData.reset(['skip', 'filter.skip', 'page']);
arrayData.resetPagination();
const { data } = await arrayData.applyFilter({ filter: fetchOptions });
setOptions(data);
@ -261,7 +297,7 @@ async function onScroll({ to, direction, from, index }) {
defineExpose({ opts: myOptions });
function handleKeyDown(event) {
if (event.key === 'Tab') {
if (event.key === 'Tab' && !event.shiftKey) {
event.preventDefault();
const inputValue = vnSelectRef.value?.inputValue;
@ -279,8 +315,24 @@ function handleKeyDown(event) {
}
vnSelectRef.value?.hidePopup();
}
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])'
);
const currentIndex = Array.prototype.indexOf.call(
focusableElements,
event.target
);
if (currentIndex >= 0 && currentIndex < focusableElements.length - 1) {
focusableElements[currentIndex + 1].focus();
}
}
}
function getCaption(opt) {
if (optionCaption.value === false) return;
return opt[optionCaption.value] || opt[optionValue.value];
}
</script>
<template>
@ -289,9 +341,8 @@ function handleKeyDown(event) {
:options="myOptions"
:option-label="optionLabel"
:option-value="optionValue"
v-bind="$attrs"
v-bind="{ ...$attrs, ...styleAttrs }"
@filter="filterHandler"
@keydown="handleKeyDown"
:emit-value="nullishToTrue($attrs['emit-value'])"
:map-options="nullishToTrue($attrs['map-options'])"
:use-input="nullishToTrue($attrs['use-input'])"
@ -306,13 +357,15 @@ function handleKeyDown(event) {
:input-debounce="useURL ? '300' : '0'"
:loading="isLoading"
@virtual-scroll="onScroll"
@keydown="handleKeyDown"
:data-cy="$attrs.dataCy ?? $attrs.label + '_select'"
:data-url="url"
>
<template v-if="isClearable" #append>
<template #append>
<QIcon
v-show="value"
v-show="isClearable && value"
name="close"
@click.stop="
@click="
() => {
value = null;
emit('remove');
@ -323,7 +376,38 @@ function handleKeyDown(event) {
/>
</template>
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
<div v-if="slotName == 'append'">
<QIcon
v-show="isClearable && value"
name="close"
@click.stop="
() => {
value = null;
emit('remove');
}
"
class="cursor-pointer"
size="xs"
/>
<slot name="append" v-if="$slots.append" v-bind="slotData ?? {}" />
</div>
<slot v-else :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
</template>
<template #option="{ opt, itemProps }">
<QItem v-bind="itemProps">
<QItemSection v-if="typeof opt !== 'object'"> {{ opt }}</QItemSection>
<QItemSection v-else-if="opt[optionValue] == opt[optionLabel]">
<QItemLabel>{{ opt[optionLabel] }}</QItemLabel>
</QItemSection>
<QItemSection v-else>
<QItemLabel>
{{ opt[optionLabel] }}
</QItemLabel>
<QItemLabel caption v-if="getCaption(opt)">
{{ `#${getCaption(opt)}` }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</QSelect>
</template>

View File

@ -43,6 +43,7 @@ const isAllowedToCreate = computed(() => {
>
<template v-if="isAllowedToCreate" #append>
<QIcon
:data-cy="$attrs.dataCy ?? $attrs.label + '_icon'"
@click.stop.prevent="$refs.dialog.show()"
:name="actionIcon"
:size="actionIcon === 'add' ? 'xs' : 'sm'"

View File

@ -0,0 +1,86 @@
<script setup>
import { computed, useAttrs } from 'vue';
import VnSelect from 'components/common/VnSelect.vue';
import VnAvatar from 'src/components/ui/VnAvatar.vue';
const emit = defineEmits(['update:modelValue']);
const $props = defineProps({
hasAvatar: {
type: Boolean,
default: false,
},
hasInfo: {
type: Boolean,
default: false,
},
modelValue: {
type: [String, Number, Object],
default: null,
},
});
const $attrs = useAttrs();
const value = computed({
get() {
return $props.modelValue;
},
set(val) {
emit('update:modelValue', val);
},
});
const url = computed(() => {
let url = 'Workers/search';
const { departmentCodes } = $attrs.params ?? {};
if (!departmentCodes) return url;
const params = new URLSearchParams({
departmentCodes: JSON.stringify(departmentCodes),
});
return url.concat(`?${params.toString()}`);
});
</script>
<template>
<VnSelect
:label="$t('globals.worker')"
v-bind="$attrs"
v-model="value"
:url="url"
option-value="id"
option-label="nickname"
:fields="['id', 'name', 'nickname', 'code']"
:filter-options="['id', 'name', 'nickname', 'code']"
sort-by="nickname ASC"
>
<template #prepend v-if="$props.hasAvatar">
<VnAvatar :worker-id="value" color="primary" :title="title" />
</template>
<template #append v-if="$props.hasInfo">
<QIcon name="info" class="cursor-pointer">
<QTooltip>{{ $t($props.hasInfo) }}</QTooltip>
</QIcon>
</template>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ scope.opt.name }}
</QItemLabel>
<QItemLabel v-if="!scope.opt.id">
{{ scope.opt.nickname }}
</QItemLabel>
<QItemLabel caption v-else>
#{{ scope.opt.id }}, {{ scope.opt.nickname }}, {{ scope.opt.code }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</template>
<i18n>
es:
Responsible for approving invoices: Responsable de aprobar las facturas
</i18n>

View File

@ -0,0 +1,28 @@
import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
import { createWrapper } from 'app/test/vitest/helper';
import VnDiscount from 'components/common/vnDiscount.vue';
describe('VnDiscount', () => {
let vm;
beforeAll(() => {
vm = createWrapper(VnDiscount, {
props: {
data: {},
price: 100,
quantity: 2,
discount: 10,
}
}).vm;
});
afterEach(() => {
vi.clearAllMocks();
});
describe('total', () => {
it('should calculate total correctly', () => {
expect(vm.total).toBe(180);
});
});
});

View File

@ -0,0 +1,87 @@
import { createWrapper, axios } from 'app/test/vitest/helper';
import VnDmsList from 'src/components/common/VnDmsList.vue';
import { vi, afterEach, beforeAll, describe, expect, it } from 'vitest';
describe('VnDmsList', () => {
let vm;
const dms = {
userFk: 1,
name: 'DMS 1'
};
beforeAll(() => {
vi.spyOn(axios, 'get').mockResolvedValue({ data: [] });
vm = createWrapper(VnDmsList, {
props: {
model: 'WorkerDms/1110/filter',
defaultDmsCode: 'hhrrData',
filter: 'wd.workerFk',
updateModel: 'Workers',
deleteModel: 'WorkerDms',
downloadModel: 'WorkerDms'
}
}).vm;
});
afterEach(() => {
vi.clearAllMocks();
});
describe('setData()', () => {
const data = [
{
userFk: 1,
name: 'Jessica',
lastName: 'Jones',
file: '4.jpg',
created: '2021-07-28 21:00:00'
},
{
userFk: 2,
name: 'Bruce',
lastName: 'Banner',
created: '2022-07-28 21:00:00',
dms: {
userFk: 2,
name: 'Bruce',
lastName: 'BannerDMS',
created: '2022-07-28 21:00:00',
file: '4.jpg',
}
},
{
userFk: 3,
name: 'Natasha',
lastName: 'Romanoff',
file: '4.jpg',
created: '2021-10-28 21:00:00'
}
]
it('Should replace objects that contain the "dms" property with the value of the same and sort by creation date', () => {
vm.setData(data);
expect([vm.rows][0][0].lastName).toEqual('BannerDMS');
expect([vm.rows][0][1].lastName).toEqual('Romanoff');
});
});
describe('parseDms()', () => {
const resultDms = { ...dms, userId:1};
it('Should add properties that end with "Fk" by changing the suffix to "Id"', () => {
const parsedDms = vm.parseDms(dms);
expect(parsedDms).toEqual(resultDms);
});
});
describe('showFormDialog()', () => {
const resultDms = { ...dms, userId:1};
it('should call fn parseDms() and set show true if dms is defined', () => {
vm.showFormDialog(dms);
expect(vm.formDialog.show).toEqual(true);
expect(vm.formDialog.dms).toEqual(resultDms);
});
});
});

View File

@ -0,0 +1,95 @@
import { describe, it, expect } from 'vitest';
import VnJsonValue from 'src/components/common/VnJsonValue.vue';
import { createWrapper } from 'app/test/vitest/helper';
const buildComponent = (props) => {
return createWrapper(VnJsonValue, {
props,
}).wrapper;
};
describe('VnJsonValue', () => {
it('renders null value correctly', async () => {
const wrapper = buildComponent({ value: null });
const span = wrapper.find('span');
expect(span.text()).toBe('∅');
expect(span.classes()).toContain('json-null');
});
it('renders boolean true correctly', async () => {
const wrapper = buildComponent({ value: true });
const span = wrapper.find('span');
expect(span.text()).toBe('✓');
expect(span.classes()).toContain('json-true');
});
it('renders boolean false correctly', async () => {
const wrapper = buildComponent({ value: false });
const span = wrapper.find('span');
expect(span.text()).toBe('✗');
expect(span.classes()).toContain('json-false');
});
it('renders a short string correctly', async () => {
const wrapper = buildComponent({ value: 'Hello' });
const span = wrapper.find('span');
expect(span.text()).toBe('Hello');
expect(span.classes()).toContain('json-string');
});
it('renders a long string correctly with ellipsis', async () => {
const longString = 'a'.repeat(600);
const wrapper = buildComponent({ value: longString });
const span = wrapper.find('span');
expect(span.text()).toContain('...');
expect(span.text().length).toBeLessThanOrEqual(515);
expect(span.attributes('title')).toBe(longString);
expect(span.classes()).toContain('json-string');
});
it('renders a number correctly', async () => {
const wrapper = buildComponent({ value: 123.4567 });
const span = wrapper.find('span');
expect(span.text()).toBe('123.457');
expect(span.classes()).toContain('json-number');
});
it('renders an integer correctly', async () => {
const wrapper = buildComponent({ value: 42 });
const span = wrapper.find('span');
expect(span.text()).toBe('42');
expect(span.classes()).toContain('json-number');
});
it('renders a date correctly', async () => {
const date = new Date('2023-01-01');
const wrapper = buildComponent({ value: date });
const span = wrapper.find('span');
expect(span.text()).toBe('2023-01-01');
expect(span.classes()).toContain('json-object');
});
it('renders an object correctly', async () => {
const obj = { key: 'value' };
const wrapper = buildComponent({ value: obj });
const span = wrapper.find('span');
expect(span.text()).toBe(obj.toString());
expect(span.classes()).toContain('json-object');
});
it('renders an array correctly', async () => {
const arr = [1, 2, 3];
const wrapper = buildComponent({ value: arr });
const span = wrapper.find('span');
expect(span.text()).toBe(arr.toString());
expect(span.classes()).toContain('json-object');
});
it('updates value when prop changes', async () => {
const wrapper = buildComponent({ value: true });
await wrapper.setProps({ value: 123 });
const span = wrapper.find('span');
expect(span.text()).toBe('123');
expect(span.classes()).toContain('json-number');
});
});

View File

@ -0,0 +1,91 @@
import { createWrapper } from 'app/test/vitest/helper';
import VnLocation from 'components/common/VnLocation.vue';
import { vi, afterEach, expect, it, beforeEach, describe } from 'vitest';
function buildComponent(data) {
return createWrapper(VnLocation, {
global: {
props: {
location: data
}
},
}).vm;
}
afterEach(() => {
vi.clearAllMocks();
});
describe('formatLocation', () => {
let locationBase;
beforeEach(() => {
locationBase = {
postcode: '46680',
city: 'Algemesi',
province: { name: 'Valencia' },
country: { name: 'Spain' }
};
});
it('should return the postcode, city, province and country', () => {
const location = { ...locationBase };
const vm = buildComponent(location);
expect(vm.formatLocation(location)).toEqual('46680, Algemesi(Valencia), Spain');
});
it('should return the postcode and country', () => {
const location = { ...locationBase, city: undefined };
const vm = buildComponent(location);
expect(vm.formatLocation(location)).toEqual('46680, Spain');
});
it('should return the city, province and country', () => {
const location = { ...locationBase, postcode: undefined };
const vm = buildComponent(location);
expect(vm.formatLocation(location)).toEqual('Algemesi(Valencia), Spain');
});
it('should return the country', () => {
const location = { ...locationBase, postcode: undefined, city: undefined, province: undefined };
const vm = buildComponent(location);
expect(vm.formatLocation(location)).toEqual('Spain');
});
});
describe('showLabel', () => {
let locationBase;
beforeEach(() => {
locationBase = {
code: '46680',
town: 'Algemesi',
province: 'Valencia',
country: 'Spain'
};
});
it('should show the label with postcode, city, province and country', () => {
const location = { ...locationBase };
const vm = buildComponent(location);
expect(vm.showLabel(location)).toEqual('46680, Algemesi(Valencia), Spain');
});
it('should show the label with postcode and country', () => {
const location = { ...locationBase, town: undefined };
const vm = buildComponent(location);
expect(vm.showLabel(location)).toEqual('46680, Spain');
});
it('should show the label with city, province and country', () => {
const location = { ...locationBase, code: undefined };
const vm = buildComponent(location);
expect(vm.showLabel(location)).toEqual('Algemesi(Valencia), Spain');
});
it('should show the label with country', () => {
const location = { ...locationBase, code: undefined, town: undefined, province: undefined };
const vm = buildComponent(location);
expect(vm.showLabel(location)).toEqual('Spain');
});
});

View File

@ -0,0 +1,107 @@
import { describe, it, expect, vi, beforeAll, afterEach, beforeEach } from 'vitest';
import { createWrapper, axios } from 'app/test/vitest/helper';
import VnNotes from 'src/components/ui/VnNotes.vue';
describe('VnNotes', () => {
let vm;
let wrapper;
let spyFetch;
let postMock;
let expectedBody;
const mockData= {name: 'Tony', lastName: 'Stark', text: 'Test Note', observationTypeFk: 1};
function generateExpectedBody() {
expectedBody = {...vm.$props.body, ...{ text: vm.newNote.text, observationTypeFk: vm.newNote.observationTypeFk }};
}
async function setTestParams(text, observationType, type){
vm.newNote.text = text;
vm.newNote.observationTypeFk = observationType;
wrapper.setProps({ selectType: type });
}
beforeAll(async () => {
vi.spyOn(axios, 'get').mockReturnValue({ data: [] });
wrapper = createWrapper(VnNotes, {
propsData: {
url: '/test',
body: { name: 'Tony', lastName: 'Stark' },
}
});
wrapper = wrapper.wrapper;
vm = wrapper.vm;
});
beforeEach(() => {
postMock = vi.spyOn(axios, 'post').mockResolvedValue(mockData);
spyFetch = vi.spyOn(vm.vnPaginateRef, 'fetch').mockImplementation(() => vi.fn());
});
afterEach(() => {
vi.clearAllMocks();
expectedBody = {};
});
describe('insert', () => {
it('should not call axios.post and vnPaginateRef.fetch if newNote.text is null', async () => {
await setTestParams( null, null, true );
await vm.insert();
expect(postMock).not.toHaveBeenCalled();
expect(spyFetch).not.toHaveBeenCalled();
});
it('should not call axios.post and vnPaginateRef.fetch if newNote.text is empty', async () => {
await setTestParams( "", null, false );
await vm.insert();
expect(postMock).not.toHaveBeenCalled();
expect(spyFetch).not.toHaveBeenCalled();
});
it('should not call axios.post and vnPaginateRef.fetch if observationTypeFk is missing and selectType is true', async () => {
await setTestParams( "Test Note", null, true );
await vm.insert();
expect(postMock).not.toHaveBeenCalled();
expect(spyFetch).not.toHaveBeenCalled();
});
it('should call axios.post and vnPaginateRef.fetch if observationTypeFk is missing and selectType is false', async () => {
await setTestParams( "Test Note", null, false );
generateExpectedBody();
await vm.insert();
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();
});
it('should call axios.post and vnPaginateRef.fetch when newNote is valid', async () => {
await setTestParams( "Test Note", 1, true );
generateExpectedBody();
await vm.insert();
expect(postMock).toHaveBeenCalledWith(vm.$props.url, expectedBody);
expect(spyFetch).toHaveBeenCalled();
});
});
});

View File

@ -222,8 +222,8 @@ const toModule = computed(() =>
/>
</template>
<style lang="scss">
.body {
<style lang="scss" scoped>
:deep(.body) {
background-color: var(--vn-section-color);
.text-h5 {
font-size: 20px;
@ -262,9 +262,7 @@ const toModule = computed(() =>
}
}
}
</style>
<style lang="scss" scoped>
.title {
overflow: hidden;
text-overflow: ellipsis;

View File

@ -1,10 +1,10 @@
<script setup>
import { ref, computed, watch, onBeforeMount } from 'vue';
import { ref, computed, watch, onBeforeMount, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import { useArrayData } from 'src/composables/useArrayData';
import { isDialogOpened } from 'src/filters';
import { useStateStore } from 'src/stores/useStateStore';
const props = defineProps({
url: {
@ -40,6 +40,7 @@ const { store } = arrayData;
const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
const isLoading = ref(false);
const stateStore = useStateStore();
defineExpose({
entity,
fetch,
@ -51,6 +52,9 @@ onBeforeMount(async () => {
watch(props, async () => await fetch());
});
onMounted(() => {
stateStore.rightDrawerChangeValue(false);
});
async function fetch() {
store.url = props.url;
store.filter = props.filter ?? {};
@ -60,7 +64,6 @@ async function fetch() {
isLoading.value = false;
}
</script>
<template>
<div class="summary container">
<QCard class="cardSummary">
@ -81,7 +84,7 @@ async function fetch() {
<span v-else></span>
</slot>
<slot name="header" :entity="entity" dense>
<VnLv :label="`${entity.id} -`" :value="entity.name" />
{{ entity.id + ' - ' + entity.name }}
</slot>
<slot name="header-right" :entity="entity">
<span></span>
@ -94,7 +97,6 @@ async function fetch() {
</QCard>
</div>
</template>
<style lang="scss">
.summary.container {
display: flex;

View File

@ -1,5 +1,5 @@
<script setup>
import { ref } from 'vue';
import { ref, toRef } from 'vue';
import { useI18n } from 'vue-i18n';
import VnLv from 'components/ui/VnLv.vue';
@ -13,7 +13,7 @@ const DEFAULT_PRICE_KG = 0;
const { t } = useI18n();
defineProps({
const props = defineProps({
item: {
type: Object,
required: true,
@ -25,57 +25,63 @@ defineProps({
});
const dialog = ref(null);
const card = toRef(props, 'item');
</script>
<template>
<div class="container order-catalog-item overflow-hidden">
<QCard class="card shadow-6">
<div class="img-wrapper">
<VnImg :id="item.id" class="image" zoom-resolution="1600x900" />
<div v-if="item.hex && isCatalog" class="item-color-container">
<VnImg :id="card.id" class="image" zoom-resolution="1600x900" />
<div v-if="card.hex && isCatalog" class="item-color-container">
<div
class="item-color"
:style="{ backgroundColor: `#${item.hex}` }"
:style="{ backgroundColor: `#${card.hex}` }"
></div>
</div>
</div>
<div class="content">
<span class="link">
{{ item.name }}
<ItemDescriptorProxy :id="item.id" />
{{ card.name }}
<ItemDescriptorProxy :id="card.id" />
</span>
<p class="subName">{{ item.subName }}</p>
<p class="subName">{{ card.subName }}</p>
<template v-for="index in 4" :key="`tag-${index}`">
<VnLv
v-if="item?.[`tag${index + 4}`]"
:label="item?.[`tag${index + 4}`] + ':'"
:value="item?.[`value${index + 4}`]"
v-if="card?.[`tag${index + 4}`]"
:label="card?.[`tag${index + 4}`] + ':'"
:value="card?.[`value${index + 4}`]"
/>
</template>
<div v-if="item.minQuantity" class="min-quantity">
<div v-if="card.minQuantity" class="min-quantity">
<QIcon name="production_quantity_limits" size="xs" />
{{ item.minQuantity }}
{{ card.minQuantity }}
</div>
<div class="footer">
<div class="price">
<p v-if="isCatalog">
{{ item.available }} {{ t('to') }}
{{ toCurrency(item.price) }}
{{ card.available }} {{ t('to') }}
{{ toCurrency(card.price) }}
</p>
<slot name="price" />
<QIcon v-if="isCatalog" name="add_circle" class="icon">
<QTooltip>{{ t('globals.add') }}</QTooltip>
<QPopupProxy ref="dialog">
<OrderCatalogItemDialog
:prices="item.prices"
@added="() => dialog.hide()"
:item="card"
@added="
(quantityAdded) => {
card.available += quantityAdded;
dialog.hide();
}
"
/>
</QPopupProxy>
</QIcon>
</div>
<p v-if="item.priceKg" class="price-kg">
<p v-if="card.priceKg" class="price-kg">
{{ t('price-kg') }}
{{ toCurrency(item.priceKg) || DEFAULT_PRICE_KG }}
{{ toCurrency(card.priceKg) || DEFAULT_PRICE_KG }}
</p>
</div>
</div>

View File

@ -16,7 +16,13 @@ const $props = defineProps({
required: false,
default: 'value',
},
columns: {
type: Number,
required: false,
default: null,
},
});
const tags = computed(() => {
return Object.keys($props.item)
.filter((i) => i.startsWith(`${$props.tag}`))
@ -28,10 +34,21 @@ const tags = computed(() => {
return acc;
}, {});
});
const columnStyle = computed(() => {
if ($props.columns) {
return {
'grid-template-columns': `repeat(${$props.columns}, 1fr)`,
'max-width': `${$props.columns * 4}rem`,
};
}
return {};
});
</script>
<template>
<div class="fetchedTags">
<div class="wrap">
<div class="wrap" :style="columnStyle">
<div
v-for="(val, key) in tags"
:key="key"
@ -39,37 +56,43 @@ const tags = computed(() => {
:title="`${key}: ${val}`"
:class="{ empty: !val }"
>
{{ val }}
<span class="text">{{ val }} </span>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.fetchedTags {
align-items: center;
.wrap {
width: 100%;
flex-wrap: wrap;
display: flex;
display: grid;
}
.inline-tag {
display: flex;
align-items: center;
justify-content: center;
height: 1rem;
margin: 0.05rem;
color: $color-font-secondary;
color: var(--vn-label-color);
text-align: center;
font-size: smaller;
padding: 1px;
flex: 1;
border: 1px solid $color-spacer;
border: 1px solid var(--vn-label-color);
text-overflow: ellipsis;
overflow: hidden;
min-width: 4rem;
max-width: 4rem;
}
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: smaller;
}
.empty {
border: 1px solid #2b2b2b;
border: 1px solid var(--vn-empty-tag);
}
}
</style>

View File

@ -6,7 +6,7 @@ import { useColor } from 'src/composables/useColor';
import { getCssVar } from 'quasar';
const $props = defineProps({
workerId: { type: Number, required: true },
workerId: { type: [Number, undefined], default: null },
description: { type: String, default: null },
title: { type: String, default: null },
color: { type: String, default: null },
@ -38,7 +38,13 @@ watch(src, () => (showLetter.value = false));
<template v-if="showLetter">
{{ title.charAt(0) }}
</template>
<QImg v-else :src="src" spinner-color="white" @error="showLetter = true" />
<QImg
v-else-if="workerId"
:src="src"
spinner-color="white"
@error="showLetter = true"
/>
<QIcon v-else name="mood" size="xs" />
</QAvatar>
<div class="description">
<slot name="description" v-if="description">

View File

@ -98,6 +98,7 @@ function cancel() {
/>
<QBtn
:label="t('globals.confirm')"
:title="t('globals.confirm')"
color="primary"
:loading="isLoading"
@click="confirm()"

View File

@ -1,12 +1,14 @@
<script setup>
import { onMounted, ref, computed, watch } from 'vue';
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useArrayData } from 'composables/useArrayData';
import { useRoute } from 'vue-router';
import toDate from 'filters/toDate';
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
import { useFilterParams } from 'src/composables/useFilterParams';
import { useRoute } from 'vue-router';
const { t } = useI18n();
const { t, te } = useI18n();
const route = useRoute();
const $props = defineProps({
modelValue: {
type: Object,
@ -55,62 +57,35 @@ const $props = defineProps({
type: Boolean,
default: true,
},
arrayData: {
type: Object,
default: null,
},
});
const emit = defineEmits([
'update:modelValue',
'refresh',
'clear',
'search',
'init',
'remove',
'setUserParams',
]);
const arrayData = useArrayData($props.dataKey, {
exprBuilder: $props.exprBuilder,
searchUrl: $props.searchUrl,
navigate: $props.redirect ? {} : null,
});
const route = useRoute();
const arrayData =
$props.arrayData ??
useArrayData($props.dataKey, {
exprBuilder: $props.exprBuilder,
searchUrl: $props.searchUrl,
navigate: $props.redirect ? {} : null,
});
const store = arrayData.store;
const userParams = ref({});
const userParams = ref(useFilterParams($props.dataKey).params);
const userOrders = ref(useFilterParams($props.dataKey).orders);
defineExpose({ search, sanitizer, params: userParams });
onMounted(() => {
userParams.value = $props.modelValue ?? {};
emit('init', { params: userParams.value });
});
function setUserParams(watchedParams) {
if (!watchedParams || Object.keys(watchedParams).length == 0) return;
if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
if (typeof watchedParams?.filter == 'string')
watchedParams.filter = JSON.parse(watchedParams.filter);
watchedParams = { ...watchedParams, ...watchedParams.filter?.where };
const order = watchedParams.filter?.order;
delete watchedParams.filter;
userParams.value = sanitizer(watchedParams);
emit('setUserParams', userParams.value, order);
}
watch(
() => route.query[$props.searchUrl],
(val, oldValue) => (val || oldValue) && setUserParams(val)
);
watch(
() => arrayData.store.userParams,
(val, oldValue) => (val || oldValue) && setUserParams(val)
);
watch(
() => $props.modelValue,
(val) => (userParams.value = val ?? {})
);
defineExpose({ search, params: userParams, remove });
const isLoading = ref(false);
async function search(evt) {
@ -121,10 +96,9 @@ async function search(evt) {
isLoading.value = true;
const filter = { ...userParams.value, ...$props.modelValue };
store.userParamsChanged = true;
const { params: newParams } = await arrayData.addFilter({
await arrayData.addFilter({
params: filter,
});
userParams.value = newParams;
if (!$props.showAll && !Object.values(filter).length) store.data = [];
emit('search');
@ -137,7 +111,7 @@ async function clearFilters() {
try {
isLoading.value = true;
store.userParamsChanged = true;
arrayData.reset(['skip', 'filter.skip', 'page']);
arrayData.resetPagination();
// Filtrar los params no removibles
const removableFilters = Object.keys(userParams.value).filter((param) =>
$props.unremovableParams.includes(param)
@ -147,9 +121,8 @@ async function clearFilters() {
for (const key of removableFilters) {
newParams[key] = userParams.value[key];
}
userParams.value = {};
userParams.value = { ...newParams }; // Actualizar los params con los removibles
await arrayData.applyFilter({ params: userParams.value });
await arrayData.applyFilter({ params: { ...newParams } });
if (!$props.showAll) {
store.data = [];
@ -212,20 +185,13 @@ function formatValue(value) {
return `"${value}"`;
}
function sanitizer(params) {
for (const [key, value] of Object.entries(params)) {
if (key === 'and' && Array.isArray(value)) {
value.forEach((item) => {
Object.assign(params, item);
});
delete params[key];
} else if (value && typeof value === 'object') {
const param = Object.values(value)[0];
if (typeof param == 'string') params[key] = param.replaceAll('%', '');
}
}
return params;
}
const getLocale = (label) => {
const param = label.split('.').at(-1);
const globalLocale = `globals.params.${param}`;
if (te(globalLocale)) return t(globalLocale);
else if (te(t(`params.${param}`)));
else return t(`${route.meta.moduleName.toLowerCase()}.params.${param}`);
};
</script>
<template>
@ -236,7 +202,11 @@ function sanitizer(params) {
style="position: fixed; z-index: 1; right: 0; bottom: 0"
icon="search"
@click="search()"
></QBtn>
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.search') }}
</QTooltip>
</QBtn>
<QForm @submit="search" id="filterPanelForm" @keyup.enter="search()">
<QList dense>
<QItem class="q-mt-xs">
@ -275,7 +245,12 @@ function sanitizer(params) {
@remove="remove(chip.label)"
data-cy="vnFilterPanelChip"
>
<slot name="tags" :tag="chip" :format-fn="formatValue">
<slot
name="tags"
:tag="chip"
:format-fn="formatValue"
:get-locale="getLocale"
>
<div class="q-gutter-x-xs">
<strong>{{ chip.label }}:</strong>
<span>"{{ formatValue(chip.value) }}"</span>
@ -288,6 +263,7 @@ function sanitizer(params) {
:params="userParams"
:tags="customTags"
:format-fn="formatValue"
:get-locale="getLocale"
:search-fn="search"
/>
</div>
@ -295,7 +271,13 @@ function sanitizer(params) {
<QSeparator />
</QList>
<QList dense class="list q-gutter-y-sm q-mt-sm">
<slot name="body" :params="sanitizer(userParams)" :search-fn="search"></slot>
<slot
name="body"
:get-locale="getLocale"
:params="userParams"
:orders="userOrders"
:search-fn="search"
></slot>
</QList>
</QForm>
<QInnerLoading

View File

@ -1,22 +1,28 @@
<script setup>
import { reactive, useAttrs, onBeforeMount, capitalize } from 'vue';
import { ref, reactive, useAttrs, onBeforeMount, capitalize } from 'vue';
import axios from 'axios';
import { parsePhone } from 'src/filters';
import useOpenURL from 'src/composables/useOpenURL';
const props = defineProps({
phoneNumber: { type: [String, Number], default: null },
channel: { type: Number, default: null },
country: { type: String, default: null },
});
const phone = ref(props.phoneNumber);
const config = reactive({
sip: { icon: 'phone', href: `sip:${props.phoneNumber}` },
'say-simple': {
icon: 'vn:saysimple',
href: null,
url: null,
channel: props.channel,
},
});
const type = Object.keys(config).find((key) => key in useAttrs()) || 'sip';
onBeforeMount(async () => {
if (!phone.value) return;
let { channel } = config[type];
if (type === 'say-simple') {
@ -24,23 +30,28 @@ onBeforeMount(async () => {
.data;
if (!channel) channel = defaultChannel;
phone.value = await parsePhone(props.phoneNumber, props.country.toLowerCase());
config[
type
].href = `${url}?customerIdentity=%2B${props.phoneNumber}&channelId=${channel}`;
].url = `${url}?customerIdentity=%2B${phone.value}&channelId=${channel}`;
}
});
function handleClick() {
if (config[type].url) useOpenURL(config[type].url);
else if (config[type].href) window.location.href = config[type].href;
}
</script>
<template>
<QBtn
v-if="phoneNumber"
v-if="phone"
flat
round
:icon="config[type].icon"
size="sm"
color="primary"
padding="none"
:href="config[type].href"
@click.stop
@click.stop="handleClick"
>
<QTooltip>
{{ capitalize(type).replace('-', '') }}

View File

@ -39,7 +39,7 @@ const val = computed(() => $props.value);
<template v-else>
<div v-if="label || $slots.label" class="label">
<slot name="label">
<span>{{ label }}</span>
<span style="color: var(--vn-label-color)">{{ label }}</span>
</slot>
</div>
<div class="value">

View File

@ -6,7 +6,6 @@ import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { toDateHourMin } from 'src/filters';
import { useState } from 'src/composables/useState';
import VnPaginate from 'components/ui/VnPaginate.vue';
import VnUserLink from 'components/ui/VnUserLink.vue';
@ -26,9 +25,7 @@ const $props = defineProps({
});
const { t } = useI18n();
const state = useState();
const quasar = useQuasar();
const currentUser = ref(state.getUser());
const newNote = reactive({ text: null, observationTypeFk: null });
const observationTypes = ref([]);
const vnPaginateRef = ref();
@ -101,6 +98,7 @@ onBeforeRouteLeave((to, from, next) => {
@click="insert"
class="q-mb-xs"
dense
data-cy="saveNote"
/>
</template>
</VnInput>
@ -112,7 +110,7 @@ onBeforeRouteLeave((to, from, next) => {
:url="$props.url"
order="created DESC"
:limit="0"
:filter="$props.filter"
:user-filter="$props.filter"
auto-load
ref="vnPaginateRef"
class="show"

View File

@ -74,6 +74,10 @@ const props = defineProps({
type: Boolean,
default: false,
},
mapKey: {
type: String,
default: '',
},
});
const emit = defineEmits(['onFetch', 'onPaginate', 'onChange']);
@ -96,15 +100,20 @@ const arrayData = useArrayData(props.dataKey, {
exprBuilder: props.exprBuilder,
keepOpts: props.keepOpts,
searchUrl: props.searchUrl,
mapKey: props.mapKey,
});
const store = arrayData.store;
onMounted(async () => {
if (props.autoLoad && !store.data?.length) await fetch();
else emit('onFetch', store.data);
mounted.value = true;
});
onBeforeUnmount(() => arrayData.reset());
onBeforeUnmount(() => {
if (!store.keepData) arrayData.reset(['data']);
arrayData.resetPagination();
});
watch(
() => props.data,
@ -132,7 +141,7 @@ const addFilter = async (filter, params) => {
async function fetch(params) {
useArrayData(props.dataKey, params);
arrayData.reset(['filter.skip', 'skip', 'page']);
arrayData.resetPagination();
await arrayData.fetch({ append: false });
return emitStoreData();
}
@ -195,13 +204,20 @@ async function onLoad(index, done) {
done(isDone);
}
defineExpose({ fetch, update, addFilter, paginate });
defineExpose({
fetch,
update,
addFilter,
paginate,
userParams: arrayData.store.userParams,
currentFilter: arrayData.store.currentFilter,
});
</script>
<template>
<div class="full-width">
<div
v-if="!props.autoLoad && !store.data && !isLoading"
v-if="!store.data && !store.data?.length && !isLoading"
class="info-row q-pa-md text-center"
>
<h5>

View File

@ -1,14 +1,16 @@
<script setup>
import { onMounted, ref, watch } from 'vue';
import { onMounted, ref, computed, watch } from 'vue';
import { useQuasar } from 'quasar';
import { useArrayData } from 'composables/useArrayData';
import VnInput from 'src/components/common/VnInput.vue';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'src/stores/useStateStore';
import { useRoute } from 'vue-router';
const quasar = useQuasar();
const { t } = useI18n();
const state = useStateStore();
const route = useRoute();
const props = defineProps({
dataKey: {
@ -51,10 +53,6 @@ const props = defineProps({
type: Object,
default: null,
},
staticParams: {
type: Array,
default: () => [],
},
exprBuilder: {
type: Function,
default: null,
@ -67,6 +65,10 @@ const props = defineProps({
type: Function,
default: undefined,
},
searchRemoveParams: {
type: Boolean,
default: true,
},
});
const searchText = ref();
@ -83,6 +85,17 @@ if (props.redirect)
};
let arrayData = useArrayData(props.dataKey, arrayDataProps);
let store = arrayData.store;
const to = computed(() => {
const url = { path: route.path, query: { ...(route.query ?? {}) } };
const searchUrl = arrayData.store.searchUrl;
const currentFilter = {
...arrayData.store.currentFilter,
search: searchText.value || undefined,
};
if (searchUrl) url.query[searchUrl] = JSON.stringify(currentFilter);
return url;
});
watch(
() => props.dataKey,
@ -100,17 +113,25 @@ onMounted(() => {
});
async function search() {
const staticParams = Object.entries(store.userParams);
arrayData.reset(['skip', 'page']);
const staticParams = Object.keys(store.userParams ?? {}).length
? store.userParams
: store.defaultParams;
arrayData.resetPagination();
const filter = {
params: {
...Object.fromEntries(staticParams),
search: searchText.value,
},
...{ filter: props.filter },
filter: props.filter,
};
if (!props.searchRemoveParams || !searchText.value) {
filter.params = {
...staticParams,
search: searchText.value,
};
}
if (props.whereFilter) {
filter.filter = {
where: props.whereFilter(searchText.value),
@ -118,28 +139,38 @@ async function search() {
delete filter.params.search;
}
await arrayData.applyFilter(filter);
searchText.value = undefined;
}
</script>
<template>
<Teleport to="#searchbar" v-if="state.isHeaderMounted()">
<QForm @submit="search" id="searchbarForm">
<RouterLink
:to="to"
@click="
!$event.shiftKey && !$event.ctrlKey && search();
$refs.input.focus();
"
>
<QIcon
v-if="!quasar.platform.is.mobile"
class="cursor-pointer"
name="search"
size="sm"
>
<QTooltip>{{ t('link') }}</QTooltip>
</QIcon>
</RouterLink>
<VnInput
id="searchbar"
ref="input"
v-model.trim="searchText"
:placeholder="t(props.label)"
dense
standout
autofocus
data-cy="vnSearchBar"
data-cy="vn-searchbar"
borderless
>
<template #prepend>
<QIcon
v-if="!quasar.platform.is.mobile"
class="cursor-pointer"
name="search"
@click="search"
/>
</template>
<template #append>
<QIcon
v-if="props.info && $q.screen.gt.xs"
@ -164,20 +195,52 @@ async function search() {
.q-field {
transition: width 0.36s;
}
</style>
<style lang="scss">
:deep(.q-field__native) {
padding-top: 10px;
padding-left: 5px;
}
:deep(.q-field--dark .q-field__native:focus) {
color: black;
}
:deep(.q-field--focused) {
.q-icon {
color: black;
}
}
.cursor-info {
cursor: help;
}
#searchbar {
.q-field--standout.q-field--highlighted .q-field__control {
.q-form {
display: flex;
align-items: center;
border-radius: 4px;
padding: 0 5px;
background-color: var(--vn-search-color);
&:hover {
background-color: var(--vn-search-color-hover);
}
&:focus-within {
background-color: white;
color: black;
.q-field__native,
.q-icon {
color: black !important;
color: black;
}
}
}
.q-icon {
color: var(--vn-label-color);
}
</style>
<i18n>
en:
link: click to search, ctrl + click to open in a new tab, shift + click to open in a new window
es:
link: clic para buscar, ctrl + clic para abrir en una nueva pestaña, shift + clic para abrir en una nueva ventana
</i18n>

View File

@ -54,6 +54,7 @@ function formatNumber(number) {
:offset="100"
:limit="5"
auto-load
map-key="smsFk"
>
<template #body="{ rows }">
<QCard

View File

@ -0,0 +1,81 @@
import { describe, expect, it } from 'vitest';
import { createWrapper } from 'app/test/vitest/helper';
import FetchedTags from 'src/components/ui/FetchedTags.vue';
describe('tags computed property', () => {
it('returns an object with the correct keys and values', () => {
const vm = createWrapper(FetchedTags, {
props: {
item: {
tag1: 'JavaScript',
value1: 'Programming Language',
tag2: 'Vue',
value2: 'Framework',
tag3: 'EmptyTag',
},
tag: 'tag',
value: 'value',
columns: 2,
},
}).vm;
expect(vm.tags).toEqual({
JavaScript: 'Programming Language',
Vue: 'Framework',
EmptyTag: '',
});
});
it('returns an empty object if the item prop is an empty object', () => {
const vm = createWrapper(FetchedTags, {
props: {
item: {},
tag: 'tag',
value: 'value',
},
}).vm;
expect(vm.tags).toEqual({});
});
it('should calculate the correct columnStyle when columns prop is defined', () => {
const vm = createWrapper(FetchedTags, {
props: {
item: {
tag1: 'JavaScript',
value1: 'Programming Language',
tag2: 'Vue',
value2: 'Framework',
tag3: 'EmptyTag',
},
tag: 'tag',
value: 'value',
columns: 2,
},
}).vm;
const expectedStyle = {
'grid-template-columns': 'repeat(2, 1fr)',
'max-width': '8rem',
};
expect(vm.columnStyle).toEqual(expectedStyle);
});
it('should return an empty object for columnStyle when columns prop is not defined', () => {
const vm = createWrapper(FetchedTags, {
props: {
item: {
tag1: 'JavaScript',
value1: 'Programming Language',
tag2: 'Vue',
value2: 'Framework',
tag3: 'EmptyTag',
},
tag: 'tag',
value: 'value',
columns: null,
},
}).vm;
expect(vm.columnStyle).toEqual({});
});
});

View File

@ -4,7 +4,11 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
describe('VnPaginate', () => {
const expectedUrl = '/api/customers';
const defaultData = [
{ id: 1, name: 'Tony Stark' },
{ id: 2, name: 'Jessica Jones' },
{ id: 3, name: 'Bruce Wayne' },
];
let vm;
beforeAll(() => {
const options = {
@ -28,11 +32,7 @@ describe('VnPaginate', () => {
describe('paginate()', () => {
it('should call to the paginate() method and set the data on the rows property', async () => {
vi.spyOn(vm.arrayData, 'loadMore');
vm.store.data = [
{ id: 1, name: 'Tony Stark' },
{ id: 2, name: 'Jessica Jones' },
{ id: 3, name: 'Bruce Wayne' },
];
vm.store.data = defaultData;
await vm.paginate();
@ -42,26 +42,25 @@ describe('VnPaginate', () => {
it('should call to the paginate() method and then call it again to paginate', async () => {
vi.spyOn(axios, 'get').mockResolvedValue({
data: [
{ id: 1, name: 'Tony Stark' },
{ id: 2, name: 'Jessica Jones' },
{ id: 3, name: 'Bruce Wayne' },
],
data: defaultData,
});
vm.store.hasMoreData = true;
await vm.$nextTick();
vm.store.data = [
{ id: 1, name: 'Tony Stark' },
{ id: 2, name: 'Jessica Jones' },
{ id: 3, name: 'Bruce Wayne' },
];
vm.store.data = defaultData;
await vm.paginate();
expect(vm.store.skip).toEqual(3);
expect(vm.store.data.length).toEqual(6);
vi.spyOn(axios, 'get').mockResolvedValue({
data: [
{ id: 4, name: 'Peter Parker' },
{ id: 5, name: 'Clark Kent' },
{ id: 6, name: 'Barry Allen' },
],
});
await vm.paginate();
expect(vm.store.skip).toEqual(6);
@ -85,11 +84,7 @@ describe('VnPaginate', () => {
const index = 1;
const done = vi.fn();
vm.store.data = [
{ id: 1, name: 'Tony Stark' },
{ id: 2, name: 'Jessica Jones' },
{ id: 3, name: 'Bruce Wayne' },
];
vm.store.data = defaultData;
await vm.onLoad(index, done);
@ -105,11 +100,7 @@ describe('VnPaginate', () => {
],
});
vm.store.data = [
{ id: 1, name: 'Tony Stark' },
{ id: 2, name: 'Jessica Jones' },
{ id: 3, name: 'Bruce Wayne' },
];
vm.store.data = defaultData;
expect(vm.pagination.page).toEqual(1);

View File

@ -0,0 +1,50 @@
import { describe, it, expect, beforeAll, vi } from 'vitest';
import { axios } from 'app/test/vitest/helper';
import parsePhone from 'src/filters/parsePhone';
describe('parsePhone filter', () => {
beforeAll(async () => {
vi.spyOn(axios, 'get').mockReturnValue({ data: { prefix: '34' } });
});
it('no phone', async () => {
const phone = await parsePhone(null, '34');
expect(phone).toBe(undefined);
});
it("adds prefix +34 if it doesn't have one", async () => {
const phone = await parsePhone('123456789', '34');
expect(phone).toBe('34123456789');
});
it('maintains prefix +34 if it is already correct', async () => {
const phone = await parsePhone('+34123456789', '34');
expect(phone).toBe('34123456789');
});
it('converts prefix 0034 to +34', async () => {
const phone = await parsePhone('0034123456789', '34');
expect(phone).toBe('34123456789');
});
it('converts prefix 34 without symbol to +34', async () => {
const phone = await parsePhone('34123456789', '34');
expect(phone).toBe('34123456789');
});
it('replaces incorrect prefix with the correct one', async () => {
const phone = await parsePhone('+44123456789', '34');
expect(phone).toBe('44123456789');
});
it('adds default prefix on error', async () => {
vi.spyOn(axios, 'get').mockImplementation((url) => {
if (url.includes('Prefixes'))
return Promise.reject(new Error('Network error'));
else if (url.includes('PbxConfigs'))
return Promise.resolve({ data: { defaultPrefix: '39' } });
});
const phone = await parsePhone('123456789', '34');
expect(phone).toBe('39123456789');
});
});

View File

@ -0,0 +1,45 @@
import { describe, expect, it, vi } from 'vitest';
import axios from 'axios';
import { getExchange } from 'src/composables/getExchange';
vi.mock('axios');
describe('getExchange()', () => {
it('should return the correct exchange rate', async () => {
axios.get.mockResolvedValue({
data: { value: 1.2 },
});
const amount = 100;
const currencyFk = 1;
const dated = '2023-01-01';
const result = await getExchange(amount, currencyFk, dated);
expect(result).toBe('83.33');
});
it('should return the correct exchange rate with custom decimal places', async () => {
axios.get.mockResolvedValue({
data: { value: 1.2 },
});
const amount = 100;
const currencyFk = 1;
const dated = '2023-01-01';
const decimalPlaces = 3;
const result = await getExchange(amount, currencyFk, dated, decimalPlaces);
expect(result).toBe('83.333');
});
it('should return null if the API call fails', async () => {
axios.get.mockRejectedValue(new Error('Network error'));
const amount = 100;
const currencyFk = 1;
const dated = '2023-01-01';
const result = await getExchange(amount, currencyFk, dated);
expect(result).toBeNull();
});
});

View File

@ -0,0 +1,55 @@
import { vi, describe, expect, it } from 'vitest';
import { getTotal } from 'src/composables/getTotal';
vi.mock('src/filters', () => ({
toCurrency: vi.fn((value, currency) => `${currency} ${value.toFixed(2)}`),
}));
describe('getTotal()', () => {
const rows = [
{ amount: 10.5, tax: 2.1 },
{ amount: 20.75, tax: 3.25 },
{ amount: 30.25, tax: 4.75 },
];
it('should calculate the total for a given key', () => {
const total = getTotal(rows, 'amount');
expect(total).toBe('61.50');
});
it('should calculate the total with a callback function', () => {
const total = getTotal(rows, null, { cb: (row) => row.amount + row.tax });
expect(total).toBe('71.60');
});
it('should format the total as currency', () => {
const total = getTotal(rows, 'amount', { currency: 'USD' });
expect(total).toBe('USD 61.50');
});
it('should format the total as currency with default currency', () => {
const total = getTotal(rows, 'amount', { currency: 'default' });
expect(total).toBe('undefined 61.50');
});
it('should calculate the total with integer formatting', () => {
const total = getTotal(rows, 'amount', { decimalPlaces: 0 });
expect(total).toBe('62');
});
it('should calculate the total with custom decimal places', () => {
const total = getTotal(rows, 'amount', { decimalPlaces: 1 });
expect(total).toBe('61.5');
});
it('should handle rows with missing keys', () => {
const rowsWithMissingKeys = [{ amount: 10.5 }, { amount: 20.75 }, {}];
const total = getTotal(rowsWithMissingKeys, 'amount');
expect(total).toBe('31.25');
});
it('should handle empty rows', () => {
const total = getTotal([], 'amount');
expect(total).toBe('0.00');
});
});

View File

@ -0,0 +1,9 @@
import { describe, expect, it } from 'vitest';
import { useAccountShortToStandard } from 'src/composables/useAccountShortToStandard';
describe('useAccountShortToStandard()', () => {
it('should pad the decimal part with zeros for short numbers', () => {
expect(useAccountShortToStandard('123.45')).toBe('1230000045');
expect(useAccountShortToStandard('123.')).toBe('1230000000');
});
});

View File

@ -0,0 +1,16 @@
import axios from 'axios';
export async function getExchange(amount, currencyFk, dated, decimalPlaces = 2) {
try {
const { data } = await axios.get('ReferenceRates/findOne', {
params: {
filter: {
fields: ['value'],
where: { currencyFk, dated },
},
},
});
return (amount / data.value).toFixed(decimalPlaces);
} catch (e) {
return null;
}
}

View File

@ -1,10 +1,10 @@
import { toCurrency } from 'src/filters';
export function getTotal(rows, key, opts = {}) {
const { currency, cb } = opts;
const { currency, cb, decimalPlaces } = opts;
const total = rows.reduce((acc, row) => acc + +(cb ? cb(row) : row[key] || 0), 0);
return currency
? toCurrency(total, currency == 'default' ? undefined : currency)
: total;
: parseFloat(total).toFixed(decimalPlaces ?? 2);
}

View File

@ -0,0 +1,4 @@
export function useAccountShortToStandard(val) {
if (!val || !/^\d+(\.\d*)$/.test(val)) return;
return val?.replace('.', '0'.repeat(11 - val.length));
}

View File

@ -25,11 +25,14 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
const searchUrl = store.searchUrl;
if (query[searchUrl]) {
const params = JSON.parse(query[searchUrl]);
const filter = params?.filter && JSON.parse(params?.filter ?? '{}');
const filter =
params?.filter && typeof params?.filter == 'object'
? params?.filter
: JSON.parse(params?.filter ?? '{}');
delete params.filter;
store.userParams = { ...store.userParams, ...params };
store.userFilter = { ...filter, ...store.userFilter };
store.filter = { ...filter, ...store.userFilter };
if (filter?.order) store.order = filter.order;
}
});
@ -49,6 +52,8 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
'exprBuilder',
'searchUrl',
'navigate',
'mapKey',
'keepData',
];
if (typeof userOptions === 'object') {
for (const option in userOptions) {
@ -60,6 +65,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
store[option] = userOptions.keepOpts?.includes(option)
? Object.assign(defaultOpts, store[option])
: defaultOpts;
if (option === 'userParams') store.defaultParams = store[option];
}
}
}
@ -70,27 +76,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
cancelRequest();
canceller = new AbortController();
const filter = {
limit: store.limit,
};
let userParams = { ...store.userParams };
Object.assign(filter, store.userFilter);
let where;
if (filter?.where || store.filter?.where)
where = Object.assign(filter?.where ?? {}, store.filter?.where ?? {});
Object.assign(filter, store.filter);
filter.where = where;
const params = { filter };
Object.assign(params, userParams);
if (params.filter) params.filter.skip = store.skip;
if (store?.order && typeof store?.order == 'string') store.order = [store.order];
if (store.order?.length) params.filter.order = [...store.order];
else delete params.filter.order;
const { params, limit } = getCurrentFilter();
store.currentFilter = JSON.parse(JSON.stringify(params));
delete store.currentFilter.filter.include;
@ -116,20 +102,16 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
params,
});
const { limit } = filter;
store.hasMoreData = limit && response.data.length >= limit;
if (append) {
if (!store.data) store.data = [];
for (const row of response.data) store.data.push(row);
} else {
store.data = response.data;
if (!isDialogOpened()) updateRouter && updateStateParams();
if (!append && !isDialogOpened() && updateRouter) {
if (updateStateParams(response.data)?.redirect) return;
}
store.isLoading = false;
canceller = null;
processData(response.data, { map: !!store.mapKey, append });
return response;
}
@ -147,6 +129,10 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
if (arrayDataStore.get(key)) arrayDataStore.reset(key, opts);
}
function resetPagination() {
if (arrayDataStore.get(key)) arrayDataStore.resetPagination(key);
}
function cancelRequest() {
if (canceller) {
canceller.abort();
@ -170,7 +156,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
userParams = sanitizerParams(userParams, store?.exprBuilder);
store.userParams = userParams;
reset(['skip', 'filter.skip', 'page']);
resetPagination();
await fetch({});
return { filter, params };
@ -197,7 +183,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
}
store.order = order;
reset(['skip', 'filter.skip', 'page']);
resetPagination();
fetch({});
index++;
@ -255,7 +241,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
if (Object.values(store.userParams).length) await fetch({});
}
function updateStateParams() {
function updateStateParams(data) {
if (!route?.path) return;
const newUrl = { path: route.path, query: { ...(route.query ?? {}) } };
if (store?.searchUrl)
@ -272,22 +258,71 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
const { path } = matches.at(-1);
const to =
store?.data?.length === 1
? path.replace(/\/(list|:id)|-list/, `/${store.data[0].id}`)
data?.length === 1
? path.replace(/\/(list|:id)|-list/, `/${data[0].id}`)
: path.replace(/:id.*/, '');
if (route.path != to) {
const pushUrl = { path: to };
if (to.endsWith('/list') || to.endsWith('/'))
pushUrl.query = newUrl.query;
else destroy();
return router.push(pushUrl);
return router.push(pushUrl) && { redirect: true };
}
}
router.replace(newUrl);
}
function getCurrentFilter() {
const filter = {
limit: store.limit,
};
let userParams = { ...store.userParams };
Object.assign(filter, store.userFilter);
let where;
if (filter?.where || store.filter?.where)
where = Object.assign(filter?.where ?? {}, store.filter?.where ?? {});
Object.assign(filter, store.filter);
filter.where = where;
const params = { filter };
Object.assign(params, userParams);
if (params.filter) params.filter.skip = store.skip;
if (store?.order && typeof store?.order == 'string') store.order = [store.order];
if (store.order?.length) params.filter.order = [...store.order];
else delete params.filter.order;
return { filter, params, limit: filter.limit };
}
function processData(data, { map = true, append = true }) {
if (!append) {
store.data = [];
store.map = new Map();
}
if (!Array.isArray(data)) store.data = data;
else if (!map && append) for (const row of data) store.data.push(row);
else
for (const row of data) {
const key = row[store.mapKey];
const val = { ...row, key };
if (key && store.map.has(key)) {
const { position } = store.map.get(key);
val.position = position;
store.map.set(key, val);
store.data[position] = val;
} else {
val.position = store.map.size;
store.map.set(key, val);
store.data.push(val);
}
}
}
const totalRows = computed(() => (store.data && store.data.length) || 0);
const isLoading = computed(() => store.isLoading || false);
@ -295,6 +330,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
fetch,
applyFilter,
addFilter,
getCurrentFilter,
addFilterWhere,
addOrder,
deleteOrder,
@ -307,5 +343,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
isLoading,
deleteOption,
reset,
resetPagination,
};
}

73
src/composables/useCau.js Normal file
View File

@ -0,0 +1,73 @@
import VnInput from 'src/components/common/VnInput.vue';
import { useVnConfirm } from 'src/composables/useVnConfirm';
import axios from 'axios';
import { ref } from 'vue';
import { i18n } from 'src/boot/i18n';
import useNotify from 'src/composables/useNotify.js';
export async function useCau(res, message) {
const { notify } = useNotify();
const { openConfirmationModal } = useVnConfirm();
const { config, headers, request, status, statusText, data } = res || {};
const { params, url, method, signal, headers: confHeaders } = config || {};
const { message: resMessage, code, name } = data?.error || {};
const additionalData = {
path: location.hash,
message: resMessage,
code,
request: request?.responseURL,
status,
name,
statusText: statusText,
config: {
url,
method,
params,
headers: confHeaders,
aborted: signal?.aborted,
version: headers?.['salix-version'],
},
};
const opts = {
actions: [
{
icon: 'support_agent',
color: 'primary',
dense: true,
flat: false,
round: true,
handler: async () => {
const locale = i18n.global.t;
const reason = ref(
code == 'ACCESS_DENIED' ? locale('cau.askPrivileges') : ''
);
openConfirmationModal(
locale('cau.title'),
locale('cau.subtitle'),
async () => {
await axios.post('OsTickets/send-to-support', {
reason: reason.value,
additionalData,
});
},
null,
{
component: VnInput,
props: {
modelValue: reason,
'onUpdate:modelValue': (val) => (reason.value = val),
label: locale('cau.inputLabel'),
class: 'full-width',
required: true,
autofocus: true,
},
}
);
},
},
],
};
notify(message ?? 'globals.error', 'negative', 'error', opts);
}

View File

@ -0,0 +1,65 @@
import { useArrayData } from 'src/composables/useArrayData';
import { onBeforeMount, ref, watch } from 'vue';
export function useFilterParams(key) {
if (!key) throw new Error('ArrayData: A key is required to use this composable');
const params = ref({});
const orders = ref({});
const arrayData = ref({});
onBeforeMount(() => {
arrayData.value = useArrayData(key);
});
watch(
() => arrayData.value.store?.currentFilter,
(val, oldValue) => (val || oldValue) && setUserParams(val),
{ immediate: true, deep: true }
);
function parseOrder(urlOrders) {
const orderObject = {};
if (urlOrders) {
if (typeof urlOrders == 'string') urlOrders = [urlOrders];
for (const [index, orders] of urlOrders.entries()) {
const [name, direction] = orders.split(' ');
orderObject[name] = { direction, index: index + 1 };
}
}
orders.value = orderObject;
}
function setUserParams(watchedParams) {
if (!watchedParams || Object.keys(watchedParams).length == 0) return;
if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
if (typeof watchedParams?.filter == 'string')
watchedParams.filter = JSON.parse(watchedParams.filter);
watchedParams = { ...watchedParams, ...watchedParams.filter?.where };
parseOrder(watchedParams.filter?.order);
delete watchedParams.filter;
params.value = sanitizer(watchedParams);
}
function sanitizer(params) {
for (const [key, value] of Object.entries(params)) {
if (key === 'and' && Array.isArray(value)) {
value.forEach((item) => {
Object.assign(params, item);
});
delete params[key];
} else if (value && typeof value === 'object') {
const param = Object.values(value)[0];
if (typeof param == 'string') params[key] = param.replaceAll('%', '');
}
}
return params;
}
return {
params,
orders,
};
}

View File

@ -2,7 +2,7 @@ import { Notify } from 'quasar';
import { i18n } from 'src/boot/i18n';
export default function useNotify() {
const notify = (message, type, icon) => {
const notify = (message, type, icon, opts = {}) => {
const defaultIcons = {
warning: 'warning',
negative: 'error',
@ -13,6 +13,7 @@ export default function useNotify() {
message: i18n.global.t(message),
type: type,
icon: icon ? icon : defaultIcons[type],
...opts,
});
};

View File

@ -2,8 +2,14 @@ import { useValidator } from 'src/composables/useValidator';
export function useRequired($attrs) {
const { validations } = useValidator();
const isRequired = Object.keys($attrs).includes('required');
const hasRequired = Object.keys($attrs).includes('required');
let isRequired = false;
if (hasRequired) {
const required = $attrs['required'];
if (typeof required === 'boolean') {
isRequired = required;
}
}
const requiredFieldRule = (val) => validations().required(isRequired, val);
return {

View File

@ -20,7 +20,7 @@ export function useRole() {
function hasAny(roles) {
const roleStore = state.getRoles();
if (typeof roles === 'string') roles = [roles];
for (const role of roles) {
if (roleStore.value.indexOf(role) !== -1) return true;
}

View File

@ -1,22 +1,29 @@
import { h } from 'vue';
import { Dialog } from 'quasar';
import VnConfirm from 'components/ui/VnConfirm.vue';
import { useQuasar } from 'quasar';
export function useVnConfirm() {
const quasar = useQuasar();
const openConfirmationModal = (title, message, promise, successFn) => {
quasar
.dialog({
component: VnConfirm,
componentProps: {
const openConfirmationModal = (
title,
message,
promise,
successFn,
customHTML = {}
) => {
const { component, props } = customHTML;
Dialog.create({
component: h(
VnConfirm,
{
title: title,
message: message,
promise: promise,
},
})
.onOk(async () => {
if (successFn) successFn();
});
{ customHTML: () => h(component, props) }
),
}).onOk(async () => {
if (successFn) successFn();
});
};
return { openConfirmationModal };

View File

@ -3,19 +3,23 @@
@import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.sass';
body.body--light {
--font-color: black;
--vn-header-color: #cecece;
--vn-page-color: #ffffff;
--vn-section-color: #e0e0e0;
--vn-section-hover-color: #b9b9b9;
--vn-text-color: var(--font-color);
--vn-text-color: black;
--vn-label-color: #5f5f5f;
--vn-accent-color: #e7e3e3;
--vn-search-color: #d4d4d4;
--vn-search-color-hover: #cfcfcf;
--vn-empty-tag: #acacac;
--vn-black-text-color: black;
--vn-text-color-contrast: white;
background-color: var(--vn-page-color);
.q-header .q-toolbar {
color: var(--font-color);
color: var(--vn-text-color);
}
}
body.body--dark {
@ -26,6 +30,11 @@ body.body--dark {
--vn-text-color: white;
--vn-label-color: #a8a8a8;
--vn-accent-color: #424242;
--vn-search-color: #4b4b4b;
--vn-search-color-hover: #5b5b5b;
--vn-empty-tag: #2d2d2d;
--vn-black-text-color: black;
--vn-text-color-contrast: black;
background-color: var(--vn-page-color);
}
@ -84,6 +93,10 @@ select:-webkit-autofill {
background-color: var(--vn-section-hover-color);
}
.bg-vn-page {
background-color: var(--vn-page-color);
}
.color-vn-label {
color: var(--vn-label-color);
}
@ -149,7 +162,8 @@ select:-webkit-autofill {
.q-card,
.q-table,
.q-table__bottom,
.q-drawer {
.q-drawer,
.bottomButton {
background-color: var(--vn-section-color);
}
@ -186,7 +200,7 @@ select:-webkit-autofill {
.q-tooltip {
background-color: var(--vn-page-color);
color: var(--font-color);
color: var(--vn-text-color);
font-size: medium;
}
@ -240,7 +254,7 @@ input::-webkit-inner-spin-button {
.q-table {
th,
td {
padding: 1px 10px 1px 10px;
padding: 1px 3px 1px 3px;
max-width: 130px;
div span {
overflow: hidden;
@ -264,6 +278,10 @@ input::-webkit-inner-spin-button {
.shrink {
max-width: 75px;
}
.number {
text-align: right;
width: 96px;
}
.expand {
max-width: 400px;
}
@ -292,3 +310,20 @@ input::-webkit-inner-spin-button {
.no-visible {
visibility: hidden;
}
.q-field__inner {
.q-field__control {
min-height: auto !important;
display: flex;
align-items: flex-end;
padding-bottom: 2px;
.q-field__native.row {
min-height: auto !important;
}
}
}
.q-date__header-today {
border-radius: 12px;
border: 1px solid;
box-shadow: 0 4px 6px #00000000;
}

View File

@ -0,0 +1,21 @@
export default function getDifferences(obj1, obj2) {
let diff = {};
delete obj1.$index;
delete obj2.$index;
for (let key in obj1) {
if (obj2[key] && JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])) {
diff[key] = obj2[key];
}
}
for (let key in obj2) {
if (
obj1[key] === undefined ||
JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])
) {
diff[key] = obj2[key];
}
}
return diff;
}

View File

@ -1,4 +1,3 @@
// parsing JSON safely
function parseJSON(str, fallback) {
try {
return JSON.parse(str ?? '{}');

View File

@ -0,0 +1,6 @@
export default function getUpdatedValues(keys, formData) {
return keys.reduce((acc, key) => {
acc[key] = formData[key];
return acc;
}, {});
}

Some files were not shown because too many files have changed in this diff Show More