materio-d9/web/themes/custom/materiotheme/vuejs/components/Content/MiniCard.vue

94 lines
2.5 KiB
Vue
Raw Normal View History

<template>
<article class="card minicard">
<header>
<h1>{{ item.title }}</h1>
<span class="ref">{{ item.field_reference }}</span>
</header>
<nav class="tools">
<section class="tool flags">
<span class="mdi mdi-folder-remove-outline"/>
</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.url"
:title="img.title"
/>
<img class="blank" :src="blanksrc">
</figure>
</section>
</article>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import cardMixins from 'vuejs/components/cardMixins'
export default {
name: "MiniCard",
props: ['item'],
mixins: [cardMixins],
data() {
return {
blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
// loadingFlag: false
}
},
computed: {
// ...mapState({
// flagcolls: state => state.User.flagcolls
// })
},
methods: {
// ...mapActions({
// flag: 'User/flag',
// unFlag: 'User/unFlag'
// }),
// 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);
// // console.log('collid', collid);
// // console.log("this.item", this.item);
// this.loadingFlag = collid;
// if (isActive) {
// this.unFlag({uuid: this.item.uuid, collid: collid})
// .then(data => {
// console.log("onFlagActionCard then", data);
// this.loadingFlag = false;
// })
// }else{
// this.flag({uuid: this.item.uuid, collid: collid})
// .then(data => {
// console.log("onFlagActionCard then", data);
// this.loadingFlag = false;
// })
// }
// }
// }
}
}
</script>
<style lang="scss" scoped>
</style>