From 17368b39fc1ce0b19c0641929004553951a43d12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Gayoso=20Gonz=C3=A1lez?= <danigayosog@gmail.com>
Date: Mon, 3 Jul 2023 13:13:39 +0200
Subject: [PATCH] Refactor usage of vuelidate of base input text

* Create a component to reuse that handles vuelidate validations
---
 .../BaseInputTextWithVuelidate.vue            | 54 +++++++++++++++++++
 .../components/social/SocialWallPostForm.vue  | 19 ++-----
 2 files changed, 58 insertions(+), 15 deletions(-)
 create mode 100644 assets/vue/components/basecomponents/BaseInputTextWithVuelidate.vue

diff --git a/assets/vue/components/basecomponents/BaseInputTextWithVuelidate.vue b/assets/vue/components/basecomponents/BaseInputTextWithVuelidate.vue
new file mode 100644
index 0000000000..a513ba2e25
--- /dev/null
+++ b/assets/vue/components/basecomponents/BaseInputTextWithVuelidate.vue
@@ -0,0 +1,54 @@
+<template>
+  <BaseInputText
+    :id="id"
+    :model-value="modelValue"
+    :label="labelWithRequiredIfNeeded"
+    :is-invalid="vuelidateProperty.$error"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <template #errors>
+      <p
+        v-for="error in vuelidateProperty.$errors"
+        :key="error.$uid"
+        class="mt-1 text-error"
+      >
+        {{ error.$message }}
+      </p>
+    </template>
+  </BaseInputText>
+</template>
+
+<script setup>
+import BaseInputText from "./BaseInputText.vue"
+import {computed} from "vue"
+
+const props = defineProps({
+  id: {
+    type: String,
+    require: true,
+    default: "",
+  },
+  label: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  vuelidateProperty: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+const labelWithRequiredIfNeeded = computed(() => {
+  if (Object.hasOwn(props.vuelidateProperty, 'required')) {
+    return `* ${props.label}`
+  }
+  return props.label
+})
+</script>
diff --git a/assets/vue/components/social/SocialWallPostForm.vue b/assets/vue/components/social/SocialWallPostForm.vue
index 7f7ce98b26..382d1d232f 100644
--- a/assets/vue/components/social/SocialWallPostForm.vue
+++ b/assets/vue/components/social/SocialWallPostForm.vue
@@ -1,23 +1,12 @@
 <template>
   <BaseCard plain>
     <form>
-      <BaseInputText
+      <BaseInputTextWithVuelidate
         v-model="content"
         class="mb-2"
         :label="textPlaceholder"
-        :aria-placeholder="textPlaceholder"
-        :is-invalid="v$.content.$error"
-      >
-        <template #errors>
-          <p
-            v-for="error in v$.content.$errors"
-            :key="error.$uid"
-            class="mt-1 text-error"
-          >
-            {{ error.$message }}
-          </p>
-        </template>
-      </BaseInputText>
+        :vuelidate-property="v$.content"
+      />
 
       <div class="mb-2">
         <BaseCheckbox
@@ -60,9 +49,9 @@ import {required} from "@vuelidate/validators";
 import {useI18n} from "vue-i18n";
 import BaseCard from "../basecomponents/BaseCard.vue";
 import BaseButton from "../basecomponents/BaseButton.vue";
-import BaseInputText from "../basecomponents/BaseInputText.vue";
 import BaseFileUpload from "../basecomponents/BaseFileUpload.vue";
 import BaseCheckbox from "../basecomponents/BaseCheckbox.vue";
+import BaseInputTextWithVuelidate from "../basecomponents/BaseInputTextWithVuelidate.vue";
 
 const store = useStore();
 const {t} = useI18n();