refactored showrooms page

web/themes/custom/materiotheme/vuejs/api/gql/showroom.fragment.gql

@@ -0,0 +1,42 @@
+fragment ShowroomFields on Showroom {
+  uuid
+  id
+  name
+  description
+  images {
+    alt
+    id
+    style_showroomhome {
+      height
+      url
+      width
+    }
+    style_showroomhome_url
+    url
+  }
+  website {
+    title
+    url
+  }
+  phone
+  email
+  country {
+    country_code
+    country_name
+  }
+  address {
+    additional_name
+    address_line1
+    address_line2
+    administrative_area
+    dependent_locality
+    country_code
+    family_name
+    given_name
+    langcode
+    locality
+    organization
+    postal_code
+    sorting_code
+  }
+}

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

@@ -1,36 +1,76 @@
 <template>
   <article class="showroom">
-    <header>
-      <h1 v-html="item.name" />
-    </header>
-    <section class="images">
-      <figure v-html="item.field_visuels"></figure>
+    <section class="images" v-switcher>
+      
+      <!-- <figure v-html="item.field_visuels"></figure> -->
+      <figure
+        v-for="(img, index) in item.images"
+        :key="img.url"
+        class="lazy"
+        v-lazy="index"
+      >
+        <img
+          :data-src="img.style_showroomhome.url"
+          @click="setLightBox(index)"
+        />
+      </figure>
     </section>
     <section class="content">
-      <address v-html="item.field_public_address" />
-      <div class="phone" v-html="item.field_public_phone" />
-      <a class="email" :href="'mailto:'+item.field_public_email" v-html="item.field_public_email" />
-      <div class="website" v-html="item.field_website" />
+      <header>
+        <h1>{{item.name}}</h1>
+      </header>
+      <section class="description" v-html="item.description" />
+      <address>
+        <span v-if="item.address.organization">{{ item.address.organization }}</br></span> 
+        <span v-if="item.address.address_line1">{{ item.address.address_line1 }}</br></span> 
+        <span v-if="item.address.locality">{{ item.address.locality }}</br></span> 
+        <span v-if="item.country.country_name">{{ item.country.country_name }}</span>
+      </address>
+      <div class="phone" v-html="item.phone" />
+      <a class="email" :href="'mailto:'+item.email" v-html="item.email" />
+      <div class="website">
+        <a _target="_blank" :href="item.website.url">{{ item.website.title }}</a>
+      </div>
     </section>
   </article>
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex'
+
 // import JSONAPI from 'vuejs/api/json-axios'
 import router from 'vuejs/route'
 
+import cardMixins from 'vuejs/components/cardMixins'
+
 let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
 
 export default {
   name: "Showroom",
   router,
+  mixins: [cardMixins],
   props: ['item'],
   // data(){
   //   return {
   //     alias: this.item.view_node.replace(/^.?\/showroom\//g, '')
   //   }
   // },
-  // methods:{}
+  computed: {
+    ...mapState({
+      coolLightBoxItems: state => state.Common.coolLightBoxItems,
+      coolLightBoxIndex: state => state.Common.coolLightBoxIndex
+    }),
+  },
+  methods:{
+    ...mapActions({
+      setcoolLightBoxItems: 'Common/setcoolLightBoxItems',
+      setcoolLightBoxIndex: 'Common/setcoolLightBoxIndex'
+    }),
+    setLightBox (index) {
+      this.setcoolLightBoxItems(this.item.images)
+      this.setcoolLightBoxIndex(index)
+    }
+  }
 }
 </script>
 

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

@@ -32,11 +32,11 @@ export default {
   },
   created(){
     if(!this.items.length)
-      this.getItems()
+      this.getShowrooms()
   },
   methods: {
     ...mapActions({
-      getItems: 'Showrooms/getItems'
+      getShowrooms: 'Showrooms/getShowrooms'
     })
   },
   components: {

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

@@ -1,7 +1,11 @@
 // import JSONAPI from 'vuejs/api/json-axios'
-import REST from 'vuejs/api/rest-axios'
+// import REST from 'vuejs/api/rest-axios'
 // import MA from 'vuejs/api/ma-axios'
 // import qs from 'querystring-es3'
+import MGQ from 'vuejs/api/graphql-axios'
+import { print } from 'graphql/language/printer'
+import gql from 'graphql-tag'
+import ShowroomFields from 'vuejs/api/gql/showroom.fragment.gql'
 
 export default {
   namespaced: true,
@@ -20,7 +24,7 @@ export default {
     setItems (state, items) {
       state.items = items
       items.forEach((item, i) => {
-        state.showrooms_by_tid[item.tid] = item
+        state.showrooms_by_tid[item.id] = item
       })
       // console.log('Showroom setitems', state.showrooms_by_tid)
     }
@@ -28,14 +32,30 @@ export default {
 
   // actions
   actions: {
-    getItems ({ dispatch, commit, state }) {
-      REST.get('/showrooms_rest?_format=json', {})
-        .then(({ data }) => {
-          console.log('showrooms REST: data', data)
-          commit('setItems', data)
+    getShowrooms ({ 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)
+      //   })
+      const ast = gql`{
+        allshowrooms(lang: "${drupalDecoupled.lang_code}") {
+          ...ShowroomFields
+        }
+      }
+      ${ShowroomFields}
+      `
+      MGQ.post('', { query: print(ast) })
+        .then(({ data: { data: { allshowrooms } } }) => {
+          console.log('loadshowrooms showrooms loaded', allshowrooms)
+          commit('setItems', allshowrooms)
         })
-        .catch((error) => {
-          console.warn('Issue with showrooms', error)
+        .catch(error => {
+          console.warn('Issue with getShowrooms', error)
           Promise.reject(error)
         })
     }