<template> <article class="card search-card"> <header @click.prevent="openModalCard" > <h1 v-if="isloggedin">{{ item.title }}</h1> <h4>{{ item.short_description }}</h4> <span v-if="isloggedin" class="ref">{{ item.reference }}</span> </header> <nav class="tools" v-if="isloggedin"> <section class="tool flags"> <span class="btn mdi mdi-folder-outline"/> <div class="tool-content"> <ul> <li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id"> <span class="flag mdi" :class="[ flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close-circle isActive' : 'mdi-plus' ]" :collid="coll.id" @click.prevent="onFlagActionCard" > {{ coll.name }} </span> </li> <li v-if="collsLength<15" class="create-flag"> <input placeholder="new folder" v-model="new_folder_name" @keyup.enter.prevent.stop="onCreateFlagColl" /> <span class="add-btn mdi" :class="addFlagBtnClassObj" @click.prevent.stop="onCreateFlagColl" /> </li> </ul> </div> </section> <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 v-if="item.note" class="tool note"> <span class="btn mdi mdi-note"/> </section> <section class="tool print"> <a :href="item.path+'/printable/print'" target="_blank"> <span class="btn mdi mdi-printer"/> </a> </section> </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_cardmedium_url" :title="img.title" /> <img class="blank" :src="blanksrc" @click.prevent="openModalCard" /> </figure> </section> <!-- <CoolLightBox v-if="isloggedin" :items="item.images" :index="lightbox_index" srcName="style_hd_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, new_folder_name: "", is_creating_folder: false // lightbox_index: null } }, computed: { ...mapState({ flagcolls: state => state.User.flagcolls, isloggedin: state => state.User.isloggedin }), collsLength() { return Object.keys(this.flagcolls).length }, addFlagBtnClassObj() { return { 'mdi-plus-circle-outline': !this.is_creating_folder, 'mdi-loading': this.is_creating_folder, active: this.new_folder_name.length > 4 && !this.is_creating_folder, loading: this.is_creating_folder } } }, methods: { ...mapActions({ // refreshItem: 'Search/refreshItem', createFlagColl: 'User/createFlagColl', flagUnflag: 'User/flagUnflag' }), onCreateFlagColl () { console.log("Card onCreateFlagColl", this.new_folder_name) this.is_creating_folder = true; this.createFlagColl(this.new_folder_name) .then(data => { console.log("Card onCreateFlagColl then", data) this.new_folder_name = ""; this.is_creating_folder = false; let collid = data.id this.loadingFlag = collid; this.flagUnflag({ action: 'flag', id: this.item.id, collid: collid}) .then(data => { console.log("onFlagActionCard then", data) this.loadingFlag = false; }) }) }, 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; }) } }, // onClickImg (e, index) { // this.lightbox_index = index // }, openModalCard (e) { console.log('openModalCard', this.isLoggedin) if (this.isloggedin) { this.$modal.show( ModalCard, { item: this.item, // not really an event // more a callback function passed as prop to the component addNoteId:(id) => { // no needs to refresh the entire item via searchresults // plus if we are in article, there is not searchresults // this.refreshItem({id: this.item.id}) // instead create the note id directly this.item.note = {id: id} } }, { 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>