123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131 |
- <template>
- <article class="card search-card">
- <header
- @click="openModalCard"
- >
- <h1>{{ item.title }}</h1>
- <h4>{{ item.field_short_description }}</h4>
- <span class="ref">{{ item.field_reference }}</span>
- </header>
- <nav class="tools">
- <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>
- </ul>
- </div>
- </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.img_styles.card_medium"
- :title="img.title"
- />
- <img
- class="blank"
- :src="blanksrc"
- @click="lightbox_index = index"
- >
- </figure>
- </section>
- <CoolLightBox
- :items="item.images"
- :index="lightbox_index"
- srcName="src"
- 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(this.item.uuid);
- // console.log(this.flagcolls[collid].items_uuids);
- return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -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);
- 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, uuid: this.item.uuid, collid: collid})
- .then(data => {
- console.log("onFlagActionCard then", data);
- this.loadingFlag = false;
- })
- }
- },
- openModalCard (e) {
- this.$modal.show(
- ModalCard,
- { item: this.item },
- {
- draggable: true,
- width: '850px',
- height: '610px'
- }
- )
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
|