162 lines
4.4 KiB
Vue
162 lines
4.4 KiB
Vue
<template>
|
|
<div class="loading" v-if="!content">
|
|
<span>Loading ...</span>
|
|
</div>
|
|
<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">
|
|
<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>
|
|
</header>
|
|
</article>
|
|
</template>
|
|
|
|
<script>
|
|
import router from 'vuejs/route'
|
|
import { JSONAPI } from 'vuejs/api/json-axios'
|
|
import qs from 'querystring'
|
|
|
|
export default {
|
|
name: "Article",
|
|
router,
|
|
props: ['item'],
|
|
data(){
|
|
return {
|
|
uuid:null,
|
|
content:null
|
|
}
|
|
},
|
|
created(){
|
|
this.getArticle()
|
|
},
|
|
methods: {
|
|
getArticle(){
|
|
console.log(this.$route);
|
|
if(this.$route.query.uuid){
|
|
// directly record uuid
|
|
this.uuid = this.$route.query.uuid
|
|
this.loadArticle()
|
|
}else if(drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article'){
|
|
// get the uuid from drupalDeclouped
|
|
// provided by materio_decoupled.module
|
|
// console.log(drupalDecoupled);
|
|
this.uuid = drupalDecoupled.entity_uuid
|
|
this.loadArticle()
|
|
}else{
|
|
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 })
|
|
// 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);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|