drafted materio_sapi search block vue integration

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -1,7 +1,10 @@
 import Vue from 'vue'
+
 import store from 'vuejs/store'
-import VUserBlock from 'vuejs/components/User/UserBlock'
+
+import VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
+import VSearchBlock from 'vuejs/components/Block/SearchBlock'
 
 import { mapState } from 'vuex'
 
@@ -12,9 +15,8 @@ import 'theme/assets/styles/main.scss'
 
   var MaterioTheme = function(){
 
-    var v_user_block, v_main_content;
-    // var _is_front = drupalSettings.path.isFront;
-
+    var _v_user_block, _v_main_content, _v_search_block;
+    var _is_front = drupalSettings.path.isFront;
 
     console.log('drupalSettings', drupalSettings);
 
@@ -30,15 +32,20 @@ import 'theme/assets/styles/main.scss'
     function initVues(){
       initUserVBlock()
       initVMainContent()
+      initVSearchBlock()
     }
 
     function initUserVBlock(){
       let mount_point = drupalSettings.user.uid !== 0 ? '#block-userblock' : '#block-userlogin';
       let props = {
-        title: ""
+        title: "",
+        form:""
       };
       switch (mount_point) {
         case '#block-userlogin':
+          // let $form = document.getElementById('user-login-form');
+          // console.log('login form html', $form);
+          // props.form = $form.outerHTML
           let $block = document.querySelector(mount_point);
           props = {
             title: $block.querySelector('h2').textContent,
@@ -63,13 +70,13 @@ import 'theme/assets/styles/main.scss'
       }
       // console.log(props);
 
-      v_user_block = new Vue({
+      _v_user_block = new Vue({
         store,
-        computed: {
-          ...mapState({
-            isloggedin: state => state.User.isloggedin
-          })
-        },
+        // computed: {
+        //   ...mapState({
+        //     isloggedin: state => state.User.isloggedin
+        //   })
+        // },
         created () {
           if(drupalSettings.user.uid !== 0){
             this.$store.commit('User/setUid', drupalSettings.user.uid)
@@ -78,20 +85,44 @@ import 'theme/assets/styles/main.scss'
         },
         render: h => h(VUserBlock, {props:props})
       }).$mount(mount_point)
-      console.log('initUserVBlock', v_user_block);
+      // console.log('initUserVBlock', _v_user_block);
     }
 
     function initVMainContent(){
       let $main_content = document.querySelector('#main-content')
-      console.log('main-content', $main_content);
+      // console.log('main-content', $main_content);
       let main_html = $main_content.innerHTML
-      v_main_content = new Vue({
+      _v_main_content = new Vue({
         store,
         render: h => h(VMainContent, {props:{html:main_html}})
       }).$mount('#main-content')
       // console.log('initTestVContent', v_test_content);
     }
 
+    function initVSearchBlock(){
+      // console.log('initVSearchBlock');
+      let id = "block-materiosapisearchblock"
+      let $search_block = document.getElementById(id)
+      var formhtml = null
+      if($search_block){
+        // get the search form html to pass it as template to the vue
+        // we gain display speed vs async downloaded data
+        formhtml = $search_block.innerHTML
+      }else{
+        // else create the empty block to fill it later with async data
+        $search_block = document.createElement('div')
+        $search_block.setAttribute('id', id)
+        let $region = document.getElementById('content-top');
+        $region.appendChild($search_block);
+      }
+
+      // in any case create the vue
+      _v_search_block = new Vue({
+        store,
+        render: h => h(VSearchBlock, {props:{blockid:id, formhtml:formhtml}})
+      }).$mount('#'+id)
+    }
+
     init()
   } // end MaterioTheme()