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

250 lines
7.5 KiB
Vue

<template>
<article class="card search-card">
<header
@click.prevent="openModalCard"
>
<h1 v-if="hasDBAccess">{{ item.title }}</h1>
<h4>{{ item.short_description }}</h4>
<span v-if="hasDBAccess" class="ref">{{ item.reference }}</span>
</header>
<nav class="tools" v-if="hasDBAccess">
<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-map-marker-star-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"
class="lazy"
v-lazy="index"
>
<img
: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'
import MemberWarning from 'vuejs/components/Content/MemberWarning'
export default {
name: "Card",
props: ['item'],
mixins: [cardMixins],
components: {
ModalCard,
MemberWarning
},
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,
hasDBAccess: state => state.User.hasDBAccess
}),
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
}
}
},
beforeMount () {
// console.log(this.item.id, this.samples)
},
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.hasDBAccess)
if (this.hasDBAccess) {
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%'
}
)
} else {
this.$modal.show(
MemberWarning,
{},
{
// name: `modal-${this.item.id}`,
draggable: false,
// classes: "vm--modale-card",
// this does not work
// adaptative: true,
// maxWidth: 850,
// maxHeight: 610,
width: '400px',
height: '250px'
}
)
}
}
}
}
</script>
<style lang="scss" scoped>
</style>