From 6601276c0252f760d26bb2a94e9461fd20eb7c0c Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Wed, 3 Jul 2024 17:04:09 -0300
Subject: [PATCH] Also hides metadata section tooltips in item submission form.

---
 .../components/edition/item-edition-form.vue  |  7 ++++--
 .../numeric/TainacanNumeric.vue               | 15 ++++++++++--
 .../metadata-types/tainacan-form-item.vue     |  7 ++++--
 src/views/admin/scss/_tainacan-form.scss      | 23 ++++++++++++++++---
 4 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/src/views/admin/components/edition/item-edition-form.vue b/src/views/admin/components/edition/item-edition-form.vue
index 773d16520..74e62cc9e 100644
--- a/src/views/admin/components/edition/item-edition-form.vue
+++ b/src/views/admin/components/edition/item-edition-form.vue
@@ -411,7 +411,7 @@
                                                     </span>
                                                 </label>
                                                 <help-button
-                                                        v-if="metadataSection.description" 
+                                                        v-if="metadataSection.description && metadataSection.description_bellow_name !== 'yes'" 
                                                         :title="metadataSection.name"
                                                         :message="metadataSection.description" />
                                             </span>
@@ -422,7 +422,7 @@
                                                     class="metadata-section-metadata-list">
                                                 <p
                                                         v-if="metadataSection.description && metadataSection.description_bellow_name == 'yes'"
-                                                        class="metadatum-description-help-info">
+                                                        class="metadata-section-description-help-info metadatum-description-help-info">
                                                     {{ metadataSection.description }}
                                                 </p>
 
@@ -2041,6 +2041,9 @@ export default {
                         margin-left: 12px;
                     }
                 }
+                .metadata-section-description-help-info {
+                    margin: 0.25em 0 0 1.125rem;
+                }
                 .item-edition-tab-content .tab-item>.field:last-child {
                     margin-bottom: 187px;
                 }
diff --git a/src/views/admin/components/metadata-types/numeric/TainacanNumeric.vue b/src/views/admin/components/metadata-types/numeric/TainacanNumeric.vue
index 1f95785ee..2341e2041 100644
--- a/src/views/admin/components/metadata-types/numeric/TainacanNumeric.vue
+++ b/src/views/admin/components/metadata-types/numeric/TainacanNumeric.vue
@@ -5,6 +5,7 @@
             :disabled="disabled"
             :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
             :model-value="value === 0 || value ? Number(value) : null"
+            :data-is-danger="!isInputValid"
             lang="en"
             :min="getMin"
             :max="getMax"
@@ -26,6 +27,11 @@
             'blur',
             'mobile-special-focus'
         ],
+        data() {
+            return {
+                isInputValid: true
+            }
+        },
         computed: {
             getStep() {
                 if (this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.step)
@@ -49,8 +55,13 @@
         methods: {
             onInput(value) {
                 const inputRef = this.$refs['tainacan-item-metadatum_id-' + this.itemMetadatum.metadatum.id + (this.itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + this.itemMetadatum.parent_meta_id) : '')];
-                if ( inputRef && !inputRef.checkHtml5Validity())
-                    return;
+                
+                if ( inputRef ) {
+                    this.isInputValid = inputRef.checkHtml5Validity();
+
+                    if ( !this.isInputValid )
+                        return;
+                }
                 
                 // Allowing empty value as a state different of 0
                 if ( value === null || value === undefined || value === '' )
diff --git a/src/views/admin/components/metadata-types/tainacan-form-item.vue b/src/views/admin/components/metadata-types/tainacan-form-item.vue
index 6960bc8a9..65f07ecc5 100644
--- a/src/views/admin/components/metadata-types/tainacan-form-item.vue
+++ b/src/views/admin/components/metadata-types/tainacan-form-item.vue
@@ -19,7 +19,9 @@
                         }"
                         class="has-text-secondary tainacan-icon tainacan-icon-1-25em" />
             </span>
-            <label class="label">
+            <label 
+                    class="label"
+                    :class="{ 'has-text-danger': errorMessage }">
                 <span
                         v-if="enumerateMetadatum"
                         style="opacity: 0.65;"
@@ -237,7 +239,8 @@
                     (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.placeholder ? ' has-placeholder' : '') +  
                     (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.description ? ' has-description' : '') +  
                     (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.id ? ' tainacan-metadatum-id--' + this.itemMetadatum.metadatum.id : '') +
-                    (this.isFocused ? ' is-focused' : '');  
+                    (this.isFocused ? ' is-focused' : '') +
+                    (this.errorMessage ? ' is-danger' : '');  
             }
         },
         created() {
diff --git a/src/views/admin/scss/_tainacan-form.scss b/src/views/admin/scss/_tainacan-form.scss
index 37c646724..f7dfa8bda 100644
--- a/src/views/admin/scss/_tainacan-form.scss
+++ b/src/views/admin/scss/_tainacan-form.scss
@@ -44,11 +44,28 @@
             color: var(--tainacan-danger);
         }
     }
-    .input, .textarea { 
-        &.is-danger {
-          background-color: var(--tainacan-red1);  
+    .field.is-danger {
+        .input,
+        .textarea,
+        .select,
+        .dropdown,
+        .autocomplete { 
+            --tainacan-input-border-color: var(--tainacan-danger);
+            --tainacan-input-background-color: var(--tainacan-red1);  
         }
     }
+    .input,
+    .textarea,
+    .select {
+        &.is-danger {
+            --tainacan-input-border-color: var(--tainacan-danger);
+            --tainacan-input-background-color: var(--tainacan-red1);
+        }
+    } 
+    input[data-is-danger="true"] {
+        --tainacan-input-border-color: var(--tainacan-danger);
+        --tainacan-input-background-color: var(--tainacan-red1);
+    }
     a[disabled="true"] {
         opacity: 0.5;
         user-select: none;