integrated thematique in serahc results

config/sync/field.field.node.thematique.field_visuel.yml

@@ -31,8 +31,8 @@ settings:
   max_resolution: ''
   min_resolution: ''
   alt_field: true
-  alt_field_required: true
-  title_field: false
+  alt_field_required: false
+  title_field: true
   title_field_required: false
   default_image:
     uuid: ''

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

@@ -40,6 +40,17 @@ type Article {
   memo: String
 }
 
+type SearchResult {
+  id: Int!
+  uuid: String!
+  title: String!
+  bundle: String
+  short_description: String
+  images: [Image]
+  visuels: [Image]
+  reference: String
+}
+
 type Sample {
   showroom: Showroom
   location: String

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

@@ -6,6 +6,10 @@ extend type Query {
   materiaux(ids: [Int]): [Materiau]
 }
 
+extend type Query {
+  searchresults(ids: [Int]): [SearchResult]
+}
+
 extend type Query {
   article(id: Int!): Article
 }

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

@@ -26,6 +26,8 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
 
     $this->addMateriau($registry, $builder);
 
+    $this->addSearchResult($registry, $builder);
+
     $this->addSample($registry, $builder);
 
     $this->addArticle($registry, $builder);
@@ -213,11 +215,72 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
       );
   }
 
- //  ___                  _
- // / __| __ _ _ __  _ __| |___
- // \__ \/ _` | '  \| '_ \ / -_)
- // |___/\__,_|_|_|_| .__/_\___|
- //                 |_|
+  //  ___                  _    ___             _ _
+  // / __| ___ __ _ _ _ __| |_ | _ \___ ____  _| | |_
+  // \__ \/ -_) _` | '_/ _| ' \|   / -_|_-< || | |  _|
+  // |___/\___\__,_|_| \__|_||_|_|_\___/__/\_,_|_|\__|
+  protected function addSearchResult(ResolverRegistryInterface $registry, ResolverBuilder $builder) {
+
+    $registry->addFieldResolver('Query', 'searchresults',
+      $builder->produce('entity_load_multiple')
+        ->map('type', $builder->fromValue('node'))
+        ->map('ids', $builder->fromArgument('ids'))
+    );
+
+    $registry->addFieldResolver('SearchResult', 'id',
+      $builder->produce('entity_id')
+        ->map('entity', $builder->fromParent())
+      );
+
+    $registry->addFieldResolver('SearchResult', 'bundle',
+      $builder->produce('entity_bundle')
+        ->map('entity', $builder->fromParent())
+      );
+
+    $registry->addFieldResolver('SearchResult', 'uuid',
+      $builder->produce('entity_uuid')
+        ->map('entity', $builder->fromParent())
+      );
+
+    $registry->addFieldResolver('SearchResult', 'title',
+      $builder->compose(
+        $builder->produce('entity_label')
+          ->map('entity', $builder->fromParent())
+      ));
+
+    $registry->addFieldResolver('SearchResult', 'short_description',
+      $builder->produce('property_path')
+        ->map('type', $builder->fromValue('entity:node'))
+        ->map('value', $builder->fromParent())
+        ->map('path', $builder->fromValue('field_short_description.value'))
+      );
+
+    $registry->addFieldResolver('SearchResult', 'images',
+      $builder->produce('entity_reference')
+        ->map('entity', $builder->fromParent())
+        ->map('field', $builder->fromValue('field_materiau_images'))
+      );
+
+    $registry->addFieldResolver('SearchResult', 'visuels',
+      $builder->produce('entity_reference')
+        ->map('entity', $builder->fromParent())
+        ->map('field', $builder->fromValue('field_visuel'))
+      );
+
+    $registry->addFieldResolver('SearchResult', 'reference',
+      $builder->produce('property_path')
+        ->map('type', $builder->fromValue('entity:node'))
+        ->map('value', $builder->fromParent())
+        ->map('path', $builder->fromValue('field_reference.value'))
+      );
+
+  }
+
+  //  ___                  _
+  // / __| __ _ _ __  _ __| |___
+  // \__ \/ _` | '  \| '_ \ / -_)
+  // |___/\__,_|_|_|_| .__/_\___|
+  //                 |_|
   protected function addSample(ResolverRegistryInterface $registry, ResolverBuilder $builder) {
     $registry->addFieldResolver('Sample', 'showroom',
       $builder->callback(function($parent, $args){

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1688,6 +1688,8 @@ article.card {
       font-size: 0.693em;
       font-weight: 300;
       line-height: 1; }
+  article.card.card-thematique header {
+    background-color: rgba(105, 205, 207, 0.9); }
   article.card nav.tools {
     position: absolute;
     top: 0;

web/themes/custom/materiotheme/assets/styles/base/_colors.scss

@@ -1,6 +1,10 @@
 $transparent-bg: rgba(255,255,255, 0.95);
 $transparent-bg-blk: rgba(0,0,0, 0.75);
 
+$alpha: 0.90;
 $color-base:#69cdcf;
+$color-base-transparent: change-color($color-base, $alpha: $alpha);
 $color-showrooms:#50aa3c;
+$color-showrooms-transparent: change-color($color-showrooms, $alpha: $alpha);
 $color-blabla:#9458aa;
+$color-blabla-transparent: change-color($color-blabla, $alpha: $alpha);

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

@@ -756,6 +756,9 @@ article.card{
       line-height: 1;
     }
   }
+  &.card-thematique header{
+    background-color: $color-base-transparent;
+  }
   nav.tools{
     position: absolute;
     top: 0;

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

@@ -0,0 +1,21 @@
+fragment SearchResultFields on SearchResult {
+  id
+  bundle
+  title
+  short_description
+  reference
+  images{
+    url
+    alt
+    style_cardmedium{
+      url
+    }
+  }
+  visuels{
+    url
+    alt
+    style_cardmedium{
+      url
+    }
+  }
+}

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

@@ -0,0 +1,115 @@
+<template>
+  <article class="card card-thematique search-card">
+    <header
+      @click="openThematique"
+    >
+      <h1>{{ item.title }}</h1>
+      <h4>{{ item.short_description }}</h4>
+    </header>
+    <section class="images" v-switcher>
+      <figure
+        v-for="(img, index) in item.visuels"
+        :key="img.url"
+      >
+        <img
+          class="lazy"
+          v-lazy="index"
+          :data-src="img.style_cardmedium.url"
+          :title="img.title"
+        />
+        <img
+          class="blank"
+          :src="blanksrc"
+          @click="lightbox_index = index"
+        >
+      </figure>
+    </section>
+    <CoolLightBox
+      :items="item.visuels"
+      :index="lightbox_index"
+      srcName="url"
+      :loop="true"
+      @close="lightbox_index = null">
+    </CoolLightBox>
+  </article>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import cardMixins from 'vuejs/components/cardMixins'
+// import ModalCard from 'vuejs/components/Content/ModalCard'
+
+export default {
+  name: "Card",
+  props: ['item'],
+  mixins: [cardMixins],
+  // components: {
+  //   ModalCard
+  // },
+  data() {
+    return {
+      blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
+      // loadingFlag: false,
+      lightbox_index: null
+    }
+  },
+  // computed: {
+  //   ...mapState({
+  //     flagcolls: state => state.User.flagcolls
+  //   })
+  // },
+  methods: {
+    // ...mapActions({
+    //   flagUnflag: 'User/flagUnflag'
+    // }),
+    // flagIsActive(collid) {
+    //   // console.log("Card flagIsActive",
+    //   //   this.item.id,
+    //   //   this.flagcolls[collid].items,
+    //   //   this.flagcolls[collid].items.indexOf(this.item.id)
+    //   // );
+    //   // console.log(this.flagcolls[collid].items_uuids);
+    //   // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
+    //   return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;
+    // },
+    // flagIsLoading(collid) {
+    //   // console.log(this.item.uuid);
+    //   // console.log(this.flagcolls[collid].items_uuids);
+    //   return collid === this.loadingFlag;
+    // },
+    // onFlagActionCard (e) {
+    //   console.log("Card onFlagActionCard", e, this.item);
+    //   if (!this.loadingFlag) {
+    //     let collid = e.target.getAttribute('collid');
+    //     let isActive = this.flagIsActive(collid);
+    //     let action = isActive ? 'unflag' : 'flag';
+    //     // console.log('collid', collid);
+    //     // console.log("this.item", this.item);
+    //     this.loadingFlag = collid;
+    //     this.flagUnflag({ action: action, id: this.item.id, collid: collid})
+    //     .then(data => {
+    //       console.log("onFlagActionCard then", data);
+    //       this.loadingFlag = false;
+    //     })
+    //   }
+    // },
+    openThematique (e) {
+      console.log('openThematique', e);
+      // this.$modal.show(
+      //   ModalCard,
+      //   { item: this.item },
+      //   {
+      //     draggable: true,
+      //     width: '850px',
+      //     height: '610px'
+      //   }
+      // )
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -12,7 +12,8 @@
       </div>
       <ul v-else>
         <li v-for="item in items" v-bind:key="item.uuid">
-          <Card :item="item"/>
+          <Card v-if="item.bundle == 'materiau'" :item="item"/>
+          <CardThematique v-if="item.bundle == 'thematique'" :item="item"/>
         </li>
       </ul>
       <infinite-loading
@@ -29,6 +30,7 @@
 <script>
 
 import Card from 'vuejs/components/Content/Card'
+import CardThematique from 'vuejs/components/Content/CardThematique'
 
 import { mapState, mapActions } from 'vuex'
 
@@ -80,7 +82,8 @@ export default {
     next()
   },
   components: {
-    Card
+    Card,
+    CardThematique
   }
 
 }

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

@@ -3,7 +3,11 @@
 import { MA } from 'vuejs/api/ma-axios'
 import qs from 'querystring-es3'
 
-import materiauGQL from 'vuejs/api/gql/materiausearch.fragment.gql'
+
+import { MGQ } from 'vuejs/api/graphql-axios'
+import { print } from 'graphql/language/printer'
+import gql from 'graphql-tag'
+import searchresultGQL from 'vuejs/api/gql/searchresults.fragment.gql'
 
 export default {
   namespaced: true,
@@ -35,7 +39,7 @@ export default {
     resetUuids (state) {
       state.uuids = []
     },
-    setMaterials (state, items) {
+    setResults (state, items) {
       state.items = state.items.concat(items)
     },
     resetItems (state) {
@@ -110,18 +114,27 @@ export default {
             commit('setUuids', data.uuids)
             // loadMaterials is on mixins
             // https://github.com/huybuidac/vuex-extensions
-
-            dispatch('loadMaterialsGQL', {
-              ids: data.nids,
-              gqlfragment: materiauGQL,
-              callBack: 'loadMaterialsCallBack'
-            })
-
-            // dispatch('loadMaterials', {
-            //   uuids: data.uuids,
-            //   imgStyle: ['card_medium', 'card_full'],
-            //   callBack: 'loadMaterialsCallBack'
+            // dispatch('loadMaterialsGQL', {
+            //   ids: data.nids,
+            //   gqlfragment: materiauGQL,
+            //   callBack: 'loadSearchResultsCallBack'
             // })
+            let ast = gql`{
+              searchresults(ids: [${data.nids}]) {
+                ...SearchResultFields
+              }
+            }
+            ${ searchresultGQL }
+            `
+            MGQ.post('', { query: print(ast) })
+              .then(( resp ) => {
+                console.log('loadSearchResultsGQL resp', resp )
+                dispatch("loadSearchResultsCallBack", { items: resp.data.data.searchresults})
+              })
+              .catch(error => {
+                console.warn('Issue with loadSearchResults', error)
+                Promise.reject(error)
+              })
           } else {
             commit('setNoresults')
           }
@@ -131,9 +144,9 @@ export default {
           Promise.reject(error)
         })
     },
-    loadMaterialsCallBack ({ commit, state }, { items, callBackArgs }) {
-      console.log('search loadMaterialsCallBack', items)
-      commit('setMaterials', items)
+    loadSearchResultsCallBack ({ commit, state }, { items, callBackArgs }) {
+      console.log('search loadSearchResultsCallBack', items)
+      commit('setResults', items)
       if (state.infiniteLoadingState) {
         if (state.offset + state.limit > state.count) {
           console.log('Search infinite completed')