From 4df05b7522d3558c37788e77cafd58ba15da3117 Mon Sep 17 00:00:00 2001 From: Javier Segarra Date: Fri, 25 Oct 2024 13:41:06 +0200 Subject: [PATCH 01/16] feat: #8110 apply mixin in quasar components --- src/boot/mainShortcutMixin.js | 39 +++++++++++++++++++++++++++++++ src/boot/qformMixin.js | 43 ++++++++++++++++------------------- src/boot/quasar.js | 7 +++++- 3 files changed, 65 insertions(+), 24 deletions(-) create mode 100644 src/boot/mainShortcutMixin.js diff --git a/src/boot/mainShortcutMixin.js b/src/boot/mainShortcutMixin.js new file mode 100644 index 000000000..2f76ae858 --- /dev/null +++ b/src/boot/mainShortcutMixin.js @@ -0,0 +1,39 @@ +import routes from 'src/router/modules'; +import { useRouter } from 'vue-router'; + +let isNotified = false; + +export default { + created: function () { + console.error('mainShortcutMixin created'); + const router = useRouter(); + const keyBindingMap = routes + .filter((route) => route.meta.keyBinding) + .reduce((map, route) => { + map['Key' + route.meta.keyBinding.toUpperCase()] = route.path; + return map; + }, {}); + + const handleKeyDown = (event) => { + const { ctrlKey, altKey, code } = event; + + if (ctrlKey && altKey && keyBindingMap[code] && !isNotified) { + event.preventDefault(); + router.push(keyBindingMap[code]); + isNotified = true; + } + }; + + const handleKeyUp = (event) => { + const { ctrlKey, altKey } = event; + + // Resetea la bandera cuando se sueltan las teclas ctrl o alt + if (!ctrlKey || !altKey) { + isNotified = false; + } + }; + + window.addEventListener('keydown', handleKeyDown); + window.addEventListener('keyup', handleKeyUp); + }, +}; diff --git a/src/boot/qformMixin.js b/src/boot/qformMixin.js index fc7852369..8fa5f5200 100644 --- a/src/boot/qformMixin.js +++ b/src/boot/qformMixin.js @@ -2,29 +2,26 @@ import { getCurrentInstance } from 'vue'; export default { mounted: function () { - const vm = getCurrentInstance(); - if (vm.type.name === 'QForm') { - if (!['searchbarForm', 'filterPanelForm'].includes(this.$el?.id)) { - // TODO: AUTOFOCUS IS NOT FOCUSING - const that = this; - this.$el.addEventListener('keyup', function (evt) { - if (evt.key === 'Enter') { - const input = evt.target; - if (input.type == 'textarea' && evt.shiftKey) { - evt.preventDefault(); - let { selectionStart, selectionEnd } = input; - input.value = - input.value.substring(0, selectionStart) + - '\n' + - input.value.substring(selectionEnd); - selectionStart = selectionEnd = selectionStart + 1; - return; - } - evt.preventDefault(); - that.onSubmit(); - } - }); + console.error('qformMixin mounted'); + const that = this; + const form = document.querySelector('.q-form#formModel'); + if (!form) return; + form.addEventListener('keyup', function (evt) { + if (evt.key === 'Enter') { + const input = evt.target; + if (input.type == 'textarea' && evt.shiftKey) { + evt.preventDefault(); + let { selectionStart, selectionEnd } = input; + input.value = + input.value.substring(0, selectionStart) + + '\n' + + input.value.substring(selectionEnd); + selectionStart = selectionEnd = selectionStart + 1; + return; + } + evt.preventDefault(); + that.onSubmit(); } - } + }); }, }; diff --git a/src/boot/quasar.js b/src/boot/quasar.js index 01fe68d8b..d375c2f69 100644 --- a/src/boot/quasar.js +++ b/src/boot/quasar.js @@ -3,11 +3,16 @@ import qFormMixin from './qformMixin'; import keyShortcut from './keyShortcut'; import useNotify from 'src/composables/useNotify.js'; import { CanceledError } from 'axios'; +import { QForm } from 'quasar'; +import { QLayout } from 'quasar'; +import mainShortcutMixin from './mainShortcutMixin'; const { notify } = useNotify(); export default boot(({ app }) => { - app.mixin(qFormMixin); + QForm.mixins = [qFormMixin]; + QLayout.mixins = [mainShortcutMixin]; + app.directive('shortcut', keyShortcut); app.config.errorHandler = (error) => { let message; From 9b681d806bb2021b54cbb28f14813113b21e6844 Mon Sep 17 00:00:00 2001 From: Javier Segarra Date: Wed, 13 Nov 2024 10:13:00 +0100 Subject: [PATCH 02/16] perf: qFormMixin improvement --- src/boot/qformMixin.js | 45 ++++++++++++++++++++++--- src/components/CreateBankEntityForm.vue | 1 - 2 files changed, 41 insertions(+), 5 deletions(-) diff --git a/src/boot/qformMixin.js b/src/boot/qformMixin.js index 8fa5f5200..d859f77d9 100644 --- a/src/boot/qformMixin.js +++ b/src/boot/qformMixin.js @@ -1,11 +1,48 @@ -import { getCurrentInstance } from 'vue'; - +function focusFirstInput(input) { + input.focus(); + return; +} export default { mounted: function () { - console.error('qformMixin mounted'); const that = this; const form = document.querySelector('.q-form#formModel'); if (!form) return; + try { + // Login + const inputsFormCard = document.querySelectorAll( + '.q-form#formModel input:not([disabled]):not([type="checkbox"])' + ); + if (inputsFormCard.length) { + // .focus(); + // observerInstance.disconnect(); + // return; + focusFirstInput(inputsFormCard[0]); + } + // VnNotes + const textareas = document.querySelectorAll( + 'textarea:not([disabled]), [contenteditable]:not([disabled])' + ); + if (textareas.length) { + // textareas[textareas.length - 1].focus(); + // observerInstance.disconnect(); + // return; + focusFirstInput(textareas[textareas.length - 1]); + } + // if (!inputs || inputs.length === 0) return; + const inputs = document.querySelectorAll( + 'form#formModel input:not([disabled]):not([type="checkbox"])' + ); + const input = inputs[0]; + if (!input) return; + // if (input.type === 'textarea' || input.form) { + // AUTOFOCUS + + focusFirstInput(input); + // input.focus(); + // observerInstance.disconnect(); + } catch (error) { + console.error(error); + } form.addEventListener('keyup', function (evt) { if (evt.key === 'Enter') { const input = evt.target; @@ -23,5 +60,5 @@ export default { that.onSubmit(); } }); - }, + }, // mounted }; diff --git a/src/components/CreateBankEntityForm.vue b/src/components/CreateBankEntityForm.vue index a42be6ef8..17dee33a0 100644 --- a/src/components/CreateBankEntityForm.vue +++ b/src/components/CreateBankEntityForm.vue @@ -44,7 +44,6 @@ onMounted(async () => {