From 0d718448e22e1ad19350fa451fb41cb24e8b8408 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 21 Jun 2024 13:09:34 +0200
Subject: [PATCH] perf: approach

---
 src/components/FormModel.vue       | 10 +++++++---
 src/components/FormModelPopup.vue  |  1 +
 src/components/common/VnInput.vue  |  8 +-------
 src/components/common/VnSelect.vue |  2 --
 src/composables/useValidator.js    |  2 +-
 src/i18n/locale/en.yml             |  2 +-
 src/i18n/locale/es.yml             |  3 +++
 7 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index f10dee61a..4cc5d38ee 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,
@@ -106,11 +106,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,
 }));
@@ -262,6 +265,7 @@ defineExpose({
 <template>
     <div class="column items-center full-width">
         <QForm
+            ref="myForm"
             v-if="formData"
             @submit="save"
             @reset="reset"
@@ -290,7 +294,7 @@ defineExpose({
                     :color="defaultButtons.reset.color"
                     :icon="defaultButtons.reset.icon"
                     flat
-                    @click="reset"
+                    @click="defaultButtons.reset.click"
                     :disable="!hasChanges"
                     :title="t(defaultButtons.reset.label)"
                 />
@@ -330,7 +334,7 @@ defineExpose({
                     :label="tMobile('globals.save')"
                     color="primary"
                     icon="save"
-                    @click="save"
+                    @click="defaultButtons.save.click"
                     :disable="!hasChanges"
                     :title="t(defaultButtons.save.label)"
                 />
diff --git a/src/components/FormModelPopup.vue b/src/components/FormModelPopup.vue
index 0f2b6cbf0..581a2dd73 100644
--- a/src/components/FormModelPopup.vue
+++ b/src/components/FormModelPopup.vue
@@ -68,6 +68,7 @@ defineExpose({
                 <QBtn
                     :label="t('globals.save')"
                     :title="t('globals.save')"
+                    @submit="() => formModelRef.save()"
                     type="submit"
                     color="primary"
                     class="q-ml-sm"
diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 07e82abed..711e0d90a 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -25,7 +25,6 @@ const $props = defineProps({
 });
 
 const { t } = useI18n();
-const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
 const vnInputRef = ref(null);
 const value = computed({
     get() {
@@ -63,11 +62,7 @@ const inputRules = [
 </script>
 
 <template>
-    <div
-        @mouseover="hover = true"
-        @mouseleave="hover = false"
-        :rules="$attrs.required ? [requiredFieldRule] : null"
-    >
+    <div @mouseover="hover = true" @mouseleave="hover = false">
         <QInput
             ref="vnInputRef"
             v-model="value"
@@ -76,7 +71,6 @@ const inputRules = [
             :class="{ required: $attrs.required }"
             @keyup.enter="emit('keyup.enter')"
             :clearable="false"
-            :rules="inputRules"
             :lazy-rules="true"
             hide-bottom-space
         >
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 04ccca889..12d110170 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -143,7 +143,6 @@ async function filterHandler(val, update) {
 watch(options, (newValue) => {
     setOptions(newValue);
 });
-
 watch(modelValue, (newValue) => {
     if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
         fetchFilter(newValue);
@@ -175,7 +174,6 @@ watch(modelValue, (newValue) => {
         ref="vnSelectRef"
         lazy-rules
         :class="{ required: $attrs.required }"
-        :rules="$attrs.required ? [requiredFieldRule] : null"
         virtual-scroll-slice-size="options.length"
     >
         <template v-if="isClearable" #append>
diff --git a/src/composables/useValidator.js b/src/composables/useValidator.js
index 5ad96ea1b..11e7188b3 100644
--- a/src/composables/useValidator.js
+++ b/src/composables/useValidator.js
@@ -40,7 +40,7 @@ export function useValidator() {
                 if (!isValid) return message;
             },
             presence: (value) => {
-                let message = `Value can't be empty`;
+                let message = t(`globals.valueCantBeEmpty`);
                 if (validation.message)
                     message = t(validation.message) || validation.message;
 
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 515f8dd80..bf9d38840 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -74,7 +74,7 @@ globals:
     notificationSent: Notification sent
     warehouse: Warehouse
     company: Company
-    fieldRequired: Field required
+    fieldRequired: Field requdired
     allowedFilesText: 'Allowed file types: { allowedContentTypes }'
     smsSent: SMS sent
     confirmDeletion: Confirm deletion
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 762f641e0..19b4cfd21 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -75,6 +75,9 @@ globals:
     warehouse: Almacén
     company: Empresa
     fieldRequired: Campo requerido
+    valueCantBeEmpty: El valor no puede estar vacío
+    Value can't be blank: El valor no puede estar en blanco
+    Value can't be null: El valor no puede ser nulo
     allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }'
     smsSent: SMS enviado
     confirmDeletion: Confirmar eliminación