drafted article display, added materio_decoupled module

web/themes/custom/materiotheme/vuejs/components/Content/Article.vue

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

web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue

@@ -0,0 +1,50 @@
+<template>
+  <article class="card article">
+    <header>
+      <h1>
+        <a
+          :href="item.view_node"
+          @click.prevent="onclick"
+          v-html="item.title"
+        ></a>
+      </h1>
+      <aside v-html="item.created"></aside>
+      <h4 class="body" v-html="item.body"></h4>
+    </header>
+    <section class="images">
+      <figure v-html="item.field_visuel"></figure>
+    </section>
+  </article>
+</template>
+
+<script>
+import { JSONAPI } from 'vuejs/api/json-axios'
+import router from 'vuejs/route'
+
+let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
+
+export default {
+  name: "ArticleCard",
+  router,
+  props: ['item'],
+  data(){
+    return {
+      alias: this.item.view_node.replace(/^.?\/blabla\//g, '')
+    }
+  },
+  methods:{
+    onclick(){
+      console.log('clicked on article', this.alias);
+      this.$router.push({
+        name:`article`,
+        params: { alias:this.alias },
+        query: { uuid: this.item.uuid }
+        // meta: { uuid:this.item.uuid },
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue

@@ -6,7 +6,7 @@
     <div class="cards-list" v-else>
       <ul>
         <li v-for="item in items" v-bind:key="item.uuid">
-          <Article :item="item"/>
+          <ArticleCard :item="item"/>
         </li>
       </ul>
       <infinite-loading @infinite="getArticles">
@@ -19,17 +19,17 @@
 <script>
 
 import { REST } from 'vuejs/api/rest-axios'
-import Article from 'vuejs/components/Content/Article'
+import ArticleCard from 'vuejs/components/Content/ArticleCard'
 
 export default {
   name: "Blabla",
   data() {
     return {
       items:[],
-      page:1
+      page:0
     }
   },
-  beforeMount(){
+  created(){
     this.getArticles()
   },
   methods: {
@@ -55,7 +55,7 @@ export default {
     }
   },
   components: {
-    Article
+    ArticleCard
   }
 }
 </script>