refactored showrooms page

web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls

@@ -167,10 +167,13 @@ type Showroom {
   id: Int!
   uuid: String!
   name: String!
+  description: String
   images: [Image]
   email: String
   address: Address
+  country: Country
   phone: String
+  website: Link
 }
 
 type Company {
@@ -247,6 +250,8 @@ type Image {
   style_articlecardmedium_url: String
   style_hd: ImageStyle
   style_hd_url: String
+  style_showroomhome: ImageStyle
+  style_showroomhome_url: String
 }
 
 type ImageStyle {

web/modules/custom/materio_graphql/graphql/materio_extension.extension.graphqls

@@ -26,6 +26,10 @@ extend type Query {
   thematique(id: Int!, lang: String): Thematique
 }
 
+extend type Query {
+  allshowrooms(lang: String): [Showroom]
+}
+
 extend type Query {
   showroom(id: Int!, lang: String): Showroom
 }

web/modules/custom/materio_graphql/src/Plugin/GraphQL/SchemaExtension/MaterioSchemaExtension.php

@@ -902,6 +902,22 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
           })
       ));
 
+    $registry->addFieldResolver('Image', 'style_showroomhome',
+      $builder->produce('image_derivative')
+        ->map('entity', $builder->fromParent())
+        ->map('style', $builder->fromValue('home_showroom'))
+      );
+
+    $registry->addFieldResolver('Image', 'style_showroomhome_url',
+      $builder->compose(
+        $builder->produce('image_derivative')
+          ->map('entity', $builder->fromParent())
+          ->map('style', $builder->fromValue('home_showroom')),
+        $builder->callback(function($parent, $args){
+            return $parent['url'];
+          })
+      ));
+
   }
 
   // __   ___    _         _    _      _
@@ -979,11 +995,31 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
   // \__ \ ' \/ _ \ V  V / '_/ _ \/ _ \ '  \
   // |___/_||_\___/\_/\_/|_| \___/\___/_|_|_|
   protected function addShowroom(ResolverRegistryInterface $registry, ResolverBuilder $builder) {
+
+    $registry->addFieldResolver('Query', 'allshowrooms',
+      $builder->compose(
+          $builder->callback(function($parent, $arg){
+            $entity_storage = \Drupal::entityTypeManager()->getStorage('taxonomy_term');
+            $query = $entity_storage->getQuery()
+              ->condition('vid', ['showroom'], 'IN')
+              ->sort('tid')
+              ->accessCheck(TRUE);
+            $results = $query->execute();
+            return $results;
+          }),
+          $builder->produce('entity_load_multiple')
+          ->map('type', $builder->fromValue('taxonomy_term'))
+          ->map('ids', $builder->fromParent())
+          ->map('language', $builder->fromArgument('lang'))
+        )
+      );
+
     $registry->addFieldResolver('Query', 'showroom',
       $builder->produce('entity_load')
         ->map('type', $builder->fromValue('taxonomy_term'))
         ->map('bundles', $builder->fromValue(['showroom']))
         ->map('id', $builder->fromArgument('id'))
+        ->map('language', $builder->fromArgument('lang'))
       );
 
     $registry->addFieldResolver('Showroom', 'id',
@@ -1001,6 +1037,12 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
         ->map('entity', $builder->fromParent())
       );
 
+    $registry->addFieldResolver('Showroom', 'description',
+      $builder->callback(function($parent, $args){
+        return $parent->getDescription();
+      })
+    );
+    
     $registry->addFieldResolver('Showroom', 'email',
       $builder->produce('property_path')
         ->map('type', $builder->fromValue('entity:taxonomy_term'))
@@ -1022,6 +1064,26 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
         ->map('path', $builder->fromValue('field_public_phone.value'))
       );
 
+    $registry->addFieldResolver('Showroom', 'images',
+      $builder->produce('entity_reference')
+        ->map('entity', $builder->fromParent())
+        ->map('field', $builder->fromValue('field_visuels'))
+      );
+    
+    $registry->addFieldResolver('Showroom', 'website',
+      $builder->produce('property_path')
+        ->map('type', $builder->fromValue('entity:taxonomy_term'))
+        ->map('value', $builder->fromParent())
+        ->map('path', $builder->fromValue('field_website'))
+      );
+
+    $registry->addFieldResolver('Showroom', 'country',
+      $builder->produce('property_path')
+        ->map('type', $builder->fromValue('entity:taxonomy_term'))
+        ->map('value', $builder->fromParent())
+        ->map('path', $builder->fromValue('field_public_address'))
+      );
+
   }
 
   //  _    _      _

