blabla article display and nav

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

@@ -2,8 +2,8 @@
   <article class="card">
     <header>
       <h1>{{ item.title }}</h1>
-      <h4>{{ item.description }}</h4>
-      <span class="ref">{{ item.reference }}</span>
+      <h4>{{ item.field_short_description }}</h4>
+      <span class="ref">{{ item.field_reference }}</span>
     </header>
     <section class="images" v-switcher>
       <figure

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

@@ -1,16 +1,29 @@
 <template>
-  <div class="loading" v-if="!content">
+  <div class="loading" v-if="!content || loading">
     <span>Loading ...</span>
   </div>
   <article class="article" v-else>
-    <header>
-      <h1>{{ content.title }}</h1>
-      <nav v-if="index != -1">
-        <a @click.prevent="onPrev" href="#">prev : {{ prevnext.prev.title }}</a>
-        <a @click.prevent="onNext" href="#">next : {{ prevnext.next.title }}</a>
-      </nav>
-    </header>
-    <div class="taxonomy">
+    <nav class="prevnext top">
+      <ul>
+        <li>
+          <a
+            @click.prevent="onPrev"
+            href="#"
+            v-if="prevnext.prev"
+            v-html="prevnext.prev.title"
+          />
+        </li>
+        <li>
+          <a
+            @click.prevent="onNext"
+            href="#"
+            v-if="prevnext.next"
+            v-html="prevnext.next.title"
+          />
+        </li>
+      </ul>
+    </nav>
+    <section class="taxonomy">
       <div class="thesaurus">
         <ul>
           <li
@@ -25,20 +38,9 @@
             >{{ 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">
+    </section>
+    <section class="body" v-html="content.body"></section>
+    <section class="visuels">
       <figure
         v-for="visuel in content.field_visuel" v-bind:key="visuel.id"
       >
@@ -49,46 +51,77 @@
         />
         <caption></caption>
       </figure>
-    </div>
+    </section>
+    <aside class="linked-materials">
+      <h3 class="field__label">Linked Materials</h3>
+      <div class="card-list">
+        <ul class="">
+          <li v-for="node in content.field_linked_materials" v-bind:key="node.id">
+            <Card :item="node" />
+          </li>
+        </ul>
+      </div>
+    </aside>
+    <nav class="prevnext bottom">
+      <ul>
+        <li>
+          <a
+            @click.prevent="onPrev"
+            href="#"
+            v-if="prevnext.prev"
+            v-html="prevnext.prev.title"
+          />
+        </li>
+        <li>
+          <a
+            @click.prevent="onNext"
+            href="#"
+            v-if="prevnext.next"
+            v-html="prevnext.next.title"
+          />
+        </li>
+      </ul>
+    </nav>
   </article>
 </template>
 
 <script>
 import router from 'vuejs/route'
+import store from 'vuejs/store'
 import { JSONAPI } from 'vuejs/api/json-axios'
 import qs from 'querystring'
+import Card from 'vuejs/components/Content/Card'
+
 import { mapState, mapActions } from 'vuex'
 
 export default {
   name: "Article",
   router,
+  store,
   props: ['item'],
   data(){
     return {
       index:-1,
       prevnext:{},
       uuid:null,
-      content:null
+      content:null,
+      loading:true,
     }
   },
+  computed: {
+    ...mapState({
+      items: state => state.Blabla.items
+    })
+  },
   created(){
     this.getArticle()
   },
   methods: {
     ...mapActions({
+      getItems: 'Blabla/getItems',
       getItemIndex: 'Blabla/getItemIndex',
       getPrevNextItems: 'Blabla/getPrevNextItems'
     }),
-    getIndex(){
-      console.log("Article getIndex");
-      this.getItemIndex(this.uuid).then((index) => {
-        this.index = index
-        // console.log('article index', index, this);
-        this.getPrevNextItems(index).then((pn) => {
-          this.prevnext = pn
-        })
-      })
-    },
     getArticle(){
       console.log(this.$route);
       // get the article uuid
@@ -103,18 +136,39 @@ export default {
       }
 
       if(this.uuid){
-        this.getIndex()
         this.loadArticle()
+        // get the prev next items
+        if(!this.items.length){
+          // if items list not yet loaded preload them
+          this.getItems().then(() => {
+            // then get the index
+            this.getIndex()
+          })
+        }else{
+          // or directly get the index
+          this.getIndex()
+        }
       }else{
         // if for any reason we dont have the uuid
         // redirect to home
         this.$route.replace('home')
       }
     },
+    getIndex(){
+      console.log("Article getIndex");
+      this.getItemIndex(this.uuid).then((index) => {
+        this.index = index
+        // console.log('article index', index, this);
+        this.getPrevNextItems(index).then((pn) => {
+          this.prevnext = pn
+        })
+      })
+    },
     loadArticle(){
       console.log('loadArticle', this.uuid)
+      this.loading = true;
       let params = {
-        include:'field_linked_materials,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
+        include:'field_linked_materials.images,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
       }
       let q = qs.stringify(params)
       JSONAPI.get(`node/article/${this.uuid}?${q}`)
@@ -144,19 +198,21 @@ export default {
         // 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
-
+        let relation_obj = relations[key]
+        console.log('typeof relation_obj.data', typeof relation_obj.data);
+        // skip relation_obj if data is not array
+        if(!Array.isArray(relation_obj.data)) continue
+        // create empty field array
         this.content[key] = []
         // parse relationship values using included
         let field = {}
-        obj.data.forEach((e) => {
-          // get the included values
+        // loop through all relation items
+        relation_obj.data.forEach((e) => {
+          // get the included values for each item using id
           let included = inc.find((i) => { return i.id == e.id })
+          // if we not found an included item skip the item
           if(typeof included != 'undefined'){
-            // fill the values
+            // fill the item values
             switch (key) {
               case 'field_visuel':
                 field = e.meta
@@ -164,6 +220,18 @@ export default {
                 field.src = included.links.card_medium.href
                 break;
               case 'field_linked_materials':
+                field = included.attributes
+                field.id = included.id
+                // get the linked material included images
+                field.images = [];
+                included.relationships.images.data.forEach((img) => {
+                  // console.log('href', img.meta.imageDerivatives.links.card_medium.href);
+                  field.images.push({
+                    title:img.meta.title,
+                    url:img.meta.imageDerivatives.links.card_medium.href
+                  })
+                })
+                break;
               case 'field_thesaurus':
               case 'field_tags':
                 field = included.attributes
@@ -179,11 +247,14 @@ export default {
         })
       }
 
+      // update main page title
+      this.$store.commit('Common/setPagetitle', this.content.title)
 
+      this.loading = false;
       console.log('article.content',this.content);
     },
     onNext(){
-      console.log('clicked on next', this.prevnext.next);
+      // console.log('clicked on next', this.prevnext.next);
       let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')
       this.$router.push({
         name:`article`,
@@ -192,7 +263,7 @@ export default {
       })
     },
     onPrev(){
-      console.log('clicked on prev', this.prevnext.next);
+      // console.log('clicked on prev', this.prevnext.next);
       let alias = this.prevnext.prev.view_node.replace(/^.?\/blabla\//g, '')
       this.$router.push({
         name:`article`,
@@ -201,6 +272,9 @@ export default {
       })
     }
   },
+  components: {
+    Card
+  },
   watch: {
     '$route' (to, from) {
       console.log('route change')