#6911 save on enter #207

Merged
jsegarra merged 50 commits from 6911-saveOnEnter into dev 2024-06-07 07:20:48 +00:00
15 changed files with 83 additions and 41 deletions
Showing only changes of commit 8604c86828 - Show all commits

View File

@ -29,7 +29,8 @@ 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'], //
boot: ['i18n', 'axios', 'vnDate','quasar','setDefaults', 'validations'],
// 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'],

22
src/boot/qformMixin.js Normal file
View File

@ -0,0 +1,22 @@
import { QForm } from 'quasar';
import { getCurrentInstance } from 'vue';
export default {
inject: { QForm },
component: { QForm },
components: { QForm },
extends: { QForm },
mounted: function () {
const vm = getCurrentInstance();
if (vm.type.name === 'QForm')
if (this.$el?.id !== 'searchbarForm') {
let that = this;
document.addEventListener('keyup', function (evt) {
if (evt.keyCode === 13) {
that.onSubmit();
}
});
}
},
};

6
src/boot/quasar.js Normal file
View File

@ -0,0 +1,6 @@
import { boot } from 'quasar/wrappers';
import qFormMixin from './qformMixin';
export default boot(({ app }) => {
app.mixin(qFormMixin);
});

41
src/boot/setDefaults.js Normal file
View File

@ -0,0 +1,41 @@
import { QInput, QSelect } from "quasar";
import { QTable} from "quasar";
const setDefault = (component, key, value) => {
const prop = component.props[key];
switch (typeof prop) {
case "object":
prop.default = value;
break;
case "function":
component.props[key] = {
type: prop,
default: value
};
break;
case "undefined":
throw new Error("unknown prop: " + key);
default:
throw new Error("unhandled type: " + typeof prop);
}
};
QInput.props.outlined = {
type: QInput.props.outlined,
default: true
};
QInput.props.dense = {
type: QInput.props.dense,
default: true
};
QInput.props.stackLabel = {
type: QInput.props.stackLabel,
default: true
};
setDefault(QInput, "outlined", false);
setDefault(QTable, "gridHeader", true);
setDefault(QTable, "color", 'red-8');
setDefault(QTable, "pagination", { rowsPerPage: 25 });
setDefault(QTable, "rowKey", 'id');
setDefault(QSelect,'optionValue','id');
setDefault(QSelect,'optionLabel','name');

View File

