handled home loading if not available in dom (if drupalSettings.path.isFront == false)

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

@@ -94,7 +94,7 @@ import 'theme/assets/styles/main.scss'
       let main_html = $main_content.innerHTML
       _v_main_content = new Vue({
         store,
-        render: h => h(VMainContent, {props:{id:id, html:main_html}})
+        render: h => h(VMainContent, {props:{id:id, html:main_html, isfront:drupalSettings.path.isFront}})
       }).$mount('#'+id)
       // console.log('initTestVContent', v_test_content);
     }

web/themes/custom/materiotheme/vuejs/components/Content/Base.vue

@@ -28,6 +28,31 @@ export default {
       items: state => state.Search.items
     })
   },
+  methods: {
+    ...mapActions({
+      newSearch: 'Search/newSearch'
+    })
+  },
+  created() {
+    // laucnh a search if params exists in url query
+    console.log('Base created() location',window.location);
+    let params = new URLSearchParams(window.location.search)
+    if(params.has('keys')){
+      this.$store.commit('Search/setKeys', params.get('keys'))
+      this.newSearch()
+    }
+  },
+  // beforeRouteEnter (to, from, next) {
+  //   console.log('Base beforeRouteEnter');//, to, from, next);
+  //   next()
+  // },
+  beforeRouteUpdate (to, from, next) {
+    console.log('Base beforeRouteUpdate', to, from, next);
+    this.$store.commit('Search/setKeys', to.query.keys)
+    this.$store.commit('Search/setTerm', to.query.term)
+    this.newSearch()
+    next()
+  },
   components: {
     Card
   }

web/themes/custom/materiotheme/vuejs/components/Content/Home.vue

@@ -1,45 +1,25 @@
-
 <script>
 
 import Vue from 'vue'
-import { MA } from 'vuejs/api/ma-axios'
 
 export default {
   props: ['html'], // get the html from parent with props
   data() {
     return {
-      template_src: null, // record the prop into data as it will be available in every hooks
       template: null // compiled template from html used in render
     }
   },
   beforeMount() {
-    // console.log('Home beforeMount this.html', this.html);
-    if(!this.template_src){
-      if(this.html){ // if html prop is available record it has data
-        this.template_src = this.html
-      }else{ // else get it from ajax (e.g. if we didn't load the page from home)
-        this.getHomeHtml()
-      }
-    }
+    // console.log('Home beforeMount');
     // compile the html src (coming from parent with props or from ajax call)
-    if(this.template_src){
-      this.template = Vue.compile(this.template_src)
+    if(this.html){
+      // console.log('html', this.html);
+      this.template = Vue.compile(this.html)
       this.$options.staticRenderFns = []
       this._staticTrees = []
       this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)))
     }
   },
