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;