added showrooms pages, made page-title color

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

@@ -0,0 +1,37 @@
+<template>
+  <article class="showroom">
+    <header>
+      <h1 v-html="item.name" />
+    </header>
+    <section class="images">
+      <figure v-html="item.field_visuels"></figure>
+    </section>
+    <section class="content">
+      <address v-html="item.field_public_address" />
+      <div class="phone" v-html="item.field_public_phone" />
+      <div class="email" v-html="item.field_public_email" />
+    </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: "Showroom",
+  router,
+  props: ['item'],
+  // data(){
+  //   return {
+  //     alias: this.item.view_node.replace(/^.?\/showroom\//g, '')
+  //   }
+  // },
+  // methods:{}
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -155,25 +155,27 @@ export default {
         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:
+          if(typeof included != 'undefined'){
+            // 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)
           }
-          this.content[key].push(field)
         })
       }
 

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

@@ -0,0 +1,48 @@
+<template>
+  <div id="showrooms">
+    <div class="loading" v-if="!items.length">
+      <span>Loading ...</span>
+    </div>
+    <Showroom
+      v-else
+      v-for="item in items"
+      v-bind:key="item.uuid"
+      :item="item"
+    />
+  </div>
+</template>
+
+<script>
+
+import Showroom from 'vuejs/components/Content/Showroom'
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "Showrooms",
+  // data() {
+  //   return {
+  //     items:[],
+  //     page:0
+  //   }
+  // },
+  computed: {
+    ...mapState({
+      items: state => state.Showrooms.items
+    })
+  },
+  created(){
+    if(!this.items.length)
+      this.getItems()
+  },
+  methods: {
+    ...mapActions({
+      getItems: 'Showrooms/getItems'
+    })
+  },
+  components: {
+    Showroom
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

web/themes/custom/materiotheme/vuejs/route/index.js

@@ -1,10 +1,11 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
-import Home from 'vuejs/components/Content/Home'
-import Base from 'vuejs/components/Content/Base'
-import Blabla from 'vuejs/components/Content/Blabla'
-import Article from 'vuejs/components/Content/Article'
+import Home from 'vuejs/components/Pages/Home'
+import Base from 'vuejs/components/Pages/Base'
+import Blabla from 'vuejs/components/Pages/Blabla'
+import Article from 'vuejs/components/Pages/Article'
+import Showrooms from 'vuejs/components/Pages/Showrooms'
 
 Vue.use(VueRouter)
 
@@ -59,6 +60,12 @@ const routes = [
     path: `${basePath}blabla/:alias`,
     component: Article,
     // meta: { uuid:null }
+  },
+  {
+    name:'showrooms',
+    path: `${basePath}showrooms`,
+    component: Showrooms,
+    // meta: { uuid:null }
   }
   // {
   //   path: '*',

web/themes/custom/materiotheme/vuejs/store/index.js

@@ -4,6 +4,7 @@ import Common from './modules/common'
 import User from './modules/user'
 import Search from './modules/search'
 import Blabla from './modules/blabla'
+import Showrooms from './modules/showrooms'
 
 // https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
 
@@ -13,6 +14,7 @@ export default new Vuex.Store({
     Common,
     User,
     Search,
-    Blabla
+    Blabla,
+    Showrooms
   }
 })

web/themes/custom/materiotheme/vuejs/store/modules/common.js

@@ -16,7 +16,7 @@ export default {
   // mutations
   mutations : {
     setPagetitle (state, title) {
-      console.log('Common, setPagetitle', title);
+      // console.log('Common, setPagetitle', title);
       state.pagetitle = title
     }
   },

web/themes/custom/materiotheme/vuejs/store/modules/showrooms.js

@@ -0,0 +1,38 @@
+import { JSONAPI } from 'vuejs/api/json-axios'
+import { REST } from 'vuejs/api/rest-axios'
+import { MA } from 'vuejs/api/ma-axios'
+import qs from 'querystring'
+
+export default {
+  namespaced: true,
+
+  // initial state
+  state : {
+    items: [],
+  },
+
+  // getters
+  getters : {},
+
+  // mutations
+  mutations : {
+    setItems (state, items) {
+      state.items = state.items.concat(items)
+    }
+  },
+
+  // actions
+  actions : {
+    getItems({ dispatch, commit, state }){
+      REST.get(`/showrooms_rest?_format=json`, {})
+        .then(({ data }) => {
+          console.log('showrooms REST: data', data)
+          commit('setItems',data)
+        })
+        .catch(( error ) => {
+            console.warn('Issue with showrooms', error)
+            Promise.reject(error)
+        })
+    }
+  }
+}