materio-d8/web/themes/custom/materiotheme/vuejs/components/Content/Article.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>