added prev next button to articles

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

@@ -5,47 +5,51 @@
   <article class="article" v-else>
     <header>
       <h1>{{ content.title }}</h1>
-      <div class="taxonomy">
-        <div class="thesaurus">
-          <ul>
-            <li
-              v-for="term in content.field_thesaurus" v-bind:key="term.id"
-              >{{ term.name }}</li>
-          </ul>
-        </div>
-        <div class="tags">
-          <ul>
-            <li
-              v-for="term in content.field_tags" v-bind:key="term.id"
-              >{{ term.name }}</li>
-          </ul>
-        </div>
-      </div>
-      <div class="body" v-html="content.body"></div>
-      <div class="linked-materials">
+      <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>
-          <li v-for="node in content.field_linked_materials" v-bind:key="node.id">
-            <section :uuid="node.id">
-              <h1>{{ node.title }}</h1>
-              <h3>{{ node.field_reference }}</h3>
-              <h2>{{ node.field_short_description }}</h2>
-            </section>
-          </li>
+          <li
+            v-for="term in content.field_thesaurus" v-bind:key="term.id"
+            >{{ term.name }}</li>
         </ul>
       </div>
-      <div class="visuels">
-        <figure
-          v-for="visuel in content.field_visuel" v-bind:key="visuel.id"
-        >
-          <img
-            :src="visuel.src"
-            :alt="visuel.alt"
-            :title="visuel.title"
-          />
-          <caption></caption>
-        </figure>
+      <div class="tags">
+        <ul>
+          <li
+            v-for="term in content.field_tags" v-bind:key="term.id"
+            >{{ term.name }}</li>
+        </ul>
       </div>
-    </header>
+    </div>
+    <div class="body" v-html="content.body"></div>
+    <div class="linked-materials">
+      <ul>
+        <li v-for="node in content.field_linked_materials" v-bind:key="node.id">
+          <section :uuid="node.id">
+            <h1>{{ node.title }}</h1>
+            <h3>{{ node.field_reference }}</h3>
+            <h2>{{ node.field_short_description }}</h2>
+          </section>
+        </li>
+      </ul>
+    </div>
+    <div class="visuels">
+      <figure
+        v-for="visuel in content.field_visuel" v-bind:key="visuel.id"
+      >
+        <img
+          :src="visuel.src"
+          :alt="visuel.alt"
+          :title="visuel.title"
+        />
+        <caption></caption>
+      </figure>
+    </div>
   </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]
+      }
     }
   }
 }