From 4a46dacb99366f7485c7c500b74abdbb59bd4918 Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Thu, 29 Feb 2024 17:31:20 +0100
Subject: [PATCH] Fix form input errors check

---
 client/components/forms/FlatSelectInput.vue          | 2 +-
 client/components/forms/ImageInput.vue               | 2 +-
 client/components/forms/PhoneInput.vue               | 4 ++--
 client/components/forms/RichTextAreaInput.client.vue | 2 +-
 client/components/forms/SelectInput.vue              | 2 +-
 client/components/forms/SignatureInput.vue           | 2 +-
 client/components/forms/TextAreaInput.vue            | 2 +-
 client/components/forms/useFormInput.js              | 2 +-
 8 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/components/forms/FlatSelectInput.vue b/client/components/forms/FlatSelectInput.vue
index bfc727e..4965f9d 100644
--- a/client/components/forms/FlatSelectInput.vue
+++ b/client/components/forms/FlatSelectInput.vue
@@ -8,7 +8,7 @@
 
     <Loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
     <div v-for="(option, index) in options" v-else :key="option[optionKey]" role="button"
-         :class="[theme.default.input,'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex',{ 'mb-2': index !== options.length,'!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
+         :class="[theme.default.input,'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex',{ 'mb-2': index !== options.length,'!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
          @click="onSelect(option[optionKey])"
     >
       <p class="flex-grow">
diff --git a/client/components/forms/ImageInput.vue b/client/components/forms/ImageInput.vue
index 5245944..26bbe07 100644
--- a/client/components/forms/ImageInput.vue
+++ b/client/components/forms/ImageInput.vue
@@ -8,7 +8,7 @@
 
     <span class="inline-block w-full rounded-md shadow-sm">
       <button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
-              class="cursor-pointer relative w-full" :class="[theme.default.input,{'ring-red-500 ring-2': hasValidation && form.errors.has(name)}]"
+              class="cursor-pointer relative w-full" :class="[theme.default.input,{'ring-red-500 ring-2': hasError}]"
               :style="inputStyle" @click.prevent="showUploadModal=true"
       >
         <div v-if="currentUrl==null" class="h-6 text-gray-600 dark:text-gray-400">
diff --git a/client/components/forms/PhoneInput.vue b/client/components/forms/PhoneInput.vue
index 297697b..ddd7f00 100644
--- a/client/components/forms/PhoneInput.vue
+++ b/client/components/forms/PhoneInput.vue
@@ -10,7 +10,7 @@
       <v-select v-model="selectedCountryCode" class="w-[130px]" dropdown-class="w-[300px]" input-class="rounded-r-none"
                 :data="countries"
                 :disabled="(disabled || countries.length===1)?true:null" :searchable="true" :search-keys="['name']" :option-key="'code'" :color="color"
-                :has-error="hasValidation && form.errors.has(name)"
+                :has-error="hasError"
                 :placeholder="'Select a country'" :uppercase-labels="true" :theme="theme" @update:model-value="onChangeCountryCode"
       >
         <template #option="props">
@@ -28,7 +28,7 @@
         </template>
       </v-select>
       <input v-model="inputVal" type="text" class="inline-flex-grow !border-l-0 !rounded-l-none" :disabled="disabled?true:null"
-             :class="[theme.default.input, { '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200': disabled }]"
+             :class="[theme.default.input, { '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
              :placeholder="placeholder" :style="inputStyle" @input="onInput"
       >
     </div>
diff --git a/client/components/forms/RichTextAreaInput.client.vue b/client/components/forms/RichTextAreaInput.client.vue
index b4efc7e..ccd1d0c 100644
--- a/client/components/forms/RichTextAreaInput.client.vue
+++ b/client/components/forms/RichTextAreaInput.client.vue
@@ -7,7 +7,7 @@
     </template>
 
     <vue-editor :id="id?id:name" ref="editor" v-model="compVal" :disabled="disabled?true:null"
-                :placeholder="placeholder" :class="[{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }, theme.RichTextAreaInput.input]"
+                :placeholder="placeholder" :class="[{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }, theme.RichTextAreaInput.input]"
                 :editor-toolbar="editorToolbar" class="rich-editor resize-y"
                 :style="inputStyle"
     />
diff --git a/client/components/forms/SelectInput.vue b/client/components/forms/SelectInput.vue
index 9248c75..5ac9e28 100644
--- a/client/components/forms/SelectInput.vue
+++ b/client/components/forms/SelectInput.vue
@@ -18,7 +18,7 @@
               :placeholder="placeholder"
               :uppercase-labels="uppercaseLabels"
               :theme="theme"
-              :has-error="hasValidation && form.errors.has(name)"
+              :has-error="hasError"
               :allow-creation="allowCreation"
               :disabled="disabled?true:null"
               :help="help"
diff --git a/client/components/forms/SignatureInput.vue b/client/components/forms/SignatureInput.vue
index d9dfeb6..c213a9d 100644
--- a/client/components/forms/SignatureInput.vue
+++ b/client/components/forms/SignatureInput.vue
@@ -7,7 +7,7 @@
     </template>
 
     <VueSignaturePad ref="signaturePad"
-                     :class="[theme.default.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
+                     :class="[theme.default.input,{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
                      height="150px"
                      :name="name"
                      :options="{ onEnd }"
diff --git a/client/components/forms/TextAreaInput.vue b/client/components/forms/TextAreaInput.vue
index 6929602..757d7e8 100644
--- a/client/components/forms/TextAreaInput.vue
+++ b/client/components/forms/TextAreaInput.vue
@@ -7,7 +7,7 @@
     </template>
 
     <textarea :id="id?id:name" v-model="compVal" :disabled="disabled?true:null"
-              :class="[theme.default.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
+              :class="[theme.default.input,{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
               class="resize-y"
               :name="name" :style="inputStyle"
               :placeholder="placeholder"
diff --git a/client/components/forms/useFormInput.js b/client/components/forms/useFormInput.js
index 68a5f19..421e1bf 100644
--- a/client/components/forms/useFormInput.js
+++ b/client/components/forms/useFormInput.js
@@ -33,7 +33,7 @@ export function useFormInput (props, context, formPrefixKey = null) {
   })
 
   const hasError = computed(() => {
-    return hasValidation && props.form?.errors?.has(props.name)
+    return hasValidation.value && props.form?.errors?.has(props.name)
   })
 
   const compVal = computed({