fixed modalCard after graphql refactoring

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

@@ -0,0 +1,20 @@
+fragment MateriauFields on Materiau {
+  title
+  short_description
+  body
+  reference
+  samples{
+    showroom{
+      name
+      id
+    }
+    location
+  }
+  images{
+    url
+    alt
+    style_cardfull{
+      url
+    }
+  }
+}

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

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { JSONAPI } from 'vuejs/api/json-axios'
+// import { JSONAPI } from 'vuejs/api/json-axios'
 import router from 'vuejs/route'
 
 let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;

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

@@ -1,10 +1,13 @@
 <template>
-  <article class="card modal-card">
+  <div class="loading" v-if="!material || loading">
+    <span>Loading ...</span>
+  </div>
+  <article v-else class="card modal-card">
     <section class="col col-right">
       <header>
-        <h1>{{ item.title }}</h1>
+        <h1>{{ material.title }}</h1>
-        <h4>{{ item.field_short_description }}</h4>
+        <h4>{{ material.short_description }}</h4>
-        <span class="ref">{{ item.field_reference }}</span>
+        <span class="ref">{{ material.reference }}</span>
       </header>
       <nav class="tools">
         <section class="tool close">
@@ -37,24 +40,24 @@
         <h3>{{ $t("materio.Samples") }}</h3>
         <ul>
           <li
-            v-for="sample in item.field_samples"
+            v-for="sample in material.samples"
-            :key="sample.target_id"
+            :key="sample.showroom.id"
           >
-            <span class="showroom">{{ showrooms[sample.target_id].name }}</span>: {{ sample.location }}
+            <span class="showroom">{{ sample.showroom.name }}</span>: {{ sample.location }}
           </li>
         </ul>
       </section>
-      <section class="body" v-html="item.body.processed"/>
+      <section class="body" v-html="material.body"/>
     </section>
     <section class="col col-left images" v-switcher>
       <figure
-        v-for="(img, index) in item.images"
+        v-for="(img, index) in material.images"
         :key="img.url"
       >
         <img
           class="lazy"
           v-lazy="index"
-          :data-src="img.img_styles.card_full"
+          :data-src="img.style_cardfull.url"
           :title="img.title"
         />
         <img
@@ -65,9 +68,9 @@
       </figure>
     </section>
     <CoolLightBox
-      :items="item.images"
+      :items="material.images"
       :index="lightbox_index"
-      srcName="src"
+      srcName="url"
       :loop="true"
       @close="lightbox_index = null">
     </CoolLightBox>
@@ -78,12 +81,19 @@
 import { mapState, mapActions } from 'vuex'
 import cardMixins from 'vuejs/components/cardMixins'
 
