123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161 |
- <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>
|