test Eventbus with store in numeric component

src/classes/field-types/numeric/Numeric.vue

@@ -1,7 +1,11 @@
 <template>
     <div class="component">
         <p>{{ name }}</p>
-        <input type="number" @blur="changeValue($event)">
+        <input type="text" @blur="changeValue($event)" :value="getValue()">
+        <p
+                v-for="error in getErrors()">
+            {{ error }}
+        </p>
     </div>
 </template>
 
@@ -12,9 +16,28 @@
             item_id: { type: Number },
             metadata_id: { type: Number },
             value: { type: [ String,Number ]  },
+            errorsMsg: { type: [ String,Number ] },
         },
         methods: {
-            changeValue( event ){}
+            changeValue( event ){
+                this.$emit('changeValue', { item_id: this.item_id, metadata_id: this.metadata_id, values: event.target.value } );
+            },
+            getValue(){
+                try{
+                    return JSON.parse( this.value );
+                }catch(e){
+                    console.log('invalid json');
+                }
+                return this.value;
+            },
+            getErrors(){
+                try{
+                    return JSON.parse( this.errorsMsg );
+                }catch(e){
+                    console.log('invalid json');
+                }
+                return this.errorsMsg;
+            }
         }
 
     }

src/dev-interface/class-tainacan-dev-interface.php

@@ -37,8 +37,8 @@ class DevInterface {
             'nonce' => wp_create_nonce( 'wp_rest' )
         ];
 
-        wp_localize_script( 'wp-settings', 'wpApiSettings', $settings );
-        wp_enqueue_script('tainacan-dev-admin', $TAINACAN_BASE_URL . '/assets/web-components.js');
+        wp_localize_script( 'wp-settings', 'wp_settings', $settings );
+        wp_enqueue_script( 'tainacan-dev-admin', $TAINACAN_BASE_URL . '/assets/web-components.js', [] , null, true);
     }
     
     /**

src/js/axios/axios.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 const instance = axios.create({
-    baseURL: wpApiSettings.root
+    baseURL: wp_settings.root
 });
 
 //instance.defaults.headers.common['something'] = 'none';

src/js/event-bus.js

@@ -0,0 +1,69 @@
+import Vue from 'vue';
+import store from './store/store'
+
+export const eventBus = new Vue({
+    store,
+    data: {
+        componentsTag: [],
+        errors : store.getters['item/getError']
+    },
+    methods : {
+        registerComponent( name ){
+            this.componentsTag.push( name );
+        },
+        listen(){
+            const components = this.getAllComponents();
+            for (let eventElement of components){
+                eventElement.addEventListener('changeValue', (event) => {
+                    if ( event.detail[0] ){
+                        const promisse = this.$store.dispatch('item/sendMetadata', event.detail[0] );
+                        
+                    }
+                });
+            }
+        },
+        setValues(){
+            const metadata = this.$store.getters['item/getMetadata'];
+            if( metadata ){
+                for(let singleMetadata of metadata){
+                    const eventElement = this.getComponentById( singleMetadata.metadata_id );
+                    eventElement.value =  singleMetadata.values;
+                }
+            }
+        },
+        getErrors(){
+            const components = this.getAllComponents();
+            for (let eventElement of components){
+                for(let error of this.errors){
+                    eventElement.errorsMsg =  JSON.stringify( error.error );
+                }
+            }
+
+        },
+        getAllComponents(){
+            const components = [];
+            for( let component of this.componentsTag ){
+                const eventElements = document.getElementsByTagName( component );
+                if( eventElements ) {
+                    for (let eventElement of eventElements){
+                        components.push( eventElement );
+                    }
+                }
+            }
+            return components;
+        },
+        getComponentById( metadata_id ){
+            for( let component of this.componentsTag ){
+                const eventElements = document.getElementsByTagName( component );
+                if( eventElements ) {
+                    for (let eventElement of eventElements){
+                        if( eventElement.metadata_id === metadata_id ){
+                            return eventElement;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+});

src/js/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 
 // include vue-custom-element plugin to Vue
 import VueCustomElement from 'vue-custom-element';
+import { eventBus } from './event-bus';
 
 Vue.use(VueCustomElement);
 
@@ -13,10 +14,15 @@ import Radio from '../classes/field-types/radio/Radio.vue';
 import Numeric from '../classes/field-types/numeric/Numeric.vue';
 import Date from '../classes/field-types/date/Date.vue';
 
+
 Vue.customElement('tainacan-text', Text);
 Vue.customElement('tainacan-textarea', Textarea);
 Vue.customElement('tainacan-selectbox', Selectbox);
 Vue.customElement('tainacan-checkbox', Checkbox);
 Vue.customElement('tainacan-radio', Radio);
 Vue.customElement('tainacan-numeric', Numeric);
+eventBus.registerComponent( 'tainacan-numeric' );
+
 Vue.customElement('tainacan-date', Date);
+
+eventBus.listen();

src/js/store/modules/item/actions.js

@@ -1,6 +1,7 @@
 import axios from '../../../axios/axios';
 
 export const sendMetadata = ( { commit }, { item_id, metadata_id, values }) => {
+   return new Promise( ( resolve, reject ) => {
        axios.post('/metadata/item/'+item_id, {
            metadata_id: metadata_id,
            values: values
@@ -9,11 +10,14 @@ export const sendMetadata = ( { commit }, { item_id, metadata_id, values }) => {
                console.log( 'success',res.data );
                commit('setSingleMetadata', { item_id: item_id, metadata_id: metadata_id, values: values });
                commit('removeError', { metadata_id: metadata_id });
+               resolve( res.data );
            })
            .catch(error => {
-            console.log( 'error',error.response.data[1] );
+               console.log( 'error',error.response );
                commit('setSingleMetadata', { item_id: item_id, metadata_id: metadata_id, values: values });
-            commit('setError', { item_id: item_id, metadata_id: metadata_id, value: values, error: error.response.data[0].errors  });
+               commit('setError', { item_id: item_id, metadata_id: metadata_id, value: values, error: error.response.data.errors  });
+               reject( error.response );
+           });
    });
 };
 

src/js/store/modules/item/mutations.js

@@ -1,3 +1,4 @@
+import Vue from 'vue';
 
 export const setItem = ( state, item ) => {
     state.item = item;
@@ -10,7 +11,8 @@ export const setMetadata = ( state, metadata) => {
 export const setSingleMetadata = ( state, metadata) => {
     let index = state.metadata.findIndex(itemMetadata => itemMetadata.metadata_id === metadata.metadata_id);
     if ( index >= 0){
-        state.metadata[index] = metadata;
+        //state.metadata[index] = metadata;
+        Vue.set( state.metadata, index, metadata );
     }else{
         state.metadata.push( metadata );
     }
@@ -19,7 +21,8 @@ export const setSingleMetadata = ( state, metadata) => {
 export const setError = ( state, metadata ) => {
     let index = state.error.findIndex(itemMetadata => itemMetadata.metadata_id === metadata.metadata_id);
     if ( index >= 0){
-        state.error[index] = metadata;
+        //state.error[index] = metadata;
+        Vue.set( state.error, index, metadata );
     }else{
         state.error.push( metadata );
     }