added prev next button to articles

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

@@ -5,6 +5,11 @@
   <article class="article" v-else>
     <header>
       <h1>{{ content.title }}</h1>
+      <nav v-if="index != -1">
+        <a @click.prevent="onPrev" href="#">prev : {{ prevnext.prev.title }}</a>
+        <a @click.prevent="onNext" href="#">next : {{ prevnext.next.title }}</a>
+      </nav>
+    </header>
     <div class="taxonomy">
       <div class="thesaurus">
         <ul>
@@ -45,7 +50,6 @@
         <caption></caption>
       </figure>
     </div>
-    </header>
   </article>
 </template>
 
@@ -53,6 +57,7 @@
 import router from 'vuejs/route'
 import { JSONAPI } from 'vuejs/api/json-axios'
 import qs from 'querystring'
+import { mapState, mapActions } from 'vuex'
 
 export default {
   name: "Article",
@@ -60,6 +65,8 @@ export default {
   props: ['item'],
   data(){
     return {
+      index:-1,
+      prevnext:{},
       uuid:null,
       content:null
     }
@@ -68,6 +75,20 @@ export default {
     this.getArticle()
   },
   methods: {
+    ...mapActions({
+      getItemIndex: 'Blabla/getItemIndex',
+      getPrevNextItems: 'Blabla/getPrevNextItems'
+    }),
+    getIndex(){
+      console.log("Article getIndex");
+      this.getItemIndex(this.uuid).then((index) => {
+        this.index = index
+        // console.log('article index', index, this);
+        this.getPrevNextItems(index).then((pn) => {
+          this.prevnext = pn
+        })
+      })
+    },
     getArticle(){
       console.log(this.$route);
       // get the article uuid
@@ -82,6 +103,7 @@ export default {
       }
 
       if(this.uuid){
+        this.getIndex()
         this.loadArticle()
       }else{
         // if for any reason we dont have the uuid
@@ -157,6 +179,30 @@ export default {
 
 
       console.log('article.content',this.content);
+    },
+    onNext(){
+      console.log('clicked on next', this.prevnext.next);
+      let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')
+      this.$router.push({
+        name:`article`,
+        params: { alias:alias },
+        query: { uuid: this.prevnext.next.uuid }
+      })
+    },
+    onPrev(){
+      console.log('clicked on prev', this.prevnext.next);
+      let alias = this.prevnext.prev.view_node.replace(/^.?\/blabla\//g, '')
+      this.$router.push({
+        name:`article`,
+        params: { alias:alias },
+        query: { uuid: this.prevnext.prev.uuid }
+      })
+    }
+  },
+  watch: {
+    '$route' (to, from) {
+      console.log('route change')
+      this.getArticle()
     }
   }
 }

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

@@ -53,10 +53,21 @@ export default {
         })
     },
     nextPage ({ dispatch, commit, state }, $infiniteLoadingstate) {
-      console.log("Search nextPage", $infiniteLoadingstate);
+      console.log("blabla nextPage", $infiniteLoadingstate);
       commit('incrementPage')
       commit('setInfiniteState', $infiniteLoadingstate)
       dispatch('getItems')
+    },
+    getItemIndex({ dispatch, commit, state}, uuid) {
+      return state.items.findIndex((e) =>{
+        return e.uuid == uuid
+      })
+    },
+    getPrevNextItems({ dispatch, commit, state }, index) {
+      return {
+        prev:state.items[index-1],
+        next:state.items[index+1]
+      }
     }
   }
 }