|
@@ -1,21 +1,159 @@
|
|
|
<template>
|
|
|
- <article class="card article">
|
|
|
+ <div class="loading" v-if="!content">
|
|
|
+ <span>Loading ...</span>
|
|
|
+ </div>
|
|
|
+ <article class="article" v-else>
|
|
|
<header>
|
|
|
- <h1 v-html="item.title"></h1>
|
|
|
- <h4 class="body" v-html="item.body"></h4>
|
|
|
+ <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>
|
|
|
- <section class="images">
|
|
|
- <figure v-html="item.field_visuel"></figure>
|
|
|
- </section>
|
|
|
</article>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import router from 'vuejs/route'
|
|
|
import { JSONAPI } from 'vuejs/api/json-axios'
|
|
|
+import qs from 'querystring'
|
|
|
|
|
|
export default {
|
|
|
name: "Article",
|
|
|
- props: ['item']
|
|
|
+ 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>
|
|
|
|