modalcard added samples, industriels in navtools; flag collection items open modalcard

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

@@ -1,8 +1,10 @@
 <template>
   <article class="card minicard">
-    <header>
+    <header
+      @click.prevent="openModalCard"
+    >
       <h1>{{ item.title }}</h1>
-      <span class="ref">{{ item.reference }}</span>
+      <span v-if="item.reference" class="ref">{{ item.reference }}</span>
     </header>
     <nav class="tools">
       <section class="tool flags">
@@ -26,7 +28,11 @@
           :data-src="img.style_minicard.url"
           :title="img.title"
         />
-        <img class="blank" :src="blanksrc">
+        <img
+          class="blank"
+          :src="blanksrc"
+          @click.prevent="openModalCard"
+        >
       </figure>
     </section>
   </article>
@@ -35,11 +41,15 @@
 <script>
 import { mapState, mapActions } from 'vuex'
 import cardMixins from 'vuejs/components/cardMixins'
+import ModalCard from 'vuejs/components/Content/ModalCard'
 
 export default {
   name: "MiniCard",
   props: ['item', 'collid'],
   mixins: [cardMixins],
+  components: {
+    ModalCard
+  },
   data() {
     return {
       blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
@@ -47,6 +57,9 @@ export default {
     }
   },
   computed: {
+    ...mapState({
+      isloggedin: state => state.User.isloggedin
+    })
   },
   methods: {
     ...mapActions({
@@ -69,6 +82,21 @@ export default {
           this.loadingItem = false;
         })
       }
+    },
+    openModalCard (e) {
+      console.log('openModalCard', this.isLoggedin);
+      if(this.isloggedin){
+        this.$modal.show(
+          ModalCard,
+          { item: this.item },
+          {
+            name: `modal-${this.item.id}`,
+            draggable: true,
+            width: '850px',
+            height: '610px'
+          }
+        )
+      }
     }
   }
 }