materio-d9/web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue

215 lines
5.9 KiB
Vue

<template>
<div class="loading" v-if="!content">
<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">
<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">
<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>
<script>
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",
router,
props: ['item'],
data(){
return {
index:-1,
prevnext:{},
uuid:null,
content:null
}
},
created(){
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
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.getIndex()
this.loadArticle()
}else{
// if for any reason we dont have the uuid
// redirect to home
this.$route.replace('home')
}
},
loadArticle(){
console.log('loadArticle', this.uuid)
let params = {
include:'field_linked_materials,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 obj = relations[key]
console.log('typeof obj.data', typeof obj.data);
// skip obj if data is not array
if(!Array.isArray(obj.data)) continue
this.content[key] = []
// parse relationship values using included
let field = {}
obj.data.forEach((e) => {
// get the included values
let included = inc.find((i) => { return i.id == e.id })
if(typeof included != 'undefined'){
// fill the values
switch (key) {
case 'field_visuel':
field = e.meta
field.id = e.id
field.src = included.links.card_medium.href
break;
case 'field_linked_materials':
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)
}
})
}
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()
}
}
}
</script>
<style lang="scss" scoped>
</style>