Error notification improvement on event bus #320. Instead of checking the error array everytime some metadada is updated, only the related one is alerted with an event.

src/admin/scss/_dropdown-and-autocomplete.scss

@@ -97,6 +97,9 @@
         max-height: unset !important;
     }
 }
+.taginput.is-expanded {
+    width: 100%;
+}
 .taginput-container .mdi-magnify::before, 
 .autocomplete .mdi-magnify::before {
     content: 'search';

src/classes/metadata-types/tainacan-form-item.vue

@@ -1,7 +1,7 @@
 <template>
     <b-field
             :addons="false"
-            :message="getErrorMessage"
+            :message="errorMessage"
             :type="metadatumTypeMessage">
         <span   
                 class="collapse-handle"
@@ -112,29 +112,27 @@
         },
         data(){
             return {
-                inputs: []
+                inputs: [],
+                errorMessage: ''
             }
         },
         computed: {
-            getErrorMessage() {
-                let errorMessage = '';
-                let errors = eventBus.getErrors(this.metadatum.metadatum.id);
-
-                if (errors) {
-                    for (let error of errors) { 
-                        for (let index of Object.keys(error))
-                            errorMessage += error[index] + '\n';
-                    }
-                }
-
-                return errorMessage;
-            },
             metadatumTypeMessage() {
-                return this.getErrorMessage ? 'is-danger' : ''
+                return this.errorMessage ? 'is-danger' : ''
             }
         },
         created() {
             this.createInputs();
+            eventBus.$on('updateErrorMessageOf#' + this.metadatum.metadatum.id, (errors) => {
+                let updatedErrorMessage = '';
+                if (errors && this.metadatum.metadatum.id == errors.metadatum_id && errors.errors) {
+                    for (let error of errors.errors) { 
+                        for (let index of Object.keys(error))
+                            updatedErrorMessage += error[index] + '\n';
+                    }
+                }
+                this.errorMessage = updatedErrorMessage;
+            })
         },
         methods: {
             changeValue: _.debounce(function() {
@@ -202,6 +200,9 @@
                 const array = ['tainacan-relationship','tainacan-taxonomy'];
                 return !(array.indexOf(component) >= 0 );
             }
+        },
+        beforeDestroy() {
+            eventBus.$off('updateErrorMessageOf#' + this.metadatum.metadatum.id);
         }
     }
 </script>

src/js/event-bus-web-components.js

@@ -34,8 +34,10 @@ export const eventBus = new Vue({
                     .then(() => {
                         this.$emit('isUpdatingValue', false);
                         let index = this.errors.findIndex( errorItem => errorItem.metadatum_id == metadatumId );
-                        if (index >= 0)
+                        if (index >= 0) {
                             this.errors.splice( index, 1);
+                        }
+                        this.$emit('updateErrorMessageOf#' + metadatumId, this.errors[index]);
                     })
                     .catch((error) => {
                         this.$emit('isUpdatingValue', false);
@@ -45,17 +47,17 @@ export const eventBus = new Vue({
                         for (let index in error)
                             messages.push(error[index]);
 
-                        if ( index >= 0)
+                        if ( index >= 0) {
                             Vue.set( this.errors, index, { metadatum_id: metadatumId, errors: messages });
-                        else
+                            this.$emit('updateErrorMessage', this.errors[index]);
+                        } else {
                             this.errors.push( { metadatum_id: metadatumId, errors: messages } );
+                            this.$emit('updateErrorMessageOf#' + metadatumId, this.errors[0]);
+                        }
+                        
                 });
             }
         },
-        getErrors(metadatum_id) {
-            let error = this.errors.find(errorItem => errorItem.metadatum_id == metadatum_id);
-            return error ? error.errors : false
-        },
         clearAllErrors() {
            this.errors = [];
         }