refactored showrooms page

composer.json

@@ -111,7 +111,7 @@
         "drupal/gdpr": "^3.0@alpha",
         "drupal/genpass": "^1.x-dev",
         "drupal/google_analytics": "^4.0",
-        "drupal/graphql": "^4.0",
+        "drupal/graphql": "4.x-dev@dev",
         "drupal/image_delta_formatter": "^1.x-dev",
         "drupal/image_effects": "^3.x-dev@dev",
         "drupal/js_cache_buster": "^1.0",
@@ -307,6 +307,9 @@
               "var_dump https://www.drupal.org/project/simplenews_mailjet_subscriptions/issues/3280822#comment-14517416":"https://www.drupal.org/files/issues/2022-05-17/3280822-vardump%231.patch",
               "missing argument https://www.drupal.org/project/simplenews_mailjet_subscriptions/issues/3280825": "https://www.drupal.org/files/issues/2022-05-17/3280825-missing-argument%232.patch",
               "using mailjet module":"./patches/simplenews_mailjet_subscriptions__usingmailjetmodule.patch"
+            },
+            "drupal/graphql": {
+              "invalid translation language https://github.com/drupal-graphql/graphql/pull/1176": "./patches/graphql-fix-invalid-translation-language-dev.patch"
             }
         },
         "drupal-scaffold": {

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "4a2e80e7573ad7c0e353a57768fe24a3",
+    "content-hash": "28136bda07374425cb204c254898f8ac",
     "packages": [
         {
             "name": "alchemy/zippy",
@@ -8929,22 +8929,16 @@
         },
         {
             "name": "drupal/graphql",
-            "version": "4.3.0",
+            "version": "dev-4.x",
             "source": {
                 "type": "git",
                 "url": "https://git.drupalcode.org/project/graphql.git",
-                "reference": "8.x-4.3"
+                "reference": "dedd45ccdea0430b7820acbad4557dc443eff196"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://ftp.drupal.org/files/projects/graphql-8.x-4.3.zip",
-                "reference": "8.x-4.3",
-                "shasum": "dd8d69c9cc26331128a260091d30873cbd64292c"
             },
             "require": {
-                "drupal/core": "^8 || ^9",
+                "drupal/core": "^9.3 || ^10",
                 "drupal/typed_data": "*",
-                "php": ">=7.2",
+                "php": ">=7.3",
                 "webonyx/graphql-php": "^14.8.0"
             },
             "require-dev": {
@@ -8952,12 +8946,15 @@
             },
             "type": "drupal-module",
             "extra": {
+                "branch-alias": {
+                    "dev-4.x": "4.x-dev"
+                },
                 "drupal": {
-                    "version": "8.x-4.3",
+                    "version": "8.x-4.3+11-dev",
-                    "datestamp": "1644938309",
+                    "datestamp": "1662992472",
                     "security-coverage": {
-                        "status": "covered",
+                        "status": "not-covered",
-                        "message": "Covered by Drupal's security advisory policy"
+                        "message": "Dev releases are not covered by Drupal security advisories."
                     }
                 }
             },
@@ -25534,6 +25531,7 @@
         "drupal/flag_lists": 20,
         "drupal/gdpr": 15,
         "drupal/genpass": 20,
+        "drupal/graphql": 20,
         "drupal/image_delta_formatter": 20,
         "drupal/image_effects": 20,
         "drupal/login_destination": 20,

config/sync/core.entity_form_display.taxonomy_term.showroom.default.yml

@@ -65,11 +65,12 @@ third_party_settings:
       region: content
       parent_name: ''
       weight: 2
-      format_type: tab
+      format_type: details
       format_settings:
         classes: ''
+        show_empty_fields: false
         id: ''
-        formatter: closed
+        open: true
         description: ''
         required_fields: true
     group_contents:
@@ -187,7 +188,7 @@ content:
     third_party_settings: {  }
   status:
     type: boolean_checkbox
-    weight: 100
+    weight: 4
     region: content
     settings:
       display_label: true

config/sync/image.style.home_showroom.yml

@@ -3,7 +3,7 @@ langcode: en
 status: true
 dependencies: {  }
 name: home_showroom
-label: 'home-showroom (800x534)'
+label: 'home-showroom (800x450)'
 effects:
   87ca0333-c2de-4d98-91e1-d65b0263a31e:
     uuid: 87ca0333-c2de-4d98-91e1-d65b0263a31e

config/sync/views.view.showrooms.yml

@@ -8,7 +8,6 @@ dependencies:
     - field.storage.taxonomy_term.field_public_phone
     - field.storage.taxonomy_term.field_visuels
     - field.storage.taxonomy_term.field_website
-    - image.style.card_big
     - image.style.home_showroom
     - system.menu.header
     - taxonomy.vocabulary.showroom
@@ -1131,7 +1130,7 @@ display:
           type: image
           settings:
             image_link: ''
-            image_style: card_big
+            image_style: home_showroom
           group_column: ''
           group_columns: {  }
           group_rows: true

patches/graphql-fix-invalid-translation-language-dev.patch

@@ -0,0 +1,98 @@
+diff --git a/src/Plugin/GraphQL/DataProducer/Entity/EntityLoad.php b/src/Plugin/GraphQL/DataProducer/Entity/EntityLoad.php
+index 867a28c..386b2b3 100644
+--- a/src/Plugin/GraphQL/DataProducer/Entity/EntityLoad.php
++++ b/src/Plugin/GraphQL/DataProducer/Entity/EntityLoad.php
+@@ -172,8 +172,10 @@ class EntityLoad extends DataProducerPluginBase implements ContainerFactoryPlugi
+ 
+       // Get the correct translation.
+       if (isset($language) && $language !== $entity->language()->getId() && $entity instanceof TranslatableInterface) {
+-        $entity = $entity->getTranslation($language);
+-        $entity->addCacheContexts(["static:language:{$language}"]);
++        if ($entity->hasTranslation($language)) {
++          $entity = $entity->getTranslation($language);
++          $entity->addCacheContexts(["static:language:{$language}"]);
++        }
+       }
+ 
+       // Check if the passed user (or current user if none is passed) has access
+diff --git a/src/Plugin/GraphQL/DataProducer/Entity/EntityLoadByUuid.php b/src/Plugin/GraphQL/DataProducer/Entity/EntityLoadByUuid.php
+index 10e2d40..e4e6ed0 100644
+--- a/src/Plugin/GraphQL/DataProducer/Entity/EntityLoadByUuid.php
++++ b/src/Plugin/GraphQL/DataProducer/Entity/EntityLoadByUuid.php
+@@ -165,8 +165,10 @@ class EntityLoadByUuid extends DataProducerPluginBase implements ContainerFactor
+ 
+       // Get the correct translation.
+       if (isset($language) && $language != $entity->language()->getId() && $entity instanceof TranslatableInterface) {
+-        $entity = $entity->getTranslation($language);
+-        $entity->addCacheContexts(["static:language:{$language}"]);
++        if ($entity->hasTranslation($language)) {
++          $entity = $entity->getTranslation($language);
++          $entity->addCacheContexts(["static:language:{$language}"]);
++        }
+       }
+ 
+       // Check if the passed user (or current user if none is passed) has access
+diff --git a/src/Plugin/GraphQL/DataProducer/Entity/EntityLoadMultiple.php b/src/Plugin/GraphQL/DataProducer/Entity/EntityLoadMultiple.php
+index 2a0259c..27a19e5 100644
+--- a/src/Plugin/GraphQL/DataProducer/Entity/EntityLoadMultiple.php
++++ b/src/Plugin/GraphQL/DataProducer/Entity/EntityLoadMultiple.php
+@@ -172,8 +172,10 @@ class EntityLoadMultiple extends DataProducerPluginBase implements ContainerFact
+         }
+ 
+         if (isset($language) && $language !== $entities[$id]->language()->getId() && $entities[$id] instanceof TranslatableInterface) {
+-          $entities[$id] = $entities[$id]->getTranslation($language);
+-          $entities[$id]->addCacheContexts(["static:language:{$language}"]);
++          if ($entities[$id]->hasTranslation($language)) {
++            $entities[$id] = $entities[$id]->getTranslation($language);
++            $entities[$id]->addCacheContexts(["static:language:{$language}"]);
++          }
+         }
+ 
+         if ($access) {
+diff --git a/src/Plugin/GraphQL/DataProducer/Entity/EntityTranslation.php b/src/Plugin/GraphQL/DataProducer/Entity/EntityTranslation.php
+index 633bdc2..3773a9b 100644
+--- a/src/Plugin/GraphQL/DataProducer/Entity/EntityTranslation.php
++++ b/src/Plugin/GraphQL/DataProducer/Entity/EntityTranslation.php
+@@ -101,7 +101,7 @@ class EntityTranslation extends DataProducerPluginBase implements ContainerFacto
+    * @return \Drupal\Core\Entity\EntityInterface|null
+    */
+   public function resolve(EntityInterface $entity, $language, ?bool $access, ?AccountInterface $accessUser, ?string $accessOperation) {
+-    if ($entity instanceof TranslatableInterface && $entity->isTranslatable()) {
++    if ($entity instanceof TranslatableInterface && $entity->isTranslatable() && $entity->hasTranslation($language)) {
+       $entity = $entity->getTranslation($language);
+       $entity->addCacheContexts(["static:language:{$language}"]);
+       // Check if the passed user (or current user if none is passed) has access
+diff --git a/src/Plugin/GraphQL/DataProducer/Routing/RouteEntity.php b/src/Plugin/GraphQL/DataProducer/Routing/RouteEntity.php
+index 10ea4e6..1eef22a 100644
+--- a/src/Plugin/GraphQL/DataProducer/Routing/RouteEntity.php
++++ b/src/Plugin/GraphQL/DataProducer/Routing/RouteEntity.php
+@@ -126,8 +126,10 @@ class RouteEntity extends DataProducerPluginBase implements ContainerFactoryPlug
+ 
+         // Get the correct translation.
+         if (isset($language) && $language != $entity->language()->getId() && $entity instanceof TranslatableInterface) {
+-          $entity = $entity->getTranslation($language);
+-          $entity->addCacheContexts(["static:language:{$language}"]);
++          if ($entity->hasTranslation($language)) {
++            $entity = $entity->getTranslation($language);
++            $entity->addCacheContexts(["static:language:{$language}"]);
++          }
+         }
+ 
+         $access = $entity->access('view', NULL, TRUE);
+diff --git a/src/Plugin/GraphQL/DataProducer/Taxonomy/TaxonomyLoadTree.php b/src/Plugin/GraphQL/DataProducer/Taxonomy/TaxonomyLoadTree.php
+index 1bcd624..8b2caf2 100644
+--- a/src/Plugin/GraphQL/DataProducer/Taxonomy/TaxonomyLoadTree.php
++++ b/src/Plugin/GraphQL/DataProducer/Taxonomy/TaxonomyLoadTree.php
+@@ -175,8 +175,10 @@ class TaxonomyLoadTree extends DataProducerPluginBase implements ContainerFactor
+         $context->addCacheableDependency($entities[$id]);
+ 
+         if (isset($language) && $language !== $entities[$id]->language()->getId() && $entities[$id] instanceof TranslatableInterface) {
+-          $entities[$id] = $entities[$id]->getTranslation($language);
+-          $entities[$id]->addCacheContexts(["static:language:{$language}"]);
++          if ($entities[$id]->hasTranslation($language)) {
++            $entities[$id] = $entities[$id]->getTranslation($language);
++            $entities[$id]->addCacheContexts(["static:language:{$language}"]);
++          }
+         }
+ 
+         if ($access) {

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: flex;
-    display: inline-block;
+    flex-direction: row;
-    vertical-align: top;
+    margin-bottom: 1em;
-    margin: 0 $column_goutiere $column_goutiere 0;
+    section.images{
-
+      flex:0 0 auto;
-    h1{
-      margin:0;
-      font-weight: 4;
     }
-    p{ margin:0; }
+    section.content{
-    figure{
+      flex:0 0 100%;
-      margin:0;
+      padding: 0 1em;
-      img{
+    }
-        max-width: 100%;
+    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>
+    <section class="images" v-switcher>
-      <h1 v-html="item.name" />
+      
-    </header>
+      <!-- <figure v-html="item.field_visuels"></figure> -->
-    <section class="images">
+      <figure
-      <figure v-html="item.field_visuels"></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" />
+      <header>
-      <div class="phone" v-html="item.field_public_phone" />
+        <h1>{{item.name}}</h1>
-      <a class="email" :href="'mailto:'+item.field_public_email" v-html="item.field_public_email" />
+      </header>
-      <div class="website" v-html="item.field_website" />
+      <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 }) {
+    getShowrooms ({ dispatch, commit, state }) {
-      REST.get('/showrooms_rest?_format=json', {})
+      // REST.get('/showrooms_rest?_format=json', {})
-        .then(({ data }) => {
+      //   .then(({ data }) => {
-          console.log('showrooms REST: data', data)
+      //     console.log('showrooms REST: data', data)
-          commit('setItems', 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) => {
+        .catch(error => {
-          console.warn('Issue with showrooms', error)
+          console.warn('Issue with getShowrooms', error)
           Promise.reject(error)
         })
     }