Compare commits

..

10 Commits

Author SHA1 Message Date
Javier Segarra 297affbe8d feat miore objectw
gitea/salix-front/pipeline/pr-dev This commit looks good Details
2024-05-27 18:22:59 +02:00
Javier Segarra 94a15a4923 Merge branch 'dev' into 6972_defaultGlobalValues 2024-05-27 15:03:45 +02:00
Javier Segarra 84e6c2c15b feat: noTranslate attr
gitea/salix-front/pipeline/pr-dev This commit looks good Details
2024-05-24 08:50:41 +02:00
Javier Segarra ced4c0aaa3 Merge branch 'dev' into 6972_defaultGlobalValues
gitea/salix-front/pipeline/pr-dev This commit looks good Details
2024-05-24 08:39:03 +02:00
Javier Segarra b16ccc8d1f feat: QBtn
gitea/salix-front/pipeline/pr-dev This commit looks good Details
2024-05-20 10:34:28 +02:00
Javier Segarra 0884fb2717 Merge branch 'dev' into 6972_defaultGlobalValues
gitea/salix-front/pipeline/pr-dev This commit looks good Details
2024-05-20 09:13:48 +02:00
Javier Segarra 155a0b6440 feat: VnLv 2024-05-20 09:13:22 +02:00
Javier Segarra ea92e13b78 feat: QSelect
gitea/salix-front/pipeline/pr-dev This commit looks good Details
2024-05-18 19:13:01 +02:00
Javier Segarra 6af9b5493e perf: separate element by file
gitea/salix-front/pipeline/pr-dev This commit looks good Details
2024-05-17 18:09:15 +02:00
Javier Segarra 93b138e7c4 first approach
gitea/salix-front/pipeline/pr-dev This commit looks good Details
2024-05-17 17:55:44 +02:00
730 changed files with 35634 additions and 50733 deletions

View File

@ -1,33 +0,0 @@
const fs = require('fs');
const path = require('path');
function getCurrentBranchName(p = process.cwd()) {
if (!fs.existsSync(p)) return false;
const gitHeadPath = path.join(p, '.git', 'HEAD');
if (!fs.existsSync(gitHeadPath))
return getCurrentBranchName(path.resolve(p, '..'));
const headContent = fs.readFileSync(gitHeadPath, 'utf-8');
return headContent.trim().split('/')[2];
}
const branchName = getCurrentBranchName();
if (branchName) {
const msgPath = `.git/COMMIT_EDITMSG`;
const msg = fs.readFileSync(msgPath, 'utf-8');
const reference = branchName.match(/^\d+/);
const referenceTag = `refs #${reference}`;
if (!msg.includes(referenceTag) && reference) {
const splitedMsg = msg.split(':');
if (splitedMsg.length > 1) {
const finalMsg = splitedMsg[0] + ': ' + referenceTag + splitedMsg.slice(1).join(':');
fs.writeFileSync(msgPath, finalMsg);
}
}
}

View File

@ -1,8 +0,0 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
echo "Running husky commit-msg hook"
npx --no-install commitlint --edit
echo "Adding reference tag to commit message"
node .husky/addReferenceTag.js

View File

@ -14,5 +14,5 @@
"[vue]": { "[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode" "editor.defaultFormatter": "esbenp.prettier-vscode"
}, },
"cSpell.words": ["axios", "composables"] "cSpell.words": ["axios"]
} }

View File

