added linked materials in modalCard

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

@@ -43,7 +43,7 @@
           class="blank"
           :src="blanksrc"
           @click.prevent="openModalCard"
-        >
+        />
       </figure>
     </section>
     <!-- <CoolLightBox

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

@@ -0,0 +1,82 @@
+<template>
+  <article class="card linkedmaterialcard">
+    <header
+      @click.prevent="openModalCard"
+    >
+      <h1>{{ item.title }}</h1>
+      <h4>{{ item.short_description }}</h4>
+      <span v-if="isloggedin" class="ref">{{ item.reference }}</span>
+    </header>
+    <nav class="tools">
+
+    </nav>
+    <section class="images" v-switcher>
+      <figure
+        v-for="(img, index) in item.images"
+        :key="img.url"
+      >
+        <img
+          class="lazy"
+          v-lazy="index"
+          :data-src="img.style_linkedmaterialcard.url"
+          :title="img.title"
+        />
+        <img
+          class="blank"
+          :src="blanksrc"
+          @click.prevent="openModalCard"
+        />
+      </figure>
+    </section>
+  </article>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import cardMixins from 'vuejs/components/cardMixins'
+import ModalCard from 'vuejs/components/Content/ModalCard'
+
+export default {
+  name: "LinkedMaterialCard",
+  props: ['item'],
+  mixins: [cardMixins],
+  // components: {
+  //   ModalCard
+  // },
+  data() {
+    return {
+      blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
+      loadingItem: false
+    }
+  },
+  computed: {
+    ...mapState({
+      isloggedin: state => state.User.isloggedin
+    })
+  },
+  methods: {
+    itemIsLoading(id) {
+      return this.loadingItem
+    },
+    openModalCard (e) {
+      console.log('openModalCard', this.isLoggedin);
+      if(this.isloggedin){
+        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/Content/MiniCard.vue

@@ -2,7 +2,7 @@
   <article class="card minicard">
     <header>
       <h1>{{ item.title }}</h1>
-      <span class="ref">{{ item.field_reference }}</span>
+      <span class="ref">{{ item.reference }}</span>
     </header>
     <nav class="tools">
       <section class="tool flags">

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

@@ -36,7 +36,7 @@
           </div>
         </section>
       </nav>
-      <section class="samples">
+      <!-- <section class="samples">
         <h3>{{ $t("materio.Samples") }}</h3>
         <ul>
           <li
@@ -46,8 +46,11 @@
             <span class="showroom">{{ sample.showroom.name }}</span>: {{ sample.location }}
           </li>
         </ul>
-      </section>
+      </section> -->
       <section class="body" v-html="material.body"/>
+      <section class="linked-materials">
+        <LinkedMaterialCard v-for="m in material.linked_materials" v-bind:key="m.id" :item="m"/>
+      </section>
     </section>
     <section class="col col-left images" v-switcher>
       <figure
@@ -79,6 +82,9 @@
 
 <script>
 import { mapState, mapActions } from 'vuex'
+
+import LinkedMaterialCard from 'vuejs/components/Content/LinkedMaterialCard'
+
 import cardMixins from 'vuejs/components/cardMixins'
 
 import { MGQ } from 'vuejs/api/graphql-axios'
@@ -90,6 +96,9 @@ export default {
   name: "ModalCard",
   props: ['item'],
   mixins: [cardMixins],
+  components: {
+    LinkedMaterialCard
+  },
   data() {
     return {
       material: null,
@@ -126,7 +135,7 @@ export default {
       MGQ.post('', { query: print(ast)
       })
         .then(({ data:{data:{materiau}}}) => {
-          console.log('loadMaterial', materiau )
+          console.log('loadMaterial material loaded', materiau )
           this.material = materiau
           this.loading = false
           // delay the lazyload to let the card the time to update dom