From 4de23c31b3f34f1849c4300e93729b244db9e01d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 29 Oct 2024 15:01:49 +0100
Subject: [PATCH] feat: use composable to unify logic

---
 src/components/common/VnInput.vue     | 13 +++++--------
 src/components/common/VnInputDate.vue |  7 +++----
 src/components/common/VnInputTime.vue |  6 ++----
 src/components/common/VnLocation.vue  | 12 ++++--------
 src/components/common/VnSelect.vue    |  6 ++----
 src/composables/useRequired.js        | 13 +++++++++++++
 6 files changed, 29 insertions(+), 28 deletions(-)
 create mode 100644 src/composables/useRequired.js

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 4534ae4a03..769e7ca447 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -1,9 +1,11 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useValidator } from 'src/composables/useValidator';
-import { useAttrs } from 'vue';
+import { useRequired } from 'src/composables/useRequired';
 
+const $attrs = useAttrs();
+const { isRequired, requiredFieldRule } = useRequired($attrs);
+const { t } = useI18n();
 const emit = defineEmits([
     'update:modelValue',
     'update:options',
@@ -29,12 +31,7 @@ const $props = defineProps({
         default: true,
     },
 });
-const { validations } = useValidator();
-const $attrs = useAttrs();
 
-const { t } = useI18n();
-const isRequired = computed(() => Object.keys($attrs).includes('required'));
-const requiredFieldRule = (val) => validations().required(isRequired.value, val);
 const vnInputRef = ref(null);
 const value = computed({
     get() {
diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 87833f4111..b822092a56 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -4,10 +4,13 @@ import { date } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useAttrs } from 'vue';
 import VnDate from './VnDate.vue';
+import { useRequired } from 'src/composables/useRequired';
 
+const { isRequired, requiredFieldRule } = useRequired($attrs);
 const model = defineModel({ type: [String, Date] });
 const $attrs = useAttrs();
 const { t } = useI18n();
+
 const $props = defineProps({
     isOutlined: {
         type: Boolean,
@@ -18,11 +21,7 @@ const $props = defineProps({
         default: true,
     },
 });
-import { useValidator } from 'src/composables/useValidator';
-const { validations } = useValidator();
 
-const isRequired = computed(() => Object.keys($attrs).includes('required'));
-const requiredFieldRule = (val) => validations().required(isRequired.value, val);
 const vnInputDateRef = ref(null);
 
 const dateFormat = 'DD/MM/YYYY';
diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index 13e90e0212..a0967fdf69 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -2,10 +2,10 @@
 import { computed, ref, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { date } from 'quasar';
-import { useValidator } from 'src/composables/useValidator';
 import VnTime from './VnTime.vue';
+import { useRequired } from 'src/composables/useRequired';
 
-const { validations } = useValidator();
+const { isRequired, requiredFieldRule } = useRequired($attrs);
 const { t } = useI18n();
 const $attrs = useAttrs();
 const model = defineModel({ type: String });
@@ -21,8 +21,6 @@ const props = defineProps({
 });
 const vnInputTimeRef = ref(null);
 const initialDate = ref(model.value ?? Date.vnNew());
-const isRequired = computed(() => Object.keys($attrs).includes('required'));
-const requiredFieldRule = (val) => validations().required(isRequired.value, val);
 const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
 const dateFormat = 'HH:mm';
 const isPopupOpen = ref();
diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 7c6e46fdd5..16f9fd580f 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -2,13 +2,12 @@
 import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import { useI18n } from 'vue-i18n';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
+import { useAttrs } from 'vue';
+import { useRequired } from 'src/composables/useRequired';
 const { t } = useI18n();
 const emit = defineEmits(['update:model-value', 'update:options']);
-const { validations } = useValidator();
-
-import { useAttrs } from 'vue';
-import { useValidator } from 'src/composables/useValidator';
+const { isRequired, requiredFieldRule } = useRequired($attrs);
 const $attrs = useAttrs();
 const props = defineProps({
     location: {
@@ -17,9 +16,6 @@ const props = defineProps({
     },
 });
 
-const isRequired = computed(() => Object.keys($attrs).includes('required'));
-const requiredFieldRule = (val) => validations().required(isRequired.value, val);
-
 const mixinRules = [requiredFieldRule];
 const locationProperties = [
     'postcode',
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 4a4730784e..662efcfe99 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -2,10 +2,11 @@
 import { ref, toRefs, computed, watch, onMounted, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'src/components/FetchData.vue';
-import { useValidator } from 'src/composables/useValidator';
+import { useRequired } from 'src/composables/useRequired';
 const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
 const $attrs = useAttrs();
 const { t } = useI18n();
+const { isRequired, requiredFieldRule } = useRequired($attrs);
 const $props = defineProps({
     modelValue: {
         type: [String, Number, Object],
@@ -88,10 +89,7 @@ const $props = defineProps({
         default: false,
     },
 });
-const { validations } = useValidator();
 
-const isRequired = computed(() => Object.keys($attrs).includes('required'));
-const requiredFieldRule = (val) => validations().required(isRequired.value, val);
 const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
 const { optionLabel, optionValue, optionFilter, optionFilterValue, options, modelValue } =
     toRefs($props);
diff --git a/src/composables/useRequired.js b/src/composables/useRequired.js
new file mode 100644
index 0000000000..e650c91f59
--- /dev/null
+++ b/src/composables/useRequired.js
@@ -0,0 +1,13 @@
+import { useValidator } from 'src/composables/useValidator';
+
+export function useRequired($attrs) {
+    const { validations } = useValidator();
+
+    const isRequired = Object.keys($attrs).includes('required');
+    const requiredFieldRule = (val) => validations().required(isRequired, val);
+
+    return {
+        isRequired,
+        requiredFieldRule,
+    };
+}