Bachir Soussi Chiadmi
417b084216
remain to automaticly export jsons and updated json files with webpack and to understand how to access nested translations
132 lines
3.3 KiB
Vue
132 lines
3.3 KiB
Vue
<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>
|