init vuex and axios

.babelrc

@@ -1,5 +1,6 @@
 {
   "presets": [
-    ["es2015", { "modules": false }]
+    ["es2015", { "modules": false }],
+    ["stage-2"]
   ]
 }

package.json

@@ -8,18 +8,21 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
+    "axios": "^0.17.1",
     "bootstrap": "^3.3.7",
-    "vue": "^2.0.1"
+    "vue": "^2.0.1",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
     "babel-loader": "^6.0.0",
     "babel-preset-es2015": "^6.0.0",
+    "babel-preset-stage-2": "^6.24.1",
     "cross-env": "^3.0.0",
     "css-loader": "^0.25.0",
     "file-loader": "^0.9.0",
-    "vue-loader": "^9.7.0",
     "vue-custom-element": "^1.0.13",
+    "vue-loader": "^9.7.0",
     "webpack": "2.1.0-beta.25",
     "webpack-dev-server": "2.1.0-beta.0"
   }

src/classes/field-types/text/Text.vue

@@ -1,14 +1,39 @@
 <template>
     <div class="component">
         <p>{{ name }}</p>
-        <input type="text">
+        <input type="text" v-model.lazy="value" >
     </div>
 </template>
 
 <script>
+    import store from '../../../js/store/store'
+    import { mapGetters } from 'vuex';
+
+
     export default {
+        store,
         props: {
-            name: { type: String }
+            name: { type: String },
+            item: { type: Number },
+            metadata: { type: Number },
+        },
+        computed:{
+            value : {
+                get(){
+                    let metadata = this.$store.getters['item/getMetadata'].find(metadata => metadata.metadata_id === this.metadata );
+                    if( metadata ){
+                        return  metadata.values;
+                    }
+                },
+                set( value ){
+                    let metadata = this.$store.getters['item/getMetadata'].find(metadata => metadata.metadata_id === this.metadata );
+                    if( ! metadata ){
+                        this.$store.dispatch('item/addMetadata', { item_id: this.item, metadata_id: this.metadata, values: value });
+                    }else{
+                        this.$store.dispatch('item/updateMetadata', { item_id: this.item, metadata_id: this.metadata, values: value });
+                    }
+                }
+            }
         }
     }
 </script>

src/classes/field-types/text/class-tainacan-text.php

@@ -21,7 +21,9 @@ class Text extends Field_Type {
      */
 
     public function render( $metadata ){
-        return '<tainacan-text name="'.$metadata->get_name().'"></tainacan-text>';
+        return '<tainacan-text metadata="'.$metadata->get_id().'" 
+                               item="'.get_the_ID().'"      
+                               name="'.$metadata->get_name().'"></tainacan-text>';
     }
 
     /**

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

@@ -30,6 +30,8 @@ class DevInterface {
     
     function add_admin_js() {
         global $TAINACAN_BASE_URL;
+        wp_enqueue_script('wp-settings',$TAINACAN_BASE_URL . '/js/wp-settings.js');
+        wp_localize_script( 'wp-settings', 'wpApiSettings', array( 'root' => esc_url_raw( rest_url() ), 'nonce' => wp_create_nonce( 'wp_rest' ) ) );
         wp_enqueue_script('tainacan-dev-admin', $TAINACAN_BASE_URL . '/assets/web-components.js');
     }
     

src/js/axios/axios.js

@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+const instance = axios.create({
+    baseURL: wpApiSettings.api_root
+});
+
+//instance.defaults.headers.common['something'] = 'none';
+
+export default instance;

src/js/main.js

@@ -1,4 +1,6 @@
 import Vue from 'vue'
+import store from './store/store'
+
 // include vue-custom-element plugin to Vue
 import VueCustomElement from 'vue-custom-element';
 

src/js/store/modules/item.js

@@ -0,0 +1,76 @@
+import axios from '../../axios/axios';
+
+const state = {
+    item: null,
+    metadata:[],
+    isInit:false,
+};
+
+const mutations = {
+    setItem( state, item){
+        state.item = item;
+    },
+    setMetadata( state, metadata){
+        state.metadata = metadata;
+    },
+    addMetadata( state, metadata){
+        state.metadata.push( metadata );
+    },
+    updateMetadata( state, metadata){
+        var index = state.metadata.findIndex(itemMetadata => itemMetadata.metadata_id === metadata.metadata_id);
+        state.metadata[index] = metadata;
+    },
+    setInit( state, init){
+        state.isInit = init;
+    },
+};
+
+const actions = {
+    initItem: ( { commit }, item) => {
+        commit('setItem', { id: 1, title: 'item' });
+    },
+    initMetadata: ( { commit }, item) => {
+        commit('setMetadata', [
+            { item_id: 1, metadata_id: 1, values: [ 'valor' ] }
+        ]);
+    },
+    addMetadata: ( { commit }, { item_id, metadata_id, values }) => {
+        // axios.post('/metadata/item/'+item, {
+        //     metadata_id: metadata,
+        //     values: values
+        // })
+        // .then( res => {
+        //     commit('setMetadata', res);
+        // })
+        // .catch(error => console.log( error ));
+        commit('addMetadata', { item_id: item_id, metadata_id: metadata_id, values: values });
+    },
+    updateMetadata: ( { commit }, { item_id, metadata_id, values }) => {
+        // axios.post('/metadata/item/'+item, {
+        //     metadata_id: metadata,
+        //     values: values
+        // })
+        // .then( res => {
+        //     commit('setMetadata', res);
+        // })
+        // .catch(error => console.log( error ));
+        commit('updateMetadata', { item_id: item_id, metadata_id: metadata_id, values: values });
+    }
+};
+
+const getters = {
+    getItem: state => {
+        return state.item;
+    },
+    getMetadata: state => {
+        return state.metadata;
+    }
+};
+
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions,
+    getters
+}

src/js/store/store.js

@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+import item from './modules/item';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    modules: {
+        item
+    }
+})