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,
@@ -105,11 +105,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,
 }));
@@ -263,7 +266,14 @@ defineExpose({
 </script>
 <template>
     <div class="column items-center full-width">
-        <QForm @submit="save" @reset="reset" class="q-pa-md" id="formModel">
+        <QForm
+            ref="myForm"
+            v-if="formData"
+            @submit="save"
+            @reset="reset"
+            class="q-pa-md"
+            id="formModel"
+        >
             <QCard>
                 <slot
                     v-if="formData"
@@ -291,7 +301,7 @@ defineExpose({
                 :color="defaultButtons.reset.color"
                 :icon="defaultButtons.reset.icon"
                 flat
-                @click="reset"
+                @click="defaultButtons.reset.click"
                 :disable="!hasChanges"
                 :title="t(defaultButtons.reset.label)"
             />
@@ -331,7 +341,7 @@ defineExpose({
                 :label="tMobile('globals.save')"
                 color="primary"
                 icon="save"
-                @click="save"
+                @click="defaultButtons.save.click"
                 :disable="!hasChanges"
                 :title="t(defaultButtons.save.label)"
             />

src/components/common/VnInput.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useValidator } from 'src/composables/useValidator';
 
 const emit = defineEmits([
     'update:modelValue',
@@ -27,9 +28,11 @@ const $props = defineProps({
         default: true,
     },
 });
+const { validations } = useValidator();
 
 const { t } = useI18n();
-const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+const requiredFieldRule = (val) => validations().required($attrs.required, val);
+
 const vnInputRef = ref(null);
 const value = computed({
     get() {
@@ -57,21 +60,22 @@ const focus = () => {
 defineExpose({
     focus,
 });
+import { useAttrs } from 'vue';
+const $attrs = useAttrs();
 
-const inputRules = [
+const mixinRules = [
+    requiredFieldRule,
+    ...($attrs.rules ?? []),
     (val) => {
         const { min } = vnInputRef.value.$attrs;
+        if (!min) return null;
         if (min >= 0) if (Math.floor(val) < min) return t('inputMin', { value: min });
     },
 ];
 </script>
 
 <template>
-    <div
+    <div @mouseover="hover = true" @mouseleave="hover = false">
-        @mouseover="hover = true"
-        @mouseleave="hover = false"
-        :rules="$attrs.required ? [requiredFieldRule] : null"
-    >
         <QInput
             ref="vnInputRef"
             v-model="value"
@@ -80,7 +84,7 @@ const inputRules = [
             :class="{ required: $attrs.required }"
             @keyup.enter="emit('keyup.enter')"
             :clearable="false"
-            :rules="inputRules"
+            :rules="mixinRules"
             :lazy-rules="true"
             hide-bottom-space
         >

src/composables/useValidator.js

@@ -28,7 +28,7 @@ export function useValidator() {
     }
 
     const { t } = useI18n();
-    const validations = function (validation) {
+    const validations = function (validation = {}) {
         return {
             format: (value) => {
                 const { allowNull, with: format, allowBlank } = validation;
@@ -40,12 +40,15 @@ 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;
 
                 return !validator.isEmpty(value ? String(value) : '') || message;
             },
+            required: (required, value) => {
+                return required ? !!value || t('globals.fieldRequired') : null;
+            },
             length: (value) => {
                 const options = {
                     min: validation.min || validation.is,
@@ -71,12 +74,17 @@ export function useValidator() {
                     return validator.isInt(value) || 'Value should be integer';
                 return validator.isNumeric(value) || 'Value should be a number';
             },
+            min: (value, min) => {
+                if (min >= 0)
+                    if (Math.floor(value) < min) return t('inputMin', { value: min });
+            },
             custom: (value) => validation.bindedFunction(value) || 'Invalid value',
         };
     };
 
     return {
         validate,
+        validations,
         models,
     };
 }

src/i18n/locale/en.yml

@@ -67,6 +67,7 @@ globals:
     allRows: 'All { numberRows } row(s)'
     markAll: Mark all
     requiredField: Required field
+    valueCantBeEmpty: Value cannot be empty
     class: clase
     type: Type
     reason: reason

src/i18n/locale/es.yml

@@ -76,6 +76,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

src/pages/Zone/Card/ZoneBasicData.vue

@@ -83,6 +83,7 @@ const agencyOptions = ref([]);
                     :label="t('Price')"
                     type="number"
                     min="0"
+                    required="true"
                     clearable
                 />
                 <VnInput

src/pages/Zone/ZoneList.vue

@@ -164,8 +164,19 @@ onMounted(() => (stateStore.rightDrawer = true));
                 option-label="name"
                 :label="t('list.agency')"
             />
-            <VnInput v-model="data.price" :label="t('list.price')" min="0" />
+            <VnInput
-            <VnInput v-model="data.bonus" :label="t('list.bonus')" min="0" />
+                v-model="data.price"
+                :label="t('list.price')"
+                min="0"
+                type="number"
+                required="true"
+            />
+            <VnInput
+                v-model="data.bonus"
+                :label="t('list.bonus')"
+                min="0"
+                type="number"
+            />
             <VnInput
                 v-model="data.travelingDays"
                 :label="t('list.travelingDays')"

src/router/modules/zone.js

@@ -50,24 +50,6 @@ export default {
                     },
                     component: () => import('src/pages/Zone/ZoneDeliveryDays.vue'),
                 },
-                {
-                    path: 'create',
-                    name: 'ZoneCreate',
-                    meta: {
-                        title: 'zoneCreate',
-                        icon: 'create',
-                    },
-                    component: () => import('src/pages/Zone/ZoneCreate.vue'),
-                },
-                {
-                    path: ':id/edit',
-                    name: 'ZoneEdit',
-                    meta: {
-                        title: 'zoneEdit',
-                        icon: 'edit',
-                    },
-                    component: () => import('src/pages/Zone/ZoneCreate.vue'),
-                },
                 {
                     name: 'ZoneUpcomingDeliveries',
                     path: 'upcoming-deliveries',