Merge branch '6911-saveOnEnter' of https://gitea.verdnatura.es/verdnatura/salix-front into 6911-saveOnEnter

quasar.config.js

@@ -29,7 +29,8 @@ module.exports = configure(function (/* ctx */) {
         // app boot file (/src/boot)
         // --> boot files are part of "main.js"
         // 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
         css: ['app.scss'],

src/boot/qformMixin.js

@@ -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();
+                    }
+                });
+            }
+    },
+};

src/boot/quasar.js

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

src/boot/setDefaults.js

@@ -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');

src/components/EditTableCellValueForm.vue

@@ -42,7 +42,7 @@ const onDataSaved = () => {
     closeForm();
 };
 
-const submitData = async () => {
+const onSubmit = async () => {
     try {
         isLoading.value = true;
         const rowsToEdit = $props.rows.map((row) => ({ id: row.id, itemFk: row.itemFk }));
@@ -66,7 +66,7 @@ const closeForm = () => {
 </script>
 
 <template>
-    <QForm @submit="submitData()" @keyup.enter="submitData()" class="all-pointer-events">
+    <QForm @submit="onSubmit()" class="all-pointer-events">
         <QCard class="q-pa-lg">
             <span ref="closeButton" class="close-icon" v-close-popup>
                 <QIcon name="close" size="sm" />

src/components/FilterItemForm.vue

@@ -78,7 +78,7 @@ const tableColumns = computed(() => [
     },
 ]);
 
-const fetchResults = async () => {
+const onSubmit = async () => {
     try {
         let filter = itemFilter;
         const params = itemFilterParams;
@@ -140,11 +140,7 @@ const selectItem = ({ id }) => {
         @on-fetch="(data) => (InksOptions = data)"
         auto-load
     />
-    <QForm
-        @submit="fetchResults()"
-        @keyup.enter="fetchResults()"
-        class="all-pointer-events"
-    >
+    <QForm @submit="onSubmit()" class="all-pointer-events">
         <QCard class="column" style="padding: 32px; z-index: 100">
             <span ref="closeButton" class="close-icon" v-close-popup>
                 <QIcon name="close" size="sm" />

src/components/FilterTravelForm.vue

@@ -85,7 +85,7 @@ const tableColumns = computed(() => [
     },
 ]);
 
-const fetchResults = async () => {
+const onSubmit = async () => {
     try {
         let filter = travelFilter;
         const params = travelFilterParams;
@@ -138,11 +138,7 @@ const selectTravel = ({ id }) => {
         @on-fetch="(data) => (warehousesOptions = data)"
         auto-load
     />
-    <QForm
-        @submit="fetchResults()"
-        @keyup.enter="fetchResults()"
-        class="all-pointer-events"
-    >
+    <QForm @submit="onSubmit()" class="all-pointer-events">
         <QCard class="column" style="padding: 32px; z-index: 100">
             <span ref="closeButton" class="close-icon" v-close-popup>
                 <QIcon name="close" size="sm" />

src/components/FormModel.vue

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

src/pages/Claim/ClaimRmaList.vue

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

src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue

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

src/pages/Login/LoginMain.vue

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

src/pages/Login/TwoFactor.vue

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

src/pages/Travel/Card/TravelThermographsForm.vue

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

src/pages/Wagon/Type/WagonTypeCreate.vue

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

src/pages/Wagon/WagonCreate.vue

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