web/themes/custom/materiotheme/assets/dist/module-showrooms.ea51a71e33e126273a2e.bundle.js

@@ -0,0 +1 @@
+(self.webpackChunkmaterio_com=self.webpackChunkmaterio_com||[]).push([[204],{281:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>u});var o=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{attrs:{id:"showrooms"}},[e.items.length?e._l(e.items,(function(e){return s("Showroom",{key:e.uuid,attrs:{item:e}})})):s("div",{staticClass:"loading"},[s("span",[e._v(e._s(e.$t("default.Loading…")))])])],2)};o._withStripped=!0;var i=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("article",{staticClass:"showroom"},[s("section",{directives:[{name:"switcher",rawName:"v-switcher"}],staticClass:"images"},e._l(e.item.images,(function(t,o){return s("figure",{directives:[{name:"lazy",rawName:"v-lazy",value:o,expression:"index"}],key:t.url,staticClass:"lazy"},[s("img",{attrs:{"data-src":t.style_showroomhome.url},on:{click:function(t){return e.setLightBox(o)}}})])})),0),e._v(" "),s("section",{staticClass:"content"},[s("header",[s("h1",[e._v(e._s(e.item.name))])]),e._v(" "),s("section",{staticClass:"description",domProps:{innerHTML:e._s(e.item.description)}}),e._v(" "),s("address",[e.item.address.organization?s("span",[e._v(e._s(e.item.address.organization)),s("br")]):e._e(),e._v(" "),e.item.address.address_line1?s("span",[e._v(e._s(e.item.address.address_line1)),s("br")]):e._e(),e._v(" "),e.item.address.locality?s("span",[e._v(e._s(e.item.address.locality)),s("br")]):e._e(),e._v(" "),e.item.country.country_name?s("span",[e._v(e._s(e.item.country.country_name))]):e._e()]),e._v(" "),s("div",{staticClass:"phone",domProps:{innerHTML:e._s(e.item.phone)}}),e._v(" "),s("a",{staticClass:"email",attrs:{href:"mailto:"+e.item.email},domProps:{innerHTML:e._s(e.item.email)}}),e._v(" "),s("div",{staticClass:"website"},[s("a",{attrs:{_target:"_blank",href:e.item.website.url}},[e._v(e._s(e.item.website.title))])])])])};i._withStripped=!0;var r=s(629),a=s(4408),n=s(8357);drupalSettings.path.baseUrl,drupalSettings.path.pathPrefix;const m={name:"Showroom",router:a.Z,mixins:[n.Z],props:["item"],computed:{...(0,r.rn)({coolLightBoxItems:e=>e.Common.coolLightBoxItems,coolLightBoxIndex:e=>e.Common.coolLightBoxIndex})},methods:{...(0,r.nv)({setcoolLightBoxItems:"Common/setcoolLightBoxItems",setcoolLightBoxIndex:"Common/setcoolLightBoxIndex"}),setLightBox(e){this.setcoolLightBoxItems(this.item.images),this.setcoolLightBoxIndex(e)}}};var l=s(1900),c=(0,l.Z)(m,i,[],!1,null,"695652b0",null);c.options.__file="web/themes/custom/materiotheme/vuejs/components/Content/Showroom.vue";const h=c.exports,d={name:"Showrooms",computed:{...(0,r.rn)({items:e=>e.Showrooms.items})},created(){this.items.length||this.getShowrooms()},methods:{...(0,r.nv)({getShowrooms:"Showrooms/getShowrooms"})},components:{Showroom:h}};var _=(0,l.Z)(d,o,[],!1,null,"7566e5fe",null);_.options.__file="web/themes/custom/materiotheme/vuejs/components/Pages/Showrooms.vue";const u=_.exports}}]);

