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"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://ftp.drupal.org/files/projects/graphql-8.x-4.3.zip",
-                "reference": "8.x-4.3",
-                "shasum": "dd8d69c9cc26331128a260091d30873cbd64292c"
+                "reference": "dedd45ccdea0430b7820acbad4557dc443eff196"
             },
             "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",
-                    "datestamp": "1644938309",
+                    "version": "8.x-4.3+11-dev",
+                    "datestamp": "1662992472",
                     "security-coverage": {
-                        "status": "covered",
-                        "message": "Covered by Drupal's security advisory policy"
+                        "status": "not-covered",
+                        "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/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,21 +2306,56 @@ 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)
         })
     }