integrated thematique in serahc results

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

@@ -0,0 +1,115 @@
+<template>
+  <article class="card card-thematique search-card">
+    <header
+      @click="openThematique"
+    >
+      <h1>{{ item.title }}</h1>
+      <h4>{{ item.short_description }}</h4>
+    </header>
+    <section class="images" v-switcher>
+      <figure
+        v-for="(img, index) in item.visuels"
+        :key="img.url"
+      >
+        <img
+          class="lazy"
+          v-lazy="index"
+          :data-src="img.style_cardmedium.url"
+          :title="img.title"
+        />
+        <img
+          class="blank"
+          :src="blanksrc"
+          @click="lightbox_index = index"
+        >
+      </figure>
+    </section>
+    <CoolLightBox
+      :items="item.visuels"
+      :index="lightbox_index"
+      srcName="url"
+      :loop="true"
+      @close="lightbox_index = null">
+    </CoolLightBox>
+  </article>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import cardMixins from 'vuejs/components/cardMixins'
+// import ModalCard from 'vuejs/components/Content/ModalCard'
+
+export default {
+  name: "Card",
+  props: ['item'],
+  mixins: [cardMixins],
+  // components: {
+  //   ModalCard
+  // },
+  data() {
+    return {
+      blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
+      // loadingFlag: false,
+      lightbox_index: null
+    }
+  },
+  // computed: {
+  //   ...mapState({
+  //     flagcolls: state => state.User.flagcolls
+  //   })
+  // },
+  methods: {
+    // ...mapActions({
+    //   flagUnflag: 'User/flagUnflag'
+    // }),
+    // flagIsActive(collid) {
+    //   // console.log("Card flagIsActive",
+    //   //   this.item.id,
+    //   //   this.flagcolls[collid].items,
+    //   //   this.flagcolls[collid].items.indexOf(this.item.id)
+    //   // );
+    //   // console.log(this.flagcolls[collid].items_uuids);
+    //   // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
+    //   return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;
+    // },
+    // flagIsLoading(collid) {
+    //   // console.log(this.item.uuid);
+    //   // console.log(this.flagcolls[collid].items_uuids);
+    //   return collid === this.loadingFlag;
+    // },
+    // onFlagActionCard (e) {
+    //   console.log("Card onFlagActionCard", e, this.item);
+    //   if (!this.loadingFlag) {
+    //     let collid = e.target.getAttribute('collid');
+    //     let isActive = this.flagIsActive(collid);
+    //     let action = isActive ? 'unflag' : 'flag';
+    //     // console.log('collid', collid);
+    //     // console.log("this.item", this.item);
+    //     this.loadingFlag = collid;
+    //     this.flagUnflag({ action: action, id: this.item.id, collid: collid})
+    //     .then(data => {
+    //       console.log("onFlagActionCard then", data);
+    //       this.loadingFlag = false;
+    //     })
+    //   }
+    // },
+    openThematique (e) {
+      console.log('openThematique', e);
+      // 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/Pages/Base.vue

@@ -12,7 +12,8 @@
       </div>
       <ul v-else>
         <li v-for="item in items" v-bind:key="item.uuid">
-          <Card :item="item"/>
+          <Card v-if="item.bundle == 'materiau'" :item="item"/>
+          <CardThematique v-if="item.bundle == 'thematique'" :item="item"/>
         </li>
       </ul>
       <infinite-loading
@@ -29,6 +30,7 @@
 <script>
 
 import Card from 'vuejs/components/Content/Card'
+import CardThematique from 'vuejs/components/Content/CardThematique'
 
 import { mapState, mapActions } from 'vuex'
 
@@ -80,7 +82,8 @@ export default {
     next()
   },
   components: {
-    Card
+    Card,
+    CardThematique
   }
 
 }