@ -42,7 +42,7 @@ const onDataSaved = () => {
closeForm(); closeForm();
}; };
const submitData = async () => { const onSubmit = async () => {
try { 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 }));
@ -66,7 +66,7 @@ const closeForm = () => {
</script> </script>
<template> <template>
<QForm @submit="submitData()" @keyup.enter="submitData()" class="all-pointer-events"> <QForm @submit="onSubmit()" 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" />

View File

@ -78,7 +78,7 @@ const tableColumns = computed(() => [
}, },
]); ]);
const fetchResults = async () => { const onSubmit = async () => {
try { try {
let filter = itemFilter; let filter = itemFilter;
const params = itemFilterParams; const params = itemFilterParams;
@ -140,11 +140,7 @@ const selectItem = ({ id }) => {
@on-fetch="(data) => (InksOptions = data)" @on-fetch="(data) => (InksOptions = data)"
auto-load auto-load
/> />
<QForm <QForm @submit="onSubmit()" class="all-pointer-events">
@submit="fetchResults()"
@keyup.enter="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" />

View File

@ -85,7 +85,7 @@ const tableColumns = computed(() => [
}, },
]); ]);
const fetchResults = async () => { const onSubmit = async () => {
try { try {
let filter = travelFilter; let filter = travelFilter;
const params = travelFilterParams; const params = travelFilterParams;
@ -138,11 +138,7 @@ const selectTravel = ({ id }) => {
@on-fetch="(data) => (warehousesOptions = data)" @on-fetch="(data) => (warehousesOptions = data)"
auto-load auto-load
/> />
<QForm <QForm @submit="onSubmit()" class="all-pointer-events">
@submit="fetchResults()"
@keyup.enter="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>

veo muchos @keyup.enter=
si todos los QForm los vamos a querer así.. @jsegarra no hay forma de hacerlo por defecto así?

veo muchos @keyup.enter= si todos los QForm los vamos a querer así.. @jsegarra no hay forma de hacerlo por defecto así?

Propone sustituir en todos los sitios donde haya QForm por FormModel. Lo hago en esta tarea?

Propone sustituir en todos los sitios donde haya QForm por FormModel. Lo hago en esta tarea?
<QIcon name="close" size="sm" /> <QIcon name="close" size="sm" />

View File

@ -211,7 +211,6 @@ watch(formUrl, async () => {
<QForm <QForm
v-if="formData" v-if="formData"
@submit="save" @submit="save"
@keyup.enter="save"
@reset="reset" @reset="reset"
class="q-pa-md" class="q-pa-md"
id="formModel" id="formModel"

View File

@ -67,7 +67,7 @@ async function remove({ id }) {
<QPage class="column items-center q-pa-md sticky"> <QPage class="column items-center q-pa-md sticky">
<QPageSticky expand position="top" :offset="[16, 16]"> <QPageSticky expand position="top" :offset="[16, 16]">
<QCard class="card q-pa-md"> <QCard class="card q-pa-md">
<QForm @submit="submit" @keyup.enter="submit"> <QForm @submit="submit">
<VnInput <VnInput
ref="input" ref="input"
v-model="newRma.code" v-model="newRma.code"

View File

@ -55,7 +55,7 @@ const onSubmit = async () => {
<QDialog ref="dialogRef"> <QDialog ref="dialogRef">
<QCard class="q-pa-md q-mb-md"> <QCard class="q-pa-md q-mb-md">
<QCardSection> <QCardSection>
<QForm @submit="onSubmit()" @keyup.enter="onSubmit()" class="q-pa-sm"> <QForm @submit="onSubmit()" class="q-pa-sm">
<div> <div>
{{ {{
t('Add observation to all selected clients', { t('Add observation to all selected clients', {

View File

@ -67,11 +67,7 @@ async function onSubmit() {
</script> </script>
<template> <template>
<QForm <QForm @submit="onSubmit" class="q-gutter-y-md q-pa-lg formCard">
@submit="onSubmit"
@keyup.enter="onSubmit"
class="q-gutter-y-md q-pa-lg formCard"
>
<VnLogo alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" /> <VnLogo alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
<VnInput <VnInput

View File

@ -48,11 +48,7 @@ async function onSubmit() {
} }
</script> </script>
<template> <template>
<QForm <QForm @submit="onSubmit" class="q-gutter-y-md q-pa-lg formCard">
@submit="onSubmit"
@keyup.enter="onSubmit"
class="q-gutter-y-md q-pa-lg formCard"
>
<div class="column items-center"> <div class="column items-center">
<QIcon name="phonelink_lock" size="xl" color="primary" /> <QIcon name="phonelink_lock" size="xl" color="primary" />
<h5 class="text-center q-my-md">{{ t('twoFactor.insert') }}</h5> <h5 class="text-center q-my-md">{{ t('twoFactor.insert') }}</h5>

View File

@ -211,7 +211,6 @@ const onThermographCreated = async (data) => {
:observe-form-changes="viewAction === 'create'" :observe-form-changes="viewAction === 'create'"
:default-actions="true" :default-actions="true"
@submit="onSubmit()" @submit="onSubmit()"
@keyup.enter="onSubmit()"
class="full-width" class="full-width"
style="max-width: 800px" style="max-width: 800px"
> >

View File

@ -242,12 +242,7 @@ function exceedMaxHeight(pos) {
<template> <template>
<QPage class="q-pa-sm q-mx-xl"> <QPage class="q-pa-sm q-mx-xl">
<QForm <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
@submit="onSubmit()"
@keyup.enter="onSubmit()"
@reset="onReset()"
class="q-pa-sm"
>
<QCard class="q-pa-md"> <QCard class="q-pa-md">
<VnInput <VnInput
filled filled

View File

@ -89,12 +89,7 @@ function filterType(val, update) {
<template> <template>
<QPage class="q-pa-sm q-mx-xl"> <QPage class="q-pa-sm q-mx-xl">
<QForm <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
@submit="onSubmit()"
@keyup.enter="onSubmit()"
@reset="onReset()"
class="q-pa-sm"
>
<QCard class="q-pa-md"> <QCard class="q-pa-md">
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div class="col"> <div class="col">