From 48a79a24ddd0619a60e08d018beac09d9fec5252 Mon Sep 17 00:00:00 2001 From: Eduardo humberto Date: Mon, 11 Dec 2017 17:02:59 -0200 Subject: [PATCH] init vuex and axios --- .babelrc | 3 +- package.json | 7 +- src/classes/field-types/text/Text.vue | 29 ++++++- .../field-types/text/class-tainacan-text.php | 4 +- .../class-tainacan-dev-interface.php | 4 +- src/js/axios/axios.js | 9 +++ src/js/main.js | 4 +- src/js/store/modules/item.js | 76 +++++++++++++++++++ src/js/store/store.js | 12 +++ src/js/wp-settings.js | 0 10 files changed, 140 insertions(+), 8 deletions(-) create mode 100644 src/js/axios/axios.js create mode 100644 src/js/store/modules/item.js create mode 100644 src/js/store/store.js create mode 100644 src/js/wp-settings.js diff --git a/.babelrc b/.babelrc index b278904b6..3993cf614 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,6 @@ { "presets": [ - ["es2015", { "modules": false }] + ["es2015", { "modules": false }], + ["stage-2"] ] } \ No newline at end of file diff --git a/package.json b/package.json index 78622ff3b..c25d76b5f 100644 --- a/package.json +++ b/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" } diff --git a/src/classes/field-types/text/Text.vue b/src/classes/field-types/text/Text.vue index bbf095e74..b0c09a4a4 100644 --- a/src/classes/field-types/text/Text.vue +++ b/src/classes/field-types/text/Text.vue @@ -1,14 +1,39 @@ diff --git a/src/classes/field-types/text/class-tainacan-text.php b/src/classes/field-types/text/class-tainacan-text.php index da101b825..283fc454a 100644 --- a/src/classes/field-types/text/class-tainacan-text.php +++ b/src/classes/field-types/text/class-tainacan-text.php @@ -21,7 +21,9 @@ class Text extends Field_Type { */ public function render( $metadata ){ - return ''; + return ''; } /** diff --git a/src/dev-interface/class-tainacan-dev-interface.php b/src/dev-interface/class-tainacan-dev-interface.php index 68e7c0d60..ac80ffa96 100644 --- a/src/dev-interface/class-tainacan-dev-interface.php +++ b/src/dev-interface/class-tainacan-dev-interface.php @@ -10,7 +10,7 @@ class DevInterface { var $has_errors = false; public function __construct() { - + add_action('add_meta_boxes', array(&$this, 'register_metaboxes')); add_action('save_post', array(&$this, 'save_post'), 10, 2); add_action('admin_enqueue_scripts', array(&$this, 'add_admin_js')); @@ -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'); } diff --git a/src/js/axios/axios.js b/src/js/axios/axios.js new file mode 100644 index 000000000..5f05aab9f --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index 556104795..b73b9b0e7 100644 --- a/src/js/main.js +++ b/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'; @@ -18,4 +20,4 @@ Vue.customElement('tainacan-selectbox', Selectbox); Vue.customElement('tainacan-checkbox', Checkbox); Vue.customElement('tainacan-radio', Radio); Vue.customElement('tainacan-numeric', Numeric); -Vue.customElement('tainacan-date', Date); \ No newline at end of file +Vue.customElement('tainacan-date', Date); diff --git a/src/js/store/modules/item.js b/src/js/store/modules/item.js new file mode 100644 index 000000000..528886e09 --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/src/js/store/store.js b/src/js/store/store.js new file mode 100644 index 000000000..398070011 --- /dev/null +++ b/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 + } +}) \ No newline at end of file diff --git a/src/js/wp-settings.js b/src/js/wp-settings.js new file mode 100644 index 000000000..e69de29bb