Form Editor v2.5 (#599)

* Form Editor v2.5

* Remove log debug

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/forms/validation/HasError.vue

@@ -2,7 +2,7 @@
   <transition name="fade">
     <div
       v-if="errorMessage"
-      class="has-error text-sm text-red-500 -bottom-3"
+      class="has-error text-xs text-red-500 mt-1"
       v-html="errorMessage"
     />
   </transition>
@@ -10,42 +10,57 @@
 
 <script>
 export default {
-  name: "HasError",
+  name: 'HasError',
   props: {
     form: {
       type: Object,
       required: true,
     },
-    field: {
+    fieldId: {
       type: String,
       required: true,
     },
+    fieldName: {
+      type: String,
+      required: false,
+    },
   },
   computed: {
     errorMessage() {
-      if (!this.form || !this.form.errors || !this.form.errors.any())
+      if (!this.form.errors || !this.form.errors.any())
         return null
       const subErrorsKeys = Object.keys(this.form.errors.all()).filter(
         (key) => {
-          return key.startsWith(this.field) && key !== this.field
+          return key.startsWith(this.fieldId) && key !== this.fieldId
         },
       )
-      const baseError =
-        this.form.errors.get(this.field) ??
-        (subErrorsKeys.length ? "This field has some errors:" : null)
+      let baseError
+        = this.form.errors.get(this.fieldId)
+        ?? (subErrorsKeys.length ? 'This field has some errors:' : null)
       // If no error and no sub errors, return
-      if (!baseError) return null
+      if (!baseError)
+        return null
 
-      return `<p class="text-red-500">${baseError}</p><ul class="list-disc list-inside">${subErrorsKeys.map(
-        (key) => {
-          return "<li>" + this.getSubError(key) + "</li>"
-        },
-      )}</ul>`
+      // Check if baseError starts with "The {field.name} field" and replace if necessary
+      if (baseError.startsWith(`The ${this.fieldName} field`)) {
+        baseError = baseError.replace(`The ${this.fieldName} field`, 'This field')
+      }
+
+      const coreError = `<p class='text-red-500'>${baseError}</p>`
+      if (subErrorsKeys.length) {
+        return coreError + `<ul class='list-disc list-inside'>${subErrorsKeys.map(
+          (key) => {
+            return `<li>${this.getSubError(key)}</li>`
+          },
+        )}</ul>`
+      }
+
+      return coreError
     },
   },
   methods: {
     getSubError(subErrorKey) {
-      return this.form.errors.get(subErrorKey).replace(subErrorKey, "item")
+      return this.form.errors.get(subErrorKey).replace(subErrorKey, 'item')
     },
   },
 }