drafted router with vue-router, drafted search results display page

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

@@ -0,0 +1,40 @@
+<template>
+  <div id="Base">
+    <h1>Base</h1>
+    <div class="results">
+      <ul>
+        <li v-for="item in items" v-bind:key="item.nid">
+          <Card :item="item"/>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+
+<script>
+
+import Card from 'vuejs/components/Content/Card'
+
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "Base",
+  data: () => ({
+
+  }),
+  computed: {
+    ...mapState({
+      items: state => state.Search.items
+    })
+  },
+  components: {
+    Card
+  }
+
+}
+
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,20 @@
+<template>
+  <div class="card">
+    <h1>{{ item.title }}</h1>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "Card",
+  props: ['item'],
+  data: () => ({
+
+  })
+}
+
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,55 @@
+
+<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()
+      }
+    }
+    // compile the html src (coming from parent with props or from ajax call)
+    if(this.template_src){
+      this.template = Vue.compile(this.template_src)
+      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 ...')
+    }else{
+      return this.template.render.call(this)
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,21 @@
+<template lang="html">
+  <div id="main-content" v-html="html"></div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  props:['html'],
+  computed: {
+    ...mapState({
+      token: state => state.User.token,
+      isloggedin: state => state.User.isloggedin
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -1,18 +1,30 @@
 <template lang="html">
-  <div id="main-content" v-html="html"></div>
+  <div :id="id">
+    <router-view name="home" :html="html"></router-view>
+    <router-view name="base"></router-view>
+  </div>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex'
 
+import router from 'vuejs/route'
+
 export default {
-  props:['html'],
-  computed: {
-    ...mapState({
-      token: state => state.User.token,
-      isloggedin: state => state.User.isloggedin
-    })
-  }
+  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);
+  // }
 }
 </script>
 

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

@@ -2,48 +2,30 @@
 
 import Vue from 'vue'
 
+import router from 'vuejs/route'
+
 import { mapState, mapActions } from 'vuex'
 
 export default {
+  router,
   props: ['form'],
   data() {
     return {
-      template: null
-      // keys: "",
-      // autocomplete: ""
+      template: null,
+      keys: "",
+      autocomplete: ""
     }
   },
-  computed: {
-    // ...mapState(['Search'])
-    // ...mapState({
-    //   // keys: state => state.Search.keys,
-    //   autocomplete: state => state.Search.autocomplete
-    // }),
-    keys: {
-      get(){
-        return this.$store.state.Search.keys
-      },
-      set(value){
-        this.$store.commit('Search/setKeys', value)
-      }
-    },
-    autocomplete: {
-      get(){
-        return this.$store.state.Search.autocomplete
-      },
-      set(value){
-        this.$store.commit('Search/setAutocomplete', value)
-      }
-    }
-
-  },
   methods: {
     ...mapActions({
-      getResults: 'Search/getResults'
+      newSearch: 'Search/newSearch'
     }),
     submit() {
       console.log("search clicked", this.keys, this.autocomplete);
-      this.getResults();
+      this.newSearch(this.keys, this.autocomplete)
+        .then(() => {
+          this.$router.push({name:'base'})
+        });
     },
     onAutoCompleteSelect(event, ui){
       event.preventDefault();