-  methods: {
-    getHomeHtml(){
-      MA.get(`/materio_user/login_block`)
-        .then(({data}) => {
-          this.template_src = data.rendered // record the html src into data
-        })
-        .catch(( error ) => {
-          console.warn('Issue with getHomeHtml', error)
-        })
-    }
-  },
   render(h) {
     if(!this.template){
       return h('span', 'Loading ...')

web/themes/custom/materiotheme/vuejs/components/Content/MainContent.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <div :id="id">
-    <router-view name="home" :html="html"></router-view>
+    <router-view name="home" :html="home_template_src"></router-view>
     <router-view name="base"></router-view>
   </div>
 </template>
@@ -8,23 +8,40 @@
 <script>
 import { mapState, mapActions } from 'vuex'
 
+import { MA } from 'vuejs/api/ma-axios'
 import router from 'vuejs/route'
 
 export default {
   router,
-  props:['id','html']
-  // computed: {
-  //   ...mapState({
-  //     token: state => state.User.token,
-  //     isloggedin: state => state.User.isloggedin
-  //   })
-  // },
-  // beforeMount() {
-  //   console.log('MainContent beforeMount this.html', this.html);
-  // },
-  // mounted() {
-  //   console.log('MainContent this.$router', this.$router);
-  // }
+  props:['id','html', 'isfront'],
+  data() {
+    return {
+      home_template_src: null
+    }
+  },
+  beforeMount() {
+    // console.log('MainContent beforeMount this.html', this.html);
+    if(!this.home_template_src){
+      // console.log('no home_template_src');
+      if(this.html && this.isfront){ // if html prop is available and we are landing on home then record it has data
+        this.home_template_src = this.html
+      }else{ // else get it from ajax (e.g. if we didn't load the page from home)
+        this.getHomeHtml()
+      }
+    }
+  },
+  methods: {
+    getHomeHtml(){
+      MA.get('materio_home/ajax/gethome')
+        .then(({data}) => {
+          // console.log('Home getHomeHtml data', data);
+          this.home_template_src = data.rendered // record the html src into data
+        })
+        .catch(( error ) => {
+          console.warn('Issue with getHomeHtml', error)
+        })
+    }
+  }
 }
 </script>
 

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

@@ -4,7 +4,7 @@ import Vue from 'vue'
 
 import router from 'vuejs/route'
 
-import { mapState, mapActions } from 'vuex'
+import { mapState } from 'vuex'
 
 export default {
   router,
@@ -12,25 +12,26 @@ export default {
   data() {
     return {
       template: null,
-      keys: "",
-      autocomplete: ""
+      typed: null,
+      autocomplete: null
     }
   },
+  computed: {
+    ...mapState({
+      keys: state => state.Search.keys,
+      term: state => state.Search.term
+    })
+  },
   methods: {
-    ...mapActions({
-      newSearch: 'Search/newSearch'
-    }),
     submit() {
       console.log("search clicked", this.keys, this.autocomplete);
-      this.newSearch(this.keys, this.autocomplete)
-        .then(() => {
-          this.$router.push({name:'base'})
-        });
+      // New search is triggered by Base.vue with router (which will also fill the store)
+      this.$router.push({name:'base', query:{keys:this.typed,term:this.autocomplete}})
     },
     onAutoCompleteSelect(event, ui){
       event.preventDefault();
       // console.log('autoCompleteSelect', event, ui);
-      this.keys = ui.item.label
+      this.typed = ui.item.label
       this.autocomplete = ui.item.value
     }
   },
@@ -46,10 +47,19 @@ export default {
     }
   },
   watch: {
-    keys(){
-      console.log('keys changed', this.keys);
+    keys(n, o){
+      console.log('keys changed', n, o);
+      this.typed = n
+    },
+    term(n, o){
+      console.log('autocomplete changed', n, o);
+      this.autocomplete = n
     }
   },
+  created() {
+    this.typed = this.keys
+    this.autocomplete = this.term
+  },
   mounted(){
     // console.log('SearchForm mounted');
     Drupal.attachBehaviors(this.$el);

web/themes/custom/materiotheme/vuejs/route/index.js

@@ -6,7 +6,10 @@ import Base from 'vuejs/components/Content/Base'
 
 Vue.use(VueRouter)
 
+// https://www.lullabot.com/articles/decoupled-hard-problems-routing
+
 export default new VueRouter({
+  mode: 'history',
   routes: [
     {
       path: '/',
@@ -22,5 +25,12 @@ export default new VueRouter({
         'base': Base
       }
     },
+    // {
+    //   path: '*',
+    //   name: 'notfound',
+    //   components: {
+    //     'notfound': NotFound
+    //   }
+    // }
   ]
 })

web/themes/custom/materiotheme/vuejs/store/modules/search.js

@@ -8,10 +8,10 @@ export default {
   // initial state
   state : {
     keys: "",
-    autocomplete: "",
+    term: "",
     items: [],
-    limit: 15,
-    offset: 0
+    offset: 0,
+    limit: 15
   },
 
   // getters
@@ -25,8 +25,8 @@ export default {
     setKeys (state, keys) {
       state.keys = keys
     },
-    setAutocomplete (state, autocomplete) {
-      state.autocomplete = autocomplete
+    setTerm (state, term) {
+      state.term = term
     },
     resetOffset(state) {
       state.offset = 0
@@ -38,20 +38,19 @@ export default {
 
   // actions
   actions : {
-    newSearch({ dispatch, commit, state }, keys, autocomplete) {
+    newSearch({ dispatch, commit, state }) {
+      console.log('Search newSearch');
       commit('resetOffset')
-      commit('setKeys', keys)
-      commit('setAutocomplete', autocomplete)
       dispatch('getResults')
     },
     getResults ({ dispatch, commit, state }) {
       let params = {
         keys: state.keys,
-        autocomplete: state.autocomplete,
+        term: state.term,
         offset:state.offset,
         limit: state.limit
       }
-      console.log('Search getResults params', params);
+      // console.log('Search getResults params', params);
       let q = qs.stringify(params)
       return MA.get(`/materio_sapi/getresults?`+q)
         .then(({ data }) => {