<template> <article class="card minicard"> <header @click.prevent="openModalCard" > <h1>{{ item.title }}</h1> <span v-if="item.reference" class="ref">{{ item.reference }}</span> </header> <nav class="tools"> <section class="tool samples" v-if="item.samples && item.samples.length"> <span class="btn mdi mdi-beaker-outline"/> <div class="tool-content"> <span class="label">{{ $t("materio.Samples") }}</span> <ul> <li v-for="sample in item.samples" :key="sample.showroom.id" > <span class="showroom">{{ sample.showroom.name }}</span>: {{ sample.location }} </li> </ul> </div> </section> <section class="tool flags"> <span class="mdi unflag" :class="[ itemIsLoading() ? 'mdi-loading mdi-spin' : 'mdi-folder-remove' ]" @click.prevent="onUnFlagCard" /> </section> </nav> <section class="images" v-switcher> <figure v-for="(img, index) in item.images" :key="img.url" v-lazy="index" class="lazy" > <img :data-src="img.style_minicard.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: "MiniCard", props: ['item', 'collid'], mixins: [cardMixins], components: { ModalCard }, data() { return { blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`, loadingItem: false } }, computed: { ...mapState({ isloggedin: state => state.User.isloggedin }) }, methods: { ...mapActions({ flagUnflag: 'User/flagUnflag' }), itemIsLoading(id) { return this.loadingItem }, onUnFlagCard (e) { console.log("Card onFlagActionCard", e, this.item) if (!this.loadingItem) { this.loadingItem = true; this.flagUnflag({ action: 'unflag', id: this.item.id, collid: this.collid }) .then(data => { console.log("onUnFlagCard then", data) 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: false, classes: "vm--modale-card", // this does not work // adaptative: true, // maxWidth: 850, // maxHeight: 610, width: '95%', height: '95%' } ) } } } } </script> <style lang="scss" scoped> </style>