|
@@ -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()
|
|
|
}
|
|
|
}
|
|
|
}
|