fixed modalCard after graphql refactoring

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>
-        <h4>{{ item.field_short_description }}</h4>
-        <span class="ref">{{ item.field_reference }}</span>
+        <h1>{{ material.title }}</h1>
+        <h4>{{ material.short_description }}</h4>
+        <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"
-            :key="sample.target_id"
+            v-for="sample in material.samples"
+            :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) {
-      let imgs = this.querySelectorAll('.images figure img.lazy')
-      // console.log('mouseover', 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})
+    console.log('card mounted', this.$options.name);
+    // if (this.$options.name ==! 'ModalCard') {
+      this.$el.addEventListener('mouseover', 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})
+    // }
   },
   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)
     // },