diff --git a/src/boot/keyShortcut.js b/src/boot/keyShortcut.js new file mode 100644 index 000000000..5afb5b74a --- /dev/null +++ b/src/boot/keyShortcut.js @@ -0,0 +1,34 @@ +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); + } + }, +}; diff --git a/src/boot/mainShortcutMixin.js b/src/boot/mainShortcutMixin.js new file mode 100644 index 000000000..3b5c604b7 --- /dev/null +++ b/src/boot/mainShortcutMixin.js @@ -0,0 +1,38 @@ +import routes from 'src/router/modules'; +import { useRouter } from 'vue-router'; + +let isNotified = false; + +export default { + created: function () { + const router = useRouter(); + const keyBindingMap = routes + .filter((route) => route.meta.keyBinding) + .reduce((map, route) => { + map[route.meta.keyBinding.toLowerCase()] = route.path; + return map; + }, {}); + + const handleKeyDown = (event) => { + const { ctrlKey, altKey, key } = event; + + if (ctrlKey && altKey && keyBindingMap[key] && !isNotified) { + event.preventDefault(); + router.push(keyBindingMap[key]); + 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/quasar.js b/src/boot/quasar.js index a8d9b7ad9..e2035c880 100644 --- a/src/boot/quasar.js +++ b/src/boot/quasar.js @@ -1,6 +1,10 @@ import { boot } from 'quasar/wrappers'; import qFormMixin from './qformMixin'; +import mainShortcutMixin from './mainShortcutMixin'; +import keyShortcut from './keyShortcut'; export default boot(({ app }) => { app.mixin(qFormMixin); + app.mixin(mainShortcutMixin); + app.directive('shortcut', keyShortcut); }); diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue index 22ef1622c..05f947cf3 100644 --- a/src/components/FormModel.vue +++ b/src/components/FormModel.vue @@ -22,7 +22,7 @@ const { t } = useI18n(); const { validate } = useValidator(); const { notify } = useNotify(); const route = useRoute(); - +const myForm = ref(null); const $props = defineProps({ url: { type: String, @@ -109,11 +109,14 @@ const defaultButtons = computed(() => ({ 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, })); @@ -276,7 +279,14 @@ defineExpose({