+import { MGQ } from 'vuejs/api/graphql-axios'
+import { print } from 'graphql/language/printer'
+import gql from 'graphql-tag'
+import materiauFields from 'vuejs/api/gql/materiaumodal.fragment.gql'
+
 export default {
   name: "ModalCard",
   props: ['item'],
   mixins: [cardMixins],
   data() {
     return {
+      material: null,
+      loading: false,
       blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
       loadingFlag: false,
       lightbox_index: null
@@ -97,11 +107,39 @@ export default {
   },
   created () {
     console.log('modale item', this.item)
+    this.loadMaterial()
   },
   methods: {
     ...mapActions({
       flagUnflag: 'User/flagUnflag'
     }),
+    loadMaterial(){
+      console.log('loadMaterial', this.item.id)
+      this.loading = true
+      let ast = gql`{
+        materiau(id: ${this.item.id}) {
+          ...MateriauFields
+        }
+      }
+      ${ materiauFields }
+      `
+      MGQ.post('', { query: print(ast)
+      })
+        .then(({ data:{data:{materiau}}}) => {
+          console.log('loadMaterial', materiau )
+          this.material = materiau
+          this.loading = false
+          // delay the lazyload to let the card the time to update dom
+          // maybe not the best method
+          setTimeout(function () {
+            this.activateLazyLoad()
+          }.bind(this), 5)
+        })
+        .catch(error => {
+          console.warn('Issue with loadMaterial', error)
+          Promise.reject(error)
+        })
+    },
     flagIsActive(collid) {
       // console.log(this.item.uuid);
       // console.log(this.flagcolls[collid].items_uuids);

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

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { JSONAPI } from 'vuejs/api/json-axios'
+// import { JSONAPI } from 'vuejs/api/json-axios'
 import router from 'vuejs/route'
 
 let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;

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

@@ -118,7 +118,7 @@
 import router from 'vuejs/route'
 import store from 'vuejs/store'
 
-import { JSONAPI } from 'vuejs/api/json-axios'
+// import { JSONAPI } from 'vuejs/api/json-axios'
 import { REST } from 'vuejs/api/rest-axios'
 import { MGQ } from 'vuejs/api/graphql-axios'
 import { print } from 'graphql/language/printer'
@@ -126,7 +126,7 @@ import gql from 'graphql-tag'
 // import materiauFields from 'vuejs/api/gql/materiau.fragment.gql'
 import articleFields from 'vuejs/api/gql/article.fragment.gql'
 
-import qs from 'querystring-es3'
+// import qs from 'querystring-es3'
 import Card from 'vuejs/components/Content/Card'
 
 import { mapState, mapActions } from 'vuex'

web/themes/custom/materiotheme/vuejs/components/cardMixins.js

@@ -4,6 +4,7 @@ export default {
     lazy: {
       bind(img,binding){
         // console.log('lazy bind', img, binding);
+        // show only the first image
         if(binding.value === 0){
           img.setAttribute('src', img.getAttribute('data-src'))
           img.removeAttribute('data-src')
@@ -41,18 +42,35 @@ export default {
   },
   mounted() {
     // lazy load images on mouseover
-    this.$el.addEventListener('mouseover', function(event) {
+    console.log('card mounted', this.$options.name);
-      let imgs = this.querySelectorAll('.images figure img.lazy')
+    // if (this.$options.name ==! 'ModalCard') {
-      // console.log('mouseover', this, imgs);
+      this.$el.addEventListener('mouseover', function(event) {
-      imgs.forEach((img) => {
+        let imgs = this.querySelectorAll('.images figure img.lazy')
-        // console.log('forEach img',img);
+        console.log('mousemove', this, imgs);
-        img.setAttribute('src', img.getAttribute('data-src'))
+        imgs.forEach((img) => {
-        img.removeAttribute('data-src')
+          // console.log('forEach img',img);
-        img.classList.remove('lazy')
+          img.setAttribute('src', img.getAttribute('data-src'))
-      })
+          img.removeAttribute('data-src')
-    }, {once : true})
+          img.classList.remove('lazy')
+        })
+      }, {once : true})
+    // }
   },
   methods: {
+    activateLazyLoad () {
+      console.log('card activateLazyLoad', this.$options.name);
+
+      this.$el.addEventListener('mousemove', function(event) {
+        let imgs = this.querySelectorAll('.images figure img.lazy')
+        console.log('mousemove', this, imgs);
+        imgs.forEach((img) => {
+          // console.log('forEach img',img);
+          img.setAttribute('src', img.getAttribute('data-src'))
+          img.removeAttribute('data-src')
+          img.classList.remove('lazy')
+        })
+      }, {once : true})
+    }
     // deg2rad (deg) {
     //   return deg * (Math.PI / 180)
     // },

web/themes/custom/materiotheme/vuejs/store/index.js

@@ -3,8 +3,8 @@ import Vuex from 'vuex'
 
 import { createStore } from 'vuex-extensions'
 
-import { JSONAPI } from 'vuejs/api/json-axios'
+// import { JSONAPI } from 'vuejs/api/json-axios'
-import qs from 'querystring-es3'
+// import qs from 'querystring-es3'
 
 import { MGQ } from 'vuejs/api/graphql-axios'
 import { print } from 'graphql/language/printer'
@@ -48,9 +48,13 @@ export default createStore(Vuex.Store, {
         MGQ.post('', { query: print(ast) })
           .then(( resp ) => {
             console.log('loadMaterialsGQL resp', resp )
-            dispatch('parseMaterialsGQL', {
+            // dispatch('parseMaterialsGQL', {
+            //   items: resp.data.data.materiaux,
+            //   callBack: callBack,
+            //   callBackArgs: callBackArgs
+            // })
+            dispatch(callBack, {
               items: resp.data.data.materiaux,
-              callBack: callBack,
               callBackArgs: callBackArgs
             })
           })
@@ -58,92 +62,92 @@ export default createStore(Vuex.Store, {
             console.warn('Issue with loadMaterials', error)
             Promise.reject(error)
           })
-      },
-      parseMaterialsGQL ({ dispatch }, { items, callBack, callBackArgs }) {
-        dispatch(callBack, { items: items, callBackArgs: callBackArgs })
-      },
-      loadMaterials ({ dispatch }, { uuids, imgStyle, callBack, callBackArgs }) {
-        const params = {
-          // include: 'images', // no needs to include thanks to consumers_image_styles module
-          // include: 'drupal_internal__nid',
-          'filter[uuids-groupe][group][conjunction]': 'OR'
-        }
-        for (let i = 0; i < uuids.length; i++) {
-          const uuid = uuids[i]
-          params[`filter[${uuid}][condition][path]`] = 'id'
-          params[`filter[${uuid}][condition][value]`] = uuid
-          params[`filter[${uuid}][condition][operator]`] = '='
-          params[`filter[${uuid}][condition][memberOf]`] = 'uuids-groupe'
-        }
-        // console.log('search JSONAPI params', params);
-        const q = qs.stringify(params)
-        return JSONAPI.get('node/materiau?' + q)
-          .then(({ data }) => {
-            console.log('mixin getMaterials data', data)
-            dispatch('parseMaterials', { data: data.data, uuids: uuids, imgStyle: imgStyle, callBack: callBack, callBackArgs: callBackArgs })
-            // commit('setItems', data.items)
-          })
-          .catch((error) => {
-            console.warn('Issue with getItems', error)
-            Promise.reject(error)
-          })
-      },
-      parseMaterials ({ dispatch }, { data, uuids, imgStyle, callBack, callBackArgs }) {
-        // data comes from jsonapi query
-        // uuids comes from original query (solr, FlagCollection, etc)
-        // so we loop from uuids to conserve the original order
-        console.log('mixin parseMaterials', data, uuids, callBack, callBackArgs)
-        const items = []
-        // for (var i = 0; i < data.length; i++) {
-        for (let i = 0; i < uuids.length; i++) {
-          const uuid = uuids[i]
-          // https://stackoverflow.com/questions/11258077/how-to-find-index-of-an-object-by-key-and-value-in-an-javascript-array
-          const item_index = data.findIndex(p => p.id === uuid)
-          // console.log('item_index', item_index);
-          if (item_index === -1) continue
-
-          const item_src = data[item_index]
-          const attrs = item_src.attributes
-          const relations = item_src.relationships
-
-          // get field values
-          const item = {
-            uuid: uuid,
-            title: attrs.title,
-            field_short_description: attrs.field_short_description,
-            body: attrs.body,
-            field_reference: attrs.field_reference
-          }
-
-          // get images included values
-          const img_src = relations.images.data
-          // console.log('img_src', img_src);
-          // this is a temporary deactivation of images
-          // img_src = [];
-          item.images = []
-          for (let j = 0; j < img_src.length; j++) {
-            if (img_src[j].meta.imageDerivatives) {
-              let img_styles = {}
-              for (var k = 0; k < imgStyle.length; k++) {
-                img_styles[imgStyle[k]] = img_src[j].meta.imageDerivatives.links.[imgStyle[k]].href
-              }
-              item.images.push({
-                title: img_src[j].meta.title,
-                src: img_src[j].meta.imageDerivatives.links.hd.href,
-                // meta.imageDerivatives.style.href link is provided by drupal consumers_image_styles module
-                // BUG: missing all image derivative but first
-                img_styles: img_styles
-              })
-            } else {
-              console.warn('missing image derivative ' + j + '/' + img_src.length + ' for ' + attrs.title)
-            }
-          }
-
-          items.push(item)
-        }
-        console.log('items', items)
-        dispatch(callBack, { items: items, callBackArgs: callBackArgs })
       }
+      // parseMaterialsGQL ({ dispatch }, { items, callBack, callBackArgs }) {
+      //   dispatch(callBack, { items: items, callBackArgs: callBackArgs })
+      // }
+      // loadMaterials ({ dispatch }, { uuids, imgStyle, callBack, callBackArgs }) {
+      //   const params = {
+      //     // include: 'images', // no needs to include thanks to consumers_image_styles module
+      //     // include: 'drupal_internal__nid',
+      //     'filter[uuids-groupe][group][conjunction]': 'OR'
+      //   }
+      //   for (let i = 0; i < uuids.length; i++) {
+      //     const uuid = uuids[i]
+      //     params[`filter[${uuid}][condition][path]`] = 'id'
+      //     params[`filter[${uuid}][condition][value]`] = uuid
+      //     params[`filter[${uuid}][condition][operator]`] = '='
+      //     params[`filter[${uuid}][condition][memberOf]`] = 'uuids-groupe'
+      //   }
+      //   // console.log('search JSONAPI params', params);
+      //   const q = qs.stringify(params)
+      //   return JSONAPI.get('node/materiau?' + q)
+      //     .then(({ data }) => {
+      //       console.log('mixin getMaterials data', data)
+      //       dispatch('parseMaterials', { data: data.data, uuids: uuids, imgStyle: imgStyle, callBack: callBack, callBackArgs: callBackArgs })
+      //       // commit('setItems', data.items)
+      //     })
+      //     .catch((error) => {
+      //       console.warn('Issue with getItems', error)
+      //       Promise.reject(error)
+      //     })
+      // },
+      // parseMaterials ({ dispatch }, { data, uuids, imgStyle, callBack, callBackArgs }) {
+      //   // data comes from jsonapi query
+      //   // uuids comes from original query (solr, FlagCollection, etc)
+      //   // so we loop from uuids to conserve the original order
+      //   console.log('mixin parseMaterials', data, uuids, callBack, callBackArgs)
+      //   const items = []
+      //   // for (var i = 0; i < data.length; i++) {
+      //   for (let i = 0; i < uuids.length; i++) {
+      //     const uuid = uuids[i]
+      //     // https://stackoverflow.com/questions/11258077/how-to-find-index-of-an-object-by-key-and-value-in-an-javascript-array
+      //     const item_index = data.findIndex(p => p.id === uuid)
+      //     // console.log('item_index', item_index);
+      //     if (item_index === -1) continue
+      //
+      //     const item_src = data[item_index]
+      //     const attrs = item_src.attributes
+      //     const relations = item_src.relationships
+      //
+      //     // get field values
+      //     const item = {
+      //       uuid: uuid,
+      //       title: attrs.title,
+      //       field_short_description: attrs.field_short_description,
+      //       body: attrs.body,
+      //       field_reference: attrs.field_reference
+      //     }
+      //
+      //     // get images included values
+      //     const img_src = relations.images.data
+      //     // console.log('img_src', img_src);
+      //     // this is a temporary deactivation of images
+      //     // img_src = [];
+      //     item.images = []
+      //     for (let j = 0; j < img_src.length; j++) {
+      //       if (img_src[j].meta.imageDerivatives) {
+      //         let img_styles = {}
+      //         for (var k = 0; k < imgStyle.length; k++) {
+      //           img_styles[imgStyle[k]] = img_src[j].meta.imageDerivatives.links.[imgStyle[k]].href
+      //         }
+      //         item.images.push({
+      //           title: img_src[j].meta.title,
+      //           src: img_src[j].meta.imageDerivatives.links.hd.href,
+      //           // meta.imageDerivatives.style.href link is provided by drupal consumers_image_styles module
+      //           // BUG: missing all image derivative but first
+      //           img_styles: img_styles
+      //         })
+      //       } else {
+      //         console.warn('missing image derivative ' + j + '/' + img_src.length + ' for ' + attrs.title)
+      //       }
+      //     }
+      //
+      //     items.push(item)
+      //   }
+      //   console.log('items', items)
+      //   dispatch(callBack, { items: items, callBackArgs: callBackArgs })
+      // }
     }
   }
 })

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

@@ -1,7 +1,7 @@
-import { JSONAPI } from 'vuejs/api/json-axios'
+// import { JSONAPI } from 'vuejs/api/json-axios'
 import { REST } from 'vuejs/api/rest-axios'
-import { MA } from 'vuejs/api/ma-axios'
+// import { MA } from 'vuejs/api/ma-axios'
-import qs from 'querystring-es3'
+// import qs from 'querystring-es3'
 
 export default {
   namespaced: true,

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

@@ -1,6 +1,6 @@
-import { REST } from 'vuejs/api/rest-axios'
+// import { REST } from 'vuejs/api/rest-axios'
-import { JSONAPI } from 'vuejs/api/json-axios'
+// import { JSONAPI } from 'vuejs/api/json-axios'
-import qs from 'querystring-es3'
+// import qs from 'querystring-es3'
 
 export default {
   namespaced: true,

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

@@ -1,7 +1,7 @@
-import { JSONAPI } from 'vuejs/api/json-axios'
+// import { JSONAPI } from 'vuejs/api/json-axios'
 import { REST } from 'vuejs/api/rest-axios'
-import { MA } from 'vuejs/api/ma-axios'
+// import { MA } from 'vuejs/api/ma-axios'
-import qs from 'querystring-es3'
+// import qs from 'querystring-es3'
 
 export default {
   namespaced: true,

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

@@ -1,7 +1,7 @@
-import { JSONAPI } from 'vuejs/api/json-axios'
+// import { JSONAPI } from 'vuejs/api/json-axios'
 import { REST } from 'vuejs/api/rest-axios'
-import { MA } from 'vuejs/api/ma-axios'
+// import { MA } from 'vuejs/api/ma-axios'
-import qs from 'querystring-es3'
+// import qs from 'querystring-es3'
 
 export default {
   namespaced: true,