web/themes/custom/materiotheme/assets/dist/module-showrooms.f4e99dc6af9efd6ef724.bundle.js

@@ -1 +0,0 @@
-(self.webpackChunkmaterio_com=self.webpackChunkmaterio_com||[]).push([[204],{281:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>p});var o=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{attrs:{id:"showrooms"}},[e.items.length?e._l(e.items,(function(e){return s("Showroom",{key:e.uuid,attrs:{item:e}})})):s("div",{staticClass:"loading"},[s("span",[e._v(e._s(e.$t("default.Loading…")))])])],2)};o._withStripped=!0;var i=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("article",{staticClass:"showroom"},[s("header",[s("h1",{domProps:{innerHTML:e._s(e.item.name)}})]),e._v(" "),s("section",{staticClass:"images"},[s("figure",{domProps:{innerHTML:e._s(e.item.field_visuels)}})]),e._v(" "),s("section",{staticClass:"content"},[s("address",{domProps:{innerHTML:e._s(e.item.field_public_address)}}),e._v(" "),s("div",{staticClass:"phone",domProps:{innerHTML:e._s(e.item.field_public_phone)}}),e._v(" "),s("a",{staticClass:"email",attrs:{href:"mailto:"+e.item.field_public_email},domProps:{innerHTML:e._s(e.item.field_public_email)}}),e._v(" "),s("div",{staticClass:"website",domProps:{innerHTML:e._s(e.item.field_website)}})])])};i._withStripped=!0;var r=s(4408);drupalSettings.path.baseUrl,drupalSettings.path.pathPrefix;const n={name:"Showroom",router:r.Z,props:["item"]};var m=s(1900),a=(0,m.Z)(n,i,[],!1,null,"695652b0",null);a.options.__file="web/themes/custom/materiotheme/vuejs/components/Content/Showroom.vue";const l=a.exports;var c=s(629);const _={name:"Showrooms",computed:{...(0,c.rn)({items:e=>e.Showrooms.items})},created(){this.items.length||this.getItems()},methods:{...(0,c.nv)({getItems:"Showrooms/getItems"})},components:{Showroom:l}};var d=(0,m.Z)(_,o,[],!1,null,"7566e5fe",null);d.options.__file="web/themes/custom/materiotheme/vuejs/components/Pages/Showrooms.vue";const p=d.exports}}]);

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -140,7 +140,7 @@ export let _v_sitebranding_block, _v_user_block, _v_header_menu,
     }
 
     function initVStore () {
-      store.dispatch('Showrooms/getItems')
+      store.dispatch('Showrooms/getShowrooms')
     }
 
     function initVRouter () {

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -2306,22 +2306,57 @@ article.card{
 #showrooms{
   width: calc(100% + #{$column_goutiere});
   article.showroom{
-    width: $column_width * 2 + $column_goutiere;
-    display: inline-block;
-    vertical-align: top;
-    margin: 0 $column_goutiere $column_goutiere 0;
-
-    h1{
-      margin:0;
-      font-weight: 4;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 1em;
+    section.images{
+      flex:0 0 auto;
     }
-    p{ margin:0; }
-    figure{
-      margin:0;
-      img{
-        max-width: 100%;
+    section.content{
+      flex:0 0 100%;
+      padding: 0 1em;
+    }
+    section.images{
+      position: relative;
+      width: 800px;
+      height: 450px;
+      *{width: 100%; height:100%;}
+      figure{
+        cursor: pointer;
+        margin:0;
+        position: absolute;
+        top:0; left:0;
+        background-color: #fff;
+        // width: 100%; height:100%;
+        &:first-of-type{
+          z-index:5
+        }
+        transition: opacity 0.2s ease-in-out;
+        &.show{opacity: 1; z-index:6;}
+        &.hide{opacity: 0;}
+  
+        img{
+          // width: 100%; height:100%;
+          &.blank{
+            position: absolute;
+            top:0; left:0;
+            z-index: 20;
+          }
+        }
       }
     }
+    section.content{
+
+      h1{
+        margin:0;
+        font-weight: 4;
+      }
+      p{ 
+        margin:0 0 1em 0!important;
+        max-width: 30em;
+      }
+      
+    }
   }
 
 }

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)
         })
     }