|
|
@@ -1,16 +1,29 @@
|
|
|
<template>
|
|
|
- <div class="loading" v-if="!content">
|
|
|
+ <div class="loading" v-if="!content || loading">
|
|
|
<span>Loading ...</span>
|
|
|
</div>
|
|
|
<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">
|
|
|
+ <nav class="prevnext top">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a
|
|
|
+ @click.prevent="onPrev"
|
|
|
+ href="#"
|
|
|
+ v-if="prevnext.prev"
|
|
|
+ v-html="prevnext.prev.title"
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a
|
|
|
+ @click.prevent="onNext"
|
|
|
+ href="#"
|
|
|
+ v-if="prevnext.next"
|
|
|
+ v-html="prevnext.next.title"
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ <section class="taxonomy">
|
|
|
<div class="thesaurus">
|
|
|
<ul>
|
|
|
<li
|
|
|
@@ -25,20 +38,9 @@
|
|
|
>{{ term.name }}</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- </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">
|
|
|
+ </section>
|
|
|
+ <section class="body" v-html="content.body"></section>
|
|
|
+ <section class="visuels">
|
|
|
<figure
|
|
|
v-for="visuel in content.field_visuel" v-bind:key="visuel.id"
|
|
|
>
|
|
|
@@ -49,46 +51,77 @@
|
|
|
/>
|
|
|
<caption></caption>
|
|
|
</figure>
|
|
|
- </div>
|
|
|
+ </section>
|
|
|
+ <aside class="linked-materials">
|
|
|
+ <h3 class="field__label">Linked Materials</h3>
|
|
|
+ <div class="card-list">
|
|
|
+ <ul class="">
|
|
|
+ <li v-for="node in content.field_linked_materials" v-bind:key="node.id">
|
|
|
+ <Card :item="node" />
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </aside>
|
|
|
+ <nav class="prevnext bottom">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a
|
|
|
+ @click.prevent="onPrev"
|
|
|
+ href="#"
|
|
|
+ v-if="prevnext.prev"
|
|
|
+ v-html="prevnext.prev.title"
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a
|
|
|
+ @click.prevent="onNext"
|
|
|
+ href="#"
|
|
|
+ v-if="prevnext.next"
|
|
|
+ v-html="prevnext.next.title"
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
</article>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import router from 'vuejs/route'
|
|
|
+import store from 'vuejs/store'
|
|
|
import { JSONAPI } from 'vuejs/api/json-axios'
|
|
|
import qs from 'querystring'
|
|
|
+import Card from 'vuejs/components/Content/Card'
|
|
|
+
|
|
|
import { mapState, mapActions } from 'vuex'
|
|
|
|
|
|
export default {
|
|
|
name: "Article",
|
|
|
router,
|
|
|
+ store,
|
|
|
props: ['item'],
|
|
|
data(){
|
|
|
return {
|
|
|
index:-1,
|
|
|
prevnext:{},
|
|
|
uuid:null,
|
|
|
- content:null
|
|
|
+ content:null,
|
|
|
+ loading:true,
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ items: state => state.Blabla.items
|
|
|
+ })
|
|
|
+ },
|
|
|
created(){
|
|
|
this.getArticle()
|
|
|
},
|
|
|
methods: {
|
|
|
...mapActions({
|
|
|
+ getItems: 'Blabla/getItems',
|
|
|
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
|
|
|
@@ -103,18 +136,39 @@ export default {
|
|
|
}
|
|
|
|
|
|
if(this.uuid){
|
|
|
- this.getIndex()
|
|
|
this.loadArticle()
|
|
|
+ // get the prev next items
|
|
|
+ if(!this.items.length){
|
|
|
+ // if items list not yet loaded preload them
|
|
|
+ this.getItems().then(() => {
|
|
|
+ // then get the index
|
|
|
+ this.getIndex()
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ // or directly get the index
|
|
|
+ this.getIndex()
|
|
|
+ }
|
|
|
}else{
|
|
|
// if for any reason we dont have the uuid
|
|
|
// redirect to home
|
|
|
this.$route.replace('home')
|
|
|
}
|
|
|
},
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
loadArticle(){
|
|
|
console.log('loadArticle', this.uuid)
|
|
|
+ this.loading = true;
|
|
|
let params = {
|
|
|
- include:'field_linked_materials,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
|
|
|
+ include:'field_linked_materials.images,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
|
|
|
}
|
|
|
let q = qs.stringify(params)
|
|
|
JSONAPI.get(`node/article/${this.uuid}?${q}`)
|
|
|
@@ -144,19 +198,21 @@ export default {
|
|
|
// skip loop if the property is from prototype
|
|
|
if (!relations.hasOwnProperty(key)) continue;
|
|
|
|
|
|
- let obj = relations[key]
|
|
|
- console.log('typeof obj.data', typeof obj.data);
|
|
|
- // skip obj if data is not array
|
|
|
- if(!Array.isArray(obj.data)) continue
|
|
|
-
|
|
|
+ let relation_obj = relations[key]
|
|
|
+ console.log('typeof relation_obj.data', typeof relation_obj.data);
|
|
|
+ // skip relation_obj if data is not array
|
|
|
+ if(!Array.isArray(relation_obj.data)) continue
|
|
|
+ // create empty field array
|
|
|
this.content[key] = []
|
|
|
// parse relationship values using included
|
|
|
let field = {}
|
|
|
- obj.data.forEach((e) => {
|
|
|
- // get the included values
|
|
|
+ // loop through all relation items
|
|
|
+ relation_obj.data.forEach((e) => {
|
|
|
+ // get the included values for each item using id
|
|
|
let included = inc.find((i) => { return i.id == e.id })
|
|
|
+ // if we not found an included item skip the item
|
|
|
if(typeof included != 'undefined'){
|
|
|
- // fill the values
|
|
|
+ // fill the item values
|
|
|
switch (key) {
|
|
|
case 'field_visuel':
|
|
|
field = e.meta
|
|
|
@@ -164,6 +220,18 @@ export default {
|
|
|
field.src = included.links.card_medium.href
|
|
|
break;
|
|
|
case 'field_linked_materials':
|
|
|
+ field = included.attributes
|
|
|
+ field.id = included.id
|
|
|
+ // get the linked material included images
|
|
|
+ field.images = [];
|
|
|
+ included.relationships.images.data.forEach((img) => {
|
|
|
+ // console.log('href', img.meta.imageDerivatives.links.card_medium.href);
|
|
|
+ field.images.push({
|
|
|
+ title:img.meta.title,
|
|
|
+ url:img.meta.imageDerivatives.links.card_medium.href
|
|
|
+ })
|
|
|
+ })
|
|
|
+ break;
|
|
|
case 'field_thesaurus':
|
|
|
case 'field_tags':
|
|
|
field = included.attributes
|
|
|
@@ -179,11 +247,14 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+ // update main page title
|
|
|
+ this.$store.commit('Common/setPagetitle', this.content.title)
|
|
|
|
|
|
+ this.loading = false;
|
|
|
console.log('article.content',this.content);
|
|
|
},
|
|
|
onNext(){
|
|
|
- console.log('clicked on next', this.prevnext.next);
|
|
|
+ // console.log('clicked on next', this.prevnext.next);
|
|
|
let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')
|
|
|
this.$router.push({
|
|
|
name:`article`,
|
|
|
@@ -192,7 +263,7 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
onPrev(){
|
|
|
- console.log('clicked on prev', this.prevnext.next);
|
|
|
+ // console.log('clicked on prev', this.prevnext.next);
|
|
|
let alias = this.prevnext.prev.view_node.replace(/^.?\/blabla\//g, '')
|
|
|
this.$router.push({
|
|
|
name:`article`,
|
|
|
@@ -201,6 +272,9 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
+ components: {
|
|
|
+ Card
|
|
|
+ },
|
|
|
watch: {
|
|
|
'$route' (to, from) {
|
|
|
console.log('route change')
|
