refactored user blocks using ajax loaded drupal's html as template for vue

web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue

@@ -0,0 +1,84 @@
+<script>
+
+import Vue from 'vue'
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  props: ['title', 'block'],
+  data () {
+    return {
+      template: null,
+      mail: '',
+      password: ''
+    }
+  },
+  computed: {
+    ...mapState(['User'])
+  },
+  methods: {
+    ...mapActions({
+      userLogin: 'User/userLogin'
+    }),
+    login () {
+      this.userLogin({
+        mail: this.mail,
+        pass: this.password
+      })
+    },
+    request_password () {
+      console.log('request_password');
+    },
+    create_account () {
+      console.log('create_account');
+    }
+  },
+  beforeMount() {
+    console.log('LoginBlock beforeMount', this._props.block);
+    if(this._props.block){
+      // console.log('LoginBlock beforeMount if this._props.block ok');
+      this.template = Vue.compile(this._props.block)
+      this.$options.staticRenderFns = [];
+      this._staticTrees = [];
+      this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
+    }
+  },
+  mounted(){
+    // console.log('LoginBlock mounted');
+    Drupal.attachBehaviors(this.$el);
+  },
+  render(h) {
+    // console.log('LoginBlock render');
+    if(!this.template){
+      // console.log('LoginBlock render NAN');
+      return h('span', 'Loading ...')
+    }else{
+      // console.log('LoginBlock render template');
+      return this.template.render.call(this)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  // section{
+  //   max-width:300px;
+  // }
+  // input{
+  //   display:block;
+  //   max-width:100%;
+  //   margin:0.5em 0 0 0;
+  // }
+  // button{
+  //   margin:0.5em 0 0 0;
+  // }
+  // ul{
+  //   margin:0; padding:0.5em 0 0 0;
+  // }
+  // li{
+  //   list-style:none;
+  //   margin:0.5em 0 0 0; padding:0;
+  //   font-size:0.882em;
+  // }
+  // a{
+  // }
+</style>

web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue

@@ -9,7 +9,7 @@
 <script>
 import SearchForm from 'vuejs/components/Form/SearchForm'
 import { mapState, mapActions } from 'vuex'
-import { MSAPI } from 'vuejs/api/msapi-axios'
+import { MA } from 'vuejs/api/ma-axios'
 
 export default {
   props: ['blockid', 'formhtml'],
@@ -23,17 +23,17 @@ export default {
       canSearch: state => state.User.canSearch
     }),
     displayform(){
-      console.log('computed displayform');
+      // console.log('computed displayform');
       return this.canSearch && this.form
     }
   },
   beforeMount() {
-    console.log('SearchBlock beforeMount');
+    // console.log('SearchBlock beforeMount');
     this.form = this.formhtml
   },
   watch: {
     canSearch(new_value, old_value) {
-      console.log('canSearch changed, old: '+old_value+", new: "+new_value);
+      // console.log('canSearch changed, old: '+old_value+", new: "+new_value);
       if(new_value && !this.form){
         this.getSearchForm()
       }
@@ -44,9 +44,9 @@ export default {
   },
   methods: {
     getSearchForm(){
-      MSAPI.get(`/search_form`)
+      MA.get(`/materio_sapi/search_form`)
         .then(({data}) => {
-          console.log("getSearchForm");
+          // console.log("getSearchForm");
           this.form = data.rendered
         })
         .catch(( error ) => {

web/themes/custom/materiotheme/vuejs/components/Block/UserBlock.vue

@@ -1,23 +1,51 @@
 <template lang="html">
   <UserTools v-if="isloggedin" />
-  <Login v-bind:title="title" v-bind:form="form" v-else />
+  <LoginBlock v-bind:title="title" v-bind:block="block" v-else/>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex'
 
-import Login from 'vuejs/components/User/Login'
+import LoginBlock from 'vuejs/components/Block/LoginBlock'
 import UserTools from 'vuejs/components/User/UserTools'
 
+import { MA } from 'vuejs/api/ma-axios'
+
 export default {
-  props: ['title', 'form'],
+  props: ['title', 'loginblock'],
+  data(){
+    return {
+      block: null
+    }
+  },
   computed: {
     ...mapState({
       isloggedin: state => state.User.isloggedin
     })
   },
+  beforeMount() {
+    console.log('UserBlock beforeMount');
+    if(this.loginblock){
+      this.block = this.loginblock
+    }else{
+      this.getLoginBlock()
+    }
+
+  },
+  methods: {
+    getLoginBlock(){
+      MA.get(`/materio_user/login_block`)
+        .then(({data}) => {
+          // console.log("getLoginBlock data", data);
+          this.block = data.rendered
+        })
+        .catch(( error ) => {
+          console.warn('Issue with getLoginBlock', error)
+        })
+    }
+  },
   components: {
-    Login,
+    LoginBlock,
     UserTools
   }
 }

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -1,16 +1,15 @@
 <script>
 
 import Vue from 'vue'
-import { MSAPI } from 'vuejs/api/msapi-axios'
 
 export default {
+  props: ['form'],
   data() {
     return {
       template: null,
       typed: ""
     }
   },
-  props: ['form'],
   methods: {
     keyup() {
       console.log("search typed", this.typed);
@@ -20,66 +19,29 @@ export default {
     }
   },
   beforeMount() {
-    console.log('SearchForm beforeMount');
+    // console.log('SearchForm beforeMount');
     if(this._props.form){
-      console.log('SearchForm beforeMount if this._props.form ok');
-      this.template = Vue.compile(this._props.form).render
-    }
-  },
-  beforeUpdate() {
-    console.log('SearchForm beforeUpdate');
-    if(this._props.form){
-      console.log('SearchForm beforeUpdate if this._props.form ok');
-      this.template = Vue.compile(this._props.form).render
+      // console.log('SearchForm beforeMount if this._props.form ok');
+      this.template = Vue.compile(this._props.form)
+      // https://github.com/vuejs/vue/issues/9911
+      this.$options.staticRenderFns = [];
+      this._staticTrees = [];
+      this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
     }
   },
   mounted(){
-    console.log('SearchForm mounted');
-    // Drupal.attachBehaviors(this.$el);
-  },
-  updated(){
-    console.log('SearchForm updated');
-    // Drupal.attachBehaviors(this.$el);
+    // console.log('SearchForm mounted');
+    Drupal.attachBehaviors(this.$el);
   },
   render(h) {
-    console.log('searchForm render');
+    // console.log('searchForm render');
     if(!this.template){
       return h('span', 'Loading ...')
     }else{
-      return this.template()
+      return this.template.render.call(this)
     }
   }
 }
-// searchform: (resolve, reject) => (
-//   MSAPI.get(`/search_form`)
-//     .then(({data}) => {
-//       // console.log("materiosapisearchform", data);
-//       resolve({
-//         data() {
-//           return {
-//             typed:""
-//           }
-//         },
-//         methods: {
-//           keyup() {
-//             console.log("search typed", this.typed);
-//           },
-//           submit() {
-//             console.log("search clicked");
-//           }
-//         },
-//         mounted() {
-//           Drupal.attachBehaviors(this.$el);
-//         },
-//         template: data.rendered
-//       })
-//     })
-//     .catch(( error ) => {
-//         console.warn('Issue with get searchform', error)
-//         Promise.reject(error)
-//     })
-//
-// )
 </script>
 
 <style lang="scss" scoped>