@ -1,853 +1,3 @@
# Version 24.40 - 2024-10-02
### Added 🆕
- chore: refs #4074 admit several acls by:jorgep
- chore: refs #4074 drop workerCreate by:jorgep
- chore: refs #4074 fix tests by:jorgep
- chore: refs #4074 wip replace useRole for useAcl by:jorgep
- chore: refs #7155 remove console.log by:alexm
- chore: refs #7155 typo by:alexm
- chore: refs #7663 add test by:jorgep
- chore: refs #7663 create test wip by:jorgep
- chore: refs #7663 drop useless code (origin/7663-setWeight) by:jorgep
- chore: refs #7828 fix e2e by:jorgep
- feat(AccountBasicData): add twoFactorFk by:alexm
- feat: add max rule by:Javier Segarra
- feat: add shortcut add event in some subSections by:Javier Segarra
- feat: add shortcut more buttons (origin/add_shortcut_add_subSections) by:Javier Segarra
- feat: add tooltip CustomerNewCustomAgent by:Javier Segarra
- feat: apply color when today by:Javier Segarra
- feat: change label because its more natural by:Javier Segarra
- feat: change order by:Javier Segarra
- feat: change QBadge color by:Javier Segarra
- feat: change url CustomerList by:Javier Segarra
- feat: copy customer countryFk by:Javier Segarra
- feat: create VnSelectEnum and add in AccountBasicData and ClaimBasicData by:alexm
- feat: CustomerBalance by:Javier Segarra
- feat: CustomerConsumptionFilter by:Javier Segarra
- feat: customer consumption (origin/7830-customerDesplegables, 7830-customerDesplegables) by:alexm
- feat: CustomerCreateTicket by:Javier Segarra
- feat: CustomerCredit section by:Javier Segarra
- feat: CustomerGreuges by:Javier Segarra
- feat: CustomerSample to VnTable by:Javier Segarra
- feat: global handler (origin/fix_global_handler, fix_global_handler) by:alexm
- feat: goToSupplier by:Javier Segarra
- feat: handle newValue by:Javier Segarra
- feat: handle same multiple CP by:Javier Segarra
- feat: hide menus on small view (origin/hideMenu) by:jorgep
- feat: minor changes by:Javier Segarra
- feat: orderCreateDialog by:Javier Segarra
- feat: refs #4074 drop useless code by:jorgep
- feat: refs #4074 useAcl in vnSelectDialog by:jorgep
- feat: refs #6346 new wagon type section by:Jon
- feat: refs #7404 add m3 and fix detail by:pablone
- feat: refs #7404 add some style to the form and reorganize fields by:pablone
- feat: refs #7404 add travel m3 to reserves form by:pablone
- feat: refs #7404 style dynamic text color by:pablone
- feat: refs #7404 travel m3 form by:pablone
- feat: refs #7500 added VnImg to show files by:Jon
- feat: refs #7663 add setWeight menu opt (wip) by:jorgep
- feat: refs #7663 fine tunning by:jorgep
- feat: refs #7828 create axios instance which no manage errors (origin/7828-makeCorrectCalls) by:jorgep
- feat: refs #7828 useAcl & cherry pick mail data worker by:jorgep
- feat: remove cli warnings by:Javier Segarra
- feat: show preparation field by:Javier Segarra
- feat: stateGroupedFilter by:Javier Segarra
- feat: translations fixed by:jgallego
- feat(TravelList): add daysOnward by:alexm
- feat: travel m3 by:pablone
- feat: use disableInifiniteScroll property by:Javier Segarra
- feat: VnImg draggable by:Javier Segarra
- feat: vnLocation changes by:Javier Segarra
- feat: vnSelect exprBuilder by:Javier Segarra
- fix: refs #7404 remove some style by:pablone
- fix: refs #7404 style non center pop up (origin/7404-fixFront) by:pablone
- fix: refs #7404 translates and some minor style fixes by:pablone
- fix: styles by:Javier Segarra
- perf: improve style by:Javier Segarra
### Changed 📦
- perf: CustomerBalance by:Javier Segarra
- perf: CustomerBasicData by:Javier Segarra
- perf: CustomerBasicData.salesPersonFk by:Javier Segarra
- perf: CustomerSummary by:Javier Segarra
- perf: customerSummaryTable by:Javier Segarra
- perf: disable card option by:Javier Segarra
- perf: i18n by:Javier Segarra
- perf: improve by:Javier Segarra
- perf: improve style by:Javier Segarra
- perf: imrpove exprBuilder by:Javier Segarra
- perf: minor comments by:Javier Segarra
- perf: refs #6346 previous changes by:Jon
- perf: sendEmail customerConsumption by:Javier Segarra
- perf: solve reload CardSummary component by:Javier Segarra
- perf: update CustommerDescriptor by:Javier Segarra
- refactor: refs #4074 accept array by:jorgep
- refactor: refs #4074 rollback by:jorgep
- refactor: refs #4074 use acl & drop useless roles by:jorgep
- refactor: refs #4074 useAcl in navigationStore & router by:jorgep
- refactor: refs #4074 use fn (origin/4074-useAcls) by:jorgep
- refactor: refs #4074 use VnTitle by:jorgep
- refactor: refs #6346 deleted front error checking by:Jon
- refactor: refs #6346 requested changes by:Jon
- refactor: refs #6346 wagons to VnTable by:Jon
- refactor: refs #7500 deleted useless code by:Jon
- refactor: refs #7500 refactor vnimg when storage is dms by:Jon
- refactor: refs #7828 wip by:jorgep
### Fixed 🛠️
- chore: refs #4074 fix tests by:jorgep
- chore: refs #7828 fix e2e by:jorgep
- feat: refs #7404 add m3 and fix detail by:pablone
- feat: translations fixed by:jgallego
- fix: #5938 grouped filter by:Javier Segarra
- fix: #6943 fix customerSummaryTable by:Javier Segarra
- fix: #6943 show nickname salesPerson by:Javier Segarra
- fix: address-create i18n by:Javier Segarra
- fix: comments (origin/6943_fix_customer_module, 6943_fix_customer_module) by:Javier Segarra
- fix: CusomerSummary to Address by:Javier Segarra
- fix: CustomerAddress mobile by:Javier Segarra
- fix: CustomerBillingData by:Javier Segarra
- fix: Customerconsumption by:Javier Segarra
- fix: customer credit opinion by:alexm
- fix: CustomerCreditOpinion workerDescriptor by:Javier Segarra
- fix: CustomerDescriptorAccount by:Javier Segarra
- fix: CustomerDescriptor.bussinessTypeFk by:Javier Segarra
- fix: CustomerFilter by:Javier Segarra
- fix: CustomerGreuges by:Javier Segarra
- fix: CustomerMandates by:Javier Segarra
- fix: Customer module find salesPersons out of first get by:Javier Segarra
- fix: CustomerRecovery transalate label by:Javier Segarra
- fix: CustomerSamples by:Javier Segarra
- fix: customerSummaryToTicketList button by:Javier Segarra
- fix: CustomerWebPayment by:Javier Segarra
- fix: CustommerSummaryTable Proxy by:Javier Segarra
- fix: deleted code by:Jon
- fix: duplicate code by:alexm
- fix: emit:updateModelValue by:Javier Segarra
- fix: fixed wagon tests by:Jon
- fix: fix wagon list reload by:Jon
- fix: i18n en preparation label by:Javier Segarra
- fix: infiniteScroll by:Javier Segarra
- fix: isFullMovable checkbox by:Javier Segarra
- fix: merge conflicts by:Javier Segarra
- fix: merge in dev by:alexm
- fix: missing code by:Jon
- fix: Options VnSelect properties by:Javier Segarra
- fix: refs #4074 await to watch by:jorgep
- fix: refs #4074 drop wrong acl by:jorgep
- fix: refs #4074 workerCard data-key by:jorgep
- fix: refs #6346 fix list and create by:pablone
- fix: refs #6943 prevent null (origin/6943-warmfix-preventNull) by:jorgep
- fix: refs #7155 remove userParams in watcher (7155-travel_daysOnward) by:alexm
- fix: refs #7155 use chip-locale (origin/7155-travel_daysOnward_2, 7155-travel_daysOnward_2) by:alexm
- fix: refs #7404 remove console.log by:pablone
- fix: refs #7404 remove from test by:pablone
- fix: refs #7404 remove some style by:pablone
- fix: refs #7404 revert commit prevent production access by:pablone
- fix: refs #7404 style non center pop up (origin/7404-fixFront) by:pablone
- fix: refs #7404 translates and some minor style fixes by:pablone
- fix: refs #7500 fixed e2e test by:Jon
- fix: refs #7500 fixed showing images wrongly by:Jon
- fix: refs #7830 customer credit by:pablone
- fix: refs #7830 remove console.log by:pablone
- fix: remove console.log by:pablone
- fix: remove FetchData by:Javier Segarra
- fix: remove FIXME (origin/6943_fix_customerSummaryTable) by:Javier Segarra
- fix: remove print variable by:Javier Segarra
- fix: remove promise execution by:Javier Segarra
- fix: reset VnTable scroll properties by:Javier Segarra
- fix: rule by:Javier Segarra
- fix: solve conflicts from master to test by:Javier Segarra
- fix: split params (origin/warmfix-addSearchUrl) by:jorgep
- fix: state cell by:Javier Segarra
- fix: stop call back event hasMoreData by:Javier Segarra
- fix: styles by:Javier Segarra
- fix: SupplierFiscalData VnLocation (origin/fix_supplierFD_location) by:Javier Segarra
- fix: VnLocation test by:Javier Segarra
- fix(VnTable): header background-color by:alexm
- fix(VnTable): sanitizer value is defined by:carlossa
- fix: wagon reload (origin/FixWagonRedirect) by:Jon
- fix: workerDms filter workerFk by:alexm
- fix(WorkerList): add type email by:alexm
- Merge remote-tracking branch 'origin/7830-customerDesplegables' into 6943_fix_customerSummaryTable by:Javier Segarra
- refs #7155 scopeDays fix (origin/7155-scopeDays) by:carlossa
- revert: vnUSerLink change by:Javier Segarra
- test: fix test (7677_vnLocation_perf) by:Javier Segarra
# Version 24.38 - 2024-09-17
### Added 🆕
- chore: refs #6772 fix e2e (origin/6772-warmfix-fixE2e) by:jorgep
- chore: refs #7323 worker changes by:jorgep
- chore: refs #7353 fix warnings by:jorgep
- chore: refs #7353 use Vue component nomenclature by:jorgep
- chore: refs #7356 fix type by:jorgep
- feat(AccountConnections): use VnToken by:alexm
- feat: add key to routerView by:Javier Segarra
- feat: add plus shortcut in VnTable by:Javier Segarra
- feat: add row by:Javier Segarra
- feat: addRow withour dialog by:Javier Segarra
- feat: apply mixin by:Javier Segarra
- feat by:Javier Segarra
- feat: change navBar buttons by:Javier Segarra
- feat: dense rows by:Javier Segarra
- feat: fields with wrong name by:jgallego
- feat: fix bugs and filters by:Javier Segarra
- feat: fix refund parameters by:jgallego
- feat: handle create row by:Javier Segarra
- feat: handle dates by:Javier Segarra
- feat: handle qCheckbox 3rd state by:Javier Segarra
- feat: imrpove VnInputTime to set cursor at start by:Javier Segarra
- feat: keyShortcut directive by:Javier Segarra
- feat: minor fixes by:jgallego
- feat: only filter by isDestiny by:Javier Segarra
- feat: refs #211153 businessDataLinkGrafana by:robert
- feat: refs #7129 add km start and end on create form by:pablone
- feat: refs #7353 add filter & fix customTags by:jorgep
- feat: refs #7353 add locale by:jorgep
- feat: refs #7353 add no one opt by:jorgep
- feat: refs #7353 add right icons by:jorgep
- feat: refs #7353 imporve toDateFormat by:jorgep
- feat: refs #7353 salesPerson nickname & id by:jorgep
- feat: refs #7353 split sections by:jorgep
- feat: refs #7847 remove reload btn by:jorgep
- feat: refs #7847 remove reload fn by:jorgep
- feat: refs #7889 added shortcuts to modules by:Jon
- feat: refs #7911 added shortcut to modules by:Jon
- feat: refuncInvoiceForm component by:jgallego
- feat: remove duplicity by:Javier Segarra
- feat: remove future itemFixedPrices by:Javier Segarra
- feat: replace stickyButtons by subtoolbar by:Javier Segarra
- feat: required validation by:Javier Segarra
- feat: show bad dates by:Javier Segarra
- feat: showdate icons by:Javier Segarra
- feat: solve ItemFixedFilterPanel by:Javier Segarra
- feat: transfer an invoice by:jgallego
- feat: try to fix ItemFixedFilterPanel by:Javier Segarra
- feat: unnecessary changes by:Javier Segarra
- feat: update changelog (origin/7896_down_devToTest_2436) by:Javier Segarra
- feat: updates by:Javier Segarra
- feat: update version and changelog by:Javier Segarra
- feat: vnInput\* by:Javier Segarra
- feat: with VnTable by:Javier Segarra
- refs #6772 feat: fix approach by:Javier Segarra
- refs #6772 feat: refresh shelving.basic-data by:Javier Segarra
- style: show subName value by:Javier Segarra
### Changed 📦
- perf: add v-shortcut in VnCard by:Javier Segarra
- perf: approach by:Javier Segarra
- perf: change directive location by:Javier Segarra
- perf: change slots order by:Javier Segarra
- perf: examples by:Javier Segarra
- perf: hide icon for VnInputDate by:Javier Segarra
- perf: improve ItemFixedPricefilterPanel by:Javier Segarra
- perf: improve mainShrotcutMixin by:Javier Segarra
- perf: minor clean code by:Javier Segarra
- perf: onRowchange by:Javier Segarra
- perf: order by by:Javier Segarra
- perf: order components by:Javier Segarra
- perf: refs #7889 perf shortcut test by:Jon
- perf: remove console.log by:Javier Segarra
- perf: remove icons in header slot by:Javier Segarra
- perf: remove print variables by:Javier Segarra
- perf: restore CustomerBasicData by:Javier Segarra
- refactor: deleted useless prop by:Jon
- refactor: deleted useless prop in FetchedTags by:Jon
- refactor: refs #7323 drop useless code by:jorgep
- refactor: refs #7353 clients correction by:jorgep
- refactor: refs #7353 clients correction wip by:jorgep
- refactor: refs #7353 ease logic by:jorgep
- refactor: refs #7353 order correction by:jorgep
- refactor: refs #7353 simplify code by:jorgep
- refactor: refs #7353 tickets correction by:jorgep
- refactor: refs #7353 use global locales by:jorgep
- refactor: refs #7354 changed descriptor menu options by:Jon
- refactor: refs #7354 changed icon color in table and notification when deleting a zone by:Jon
- refactor: refs #7354 fix tableFilters by:Jon
- refactor: refs #7354 modified VnInputTime by:Jon
- refactor: refs #7354 refactor deliveryPanel by:Jon
- refactor: refs #7354 refactor zones section and fixed e2e tests by:Jon
- refactor: refs #7354 requested changes by:Jon
- refactor: refs #7354 reverse deliveryPanel changes by:Jon
- refactor: refs #7354 Zone migration changes by:Jon
- refactor: refs #7889 deleted subtitle attr and use keyBinding instead by:Jon
- refactor: refs #7889 modified shortcut and dashboard, and added tootlip in LeftMenu by:Jon
- refs #6722 perf: not fetch when id not exists by:Javier Segarra
- refs #6772 perf: change variable name by:JAVIER SEGARRA MARTINEZ
- refs #6772 perf: use ArrayData (6772_reload_sections) by:Javier Segarra
- refs #7283 refactor fix ItemDescriptor by:carlossa
- refs #7283 refactor ItexDescriptor by:carlossa
### Fixed 🛠️
- chore: refs #6772 fix e2e (origin/6772-warmfix-fixE2e) by:jorgep
- chore: refs #7353 fix warnings by:jorgep
- chore: refs #7356 fix type by:jorgep
- feat: fix bugs and filters by:Javier Segarra
- feat: fix refund parameters by:jgallego
- feat: minor fixes by:jgallego
- feat: refs #7353 add filter & fix customTags by:jorgep
- feat: try to fix ItemFixedFilterPanel by:Javier Segarra
- fix: add border-top by:Javier Segarra
- fix: added missing descriptors and small details by:Jon
- fix branch by:carlossa
- fix: call upsert when crudModel haschanges by:Javier Segarra
- fix(ClaimList): fix summary by:alexm
- fix: cli warnings by:Javier Segarra
- fix: editTableOptions by:Javier Segarra
- fix events and descriptor menu by:Jon
- fix: InvoiceIn sections (origin/6772_reload_sections) by:Javier Segarra
- fix: minor changes by:Javier Segarra
- fix: minor error whit dates by:Javier Segarra
- fix: module icon by:Javier Segarra
- fix: options QDate by:Javier Segarra
- fix: refs #6900 e2e error by:jorgep
- fix: refs #6900 rollback by:jorgep
- fix: refs #7353 css by:jorgep
- fix: refs #7353 hide search param (origin/7353-warmfix-fixSearchbar) by:jorgep
- fix: refs #7353 iron out filter by:jorgep
- fix: refs #7353 iron out ticket table by:jorgep
- fix: refs #7353 padding by:jorgep
- fix: refs #7353 salesClientTable by:jorgep
- fix: refs #7353 salesorderTable by:jorgep
- fix: refs #7353 saleTicketMonitors by:jorgep
- fix: refs #7353 use same datakey by:jorgep
- fix: refs #7353 vnTable colors by:jorgep
- fix: refs #7354 e2e tests by:Jon
- fix: refs #7354 fix delivery days by:Jon
- fix: refs #7354 fix list searchbar and filters by:Jon
- fix: refs #7354 fix VnSearchbar search for zone section & finished basic tests by:Jon
- fix: refs #7354 fix VnTable filters and agency field by:Jon
- fix: refs #7354 fix zoneSearchbar by:Jon
- fix: refs #7354 requested changes by:Jon
- fix: refs #7356 colors by:jorgep
- fix: refs #7356 create claim dialog by:jorgep
- fix: refs #7889 fixed shortcut test by:Jon
- fix: refs #7903 fixed ticket's search bar and keybinding tooltip by:Jon
- fix: refs #7911 fixed shortcut and related files by:Jon
- fix: remove condition duplicated by:Javier Segarra
- fix: remove property by:Javier Segarra
- fix tootltip by:carlossa
- fix traduction by:carlossa
- fix(VnSectionMain): add QPage by:alexm
- fix(zone): zoneLocation and the others searchbar by:alexm
- refactor: refs #7354 fix tableFilters by:Jon
- refactor: refs #7354 refactor zones section and fixed e2e tests by:Jon
- refs #6772 feat: fix approach by:Javier Segarra
- refs #6772 fix: claimPhoto reload by:Javier Segarra
- refs #6896 fix searchbar by:carlossa
- refs #6897 fix entry by:carlossa
- refs #6899 fix invoiceFix by:carlossa
- refs #6899 fix order by:carlossa
- refs #7283 fix by:carlossa
- refs #7283 fix ItemDescriptor warehouse by:carlossa
- refs #7283 refactor fix ItemDescriptor by:carlossa
- refs #7355 #7366 fix account, summary, list, travelList, tooltip by:carlossa
- refs #7355 fix accountPrivileges by:carlossa
- refs #7355 fix accounts, vnTable by:carlossa
- refs #7355 fix privileges by:carlossa
- refs #7355 fix roles filters by:carlossa
- refs #7355 fix total by:carlossa
- refs #7355 fix views summarys, entryList, travelList refact by:carlossa
- refs #7366 fix travel hours by:carlossa
- test: fix e2e by:Javier Segarra
# Version 24.36 - 2024-08-27
### Added 🆕
- feat(FormModel): trim data by default by:alexm
- feat(orderBasicData): add notes by:alexm
- feat(orderList): correct create order by:alexm
- feat(orderList): use orderFilter and fixed this by:alexm
- feat: #7323 handle workerPhoto (origin/7323_workerPhoto, 7323_workerPhoto) by:Javier Segarra
- feat: add recover password and reset password by:alexm
- feat: refs #7346 add seriaType option by:jgallego
- feat: refs #7346 elimino === by:jgallego
- feat: refs #7346 formdata uses serialType by:jgallego
- feat: refs #7346 refactor by:jgallego
- feat: refs #7346 sonarLint warnings (origin/7346-invoiceOutMultilple, 7346-invoiceOutMultilple) by:jgallego
- feat: refs #7710 uses cloneAll by:jgallego
- fix: refs #7717 fix OrderList table filters' and summary table style by:Jon
### Changed 📦
- feat: refs #7346 refactor by:jgallego
- perf: date fields (mindshore/feature/TicketFutureFilter, feature/TicketFutureFilter) by:Javier Segarra
- perf: refs #7717 right menu filter by:Jon
- perf: use ref at component start by:Javier Segarra
- refactor: refs #7717 delete useless function and import by:Jon
- refactor: refs #7717 deleted useless code by:Jon
### Fixed 🛠️
- feat(orderList): use orderFilter and fixed this by:alexm
- fix(VnTable): orderBy v-model by:alexm
- fix(account_card): redirection by:carlossa
- fix(orderLines): reload when delete and redirect when confirm by:alexm
- fix: #6336 ClaimListStates by:Javier Segarra
- fix: account subsections cards by:carlossa
- fix: duplicate key by:Jon
- fix: order description to vnTable by:alexm
- fix: orderCatalogFilter order by:alexm
- fix: quasar build warnings (6336_claim_fix_states) by:Javier Segarra
- fix: refs #7717 fix OrderList table filters' and summary table style by:Jon
- fix: refs #7717 fix basic data form & minor errors by:Jon
- fix: refs #7717 fix catalog filter, searchbar redirect and search by:Jon
- fix: refs #7717 fix catalog searchbar and worker tests(refs #7323) by:Jon
- fix: refs #7717 fix order sections by:Jon
- fix: refs #7717 fix volume and lines redirect by:Jon
- fix: refs #7717 fixed searchbar filter with rightmenu filters' applied by:Jon
- fix: test by:alexm
- fix: ticketDescriptorMenu by:Javier Segarra
- refs #7355 account fixes by:carlossa
# Version 24.34 - 2024-08-20
### Added 🆕
- chore: #6900 order params by:jorgep
- chore: refs #6900 drop console log by:jorgep
- chore: refs #6900 drop vnCurrency by:jorgep
- chore: refs #6900 fix e2e tests by:jorgep
- chore: refs #6900 mv rectificative logic by:jorgep
- chore: refs #6900 responsive code by:jorgep
- chore: refs #7283 drop array types by:jorgep
- chore: refs #7283 drop import by:jorgep
- chore: refs #7283 fix e2e logout by:jorgep
- chore: refs #7283 update VnAvatar title handling by:jorgep
- chore: refs #7323 fix test by:jorgep
- chore: refs #7323 remove unused import by:jorgep
- chore: refs #7323drop commented code by:jorgep
- feat(VnCard): use props searchbar by:alexm
- feat(customer): improve basicData to balance by:alexm
- feat(customer_balance): refs #6943 add functionality from salix by:alexm
- feat(customer_balance): refs #6943 translations by:alexm
- feat: refs #6130 husky commitLint config by:pablone
- feat: refs #6130 husky hooks by:pablone
- feat: refs #6900 add InvoiceInSerial by:jorgep
- feat: refs #6900 add locale by:jorgep
- feat: refs #6900 use VnTable & sort filter fields by:jorgep
- feat: refs #7323 add flex-wrap by:jorgep
- feat: refs #7323 add my account" btn & fix models log selectable by:jorgep
- feat: refs #7323 improve test by:jorgep
### Changed 📦
- refactor(customer_log: use VnLog by:alexm
- refactor(customer_recovery): to vnTable by:alexm
- refactor(customer_webAccess): FormModel by:alexm
- refactor: refs #7283 update avatar size and color by:jorgep
### Fixed 🛠️
- chore: refs #6900 fix e2e tests by:jorgep
- chore: refs #7283 fix e2e logout by:jorgep
- chore: refs #7323 fix test by:jorgep
- feat: refs #7323 add my account" btn & fix models log selectable by:jorgep
- fix #7355 fix acls list by:carlossa
- fix(VnFilterPanel): emit userParams better by:alexm
- fix(claim_summary): url links (HEAD -> 7864_testToMaster_2434, origin/test, origin/7864_testToMaster_2434, test) by:alexm
- fix(customer_sms: fix reload by:alexm
- fix(twoFactor): unify code login and twoFactor by:alexm
- fix: VnCard VnSearchbar props by:alexm
- fix: accountMailAlias by:alexm
- fix: refs #6130 add commit lint modules by:pablone
- fix: refs #6130 pnpm-lock.yml by:pablone
- fix: refs #6900 improve loading by:jorgep
- fix: refs #6900 improve logic (origin/6900-addSerial) by:jorgep
- fix: refs #6900 improve logic by:jorgep
- fix: refs #6900 rectificative btn reactivity by:jorgep
- fix: refs #6900 use type number by:jorgep
- fix: refs #6900 vat & dueday by:jorgep
- fix: refs #6900 vat, dueday & intrastat by:jorgep
- fix: refs #6989 show entity name & default time from config table by:jorgep
- fix: refs #7283 basicData locale by:jorgep
- fix: refs #7283 itemLastEntries filter by:jorgep
- fix: refs #7283 itemTags & VnImg by:jorgep
- fix: refs #7283 locale by:jorgep
- fix: refs #7283 min-width vnImg by:jorgep
- fix: refs #7283 use vnAvatar & add optional zoom by:jorgep
- fix: refs #7283 userPanel pic by:jorgep
- fix: refs #7323 add department popup by:jorgep
- fix: refs #7323 add locale by:jorgep
- fix: refs #7323 css righ menu by:jorgep
- fix: refs #7323 data-key & add select by:jorgep
- fix: refs #7323 load all opts by:jorgep
- fix: refs #7323 righ menu bug by:jorgep
- fix: refs #7323 use global locale by:jorgep
- fix: refs #7323 use workerFilter (origin/7323-warmfix-fixErrors) by:jorgep
- fix: refs #7323 vnsubtoolbar css by:jorgep
- fix: refs #7323 wrong css by:jorgep
- refs #7355 fix Rol, alias by:carlossa
- refs #7355 fix accountAlias by:carlossa
- refs #7355 fix alias summary by:carlossa
- refs #7355 fix conflicts by:carlossa
- refs #7355 fix create Rol by:carlossa
- refs #7355 fix list by:carlossa
- refs #7355 fix lists redirects summary by:carlossa
- refs #7355 fix roles by:carlossa
- refs #7355 fix search exprBuilder by:carlossa
- refs #7355 fix vnTable by:carlossa
# Version 24.32 - 2024-08-06
### Added 🆕
- chore: refs #7197 drop space by:jorgep
- chore: refs #7197 drop useless attr by:jorgep
- chore: refs #7197 fix test by:jorgep
- chore: refs #7197 fix tests by:jorgep
- chore: refs #7197 fix unit tests by:jorgep
- chore: refs #7197 idrop useless class by:jorgep
- chore: refs #7197 improve form filling in Cypress tests by:jorgep
- chore: refs #7197 remove unused import by:jorgep
- feat: customerPayments card view by:alexm
- feat: refs #6943 lock grid mode by:jorgep
- feat: refs #6943 wip consumption filter by:jorgep
- feat: refs #7197 add correcting filter by:jorgep
- feat: refs #7197 add supplier activities filter option by:jorgep
- feat: refs #7197 summary responsive by:jorgep
- feat: refs #7323 fix descriptors, added VnTable and minor changes by:Jon
- feat: refs #7323 fixed tests, changed calendar styles and fix workerCreate by:Jon
- feat: refs #7356 list & weekly to VnTable and style fixes by:Jon
- feat: refs #7401 add menu options by:pablone
- feat: SalesClientTable by:Javier Segarra
- feat: salesOrderTable by:Javier Segarra
- feat: salesTicketTable by:Javier Segarra
- feat: VnTable SalesTicketTable by:Javier Segarra
- fix: columns style by:alexm
### Changed 📦
- perf: LeftMenu show/hide by:Javier Segarra
- perf: refs #7356 TicketList state column by:Jon
- perf: VnFilterPanel (origin/7323_WorkerMigration_End) by:Javier Segarra
- perf: width SalesTicketsTable by:Javier Segarra
- refactor: #6943 wip use vnTable CustomerCredits by:jorgep
- refactor: CustomerNotifications use VnTable by:alexm
- refactor: CustomerPayments use VnTable by:alexm
- refactor: refs #7014 deleted main files and changed route files by:Jon
- refactor: refs #7014 improved route.js & deleted RouteMain by:Jon
- refactor: refs #7014 refactor <module>Main.vue by:Jon
- refactor: refs #7014 refactor ZoneCard, deleted ZoneMain & created basic tests for functionality by:Jon
- refactor: refs #7197 use invoiceInSearchbar & queryParams by:jorgep
- refactor: refs #7323 hidden column filter proposal by:Jon
- refactor: refs #7356 fixed VnTable filters by:Jon
- refactor: refs #7356 requested changes by:Jon
- refactor: wip use vnTable CustomerCredits by:jorgep
### Fixed 🛠️
- chore: refs #7197 fix test by:jorgep
- chore: refs #7197 fix tests by:jorgep
- chore: refs #7197 fix unit tests by:jorgep
- feat: refs #7323 fix descriptors, added VnTable and minor changes by:Jon
- feat: refs #7323 fixed tests, changed calendar styles and fix workerCreate by:Jon
- feat: refs #7356 list & weekly to VnTable and style fixes by:Jon
- fix(claim): small details (6336-claim-v6) by:alexm
- fix: columns style by:alexm
- fix: customer defaulter add amount order (6943-fixCustomer) by:alexm
- fix: customerDefaulter correct functionality by:alexm
- fix: customerNotifications filter by:alexm
- fix: fix conflicts by:Jon
- fix: refs #6101 fix TicketList by:Jon
- fix: refs #6891 worker tests by:jorgep
- fix: refs #6943 drop padding-left checkbox & create wrap mode vnRow by:jorgep
- fix: refs #6943 prevent undefined by:jorgep
- fix: refs #7014 fix tests by:Jon
- fix: refs #7014 fix wagon module by:Jon
- fix: refs #7197 add url InvoiceInSearchbar by:jorgep
- fix: refs #7197 amount reactivity by:jorgep
- fix: refs #7197 drop character by:jorgep
- fix: refs #7197 reactivity invoiceCorrection by:jorgep
- fix: refs #7197 responsive summary layout by:jorgep
- fix: refs #7197 rollback by:jorgep
- fix: refs #7197 rollback crudModel by:jorgep
- fix: refs #7197 setInvoiceInCorrecition by:jorgep
- fix: refs #7197 vat, intrastat, filter and list sections by:jorgep
- fix: refs #7323 fix department & email table filter by:Jon
- fix: refs #7323 fixed left filter by:Jon
- fix: refs #7323 fix workerTimeControl form by:Jon
- fix: refs #7401 fix routeForm by:pablone
- fix: refs #7401 remove console.log by:pablone
- fix: refs CAU 207504 fix itemDiary and logs by:Jon
- fix: workerCreate form street field to be always upperCase by:Jon
- hotfix: refs CAU #207614 fix sale.concept field by:Jon
- refactor: refs #7356 fixed VnTable filters by:Jon
- refs #6898 fix by:carlossa
- Ticket expedition initial load fix by:wbuezas
# Version 24.28 - 2024-07-09
### Added 🆕
- Change header titles style by:wbuezas
- chore: refs #7436 fix e2e (origin/7436-showQCheckbox) by:jorgep
- feat: #7196 eslint (origin/7196-cjsToEsm) by:jgallego
- feat: adapt tu VnTable → CrudModel by:alexm
- feat(CustomerFIlter): use correct table by:alexm
- feat(customerList): add searchbar by:alexm
- feat: customerList is customerExtendedList by:alexm
- feat: fixes #7196 by:jgallego
- feat: refs #6739 transferInvoice new checkbox and functionality by:Jon
- feat: refs #6825 create vnTable and add in CustomerExtendedList by:alexm
- feat: refs #6825 create vnTableColumn, cardActions by:alexm
- feat: refs #6825 fix modes by:alexm
- feat: refs #6825 qchip color by:alexm
- feat: refs #6825 right filter panel (6825-vnTable) by:alexm
- feat: refs #6825 scroll for table mode by:alexm
- feat: refs #6825 share filters, create popup by:alexm
- feat: refs #6825 VnComponent mix component and attrs Form to create new row by:alexm
- feat: refs #6825 VnTableFilter and VnPanelFilter init by:alexm
- feat: refs #6826 added rol summary link by:Jon
- feat: refs #6896 created VnImg and added to order module by:Jon
- feat: refs #6896 new filters by:Jon
- feat: refs #7129 fix some code and add order by:pablone
- feat: refs #7436 show checkbox by:jorgep
- feat: refs #7545 Deleted hasIncoterms client column (origin/7545-hasIncoterms) by:guillermo
- feat(TicketService): use correct format by:alexm
- feat(url): sepate filters by:alexm
- feat(VnFilter): merge objects by:alexm
- feat(VnTable): is-editable and use-model. fix: checkbox by:alexm
- feat(VnTable): refs #6825 actions sticky by:alexm
- feat(VnTable): refs #6825 addInWhere by:alexm
- feat(VnTable): refs #6825 dinamic columns by:alexm
- feat(VnTable): refs #6825 execute function when create by:alexm
- feat(VnTable): refs #6825 fix ellipsis and add titles by:alexm
- feat(VnTable): refs #6825 merge where's by:alexm
- feat(VnTable): refs #6825 move to folder. fix checkboxs by:alexm
- feat(VnTable): refs #6825 remove field prop. Add actions in table by:alexm
- feat(VnTable): refs #6825 use checkbox if startsWith 'is' or 'has' by:alexm
- feat(VnTable): refs #6825 VnTableChip component by:alexm
- feat(vnTable): reload data when change url by:alexm
- feat(WorkerFormation): add columnFilter by:alexm
- feat(WorkerFormation): is-editable and use-model by:alexm
- fix: notify icon style by:Javier Segarra
- refactor: refs #6896 fixed styles by:Jon
- Revert "feat: fixes #7196" by:alexm
- style: refs #6464 changed checkbox and qbtn styles by:Jon
### Changed 📦
- perf: Remove div.col by:Javier Segarra
- perf: remove ItemPicture by:Javier Segarra
- perf: replace ItemPicture in favour of VnImg by:Javier Segarra
- refactor by:wbuezas
- refactor: refs #5447 changed warehouse filter by:Jon
- refactor: refs #5447 changed warehouse out filter behavior by:Jon
- refactor: refs #5447 fixed filter if continent not selected by:Jon
- refactor: refs #5447 fix request by:Jon
- refactor: refs #5447 refactor filters by:Jon
- refactor: refs #6739 changed invoice functions' name by:Jon
- refactor: refs #6739 changed router.push by:Jon
- refactor: refs #6739 deleted useless const by:Jon
- refactor: refs #6739 fix redirect transferInvoice by:Jon
- refactor: refs #6739 new confirmation window by:Jon
- refactor: refs #6739 requested changes by:Jon
- refactor: refs #6739 updated transferInvoice function by:Jon
- refactor: refs #6896 changes requested in PR by:Jon
- refactor: refs #6896 end migration orders by:Jon
- refactor: refs #6896 fixed styles by:Jon
- refactor: refs #6896 fix qdrawer by:Jon
- refactor: refs #6896 refactor VnImg by:Jon
- refactor: refs #6896 requested changes by:Jon
- refactor: refs #6977 fix VnImg props (origin/6977-ClonedURL) by:Jon
- refactor: refs #6977 refactor VnImg by:Jon
- refactor: refs #6977 use VnImg by:Jon
- refactors by:alexm
### Fixed 🛠️
- chore: refs #7436 fix e2e (origin/7436-showQCheckbox) by:jorgep
- feat: fixes #7196 by:jgallego
- feat: refs #6825 fix modes by:alexm
- feat: refs #7129 fix some code and add order by:pablone
- feat(VnTable): is-editable and use-model. fix: checkbox by:alexm
- feat(VnTable): refs #6825 fix ellipsis and add titles by:alexm
- feat(VnTable): refs #6825 move to folder. fix checkboxs by:alexm
- fix(ArrayData): refs #6825 router.replace and use filter.where by:alexm
- fix: bug replace by:alexm
- fix: column hidden v-if by:Javier Segarra
- fix: comment 4 by:Javier Segarra
- fix: comments by:Javier Segarra
- fix: cypress.config to mjs by:alexm
- fix(EntryBuys): fix VnSubtoolbar by:alexm
- fixes: fix vnFilter params and redirect by:alexm
- fix: fix warnings by:alexm
- fix: invoiceDueDay test by:alexm
- fix log view not refreshing when changing id param by:wbuezas
- fix: map selected by:Javier Segarra
- fix: merge dev by:Javier Segarra
- fix: notify icon style by:Javier Segarra
- fix: point 1 by:Javier Segarra
- fix: point 3 by:Javier Segarra
- fix: refs #5447 deleted console.log by:Jon
- fix: refs 6464 deleted useless class in checkbox by:Jon
- fix: refs #6464 fix error isLoading by:Jon
- fix: refs #6739 changed checkbox field by:Jon
- fix: refs #6825 css by:carlossa
- fix: refs #6826 fix redirect by:Jon
- fix: refs #6826 fix roleDescriptor by:Jon
- fix: refs #7129 fix e2e by:pablone
- fix: refs #7129 fix module routes by:pablone
- fix: refs #7129 fix some issues on load and tools by:pablone
- fix: refs #7129 remove consoleLog by:pablone
- fix: refs #7129 remove fix from claim lines by:pablone
- fix: refs #7274 fix duplicate rows by:jorgep
- fix: refs #7433 skeleton by:jorgep
- fix: refs #7623 bugs & tests by:jorgep
- fix: refs #7623 disable router update by:jorgep
- fix: refs #7623 redirect by:jorgep
- fix: refs #7623 test by:jorgep
- fix: refs #7623 update add updateRoute prop in VnPaginate by:jorgep
- fix: refs #7623 updating skip param by:jorgep
- fix: revert cypress mjs by:alexm
- fix: SkeletonTable by:alexm
- fix: state translations by:Javier Segarra
- fix: ticket order by:Javier Segarra
- fix(ticket router): typo by:alexm
- fix(TicketService): pay use selected by:alexm
- fix: TravelLog by:Javier Segarra
- fix(url): filter by:alexm
- fix(url): redirect by:alexm
- fix(VnFilter): filter with params by:alexm
- fix(VnFilterPanel): remove key by:alexm
- fix(VnTable): create scss by:alexm
- fix(VnTable): duplicate fetch by:alexm
- fix(VnTable): Qtable v-bind by:alexm
- fix(VnTable): refs #6825 checkbox align and color by:alexm
- fix(VnTable): refs #6825 fix click sticky column by:alexm
- fix(VnTable): refs #6825 fix events and css by:alexm
- fix(VnTable): refs #6825 VnInputDate by:alexm
- fix(VnTable): showLabel by:alexm
- fix(VnTable): warns by:alexm
- fix: WorkerNotificationsManager test by:alexm
- fix: WorkerSelect option format by:Javier Segarra
- refactor: refs #5447 fixed filter if continent not selected by:Jon
- refactor: refs #5447 fix request by:Jon
- refactor: refs #6739 fix redirect transferInvoice by:Jon
- refactor: refs #6896 fixed styles by:Jon
- refactor: refs #6896 fix qdrawer by:Jon
- refactor: refs #6977 fix VnImg props (origin/6977-ClonedURL) by:Jon
- refs #6504 fix formModel claimFilter claimCard (origin/6504-fixCardClaim) by:carlossa
- refs #7406 fix components by:carlossa
- refs #7406 fix pr by:carlossa
- refs #7406 fix props by:carlossa
- refs #7406 fix Tb components create by:carlossa
- refs #7406 fix trad by:carlossa
- refs #7406 fix url by:carlossa
- refs #7406 fix VnTable columns by:carlossa
- refs #7409 fix balance and formation by:carlossa
- refs #7409 fix trad by:carlossa
- Revert "feat: fixes #7196" by:alexm
- test: fix intermitent e2e by:alexm
- test: fix vnSearchbar adapt to vnTable (origin/7648_dev_customerEntries) by:alexm
# Version 24.24 - 2024-06-11
### Added 🆕
- feat: 6942 hashtag in key : value summary by:jgallego
- feat: #6957: Rename FetchedTags instance tag by:Javier Segarra
- feat: refactor template by:Javier Segarra
- feat: refs #6600 Add option to add comment for photo motivation by:jorgep
- feat: refs #6942 test e2e tobook & toUnbook by:jorgep
- feat: refs #6942 to book summary button & reactive value by:jorgep
- feat: refs #6942 to unbook by:jorgep
- feat: refs #6942 url update by:jorgep
- feat: refs #6942 use correct currency in InvoiceIn components by:jorgep
- feat: refs #6942 vat rate total by:jorgep
- feat: refs #7494 new icons (7494-icons) by:alexm
- feat: refs #7494 new icons by:alexm
- feat: refs #7542 drop space by:jorgep
- feat: refs #7542 empty by:jorgep
- fix: refs #6942 changes and new features by:jorgep
- fix: style by:Javier Segarra
- style: color transparent when is fetive by:Javier Segarra
- style: fix color when is empty by:Javier Segarra
- style: reset poc style (6957_refactorFetechedTags) by:Javier Segarra
- style: reset poc style by:Javier Segarra
- style updates by:Javier Segarra
### Changed 📦
- feat: refactor template by:Javier Segarra
- perf: 6957 add color as new shared variable by:Javier Segarra
- perf: 6957 change fetchedTags color by:Javier Segarra
- perf: remove local tree variable by:Javier Segarra
- refactor: add flat by:alexm
- refactor: refs #6600 replace QInput to VnInput by:jorgep
- refactor: refs #6652 improved defaulter section by:Jon
- refactor: refs #6942 Fix getTotalAmount function to correctly calculate the total amount in InvoiceInDueDay.vue by:jorgep
- refactor: refs #6942 new summary layout by:jorgep
- refactor: refs #6942 store key & actions by:jorgep
- refactor: refs #6942 summary by:jorgep
- refactor: refs #6942 use router hook by:jorgep
- refactor: refs #6942 WIP summary layout by:jorgep
### Fixed 🛠️
- fix: 9-12 by:Javier Segarra
- fix: defaulter icon by:alexm
- fix: refs #5186 validation by:jorgep
- fix: refs #6095 add reFfk null on search by:pablone
- fix: refs #6942 cardDescriptor use store if its popup or different source data by:jorgep
- fix: refs #6942 changes and new features by:jorgep
- fix: refs #6942 drop comments by:jorgep
- fix: refs #6942 drop console by:jorgep
- fix: refs #6942 drop console.log by:jorgep
- fix: refs #6942 e2e test (origin/6942-warmfix-fixFormModel) by:jorgep
- fix: refs #6942 e2e tests by:jorgep
- fix: refs #6942 e2e tests by:jorgep
- fix: refs #6942 fix emit on data saved by:jorgep
- fix: refs #6942 fix emit on reset by:jorgep
- fix: refs #6942 fix vncard by:jorgep
- fix: refs #6942 formModel & CardDescriptor by:jorgep
- fix: refs #6942 formModel watch changes & invoiceInCreate by:jorgep
- fix: refs #6942 import by:jorgep
- fix: refs #6942 reloading by:jorgep
- fix: refs #6942 rollback by:jorgep
- fix: refs #6942 selectable expense by:jorgep
- fix: refs #6942 skip e2e tests by:jorgep
- fix: refs #6942 table bottom highlight & drop isBooked field by:jorgep
- fix: refs #6942 tests e2e by:jorgep
- fix: refs #6942 tests & summary table spacing by:jorgep
- fix: refs #6942 unit tests by:jorgep
- fix: refs #6942 vnLocation by:jorgep
- fix: refs #6942 wip: formModel by:jorgep
- fix: refs #7542 use right panel by:jorgep
- fix: searchbar redirect by:alexm
- fix: style by:Javier Segarra
- fix: WorkerCalendarItem by:Javier Segarra
- mini fix by:wbuezas
- refs #6111 clean code fix changes by:carlossa
- refs #6111 fix merge, fix column by:carlossa
- refs #6111 fix qtable, actions, scroll by:carlossa
- refs #6111 fix routeList by:carlossa
- refs #6111 fix sticky by:carlossa
- refs #6111 fix trad remove logs by:carlossa
- refs #6111 fix visibleColumns by:carlossa
- refs #6111 routeList fix by:carlossa
- refs #6332 fix calendar by:carlossa
- refs #6332 fix colors by:carlossa
- refs #6332 fix festive by:carlossa
- refs #6820 fix BasicData Tickets by:carlossa
- refs #6820 fix error front by:carlossa
- refs #6820 fix traduction by:carlossa
- refs #7391 fix textarea by:carlossa
- refs #7396 fix summary by:carlossa
- Search childs fix by:wbuezas
- small fix by:wbuezas
- style: fix color when is empty by:Javier Segarra
# Changelog # Changelog
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
@ -857,12 +7,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [2420.01] ## [2420.01]
### Added
- (Item) => Se añade la opción de añadir un comentario del motivo de hacer una foto
- (Worker) => Se añade la opción de crear un trabajador ajeno a la empresa
- (Route) => Ahora se muestran todos los cmrs
## [2418.01] ## [2418.01]
## [2416.01] - 2024-04-18 ## [2416.01] - 2024-04-18

4
Jenkinsfile vendored
View File

@ -94,7 +94,7 @@ pipeline {
sh 'quasar build' sh 'quasar build'
script { script {
def packageJson = readJSON file: 'package.json' def packageJson = readJSON file: 'package.json'
env.VERSION = "${packageJson.version}-build${env.BUILD_ID}" env.VERSION = packageJson.version
} }
dockerBuild() dockerBuild()
} }
@ -106,7 +106,7 @@ pipeline {
steps { steps {
script { script {
def packageJson = readJSON file: 'package.json' def packageJson = readJSON file: 'package.json'
env.VERSION = "${packageJson.version}-build${env.BUILD_ID}" env.VERSION = packageJson.version
} }
withKubeConfig([ withKubeConfig([
serverUrl: "$KUBERNETES_API", serverUrl: "$KUBERNETES_API",

View File

@ -1,34 +0,0 @@
features_types=(chore feat style)
changes_types=(refactor perf)
fix_types=(fix revert)
file="CHANGELOG.md"
file_tmp="temp_log.txt"
file_current_tmp="temp_current_log.txt"
setType(){
echo "### $1" >> $file_tmp
arr=("$@")
echo "" > $file_current_tmp
for i in "${arr[@]}"
do
git log --grep="$i" --oneline --no-merges --format="- %s %d by:%an" master..test >> $file_current_tmp
done
# remove duplicates
sort -o $file_current_tmp -u $file_current_tmp
cat $file_current_tmp >> $file_tmp
echo "" >> $file_tmp
# remove tmp current file
[ -e $file_current_tmp ] && rm $file_current_tmp
}
echo "# Version XX.XX - XXXX-XX-XX" >> $file_tmp
echo "" >> $file_tmp
setType "Added 🆕" "${features_types[@]}"
setType "Changed 📦" "${changes_types[@]}"
setType "Fixed 🛠️" "${fix_types[@]}"
cat $file >> $file_tmp
mv $file_tmp $file

View File

@ -1 +0,0 @@
module.exports = { extends: ['@commitlint/config-conventional'] };

View File

@ -11,22 +11,12 @@ module.exports = defineConfig({
video: false, video: false,
specPattern: 'test/cypress/integration/**/*.spec.js', specPattern: 'test/cypress/integration/**/*.spec.js',
experimentalRunAllSpecs: true, experimentalRunAllSpecs: true,
watchForFileChanges: true,
reporter: 'cypress-mochawesome-reporter',
reporterOptions: {
charts: true,
reportPageTitle: 'Cypress Inline Reporter',
embeddedScreenshots: true,
reportDir: 'test/cypress/reports',
inlineAssets: true,
},
component: { component: {
componentFolder: 'src', componentFolder: 'src',
testFiles: '**/*.spec.js', testFiles: '**/*.spec.js',
supportFile: 'test/cypress/support/unit.js', supportFile: 'test/cypress/support/unit.js',
}, },
setupNodeEvents(on, config) { setupNodeEvents(on, config) {
require('cypress-mochawesome-reporter/plugin')(on);
// implement node event listeners here // implement node event listeners here
}, },
}, },

View File

@ -1,23 +1,19 @@
{ {
"name": "salix-front", "name": "salix-front",
"version": "24.50.0", "version": "24.24.1",
"description": "Salix frontend", "description": "Salix frontend",
"productName": "Salix", "productName": "Salix",
"author": "Verdnatura", "author": "Verdnatura",
"private": true, "private": true,
"packageManager": "pnpm@8.15.1", "packageManager": "pnpm@8.15.1",
"scripts": { "scripts": {
"resetDatabase": "cd ../salix && gulp docker",
"lint": "eslint --ext .js,.vue ./", "lint": "eslint --ext .js,.vue ./",
"format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore", "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
"test:e2e": "cypress open", "test:e2e": "cypress open",
"test:e2e:ci": "npm run resetDatabase && cd ../salix-front && cypress run", "test:e2e:ci": "cd ../salix && gulp docker && cd ../salix-front && cypress run",
"test": "echo \"See package.json => scripts for available tests.\" && exit 0", "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
"test:unit": "vitest", "test:unit": "vitest",
"test:unit:ci": "vitest run", "test:unit:ci": "vitest run"
"commitlint": "commitlint --edit",
"prepare": "npx husky install",
"addReferenceTag": "node .husky/addReferenceTag.js"
}, },
"dependencies": { "dependencies": {
"@quasar/cli": "^2.3.0", "@quasar/cli": "^2.3.0",
@ -33,8 +29,6 @@
"vue-router": "^4.2.1" "vue-router": "^4.2.1"
}, },
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^19.2.1",
"@commitlint/config-conventional": "^19.1.0",
"@intlify/unplugin-vue-i18n": "^0.8.1", "@intlify/unplugin-vue-i18n": "^0.8.1",
"@pinia/testing": "^0.1.2", "@pinia/testing": "^0.1.2",
"@quasar/app-vite": "^1.7.3", "@quasar/app-vite": "^1.7.3",
@ -43,12 +37,10 @@
"@vue/test-utils": "^2.4.4", "@vue/test-utils": "^2.4.4",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",
"cypress": "^13.6.6", "cypress": "^13.6.6",
"cypress-mochawesome-reporter": "^3.8.2",
"eslint": "^8.41.0", "eslint": "^8.41.0",
"eslint-config-prettier": "^8.8.0", "eslint-config-prettier": "^8.8.0",
"eslint-plugin-cypress": "^2.13.3", "eslint-plugin-cypress": "^2.13.3",
"eslint-plugin-vue": "^9.14.1", "eslint-plugin-vue": "^9.14.1",
"husky": "^8.0.0",
"postcss": "^8.4.23", "postcss": "^8.4.23",
"prettier": "^2.8.8", "prettier": "^2.8.8",
"vitest": "^0.31.1" "vitest": "^0.31.1"

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.9 KiB

View File

@ -29,7 +29,22 @@ module.exports = configure(function (/* ctx */) {
// app boot file (/src/boot) // app boot file (/src/boot)
// --> boot files are part of "main.js" // --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli/boot-files // https://v2.quasar.dev/quasar-cli/boot-files
boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar', 'quasar.defaults'], boot: [
'i18n',
'axios',
'vnDate',
'validations',
'quasar',
'quasar.defaults',
'customQTh',
// 'customQInput',
// 'customQSelect',
'customQBtn',
'customQBtnGroup',
'vnTranslate',
],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
css: ['app.scss'], css: ['app.scss'],

View File

@ -1,23 +1,20 @@
import axios from 'axios'; import axios from 'axios';
import { Notify } from 'quasar';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
import { Router } from 'src/router'; import { Router } from 'src/router';
import useNotify from 'src/composables/useNotify.js'; import { i18n } from './i18n';
import { useStateQueryStore } from 'src/stores/useStateQueryStore';
const session = useSession(); const session = useSession();
const { notify } = useNotify(); const { t } = i18n.global;
const stateQuery = useStateQueryStore();
const baseUrl = '/api/';
axios.defaults.baseURL = baseUrl; axios.defaults.baseURL = '/api/';
const axiosNoError = axios.create({ baseURL: baseUrl });
const onRequest = (config) => { const onRequest = (config) => {
const token = session.getToken(); const token = session.getToken();
if (token.length && !config.headers.Authorization) { if (token.length && !config.headers.Authorization) {
config.headers.Authorization = token; config.headers.Authorization = token;
} }
stateQuery.add(config);
return config; return config;
}; };
@ -26,34 +23,59 @@ const onRequestError = (error) => {
}; };
const onResponse = (response) => { const onResponse = (response) => {
const config = response.config; const { method } = response.config;
stateQuery.remove(config);
if (config.method === 'patch') { const isSaveRequest = method === 'patch';
notify('globals.dataSaved', 'positive'); if (isSaveRequest) {
Notify.create({
message: t('globals.dataSaved'),
type: 'positive',
});
} }
return response; return response;
}; };
const onResponseError = (error) => { const onResponseError = (error) => {
stateQuery.remove(error.config); let message = '';
if (session.isLoggedIn() && error.response?.status === 401) { const response = error.response;
session.destroy(false); const responseData = response && response.data;
const responseError = responseData && response.data.error;
if (responseError) {
message = responseError.message;
}
switch (response?.status) {
case 500:
message = 'errors.statusInternalServerError';
break;
case 502:
message = 'errors.statusBadGateway';
break;
case 504:
message = 'errors.statusGatewayTimeout';
break;
}
if (session.isLoggedIn() && response?.status === 401) {
session.destroy();
const hash = window.location.hash; const hash = window.location.hash;
const url = hash.slice(1); const url = hash.slice(1);
Router.push(`/login?redirect=${url}`); Router.push({ path: url });
} else if (!session.isLoggedIn()) { } else if (!session.isLoggedIn()) {
return Promise.reject(error); return Promise.reject(error);
} }
Notify.create({
message: t(message),
type: 'negative',
});
return Promise.reject(error); return Promise.reject(error);
}; };
axios.interceptors.request.use(onRequest, onRequestError); axios.interceptors.request.use(onRequest, onRequestError);
axios.interceptors.response.use(onResponse, onResponseError); axios.interceptors.response.use(onResponse, onResponseError);
axiosNoError.interceptors.request.use(onRequest);
axiosNoError.interceptors.response.use(onResponse);
export { onRequest, onResponseError, axiosNoError }; export { onRequest, onResponseError };

51
src/boot/customQBtn.js Normal file
View File

@ -0,0 +1,51 @@
import { boot } from 'quasar/wrappers';
import i18n from 'src/i18n';
export default boot(({ app }) => {
// Usar vue-i18n en la aplicación
app.use(i18n);
// Mixin global para añadir la clase CSS y traducir etiquetas QInput y QSelect
app.mixin({
mounted() {
this.styleBtn(this.$el);
},
methods: {
styleBtn(el) {
if (!el) return;
if (this.$el?.__vueParentComponent?.type?.name === 'QBtn') {
// Recorrer los elementos hijos
const _children = el.children || [];
const childrens = Array.from(_children).filter((child) =>
child.classList.contains('q-btn')
);
for (const btn of childrens) {
btn.classList.add();
}
/* for (let i = 0; i < children.length; i++) {
const child = children[i];
if (
child.tagName === 'DIV' &&
child.classList.contains('q-field__inner')
) {
// Detectar si es un QInput o QSelect
const input = child.querySelector('input');
if (input?.__vueParentComponent?.type?.name === 'QSelect') {
// Traducción de la etiqueta
const labelElement =
child.querySelector('.q-field__label');
if (labelElement) {
const labelKey = labelElement.textContent.trim();
labelElement.textContent = this.$t(labelKey);
}
}
}
// Aplicar la lógica a los elementos hijos recursivamente
this.mixinQSelect(child);
}*/
}
},
},
});
});

View File

@ -0,0 +1,48 @@
import { boot } from 'quasar/wrappers';
import i18n from 'src/i18n';
export default boot(({ app }) => {
// Usar vue-i18n en la aplicación
app.use(i18n);
// Mixin global para añadir la clase CSS y traducir etiquetas QInput y QSelect
app.mixin({
mounted() {
this.styleBtnGroup(this.$el);
},
methods: {
styleBtnGroup(el) {
if (!el) return;
if (this.$el?.__vueParentComponent?.type?.name === 'QBtnGroup') {
// Recorrer los elementos hijos
this.$el.classList.add('q-gutter-x-sm');
this.$el.style.columnGap = '10px';
/*for (let i = 0; i < children.length; i++) {
const child = children[i];
if (
child.tagName === 'DIV' &&
child.classList.contains('q-field__inner')
) {
// Detectar si es un QInput o QSelect
const input = child.querySelector('input');
if (input?.__vueParentComponent?.type?.name === 'QSelect') {
// Traducción de la etiqueta
const labelElement =
child.querySelector('.q-field__label');
if (labelElement) {
const labelKey = labelElement.textContent.trim();
labelElement.textContent = this.$t(labelKey);
}
}
}
// Aplicar la lógica a los elementos hijos recursivamente
this.mixinQSelect(child);
}*/
}
},
},
});
});

77
src/boot/customQInput.js Normal file
View File

@ -0,0 +1,77 @@
// src/boot/customQTh.js
import { boot } from 'quasar/wrappers';
import { QInput } from 'quasar';
import i18n from 'src/i18n';
const TR_HEADER = 'tr-header';
export default boot((b) => {
const { app } = b;
app.use(i18n);
app.mixin({
// mounted() {
// this.applyMixinLogic();
// },
mounted() {
this.mixinQInput();
// if (this.$options.name === QInput.name) {
// console.table([this.$options.name]);
// if (this.label) this.label = this.$t(this.label);
// // this.addClassToQTh(this);
// }
},
methods: {
mixinQInput() {
if (this.$options.name === 'QInput') {
// Traducción de la etiqueta
if (this.label) {
const el = this.$el;
// Recorrer los elementos hijos
const children = el.children || [];
for (let i = 0; i < children.length; i++) {
const child = children[i];
if (
child.tagName === 'DIV' &&
child.classList.contains('q-field__inner')
) {
const input = child.querySelector('input');
const filterAvailableText = (element) =>
element.__vueParentComponent.type.name === 'QInput' &&
element.__vueParentComponent?.attrs?.class !==
'vn-input-date';
if (
input &&
input.__vueParentComponent.type.name === 'QInput'
) {
// Añadir clase CSS
input.classList.add('input-default');
// Traducción de la etiqueta
const labelElement =
child.querySelector('.q-field__label');
if (labelElement) {
const labelKey = labelElement.textContent.trim();
labelElement.textContent = this.$t(labelKey);
}
}
}
}
// Traducción de la etiqueta
// const label = this.$el.getAttribute('label');
// if (label) {
// this.$el = this.$el.setAttribute('label', 'sasd');
// }
// this.$props.label = this.$t(`*${this.$props.label}`);
// this.label = this.$t(`*${this.$props.label}`);
// this.getNativeElement().ariaLabel = '++++';
}
// // Añadir clase CSS
// if (!this.$el.classList.contains('input-default')) {
// this.$el.classList.add('input-default');
// }
}
},
},
});
});

46
src/boot/customQSelect.js Normal file
View File

@ -0,0 +1,46 @@
import { boot } from 'quasar/wrappers';
import i18n from 'src/i18n';
import { QInput, QSelect } from 'quasar';
export default boot(({ app }) => {
// Usar vue-i18n en la aplicación
app.use(i18n);
// Mixin global para añadir la clase CSS y traducir etiquetas QInput y QSelect
app.mixin({
mounted() {
this.mixinQSelect(this.$el);
},
methods: {
mixinQSelect(el) {
if (!el) return;
if (this.$options.name === 'QSelect') {
// Recorrer los elementos hijos
const children = el.children || [];
for (let i = 0; i < children.length; i++) {
const child = children[i];
if (
child.tagName === 'DIV' &&
child.classList.contains('q-field__inner')
) {
// Detectar si es un QInput o QSelect
const input = child.querySelector('input');
if (input?.__vueParentComponent?.type?.name === 'QSelect') {
// Traducción de la etiqueta
const labelElement =
child.querySelector('.q-field__label');
if (labelElement) {
const labelKey = labelElement.textContent.trim();
labelElement.textContent = this.$t(labelKey);
}
}
}
// Aplicar la lógica a los elementos hijos recursivamente
this.mixinQSelect(child);
}
}
},
},
});
});

34
src/boot/customQTh.js Normal file
View File

@ -0,0 +1,34 @@
// src/boot/customQTh.js
import { QTable } from 'quasar';
import { boot } from 'quasar/wrappers';
import i18n from 'src/i18n';
const TR_HEADER = 'tr-header';
export default boot((b) => {
const { app } = b;
app.use(i18n);
app.mixin({
mounted() {
if (this.$options.name === QTable.name) {
console.table([this.$options.name]);
this.addClassToQTh(this.columns ?? []);
}
},
methods: {
addClassToQTh(columns) {
for (const column of columns) {
let { headerClasses, label, sortable } = column ?? [];
if (!headerClasses) headerClasses = TR_HEADER;
if (!Array.isArray(headerClasses)) headerClasses = [headerClasses];
else headerClasses.push(TR_HEADER);
column.headerClasses = headerClasses;
if (sortable === undefined) column.sortable = true;
column.label = this.$t(label);
console.table([headerClasses, column.headerClasses]);
}
},
},
});
});

30
src/boot/defaults/qBtn.js Normal file
View File

@ -0,0 +1,30 @@
import { QBtn } from 'quasar';
import { QBtnGroup } from 'quasar';
QBtn.props.size = {
type: QBtn.props.size,
default: 'md',
};
// QBtn.props.flat = {
// type: QBtn.props.flat,
// default: false,
// };
// QBtnGroup.props.class = {
// type: QBtn.props.class,
// default: ['q-gutter-x-sm'],
// };
// QBtnGroup.props.style = {
// type: QBtn.props.style,
// default: 'column-gap: 10px',
// };
QBtnGroup.props.push = {
type: QBtn.props.push,
default: true,
};
// QTable.props.columns = {
// type: QTable.props.columns,
// align: 'right',
// format: (value) => `${value}*`,
// };
// QTable.props.noDataLabel = {
// default: 'asd',
// };

View File

@ -0,0 +1,5 @@
import { QDrawer } from 'quasar';
import setDefault from './setDefault';
setDefault(QDrawer, 'showIfAbove', true);
setDefault(QDrawer, 'side', 'right');
setDefault(QDrawer, 'width', '256');

View File

@ -1,4 +1,20 @@
import { QInput } from 'quasar'; import { QInput } from 'quasar';
import setDefault from './setDefault'; // import setDefault from './setDefault';
QInput.props.outlined = {
type: QInput.props.outlined,
default: false,
};
QInput.props.dense = {
type: QInput.props.dense,
default: false,
};
QInput.props.stackLabel = {
type: QInput.props.stackLabel,
default: true,
};
QInput.props.hideBottomSpace = {
type: QInput.props.hideBottomSpace,
default: true,
};
setDefault(QInput, 'dense', true); // setDefault(QInput, 'outlined', false);

View File

@ -0,0 +1,4 @@
import { QList } from 'quasar';
import setDefault from './setDefault';
setDefault(QList, 'dense', true);

View File

@ -0,0 +1,19 @@
import { QScrollArea } from 'quasar';
// QScrollArea.props.visible = {
// type: QScrollArea.props.visible,
// default: true,
// };
// QScrollArea.props.contentStyle = {
// type: QScrollArea.props.contentStyle,
// default: {
// width: '100%',
// height: '100%',
// borderRadius: '25px',
// background: 'red',
// opacity: 1,
// },
// };
// QScrollArea.props.class = {
// type: QScrollArea.props.class,
// default: ['fit text-grey-8'],
// };

View File

@ -1,4 +1,14 @@
import { QSelect } from 'quasar';
import setDefault from './setDefault'; import setDefault from './setDefault';
import { QSelect } from 'quasar';
setDefault(QSelect, 'dense', true); QSelect.props.optionLabel = {
type: QSelect.props.optionLabel,
default: 'name',
};
QSelect.props.optionValue = {
type: QSelect.props.optionValue,
default: 'id',
};
// setDefault(QSelect, 'optionValue', 'id');
// setDefault(QSelect, 'optionLabel', 'name');

View File

@ -1,5 +1,23 @@
import { QTable } from 'quasar'; import { QTable } from 'quasar';
import setDefault from './setDefault'; import setDefault from './setDefault';
setDefault(QTable, 'pagination', { rowsPerPage: 0 }); setDefault(QTable, 'pagination', { rowsPerPage: 0 });
setDefault(QTable, 'hidePagination', true); setDefault(QTable, 'hidePagination', true);
QTable.props.columns = {
type: QTable.props.columns,
align: 'right',
format: (value) => `${value}*`,
};
QTable.props.noDataLabel = {
default: 'asd',
};
// setDefault(QTable, "noDataLabel", t('globalfs.noResults'));
setDefault(QTable, 'gridHeader', true);
setDefault(QTable, 'color', 'red-8');
setDefault(QTable, 'pagination', { rowsPerPage: 25 });
setDefault(QTable, 'rowKey', 'id');
// setDefault(QTable, 'columns', (data) => {
// console.log(this);
// });

View File

@ -1,34 +0,0 @@
export default {
mounted: function (el, binding) {
const shortcut = binding.value ?? '+';
const { key, ctrl, alt, callback } =
typeof shortcut === 'string'
? {
key: shortcut,
ctrl: true,
alt: true,
callback: () =>
document
.querySelector(`button[shortcut="${shortcut}"]`)
?.click(),
}
: binding.value;
const handleKeydown = (event) => {
if (event.key === key && (!ctrl || event.ctrlKey) && (!alt || event.altKey)) {
callback();
}
};
// Attach the event listener to the window
window.addEventListener('keydown', handleKeydown);
el._handleKeydown = handleKeydown;
},
unmounted: function (el) {
if (el._handleKeydown) {
window.removeEventListener('keydown', el._handleKeydown);
}
},
};

View File

@ -1,29 +1,20 @@
import { getCurrentInstance } from 'vue'; import { getCurrentInstance } from 'vue';
const filterAvailableInput = element => element.classList.contains('q-field__native') && !element.disabled
const filterAvailableText = element => element.__vueParentComponent.type.name === 'QInput' && element.__vueParentComponent?.attrs?.class !== 'vn-input-date';
export default { export default {
mounted: function () { mounted: function () {
const vm = getCurrentInstance(); const vm = getCurrentInstance();
if (vm.type.name === 'QForm') { if (vm.type.name === 'QForm')
if (!['searchbarForm','filterPanelForm'].includes(this.$el?.id)) { if (!['searchbarForm','filterPanelForm'].includes(this.$el?.id)) {
// TODO: AUTOFOCUS IS NOT FOCUSING // AUTOFOCUS
const that = this; const elementsArray = Array.from(this.$el.elements);
this.$el.addEventListener('keyup', function (evt) { const firstInputElement = elementsArray.filter(filterAvailableInput).find(filterAvailableText);
if (evt.key === 'Enter') {
const input = evt.target; if (firstInputElement) {
if (input.type == 'textarea' && evt.shiftKey) { firstInputElement.focus();
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,3 +1,7 @@
export * from './defaults/qTable'; export * from './defaults/qTable';
export * from './defaults/qInput'; export * from './defaults/qInput';
export * from './defaults/qSelect'; export * from './defaults/qSelect';
export * from './defaults/qBtn';
export * from './defaults/qDrawer';
export * from './defaults/qList';
export * from './defaults/qScrollArea';

View File

@ -1,51 +1,6 @@
import { boot } from 'quasar/wrappers'; import { boot } from 'quasar/wrappers';
import qFormMixin from './qformMixin'; import qFormMixin from './qformMixin';
import keyShortcut from './keyShortcut';
import useNotify from 'src/composables/useNotify.js';
import { CanceledError } from 'axios';
const { notify } = useNotify();
export default boot(({ app }) => { export default boot(({ app }) => {
app.mixin(qFormMixin); app.mixin(qFormMixin);
app.directive('shortcut', keyShortcut);
app.config.errorHandler = (error) => {
let message;
const response = error.response;
const responseData = response?.data;
const responseError = responseData && response.data.error;
if (responseError) {
message = responseError.message;
}
switch (response?.status) {
case 422:
if (error.name == 'ValidationError')
message +=
' "' +
responseError.details.context +
'.' +
Object.keys(responseError.details.codes).join(',') +
'"';
break;
case 500:
message = 'errors.statusInternalServerError';
break;
case 502:
message = 'errors.statusBadGateway';
break;
case 504:
message = 'errors.statusGatewayTimeout';
break;
}
console.error(error);
if (error instanceof CanceledError) {
const env = process.env.NODE_ENV;
if (env && env !== 'development') return;
message = 'Duplicate request';
}
notify(message ?? 'globals.error', 'negative', 'error');
};
}); });

73
src/boot/vnTranslate.js Normal file
View File

@ -0,0 +1,73 @@
import { boot } from 'quasar/wrappers';
import i18n from 'src/i18n';
import { QInput, QSelect } from 'quasar';
import VnLv from 'src/components/ui/VnLv.vue';
import { QBtn } from 'quasar';
import { QBtnGroup } from 'quasar';
import { QBtnDropdown } from 'quasar';
const VALID_QUASAR_ELEMENTS = [
QSelect.name,
QInput.name,
QBtn.name,
QBtnGroup.name,
QBtnDropdown.name,
];
const VALID_VN_ELEMENTS = [VnLv.__name];
export default boot(({ app }) => {
// Usar vue-i18n en la aplicación
app.use(i18n);
app.mixin({
mounted() {
this.handleElement(this.$el);
},
methods: {
translateLabel(labelElement) {
if (Object.keys(this.$attrs).includes('no-translate')) return;
if (labelElement) {
const labelKey = labelElement.textContent.trim();
labelElement.textContent = this.$t(labelKey);
}
},
handleElement(el) {
if (!el) return;
if (
this.$options?.__name &&
VALID_VN_ELEMENTS.includes(this.$options.__name)
) {
this.translateLabel(this.$el.querySelector('.label'));
// const labelElement = this.$el.querySelector('.label');
// if (labelElement) {
// const labelKey = labelElement.textContent.trim();
// labelElement.textContent = this.$t(labelKey);
// }
}
// Recorrer los elementos hijos
if (VALID_QUASAR_ELEMENTS.includes(this.$options?.name)) {
const _children = el.children || [];
const childrens = Array.from(_children).filter(
(child) =>
child.tagName === 'DIV' &&
child.classList.contains('q-field__inner')
);
for (const child of childrens) {
const input = child.querySelector('input');
if (
VALID_QUASAR_ELEMENTS.includes(
input?.__vueParentComponent?.type?.name
)
) {
this.translateLabel(child.querySelector('.q-field__label'));
// const labelElement = child.querySelector('.q-field__label');
// if (labelElement) {
// const labelKey = labelElement.textContent.trim();
// labelElement.textContent = this.$t(labelKey);
// }
}
}
}
},
},
});
});

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { reactive, ref, onMounted, nextTick, computed } from 'vue'; import { reactive, ref, onMounted, nextTick } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
@ -7,29 +7,27 @@ import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import FormModelPopup from './FormModelPopup.vue'; import FormModelPopup from './FormModelPopup.vue';
import { useState } from 'src/composables/useState';
defineProps({ showEntityField: { type: Boolean, default: true } });
const emit = defineEmits(['onDataSaved']); const emit = defineEmits(['onDataSaved']);
const { t } = useI18n(); const { t } = useI18n();
const bicInputRef = ref(null); const bicInputRef = ref(null);
const state = useState(); const bankEntityFormData = reactive({
name: null,
const customer = computed(() => state.get('customer')); bic: null,
countryFk: null,
id: null,
});
const countriesFilter = { const countriesFilter = {
fields: ['id', 'name', 'code'], fields: ['id', 'name', 'code'],
}; };
const bankEntityFormData = reactive({
name: null,
bic: null,
countryFk: customer.value?.countryFk,
});
const countriesOptions = ref([]); const countriesOptions = ref([]);
const onDataSaved = (...args) => { const onDataSaved = (formData, requestResponse) => {
emit('onDataSaved', ...args); emit('onDataSaved', formData, requestResponse);
}; };
onMounted(async () => { onMounted(async () => {
@ -41,6 +39,7 @@ onMounted(async () => {
<template> <template>
<FetchData <FetchData
url="Countries" url="Countries"
:filter="countriesFilter"
auto-load auto-load
@on-fetch="(data) => (countriesOptions = data)" @on-fetch="(data) => (countriesOptions = data)"
/> />
@ -50,11 +49,10 @@ onMounted(async () => {
:title="t('title')" :title="t('title')"
:subtitle="t('subtitle')" :subtitle="t('subtitle')"
:form-initial-data="bankEntityFormData" :form-initial-data="bankEntityFormData"
:filter="countriesFilter"
@on-data-saved="onDataSaved" @on-data-saved="onDataSaved"
> >
<template #form-inputs="{ data, validate }"> <template #form-inputs="{ data, validate }">
<VnRow> <VnRow class="row q-gutter-md q-mb-md">
<VnInput <VnInput
:label="t('name')" :label="t('name')"
v-model="data.name" v-model="data.name"
@ -69,7 +67,7 @@ onMounted(async () => {
:rules="validate('bankEntity.bic')" :rules="validate('bankEntity.bic')"
/> />
</VnRow> </VnRow>
<VnRow> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<VnSelect <VnSelect
:label="t('country')" :label="t('country')"
@ -82,13 +80,7 @@ onMounted(async () => {
:rules="validate('bankEntity.countryFk')" :rules="validate('bankEntity.countryFk')"
/> />
</div> </div>
<div <div v-if="showEntityField" class="col">
v-if="
countriesOptions.find((c) => c.id === data.countryFk)?.code ==
'ES'
"
class="col"
>
<VnInput <VnInput
:label="t('id')" :label="t('id')"
v-model="data.id" v-model="data.id"

View File

@ -40,7 +40,6 @@ onMounted(() => {
<template> <template>
<FormModel <FormModel
model="createDepartmentChild"
:form-initial-data="departmentChildData" :form-initial-data="departmentChildData"
:observe-form-changes="false" :observe-form-changes="false"
:default-actions="false" :default-actions="false"

View File

@ -0,0 +1,166 @@
<script setup>
import { reactive, ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import FormModelPopup from './FormModelPopup.vue';
import VnInputDate from './common/VnInputDate.vue';
const emit = defineEmits(['onDataSaved']);
const { t } = useI18n();
const router = useRouter();
const manualInvoiceFormData = reactive({
maxShipped: Date.vnNew(),
});
const formModelPopupRef = ref();
const invoiceOutSerialsOptions = ref([]);
const taxAreasOptions = ref([]);
const ticketsOptions = ref([]);
const clientsOptions = ref([]);
const isLoading = computed(() => formModelPopupRef.value?.isLoading);
const onDataSaved = async (formData, requestResponse) => {
emit('onDataSaved', formData, requestResponse);
if (requestResponse && requestResponse.id)
router.push({ name: 'InvoiceOutSummary', params: { id: requestResponse.id } });
};
</script>
<template>
<FetchData
url="InvoiceOutSerials"
:filter="{ where: { code: { neq: 'R' } }, order: ['code'] }"
@on-fetch="(data) => (invoiceOutSerialsOptions = data)"
auto-load
/>
<FetchData
url="TaxAreas"
:filter="{ order: ['code'] }"
@on-fetch="(data) => (taxAreasOptions = data)"
auto-load
/>
<FetchData
url="Tickets"
:filter="{
fields: ['id', 'nickname'],
where: { refFk: null },
order: 'shipped DESC',
}"
@on-fetch="(data) => (ticketsOptions = data)"
auto-load
/>
<FetchData
url="Clients"
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
@on-fetch="(data) => (clientsOptions = data)"
auto-load
/>
<FormModelPopup
ref="formModelPopupRef"
:title="t('Create manual invoice')"
url-create="InvoiceOuts/createManualInvoice"
model="invoiceOut"
:form-initial-data="manualInvoiceFormData"
@on-data-saved="onDataSaved"
>
<template #form-inputs="{ data }">
<span v-if="isLoading" class="text-primary invoicing-text">
<QIcon name="warning" class="fill-icon q-mr-sm" size="md" />
{{ t('Invoicing in progress...') }}
</span>
<VnRow class="row q-gutter-md q-mb-md">
<VnSelect
:label="t('Ticket')"
:options="ticketsOptions"
hide-selected
option-label="id"
option-value="id"
v-model="data.ticketFk"
@update:model-value="data.clientFk = null"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
<QItemLabel caption>{{ scope.opt?.nickname }}</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
<span class="row items-center" style="max-width: max-content">{{
t('Or')
}}</span>
<VnSelect
:label="t('Client')"
:options="clientsOptions"
hide-selected
option-label="name"
option-value="id"
v-model="data.clientFk"
@update:model-value="data.ticketFk = null"
/>
<VnInputDate :label="t('Max date')" v-model="data.maxShipped" />
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnSelect
:label="t('Serial')"
:options="invoiceOutSerialsOptions"
hide-selected
option-label="description"
option-value="code"
v-model="data.serial"
:required="true"
/>
<VnSelect
:label="t('Area')"
:options="taxAreasOptions"
hide-selected
option-label="code"
option-value="code"
v-model="data.taxArea"
:required="true"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnInput
:label="t('Reference')"
type="textarea"
v-model="data.reference"
fill-input
autogrow
/>
</VnRow>
</template>
</FormModelPopup>
</template>
<style lang="scss" scoped>
.invoicing-text {
display: flex;
justify-content: center;
align-items: center;
color: $primary;
font-size: 24px;
margin-bottom: 8px;
}
</style>
<i18n>
es:
Create manual invoice: Crear factura manual
Ticket: Ticket
Client: Cliente
Max date: Fecha límite
Serial: Serie
Area: Area
Reference: Referencia
Or: O
Invoicing in progress...: Facturación en progreso...
</i18n>

View File

@ -1,62 +1,58 @@
<script setup> <script setup>
import { onMounted, ref } from 'vue'; import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnSelectProvince from 'components/VnSelectProvince.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import FormModelPopup from './FormModelPopup.vue'; import FormModelPopup from './FormModelPopup.vue';
const emit = defineEmits(['onDataSaved']); const emit = defineEmits(['onDataSaved']);
const $props = defineProps({
countryFk: {
type: Number,
default: null,
},
provinceSelected: {
type: Number,
default: null,
},
provinces: {
type: Array,
default: () => [],
},
});
const { t } = useI18n(); const { t } = useI18n();
const cityFormData = ref({ const cityFormData = reactive({
name: null, name: null,
provinceFk: null, provinceFk: null,
}); });
onMounted(() => {
cityFormData.value.provinceFk = $props.provinceSelected; const provincesOptions = ref([]);
});
const onDataSaved = (...args) => { const onDataSaved = (dataSaved) => {
emit('onDataSaved', ...args); emit('onDataSaved', dataSaved);
}; };
</script> </script>
<template> <template>
<FetchData
@on-fetch="(data) => (provincesOptions = data)"
auto-load
url="Provinces"
/>
<FormModelPopup <FormModelPopup
:title="t('New city')" :title="t('New city')"
:subtitle="t('Please, ensure you put the correct data!')" :subtitle="t('Please, ensure you put the correct data!')"
:form-initial-data="cityFormData" :form-initial-data="cityFormData"
url-create="towns" url-create="towns"
model="city" model="city"
@on-data-saved="onDataSaved" @on-data-saved="onDataSaved($event)"
> >
<template #form-inputs="{ data, validate }"> <template #form-inputs="{ data, validate }">
<VnRow> <VnRow class="row q-gutter-md q-mb-md">
<VnInput <VnInput
:label="t('Names')" :label="t('Name')"
v-model="data.name" v-model="data.name"
:rules="validate('city.name')" :rules="validate('city.name')"
/> />
<VnSelectProvince <VnSelect
:province-selected="$props.provinceSelected" :label="t('Province')"
:country-fk="$props.countryFk" :options="provincesOptions"
hide-selected
option-label="name"
option-value="id"
v-model="data.provinceFk" v-model="data.provinceFk"
:provinces="$props.provinces" :rules="validate('city.provinceFk')"
/> />
</VnRow> </VnRow>
</template> </template>

View File

@ -1,50 +0,0 @@
<script setup>
import { useI18n } from 'vue-i18n';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import FormModelPopup from './FormModelPopup.vue';
const emit = defineEmits(['onDataSaved']);
const { t } = useI18n();
</script>
<template>
<FormModelPopup
url-create="Expenses"
model="Expense"
:title="t('New expense')"
:form-initial-data="{ id: null, isWithheld: false, name: null }"
@on-data-saved="emit('onDataSaved', $event)"
>
<template #form-inputs="{ data, validate }">
<VnRow>
<VnInput
:label="`${t('globals.code')}`"
v-model="data.id"
:required="true"
:rules="validate('expense.code')"
/>
<QCheckbox
dense
size="sm"
:label="`${t('It\'s a withholding')}`"
v-model="data.isWithheld"
:rules="validate('expense.isWithheld')"
/>
</VnRow>
<VnRow>
<VnInput
:label="`${t('globals.description')}`"
v-model="data.name"
:required="true"
:rules="validate('expense.description')"
/>
</VnRow>
</template>
</FormModelPopup>
</template>
<i18n>
es:
New expense: Nuevo gasto
It's a withholding: Es una retención
</i18n>

View File

@ -1,13 +1,13 @@
<script setup> <script setup>
import { reactive, ref, watch } from 'vue'; import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnSelectProvince from 'src/components/VnSelectProvince.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import CreateNewCityForm from './CreateNewCityForm.vue'; import CreateNewCityForm from './CreateNewCityForm.vue';
import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
import VnSelectDialog from 'components/common/VnSelectDialog.vue'; import VnSelectDialog from 'components/common/VnSelectDialog.vue';
import FormModelPopup from './FormModelPopup.vue'; import FormModelPopup from './FormModelPopup.vue';
@ -26,15 +26,16 @@ const townsFetchDataRef = ref(null);
const provincesFetchDataRef = ref(null); const provincesFetchDataRef = ref(null);
const countriesOptions = ref([]); const countriesOptions = ref([]);
const provincesOptions = ref([]); const provincesOptions = ref([]);
const townsOptions = ref([]); const townsLocationOptions = ref([]);
const town = ref({});
function onDataSaved(formData) { const onDataSaved = (formData) => {
const newPostcode = { const newPostcode = {
...formData, ...formData,
}; };
newPostcode.town = town.value.name; const townObject = townsLocationOptions.value.find(
newPostcode.townFk = town.value.id; ({ id }) => id === formData.townFk
);
newPostcode.town = townObject?.name;
const provinceObject = provincesOptions.value.find( const provinceObject = provincesOptions.value.find(
({ id }) => id === formData.provinceFk ({ id }) => id === formData.provinceFk
); );
@ -42,181 +43,96 @@ function onDataSaved(formData) {
const countryObject = countriesOptions.value.find( const countryObject = countriesOptions.value.find(
({ id }) => id === formData.countryFk ({ id }) => id === formData.countryFk
); );
newPostcode.country = countryObject?.name; newPostcode.country = countryObject?.country;
emit('onDataSaved', newPostcode); emit('onDataSaved', newPostcode);
} };
async function onCityCreated(newTown, formData) { const onCityCreated = async ({ name, provinceFk }, formData) => {
await townsFetchDataRef.value.fetch();
formData.townFk = townsLocationOptions.value.find((town) => town.name === name).id;
formData.provinceFk = provinceFk;
formData.countryFk = provincesOptions.value.find(
(province) => province.id === provinceFk
).countryFk;
};
const onProvinceCreated = async ({ name }, formData) => {
await provincesFetchDataRef.value.fetch(); await provincesFetchDataRef.value.fetch();
newTown.province = provincesOptions.value.find( formData.provinceFk = provincesOptions.value.find(
(province) => province.id === newTown.provinceFk (province) => province.name === name
); ).id;
formData.townFk = newTown; };
setTown(newTown, formData);
}
function setTown(newTown, data) {
if (!newTown) return;
town.value = newTown;
data.provinceFk = newTown.provinceFk;
data.countryFk = newTown.province.countryFk;
}
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.value = data.id;
}
watch(
() => [postcodeFormData.countryFk],
async (newCountryFk, oldValueFk) => {
if (Array.isArray(newCountryFk)) {
newCountryFk = newCountryFk[0];
}
if (Array.isArray(oldValueFk)) {
oldValueFk = oldValueFk[0];
}
if (!!oldValueFk && newCountryFk !== oldValueFk) {
postcodeFormData.provinceFk = null;
postcodeFormData.townFk = null;
}
if (oldValueFk !== newCountryFk) {
await provincesFetchDataRef.value.fetch({
where: {
countryFk: newCountryFk,
},
});
await townsFetchDataRef.value.fetch({
where: {
provinceFk: {
inq: provincesOptions.value.map(({ id }) => id),
},
},
});
}
}
);
watch(
() => postcodeFormData.provinceFk,
async (newProvinceFk, oldValueFk) => {
if (Array.isArray(newProvinceFk)) {
newProvinceFk = newProvinceFk[0];
}
if (newProvinceFk !== oldValueFk) {
await townsFetchDataRef.value.fetch({
where: { provinceFk: newProvinceFk },
});
}
}
);
async function handleProvinces(data) {
provincesOptions.value = data;
}
async function handleTowns(data) {
townsOptions.value = data;
}
async function handleCountries(data) {
countriesOptions.value = data;
}
</script> </script>
<template> <template>
<FetchData
ref="provincesFetchDataRef"
@on-fetch="handleProvinces"
:sort-by="['name ASC']"
:limit="30"
auto-load
url="Provinces/location"
/>
<FetchData <FetchData
ref="townsFetchDataRef" ref="townsFetchDataRef"
:sort-by="['name ASC']" @on-fetch="(data) => (townsLocationOptions = data)"
:limit="30"
@on-fetch="handleTowns"
auto-load auto-load
url="Towns/location" url="Towns/location"
/> />
<FetchData
ref="provincesFetchDataRef"
@on-fetch="(data) => (provincesOptions = data)"
auto-load
url="Provinces"
/>
<FetchData
@on-fetch="(data) => (countriesOptions = data)"
auto-load
url="Countries"
/>
<FormModelPopup <FormModelPopup
url-create="postcodes" url-create="postcodes"
model="postcode" model="postcode"
:title="t('New postcode')" :title="t('New postcode')"
:subtitle="t('Please, ensure you put the correct data!')" :subtitle="t('Please, ensure you put the correct data!')"
:form-initial-data="postcodeFormData" :form-initial-data="postcodeFormData"
:mapper="(data) => (data.townFk = data.townFk.id) && data"
@on-data-saved="onDataSaved" @on-data-saved="onDataSaved"
> >
<template #form-inputs="{ data, validate }"> <template #form-inputs="{ data, validate }">
<VnRow> <VnRow class="row q-gutter-md q-mb-md">
<VnInput <VnInput
:label="t('Postcode')" :label="t('Postcode')"
v-model="data.code" v-model="data.code"
:rules="validate('postcode.code')" :rules="validate('postcode.code')"
clearable
/> />
<VnSelectDialog <VnSelectDialog
:label="t('City')" :label="t('City')"
@update:model-value="(value) => setTown(value, data)" :options="townsLocationOptions"
:tooltip="t('Create city')"
v-model="data.townFk" v-model="data.townFk"
:options="townsOptions" hide-selected
option-label="name" option-label="name"
option-value="id" option-value="id"
:rules="validate('postcode.city')" :rules="validate('postcode.city')"
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]" :roles-allowed-to-create="['deliveryAssistant']"
:emit-value="false"
:clearable="true"
> >
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
<QItemSection>
<QItemLabel>{{ opt.name }}</QItemLabel>
<QItemLabel caption>
{{ opt.province.name }},
{{ opt.province.country.name }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
<template #form> <template #form>
<CreateNewCityForm <CreateNewCityForm @on-data-saved="onCityCreated($event, data)" />
:country-fk="data.countryFk"
:province-selected="data.provinceFk"
:provinces="provincesOptions"
@on-data-saved="
(_, requestResponse) =>
onCityCreated(requestResponse, data)
"
/>
</template> </template>
</VnSelectDialog> </VnSelectDialog>
</VnRow> </VnRow>
<VnRow> <VnRow class="row q-gutter-md q-mb-xl">
<VnSelectProvince <VnSelectDialog
:country-fk="data.countryFk" :label="t('Province')"
:province-selected="data.provinceFk" :options="provincesOptions"
@update:model-value="(value) => setProvince(value, data)" hide-selected
option-label="name"
option-value="id"
v-model="data.provinceFk" v-model="data.provinceFk"
:clearable="true" :rules="validate('postcode.provinceFk')"
:provinces="provincesOptions" :roles-allowed-to-create="['deliveryAssistant']"
@on-province-created="onProvinceCreated" >
<template #form>
<CreateNewProvinceForm
@on-data-saved="onProvinceCreated($event, data)"
/> />
<VnSelect </template> </VnSelectDialog
url="Countries" ></VnRow>
:sort-by="['name ASC']" <VnRow class="row q-gutter-md q-mb-xl"
><VnSelect
:label="t('Country')" :label="t('Country')"
@update:options="handleCountries" :options="countriesOptions"
hide-selected hide-selected
option-label="name" option-label="name"
option-value="id" option-value="id"
@ -231,7 +147,6 @@ async function handleCountries(data) {
<i18n> <i18n>
es: es:
New postcode: Nuevo código postal New postcode: Nuevo código postal
Create city: Crear población
Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos! Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
City: Población City: Población
Province: Provincia Province: Provincia

View File

@ -16,23 +16,11 @@ const provinceFormData = reactive({
name: null, name: null,
autonomyFk: null, autonomyFk: null,
}); });
const $props = defineProps({
countryFk: {
type: Number,
default: null,
},
provinces: {
type: Array,
default: () => [],
},
});
const autonomiesOptions = ref([]); const autonomiesOptions = ref([]);
const onDataSaved = (dataSaved, requestResponse) => { const onDataSaved = (dataSaved) => {
requestResponse.autonomy = autonomiesOptions.value.find( emit('onDataSaved', dataSaved);
(autonomy) => autonomy.id == requestResponse.autonomyFk
);
emit('onDataSaved', dataSaved, requestResponse);
}; };
</script> </script>
@ -40,14 +28,7 @@ const onDataSaved = (dataSaved, requestResponse) => {
<FetchData <FetchData
@on-fetch="(data) => (autonomiesOptions = data)" @on-fetch="(data) => (autonomiesOptions = data)"
auto-load auto-load
:filter="{ url="Autonomies"
where: {
countryFk: $props.countryFk,
},
}"
url="Autonomies/location"
:sort-by="['name ASC']"
:limit="30"
/> />
<FormModelPopup <FormModelPopup
:title="t('New province')" :title="t('New province')"
@ -55,10 +36,10 @@ const onDataSaved = (dataSaved, requestResponse) => {
url-create="provinces" url-create="provinces"
model="province" model="province"
:form-initial-data="provinceFormData" :form-initial-data="provinceFormData"
@on-data-saved="onDataSaved" @on-data-saved="onDataSaved($event)"
> >
<template #form-inputs="{ data, validate }"> <template #form-inputs="{ data, validate }">
<VnRow> <VnRow class="row q-gutter-md q-mb-md">
<VnInput <VnInput
:label="t('Name')" :label="t('Name')"
v-model="data.name" v-model="data.name"
@ -72,16 +53,7 @@ const onDataSaved = (dataSaved, requestResponse) => {
option-value="id" option-value="id"
v-model="data.autonomyFk" v-model="data.autonomyFk"
:rules="validate('province.autonomyFk')" :rules="validate('province.autonomyFk')"
> />
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
<QItemSection>
<QItemLabel>{{ opt.name }}</QItemLabel>
<QItemLabel caption> {{ opt.country.name }} </QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</VnRow> </VnRow>
</template> </template>
</FormModelPopup> </FormModelPopup>

View File

@ -38,7 +38,7 @@ const onDataSaved = (dataSaved) => {
@on-fetch="(data) => (warehousesOptions = data)" @on-fetch="(data) => (warehousesOptions = data)"
auto-load auto-load
url="Warehouses" url="Warehouses"
:filter="{ fields: ['id', 'name'], order: 'name ASC' }" :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
/> />
<FetchData <FetchData
@on-fetch="(data) => (temperaturesOptions = data)" @on-fetch="(data) => (temperaturesOptions = data)"
@ -50,10 +50,10 @@ const onDataSaved = (dataSaved) => {
model="thermograph" model="thermograph"
:title="t('New thermograph')" :title="t('New thermograph')"
:form-initial-data="thermographFormData" :form-initial-data="thermographFormData"
@on-data-saved="(_, response) => onDataSaved(response)" @on-data-saved="onDataSaved($event)"
> >
<template #form-inputs="{ data, validate }"> <template #form-inputs="{ data, validate }">
<VnRow> <VnRow class="row q-gutter-md q-mb-md">
<VnInput <VnInput
:label="t('Identifier')" :label="t('Identifier')"
v-model="data.thermographId" v-model="data.thermographId"

View File

@ -1,7 +1,6 @@
<script setup> <script setup>
import axios from 'axios'; import axios from 'axios';
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
import { useRouter, onBeforeRouteLeave } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useValidator } from 'src/composables/useValidator'; import { useValidator } from 'src/composables/useValidator';
@ -11,7 +10,6 @@ import VnConfirm from 'components/ui/VnConfirm.vue';
import SkeletonTable from 'components/ui/SkeletonTable.vue'; import SkeletonTable from 'components/ui/SkeletonTable.vue';
import { tMobile } from 'src/composables/tMobile'; import { tMobile } from 'src/composables/tMobile';
const { push } = useRouter();
const quasar = useQuasar(); const quasar = useQuasar();
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
@ -62,24 +60,14 @@ const $props = defineProps({
type: Function, type: Function,
default: null, default: null,
}, },
goTo: {
type: String,
default: '',
description: 'It is used for redirect on click "save and continue"',
},
hasSubToolbar: {
type: Boolean,
default: true,
},
}); });
const isLoading = ref(false); const isLoading = ref(false);
const hasChanges = ref(false); const hasChanges = ref(false);
const originalData = ref(); const originalData = ref();
const vnPaginateRef = ref(); const vnPaginateRef = ref();
const formData = ref([]); const formData = ref();
const saveButtonRef = ref(null); const saveButtonRef = ref(null);
const watchChanges = ref();
const formUrl = computed(() => $props.url); const formUrl = computed(() => $props.url);
const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']); const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
@ -94,46 +82,27 @@ defineExpose({
saveChanges, saveChanges,
getChanges, getChanges,
formData, formData,
vnPaginateRef,
});
onBeforeRouteLeave((to, from, next) => {
if (hasChanges.value)
quasar.dialog({
component: VnConfirm,
componentProps: {
title: t('globals.unsavedPopup.title'),
message: t('globals.unsavedPopup.subtitle'),
promise: () => next(),
},
});
else next();
}); });
async function fetch(data) { async function fetch(data) {
resetData(data);
emit('onFetch', data);
return data;
}
function resetData(data) {
if (!data) return;
if (data && Array.isArray(data)) { if (data && Array.isArray(data)) {
let $index = 0; let $index = 0;
data.map((d) => (d.$index = $index++)); data.map((d) => (d.$index = $index++));
} }
originalData.value = JSON.parse(JSON.stringify(data));
formData.value = JSON.parse(JSON.stringify(data));
if (watchChanges.value) watchChanges.value(); //destoy watcher originalData.value = data && JSON.parse(JSON.stringify(data));
watchChanges.value = watch(formData, () => (hasChanges.value = true), { deep: true }); formData.value = data && JSON.parse(JSON.stringify(data));
watch(formData, () => (hasChanges.value = true), { deep: true });
emit('onFetch', data);
return data;
} }
async function reset() { async function reset() {
await fetch(originalData.value); await fetch(originalData.value);
hasChanges.value = false; hasChanges.value = false;
} }
// eslint-disable-next-line vue/no-dupe-keys
function filter(value, update, filterOptions) { function filter(value, update, filterOptions) {
update( update(
() => { () => {
@ -159,11 +128,6 @@ async function onSubmit() {
await saveChanges($props.saveFn ? formData.value : null); await saveChanges($props.saveFn ? formData.value : null);
} }
async function onSubmitAndGo() {
await onSubmit();
push({ path: $props.goTo });
}
async function saveChanges(data) { async function saveChanges(data) {
if ($props.saveFn) { if ($props.saveFn) {
$props.saveFn(data, getChanges); $props.saveFn(data, getChanges);
@ -189,11 +153,11 @@ async function saveChanges(data) {
}); });
} }
async function insert(pushData = $props.dataRequired) { async function insert() {
const $index = formData.value.length const $index = formData.value.length
? formData.value[formData.value.length - 1].$index + 1 ? formData.value[formData.value.length - 1].$index + 1
: 0; : 0;
formData.value.push(Object.assign({ $index }, pushData)); formData.value.push(Object.assign({ $index }, $props.dataRequired));
hasChanges.value = true; hasChanges.value = true;
} }
@ -234,8 +198,6 @@ async function remove(data) {
newData = newData.filter((form) => !ids.some((id) => id == form[pk])); newData = newData.filter((form) => !ids.some((id) => id == form[pk]));
fetch(newData); fetch(newData);
}); });
} else {
reset();
} }
emit('update:selected', []); emit('update:selected', []);
} }
@ -297,9 +259,8 @@ function isEmpty(obj) {
if (obj.length > 0) return false; if (obj.length > 0) return false;
} }
async function reload(params) { async function reload() {
const data = await vnPaginateRef.value.fetch(params); vnPaginateRef.value.fetch();
fetch(data);
} }
watch(formUrl, async () => { watch(formUrl, async () => {
@ -311,11 +272,10 @@ watch(formUrl, async () => {
<VnPaginate <VnPaginate
:url="url" :url="url"
:limit="limit" :limit="limit"
v-bind="$attrs"
@on-fetch="fetch" @on-fetch="fetch"
@on-change="fetch"
:skeleton="false" :skeleton="false"
ref="vnPaginateRef" ref="vnPaginateRef"
v-bind="$attrs"
> >
<template #body v-if="formData"> <template #body v-if="formData">
<slot <slot
@ -326,12 +286,9 @@ watch(formUrl, async () => {
></slot> ></slot>
</template> </template>
</VnPaginate> </VnPaginate>
<SkeletonTable <SkeletonTable v-if="!formData" />
v-if="!formData && $attrs.autoLoad" <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
:columns="$attrs.columns?.length" <QBtnGroup push>
/>
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown() && hasSubToolbar">
<QBtnGroup push style="column-gap: 10px">
<slot name="moreBeforeActions" /> <slot name="moreBeforeActions" />
<QBtn <QBtn
:label="tMobile('globals.remove')" :label="tMobile('globals.remove')"
@ -353,40 +310,7 @@ watch(formUrl, async () => {
:title="t('globals.reset')" :title="t('globals.reset')"
v-if="$props.defaultReset" v-if="$props.defaultReset"
/> />
<QBtnDropdown
v-if="$props.goTo && $props.defaultSave"
@click="onSubmitAndGo"
:label="tMobile('globals.saveAndContinue')"
:title="t('globals.saveAndContinue')"
:disable="!hasChanges"
color="primary"
icon="save"
split
>
<QList>
<QItem
color="primary"
clickable
v-close-popup
@click="onSubmit"
:title="t('globals.save')"
>
<QItemSection>
<QItemLabel>
<QIcon
name="save"
color="white"
class="q-mr-sm"
size="sm"
/>
{{ t('globals.save').toUpperCase() }}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</QBtnDropdown>
<QBtn <QBtn
v-else-if="!$props.goTo && $props.defaultSave"
:label="tMobile('globals.save')" :label="tMobile('globals.save')"
ref="saveButtonRef" ref="saveButtonRef"
color="primary" color="primary"
@ -394,7 +318,7 @@ watch(formUrl, async () => {
@click="onSubmit" @click="onSubmit"
:disable="!hasChanges" :disable="!hasChanges"
:title="t('globals.save')" :title="t('globals.save')"
data-cy="crudModelDefaultSaveBtn" v-if="$props.defaultSave"
/> />
<slot name="moreAfterActions" /> <slot name="moreAfterActions" />
</QBtnGroup> </QBtnGroup>

View File

@ -155,7 +155,8 @@ const rotateRight = () => {
editor.value.rotate(-90); editor.value.rotate(-90);
}; };
const onSubmit = () => { const onUploadAccept = () => {
try {
if (!newPhoto.files && !newPhoto.url) { if (!newPhoto.files && !newPhoto.url) {
notify(t('Select an image'), 'negative'); notify(t('Select an image'), 'negative');
return; return;
@ -172,6 +173,9 @@ const onSubmit = () => {
newPhoto.blob = file; newPhoto.blob = file;
}) })
.then(() => makeRequest()); .then(() => makeRequest());
} catch (err) {
console.error('Error uploading image');
}
}; };
const makeRequest = async () => { const makeRequest = async () => {
@ -202,7 +206,7 @@ const makeRequest = async () => {
@on-fetch="(data) => (allowedContentTypes = data.join(', '))" @on-fetch="(data) => (allowedContentTypes = data.join(', '))"
auto-load auto-load
/> />
<QForm @submit="onSubmit()" class="all-pointer-events"> <QForm @submit="onUploadAccept()" class="all-pointer-events">
<QCard class="q-pa-lg"> <QCard class="q-pa-lg">
<span ref="closeButton" class="close-icon" v-close-popup> <span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="sm" /> <QIcon name="close" size="sm" />
@ -241,14 +245,14 @@ const makeRequest = async () => {
</div> </div>
<div class="column"> <div class="column">
<VnRow> <VnRow class="row q-gutter-md q-mb-md">
<QOptionGroup <QOptionGroup
:options="uploadMethodsOptions" :options="uploadMethodsOptions"
type="radio" type="radio"
v-model="uploadMethodSelected" v-model="uploadMethodSelected"
/> />
</VnRow> </VnRow>
<VnRow> <VnRow class="row q-gutter-md q-mb-md">
<QFile <QFile
v-if="uploadMethodSelected === 'computer'" v-if="uploadMethodSelected === 'computer'"
ref="inputFileRef" ref="inputFileRef"
@ -283,7 +287,7 @@ const makeRequest = async () => {
placeholder="https://" placeholder="https://"
/> />
</VnRow> </VnRow>
<VnRow> <VnRow class="row q-gutter-md q-mb-md">
<VnSelect <VnSelect
:label="t('Orientation')" :label="t('Orientation')"
:options="viewportTypes" :options="viewportTypes"

View File

@ -50,7 +50,8 @@ const onDataSaved = () => {
closeForm(); closeForm();
}; };
const onSubmit = async () => { const submitData = async () => {
try {
isLoading.value = true; isLoading.value = true;
const rowsToEdit = $props.rows.map((row) => ({ id: row.id, itemFk: row.itemFk })); const rowsToEdit = $props.rows.map((row) => ({ id: row.id, itemFk: row.itemFk }));
const payload = { const payload = {
@ -62,6 +63,9 @@ const onSubmit = async () => {
await axios.post($props.editUrl, payload); await axios.post($props.editUrl, payload);
onDataSaved(); onDataSaved();
isLoading.value = false; isLoading.value = false;
} catch (err) {
console.error('Error submitting table cell edit');
}
}; };
const closeForm = () => { const closeForm = () => {
@ -70,7 +74,7 @@ const closeForm = () => {
</script> </script>
<template> <template>
<QForm @submit="onSubmit()" class="all-pointer-events"> <QForm @submit="submitData()" class="all-pointer-events">
<QCard class="q-pa-lg"> <QCard class="q-pa-lg">
<span ref="closeButton" class="close-icon" v-close-popup> <span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="sm" /> <QIcon name="close" size="sm" />
@ -78,7 +82,7 @@ const closeForm = () => {
<span class="title">{{ t('Edit') }}</span> <span class="title">{{ t('Edit') }}</span>
<span class="countLines">{{ ` ${rows.length} ` }}</span> <span class="countLines">{{ ` ${rows.length} ` }}</span>
<span class="title">{{ t('buy(s)') }}</span> <span class="title">{{ t('buy(s)') }}</span>
<VnRow> <VnRow class="row q-gutter-md q-mb-md">
<VnSelect <VnSelect
:label="t('Field to edit')" :label="t('Field to edit')"
:options="fieldsOptions" :options="fieldsOptions"

View File

@ -24,7 +24,7 @@ const $props = defineProps({
default: '', default: '',
}, },
limit: { limit: {
type: [String, Number], type: String,
default: '', default: '',
}, },
params: { params: {
@ -44,7 +44,7 @@ onMounted(async () => {
async function fetch(fetchFilter = {}) { async function fetch(fetchFilter = {}) {
try { try {
const filter = { ...fetchFilter, ...$props.filter }; // eslint-disable-line vue/no-dupe-keys const filter = Object.assign(fetchFilter, $props.filter); // eslint-disable-line vue/no-dupe-keys
if ($props.where && !fetchFilter.where) filter.where = $props.where; if ($props.where && !fetchFilter.where) filter.where = $props.where;
if ($props.sortBy) filter.order = $props.sortBy; if ($props.sortBy) filter.order = $props.sortBy;
if ($props.limit) filter.limit = $props.limit; if ($props.limit) filter.limit = $props.limit;

View File

@ -50,25 +50,25 @@ const loading = ref(false);
const tableColumns = computed(() => [ const tableColumns = computed(() => [
{ {
label: t('globals.id'), label: t('entry.buys.id'),
name: 'id', name: 'id',
field: 'id', field: 'id',
align: 'left', align: 'left',
}, },
{ {
label: t('globals.name'), label: t('entry.buys.name'),
name: 'name', name: 'name',
field: 'name', field: 'name',
align: 'left', align: 'left',
}, },
{ {
label: t('globals.size'), label: t('entry.buys.size'),
name: 'size', name: 'size',
field: 'size', field: 'size',
align: 'left', align: 'left',
}, },
{ {
label: t('globals.producer'), label: t('entry.buys.producer'),
name: 'producerName', name: 'producerName',
field: 'producer', field: 'producer',
align: 'left', align: 'left',
@ -83,7 +83,8 @@ const tableColumns = computed(() => [
}, },
]); ]);
const onSubmit = async () => { const fetchResults = async () => {
try {
let filter = itemFilter; let filter = itemFilter;
const params = itemFilterParams; const params = itemFilterParams;
const where = {}; const where = {};
@ -108,6 +109,9 @@ const onSubmit = async () => {
params: { filter: JSON.stringify(filter) }, params: { filter: JSON.stringify(filter) },
}); });
tableRows.value = data; tableRows.value = data;
} catch (err) {
console.error('Error fetching entries items');
}
}; };
const closeForm = () => { const closeForm = () => {
@ -141,17 +145,17 @@ const selectItem = ({ id }) => {
@on-fetch="(data) => (InksOptions = data)" @on-fetch="(data) => (InksOptions = data)"
auto-load auto-load
/> />
<QForm @submit="onSubmit()" class="all-pointer-events"> <QForm @submit="fetchResults()" class="all-pointer-events">
<QCard class="column" style="padding: 32px; z-index: 100"> <QCard class="column" style="padding: 32px; z-index: 100">
<span ref="closeButton" class="close-icon" v-close-popup> <span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="sm" /> <QIcon name="close" size="sm" />
</span> </span>
<h1 class="title">{{ t('Filter item') }}</h1> <h1 class="title">{{ t('Filter item') }}</h1>
<VnRow> <VnRow class="row q-gutter-md q-mb-md">
<VnInput :label="t('globals.name')" v-model="itemFilterParams.name" /> <VnInput :label="t('entry.buys.name')" v-model="itemFilterParams.name" />
<VnInput :label="t('entry.buys.size')" v-model="itemFilterParams.size" /> <VnInput :label="t('entry.buys.size')" v-model="itemFilterParams.size" />
<VnSelect <VnSelect
:label="t('globals.producer')" :label="t('entry.buys.producer')"
:options="producersOptions" :options="producersOptions"
hide-selected hide-selected
option-label="name" option-label="name"
@ -159,7 +163,7 @@ const selectItem = ({ id }) => {
v-model="itemFilterParams.producerFk" v-model="itemFilterParams.producerFk"
/> />
<VnSelect <VnSelect
:label="t('globals.type')" :label="t('entry.buys.type')"
:options="ItemTypesOptions" :options="ItemTypesOptions"
hide-selected hide-selected
option-label="name" option-label="name"

View File

@ -48,13 +48,13 @@ const loading = ref(false);
const tableColumns = computed(() => [ const tableColumns = computed(() => [
{ {
label: t('globals.id'), label: t('entry.basicData.id'),
name: 'id', name: 'id',
field: 'id', field: 'id',
align: 'left', align: 'left',
}, },
{ {
label: t('globals.warehouseOut'), label: t('entry.basicData.warehouseOut'),
name: 'warehouseOutFk', name: 'warehouseOutFk',
field: 'warehouseOutFk', field: 'warehouseOutFk',
align: 'left', align: 'left',
@ -62,7 +62,7 @@ const tableColumns = computed(() => [
warehousesOptions.value.find((warehouse) => warehouse.id === val).name, warehousesOptions.value.find((warehouse) => warehouse.id === val).name,
}, },
{ {
label: t('globals.warehouseIn'), label: t('entry.basicData.warehouseIn'),
name: 'warehouseInFk', name: 'warehouseInFk',
field: 'warehouseInFk', field: 'warehouseInFk',
align: 'left', align: 'left',
@ -70,14 +70,14 @@ const tableColumns = computed(() => [
warehousesOptions.value.find((warehouse) => warehouse.id === val).name, warehousesOptions.value.find((warehouse) => warehouse.id === val).name,
}, },
{ {
label: t('globals.shipped'), label: t('entry.basicData.shipped'),
name: 'shipped', name: 'shipped',
field: 'shipped', field: 'shipped',
align: 'left', align: 'left',
format: (val) => toDate(val), format: (val) => toDate(val),
}, },
{ {
label: t('globals.landed'), label: t('entry.basicData.landed'),
name: 'landed', name: 'landed',
field: 'landed', field: 'landed',
align: 'left', align: 'left',
@ -85,7 +85,8 @@ const tableColumns = computed(() => [
}, },
]); ]);
const onSubmit = async () => { const fetchResults = async () => {
try {
let filter = travelFilter; let filter = travelFilter;
const params = travelFilterParams; const params = travelFilterParams;
const where = {}; const where = {};
@ -108,6 +109,9 @@ const onSubmit = async () => {
params: { filter: JSON.stringify(filter) }, params: { filter: JSON.stringify(filter) },
}); });
tableRows.value = data; tableRows.value = data;
} catch (err) {
console.error('Error fetching travels');
}
}; };
const closeForm = () => { const closeForm = () => {
@ -134,15 +138,15 @@ const selectTravel = ({ id }) => {
@on-fetch="(data) => (warehousesOptions = data)" @on-fetch="(data) => (warehousesOptions = data)"
auto-load auto-load
/> />
<QForm @submit="onSubmit()" class="all-pointer-events"> <QForm @submit="fetchResults()" class="all-pointer-events">
<QCard class="column" style="padding: 32px; z-index: 100"> <QCard class="column" style="padding: 32px; z-index: 100">
<span ref="closeButton" class="close-icon" v-close-popup> <span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="sm" /> <QIcon name="close" size="sm" />
</span> </span>
<h1 class="title">{{ t('Filter travels') }}</h1> <h1 class="title">{{ t('Filter travels') }}</h1>
<VnRow> <VnRow class="row q-gutter-md q-mb-md">
<VnSelect <VnSelect
:label="t('globals.agency')" :label="t('entry.basicData.agency')"
:options="agenciesOptions" :options="agenciesOptions"
hide-selected hide-selected
option-label="name" option-label="name"
@ -150,7 +154,7 @@ const selectTravel = ({ id }) => {
v-model="travelFilterParams.agencyModeFk" v-model="travelFilterParams.agencyModeFk"
/> />
<VnSelect <VnSelect
:label="t('globals.warehouseOut')" :label="t('entry.basicData.warehouseOut')"
:options="warehousesOptions" :options="warehousesOptions"
hide-selected hide-selected
option-label="name" option-label="name"
@ -158,7 +162,7 @@ const selectTravel = ({ id }) => {
v-model="travelFilterParams.warehouseOutFk" v-model="travelFilterParams.warehouseOutFk"
/> />
<VnSelect <VnSelect
:label="t('globals.warehouseIn')" :label="t('entry.basicData.warehouseIn')"
:options="warehousesOptions" :options="warehousesOptions"
hide-selected hide-selected
option-label="name" option-label="name"
@ -166,11 +170,11 @@ const selectTravel = ({ id }) => {
v-model="travelFilterParams.warehouseInFk" v-model="travelFilterParams.warehouseInFk"
/> />
<VnInputDate <VnInputDate
:label="t('globals.shipped')" :label="t('entry.basicData.shipped')"
v-model="travelFilterParams.shipped" v-model="travelFilterParams.shipped"
/> />
<VnInputDate <VnInputDate
:label="t('globals.landed')" :label="t('entry.basicData.landed')"
v-model="travelFilterParams.landed" v-model="travelFilterParams.landed"
/> />
</VnRow> </VnRow>

View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import axios from 'axios'; import axios from 'axios';
import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue'; import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue';
import { onBeforeRouteLeave, useRouter } from 'vue-router'; import { onBeforeRouteLeave } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
@ -11,18 +11,14 @@ import useNotify from 'src/composables/useNotify.js';
import SkeletonForm from 'components/ui/SkeletonForm.vue'; import SkeletonForm from 'components/ui/SkeletonForm.vue';
import VnConfirm from './ui/VnConfirm.vue'; import VnConfirm from './ui/VnConfirm.vue';
import { tMobile } from 'src/composables/tMobile'; import { tMobile } from 'src/composables/tMobile';
import { useArrayData } from 'src/composables/useArrayData';
import { useRoute } from 'vue-router';
const { push } = useRouter();
const quasar = useQuasar(); const quasar = useQuasar();
const state = useState(); const state = useState();
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
const { validate } = useValidator(); const { validate } = useValidator();
const { notify } = useNotify(); const { notify } = useNotify();
const route = useRoute();
const myForm = ref(null);
const $props = defineProps({ const $props = defineProps({
url: { url: {
type: String, type: String,
@ -30,7 +26,7 @@ const $props = defineProps({
}, },
model: { model: {
type: String, type: String,
default: null, default: '',
}, },
filter: { filter: {
type: Object, type: Object,
@ -78,98 +74,40 @@ const $props = defineProps({
type: Function, type: Function,
default: null, default: null,
}, },
goTo: {
type: String,
default: '',
description: 'It is used for redirect on click "save and continue"',
},
reload: {
type: Boolean,
default: false,
},
defaultTrim: {
type: Boolean,
default: true,
},
}); });
const emit = defineEmits(['onFetch', 'onDataSaved']); const emit = defineEmits(['onFetch', 'onDataSaved']);
const modelValue = computed(
() => $props.model ?? `formModel_${route?.meta?.title ?? route.name}`
).value;
const componentIsRendered = ref(false); const componentIsRendered = ref(false);
const arrayData = useArrayData(modelValue);
const isLoading = ref(false);
// Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
const isResetting = ref(false);
const hasChanges = ref(!$props.observeFormChanges);
const originalData = ref({});
const formData = computed(() => state.get(modelValue));
const defaultButtons = computed(() => ({
save: {
color: 'primary',
icon: 'save',
label: 'globals.save',
click: () => myForm.value.submit(),
type: 'submit',
},
reset: {
color: 'primary',
icon: 'restart_alt',
label: 'globals.reset',
click: () => reset(),
},
...$props.defaultButtons,
}));
onMounted(async () => { onMounted(async () => {
originalData.value = JSON.parse(JSON.stringify($props.formInitialData ?? {})); originalData.value = $props.formInitialData;
nextTick(() => {
nextTick(() => (componentIsRendered.value = true)); componentIsRendered.value = true;
// Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
state.set(modelValue, $props.formInitialData);
if (!$props.formInitialData) {
if ($props.autoLoad && $props.url) await fetch();
else if (arrayData.store.data) updateAndEmit('onFetch', arrayData.store.data);
}
if ($props.observeFormChanges) {
watch(
() => formData.value,
(newVal, oldVal) => {
if (!oldVal) return;
hasChanges.value =
!isResetting.value &&
JSON.stringify(newVal) !== JSON.stringify(originalData.value);
isResetting.value = false;
},
{ deep: true }
);
}
}); });
if (!$props.url) // Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
watch( state.set($props.model, $props.formInitialData);
() => arrayData.store.data, if ($props.autoLoad && !$props.formInitialData) {
(val) => updateAndEmit('onFetch', val)
);
watch(
() => [$props.url, $props.filter],
async () => {
originalData.value = null;
reset();
await fetch(); await fetch();
} }
);
// Si así se desea disparamos el watcher del form después de 100ms, asi darle tiempo de que se haya cargado la data inicial
// para evitar que detecte cambios cuando es data inicial default
if ($props.observeFormChanges) {
setTimeout(() => {
startFormWatcher();
}, 100);
}
});
onBeforeRouteLeave((to, from, next) => { onBeforeRouteLeave((to, from, next) => {
if (hasChanges.value && $props.observeFormChanges) if (hasChanges.value && $props.observeFormChanges)
quasar.dialog({ quasar.dialog({
component: VnConfirm, component: VnConfirm,
componentProps: { componentProps: {
title: t('globals.unsavedPopup.title'), title: t('Unsaved changes will be lost'),
message: t('globals.unsavedPopup.subtitle'), message: t('Are you sure exit without saving?'),
promise: () => next(), promise: () => next(),
}, },
}); });
@ -178,57 +116,95 @@ onBeforeRouteLeave((to, from, next) => {
onUnmounted(() => { onUnmounted(() => {
// Restauramos los datos originales en el store si se realizaron cambios en el formulario pero no se guardaron, evitando modificaciones erróneas. // Restauramos los datos originales en el store si se realizaron cambios en el formulario pero no se guardaron, evitando modificaciones erróneas.
if (hasChanges.value) return state.set(modelValue, originalData.value); if (hasChanges.value) {
if ($props.clearStoreOnUnmount) state.unset(modelValue); state.set($props.model, originalData.value);
return;
}
if ($props.clearStoreOnUnmount) state.unset($props.model);
}); });
const isLoading = ref(false);
// Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
const isResetting = ref(false);
const hasChanges = ref(!$props.observeFormChanges);
const originalData = ref({});
const formData = computed(() => state.get($props.model));
const formUrl = computed(() => $props.url);
const defaultButtons = computed(() => ({
save: {
color: 'primary',
icon: 'save',
label: 'globals.save',
},
reset: {
color: 'primary',
icon: 'restart_alt',
label: 'globals.reset',
},
...$props.defaultButtons,
}));
const startFormWatcher = () => {
watch(
() => formData.value,
(val) => {
hasChanges.value = !isResetting.value && val;
isResetting.value = false;
},
{ deep: true }
);
};
async function fetch() { async function fetch() {
try { try {
let { data } = await axios.get($props.url, { let { data } = await axios.get($props.url, {
params: { filter: JSON.stringify($props.filter) }, params: { filter: JSON.stringify($props.filter) },
}); });
if (Array.isArray(data)) data = data[0] ?? {}; if (Array.isArray(data)) data = data[0] ?? {};
updateAndEmit('onFetch', data); state.set($props.model, data);
} catch (e) { originalData.value = data && JSON.parse(JSON.stringify(data));
state.set(modelValue, {});
emit('onFetch', state.get($props.model));
} catch (error) {
state.set($props.model, {});
originalData.value = {}; originalData.value = {};
} }
} }
async function save() { async function save() {
if ($props.observeFormChanges && !hasChanges.value) if ($props.observeFormChanges && !hasChanges.value) {
return notify('globals.noChanges', 'negative'); notify('globals.noChanges', 'negative');
return;
}
isLoading.value = true; isLoading.value = true;
try { try {
formData.value = trimData(formData.value);
const body = $props.mapper ? $props.mapper(formData.value) : formData.value; const body = $props.mapper ? $props.mapper(formData.value) : formData.value;
const method = $props.urlCreate ? 'post' : 'patch';
const url =
$props.urlCreate || $props.urlUpdate || $props.url || arrayData.store.url;
let response; let response;
if ($props.saveFn) response = await $props.saveFn(body); if ($props.saveFn) response = await $props.saveFn(body);
else response = await axios[method](url, body); else
response = await axios[$props.urlCreate ? 'post' : 'patch'](
$props.urlCreate || $props.urlUpdate || $props.url,
body
);
if ($props.urlCreate) notify('globals.dataCreated', 'positive'); if ($props.urlCreate) notify('globals.dataCreated', 'positive');
updateAndEmit('onDataSaved', formData.value, response?.data); emit('onDataSaved', formData.value, response?.data);
if ($props.reload) await arrayData.fetch({}); originalData.value = JSON.parse(JSON.stringify(formData.value));
hasChanges.value = false; hasChanges.value = false;
} finally { } catch (err) {
console.error(err);
notify('errors.writeRequest', 'negative');
}
isLoading.value = false; isLoading.value = false;
} }
}
async function saveAndGo() {
await save();
push({ path: $props.goTo });
}
function reset() { function reset() {
updateAndEmit('onFetch', originalData.value); state.set($props.model, originalData.value);
originalData.value = JSON.parse(JSON.stringify(originalData.value));
emit('onFetch', state.get($props.model));
if ($props.observeFormChanges) { if ($props.observeFormChanges) {
hasChanges.value = false; hasChanges.value = false;
isResetting.value = true; isResetting.value = true;
@ -250,35 +226,21 @@ function filter(value, update, filterOptions) {
); );
} }
function updateAndEmit(evt, val, res) { watch(formUrl, async () => {
state.set(modelValue, val); originalData.value = null;
originalData.value = val && JSON.parse(JSON.stringify(val)); reset();
if (!$props.url) arrayData.store.data = val; fetch();
});
emit(evt, state.get(modelValue), res);
}
function trimData(data) {
if (!$props.defaultTrim) return data;
for (const key in data) {
if (typeof data[key] == 'string') data[key] = data[key].trim();
}
return data;
}
defineExpose({ defineExpose({
save, save,
isLoading, isLoading,
hasChanges, hasChanges,
reset,
fetch,
formData,
}); });
</script> </script>
<template> <template>
<div class="column items-center full-width"> <div class="column items-center full-width">
<QForm <QForm
ref="myForm"
v-if="formData" v-if="formData"
@submit="save" @submit="save"
@reset="reset" @reset="reset"
@ -287,78 +249,42 @@ defineExpose({
> >
<QCard> <QCard>
<slot <slot
v-if="formData"
name="form" name="form"
:data="formData" :data="formData"
:validate="validate" :validate="validate"
:filter="filter" :filter="filter"
/> />
<SkeletonForm v-else />
</QCard> </QCard>
</QForm> </QForm>
</div> </div>
<Teleport <Teleport
to="#st-actions" to="#st-actions"
v-if=" v-if="stateStore?.isSubToolbarShown() && componentIsRendered"
$props.defaultActions &&
stateStore?.isSubToolbarShown() &&
componentIsRendered
"
> >
<QBtnGroup push class="q-gutter-x-sm"> <div v-if="$props.defaultActions">
<QBtnGroup>
<slot name="moreActions" /> <slot name="moreActions" />
<QBtn <QBtn
:label="tMobile(defaultButtons.reset.label)" :label="tMobile(defaultButtons.reset.label)"
:color="defaultButtons.reset.color" :color="defaultButtons.reset.color"
:icon="defaultButtons.reset.icon" :icon="defaultButtons.reset.icon"
flat flat="false"
@click="defaultButtons.reset.click" @click="reset"
:disable="!hasChanges" :disable="!hasChanges"
:title="t(defaultButtons.reset.label)" :title="t(defaultButtons.reset.label)"
/> />
<QBtnDropdown
v-if="$props.goTo"
@click="saveAndGo"
:label="tMobile('globals.saveAndContinue')"
:title="t('globals.saveAndContinue')"
:disable="!hasChanges"
color="primary"
icon="save"
split
>
<QList>
<QItem
clickable
v-close-popup
@click="save"
:title="t('globals.save')"
>
<QItemSection>
<QItemLabel>
<QIcon
name="save"
color="white"
class="q-mr-sm"
size="sm"
/>
{{ t('globals.save').toUpperCase() }}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</QBtnDropdown>
<QBtn <QBtn
v-else :label="tMobile(defaultButtons.save.label)"
:label="tMobile('globals.save')" :color="defaultButtons.save.color"
color="primary" :icon="defaultButtons.save.icon"
icon="save" @click="save"
@click="defaultButtons.save.click"
:disable="!hasChanges" :disable="!hasChanges"
:title="t(defaultButtons.save.label)" :title="t(defaultButtons.save.label)"
/> />
</QBtnGroup> </QBtnGroup>
</div>
</Teleport> </Teleport>
<SkeletonForm v-if="!formData" />
<QInnerLoading <QInnerLoading
:showing="isLoading" :showing="isLoading"
:label="t('globals.pleaseWait')" :label="t('globals.pleaseWait')"
@ -379,3 +305,8 @@ defineExpose({
padding: 32px; padding: 32px;
} }
</style> </style>
<i18n>
es:
Unsaved changes will be lost: Los cambios que no haya guardado se perderán
Are you sure exit without saving?: ¿Seguro que quiere salir sin guardar?
</i18n>

View File

@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
import FormModel from 'components/FormModel.vue'; import FormModel from 'components/FormModel.vue';
const emit = defineEmits(['onDataSaved', 'onDataCanceled']); const emit = defineEmits(['onDataSaved']);
defineProps({ defineProps({
title: { title: {
@ -15,6 +15,26 @@ defineProps({
type: String, type: String,
default: '', default: '',
}, },
url: {
type: String,
default: '',
},
model: {
type: String,
default: '',
},
filter: {
type: Object,
default: null,
},
urlCreate: {
type: String,
default: null,
},
formInitialData: {
type: Object,
default: () => {},
},
}); });
const { t } = useI18n(); const { t } = useI18n();
@ -23,24 +43,29 @@ const formModelRef = ref(null);
const closeButton = ref(null); const closeButton = ref(null);
const onDataSaved = (formData, requestResponse) => { const onDataSaved = (formData, requestResponse) => {
if (closeButton.value) closeButton.value.click();
emit('onDataSaved', formData, requestResponse); emit('onDataSaved', formData, requestResponse);
closeForm();
}; };
const isLoading = computed(() => formModelRef.value?.isLoading); const isLoading = computed(() => formModelRef.value?.isLoading);
const closeForm = async () => {
if (closeButton.value) closeButton.value.click();
};
defineExpose({ defineExpose({
isLoading, isLoading,
onDataSaved,
}); });
</script> </script>
<template> <template>
<FormModel <FormModel
ref="formModelRef" ref="formModelRef"
:form-initial-data="formInitialData"
:observe-form-changes="false" :observe-form-changes="false"
:default-actions="false" :default-actions="false"
v-bind="$attrs" :url-create="urlCreate"
:model="model"
@on-data-saved="onDataSaved" @on-data-saved="onDataSaved"
> >
<template #form="{ data, validate }"> <template #form="{ data, validate }">
@ -59,9 +84,7 @@ defineExpose({
flat flat
:disabled="isLoading" :disabled="isLoading"
:loading="isLoading" :loading="isLoading"
@click="emit('onDataCanceled')"
v-close-popup v-close-popup
data-cy="FormModelPopup_cancel"
/> />
<QBtn <QBtn
:label="t('globals.save')" :label="t('globals.save')"
@ -71,7 +94,6 @@ defineExpose({
class="q-ml-sm" class="q-ml-sm"
:disabled="isLoading" :disabled="isLoading"
:loading="isLoading" :loading="isLoading"
data-cy="FormModelPopup_save"
/> />
</div> </div>
</template> </template>

View File

@ -74,7 +74,7 @@ const closeForm = () => {
:disabled="isLoading" :disabled="isLoading"
:loading="isLoading" :loading="isLoading"
/> />
<slot name="custom-buttons" /> <slot name="customButtons" />
</div> </div>
</QCard> </QCard>
</QForm> </QForm>

View File

@ -88,6 +88,7 @@ const applyTags = (params, search) => {
}; };
const fetchItemTypes = async (id) => { const fetchItemTypes = async (id) => {
try {
const filter = { const filter = {
fields: ['id', 'name', 'categoryFk'], fields: ['id', 'name', 'categoryFk'],
where: { categoryFk: id }, where: { categoryFk: id },
@ -98,6 +99,9 @@ const fetchItemTypes = async (id) => {
params: { filter: JSON.stringify(filter) }, params: { filter: JSON.stringify(filter) },
}); });
itemTypesOptions.value = data; itemTypesOptions.value = data;
} catch (err) {
console.error('Error fetching item types', err);
}
}; };
const getCategoryClass = (category, params) => { const getCategoryClass = (category, params) => {
@ -107,7 +111,7 @@ const getCategoryClass = (category, params) => {
}; };
const getSelectedTagValues = async (tag) => { const getSelectedTagValues = async (tag) => {
if (!tag?.selectedTag?.id) return; try {
tag.value = null; tag.value = null;
const filter = { const filter = {
fields: ['value'], fields: ['value'],
@ -120,6 +124,9 @@ const getSelectedTagValues = async (tag) => {
params, params,
}); });
tag.valueOptions = data; tag.valueOptions = data;
} catch (err) {
console.error('Error getting selected tag values');
}
}; };
const removeTag = (index, params, search) => { const removeTag = (index, params, search) => {
@ -151,8 +158,8 @@ const removeTag = (index, params, search) => {
/> />
<VnFilterPanel <VnFilterPanel
:data-key="props.dataKey" :data-key="props.dataKey"
:expr-builder="props.exprBuilder" :expr-builder="exprBuilder"
:custom-tags="props.customTags" :custom-tags="customTags"
> >
<template #tags="{ tag, formatFn }"> <template #tags="{ tag, formatFn }">
<strong v-if="tag.label === 'categoryFk'"> <strong v-if="tag.label === 'categoryFk'">
@ -240,7 +247,7 @@ const removeTag = (index, params, search) => {
> >
<QItemSection class="col"> <QItemSection class="col">
<VnSelect <VnSelect
:label="t('globals.tag')" :label="t('components.itemsFilterPanel.tag')"
v-model="value.selectedTag" v-model="value.selectedTag"
:options="tagOptions" :options="tagOptions"
option-label="name" option-label="name"
@ -289,12 +296,11 @@ const removeTag = (index, params, search) => {
/> />
</QItem> </QItem>
<QItem class="q-mt-lg"> <QItem class="q-mt-lg">
<QBtn <QIcon
icon="add_circle" name="add_circle"
shortcut="+"
flat
class="fill-icon-on-hover q-px-xs" class="fill-icon-on-hover q-px-xs"
color="primary" color="primary"
size="sm"
@click="tagValues.push({})" @click="tagValues.push({})"
/> />
</QItem> </QItem>

View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import axios from 'axios'; import axios from 'axios';
import { onMounted, watch, ref, reactive, computed } from 'vue'; import { onMounted, ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { QSeparator, useQuasar } from 'quasar'; import { QSeparator, useQuasar } from 'quasar';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
@ -9,7 +9,6 @@ import { toLowerCamel } from 'src/filters';
import routes from 'src/router/modules'; import routes from 'src/router/modules';
import LeftMenuItem from './LeftMenuItem.vue'; import LeftMenuItem from './LeftMenuItem.vue';
import LeftMenuItemGroup from './LeftMenuItemGroup.vue'; import LeftMenuItemGroup from './LeftMenuItemGroup.vue';
import VnInput from './common/VnInput.vue';
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
@ -22,58 +21,14 @@ const props = defineProps({
default: 'main', default: 'main',
}, },
}); });
const initialized = ref(false);
const items = ref([]);
const expansionItemElements = reactive({}); const expansionItemElements = reactive({});
const pinnedModules = computed(() => {
const map = new Map();
items.value.forEach((item) => item.isPinned && map.set(item.name, item));
return map;
});
const search = ref(null);
const filteredItems = computed(() => {
if (!search.value) return items.value;
const normalizedSearch = normalize(search.value);
return items.value.filter((item) => {
const locale = normalize(t(item.title));
return locale.includes(normalizedSearch);
});
});
const filteredPinnedModules = computed(() => {
if (!search.value) return pinnedModules.value;
const normalizedSearch = search.value
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
const map = new Map();
for (const [key, pinnedModule] of pinnedModules.value) {
const locale = t(pinnedModule.title)
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
if (locale.includes(normalizedSearch)) map.set(key, pinnedModule);
}
return map;
});
onMounted(async () => { onMounted(async () => {
await navigation.fetchPinned(); await navigation.fetchPinned();
getRoutes(); getRoutes();
initialized.value = true;
}); });
watch(
() => route.matched,
() => {
if (!initialized.value) return;
items.value = [];
getRoutes();
},
{ deep: true }
);
function findMatches(search, item) { function findMatches(search, item) {
const matches = []; const matches = [];
function findRoute(search, item) { function findRoute(search, item) {
@ -102,6 +57,7 @@ function addChildren(module, route, parent) {
} }
} }
const items = ref([]);
function getRoutes() { function getRoutes() {
if (props.source === 'main') { if (props.source === 'main') {
const modules = Object.assign([], navigation.getModules().value); const modules = Object.assign([], navigation.getModules().value);
@ -110,9 +66,10 @@ function getRoutes() {
const moduleDef = routes.find( const moduleDef = routes.find(
(route) => toLowerCamel(route.name) === item.module (route) => toLowerCamel(route.name) === item.module
); );
if (!moduleDef) continue;
item.children = []; item.children = [];
if (!moduleDef) continue;
addChildren(item.module, moduleDef, item.children); addChildren(item.module, moduleDef, item.children);
} }
@ -157,57 +114,21 @@ async function togglePinned(item, event) {
const handleItemExpansion = (itemName) => { const handleItemExpansion = (itemName) => {
expansionItemElements[itemName].scrollToLastElement(); expansionItemElements[itemName].scrollToLastElement();
}; };
function normalize(text) {
return text
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
}
</script> </script>
<template> <template>
<QList padding class="column-max-width"> <QList padding class="column-max-width" :dense="false">
<template v-if="$props.source === 'main'"> <template v-if="$props.source === 'main'">
<template v-if="$route?.matched[1]?.name === 'Dashboard'"> <template v-if="$route?.matched[1]?.name === 'Dashboard'">
<QItem class="q-pb-md"> <QItem class="header">
<VnInput <QItemSection avatar>
v-model="search" <QIcon name="view_module" />
:label="t('Search modules')" </QItemSection>
class="full-width" <QItemSection> {{ t('globals.modules') }}</QItemSection>
filled
dense
/>
</QItem> </QItem>
<QSeparator /> <QSeparator />
<template v-if="filteredPinnedModules.size"> <template v-for="item in items" :key="item.name">
<LeftMenuItem <template v-if="item.children">
v-for="[key, pinnedModule] of filteredPinnedModules"
:key="key"
:item="pinnedModule"
group="modules"
>
<template #side>
<QBtn
v-if="pinnedModule.isPinned === true"
@click="togglePinned(pinnedModule, $event)"
icon="remove_circle"
size="xs"
flat
round
>
<QTooltip>
{{ t('components.leftMenu.removeFromPinned') }}
</QTooltip>
</QBtn>
</template>
</LeftMenuItem>
<QSeparator />
</template>
<template v-for="item in filteredItems" :key="item.name">
<template
v-if="item.children && !filteredPinnedModules.has(item.name)"
>
<LeftMenuItem :item="item" group="modules"> <LeftMenuItem :item="item" group="modules">
<template #side> <template #side>
<QBtn <QBtn
@ -326,7 +247,3 @@ function normalize(text) {
color: var(--vn-label-color); color: var(--vn-label-color);
} }
</style> </style>
<i18n>
es:
Search modules: Buscar módulos
</i18n>

View File

@ -20,32 +20,16 @@ const itemComputed = computed(() => {
}); });
</script> </script>
<template> <template>
<QItem <QItem active-class="bg-hover" :to="{ name: itemComputed.name }" clickable v-ripple>
active-class="bg-vn-hover"
class="min-height"
:to="{ name: itemComputed.name }"
clickable
v-ripple
>
<QItemSection avatar v-if="itemComputed.icon"> <QItemSection avatar v-if="itemComputed.icon">
<QIcon :name="itemComputed.icon" /> <QIcon :name="itemComputed.icon" />
</QItemSection> </QItemSection>
<QItemSection avatar v-if="!itemComputed.icon"> <QItemSection avatar v-if="!itemComputed.icon">
<QIcon name="disabled_by_default" /> <QIcon name="disabled_by_default" />
</QItemSection> </QItemSection>
<QItemSection> <QItemSection>{{ t(itemComputed.title) }}</QItemSection>
{{ t(itemComputed.title) }}
<QTooltip v-if="item.keyBinding">
{{ 'Ctrl + Alt + ' + item?.keyBinding?.toUpperCase() }}
</QTooltip>
</QItemSection>
<QItemSection side> <QItemSection side>
<slot name="side" :item="itemComputed" /> <slot name="side" :item="itemComputed" />
</QItemSection> </QItemSection>
</QItem> </QItem>
</template> </template>
<style lang="scss" scoped>
.q-item {
min-height: 5vh;
}
</style>

View File

@ -1,21 +1,21 @@
<script setup> <script setup>
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useSession } from 'src/composables/useSession';
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { useStateQueryStore } from 'src/stores/useStateQueryStore';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import PinnedModules from './PinnedModules.vue'; import PinnedModules from './PinnedModules.vue';
import UserPanel from 'components/UserPanel.vue'; import UserPanel from 'components/UserPanel.vue';
import VnBreadcrumbs from './common/VnBreadcrumbs.vue'; import VnBreadcrumbs from './common/VnBreadcrumbs.vue';
import VnAvatar from './ui/VnAvatar.vue';
const { t } = useI18n(); const { t } = useI18n();
const stateStore = useStateStore(); const stateStore = useStateStore();
const quasar = useQuasar(); const quasar = useQuasar();
const stateQuery = useStateQueryStore();
const state = useState(); const state = useState();
const user = state.getUser(); const user = state.getUser();
const { getTokenMultimedia } = useSession();
const token = getTokenMultimedia();
const appName = 'Lilium'; const appName = 'Lilium';
onMounted(() => stateStore.setMounted()); onMounted(() => stateStore.setMounted());
@ -26,13 +26,7 @@ const pinnedModulesRef = ref();
<template> <template>
<QHeader color="white" elevated> <QHeader color="white" elevated>
<QToolbar class="q-py-sm q-px-md"> <QToolbar class="q-py-sm q-px-md">
<QBtn <QBtn @click="stateStore.toggleLeftDrawer()" icon="menu" round dense flat>
@click="stateStore.toggleLeftDrawer()"
icon="dock_to_right"
round
dense
flat
>
<QTooltip bottom anchor="bottom right"> <QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }} {{ t('globals.collapseMenu') }}
</QTooltip> </QTooltip>
@ -52,14 +46,6 @@ const pinnedModulesRef = ref();
</QBtn> </QBtn>
</RouterLink> </RouterLink>
<VnBreadcrumbs v-if="$q.screen.gt.sm" /> <VnBreadcrumbs v-if="$q.screen.gt.sm" />
<QSpinner
color="primary"
class="q-ml-md"
:class="{
'no-visible': !stateQuery.isLoading().value,
}"
size="xs"
/>
<QSpace /> <QSpace />
<div id="searchbar" class="searchbar"></div> <div id="searchbar" class="searchbar"></div>
<QSpace /> <QSpace />
@ -88,13 +74,21 @@ const pinnedModulesRef = ref();
</QTooltip> </QTooltip>
<PinnedModules ref="pinnedModulesRef" /> <PinnedModules ref="pinnedModulesRef" />
</QBtn> </QBtn>
<QBtn class="q-pa-none" rounded dense flat no-wrap id="user"> <QBtn
<VnAvatar :class="{ 'q-pa-none': quasar.platform.is.mobile }"
:worker-id="user.id" rounded
:title="user.name" dense
size="lg" flat
color="transparent" no-wrap
/> id="user"
>
<QAvatar size="lg">
<QImg
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
spinner-color="primary"
>
</QImg>
</QAvatar>
<QTooltip bottom> <QTooltip bottom>
{{ t('globals.userPanel') }} {{ t('globals.userPanel') }}
</QTooltip> </QTooltip>

View File

@ -1,170 +0,0 @@
<script setup>
import { ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useDialogPluginComponent } from 'quasar';
import VnRow from 'components/ui/VnRow.vue';
import FetchData from 'components/FetchData.vue';
import VnSelect from 'components/common/VnSelect.vue';
import FormPopup from './FormPopup.vue';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
const $props = defineProps({
invoiceOutData: {
type: Object,
default: () => {},
},
});
const { dialogRef } = useDialogPluginComponent();
const { t } = useI18n();
const router = useRouter();
const { notify } = useNotify();
const rectificativeTypeOptions = ref([]);
const siiTypeInvoiceOutsOptions = ref([]);
const invoiceParams = reactive({
id: $props.invoiceOutData?.id,
inheritWarehouse: true,
});
const invoiceCorrectionTypesOptions = ref([]);
const refund = async () => {
const params = {
id: invoiceParams.id,
withWarehouse: invoiceParams.inheritWarehouse,
cplusRectificationTypeFk: invoiceParams.cplusRectificationTypeFk,
siiTypeInvoiceOutFk: invoiceParams.siiTypeInvoiceOutFk,
invoiceCorrectionTypeFk: invoiceParams.invoiceCorrectionTypeFk,
};
const { data } = await axios.post('InvoiceOuts/refundAndInvoice', params);
notify(t('Refunded invoice'), 'positive');
const [id] = data?.refundId || [];
if (id) router.push({ name: 'InvoiceOutSummary', params: { id } });
};
</script>
<template>
<FetchData
url="CplusRectificationTypes"
:filter="{ order: 'description' }"
@on-fetch="
(data) => (
(rectificativeTypeOptions = data),
(invoiceParams.cplusRectificationTypeFk = data.filter(
(type) => type.description == 'I Por diferencias'
)[0].id)
)
"
auto-load
/>
<FetchData
url="SiiTypeInvoiceOuts"
:filter="{ where: { code: { like: 'R%' } } }"
@on-fetch="
(data) => (
(siiTypeInvoiceOutsOptions = data),
(invoiceParams.siiTypeInvoiceOutFk = data.filter(
(type) => type.code == 'R4'
)[0].id)
)
"
auto-load
/>
<FetchData
url="InvoiceCorrectionTypes"
@on-fetch="(data) => (invoiceCorrectionTypesOptions = data)"
auto-load
/>
<QDialog ref="dialogRef">
<FormPopup
@on-submit="refund()"
:custom-submit-button-label="t('Accept')"
:default-cancel-button="false"
>
<template #form-inputs>
<VnRow>
<VnSelect
:label="t('Rectificative type')"
:options="rectificativeTypeOptions"
hide-selected
option-label="description"
option-value="id"
v-model="invoiceParams.cplusRectificationTypeFk"
:required="true"
/>
</VnRow>
<VnRow>
<VnSelect
:label="t('Class')"
:options="siiTypeInvoiceOutsOptions"
hide-selected
option-label="description"
option-value="id"
v-model="invoiceParams.siiTypeInvoiceOutFk"
:required="true"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ scope.opt?.code }} -
{{ scope.opt?.description }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</VnRow>
<VnRow>
<VnSelect
:label="t('Type')"
:options="invoiceCorrectionTypesOptions"
hide-selected
option-label="description"
option-value="id"
v-model="invoiceParams.invoiceCorrectionTypeFk"
:required="true"
/> </VnRow
><VnRow>
<div>
<QCheckbox
:label="t('Inherit warehouse')"
v-model="invoiceParams.inheritWarehouse"
/>
<QIcon name="info" class="cursor-info q-ml-sm" size="sm">
<QTooltip>{{ t('Inherit warehouse tooltip') }}</QTooltip>
</QIcon>
</div>
</VnRow>
</template>
</FormPopup>
</QDialog>
</template>
<i18n>
en:
Refund invoice: Refund invoice
Rectificative type: Rectificative type
Class: Class
Type: Type
Refunded invoice: Refunded invoice
Inherit warehouse: Inherit the warehouse
Inherit warehouse tooltip: Select this option to inherit the warehouse when refunding the invoice
Accept: Accept
Error refunding invoice: Error refunding invoice
es:
Refund invoice: Abonar factura
Rectificative type: Tipo rectificativa
Class: Clase
Type: Tipo
Refunded invoice: Factura abonada
Inherit warehouse: Heredar el almacén
Inherit warehouse tooltip: Seleccione esta opción para heredar el almacén al abonar la factura.
Accept: Aceptar
Error refunding invoice: Error abonando factura
</i18n>

View File

@ -15,7 +15,7 @@ const props = defineProps({
default: null, default: null,
}, },
warehouseFk: { warehouseFk: {
type: Number, type: Boolean,
default: null, default: null,
}, },
}); });
@ -23,7 +23,7 @@ const props = defineProps({
const { t } = useI18n(); const { t } = useI18n();
const regularizeFormData = reactive({ const regularizeFormData = reactive({
itemFk: Number(props.itemFk), itemFk: props.itemFk,
warehouseFk: props.warehouseFk, warehouseFk: props.warehouseFk,
quantity: null, quantity: null,
}); });
@ -49,19 +49,18 @@ const onDataSaved = (data) => {
@on-data-saved="onDataSaved($event)" @on-data-saved="onDataSaved($event)"
> >
<template #form-inputs="{ data }"> <template #form-inputs="{ data }">
<VnRow> <VnRow class="row q-gutter-md q-mb-md">
<QInput <QInput
:label="t('Type the visible quantity')" :label="t('Type the visible quantity')"
v-model.number="data.quantity" v-model.number="data.quantity"
type="number"
autofocus autofocus
/> />
</VnRow> </VnRow>
<VnRow> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<VnSelect <VnSelect
:label="t('Warehouse')" :label="t('Warehouse')"
v-model.number="data.warehouseFk" v-model="data.warehouseFk"
:options="warehousesOptions" :options="warehousesOptions"
option-value="id" option-value="id"
option-label="name" option-label="name"

View File

@ -1,40 +0,0 @@
<script setup>
defineProps({ row: { type: Object, required: true } });
</script>
<template>
<span>
<QIcon
v-if="row.isTaxDataChecked === 0"
name="vn:no036"
color="primary"
size="xs"
>
<QTooltip>{{ $t('salesTicketsTable.noVerifiedData') }}</QTooltip>
</QIcon>
<QIcon v-if="row.hasTicketRequest" name="vn:buyrequest" color="primary" size="xs">
<QTooltip>{{ $t('salesTicketsTable.purchaseRequest') }}</QTooltip>
</QIcon>
<QIcon v-if="row.itemShortage" name="vn:unavailable" color="primary" size="xs">
<QTooltip>{{ $t('salesTicketsTable.notVisible') }}</QTooltip>
</QIcon>
<QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
<QTooltip>{{ $t('salesTicketsTable.clientFrozen') }}</QTooltip>
</QIcon>
<QIcon
v-if="row.risk"
name="vn:risk"
:color="row.hasHighRisk ? 'negative' : 'primary'"
size="xs"
>
<QTooltip>
{{ $t('salesTicketsTable.risk') }}: {{ row.risk - row.credit }}
</QTooltip>
</QIcon>
<QIcon v-if="row.hasComponentLack" name="vn:components" color="primary" size="xs">
<QTooltip>{{ $t('salesTicketsTable.componentLack') }}</QTooltip>
</QIcon>
<QIcon v-if="row.isTooLittle" name="vn:isTooLittle" color="primary" size="xs">
<QTooltip>{{ $t('salesTicketsTable.tooLittle') }}</QTooltip>
</QIcon>
</span>
</template>

View File

@ -2,12 +2,12 @@
import { ref, reactive } from 'vue'; import { ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useQuasar, useDialogPluginComponent } from 'quasar';
import VnConfirm from 'components/ui/VnConfirm.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnSelect from 'components/common/VnSelect.vue'; import VnSelect from 'components/common/VnSelect.vue';
import FormPopup from './FormPopup.vue'; import FormPopup from './FormPopup.vue';
import axios from 'axios'; import axios from 'axios';
import useNotify from 'src/composables/useNotify.js'; import useNotify from 'src/composables/useNotify.js';
@ -18,91 +18,56 @@ const $props = defineProps({
}, },
}); });
const { dialogRef } = useDialogPluginComponent();
const quasar = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
const router = useRouter(); const router = useRouter();
const { notify } = useNotify(); const { notify } = useNotify();
const rectificativeTypeOptions = ref([]);
const siiTypeInvoiceOutsOptions = ref([]);
const checked = ref(true);
const transferInvoiceParams = reactive({ const transferInvoiceParams = reactive({
id: $props.invoiceOutData?.id, id: $props.invoiceOutData?.id,
refFk: $props.invoiceOutData?.ref,
}); });
const closeButton = ref(null);
const clientsOptions = ref([]);
const rectificativeTypeOptions = ref([]);
const siiTypeInvoiceOutsOptions = ref([]);
const invoiceCorrectionTypesOptions = ref([]); const invoiceCorrectionTypesOptions = ref([]);
const selectedClient = (client) => { const closeForm = () => {
transferInvoiceParams.selectedClientData = client; if (closeButton.value) closeButton.value.click();
}; };
const makeInvoice = async () => { const transferInvoice = async () => {
const hasToInvoiceByAddress = try {
transferInvoiceParams.selectedClientData.hasToInvoiceByAddress; const { data } = await axios.post(
'InvoiceOuts/transferInvoice',
const params = { transferInvoiceParams
id: transferInvoiceParams.id, );
cplusRectificationTypeFk: transferInvoiceParams.cplusRectificationTypeFk,
siiTypeInvoiceOutFk: transferInvoiceParams.siiTypeInvoiceOutFk,
invoiceCorrectionTypeFk: transferInvoiceParams.invoiceCorrectionTypeFk,
newClientFk: transferInvoiceParams.newClientFk,
makeInvoice: checked.value,
};
if (checked.value && hasToInvoiceByAddress) {
const response = await new Promise((resolve) => {
quasar
.dialog({
component: VnConfirm,
componentProps: {
title: t('Bill destination client'),
message: t('transferInvoiceInfo'),
},
})
.onOk(() => {
resolve(true);
})
.onCancel(() => {
resolve(false);
});
});
if (!response) {
return;
}
}
const { data } = await axios.post('InvoiceOuts/transfer', params);
notify(t('Transferred invoice'), 'positive'); notify(t('Transferred invoice'), 'positive');
const id = data?.[0]; closeForm();
if (id) router.push({ name: 'InvoiceOutSummary', params: { id } }); router.push('InvoiceOutSummary', { id: data.id });
} catch (err) {
console.error('Error transfering invoice', err);
}
}; };
</script> </script>
<template> <template>
<FetchData
url="Clients"
@on-fetch="(data) => (clientsOptions = data)"
:filter="{ fields: ['id', 'name'], order: 'id', limit: 30 }"
auto-load
/>
<FetchData <FetchData
url="CplusRectificationTypes" url="CplusRectificationTypes"
:filter="{ order: 'description' }" :filter="{ order: 'description' }"
@on-fetch=" @on-fetch="(data) => (rectificativeTypeOptions = data)"
(data) => (
(rectificativeTypeOptions = data),
(transferInvoiceParams.cplusRectificationTypeFk = data.filter(
(type) => type.description == 'I Por diferencias'
)[0].id)
)
"
auto-load auto-load
/> />
<FetchData <FetchData
url="SiiTypeInvoiceOuts" url="SiiTypeInvoiceOuts"
:filter="{ where: { code: { like: 'R%' } } }" :filter="{ where: { code: { like: 'R%' } } }"
@on-fetch=" @on-fetch="(data) => (siiTypeInvoiceOutsOptions = data)"
(data) => (
(siiTypeInvoiceOutsOptions = data),
(transferInvoiceParams.siiTypeInvoiceOutFk = data.filter(
(type) => type.code == 'R4'
)[0].id)
)
"
auto-load auto-load
/> />
<FetchData <FetchData
@ -110,15 +75,14 @@ const makeInvoice = async () => {
@on-fetch="(data) => (invoiceCorrectionTypesOptions = data)" @on-fetch="(data) => (invoiceCorrectionTypesOptions = data)"
auto-load auto-load
/> />
<QDialog ref="dialogRef">
<FormPopup <FormPopup
@on-submit="makeInvoice()" @on-submit="transferInvoice()"
:title="t('Transfer invoice')" :title="t('Transfer invoice')"
:custom-submit-button-label="t('Transfer client')" :custom-submit-button-label="t('Transfer client')"
:default-cancel-button="false" :default-cancel-button="false"
> >
<template #form-inputs> <template #form-inputs>
<VnRow> <VnRow class="row q-gutter-md q-mb-md">
<VnSelect <VnSelect
:label="t('Client')" :label="t('Client')"
:options="clientsOptions" :options="clientsOptions"
@ -127,18 +91,13 @@ const makeInvoice = async () => {
option-value="id" option-value="id"
v-model="transferInvoiceParams.newClientFk" v-model="transferInvoiceParams.newClientFk"
:required="true" :required="true"
url="Clients"
:fields="['id', 'name', 'hasToInvoiceByAddress']"
auto-load
> >
<template #option="scope"> <template #option="scope">
<QItem <QItem v-bind="scope.itemProps">
v-bind="scope.itemProps"
@click="selectedClient(scope.opt)"
>
<QItemSection> <QItemSection>
<QItemLabel> <QItemLabel>
#{{ scope.opt?.id }} - {{ scope.opt?.name }} #{{ scope.opt?.id }} -
{{ scope.opt?.name }}
</QItemLabel> </QItemLabel>
</QItemSection> </QItemSection>
</QItem> </QItem>
@ -154,7 +113,7 @@ const makeInvoice = async () => {
:required="true" :required="true"
/> />
</VnRow> </VnRow>
<VnRow> <VnRow class="row q-gutter-md q-mb-md">
<VnSelect <VnSelect
:label="t('Class')" :label="t('Class')"
:options="siiTypeInvoiceOutsOptions" :options="siiTypeInvoiceOutsOptions"
@ -185,27 +144,11 @@ const makeInvoice = async () => {
:required="true" :required="true"
/> />
</VnRow> </VnRow>
<VnRow>
<div>
<QCheckbox
:label="t('Bill destination client')"
v-model="checked"
/>
<QIcon name="info" class="cursor-info q-ml-sm" size="sm">
<QTooltip>{{ t('transferInvoiceInfo') }}</QTooltip>
</QIcon>
</div>
</VnRow>
</template> </template>
</FormPopup> </FormPopup>
</QDialog>
</template> </template>
<i18n> <i18n>
en:
checkInfo: New tickets from the destination customer will be generated in the consignee by default.
transferInvoiceInfo: Destination customer is marked to bill in the consignee
confirmTransferInvoice: The destination customer has selected to bill in the consignee, do you want to continue?
es: es:
Transfer invoice: Transferir factura Transfer invoice: Transferir factura
Transfer client: Transferir cliente Transfer client: Transferir cliente
@ -214,7 +157,4 @@ es:
Class: Clase Class: Clase
Type: Tipo Type: Tipo
Transferred invoice: Factura transferida Transferred invoice: Factura transferida
Bill destination client: Facturar cliente destino
transferInvoiceInfo: Los nuevos tickets del cliente destino, serán generados en el consignatario por defecto.
confirmTransferInvoice: El cliente destino tiene marcado facturar por consignatario, desea continuar?
</i18n> </i18n>

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { onMounted, computed, ref } from 'vue'; import { onMounted, computed } from 'vue';
import { Dark, Quasar } from 'quasar'; import { Dark, Quasar } from 'quasar';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
@ -10,18 +10,14 @@ import { localeEquivalence } from 'src/i18n/index';
import VnSelect from 'src/components/common/VnSelect.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import { useClipboard } from 'src/composables/useClipboard';
import { useRole } from 'src/composables/useRole';
import VnAvatar from './ui/VnAvatar.vue';
import useNotify from 'src/composables/useNotify';
const state = useState(); const state = useState();
const session = useSession(); const session = useSession();
const router = useRouter(); const router = useRouter();
const { t, locale } = useI18n(); const { t, locale } = useI18n();
import { useClipboard } from 'src/composables/useClipboard';
import { ref } from 'vue';
const { copyText } = useClipboard(); const { copyText } = useClipboard();
const { notify } = useNotify();
const userLocale = computed({ const userLocale = computed({
get() { get() {
return locale.value; return locale.value;
@ -52,10 +48,10 @@ const darkMode = computed({
}); });
const user = state.getUser(); const user = state.getUser();
const token = session.getTokenMultimedia();
const warehousesData = ref(); const warehousesData = ref();
const companiesData = ref(); const companiesData = ref();
const accountBankData = ref(); const accountBankData = ref();
const isEmployee = computed(() => useRole().isEmployee());
onMounted(async () => { onMounted(async () => {
updatePreferences(); updatePreferences();
@ -73,28 +69,18 @@ function updatePreferences() {
async function saveDarkMode(value) { async function saveDarkMode(value) {
const query = `/UserConfigs/${user.value.id}`; const query = `/UserConfigs/${user.value.id}`;
try {
await axios.patch(query, { await axios.patch(query, {
darkMode: value, darkMode: value,
}); });
user.value.darkMode = value; user.value.darkMode = value;
onDataSaved();
} catch (error) {
onDataError();
}
} }
async function saveLanguage(value) { async function saveLanguage(value) {
const query = `/VnUsers/${user.value.id}`; const query = `/VnUsers/${user.value.id}`;
try {
await axios.patch(query, { await axios.patch(query, {
lang: value, lang: value,
}); });
user.value.lang = value; user.value.lang = value;
onDataSaved();
} catch (error) {
onDataError();
}
} }
function logout() { function logout() {
@ -105,28 +91,6 @@ function logout() {
function copyUserToken() { function copyUserToken() {
copyText(session.getToken(), { label: 'components.userPanel.copyToken' }); copyText(session.getToken(), { label: 'components.userPanel.copyToken' });
} }
function localUserData() {
state.setUser(user.value);
}
async function saveUserData(param, value) {
try {
await axios.post('UserConfigs/setUserConfig', { [param]: value });
localUserData();
onDataSaved();
} catch (error) {
onDataError();
}
}
const onDataSaved = () => {
notify('globals.dataSaved', 'positive');
};
const onDataError = () => {
notify('errors.updateUserConfig', 'negative');
};
</script> </script>
<template> <template>
@ -137,14 +101,12 @@ const onDataError = () => {
auto-load auto-load
/> />
<FetchData <FetchData
v-if="isEmployee"
url="Companies" url="Companies"
order="name" order="name"
@on-fetch="(data) => (companiesData = data)" @on-fetch="(data) => (companiesData = data)"
auto-load auto-load
/> />
<FetchData <FetchData
v-if="isEmployee"
url="Accountings" url="Accountings"
order="name" order="name"
@on-fetch="(data) => (accountBankData = data)" @on-fetch="(data) => (accountBankData = data)"
@ -161,7 +123,7 @@ const onDataError = () => {
@update:model-value="saveLanguage" @update:model-value="saveLanguage"
:label="t(`globals.lang['${userLocale}']`)" :label="t(`globals.lang['${userLocale}']`)"
icon="public" icon="public"
color="primary" color="orange"
false-value="es" false-value="es"
true-value="en" true-value="en"
/> />
@ -170,7 +132,7 @@ const onDataError = () => {
@update:model-value="saveDarkMode" @update:model-value="saveDarkMode"
:label="t(`globals.darkMode`)" :label="t(`globals.darkMode`)"
checked-icon="dark_mode" checked-icon="dark_mode"
color="primary" color="orange"
unchecked-icon="light_mode" unchecked-icon="light_mode"
/> />
</div> </div>
@ -178,20 +140,13 @@ const onDataError = () => {
<QSeparator vertical inset class="q-mx-lg" /> <QSeparator vertical inset class="q-mx-lg" />
<div class="col column items-center q-mb-sm"> <div class="col column items-center q-mb-sm">
<VnAvatar <QAvatar size="80px">
:worker-id="user.id" <QImg
:title="user.name" :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
size="xxl" spinner-color="white"
color="transparent"
/>
<QBtn
v-if="isEmployee"
class="q-mt-sm q-px-md"
:to="`/worker/${user.id}`"
color="primary"
:label="t('globals.myAccount')"
dense
/> />
</QAvatar>
<div class="text-subtitle1 q-mt-md"> <div class="text-subtitle1 q-mt-md">
<strong>{{ user.nickname }}</strong> <strong>{{ user.nickname }}</strong>
</div> </div>
@ -203,7 +158,7 @@ const onDataError = () => {
</div> </div>
<QBtn <QBtn
id="logout" id="logout"
color="primary" color="orange"
flat flat
:label="t('globals.logOut')" :label="t('globals.logOut')"
size="sm" size="sm"
@ -225,7 +180,6 @@ const onDataError = () => {
option-value="id" option-value="id"
input-debounce="0" input-debounce="0"
hide-selected hide-selected
@update:model-value="localUserData"
/> />
<VnSelect <VnSelect
:label="t('components.userPanel.localBank')" :label="t('components.userPanel.localBank')"
@ -235,7 +189,6 @@ const onDataError = () => {
option-value="id" option-value="id"
input-debounce="0" input-debounce="0"
hide-selected hide-selected
@update:model-value="localUserData"
> >
<template #option="{ itemProps, opt }"> <template #option="{ itemProps, opt }">
<QItem v-bind="itemProps"> <QItem v-bind="itemProps">
@ -257,7 +210,6 @@ const onDataError = () => {
option-label="code" option-label="code"
option-value="id" option-value="id"
input-debounce="0" input-debounce="0"
@update:model-value="localUserData"
/> />
<VnSelect <VnSelect
:label="t('components.userPanel.userWarehouse')" :label="t('components.userPanel.userWarehouse')"
@ -267,7 +219,6 @@ const onDataError = () => {
option-label="name" option-label="name"
option-value="id" option-value="id"
input-debounce="0" input-debounce="0"
@update:model-value="(v) => saveUserData('warehouseFk', v)"
/> />
</VnRow> </VnRow>
<VnRow> <VnRow>
@ -281,7 +232,6 @@ const onDataError = () => {
style="flex: 0" style="flex: 0"
dense dense
input-debounce="0" input-debounce="0"
@update:model-value="(v) => saveUserData('companyFk', v)"
/> />
</VnRow> </VnRow>
</div> </div>

View File

@ -1,85 +0,0 @@
<script setup>
import { ref } from 'vue';
import { useValidator } from 'src/composables/useValidator';
import { useI18n } from 'vue-i18n';
import VnSelectDialog from 'components/common/VnSelectDialog.vue';
import FetchData from 'components/FetchData.vue';
import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
const emit = defineEmits(['onProvinceCreated']);
const $props = defineProps({
countryFk: {
type: Number,
default: null,
},
provinceSelected: {
type: Number,
default: null,
},
provinces: {
type: Array,
default: () => [],
},
});
const provinceFk = defineModel({ type: Number, default: null });
const { validate } = useValidator();
const { t } = useI18n();
const provincesOptions = ref($props.provinces);
provinceFk.value = $props.provinceSelected;
const provincesFetchDataRef = ref();
async function onProvinceCreated(_, data) {
await provincesFetchDataRef.value.fetch({ where: { countryFk: $props.countryFk } });
provinceFk.value = data.id;
emit('onProvinceCreated', data);
}
async function handleProvinces(data) {
provincesOptions.value = data;
}
</script>
<template>
<FetchData
ref="provincesFetchDataRef"
:filter="{
include: { relation: 'country' },
where: {
countryFk: $props.countryFk,
},
}"
@on-fetch="handleProvinces"
url="Provinces"
/>
<VnSelectDialog
:label="t('Province')"
:options="$props.provinces"
:tooltip="t('Create province')"
hide-selected
v-model="provinceFk"
:rules="validate && validate('postcode.provinceFk')"
:acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
<QItemSection>
<QItemLabel>{{ opt.name }}</QItemLabel>
<QItemLabel caption> {{ opt.country.name }} </QItemLabel>
</QItemSection>
</QItem>
</template>
<template #form>
<CreateNewProvinceForm
:country-fk="$props.countryFk"
@on-data-saved="onProvinceCreated"
/>
</template>
</VnSelectDialog>
</template>
<i18n>
es:
Province: Provincia
Create province: Crear provincia
</i18n>

View File

@ -1,57 +0,0 @@
<script setup>
defineProps({
columns: {
type: Array,
required: true,
},
row: {
type: Object,
default: null,
},
});
function stopEventPropagation(event) {
event.preventDefault();
event.stopPropagation();
}
</script>
<template>
<slot name="beforeChip" :row="row"></slot>
<span
v-for="col of columns"
:key="col.name"
@click="stopEventPropagation"
class="cursor-text"
>
<QChip
v-if="col.chip.condition(row[col.name], row)"
:title="col.label"
:class="[
col.chip.color
? col.chip.color(row)
: !col.chip.icon && 'bg-chip-secondary',
col.chip.icon && 'q-px-none',
]"
dense
square
>
<span v-if="!col.chip.icon">
{{ col.format ? col.format(row) : row[col.name] }}
</span>
<QIcon v-else :name="col.chip.icon" color="primary-light" />
</QChip>
</span>
<slot name="afterChip" :row="row"></slot>
</template>
<style lang="scss">
.bg-chip-secondary {
background-color: var(--vn-page-color);
color: var(--vn-text-color);
}
.cursor-text {
pointer-events: all;
cursor: text;
user-select: all;
}
</style>

View File

@ -1,190 +0,0 @@
<script setup>
import { markRaw, computed } from 'vue';
import { QIcon, QCheckbox } from 'quasar';
import { dashIfEmpty } from 'src/filters';
/* basic input */
import VnSelect from 'components/common/VnSelect.vue';
import VnSelectCache from 'components/common/VnSelectCache.vue';
import VnInput from 'components/common/VnInput.vue';
import VnInputNumber from 'components/common/VnInputNumber.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
import VnComponent from 'components/common/VnComponent.vue';
import VnUserLink from 'components/ui/VnUserLink.vue';
const model = defineModel(undefined, { required: true });
const $props = defineProps({
column: {
type: Object,
required: true,
},
row: {
type: Object,
default: () => {},
},
default: {
type: [Object, String],
default: null,
},
componentProp: {
type: String,
default: null,
},
isEditable: {
type: Boolean,
default: true,
},
components: {
type: Object,
default: null,
},
showLabel: {
type: Boolean,
default: null,
},
});
const defaultSelect = {
attrs: {
row: $props.row,
disable: !$props.isEditable,
class: 'fit',
},
forceAttrs: {
label: $props.showLabel && $props.column.label,
},
};
const defaultComponents = {
input: {
component: markRaw(VnInput),
attrs: {
disable: !$props.isEditable,
class: 'fit',
},
forceAttrs: {
label: $props.showLabel && $props.column.label,
},
},
number: {
component: markRaw(VnInputNumber),
attrs: {
disable: !$props.isEditable,
class: 'fit',
},
forceAttrs: {
label: $props.showLabel && $props.column.label,
},
},
date: {
component: markRaw(VnInputDate),
attrs: {
readonly: !$props.isEditable,
disable: !$props.isEditable,
style: 'min-width: 125px',
class: 'fit',
},
forceAttrs: {
label: $props.showLabel && $props.column.label,
},
},
time: {
component: markRaw(VnInputTime),
attrs: {
disable: !$props.isEditable,
},
forceAttrs: {
label: $props.showLabel && $props.column.label,
},
},
checkbox: {
component: markRaw(QCheckbox),
attrs: ({ model }) => {
const defaultAttrs = {
disable: !$props.isEditable,
'model-value': Boolean(model),
class: 'no-padding fit',
};
if (typeof model == 'number') {
defaultAttrs['true-value'] = 1;
defaultAttrs['false-value'] = 0;
}
return defaultAttrs;
},
forceAttrs: {
label: $props.showLabel && $props.column.label,
},
},
select: {
component: markRaw(VnSelectCache),
...defaultSelect,
},
rawSelect: {
component: markRaw(VnSelect),
...defaultSelect,
},
icon: {
component: markRaw(QIcon),
},
userLink: {
component: markRaw(VnUserLink),
},
};
const value = computed(() => {
return $props.column.format
? $props.column.format($props.row, dashIfEmpty)
: dashIfEmpty($props.row[$props.column.name]);
});
const col = computed(() => {
let newColumn = { ...$props.column };
const specific = newColumn[$props.componentProp];
if (specific) {
newColumn = {
...newColumn,
...specific,
...specific.attrs,
...specific.forceAttrs,
};
}
if (
(/^is[A-Z]/.test(newColumn.name) || /^has[A-Z]/.test(newColumn.name)) &&
newColumn.component == null
)
newColumn.component = 'checkbox';
if ($props.default && !newColumn.component) newColumn.component = $props.default;
return newColumn;
});
const components = computed(() => $props.components ?? defaultComponents);
</script>
<template>
<div class="row no-wrap">
<VnComponent
v-if="col.before"
:prop="col.before"
:components="components"
:value="{ row, model }"
v-model="model"
/>
<VnComponent
v-if="col.component"
:prop="col"
:components="components"
:value="{ row, model }"
v-model="model"
/>
<span :title="value" v-else>{{ value }}</span>
<VnComponent
v-if="col.after"
:prop="col.after"
:components="components"
:value="{ row, model }"
v-model="model"
/>
</div>
</template>

View File

@ -1,167 +0,0 @@
<script setup>
import { markRaw, computed } from 'vue';
import { QCheckbox } from 'quasar';
import { useArrayData } from 'composables/useArrayData';
/* basic input */
import VnSelect from 'components/common/VnSelect.vue';
import VnInput from 'components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
import VnTableColumn from 'components/VnTable/VnColumn.vue';
const $props = defineProps({
column: {
type: Object,
required: true,
},
showTitle: {
type: Boolean,
default: false,
},
dataKey: {
type: String,
required: true,
},
searchUrl: {
type: String,
default: 'table',
},
});
defineExpose({ addFilter, props: $props });
const model = defineModel(undefined, { required: true });
const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
const columnFilter = computed(() => $props.column?.columnFilter);
const updateEvent = { 'update:modelValue': addFilter };
const enterEvent = {
'keyup.enter': () => addFilter(model.value),
remove: () => addFilter(null),
};
const defaultAttrs = {
filled: !$props.showTitle,
class: 'q-px-xs q-pb-xs q-pt-none fit',
dense: true,
};
const forceAttrs = {
label: $props.showTitle ? '' : columnFilter.value?.label ?? $props.column.label,
};
const selectComponent = {
component: markRaw(VnSelect),
event: updateEvent,
attrs: {
class: 'q-px-sm q-pb-xs q-pt-none fit',
dense: true,
filled: !$props.showTitle,
},
forceAttrs,
};
const components = {
input: {
component: markRaw(VnInput),
event: enterEvent,
attrs: {
...defaultAttrs,
clearable: true,
},
forceAttrs,
},
number: {
component: markRaw(VnInput),
event: enterEvent,
attrs: {
...defaultAttrs,
clearable: true,
type: 'number',
},
forceAttrs,
},
date: {
component: markRaw(VnInputDate),
event: updateEvent,
attrs: {
...defaultAttrs,
style: 'min-width: 150px',
},
forceAttrs,
},
time: {
component: markRaw(VnInputTime),
event: updateEvent,
attrs: {
...defaultAttrs,
disable: !$props.isEditable,
},
forceAttrs: {
label: $props.showLabel && $props.column.label,
},
},
checkbox: {
component: markRaw(QCheckbox),
event: updateEvent,
attrs: {
dense: true,
class: $props.showTitle ? 'q-py-sm q-mt-md' : 'q-px-md q-py-xs fit',
'toggle-indeterminate': true,
},
forceAttrs,
},
select: selectComponent,
rawSelect: selectComponent,
};
async function addFilter(value, name) {
value ??= undefined;
if (value && typeof value === 'object') value = model.value;
value = value === '' ? undefined : value;
let field = columnFilter.value?.name ?? $props.column.name ?? name;
if (columnFilter.value?.inWhere) {
if (columnFilter.value.alias) field = columnFilter.value.alias + '.' + field;
return await arrayData.addFilterWhere({ [field]: value });
}
await arrayData.addFilter({ params: { [field]: value } });
}
function alignRow() {
switch ($props.column.align) {
case 'left':
return 'justify-start items-start';
case 'right':
return 'justify-end items-end';
default:
return 'flex-center';
}
}
const showFilter = computed(
() => $props.column?.columnFilter !== false && $props.column.name != 'tableActions'
);
const onTabPressed = async () => {
if (model.value) enterEvent['keyup.enter']();
};
</script>
<template>
<div
v-if="showFilter"
class="full-width"
:class="alignRow()"
style="max-height: 45px; overflow: hidden"
>
<VnTableColumn
:column="$props.column"
default="input"
v-model="model"
:components="components"
component-prop="columnFilter"
@keydown.tab="onTabPressed"
/>
</div>
</template>

View File

@ -1,95 +0,0 @@
<script setup>
import { ref } from 'vue';
import { useArrayData } from 'composables/useArrayData';
const model = defineModel({ type: Object });
const $props = defineProps({
name: {
type: [String, Boolean],
default: '',
},
label: {
type: String,
default: undefined,
},
dataKey: {
type: String,
required: true,
},
searchUrl: {
type: String,
default: 'table',
},
vertical: {
type: Boolean,
default: false,
},
});
const hover = ref();
const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
async function orderBy(name, direction) {
if (!name) return;
switch (direction) {
case 'DESC':
direction = undefined;
break;
case undefined:
direction = 'ASC';
break;
case 'ASC':
direction = 'DESC';
break;
}
if (!direction) return await arrayData.deleteOrder(name);
await arrayData.addOrder(name, direction);
}
defineExpose({ orderBy });
</script>
<template>
<div
@mouseenter="hover = true"
@mouseleave="hover = false"
@click="orderBy(name, model?.direction)"
class="row items-center no-wrap cursor-pointer"
>
<span :title="label">{{ label }}</span>
<QChip
v-if="name"
:label="!vertical ? model?.index : ''"
:icon="
(model?.index || hover) && !vertical
? model?.direction == 'DESC'
? 'arrow_downward'
: 'arrow_upward'
: undefined
"
:size="vertical ? '' : 'sm'"
:class="[
model?.index ? 'color-vn-text' : 'bg-transparent',
vertical ? 'q-px-none' : '',
]"
class="no-box-shadow"
:clickable="true"
style="min-width: 40px"
>
<div
class="column flex-center"
v-if="vertical"
:style="!model?.index && 'color: #5d5d5d'"
>
{{ model?.index }}
<QIcon
:name="
model?.index
? model?.direction == 'DESC'
? 'arrow_downward'
: 'arrow_upward'
: 'swap_vert'
"
size="xs"
/>
</div>
</QChip>
</div>
</template>

View File

@ -1,942 +0,0 @@
<script setup>
import { ref, onBeforeMount, onMounted, computed, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore';
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';
const $props = defineProps({
columns: {
type: Array,
required: true,
},
defaultMode: {
type: String,
default: 'table', // 'table', 'card'
},
columnSearch: {
type: Boolean,
default: true,
},
rightSearch: {
type: Boolean,
default: true,
},
rowClick: {
type: [Function, Boolean],
default: null,
},
rowCtrlClick: {
type: [Function, Boolean],
default: null,
},
redirect: {
type: String,
default: null,
},
create: {
type: Object,
default: null,
},
createAsDialog: {
type: Boolean,
default: true,
},
bottom: {
type: Object,
default: null,
},
cardClass: {
type: String,
default: 'flex-one',
},
searchUrl: {
type: [String, Boolean],
default: 'table',
},
isEditable: {
type: Boolean,
default: false,
},
useModel: {
type: Boolean,
default: false,
},
hasSubToolbar: {
type: Boolean,
default: null,
},
disableOption: {
type: Object,
default: () => ({ card: false, table: false }),
},
withoutHeader: {
type: Boolean,
default: false,
},
tableCode: {
type: String,
default: null,
},
table: {
type: Object,
default: () => ({}),
},
crudModel: {
type: Object,
default: () => ({}),
},
tableHeight: {
type: String,
default: '90vh',
},
chipLocale: {
type: String,
default: null,
},
footer: {
type: Boolean,
default: false,
},
disabledAttr: {
type: Boolean,
default: false,
},
});
const { t } = useI18n();
const stateStore = useStateStore();
const route = useRoute();
const router = useRouter();
const quasar = useQuasar();
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 tableModes = [
{
icon: 'view_column',
title: t('table view'),
value: TABLE_MODE,
disable: $props.disableOption?.table,
},
{
icon: 'grid_view',
title: t('grid view'),
value: CARD_MODE,
disable: $props.disableOption?.card,
},
];
onBeforeMount(() => {
const urlParams = route.query[$props.searchUrl];
hasParams.value = urlParams && Object.keys(urlParams).length !== 0;
});
onMounted(() => {
mode.value =
quasar.platform.is.mobile && !$props.disableOption?.card
? CARD_MODE
: $props.defaultMode;
stateStore.rightDrawer = quasar.screen.gt.xs;
columnsVisibilitySkipped.value = [
...splittedColumns.value.columns.filter((c) => !c.visible).map((c) => c.name),
...['tableActions'],
];
createForm.value = $props.create;
if ($props.create && route?.query?.createForm) {
showForm.value = true;
createForm.value = {
...createForm.value,
...{ formInitialData: JSON.parse(route?.query?.createForm) },
};
}
});
watch(
() => $props.columns,
(value) => splitColumns(value),
{ 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;
}
function splitColumns(columns) {
splittedColumns.value = {
columns: [],
chips: [],
create: [],
cardVisible: [],
};
for (const col of columns) {
if (col.name == 'tableActions') {
col.orderBy = false;
splittedColumns.value.actions = col;
}
if (col.chip) splittedColumns.value.chips.push(col);
if (col.isTitle) splittedColumns.value.title = col;
if (col.create) splittedColumns.value.create.push(col);
if (col.cardVisible) splittedColumns.value.cardVisible.push(col);
if ($props.isEditable && col.disable == null) col.disable = false;
if ($props.useModel && col.columnFilter !== false)
col.columnFilter = { inWhere: true, ...col.columnFilter };
splittedColumns.value.columns.push(col);
}
// Status column
if (splittedColumns.value.chips.length) {
splittedColumns.value.columnChips = splittedColumns.value.chips.filter(
(c) => !c.isId
);
if (splittedColumns.value.columnChips.length)
splittedColumns.value.columns.unshift({
align: 'left',
label: t('status'),
name: 'tableStatus',
columnFilter: false,
orderBy: false,
});
}
}
const rowClickFunction = computed(() => {
if ($props.rowClick != undefined) return $props.rowClick;
if ($props.redirect) return ({ id }) => redirectFn(id);
return () => {};
});
const rowCtrlClickFunction = computed(() => {
if ($props.rowCtrlClick != undefined) return $props.rowCtrlClick;
if ($props.redirect)
return (evt, { id }) => {
stopEventPropagation(evt);
window.open(`/#/${$props.redirect}/${id}`, '_blank');
};
return () => {};
});
function redirectFn(id) {
router.push({ path: `/${$props.redirect}/${id}` });
}
function stopEventPropagation(event) {
event.preventDefault();
event.stopPropagation();
}
function reload(params) {
selected.value = [];
CrudModelRef.value.reload(params);
}
function columnName(col) {
const column = { ...col, ...col.columnFilter };
let name = column.name;
if (column.alias) name = column.alias + '.' + name;
return name;
}
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,
reload,
redirect: redirectFn,
selected,
CrudModelRef,
params,
tableRef,
});
function handleOnDataSaved(_) {
if (_.onDataSaved) _.onDataSaved({ CrudModelRef: CrudModelRef.value });
else $props.create.onDataSaved(_);
}
function handleScroll() {
if ($props.crudModel.disableInfiniteScroll) return;
const tMiddle = tableRef.value.$el.querySelector('.q-table__middle');
const { scrollHeight, scrollTop, clientHeight } = tMiddle;
const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) <= 40;
if (isAtBottom) CrudModelRef.value.vnPaginateRef.paginate();
}
function handleSelection({ evt, added, rows: selectedRows }, rows) {
if (evt?.shiftKey && added) {
const rowIndex = selectedRows[0].$index;
const selectedIndexes = new Set(selected.value.map((row) => row.$index));
for (const row of rows) {
if (row.$index == rowIndex) break;
if (!selectedIndexes.has(row.$index)) {
selected.value.push(row);
selectedIndexes.add(row.$index);
}
}
}
}
</script>
<template>
<QDrawer
v-if="$props.rightSearch"
v-model="stateStore.rightDrawer"
side="right"
:width="256"
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>
</QScrollArea>
</QDrawer>
<CrudModel
v-bind="$attrs"
:class="$attrs['class'] ?? 'q-px-md'"
:limit="$attrs['limit'] ?? 20"
ref="CrudModelRef"
@on-fetch="(...args) => emit('onFetch', ...args)"
:search-url="searchUrl"
:disable-infinite-scroll="isTableMode"
@save-changes="reload"
:has-sub-toolbar="$props.hasSubToolbar ?? isEditable"
:auto-load="hasParams || $attrs['auto-load']"
>
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
</template>
<template #body="{ rows }">
<QTable
ref="tableRef"
v-bind="table"
class="vnTable"
:class="{ 'last-row-sticky': $props.footer }"
:columns="splittedColumns.columns"
:rows="rows"
v-model:selected="selected"
:grid="!isTableMode"
table-header-class="bg-header"
card-container-class="grid-three"
flat
:style="isTableMode && `max-height: ${tableHeight}`"
:virtual-scroll="isTableMode"
@virtual-scroll="handleScroll"
@row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
@update:selected="emit('update:selected', $event)"
@selection="(details) => handleSelection(details, rows)"
>
<template #top-left v-if="!$props.withoutHeader">
<slot name="top-left"></slot>
</template>
<template #top-right v-if="!$props.withoutHeader">
<VnVisibleColumn
v-if="isTableMode"
v-model="splittedColumns.columns"
:table-code="tableCode ?? route.name"
:skip="columnsVisibilitySkipped"
/>
<QBtnToggle
v-model="mode"
toggle-color="primary"
class="bg-vn-section-color"
dense
:options="tableModes.filter((mode) => !mode.disable)"
/>
<QBtn
v-if="$props.rightSearch"
icon="filter_alt"
class="bg-vn-section-color q-ml-sm"
dense
@click="stateStore.toggleRightDrawer()"
/>
</template>
<template #header-cell="{ col }">
<QTh
v-if="col.visible ?? true"
:style="col.headerStyle"
:class="col.headerClass"
>
<div
class="column self-start q-ml-xs ellipsis"
:class="`text-${col?.align ?? 'left'}`"
:style="$props.columnSearch ? 'height: 75px' : ''"
>
<div class="row items-center no-wrap" style="height: 30px">
<QTooltip v-if="col.toolTip">{{ col.toolTip }}</QTooltip>
<VnTableOrder
v-model="orders[col.orderBy ?? col.name]"
:name="col.orderBy ?? col.name"
:label="col?.label"
:data-key="$attrs['data-key']"
:search-url="searchUrl"
/>
</div>
<VnFilter
v-if="$props.columnSearch"
:column="col"
:show-title="true"
:data-key="$attrs['data-key']"
v-model="params[columnName(col)]"
:search-url="searchUrl"
class="full-width"
/>
</div>
</QTh>
</template>
<template #header-cell-tableActions>
<QTh auto-width class="sticky" />
</template>
<template #body-cell-tableStatus="{ col, row }">
<QTd auto-width :class="getColAlign(col)">
<VnTableChip :columns="splittedColumns.columnChips" :row="row">
<template #afterChip>
<slot name="afterChip" :row="row"></slot>
</template>
</VnTableChip>
</QTd>
</template>
<template #body-cell="{ col, row, rowIndex }">
<!-- Columns -->
<QTd
auto-width
class="no-margin q-px-xs"
:class="[getColAlign(col), col.columnClass]"
:style="col.style"
v-if="col.visible ?? true"
@click.ctrl="
($event) =>
rowCtrlClickFunction && rowCtrlClickFunction($event, row)
"
>
<slot
:name="`column-${col.name}`"
:col="col"
:row="row"
:row-index="rowIndex"
>
<VnTableColumn
:column="col"
:row="row"
:is-editable="col.isEditable ?? isEditable"
v-model="row[col.name]"
component-prop="columnField"
/>
</slot>
</QTd>
</template>
<template #body-cell-tableActions="{ col, row }">
<QTd
auto-width
:class="getColAlign(col)"
class="sticky no-padding"
@click="stopEventPropagation($event)"
:style="col.style"
>
<QBtn
v-for="(btn, index) of col.actions"
v-show="btn.show ? btn.show(row) : true"
:key="index"
:title="btn.title"
:icon="btn.icon"
class="q-pa-xs"
flat
dense
:class="
btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
"
:style="`visibility: ${
(btn.show && btn.show(row)) ?? true ? 'visible' : 'hidden'
}`"
@click="btn.action(row)"
/>
</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'"
:to="`/${$props.redirect}/` + row.id"
>
<QCard
bordered
flat
class="row no-wrap justify-between cursor-pointer"
@click="
(_, row) => {
$props.rowClick && $props.rowClick(row);
}
"
>
<QCardSection
vertical
class="no-margin no-padding"
:class="colsMap.tableActions ? 'w-80' : 'fit'"
>
<!-- Chips -->
<QCardSection
v-if="splittedColumns.chips.length"
class="no-margin q-px-xs q-py-none"
>
<VnTableChip
:columns="splittedColumns.chips"
:row="row"
>
<template #afterChip>
<slot name="afterChip" :row="row"></slot>
</template>
</VnTableChip>
</QCardSection>
<!-- Title -->
<QCardSection
v-if="splittedColumns.title"
class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
>
<span
:title="row[splittedColumns.title.name]"
@click="stopEventPropagation($event)"
class="cursor-text"
>
{{ row[splittedColumns.title.name] }}
</span>
</QCardSection>
<!-- Fields -->
<QCardSection
class="q-pl-sm q-pr-lg q-py-xs"
:class="$props.cardClass"
>
<div
v-for="(
col, index
) of splittedColumns.cardVisible"
:key="col.name"
class="fields"
>
<VnLv
:label="
!col.component && col.label
? `${col.label}:`
: ''
"
>
<template #value>
<span
@click="stopEventPropagation($event)"
>
<slot
:name="`column-${col.name}`"
:col="col"
:row="row"
:row-index="index"
>
<VnTableColumn
:column="col"
:row="row"
:is-editable="false"
v-model="row[col.name]"
component-prop="columnField"
:show-label="true"
/>
</slot>
</span>
</template>
</VnLv>
</div>
</QCardSection>
</QCardSection>
<!-- Actions -->
<QCardSection
v-if="colsMap.tableActions"
class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
@click="stopEventPropagation($event)"
>
<QBtn
v-for="(btn, index) of splittedColumns.actions
.actions"
:key="index"
:title="btn.title"
:icon="btn.icon"
class="q-pa-xs"
flat
:class="
btn.isPrimary
? 'text-primary-light'
: 'color-vn-text '
"
@click="btn.action(row)"
/>
</QCardSection>
</QCard>
</component>
</template>
<template #bottom-row="{ cols }" v-if="$props.footer">
<QTr v-if="rows.length" style="height: 30px">
<QTh
v-for="col of cols.filter((cols) => cols.visible ?? true)"
:key="col?.id"
class="text-center"
:class="getColAlign(col)"
>
<slot :name="`column-footer-${col.name}`" />
</QTh>
</QTr>
</template>
</QTable>
</template>
</CrudModel>
<QPageSticky v-if="$props.create" :offset="[20, 20]" style="z-index: 2">
<QBtn
@click="
() =>
createAsDialog ? (showForm = !showForm) : handleOnDataSaved(create)
"
color="primary"
fab
icon="add"
shortcut="+"
data-cy="vnTableCreateBtn"
/>
<QTooltip self="top right">
{{ createForm?.title }}
</QTooltip>
</QPageSticky>
<QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
<FormModelPopup
v-bind="createForm"
:model="$attrs['data-key'] + 'Create'"
@on-data-saved="(_, res) => createForm.onDataSaved(res)"
>
<template #form-inputs="{ data }">
<div class="grid-create">
<slot
v-for="column of splittedColumns.create"
:key="column.name"
:name="`column-create-${column.name}`"
:data="data"
:column-name="column.name"
:label="column.label"
>
<VnTableColumn
:column="column"
:row="{}"
default="input"
v-model="data[column.name]"
:show-label="true"
component-prop="columnCreate"
/>
</slot>
<slot name="more-create-dialog" :data="data" />
</div>
</template>
</FormModelPopup>
</QDialog>
</template>
<i18n>
en:
status: Status
table view: Table view
grid view: Grid view
es:
status: Estados
table view: Vista en tabla
grid view: Vista en cuadrícula
</i18n>
<style lang="scss">
.bg-chip-secondary {
background-color: var(--vn-page-color);
color: var(--vn-text-color);
}
.bg-header {
background-color: var(--vn-accent-color);
color: var(--vn-text-color);
}
.color-vn-text {
color: var(--vn-text-color);
}
.grid-three {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, max-content));
max-width: 100%;
grid-gap: 20px;
margin: 0 auto;
}
.grid-create {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
max-width: 100%;
grid-gap: 20px;
margin: 0 auto;
}
.flex-one {
display: flex;
flex-flow: row wrap;
div.fields {
width: 100%;
.vn-label-value {
display: flex;
gap: 2%;
}
}
}
.q-table {
th {
padding: 0;
}
&__top {
padding: 12px 0px;
top: 0;
}
}
.vnTable {
thead tr th {
position: sticky;
z-index: 2;
}
thead tr:first-child th {
top: 0;
}
.q-table__top {
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;
}
td.sticky {
background-color: var(--vn-section-color);
z-index: 1;
}
table tbody th {
position: relative;
}
}
.last-row-sticky {
tbody:nth-last-child(1) {
@extend .bg-header;
position: sticky;
z-index: 2;
bottom: 0;
}
}
.vn-label-value {
display: flex;
flex-direction: row;
color: var(--vn-text-color);
.value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: all;
cursor: text;
user-select: all;
}
}
.cardEllipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.grid-two {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
max-width: 100%;
margin: 0 auto;
overflow: scroll;
white-space: wrap;
width: 100%;
}
.w-80 {
width: 80%;
}
.w-20 {
width: 20%;
}
.cursor-text {
pointer-events: all;
cursor: text;
user-select: all;
}
.q-table__container {
background-color: transparent;
}
.q-table__middle.q-virtual-scroll.q-virtual-scroll--vertical.scroll {
background-color: var(--vn-section-color);
}
</style>

View File

@ -1,189 +0,0 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { ref, computed, onMounted } from 'vue';
import { useState } from 'src/composables/useState';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
const columns = defineModel({ type: Object, default: [] });
const $props = defineProps({
tableCode: {
type: String,
default: '',
},
skip: {
type: Array,
default: () => [],
},
});
const { notify } = useNotify();
const { t } = useI18n();
const state = useState();
const user = state.getUser();
const popupProxyRef = ref();
const initialUserConfigViewData = ref();
const localColumns = ref([]);
const areAllChecksMarked = computed(() => {
return localColumns.value.every((col) => col.visible);
});
function setUserConfigViewData(data, isLocal) {
if (!data) return;
// Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
if (!isLocal) localColumns.value = [];
// Array to Object
const skippeds = $props.skip.reduce((a, v) => ({ ...a, [v]: v }), {});
for (let column of columns.value) {
const { label, name } = column;
if (skippeds[name]) continue;
column.visible = data[name] ?? true;
if (!isLocal) localColumns.value.push({ name, label, visible: column.visible });
}
}
function toggleMarkAll(val) {
localColumns.value.forEach((col) => (col.visible = val));
}
async function getConfig(url, filter) {
const response = await axios.get(url, {
params: { filter: filter },
});
return response.data && response.data.length > 0 ? response.data[0] : null;
}
async function fetchViewConfigData() {
try {
const defaultFilter = {
where: { tableCode: $props.tableCode },
};
const userConfig = await getConfig('UserConfigViews', {
where: {
...defaultFilter.where,
...{ userFk: user.value.id },
},
});
if (userConfig) {
initialUserConfigViewData.value = userConfig;
setUserConfigViewData(userConfig.configuration);
return;
}
const defaultConfig = await getConfig('DefaultViewConfigs', defaultFilter);
if (defaultConfig) {
setUserConfigViewData(defaultConfig.columns);
return;
}
} catch (err) {
console.error('Error fetching config view data', err);
}
}
async function saveConfig() {
const configuration = {};
for (const { name, visible } of localColumns.value)
configuration[name] = visible ?? true;
setUserConfigViewData(configuration, true);
if (!$props.tableCode) return popupProxyRef.value.hide();
try {
const params = {};
// Si existe una view config del usuario hacemos un update si no la creamos
if (initialUserConfigViewData.value) {
params.updates = [
{
data: {
configuration,
},
where: {
id: initialUserConfigViewData.value.id,
},
},
];
} else {
params.creates = [
{
userFk: user.value.id,
tableCode: $props.tableCode,
tableConfig: $props.tableCode,
configuration,
},
];
}
const response = await axios.post('UserConfigViews/crud', params);
if (response.data && response.data[0]) {
initialUserConfigViewData.value = response.data[0];
}
notify('globals.dataSaved', 'positive');
popupProxyRef.value.hide();
} catch (err) {
console.error('Error saving user view config', err);
notify('errors.writeRequest', 'negative');
}
}
onMounted(async () => {
setUserConfigViewData({});
await fetchViewConfigData();
});
</script>
<template>
<QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-sm q-px-sm" dense>
<QPopupProxy ref="popupProxyRef">
<QCard class="column q-pa-md">
<QIcon name="info" size="sm" class="info-icon">
<QTooltip>{{ t('Check the columns you want to see') }}</QTooltip>
</QIcon>
<span class="text-body1 q-mb-sm">{{ t('Visible columns') }}</span>
<QCheckbox
:label="t('Tick all')"
:model-value="areAllChecksMarked"
@update:model-value="toggleMarkAll($event)"
class="q-mb-sm"
/>
<div v-if="columns.length > 0" class="checks-layout">
<QCheckbox
v-for="col in localColumns"
:key="col.name"
:label="col.label"
v-model="col.visible"
/>
</div>
<QBtn
class="full-width q-mt-md"
color="primary"
@click="saveConfig()"
:label="t('globals.save')"
/>
</QCard>
</QPopupProxy>
<QTooltip>{{ t('Visible columns') }}</QTooltip>
</QBtn>
</template>
<style lang="scss" scoped>
.info-icon {
position: absolute;
top: 20px;
right: 20px;
}
.checks-layout {
display: grid;
grid-template-columns: repeat(3, 200px);
}
</style>
<i18n>
es:
Check the columns you want to see: Marca las columnas que quieres ver
Visible columns: Columnas visibles
Tick all: Marcar todas
</i18n>

View File

@ -9,13 +9,14 @@ const rightPanel = ref(null);
onMounted(() => { onMounted(() => {
rightPanel.value = document.querySelector('#right-panel'); rightPanel.value = document.querySelector('#right-panel');
if (!rightPanel.value) return; if (rightPanel.value.childNodes.length) hasContent.value = true;
// Check if there's content to display // Check if there's content to display
const observer = new MutationObserver(() => { const observer = new MutationObserver(() => {
hasContent.value = rightPanel.value.childNodes.length; hasContent.value = rightPanel.value.childNodes.length;
}); });
if (rightPanel.value)
observer.observe(rightPanel.value, { observer.observe(rightPanel.value, {
subtree: true, subtree: true,
childList: true, childList: true,
@ -29,7 +30,7 @@ const { t } = useI18n();
const stateStore = useStateStore(); const stateStore = useStateStore();
</script> </script>
<template> <template>
<Teleport to="#actions-append" v-if="stateStore.isHeaderMounted()"> <Teleport to="#actions-append">
<div class="row q-gutter-x-sm"> <div class="row q-gutter-x-sm">
<QBtn <QBtn
v-if="hasContent || $slots['right-panel']" v-if="hasContent || $slots['right-panel']"
@ -37,7 +38,7 @@ const stateStore = useStateStore();
@click="stateStore.toggleRightDrawer()" @click="stateStore.toggleRightDrawer()"
round round
dense dense
icon="dock_to_left" icon="menu"
> >
<QTooltip bottom anchor="bottom right"> <QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }} {{ t('globals.collapseMenu') }}
@ -46,7 +47,7 @@ const stateStore = useStateStore();
</div> </div>
</Teleport> </Teleport>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above> <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit"> <QScrollArea class="fit text-grey-8">
<div id="right-panel"></div> <div id="right-panel"></div>
<slot v-if="!hasContent" name="right-panel" /> <slot v-if="!hasContent" name="right-panel" />
</QScrollArea> </QScrollArea>

View File

@ -52,14 +52,15 @@ const toggleMarkAll = (val) => {
const getConfig = async (url, filter) => { const getConfig = async (url, filter) => {
const response = await axios.get(url, { const response = await axios.get(url, {
params: { filter: JSON.stringify(filter) }, params: { filter: filter },
}); });
return response.data && response.data.length > 0 ? response.data[0] : null; return response.data && response.data.length > 0 ? response.data[0] : null;
}; };
const fetchViewConfigData = async () => { const fetchViewConfigData = async () => {
try {
const userConfigFilter = { const userConfigFilter = {
where: { tableCode: $props.tableCode, userFk: user.value.id }, where: { tableCode: $props.tableCode, userFk: user.id },
}; };
const userConfig = await getConfig('UserConfigViews', userConfigFilter); const userConfig = await getConfig('UserConfigViews', userConfigFilter);
@ -73,18 +74,16 @@ const fetchViewConfigData = async () => {
const defaultConfig = await getConfig('DefaultViewConfigs', defaultConfigFilter); const defaultConfig = await getConfig('DefaultViewConfigs', defaultConfigFilter);
if (defaultConfig) { if (defaultConfig) {
// Si el backend devuelve una configuración por defecto la usamos
setUserConfigViewData(defaultConfig.columns); setUserConfigViewData(defaultConfig.columns);
return; return;
} else { }
// Si no hay configuración por defecto mostramos todas las columnas } catch (err) {
const defaultColumns = {}; console.err('Error fetching config view data', err);
$props.allColumns.forEach((col) => (defaultColumns[col] = true));
setUserConfigViewData(defaultColumns);
} }
}; };
const saveConfig = async () => { const saveConfig = async () => {
try {
const params = {}; const params = {};
const configuration = {}; const configuration = {};
@ -123,6 +122,9 @@ const saveConfig = async () => {
emitSavedConfig(); emitSavedConfig();
notify('globals.dataSaved', 'positive'); notify('globals.dataSaved', 'positive');
popupProxyRef.value.hide(); popupProxyRef.value.hide();
} catch (err) {
console.error('Error saving user view config', err);
}
}; };
const emitSavedConfig = () => { const emitSavedConfig = () => {

View File

@ -18,7 +18,7 @@ watchEffect(() => {
(matched) => Object.keys(matched.meta).length (matched) => Object.keys(matched.meta).length
); );
breadcrumbs.value.length = 0; breadcrumbs.value.length = 0;
if (!matched.value[0]) return;
if (matched.value[0].name != 'Dashboard') { if (matched.value[0].name != 'Dashboard') {
root.value = useCamelCase(matched.value[0].path.substring(1).toLowerCase()); root.value = useCamelCase(matched.value[0].path.substring(1).toLowerCase());

View File

@ -1,19 +0,0 @@
<script setup>
import VnSelect from './VnSelect.vue';
defineProps({
selectProps: { type: Object, required: true },
promise: { type: Function, default: () => {} },
});
</script>
<template>
<QBtnDropdown v-bind="$attrs" color="primary">
<VnSelect
v-bind="selectProps"
hide-selected
hide-dropdown-icon
focus-on-mount
@update:model-value="promise"
/>
</QBtnDropdown>
</template>

View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import { onBeforeMount, computed } from 'vue'; import { onBeforeMount, computed, watchEffect } from 'vue';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'; import { useRoute, onBeforeRouteUpdate } from 'vue-router';
import { useArrayData } from 'src/composables/useArrayData'; import { useArrayData } from 'src/composables/useArrayData';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import useCardSize from 'src/composables/useCardSize'; import useCardSize from 'src/composables/useCardSize';
@ -8,6 +8,7 @@ import VnSubToolbar from '../ui/VnSubToolbar.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue'; import VnSearchbar from 'components/ui/VnSearchbar.vue';
import LeftMenu from 'components/LeftMenu.vue'; import LeftMenu from 'components/LeftMenu.vue';
import RightMenu from 'components/common/RightMenu.vue'; import RightMenu from 'components/common/RightMenu.vue';
const props = defineProps({ const props = defineProps({
dataKey: { type: String, required: true }, dataKey: { type: String, required: true },
baseUrl: { type: String, default: undefined }, baseUrl: { type: String, default: undefined },
@ -16,74 +17,73 @@ const props = defineProps({
descriptor: { type: Object, required: true }, descriptor: { type: Object, required: true },
filterPanel: { type: Object, default: undefined }, filterPanel: { type: Object, default: undefined },
searchDataKey: { type: String, default: undefined }, searchDataKey: { type: String, default: undefined },
searchbarProps: { type: Object, default: undefined }, searchUrl: { type: String, default: undefined },
redirectOnError: { type: Boolean, default: false }, searchbarLabel: { type: String, default: '' },
searchbarInfo: { type: String, default: '' },
}); });
const stateStore = useStateStore(); const stateStore = useStateStore();
const route = useRoute(); const route = useRoute();
const router = useRouter();
const url = computed(() => { const url = computed(() => {
if (props.baseUrl) { if (props.baseUrl) return `${props.baseUrl}/${route.params.id}`;
return `${props.baseUrl}/${route.params.id}`;
}
return props.customUrl; return props.customUrl;
}); });
const searchRightDataKey = computed(() => {
if (!props.searchDataKey) return route.name;
return props.searchDataKey;
});
const arrayData = useArrayData(props.dataKey, { const arrayData = useArrayData(props.dataKey, {
url: url.value, url: url.value,
filter: props.filter, filter: props.filter,
}); });
onBeforeMount(async () => { onBeforeMount(async () => {
try {
if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id }; if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
await arrayData.fetch({ append: false, updateRouter: false }); await arrayData.fetch({ append: false });
} catch {
const { matched: matches } = router.currentRoute.value;
const { path } = matches.at(-1);
router.push({ path: path.replace(/:id.*/, '') });
}
}); });
if (props.baseUrl) { if (props.baseUrl) {
onBeforeRouteUpdate(async (to, from) => { onBeforeRouteUpdate(async (to, from) => {
if (to.params.id !== from.params.id) { if (to.params.id !== from.params.id) {
arrayData.store.url = `${props.baseUrl}/${to.params.id}`; arrayData.store.url = `${props.baseUrl}/${route.params.id}`;
await arrayData.fetch({ append: false, updateRouter: false }); await arrayData.fetch({ append: false });
} }
}); });
} }
watchEffect(() => {
if (Array.isArray(arrayData.store.data))
arrayData.store.data = arrayData.store.data[0];
});
</script> </script>
<template> <template>
<QDrawer <template v-if="stateStore.isHeaderMounted()">
v-model="stateStore.leftDrawer" <Teleport to="#searchbar" v-if="props.searchDataKey">
show-if-above <slot name="searchbar">
:width="256" <VnSearchbar
v-if="stateStore.isHeaderMounted()" :data-key="props.searchDataKey"
> :url="props.searchUrl"
:label="props.searchbarLabel"
:info="props.searchbarInfo"
/>
</slot>
</Teleport>
<slot v-else name="searchbar" />
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit"> <QScrollArea class="fit">
<component :is="descriptor" /> <component :is="descriptor" />
<QSeparator /> <QSeparator />
<LeftMenu source="card" /> <LeftMenu source="card" />
</QScrollArea> </QScrollArea>
</QDrawer> </QDrawer>
<slot name="searchbar" v-if="props.searchDataKey">
<VnSearchbar :data-key="props.searchDataKey" v-bind="props.searchbarProps" />
</slot>
<RightMenu> <RightMenu>
<template #right-panel v-if="props.filterPanel"> <template #right-panel v-if="props.filterPanel">
<component :is="props.filterPanel" :data-key="searchRightDataKey" /> <component :is="props.filterPanel" :data-key="props.searchDataKey" />
</template> </template>
</RightMenu> </RightMenu>
</template>
<QPageContainer> <QPageContainer>
<QPage> <QPage>
<VnSubToolbar /> <VnSubToolbar />
<div :class="[useCardSize(), $attrs.class]"> <div :class="[useCardSize(), $attrs.class]">
<RouterView :key="route.path" /> <RouterView />
</div> </div>
</QPage> </QPage>
</QPageContainer> </QPageContainer>

View File

@ -1,136 +0,0 @@
<script setup>
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';
const props = defineProps({
submitFn: { type: Function, default: () => {} },
askOldPass: { type: Boolean, default: false },
});
const emit = defineEmits(['onSubmit']);
const { t } = useI18n();
const { notify } = useNotify();
const form = ref();
const changePassDialog = ref();
const passwords = ref({ newPassword: null, repeatPassword: null });
const requirements = ref([]);
const isLoading = ref(false);
const validate = async () => {
const { newPassword, repeatPassword, oldPassword } = passwords.value;
if (!newPassword) {
notify(t('You must enter a new password'), 'negative');
return;
}
if (newPassword !== repeatPassword) {
notify(t("Passwords don't match"), 'negative');
return;
}
try {
isLoading.value = true;
await props.submitFn(newPassword, oldPassword);
emit('onSubmit');
} catch (e) {
notify('errors.writeRequest', 'negative');
} finally {
changePassDialog.value.hide();
isLoading.value = false;
}
};
defineExpose({ show: () => changePassDialog.value.show() });
</script>
<template>
<FetchData
url="UserPasswords/findOne"
auto-load
@on-fetch="(data) => (requirements = data)"
/>
<QDialog ref="changePassDialog">
<QCard style="width: 350px">
<QCardSection>
<slot name="header">
<VnRow class="items-center" style="flex-direction: row">
<span class="text-h6" v-text="t('globals.changePass')" />
<QIcon
class="cursor-pointer"
name="close"
size="xs"
style="flex: 0"
v-close-popup
/>
</VnRow>
</slot>
</QCardSection>
<QForm ref="form">
<QCardSection>
<VnInput
v-if="props.askOldPass"
:label="t('Old password')"
v-model="passwords.oldPassword"
type="password"
:required="true"
autofocus
/>
<VnInput
:label="t('New password')"
v-model="passwords.newPassword"
type="password"
:required="true"
:info="
t('passwordRequirements', {
length: requirements.length,
nAlpha: requirements.nAlpha,
nUpper: requirements.nUpper,
nDigits: requirements.nDigits,
nPunct: requirements.nPunct,
})
"
autofocus
/>
<VnInput
:label="t('Repeat password')"
v-model="passwords.repeatPassword"
type="password"
/>
</QCardSection>
</QForm>
<QCardActions>
<slot name="actions">
<QBtn
:disabled="isLoading"
:loading="isLoading"
:label="t('globals.cancel')"
class="q-ml-sm"
color="primary"
flat
type="reset"
v-close-popup
/>
<QBtn
:disabled="isLoading"
:loading="isLoading"
:label="t('globals.confirm')"
color="primary"
@click="validate"
/>
</slot>
</QCardActions>
</QCard>
</QDialog>
</template>
<i18n>
es:
New password: Nueva contraseña
Repeat password: Repetir contraseña
You must enter a new password: Debes introducir la nueva contraseña
Passwords don't match: Las contraseñas no coinciden
</i18n>

View File

@ -1,59 +0,0 @@
<script setup>
import { computed } from 'vue';
const model = defineModel(undefined, { required: true });
const $props = defineProps({
prop: {
type: Object,
required: true,
},
components: {
type: Object,
default: () => {},
},
value: {
type: [Object, Number, String, Boolean],
default: () => {},
},
});
const componentArray = computed(() => {
if (typeof $props.prop === 'object') return [$props.prop];
return $props.prop;
});
function mix(toComponent) {
const { component, attrs, event } = toComponent;
const customComponent = $props.components[component];
return {
component: customComponent?.component ?? component,
attrs: {
...toValueAttrs(attrs),
...toValueAttrs(customComponent?.attrs),
...toComponent,
...toValueAttrs(customComponent?.forceAttrs),
},
event: { ...customComponent?.event, ...event },
};
}
function toValueAttrs(attrs) {
if (!attrs) return;
return typeof attrs == 'function' ? attrs($props.value) : attrs;
}
</script>
<template>
<span
v-for="toComponent of componentArray"
:key="toComponent.name"
class="column flex-center fit"
>
<component
v-if="toComponent?.component"
:is="mix(toComponent).component"
v-bind="mix(toComponent).attrs"
v-on="mix(toComponent).event ?? {}"
v-model="model"
/>
</span>
</template>

View File

@ -0,0 +1,34 @@
<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useCapitalize } from 'src/composables/useCapitalize';
import VnInput from 'src/components/common/VnInput.vue';
const props = defineProps({
modelValue: { type: [String, Number], default: '' },
});
const { t } = useI18n();
const emit = defineEmits(['update:modelValue']);
const amount = computed({
get() {
return props.modelValue;
},
set(val) {
emit('update:modelValue', val);
},
});
</script>
<template>
<VnInput
v-model="amount"
type="number"
step="any"
:label="useCapitalize(t('amount'))"
/>
</template>
<i18n>
es:
amount: importe
</i18n>

View File

@ -1,29 +0,0 @@
<script setup>
const model = defineModel({ type: [String, Number], required: true });
</script>
<template>
<QDate v-model="model" :today-btn="true" :options="$attrs.options" />
</template>
<style lang="scss" scoped>
.q-date {
width: 245px;
min-width: unset;
:deep(.q-date__calendar) {
padding-bottom: 0;
}
:deep(.q-date__view) {
min-height: 245px;
padding: 8px;
}
:deep(.q-date__calendar-days-container) {
min-height: 160px;
height: unset;
}
:deep(.q-date__header) {
padding: 2px 2px 5px 12px;
height: 60px;
}
}
</style>

View File

@ -31,10 +31,6 @@ const $props = defineProps({
type: String, type: String,
default: null, default: null,
}, },
description: {
type: String,
default: null,
},
}); });
const warehouses = ref(); const warehouses = ref();
@ -47,8 +43,7 @@ const dms = ref({});
onMounted(() => { onMounted(() => {
defaultData(); defaultData();
if (!$props.formInitialData) if (!$props.formInitialData)
dms.value.description = dms.value.description = t($props.model + 'Description', dms.value);
$props.description ?? t($props.model + 'Description', dms.value);
}); });
function onFileChange(files) { function onFileChange(files) {
dms.value.hasFileAttached = !!files; dms.value.hasFileAttached = !!files;
@ -59,6 +54,7 @@ function mapperDms(data) {
const formData = new FormData(); const formData = new FormData();
const { files } = data; const { files } = data;
if (files) formData.append(files?.name, files); if (files) formData.append(files?.name, files);
delete data.files;
const dms = { const dms = {
hasFile: !!data.hasFile, hasFile: !!data.hasFile,
@ -82,8 +78,6 @@ async function save() {
const body = mapperDms(dms.value); const body = mapperDms(dms.value);
const response = await axios.post(getUrl(), body[0], body[1]); const response = await axios.post(getUrl(), body[0], body[1]);
emit('onDataSaved', body[1].params, response); emit('onDataSaved', body[1].params, response);
delete dms.value.files;
return response;
} }
function defaultData() { function defaultData() {
@ -163,14 +157,13 @@ function addDefaultData(data) {
/> />
<QFile <QFile
ref="inputFileRef" ref="inputFileRef"
:label="t('globals.file')" :label="t('entry.buys.file')"
v-model="dms.files" v-model="dms.files"
:multiple="false" :multiple="false"
:accept="allowedContentTypes" :accept="allowedContentTypes"
@update:model-value="onFileChange(dms.files)" @update:model-value="onFileChange(dms.files)"
class="required" class="required"
:display-value="dms.file" :display-value="dms.file"
data-cy="VnDms_inputFile"
> >
<template #append> <template #append>
<QIcon <QIcon

View File

@ -5,14 +5,12 @@ import { useRoute } from 'vue-router';
import { useQuasar, QCheckbox, QBtn, QInput } from 'quasar'; import { useQuasar, QCheckbox, QBtn, QInput } from 'quasar';
import axios from 'axios'; import axios from 'axios';
import VnUserLink from '../ui/VnUserLink.vue';
import { downloadFile } from 'src/composables/downloadFile';
import VnImg from 'components/ui/VnImg.vue';
import VnPaginate from 'components/ui/VnPaginate.vue'; import VnPaginate from 'components/ui/VnPaginate.vue';
import VnDms from 'src/components/common/VnDms.vue'; import VnDms from 'src/components/common/VnDms.vue';
import VnConfirm from 'components/ui/VnConfirm.vue'; import VnConfirm from 'components/ui/VnConfirm.vue';
import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputDate from 'components/common/VnInputDate.vue';
import { useSession } from 'src/composables/useSession'; import VnUserLink from '../ui/VnUserLink.vue';
import { downloadFile } from 'src/composables/downloadFile';
const route = useRoute(); const route = useRoute();
const quasar = useQuasar(); const quasar = useQuasar();
@ -20,7 +18,6 @@ const { t } = useI18n();
const rows = ref(); const rows = ref();
const dmsRef = ref(); const dmsRef = ref();
const formDialog = ref({}); const formDialog = ref({});
const token = useSession().getTokenMultimedia();
const $props = defineProps({ const $props = defineProps({
model: { model: {
@ -92,23 +89,6 @@ const dmsFilter = {
}; };
const columns = computed(() => [ const columns = computed(() => [
{
label: '',
name: 'file',
align: 'left',
component: VnImg,
props: (prop) => {
return {
storage: 'dms',
collection: null,
resolution: null,
id: prop.row.file.split('.')[0],
token: token,
class: 'rounded',
ratio: 1,
};
},
},
{ {
align: 'left', align: 'left',
field: 'id', field: 'id',
@ -155,13 +135,19 @@ const columns = computed(() => [
field: 'hasFile', field: 'hasFile',
label: t('globals.original'), label: t('globals.original'),
name: 'hasFile', name: 'hasFile',
toolTip: t('The documentation is available in paper form'),
component: QCheckbox, component: QCheckbox,
props: (prop) => ({ props: (prop) => ({
disable: true, disable: true,
'model-value': Boolean(prop.value), 'model-value': Boolean(prop.value),
}), }),
}, },
{
align: 'left',
field: 'file',
label: t('globals.file'),
name: 'file',
component: 'span',
},
{ {
align: 'left', align: 'left',
field: 'worker', field: 'worker',
@ -287,10 +273,6 @@ function shouldRenderButton(button, isExternal = false) {
if (button.name == 'download') return true; if (button.name == 'download') return true;
return button.external === isExternal; return button.external === isExternal;
} }
defineExpose({
dmsRef,
});
</script> </script>
<template> <template>
<VnPaginate <VnPaginate
@ -311,14 +293,6 @@ defineExpose({
row-key="clientFk" row-key="clientFk"
:grid="$q.screen.lt.sm" :grid="$q.screen.lt.sm"
> >
<template #header="props">
<QTr :props="props" class="bg">
<QTh v-for="col in props.cols" :key="col.name" :props="props">
<QTooltip v-if="col.toolTip">{{ col.toolTip }}</QTooltip
>{{ col.label }}
</QTh>
</QTr>
</template>
<template #body-cell="props"> <template #body-cell="props">
<QTd :props="props"> <QTd :props="props">
<QTr :props="props"> <QTr :props="props">
@ -400,21 +374,14 @@ defineExpose({
/> />
</QDialog> </QDialog>
<QPageSticky position="bottom-right" :offset="[25, 25]"> <QPageSticky position="bottom-right" :offset="[25, 25]">
<QBtn <QBtn fab color="primary" icon="add" @click="showFormDialog()" />
fab
color="primary"
icon="add"
shortcut="+"
@click="showFormDialog()"
class="fill-icon"
>
<QTooltip>
{{ t('Upload file') }}
</QTooltip>
</QBtn>
</QPageSticky> </QPageSticky>
</template> </template>
<style scoped> <style scoped>
.q-gutter-y-ms {
display: grid;
row-gap: 20px;
}
.labelColor { .labelColor {
color: var(--vn-label-color); color: var(--vn-label-color);
} }
@ -422,10 +389,7 @@ defineExpose({
<i18n> <i18n>
en: en:
contentTypesInfo: Allowed file types {allowedContentTypes} contentTypesInfo: Allowed file types {allowedContentTypes}
The documentation is available in paper form: The documentation is available in paper form
es: es:
contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes} contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes}
Generate identifier for original file: Generar identificador para archivo original Generate identifier for original file: Generar identificador para archivo original
Upload file: Subir fichero
the documentation is available in paper form: Se tiene la documentación en papel
</i18n> </i18n>

View File

@ -1,17 +1,8 @@
<script setup> <script setup>
import { computed, ref, useAttrs } from 'vue'; import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRequired } from 'src/composables/useRequired';
const $attrs = useAttrs(); const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
const { isRequired, requiredFieldRule } = useRequired($attrs);
const { t } = useI18n();
const emit = defineEmits([
'update:modelValue',
'update:options',
'keyup.enter',
'remove',
]);
const $props = defineProps({ const $props = defineProps({
modelValue: { modelValue: {
@ -22,27 +13,16 @@ const $props = defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
info: {
type: String,
default: '',
},
clearable: {
type: Boolean,
default: true,
},
emptyToNull: {
type: Boolean,
default: true,
},
}); });
const { t } = useI18n();
const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
const vnInputRef = ref(null); const vnInputRef = ref(null);
const value = computed({ const value = computed({
get() { get() {
return $props.modelValue; return $props.modelValue;
}, },
set(value) { set(value) {
if ($props.emptyToNull && value === '') value = null;
emit('update:modelValue', value); emit('update:modelValue', value);
}, },
}); });
@ -65,63 +45,43 @@ defineExpose({
focus, focus,
}); });
const mixinRules = [ const inputRules = [
requiredFieldRule,
...($attrs.rules ?? []),
(val) => { (val) => {
const { min, max } = vnInputRef.value.$attrs; const { min } = vnInputRef.value.$attrs;
if (!min) return null;
if (min >= 0) if (Math.floor(val) < min) return t('inputMin', { value: min }); if (min >= 0) if (Math.floor(val) < min) return t('inputMin', { value: min });
if (!max) return null;
if (max > 0) {
if (Math.floor(val) > max) return t('inputMax', { value: max });
}
}, },
]; ];
</script> </script>
<template> <template>
<div @mouseover="hover = true" @mouseleave="hover = false"> <div
@mouseover="hover = true"
@mouseleave="hover = false"
:rules="$attrs.required ? [requiredFieldRule] : null"
>
<QInput <QInput
ref="vnInputRef" ref="vnInputRef"
v-model="value" v-model="value"
v-bind="{ ...$attrs, ...styleAttrs }" v-bind="{ ...$attrs, ...styleAttrs }"
:type="$attrs.type" :type="$attrs.type"
:class="{ required: isRequired }" :class="{ required: $attrs.required }"
@keyup.enter="emit('keyup.enter')" @keyup.enter="emit('keyup.enter')"
:clearable="false" :clearable="false"
:rules="mixinRules" :rules="inputRules"
:lazy-rules="true" :lazy-rules="true"
hide-bottom-space
> >
<template v-if="$slots.prepend" #prepend> <template v-if="$slots.prepend" #prepend>
<slot name="prepend" /> <slot name="prepend" />
</template> </template>
<template #append> <template #append>
<slot name="append" v-if="$slots.append && !$attrs.disabled" />
<QIcon <QIcon
name="close" name="close"
size="xs" size="xs"
v-if=" v-if="$slots.append && hover && value && !$attrs.disabled"
hover && @click="value = null"
value &&
!$attrs.disabled &&
!$attrs.readonly &&
$props.clearable
"
@click="
() => {
value = null;
vnInputRef.focus();
emit('remove');
}
"
></QIcon> ></QIcon>
<slot name="append" v-if="$slots.append && !$attrs.disabled" />
<QIcon v-if="info" name="info">
<QTooltip max-width="350px">
{{ info }}
</QTooltip>
</QIcon>
</template> </template>
</QInput> </QInput>
</div> </div>
@ -129,13 +89,6 @@ const mixinRules = [
<i18n> <i18n>
en: en:
inputMin: Must be more than {value} inputMin: Must be more than {value}
inputMax: Must be less than {value}
es: es:
inputMin: Debe ser mayor a {value} inputMin: Debe ser mayor a {value}
inputMax: Debe ser menor a {value}
</i18n> </i18n>
<style lang="scss">
.q-field__append {
padding-inline: 0;
}
</style>

View File

@ -1,85 +1,80 @@
<script setup> <script setup>
import { onMounted, watch, computed, ref, useAttrs } from 'vue'; import { computed, ref } from 'vue';
import { date } from 'quasar'; import isValidDate from 'filters/isValidDate';
import { useI18n } from 'vue-i18n';
import VnDate from './VnDate.vue';
import { useRequired } from 'src/composables/useRequired';
const $attrs = useAttrs(); const props = defineProps({
const { isRequired, requiredFieldRule } = useRequired($attrs); modelValue: {
const model = defineModel({ type: [String, Date] }); type: String,
const { t } = useI18n(); default: null,
},
const $props = defineProps({ readonly: {
type: Boolean,
default: false,
},
isOutlined: { isOutlined: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
showEvent: { emitDateFormat: {
type: Boolean, type: Boolean,
default: true, default: false,
}, },
}); });
const hover = ref(false);
const vnInputDateRef = ref(null); const emit = defineEmits(['update:modelValue']);
const dateFormat = 'DD/MM/YYYY'; const joinDateAndTime = (date, time) => {
const isPopupOpen = ref(); if (!date) {
const hover = ref(); return null;
const mask = ref(); }
if (!time) {
return new Date(date).toISOString();
}
const [year, month, day] = date.split('/');
return new Date(`${year}-${month}-${day}T${time}`).toISOString();
};
const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])]; const time = computed(() => (props.modelValue ? props.modelValue.split('T')?.[1] : null));
const value = computed({
const formattedDate = computed({
get() { get() {
if (!model.value) return model.value; return props.modelValue;
return date.formatDate(new Date(model.value), dateFormat);
}, },
set(value) { set(value) {
if (value == model.value) return; emit(
let newDate; 'update:modelValue',
if (value) { props.emitDateFormat ? new Date(value) : joinDateAndTime(value, time.value)
// parse input
if (value.includes('/') && value.length >= 10) {
if (value.at(2) == '/') value = value.split('/').reverse().join('/');
value = date.formatDate(
new Date(value).toISOString(),
'YYYY-MM-DDTHH:mm:ss.SSSZ'
); );
}
const [year, month, day] = value.split('-').map((e) => parseInt(e));
newDate = new Date(year, month - 1, day);
if (model.value) {
const orgDate =
model.value instanceof Date ? model.value : new Date(model.value);
newDate.setHours(
orgDate.getHours(),
orgDate.getMinutes(),
orgDate.getSeconds(),
orgDate.getMilliseconds()
);
}
}
if (!isNaN(newDate)) model.value = newDate.toISOString();
}, },
}); });
const popupDate = computed(() => const isPopupOpen = ref(false);
model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value
); const onDateUpdate = (date) => {
onMounted(() => { value.value = date;
// fix quasar bug isPopupOpen.value = false;
mask.value = '##/##/####'; };
const padDate = (value) => value.toString().padStart(2, '0');
const formatDate = (dateString) => {
const date = new Date(dateString || '');
return `${date.getFullYear()}/${padDate(date.getMonth() + 1)}/${padDate(
date.getDate()
)}`;
};
const displayDate = (dateString) => {
if (!dateString || !isValidDate(dateString)) {
return '';
}
return new Date(dateString).toLocaleDateString([], {
year: 'numeric',
month: '2-digit',
day: '2-digit',
}); });
watch( };
() => model.value,
(val) => (formattedDate.value = val),
{ immediate: true }
);
const styleAttrs = computed(() => { const styleAttrs = computed(() => {
return $props.isOutlined return props.isOutlined
? { ? {
dense: true, dense: true,
outlined: true, outlined: true,
@ -87,70 +82,44 @@ const styleAttrs = computed(() => {
} }
: {}; : {};
}); });
const manageDate = (date) => {
formattedDate.value = date;
isPopupOpen.value = false;
};
</script> </script>
<template> <template>
<div @mouseover="hover = true" @mouseleave="hover = false"> <div @mouseover="hover = true" @mouseleave="hover = false">
<QInput <QInput
ref="vnInputDateRef"
v-model="formattedDate"
class="vn-input-date" class="vn-input-date"
:mask="mask" readonly
placeholder="dd/mm/aaaa" :model-value="displayDate(value)"
v-bind="{ ...$attrs, ...styleAttrs }" v-bind="{ ...$attrs, ...styleAttrs }"
:class="{ required: isRequired }"
:rules="mixinRules"
:clearable="false"
@click="isPopupOpen = true" @click="isPopupOpen = true"
hide-bottom-space
> >
<template #append> <template #append>
<QIcon <QIcon
name="close" name="close"
size="xs" size="xs"
v-if=" v-if="hover && value"
($attrs.clearable == undefined || $attrs.clearable) && @click="onDateUpdate(null)"
hover && ></QIcon>
model && <QIcon name="event" class="cursor-pointer">
!$attrs.disable <QPopupProxy
" v-model="isPopupOpen"
@click=" cover
vnInputDateRef.focus();
model = null;
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"
transition-show="scale" transition-show="scale"
transition-hide="scale" transition-hide="scale"
v-model="isPopupOpen" :no-parent-event="props.readonly"
anchor="bottom left"
self="top start"
:no-focus="true"
:no-parent-event="true"
> >
<VnDate v-model="popupDate" @update:model-value="manageDate" /> <QDate
</QMenu> :today-btn="true"
<QDialog v-else v-model="isPopupOpen"> :model-value="formatDate(value)"
<VnDate v-model="popupDate" @update:model-value="manageDate" /> @update:model-value="onDateUpdate"
</QDialog> />
</QPopupProxy>
</QIcon>
</template>
</QInput> </QInput>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before { .vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
border-bottom-style: solid; border-bottom-style: solid;
@ -160,7 +129,3 @@ const manageDate = (date) => {
border-style: solid; border-style: solid;
} }
</style> </style>
<i18n>
es:
Open date: Abrir fecha
</i18n>

View File

@ -1,13 +0,0 @@
<script setup>
import VnInput from 'src/components/common/VnInput.vue';
import { ref } from 'vue';
import { useAttrs } from 'vue';
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" />
</template>

View File

@ -1,16 +1,15 @@
<script setup> <script setup>
import { computed, ref, useAttrs } from 'vue'; import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { date } from 'quasar'; import isValidDate from 'filters/isValidDate';
import VnTime from './VnTime.vue'; import VnInput from 'components/common/VnInput.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({ const props = defineProps({
timeOnly: { modelValue: {
type: String,
default: null,
},
readonly: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
@ -19,12 +18,42 @@ const props = defineProps({
default: false, default: false,
}, },
}); });
const vnInputTimeRef = ref(null); const { t } = useI18n();
const initialDate = ref(model.value ?? Date.vnNew()); const emit = defineEmits(['update:modelValue']);
const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
const dateFormat = 'HH:mm'; const value = computed({
const isPopupOpen = ref(); get() {
const hover = ref(); return props.modelValue;
},
set(value) {
const [hours, minutes] = value.split(':');
const date = new Date(props.modelValue);
date.setHours(Number.parseInt(hours) || 0, Number.parseInt(minutes) || 0, 0, 0);
emit('update:modelValue', value ? date.toISOString() : null);
},
});
const isPopupOpen = ref(false);
const onDateUpdate = (date) => {
internalValue.value = date;
};
const save = () => {
value.value = internalValue.value;
};
const formatTime = (dateString) => {
if (!dateString || !isValidDate(dateString)) {
return '';
}
const date = new Date(dateString || '');
return date.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
});
};
const internalValue = ref(formatTime(value));
const styleAttrs = computed(() => { const styleAttrs = computed(() => {
return props.isOutlined return props.isOutlined
@ -35,96 +64,52 @@ const styleAttrs = computed(() => {
} }
: {}; : {};
}); });
const formattedTime = computed({
get() {
if (!model.value || model.value?.length <= 5) return model.value;
return dateToTime(model.value);
},
set(value) {
if (value == model.value) return;
let time = value;
if (time) {
if (time?.length > 5) time = dateToTime(time);
else {
if (time.length == 1 && parseInt(time) > 2) time = time.padStart(2, '0');
time = time.padEnd(5, '0');
if (!time.includes(':'))
time = time.substring(0, 2) + ':' + time.substring(3, 5);
}
if (!props.timeOnly) {
const [hh, mm] = time.split(':');
const date = new Date(model.value ? model.value : initialDate.value);
date.setHours(hh, mm, 0);
time = date?.toISOString();
}
}
model.value = time;
},
});
function dateToTime(newDate) {
return date.formatDate(new Date(newDate), dateFormat);
}
</script> </script>
<template> <template>
<div @mouseover="hover = true" @mouseleave="hover = false">
<QInput <QInput
ref="vnInputTimeRef"
class="vn-input-time" class="vn-input-time"
mask="##:##" readonly
placeholder="--:--" :model-value="formatTime(value)"
v-model="formattedTime"
v-bind="{ ...$attrs, ...styleAttrs }" v-bind="{ ...$attrs, ...styleAttrs }"
:class="{ required: isRequired }" @click="isPopupOpen = true"
style="min-width: 100px"
:rules="mixinRules"
@click="isPopupOpen = false"
type="time"
hide-bottom-space
> >
<template #append> <template #append>
<QIcon <QIcon name="Schedule" class="cursor-pointer">
name="close" <QPopupProxy
size="xs" v-model="isPopupOpen"
v-if=" cover
($attrs.clearable == undefined || $attrs.clearable) &&
hover &&
model &&
!$attrs.disable
"
@click="
vnInputTimeRef.focus();
model = null;
isPopupOpen = false;
"
/>
<QIcon
name="Schedule"
class="cursor-pointer"
@click="isPopupOpen = !isPopupOpen"
:title="t('Open time')"
/>
</template>
<QMenu
v-if="$q.screen.gt.xs"
transition-show="scale" transition-show="scale"
transition-hide="scale" transition-hide="scale"
v-model="isPopupOpen" :no-parent-event="props.readonly"
anchor="bottom left"
self="top start"
:no-focus="true"
:no-parent-event="true"
> >
<VnTime v-model="formattedTime" /> <QTime
</QMenu> :format24h="false"
<QDialog v-else v-model="isPopupOpen"> :model-value="formatTime(value)"
<VnTime v-model="formattedTime" /> @update:model-value="onDateUpdate"
</QDialog> >
</QInput> <div class="row items-center justify-end q-gutter-sm">
<QBtn
:label="t('Cancel')"
color="primary"
flat
v-close-popup
/>
<QBtn
label="Ok"
color="primary"
flat
@click="save"
v-close-popup
/>
</div> </div>
</QTime>
</QPopupProxy>
</QIcon>
</template> </template>
</QInput>
</template>
<style lang="scss"> <style lang="scss">
.vn-input-time.q-field--standard.q-field--readonly .q-field__control:before { .vn-input-time.q-field--standard.q-field--readonly .q-field__control:before {
border-bottom-style: solid; border-bottom-style: solid;
@ -134,12 +119,8 @@ function dateToTime(newDate) {
border-style: solid; border-style: solid;
} }
</style> </style>
<style lang="scss" scoped>
:deep(input[type='time']::-webkit-calendar-picker-indicator) {
display: none;
}
</style>
<i18n> <i18n>
es: es:
Open time: Abrir tiempo Cancel: Cancelar
</i18n> </i18n>

View File

@ -1,94 +1,122 @@
<script setup> <script setup>
import { ref, toRefs, computed, watch, onMounted } from 'vue';
import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue'; import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import VnSelectDialog from 'components/common/VnSelectDialog.vue'; import VnSelectDialog from 'components/common/VnSelectDialog.vue';
import FetchData from 'components/FetchData.vue';
const emit = defineEmits(['update:modelValue', 'update:options']);
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import { useAttrs } from 'vue';
import { useRequired } from 'src/composables/useRequired';
const { t } = useI18n(); const { t } = useI18n();
const emit = defineEmits(['update:model-value', 'update:options']); const postcodesOptions = ref([]);
const $attrs = useAttrs(); const postcodesRef = ref(null);
const { isRequired, requiredFieldRule } = useRequired($attrs);
const props = defineProps({ const $props = defineProps({
location: { modelValue: {
type: Object, type: [String, Number, Object],
default: null, default: null,
}, },
options: {
type: Array,
default: () => [],
},
optionLabel: {
type: String,
default: '',
},
optionValue: {
type: String,
default: '',
},
filterOptions: {
type: Array,
default: () => [],
},
isClearable: {
type: Boolean,
default: true,
},
defaultFilter: {
type: Boolean,
default: true,
},
}); });
const mixinRules = [requiredFieldRule]; const { options } = toRefs($props);
const locationProperties = [ const myOptions = ref([]);
'postcode', const myOptionsOriginal = ref([]);
(obj) =>
obj.city
? `${obj.city}${obj.province?.name ? `(${obj.province.name})` : ''}`
: null,
(obj) => obj.country?.name,
];
const formatLocation = (obj, properties) => { const value = computed({
const parts = properties.map((prop) => { get() {
if (typeof prop === 'string') { return $props.modelValue;
return obj[prop]; },
} else if (typeof prop === 'function') { set(value) {
return prop(obj); emit(
} 'update:modelValue',
return null; postcodesOptions.value.find((p) => p.code === value)
);
},
}); });
const filteredParts = parts.filter( onMounted(() => {
(part) => part !== null && part !== undefined && part !== '' locationFilter($props.modelValue);
); });
return filteredParts.join(', '); function setOptions(data) {
}; myOptions.value = JSON.parse(JSON.stringify(data));
myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
}
setOptions(options.value);
const modelValue = ref( watch(options, (newValue) => {
props.location ? formatLocation(props.location, locationProperties) : null setOptions(newValue);
); });
function showLabel(data) { function showLabel(data) {
const dataProperties = [ return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
'code',
(obj) => (obj.town ? `${obj.town}(${obj.province})` : null),
'country',
];
return formatLocation(data, dataProperties);
} }
const handleModelValue = (data) => { function locationFilter(search = '') {
emit('update:model-value', data); if (
}; search &&
(search.includes('undefined') || search.startsWith(`${$props.modelValue} - `))
)
return;
let where = { search };
postcodesRef.value.fetch({ filter: { where }, limit: 30 });
}
function handleFetch(data) {
postcodesOptions.value = data;
}
function onDataSaved(newPostcode) {
postcodesOptions.value.push(newPostcode);
value.value = newPostcode.code;
}
</script> </script>
<template> <template>
<VnSelectDialog <FetchData
v-model="modelValue" ref="postcodesRef"
option-filter-value="search"
:option-label="
(opt) => (typeof modelValue === 'string' ? modelValue : showLabel(opt))
"
url="Postcodes/filter" url="Postcodes/filter"
@update:model-value="handleModelValue" @on-fetch="(data) => handleFetch(data)"
:use-like="false" />
<VnSelectDialog
v-if="postcodesRef"
:option-label="(opt) => showLabel(opt) ?? 'code'"
:option-value="(opt) => opt.code"
v-model="value"
:options="postcodesOptions"
:label="t('Location')" :label="t('Location')"
:placeholder="t('search_by_postalcode')" :placeholder="t('search_by_postalcode')"
@input-value="locationFilter"
:default-filter="false"
:input-debounce="300" :input-debounce="300"
:class="{ required: isRequired }" :class="{ required: $attrs.required }"
v-bind="$attrs" v-bind="$attrs"
clearable clearable
:emit-value="false"
:tooltip="t('Create new location')"
:rules="mixinRules"
:lazy-rules="true"
> >
<template #form> <template #form>
<CreateNewPostcode <CreateNewPostcode
@on-data-saved=" @on-data-saved="onDataSaved"
(newValue) => {
modelValue = newValue;
emit('update:model-value', newValue);
}
"
/> />
</template> </template>
<template #option="{ itemProps, opt }"> <template #option="{ itemProps, opt }">
@ -112,9 +140,7 @@ const handleModelValue = (data) => {
<i18n> <i18n>
en: en:
search_by_postalcode: Search by postalcode, town, province or country search_by_postalcode: Search by postalcode, town, province or country
Create new location: Create new location
es: es:
Location: Ubicación Location: Ubicación
Create new location: Crear nueva ubicación
search_by_postalcode: Buscar por código postal, ciudad o país search_by_postalcode: Buscar por código postal, ciudad o país
</i18n> </i18n>

View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import { ref, onUnmounted, watch } from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router'; import { useRoute } from 'vue-router';
import axios from 'axios'; import axios from 'axios';
import { date } from 'quasar'; import { date } from 'quasar';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
@ -14,13 +14,11 @@ import VnJsonValue from '../common/VnJsonValue.vue';
import FetchData from '../FetchData.vue'; import FetchData from '../FetchData.vue';
import VnSelect from './VnSelect.vue'; import VnSelect from './VnSelect.vue';
import VnUserLink from '../ui/VnUserLink.vue'; import VnUserLink from '../ui/VnUserLink.vue';
import VnPaginate from '../ui/VnPaginate.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const validationsStore = useValidator(); const validationsStore = useValidator();
const { models } = validationsStore; const { models } = validationsStore;
const route = useRoute(); const route = useRoute();
const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
model: { model: {
@ -51,7 +49,6 @@ const filter = {
'changedModelId', 'changedModelId',
'changedModelValue', 'changedModelValue',
'description', 'description',
'summaryId',
], ],
include: [ include: [
{ {
@ -67,10 +64,9 @@ const filter = {
}, },
}, },
], ],
where: { and: [{ originFk: route.params.id }] },
}; };
const paginate = ref(); const workers = ref();
const actions = ref(); const actions = ref();
const changeInput = ref(); const changeInput = ref();
const searchInput = ref(); const searchInput = ref();
@ -216,7 +212,7 @@ function getLogTree(data) {
} }
nLogs++; nLogs++;
modelLog.logs.push(log); modelLog.logs.push(log);
modelLog.summaryId = modelLog.logs[0].summaryId;
// Changes // Changes
const notDelete = log.action != 'delete'; const notDelete = log.action != 'delete';
const olds = (notDelete ? log.oldInstance : null) || {}; const olds = (notDelete ? log.oldInstance : null) || {};
@ -237,7 +233,9 @@ async function openPointRecord(id, modelLog) {
const locale = validations[modelLog.model]?.locale || {}; const locale = validations[modelLog.model]?.locale || {};
pointRecord.value = parseProps(propNames, locale, data); pointRecord.value = parseProps(propNames, locale, data);
} }
async function setLogTree(data) { async function setLogTree() {
filter.where = { and: [{ originFk: route.params.id }] };
const { data } = await getLogs(filter);
logTree.value = getLogTree(data); logTree.value = getLogTree(data);
} }
@ -266,7 +264,15 @@ async function applyFilter() {
filter.where.and.push(selectedFilters.value); filter.where.and.push(selectedFilters.value);
} }
paginate.value.fetch(filter); const { data } = await getLogs(filter);
logTree.value = getLogTree(data);
}
async function getLogs(filter) {
return axios.get(props.url ?? `${props.model}Logs`, {
params: { filter: JSON.stringify(filter) },
});
} }
function setDate(type) { function setDate(type) {
@ -369,46 +375,33 @@ async function clearFilter() {
await applyFilter(); await applyFilter();
} }
onUnmounted(() => { setLogTree();
stateStore.rightDrawer = false;
});
watch(
() => router.currentRoute.value.params.id,
() => {
applyFilter();
}
);
</script> </script>
<template> <template>
<FetchData
:url="`${props.model}Logs/${route.params.id}/editors`"
:filter="{
fields: ['id', 'nickname', 'name', 'image'],
order: 'nickname',
limit: 30,
}"
@on-fetch="(data) => (workers = data)"
auto-load
/>
<FetchData <FetchData
:url="`${props.model}Logs/${route.params.id}/models`" :url="`${props.model}Logs/${route.params.id}/models`"
:filter="{ order: ['changedModel'] }" :filter="{ order: ['changedModel'] }"
@on-fetch=" @on-fetch="
(data) => (data) =>
(actions = data.map((item) => { (actions = data.map((item) => {
const changedModel = item.changedModel;
return { return {
locale: useCapitalize( locale: useCapitalize(validations[item.changedModel].locale.name),
validations[changedModel]?.locale?.name ?? changedModel value: item.changedModel,
),
value: changedModel,
}; };
})) }))
" "
auto-load auto-load
/> />
<VnPaginate
ref="paginate"
:data-key="`${model}Log`"
:url="`${model}Logs`"
:filter="filter"
:skeleton="false"
auto-load
@on-fetch="setLogTree"
search-url="logs"
>
<template #body>
<div <div
class="column items-center logs origin-log q-mt-md" class="column items-center logs origin-log q-mt-md"
v-for="(originLog, originLogIndex) in logTree" v-for="(originLog, originLogIndex) in logTree"
@ -456,29 +449,22 @@ watch(
size="md" size="md"
class="model-name q-mr-xs text-white" class="model-name q-mr-xs text-white"
v-if=" v-if="
!( !(modelLog.changedModel && modelLog.changedModelId) &&
modelLog.changedModel && modelLog.model
modelLog.changedModelId
) && modelLog.model
" "
:style="{ :style="{
backgroundColor: useColor(modelLog.model), backgroundColor: useColor(modelLog.model),
}" }"
:title="`${modelLog.model} #${modelLog.id}`" :title="modelLog.model"
> >
{{ t(modelLog.modelI18n) }} {{ t(modelLog.modelI18n) }}
</QChip> </QChip>
<span class="model-id" v-if="modelLog.id"
<span >#{{ modelLog.id }}</span
class="model-id q-mr-xs" >
v-if="modelLog.summaryId" <span class="model-value" :title="modelLog.showValue">
v-text="`#${modelLog.summaryId}`" {{ modelLog.showValue }}
/> </span>
<span
class="model-value"
:title="modelLog.showValue"
v-text="modelLog.showValue"
/>
<QBtn <QBtn
flat flat
round round
@ -533,9 +519,7 @@ watch(
> >
{{ modelLog.modelI18n }} {{ modelLog.modelI18n }}
<span v-if="modelLog.id" <span v-if="modelLog.id"
>#{{ >#{{ modelLog.id }}</span
modelLog.id
}}</span
> >
</div> </div>
<QCardSection <QCardSection
@ -550,18 +534,12 @@ watch(
> >
<span <span
class="json-field q-mr-xs text-grey" class="json-field q-mr-xs text-grey"
:title=" :title="value.name"
value.name
"
> >
{{ {{ value.nameI18n }}:
value.nameI18n
}}:
</span> </span>
<VnJsonValue <VnJsonValue
:value=" :value="value.val.val"
value.val.val
"
/> />
</QItem> </QItem>
</QCardSection> </QCardSection>
@ -573,11 +551,7 @@ watch(
:class="actionsClass[log.action]" :class="actionsClass[log.action]"
:name="actionsIcon[log.action]" :name="actionsIcon[log.action]"
:title=" :title="
t( t(`actions.${actionsText[log.action]}`)
`actions.${
actionsText[log.action]
}`
)
" "
/> />
</div> </div>
@ -597,27 +571,17 @@ watch(
@click="log.expand = !log.expand" @click="log.expand = !log.expand"
/> />
<span v-if="log.props.length" class="attributes"> <span v-if="log.props.length" class="attributes">
<span <span v-if="!log.expand" class="q-pa-none text-grey">
v-if="!log.expand"
class="q-pa-none text-grey"
>
<span <span
v-for="(prop, propIndex) in log.props" v-for="(prop, propIndex) in log.props"
:key="propIndex" :key="propIndex"
class="basic-json" class="basic-json"
> >
<span <span class="json-field" :title="prop.name">
class="json-field"
:title="prop.name"
>
{{ prop.nameI18n }}: {{ prop.nameI18n }}:
</span> </span>
<VnJsonValue :value="prop.val.val" /> <VnJsonValue :value="prop.val.val" />
<span <span v-if="propIndex < log.props.length - 1"
v-if="
propIndex <
log.props.length - 1
"
>,&nbsp; >,&nbsp;
</span> </span>
</span> </span>
@ -627,44 +591,28 @@ watch(
class="expanded-json column q-pa-none" class="expanded-json column q-pa-none"
> >
<div <div
v-for="( v-for="(prop, prop2Index) in log.props"
prop, prop2Index
) in log.props"
:key="prop2Index" :key="prop2Index"
class="q-pa-none text-grey" class="q-pa-none text-grey"
> >
<span <span class="json-field" :title="prop.name">
class="json-field"
:title="prop.name"
>
{{ prop.nameI18n }}: {{ prop.nameI18n }}:
</span> </span>
<VnJsonValue :value="prop.val.val" /> <VnJsonValue :value="prop.val.val" />
<span <span v-if="prop.val.id" class="id-value">
v-if="prop.val.id"
class="id-value"
>
#{{ prop.val.id }} #{{ prop.val.id }}
</span> </span>
<span v-if="log.action == 'update'"> <span v-if="log.action == 'update'">
<VnJsonValue <VnJsonValue :value="prop.old.val" />
:value="prop.old.val" <span v-if="prop.old.id" class="id-value">
/>
<span
v-if="prop.old.id"
class="id-value"
>
#{{ prop.old.id }} #{{ prop.old.id }}
</span> </span>
</span> </span>
</div> </div>
</span> </span>
</span> </span>
<span <span v-if="!log.props.length" class="description">
v-if="!log.props.length"
class="description"
>
{{ log.description }} {{ log.description }}
</span> </span>
</QCardSection> </QCardSection>
@ -674,9 +622,23 @@ watch(
</QList> </QList>
</div> </div>
</div> </div>
</template> <Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">
</VnPaginate> <div class="row q-gutter-x-sm">
<Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()"> <QBtn
flat
@click.stop="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
<QDrawer v-model="stateStore.rightDrawer" show-if-above side="right" :width="300">
<QScrollArea class="fit text-grey-8">
<QList dense> <QList dense>
<QSeparator /> <QSeparator />
<QItem class="q-mt-sm"> <QItem class="q-mt-sm">
@ -724,21 +686,25 @@ watch(
</QOptionGroup> </QOptionGroup>
</QItem> </QItem>
<QItem class="q-mt-sm"> <QItem class="q-mt-sm">
<QItemSection v-if="userRadio !== null"> <QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="workers && userRadio !== null">
<VnSelect <VnSelect
class="full-width" class="full-width"
:label="t('globals.user')" :label="t('globals.user')"
v-model="userSelect" v-model="userSelect"
option-label="name" option-label="name"
option-value="id" option-value="id"
:url="`${model}Logs/${$route.params.id}/editors`" :options="workers"
:fields="['id', 'nickname', 'name', 'image']"
sort-by="nickname"
@update:model-value="selectFilter('userSelect')" @update:model-value="selectFilter('userSelect')"
hide-selected hide-selected
> >
<template #option="{ opt, itemProps }"> <template #option="{ opt, itemProps }">
<QItem v-bind="itemProps" class="q-pa-xs row items-center"> <QItem
v-bind="itemProps"
class="q-pa-xs row items-center"
>
<QItemSection class="col-3 items-center"> <QItemSection class="col-3 items-center">
<VnAvatar :worker-id="opt.id" /> <VnAvatar :worker-id="opt.id" />
</QItemSection> </QItemSection>
@ -808,7 +774,8 @@ watch(
/> />
</QItem> </QItem>
</QList> </QList>
</Teleport> </QScrollArea>
</QDrawer>
<QDialog v-model="dateFromDialog"> <QDialog v-model="dateFromDialog">
<QDate <QDate
:years-in-month-view="false" :years-in-month-view="false"

View File

@ -1,23 +0,0 @@
<script setup>
defineProps({
title: { type: String, default: null },
content: { type: [String, Number], default: null },
});
</script>
<template>
<QPopupProxy>
<QCard>
<slot name="title">
<div
class="header q-px-sm q-py-xs q-ma-none text-white text-bold bg-primary"
v-text="title"
/>
</slot>
<slot name="content">
<QCardSection class="change-detail q-pa-sm">
{{ content }}
</QCardSection>
</slot>
</QCard>
</QPopupProxy>
</template>

View File

@ -1,85 +0,0 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { computed, ref } from 'vue';
const { t } = useI18n();
const $props = defineProps({
progress: {
type: Number, //Progress value (1.0 > x > 0.0)
required: true,
},
cancelled: {
type: Boolean,
required: false,
default: false,
},
});
const emit = defineEmits(['cancel', 'close']);
const dialogRef = ref(null);
const showDialog = defineModel('showDialog', {
type: Boolean,
default: false,
});
const _progress = computed(() => $props.progress);
const progressLabel = computed(() => `${Math.round($props.progress * 100)}%`);
</script>
<template>
<QDialog ref="dialogRef" v-model="showDialog" @hide="emit('close')">
<QCard class="full-width dialog">
<QCardSection class="row">
<span class="text-h6">{{ t('Progress') }}</span>
<QSpace />
<QBtn icon="close" flat round dense v-close-popup />
</QCardSection>
<QCardSection>
<div class="column">
<span>{{ t('Total progress') }}:</span>
<QLinearProgress
size="30px"
:value="_progress"
color="primary"
stripe
class="q-mt-sm q-mb-md"
>
<div class="absolute-full flex flex-center">
<QBadge
v-if="cancelled"
text-color="white"
color="negative"
:label="t('Cancelled')"
/>
<span v-else class="text-white text-subtitle1">
{{ progressLabel }}
</span>
</div>
</QLinearProgress>
<slot />
</div>
</QCardSection>
<QCardActions align="right">
<QBtn
v-if="!cancelled && progress < 1"
type="button"
flat
class="text-primary"
v-close-popup
>
{{ t('globals.cancel') }}
</QBtn>
</QCardActions>
</QCard>
</QDialog>
</template>
<i18n>
es:
Progress: Progreso
Total progress: Progreso total
Cancelled: Cancelado
</i18n>

View File

@ -1,13 +0,0 @@
<script setup>
const model = defineModel({ type: Boolean, required: true });
</script>
<template>
<QRadio
v-model="model"
v-bind="$attrs"
dense
:dark="true"
class="q-mr-sm"
size="xs"
/>
</template>

View File

@ -1,14 +1,10 @@
<script setup> <script setup>
import { ref, toRefs, computed, watch, onMounted, useAttrs } from 'vue'; import { ref, toRefs, computed, watch } from 'vue';
import { onMounted } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useArrayData } from 'src/composables/useArrayData'; import FetchData from 'src/components/FetchData.vue';
import { useRequired } from 'src/composables/useRequired'; const emit = defineEmits(['update:modelValue', 'update:options']);
import dataByOrder from 'src/utils/dataByOrder';
const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
const $attrs = useAttrs();
const { t } = useI18n();
const { isRequired, requiredFieldRule } = useRequired($attrs);
const $props = defineProps({ const $props = defineProps({
modelValue: { modelValue: {
type: [String, Number, Object], type: [String, Number, Object],
@ -20,32 +16,24 @@ const $props = defineProps({
}, },
optionLabel: { optionLabel: {
type: [String], type: [String],
default: 'name', default: '',
}, },
optionValue: { optionValue: {
type: String, type: String,
default: 'id', default: '',
}, },
optionFilter: { optionFilter: {
type: String, type: String,
default: null, default: null,
}, },
optionFilterValue: {
type: String,
default: null,
},
url: { url: {
type: String, type: String,
default: null, default: '',
}, },
filterOptions: { filterOptions: {
type: [Array], type: [Array],
default: () => [], default: () => [],
}, },
exprBuilder: {
type: Function,
default: null,
},
isClearable: { isClearable: {
type: Boolean, type: Boolean,
default: true, default: true,
@ -58,10 +46,6 @@ const $props = defineProps({
type: Array, type: Array,
default: null, default: null,
}, },
include: {
type: [Object, Array],
default: null,
},
where: { where: {
type: Object, type: Object,
default: null, default: null,
@ -74,89 +58,37 @@ const $props = defineProps({
type: [Number, String], type: [Number, String],
default: '30', default: '30',
}, },
focusOnMount: {
type: Boolean,
default: false,
},
useLike: {
type: Boolean,
default: true,
},
params: {
type: Object,
default: null,
},
noOne: {
type: Boolean,
default: false,
},
dataKey: {
type: String,
default: null,
},
}); });
const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])]; const { t } = useI18n();
const { optionLabel, optionValue, optionFilter, optionFilterValue, options, modelValue } = const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
toRefs($props);
const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($props);
const myOptions = ref([]); const myOptions = ref([]);
const myOptionsOriginal = ref([]); const myOptionsOriginal = ref([]);
const vnSelectRef = ref(); const vnSelectRef = ref();
const lastVal = ref(); const dataRef = ref();
const noOneText = t('globals.noOne');
const noOneOpt = ref({
[optionValue.value]: false,
[optionLabel.value]: noOneText,
});
const isLoading = ref(false);
const useURL = computed(() => $props.url);
const value = computed({ const value = computed({
get() { get() {
return $props.modelValue; return $props.modelValue;
}, },
set(value) { set(value) {
setOptions(myOptionsOriginal.value);
emit('update:modelValue', value); emit('update:modelValue', value);
}, },
}); });
watch(options, (newValue) => {
setOptions(newValue);
});
watch(modelValue, async (newValue) => {
if (!myOptions?.value?.some((option) => option[optionValue.value] == newValue))
await fetchFilter(newValue);
if ($props.noOne) myOptions.value.unshift(noOneOpt.value);
});
onMounted(() => {
setOptions(options.value);
if (useURL.value && $props.modelValue && !findKeyInOptions())
fetchFilter($props.modelValue);
if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
});
const arrayDataKey =
$props.dataKey ?? ($props.url?.length > 0 ? $props.url : $attrs.name ?? $attrs.label);
const arrayData = useArrayData(arrayDataKey, { url: $props.url, searchUrl: false });
function findKeyInOptions() {
if (!$props.options) return;
return filter($props.modelValue, $props.options)?.length;
}
function setOptions(data) { function setOptions(data) {
data = dataByOrder(data, $props.sortBy);
myOptions.value = JSON.parse(JSON.stringify(data)); myOptions.value = JSON.parse(JSON.stringify(data));
myOptionsOriginal.value = JSON.parse(JSON.stringify(data)); myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
emit('update:options', data);
} }
onMounted(() => {
setOptions(options.value);
if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
});
function filter(val, options) { function filter(val, options) {
const search = val?.toString()?.toLowerCase(); const search = val.toString().toLowerCase();
if (!search) return options; if (!search) return options;
@ -168,8 +100,7 @@ function filter(val, options) {
}); });
} }
if (!row) return; const id = row.id;
const id = row[$props.optionValue];
const optionLabel = String(row[$props.optionLabel]).toLowerCase(); const optionLabel = String(row[$props.optionLabel]).toLowerCase();
return id == search || optionLabel.includes(search); return id == search || optionLabel.includes(search);
@ -177,55 +108,25 @@ function filter(val, options) {
} }
async function fetchFilter(val) { async function fetchFilter(val) {
if (!$props.url) return; if (!$props.url || !dataRef.value) return;
const { fields, include, sortBy, limit } = $props; const { fields, sortBy, limit } = $props;
const key = let key = optionLabel.value;
optionFilterValue.value ??
(new RegExp(/\d/g).test(val)
? optionValue.value
: optionFilter.value ?? optionLabel.value);
let defaultWhere = {}; if (new RegExp(/\d/g).test(val)) key = optionFilter.value ?? optionValue.value;
if ($props.filterOptions.length) {
defaultWhere = $props.filterOptions.reduce((obj, prop) => {
if (!obj.or) obj.or = [];
obj.or.push({ [prop]: getVal(val) });
return obj;
}, {});
} else defaultWhere = { [key]: getVal(val) };
const where = { ...(val ? defaultWhere : {}), ...$props.where };
$props.exprBuilder && Object.assign(where, $props.exprBuilder(key, val));
const fetchOptions = { where, include, limit };
if (fields) fetchOptions.fields = fields;
if (sortBy) fetchOptions.order = sortBy;
arrayData.reset(['skip', 'filter.skip', 'page']);
const { data } = await arrayData.applyFilter({ filter: fetchOptions }); const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
setOptions(data); return dataRef.value.fetch({ fields, where, order: sortBy, limit });
return data;
} }
async function filterHandler(val, update) { async function filterHandler(val, update) {
if (!val && lastVal.value === val) {
lastVal.value = val;
return update();
}
lastVal.value = val;
let newOptions;
if (!$props.defaultFilter) return update(); if (!$props.defaultFilter) return update();
if ( let newOptions;
$props.url && if ($props.url) {
($props.limit || (!$props.limit && Object.keys(myOptions.value).length === 0))
) {
newOptions = await fetchFilter(val); newOptions = await fetchFilter(val);
} else newOptions = filter(val, myOptionsOriginal.value); } else newOptions = filter(val, myOptionsOriginal.value);
update( update(
() => { () => {
if ($props.noOne && noOneText.toLowerCase().includes(val.toLowerCase()))
newOptions.unshift(noOneOpt.value);
myOptions.value = newOptions; myOptions.value = newOptions;
}, },
(ref) => { (ref) => {
@ -237,86 +138,48 @@ async function filterHandler(val, update) {
); );
} }
function nullishToTrue(value) { watch(options, (newValue) => {
return value ?? true; setOptions(newValue);
} });
const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val); watch(modelValue, (newValue) => {
if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
async function onScroll({ to, direction, from, index }) { fetchFilter(newValue);
const lastIndex = myOptions.value.length - 1; });
if (from === 0 && index === 0) return;
if (!useURL.value && !$props.fetchRef) return;
if (direction === 'decrease') return;
if (to === lastIndex && arrayData.store.hasMoreData && !isLoading.value) {
isLoading.value = true;
await arrayData.loadMore();
setOptions(arrayData.store.data);
vnSelectRef.value.scrollTo(lastIndex);
isLoading.value = false;
}
}
defineExpose({ opts: myOptions });
function handleKeyDown(event) {
if (event.key === 'Tab') {
event.preventDefault();
const inputValue = vnSelectRef.value?.inputValue;
if (inputValue) {
const matchingOption = myOptions.value.find(
(option) =>
option[optionLabel.value].toLowerCase() === inputValue.toLowerCase()
);
if (matchingOption) {
emit('update:modelValue', matchingOption[optionValue.value]);
} else {
emit('update:modelValue', inputValue);
}
vnSelectRef.value?.hidePopup();
}
}
}
</script> </script>
<template> <template>
<FetchData
ref="dataRef"
:url="$props.url"
@on-fetch="(data) => setOptions(data)"
:where="where || { [optionValue]: value }"
:limit="limit"
:sort-by="sortBy"
:fields="fields"
/>
<QSelect <QSelect
v-model="value" v-model="value"
:options="myOptions" :options="myOptions"
:option-label="optionLabel" :option-label="optionLabel"
:option-value="optionValue" :option-value="optionValue"
v-bind="$attrs" v-bind="$attrs"
emit-value
map-options
use-input
@filter="filterHandler" @filter="filterHandler"
@keydown="handleKeyDown" hide-selected
:emit-value="nullishToTrue($attrs['emit-value'])" fill-input
:map-options="nullishToTrue($attrs['map-options'])"
:use-input="nullishToTrue($attrs['use-input'])"
:hide-selected="nullishToTrue($attrs['hide-selected'])"
:fill-input="nullishToTrue($attrs['fill-input'])"
ref="vnSelectRef" ref="vnSelectRef"
lazy-rules lazy-rules
:class="{ required: isRequired }" :class="{ required: $attrs.required }"
:rules="mixinRules" :rules="$attrs.required ? [requiredFieldRule] : null"
virtual-scroll-slice-size="options.length" virtual-scroll-slice-size="options.length"
hide-bottom-space
:input-debounce="useURL ? '300' : '0'"
:loading="isLoading"
@virtual-scroll="onScroll"
> >
<template v-if="isClearable" #append> <template v-if="isClearable" #append>
<QIcon <QIcon
v-show="value"
name="close" name="close"
@click.stop=" @click.stop="value = null"
() => {
value = null;
emit('remove');
}
"
class="cursor-pointer" class="cursor-pointer"
size="xs" size="xs"
/> />

View File

@ -1,39 +0,0 @@
<script setup>
import { ref, onBeforeMount, useAttrs } from 'vue';
import VnSelect from 'src/components/common/VnSelect.vue';
const $props = defineProps({
row: {
type: [Object],
default: null,
},
find: {
type: [String, Object],
default: null,
description: 'search in row to add default options',
},
});
const options = ref([]);
onBeforeMount(async () => {
const { url, optionValue, optionLabel } = useAttrs();
const findBy = $props.find ?? url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1);
if (!findBy || !$props.row) return;
// is object
if (typeof findBy == 'object') {
const { value, label } = findBy;
if (!$props.row[value] || !$props.row[label]) return;
return (options.value = [
{
[optionValue ?? 'id']: $props.row[value],
[optionLabel ?? 'name']: $props.row[label],
},
]);
}
// is string
if ($props.row[findBy]) options.value = [$props.row[findBy]];
});
</script>
<template>
<VnSelect v-bind="$attrs" :options="$attrs.options ?? options" />
</template>

View File

@ -1,21 +1,25 @@
<script setup> <script setup>
import { computed } from 'vue'; import { ref, computed } from 'vue';
import { useRole } from 'src/composables/useRole';
import { useAcl } from 'src/composables/useAcl';
import VnSelect from 'src/components/common/VnSelect.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import { useRole } from 'src/composables/useRole';
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const value = defineModel({ type: [String, Number, Object] });
const $props = defineProps({ const $props = defineProps({
modelValue: {
type: [String, Number, Object],
default: null,
},
options: {
type: Array,
default: () => [],
},
rolesAllowedToCreate: { rolesAllowedToCreate: {
type: Array, type: Array,
default: () => ['developer'], default: () => ['developer'],
}, },
acls: {
type: Array,
default: () => [],
},
actionIcon: { actionIcon: {
type: String, type: String,
default: 'add', default: 'add',
@ -27,23 +31,31 @@ const $props = defineProps({
}); });
const role = useRole(); const role = useRole();
const acl = useAcl(); const showForm = ref(false);
const value = computed({
get() {
return $props.modelValue;
},
set(value) {
emit('update:modelValue', value);
},
});
const isAllowedToCreate = computed(() => { const isAllowedToCreate = computed(() => {
if ($props.acls.length) return acl.hasAny($props.acls);
return role.hasAny($props.rolesAllowedToCreate); return role.hasAny($props.rolesAllowedToCreate);
}); });
const toggleForm = () => {
showForm.value = !showForm.value;
};
</script> </script>
<template> <template>
<VnSelect <VnSelect v-model="value" :options="options" v-bind="$attrs">
v-model="value"
v-bind="$attrs"
@update:model-value="(...args) => emit('update:modelValue', ...args)"
>
<template v-if="isAllowedToCreate" #append> <template v-if="isAllowedToCreate" #append>
<QIcon <QIcon
@click.stop.prevent="$refs.dialog.show()" @click.stop.prevent="toggleForm()"
:name="actionIcon" :name="actionIcon"
:size="actionIcon === 'add' ? 'xs' : 'sm'" :size="actionIcon === 'add' ? 'xs' : 'sm'"
:class="['default-icon', { '--add-icon': actionIcon === 'add' }]" :class="['default-icon', { '--add-icon': actionIcon === 'add' }]"
@ -53,7 +65,7 @@ const isAllowedToCreate = computed(() => {
> >
<QTooltip v-if="tooltip">{{ tooltip }}</QTooltip> <QTooltip v-if="tooltip">{{ tooltip }}</QTooltip>
</QIcon> </QIcon>
<QDialog ref="dialog" transition-show="scale" transition-hide="scale"> <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
<slot name="form" /> <slot name="form" />
</QDialog> </QDialog>
</template> </template>

View File

@ -1,52 +0,0 @@
<script setup>
import { onBeforeMount, ref, useAttrs } from 'vue';
import axios from 'axios';
import VnSelect from 'components/common/VnSelect.vue';
const { schema, table, column, translation, defaultOptions } = defineProps({
schema: {
type: String,
default: 'vn',
},
table: {
type: String,
required: true,
},
column: {
type: String,
required: true,
},
translation: {
type: Function,
default: null,
},
defaultOptions: {
type: Array,
default: () => [],
},
});
const $attrs = useAttrs();
const options = ref([]);
onBeforeMount(async () => {
options.value = [].concat(defaultOptions);
const { data } = await axios.get(`Applications/get-enum-values`, {
params: { schema, table, column },
});
for (const value of data)
options.value.push({
[$attrs['option-value'] ?? 'id']: value,
[$attrs['option-label'] ?? 'name']: translation ? translation(value) : value,
});
});
</script>
<template>
<VnSelect
v-bind="$attrs"
:options="options"
:key="options.length"
:input-debounce="0"
/>
</template>

View File

@ -86,7 +86,7 @@ async function send() {
</script> </script>
<template> <template>
<QDialog ref="dialogRef" data-cy="vnSmsDialog"> <QDialog ref="dialogRef">
<QCard class="q-pa-sm"> <QCard class="q-pa-sm">
<QCardSection class="row items-center q-pb-none"> <QCardSection class="row items-center q-pb-none">
<span class="text-h6 text-grey"> <span class="text-h6 text-grey">
@ -161,7 +161,6 @@ async function send() {
:loading="isLoading" :loading="isLoading"
color="primary" color="primary"
unelevated unelevated
data-cy="sendSmsBtn"
/> />
</QCardActions> </QCardActions>
</QCard> </QCard>
@ -185,7 +184,6 @@ en:
minAmount: 'A minimum amount of 50 (VAT excluded) is required for your order minAmount: 'A minimum amount of 50 (VAT excluded) is required for your order
{ orderId } of { shipped } to receive it without additional shipping costs.' { orderId } of { shipped } to receive it without additional shipping costs.'
orderChanges: 'Order {orderId} of { shipped }: { changes }' orderChanges: 'Order {orderId} of { shipped }: { changes }'
productNotAvailable: 'Verdnatura communicates: Your order {ticketFk} with reception date on {landed}. {notAvailables} not available. Sorry for the inconvenience.'
en: English en: English
es: Spanish es: Spanish
fr: French fr: French
@ -205,7 +203,6 @@ es:
Te recomendamos amplíes para no generar costes extra, provocarán un incremento de tu tarifa. Te recomendamos amplíes para no generar costes extra, provocarán un incremento de tu tarifa.
¡Un saludo!' ¡Un saludo!'
orderChanges: 'Pedido {orderId} con llegada estimada día { landing }: { changes }' orderChanges: 'Pedido {orderId} con llegada estimada día { landing }: { changes }'
productNotAvailable: 'Verdnatura le comunica: Pedido {ticketFk} con fecha de recepción {landed}. {notAvailables} no disponible/s. Disculpe las molestias.'
en: Inglés en: Inglés
es: Español es: Español
fr: Francés fr: Francés
@ -225,7 +222,6 @@ fr:
Montant minimum nécessaire de 50 euros pour recevoir la commande { orderId } livraison { landing }. Montant minimum nécessaire de 50 euros pour recevoir la commande { orderId } livraison { landing }.
Merci.' Merci.'
orderChanges: 'Commande {orderId} livraison {landing} indisponible/s. Désolés pour le dérangement.' orderChanges: 'Commande {orderId} livraison {landing} indisponible/s. Désolés pour le dérangement.'
productNotAvailable: 'Verdnatura communique : Votre commande {ticketFk} avec date de réception le {landed}. {notAvailables} non disponible. Nous sommes désolés pour les inconvénients.'
en: Anglais en: Anglais
es: Espagnol es: Espagnol
fr: Français fr: Français
@ -244,7 +240,6 @@ pt:
minAmount: 'É necessário um valor mínimo de 50 (sem IVA) em seu pedido minAmount: 'É necessário um valor mínimo de 50 (sem IVA) em seu pedido
{ orderId } do dia { landing } para recebê-lo sem custos de envio adicionais.' { orderId } do dia { landing } para recebê-lo sem custos de envio adicionais.'
orderChanges: 'Pedido { orderId } com chegada dia { landing }: { changes }' orderChanges: 'Pedido { orderId } com chegada dia { landing }: { changes }'
productNotAvailable: 'Verdnatura comunica: Seu pedido {ticketFk} com data de recepção em {landed}. {notAvailables} não disponível/eis. Desculpe pelo transtorno.'
en: Inglês en: Inglês
es: Espanhol es: Espanhol
fr: Francês fr: Francês

View File

@ -1,16 +0,0 @@
<script setup>
const model = defineModel({ type: [String, Number], required: true });
</script>
<template>
<QTime v-model="model" now-btn mask="HH:mm" />
</template>
<style lang="scss" scoped>
.q-time {
width: 230px;
min-width: unset;
:deep(.q-time__header) {
min-height: unset;
height: 50px;
}
}
</style>

View File

@ -1,16 +1,16 @@
<script setup> <script setup>
defineProps({ const $props = defineProps({
url: { type: String, default: null }, url: { type: String, default: null },
text: { type: String, default: null }, text: { type: String, default: null },
icon: { type: String, default: 'open_in_new' }, icon: { type: String, default: 'open_in_new' },
}); });
</script> </script>
<template> <template>
<div :class="$q.screen.gt.md ? 'q-pb-lg' : 'q-pb-md'"> <div class="titleBox">
<div class="header-link" :style="{ cursor: url ? 'pointer' : 'default' }"> <div class="header-link">
<a :href="url" :class="url ? 'link' : 'color-vn-text'" v-bind="$attrs"> <a :href="$props.url" :class="$props.url ? 'link' : 'color-vn-text'">
{{ text }} {{ $props.text }}
<QIcon v-if="url" :name="icon" /> <QIcon v-if="url" :name="$props.icon" />
</a> </a>
</div> </div>
</div> </div>
@ -19,4 +19,7 @@ defineProps({
a { a {
font-size: large; font-size: large;
} }
.titleBox {
padding-bottom: 2%;
}
</style> </style>

View File

@ -1,37 +0,0 @@
<script setup>
import { computed } from 'vue';
import { useWeekdayStore } from 'src/stores/useWeekdayStore';
const props = defineProps({
wdays: {
type: Array,
default: () => [],
},
});
const emit = defineEmits(['update:wdays']);
const weekdayStore = useWeekdayStore();
const selectedWDays = computed({
get: () => props.wdays,
set: (value) => emit('update:wdays', value),
});
const toggleDay = (index) => (selectedWDays.value[index] = !selectedWDays.value[index]);
</script>
<template>
<div class="q-gutter-x-sm" style="width: max-content">
<QBtn
v-for="(weekday, index) in weekdayStore.getLocalesMap"
:key="index"
:label="weekday.localeChar"
rounded
style="max-width: 36px"
:color="selectedWDays[weekday.index] ? 'primary' : ''"
@click="toggleDay(weekday.index)"
/>
</div>
</template>

View File

@ -5,7 +5,6 @@ import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
import { useRoute } from 'vue-router';
const $props = defineProps({ const $props = defineProps({
url: { url: {
@ -16,21 +15,21 @@ const $props = defineProps({
type: Object, type: Object,
default: null, default: null,
}, },
module: {
type: String,
required: true,
},
title: { title: {
type: String, type: String,
default: '', default: '',
}, },
subtitle: { subtitle: {
type: Number, type: Number,
default: null, default: 0,
}, },
dataKey: { dataKey: {
type: String, type: String,
default: null, default: '',
},
module: {
type: String,
default: null,
}, },
summary: { summary: {
type: Object, type: Object,
@ -39,38 +38,23 @@ const $props = defineProps({
}); });
const state = useState(); const state = useState();
const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const { viewSummary } = useSummaryDialog(); const { viewSummary } = useSummaryDialog();
let arrayData; const arrayData = useArrayData($props.dataKey || $props.module, {
let store;
let entity;
const isLoading = ref(false);
const isSameDataKey = computed(() => $props.dataKey === route.meta.moduleName);
const menuRef = ref();
defineExpose({ getData });
onBeforeMount(async () => {
arrayData = useArrayData($props.dataKey, {
url: $props.url, url: $props.url,
filter: $props.filter, filter: $props.filter,
skip: 0, skip: 0,
}); });
store = arrayData.store; const { store } = arrayData;
entity = computed(() => { const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
const data = (Array.isArray(store.data) ? store.data[0] : store.data) ?? {}; const isLoading = ref(false);
if (data) emit('onFetch', data);
return data;
});
// It enables to load data only once if the module is the same as the dataKey defineExpose({
if (!isSameDataKey.value || !route.params.id) await getData(); getData,
watch( });
() => [$props.url, $props.filter], onBeforeMount(async () => {
async () => { await getData();
if (!isSameDataKey.value) await getData(); watch($props, async () => await getData());
}
);
}); });
async function getData() { async function getData() {
@ -85,50 +69,14 @@ async function getData() {
isLoading.value = false; isLoading.value = false;
} }
} }
function getValueFromPath(path) {
if (!path) return;
const keys = path.toString().split('.');
let current = entity.value;
for (const key of keys) {
if (current[key] === undefined) return undefined;
else current = current[key];
}
return current;
}
const emit = defineEmits(['onFetch']); const emit = defineEmits(['onFetch']);
const iconModule = computed(() => route.matched[1].meta.icon);
const toModule = computed(() =>
route.matched[1].path.split('/').length > 2
? route.matched[1].redirect
: route.matched[1].children[0].redirect
);
</script> </script>
<template> <template>
<div class="descriptor"> <div class="descriptor">
<template v-if="entity && !isLoading"> <template v-if="entity && !isLoading">
<div class="header bg-primary q-pa-sm justify-between"> <div class="header bg-primary q-pa-sm justify-between">
<slot name="header-extra-action" <slot name="header-extra-action" />
><QBtn
round
flat
dense
size="md"
:icon="iconModule"
color="white"
class="link"
:to="$attrs['to-module'] ?? toModule"
>
<QTooltip>
{{ t('globals.goToModuleIndex') }}
</QTooltip>
</QBtn></slot
>
<QBtn <QBtn
@click.stop="viewSummary(entity.id, $props.summary)" @click.stop="viewSummary(entity.id, $props.summary)"
round round
@ -160,21 +108,20 @@ const toModule = computed(() =>
</QBtn> </QBtn>
</RouterLink> </RouterLink>
<QBtn <QBtn
v-if="$slots.menu"
color="white" color="white"
dense dense
flat flat
icon="more_vert" icon="more_vert"
round round
size="md" size="md"
data-cy="descriptor-more-opts" :class="{ invisible: !$slots.menu }"
> >
<QTooltip> <QTooltip>
{{ t('components.cardDescriptor.moreOptions') }} {{ t('components.cardDescriptor.moreOptions') }}
</QTooltip> </QTooltip>
<QMenu :ref="menuRef"> <QMenu>
<QList> <QList>
<slot name="menu" :entity="entity" :menu-ref="menuRef" /> <slot name="menu" :entity="entity" />
</QList> </QList>
</QMenu> </QMenu>
</QBtn> </QBtn>
@ -184,8 +131,8 @@ const toModule = computed(() =>
<QList dense> <QList dense>
<QItemLabel header class="ellipsis text-h5" :lines="1"> <QItemLabel header class="ellipsis text-h5" :lines="1">
<div class="title"> <div class="title">
<span v-if="$props.title" :title="getValueFromPath(title)"> <span v-if="$props.title" :title="$props.title">
{{ getValueFromPath(title) ?? $props.title }} {{ $props.title }}
</span> </span>
<slot v-else name="description" :entity="entity"> <slot v-else name="description" :entity="entity">
<span :title="entity.name"> <span :title="entity.name">
@ -196,7 +143,7 @@ const toModule = computed(() =>
</QItemLabel> </QItemLabel>
<QItem dense> <QItem dense>
<QItemLabel class="subtitle" caption> <QItemLabel class="subtitle" caption>
#{{ getValueFromPath(subtitle) ?? entity.id }} #{{ $props.subtitle ?? entity.id }}
</QItemLabel> </QItemLabel>
</QItem> </QItem>
</QList> </QList>
@ -288,7 +235,6 @@ const toModule = computed(() =>
width: 256px; width: 256px;
.header { .header {
display: flex; display: flex;
align-items: center;
} }
.icons { .icons {
margin: 0 10px; margin: 0 10px;

View File

@ -28,7 +28,7 @@ const toggleCardCheck = (item) => {
<div class="title text-primary text-weight-bold text-h5"> <div class="title text-primary text-weight-bold text-h5">
{{ $props.title }} {{ $props.title }}
</div> </div>
<QChip v-if="$props.id" class="q-chip-color" outline size="sm"> <QChip class="q-chip-color" outline size="sm">
{{ t('ID') }}: {{ $props.id }} {{ t('ID') }}: {{ $props.id }}
</QChip> </QChip>
</div> </div>

View File

@ -4,7 +4,6 @@ import { useRoute } from 'vue-router';
import SkeletonSummary from 'components/ui/SkeletonSummary.vue'; import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue'; import VnLv from 'src/components/ui/VnLv.vue';
import { useArrayData } from 'src/composables/useArrayData'; import { useArrayData } from 'src/composables/useArrayData';
import { isDialogOpened } from 'src/filters';
const props = defineProps({ const props = defineProps({
url: { url: {
@ -23,15 +22,11 @@ const props = defineProps({
type: String, type: String,
default: '', default: '',
}, },
moduleName: {
type: String,
default: null,
},
}); });
const emit = defineEmits(['onFetch']); const emit = defineEmits(['onFetch']);
const route = useRoute(); const route = useRoute();
const isSummary = ref(); const isSummary = ref();
const arrayData = useArrayData(props.dataKey, { const arrayData = useArrayData(props.dataKey || route.meta.moduleName, {
url: props.url, url: props.url,
filter: props.filter, filter: props.filter,
skip: 0, skip: 0,
@ -59,6 +54,13 @@ async function fetch() {
emit('onFetch', Array.isArray(data) ? data[0] : data); emit('onFetch', Array.isArray(data) ? data[0] : data);
isLoading.value = false; isLoading.value = false;
} }
const showRedirectToSummaryIcon = computed(() => {
const routeExists = route.matched.some(
(route) => route.name === `${route.meta.moduleName}Summary`
);
return !isSummary.value && route.meta.moduleName && routeExists;
});
</script> </script>
<template> <template>
@ -69,10 +71,10 @@ async function fetch() {
<div class="summaryHeader bg-primary q-pa-sm text-weight-bolder"> <div class="summaryHeader bg-primary q-pa-sm text-weight-bolder">
<slot name="header-left"> <slot name="header-left">
<router-link <router-link
v-if="isDialogOpened()" v-if="showRedirectToSummaryIcon"
class="header link" class="header link"
:to="{ :to="{
name: `${moduleName ?? route.meta.moduleName}Summary`, name: `${route.meta.moduleName}Summary`,
params: { id: entityId || entity.id }, params: { id: entityId || entity.id },
}" }"
> >
@ -83,7 +85,7 @@ async function fetch() {
<slot name="header" :entity="entity" dense> <slot name="header" :entity="entity" dense>
<VnLv :label="`${entity.id} -`" :value="entity.name" /> <VnLv :label="`${entity.id} -`" :value="entity.name" />
</slot> </slot>
<slot name="header-right" :entity="entity"> <slot name="header-right">
<span></span> <span></span>
</slot> </slot>
</div> </div>
@ -103,7 +105,6 @@ async function fetch() {
.cardSummary { .cardSummary {
width: 100%; width: 100%;
max-height: 70vh;
.summaryHeader { .summaryHeader {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
@ -149,9 +150,9 @@ async function fetch() {
margin-top: 2px; margin-top: 2px;
.label { .label {
color: var(--vn-label-color); color: var(--vn-label-color);
width: 9em; width: 8em;
overflow: hidden; overflow: hidden;
white-space: wrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-right: 10px; margin-right: 10px;
flex-grow: 0; flex-grow: 0;
@ -173,10 +174,15 @@ async function fetch() {
color: lighten($primary, 20%); color: lighten($primary, 20%);
} }
.q-checkbox { .q-checkbox {
display: flex;
margin-bottom: 9px;
& .q-checkbox__label { & .q-checkbox__label {
margin-left: 31px;
color: var(--vn-text-color); color: var(--vn-text-color);
} }
& .q-checkbox__inner { & .q-checkbox__inner {
position: absolute;
left: 0;
color: var(--vn-label-color); color: var(--vn-label-color);
} }
} }

View File

@ -2,6 +2,10 @@
import { computed } from 'vue'; import { computed } from 'vue';
const $props = defineProps({ const $props = defineProps({
maxLength: {
type: Number,
required: true,
},
item: { item: {
type: Object, type: Object,
required: true, required: true,

View File

@ -52,8 +52,8 @@ const containerClasses = computed(() => {
--calendar-border-current: #84d0e2 2px solid; --calendar-border-current: #84d0e2 2px solid;
--calendar-current-color-dark: #84d0e2; --calendar-current-color-dark: #84d0e2;
// Colores de fondo del calendario en dark mode // Colores de fondo del calendario en dark mode
--calendar-outside-background-dark: var(--vn-section-color); --calendar-outside-background-dark: #222;
--calendar-background-dark: var(--vn-section-color); --calendar-background-dark: #222;
} }
// Clases para modificar el color de fecha seleccionada en componente QCalendarMonth // Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
@ -70,26 +70,8 @@ const containerClasses = computed(() => {
text-transform: capitalize; text-transform: capitalize;
} }
.q-calendar-month__head--workweek,
.q-calendar-month__head--weekday,
// .q-calendar-month__workweek.q-past-day,
.q-calendar-month__week :nth-child(n+6):nth-child(-n+7) {
color: var(--vn-label-color);
}
.q-calendar-month__head--weekdays > div[aria-label='miércoles'] > span {
/* color: transparent; */
visibility: hidden;
// position: absolute;
}
.q-calendar-month__head--weekdays > div[aria-label='miércoles'] > span:after {
content: 'X';
visibility: visible;
left: 33%;
position: absolute;
}
.transparent-background { .transparent-background {
// --calendar-background-dark: transparent; --calendar-background-dark: transparent;
--calendar-background: transparent; --calendar-background: transparent;
--calendar-outside-background-dark: transparent; --calendar-outside-background-dark: transparent;
} }
@ -128,6 +110,11 @@ const containerClasses = computed(() => {
cursor: pointer; cursor: pointer;
} }
} }
.q-calendar-month__week--days > div:nth-child(6),
.q-calendar-month__week--days > div:nth-child(7) {
// Cambia el color de los días sábado y domingo
color: #777777;
}
.q-calendar-month__week--wrapper { .q-calendar-month__week--wrapper {
margin-bottom: 4px; margin-bottom: 4px;
@ -137,7 +124,6 @@ const containerClasses = computed(() => {
height: 32px; height: 32px;
display: flex; display: flex;
justify-content: center; justify-content: center;
color: var(--vn-label-color);
} }
.q-calendar__button--bordered { .q-calendar__button--bordered {
@ -161,7 +147,7 @@ const containerClasses = computed(() => {
.q-calendar-month__head--workweek, .q-calendar-month__head--workweek,
.q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis { .q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
text-transform: capitalize; text-transform: capitalize;
color: var(--vn-label-color); color: var(---color-font-secondary);
font-weight: bold; font-weight: bold;
font-size: 0.8rem; font-size: 0.8rem;
text-align: center; text-align: center;

View File

@ -1,14 +1,20 @@
<template> <template>
<div class="q-pa-md">
<div class="row q-gutter-md q-mb-md"> <div class="row q-gutter-md q-mb-md">
<QSkeleton type="QInput" class="col" square /> <QSkeleton type="QInput" square />
<QSkeleton type="QInput" class="col" square /> <QSkeleton type="QInput" square />
</div> </div>
<div class="row q-gutter-md q-mb-md"> <div class="row q-gutter-md q-mb-md">
<QSkeleton type="QInput" class="col" square /> <QSkeleton type="QInput" square />
<QSkeleton type="QInput" class="col" square /> <QSkeleton type="QInput" square />
</div> </div>
<div class="row q-gutter-md q-mb-md"> <div class="row q-gutter-md q-mb-md">
<QSkeleton type="QInput" class="col" square /> <QSkeleton type="QInput" square />
<QSkeleton type="QInput" class="col" square /> <QSkeleton type="QInput" square />
</div>
<div class="row q-gutter-md">
<QSkeleton type="QBtn" />
<QSkeleton type="QBtn" />
</div>
</div> </div>
</template> </template>

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