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

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

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 
 import store from 'vuejs/store'
+import router from 'vuejs/route'
 
 import VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
@@ -15,7 +16,7 @@ import 'theme/assets/styles/main.scss'
 
   var MaterioTheme = function(){
 
-    var _v_user_block, _v_main_content, _v_search_block;
+    var _v_sitebranding_block, _v_user_block, _v_main_content, _v_search_block;
     var _is_front = drupalSettings.path.isFront;
 
     console.log('drupalSettings', drupalSettings);
@@ -30,11 +31,26 @@ import 'theme/assets/styles/main.scss'
     }
 
     function initVues(){
+      initVSiteBrandingBlock()
       initVUserBlock()
       initVMainContent()
       initVSearchBlock()
     }
 
+    function initVSiteBrandingBlock(){
+      _v_sitebranding_block = new Vue({
+        store,
+        router,
+        el: '#block-sitebranding',
+        methods: {
+          onclick(){
+            console.log("Clicked on logo");
+            this.$router.push({name:'home'})
+          }
+        }
+      })
+    }
+
     function initVUserBlock(){
       let mount_point = drupalSettings.user.uid !== 0 ? 'block-userblock' : 'block-userlogin';
       let props = {
@@ -72,13 +88,14 @@ import 'theme/assets/styles/main.scss'
     }
 
     function initVMainContent(){
-      let $main_content = document.querySelector('#main-content')
+      let id = "main-content"
+      let $main_content = document.querySelector('#'+id)
       // console.log('main-content', $main_content);
       let main_html = $main_content.innerHTML
       _v_main_content = new Vue({
         store,
-        render: h => h(VMainContent, {props:{html:main_html}})
+        render: h => h(VMainContent, {props:{id:id, html:main_html}})
-      }).$mount('#main-content')
+      }).$mount('#'+id)
       // console.log('initTestVContent', v_test_content);
     }
 

web/themes/custom/materiotheme/templates/block/block--system-branding-block.html.twig

@@ -19,7 +19,7 @@
   <hgroup class="logo">
     {% if site_name %}
       <h1>
-        <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
+        <a @click.prevent="onclick" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
           {{ site_name }}
         </a>
       </h1>

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'],
+  router,
-  computed: {
+  props:['id','html']
-    ...mapState({
+  // computed: {
-      token: state => state.User.token,
+  //   ...mapState({
-      isloggedin: state => state.User.isloggedin
+  //     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
+      template: null,
-      // keys: "",
+      keys: "",
-      // autocomplete: ""
+      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();

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

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import Home from 'vuejs/components/Content/Home'
+import Base from 'vuejs/components/Content/Base'
+
+Vue.use(VueRouter)
+
+export default new VueRouter({
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      components: {
+        'home': Home
+      }
+    },
+    {
+      path: '/base',
+      name:'base',
+      components: {
+        'base': Base
+      }
+    },
+  ]
+})

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

@@ -9,7 +9,9 @@ export default {
   state : {
     keys: "",
     autocomplete: "",
-    results: {}
+    items: [],
+    limit: 15,
+    offset: 0
   },
 
   // getters
@@ -17,32 +19,44 @@ export default {
 
   // mutations
   mutations : {
-    setResults (state, data) {
+    setItems (state, items) {
-      state.results = data.results
+      state.items = items
     },
     setKeys (state, keys) {
       state.keys = keys
     },
     setAutocomplete (state, autocomplete) {
       state.autocomplete = autocomplete
+    },
+    resetOffset(state) {
+      state.offset = 0
+    },
+    incrementOffset(state) {
+      state.offset += state.limit
     }
   },
 
   // actions
   actions : {
+    newSearch({ dispatch, commit, state }, keys, autocomplete) {
+      commit('resetOffset')
+      commit('setKeys', keys)
+      commit('setAutocomplete', autocomplete)
+      dispatch('getResults')
+    },
     getResults ({ dispatch, commit, state }) {
       let params = {
         keys: state.keys,
         autocomplete: state.autocomplete,
-        offset:0,
+        offset:state.offset,
-        limit: 25
+        limit: state.limit
       }
       console.log('Search getResults params', params);
       let q = qs.stringify(params)
       return MA.get(`/materio_sapi/getresults?`+q)
         .then(({ data }) => {
           console.log('search MA getresults data', data)
-          commit('setResults', data)
+          commit('setItems', data.items)
         })
         .catch(( error ) => {
             console.warn('Issue with getResults', error)