303 lines
8.4 KiB
Vue
303 lines
8.4 KiB
Vue
<template>
|
|
<div class="loading" v-if="!content || loading">
|
|
<span>Loading ...</span>
|
|
</div>
|
|
<article class="article" v-else>
|
|
<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="accroche">
|
|
<figure>
|
|
<img
|
|
:src="content.image_accroche.src"
|
|
:alt="content.image_accroche.alt"
|
|
:title="content.image_accroche.title"
|
|
/>
|
|
</figure>
|
|
</section>
|
|
<section 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>
|
|
</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"
|
|
>
|
|
<img
|
|
:src="visuel.src"
|
|
:alt="visuel.alt"
|
|
:title="visuel.title"
|
|
/>
|
|
<caption></caption>
|
|
</figure>
|
|
</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,
|
|
loading:true,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
items: state => state.Blabla.items
|
|
})
|
|
},
|
|
created(){
|
|
this.getArticle()
|
|
},
|
|
methods: {
|
|
...mapActions({
|
|
getItems: 'Blabla/getItems',
|
|
getItemIndex: 'Blabla/getItemIndex',
|
|
getPrevNextItems: 'Blabla/getPrevNextItems'
|
|
}),
|
|
getArticle(){
|
|
console.log(this.$route);
|
|
// get the article uuid
|
|
if(this.$route.query.uuid){
|
|
// we come from internal link with vuejs
|
|
// directly record uuid
|
|
this.uuid = this.$route.query.uuid
|
|
}else if(drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article'){
|
|
// we landed in an internal page
|
|
// get the uuid from drupalDeclouped, provided by materio_decoupled.module
|
|
this.uuid = drupalDecoupled.entity_uuid
|
|
}
|
|
|
|
if(this.uuid){
|
|
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.images,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
|
|
}
|
|
let q = qs.stringify(params)
|
|
JSONAPI.get(`node/article/${this.uuid}?${q}`)
|
|
.then(({ data }) => {
|
|
console.log('loadArticle data', data)
|
|
this.parseData(data)
|
|
})
|
|
.catch(( error ) => {
|
|
console.warn('Issue with loadArticle', error)
|
|
Promise.reject(error)
|
|
})
|
|
},
|
|
parseData(data){
|
|
let attrs = data.data.attributes
|
|
let relations = data.data.relationships
|
|
console.log('relations', relations);
|
|
let inc = data.included
|
|
console.log('included', inc);
|
|
|
|
this.content = {
|
|
title:attrs.title,
|
|
body: attrs.body.value
|
|
}
|
|
|
|
// parse all relationships
|
|
for (let key in relations) {
|
|
// skip loop if the property is from prototype
|
|
if (!relations.hasOwnProperty(key)) 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 = {}
|
|
// 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 item values
|
|
switch (key) {
|
|
case 'field_visuel':
|
|
field = e.meta
|
|
field.id = e.id
|
|
field.src = included.links.article_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);
|
|
if(img.meta.imageDerivatives){
|
|
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
|
|
field.id = included.id
|
|
break;
|
|
// case 'field_showroom':
|
|
// field = included.attributes
|
|
// break
|
|
default:
|
|
}
|
|
this.content[key].push(field)
|
|
}
|
|
})
|
|
|
|
}
|
|
// extract first visuel as accroche
|
|
this.content.image_accroche = this.content.field_visuel.shift()
|
|
|
|
// 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);
|
|
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 }
|
|
})
|
|
}
|
|
},
|
|
components: {
|
|
Card
|
|
},
|
|
watch: {
|
|
'$route' (to, from) {
|
|
console.log('route change')
|
|
this.getArticle()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|