refactored showrooms page

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>