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

228 lines
6.9 KiB
Vue
Raw Normal View History

<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">
2020-11-24 14:07:10 +01:00
<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="[
2020-12-01 20:40:37 +01:00
flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close-circle isActive' : 'mdi-plus'
2020-11-24 14:07:10 +01:00
]"
:collid="coll.id"
@click.prevent="onFlagActionCard"
>
{{ coll.name }}
2020-11-24 14:07:10 +01:00
</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>
2020-11-24 14:07:10 +01:00
</ul>
2021-01-25 17:39:44 +01:00
</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>
2020-11-24 14:07:10 +01:00
</div>
</section>
<section v-if="item.note" class="tool note">
<span class="btn mdi mdi-note"/>
</section>
2021-01-25 22:19:21 +01:00
<section class="tool print">
<a :href="item.path+'/printable/print'" target="_blank">
<span class="btn mdi mdi-printer"/>
</a>
</section>
2020-11-24 14:07:10 +01:00
</nav>
2019-06-11 18:04:46 +02:00
<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"
2019-06-11 18:04:46 +02:00
:title="img.title"
/>
<img
class="blank"
:src="blanksrc"
@click.prevent="openModalCard"
2021-01-20 12:09:22 +01:00
/>
2019-06-11 18:04:46 +02:00
</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>
2020-11-24 14:07:10 +01:00
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
},
2019-06-11 18:04:46 +02:00
data() {
return {
2020-11-24 14:07:10 +01:00
blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
loadingFlag: false,
new_folder_name: "",
is_creating_folder: false
// lightbox_index: null
2019-06-11 18:04:46 +02:00
}
},
2020-11-24 14:07:10 +01:00
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
}
}
2020-11-24 14:07:10 +01:00
},
methods: {
...mapActions({
// refreshItem: 'Search/refreshItem',
createFlagColl: 'User/createFlagColl',
2020-12-01 20:40:37 +01:00
flagUnflag: 'User/flagUnflag'
2020-11-24 14:07:10 +01:00
}),
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;
})
})
},
2020-11-24 14:07:10 +01:00
flagIsActive(collid) {
// console.log("Card flagIsActive",
// this.item.id,
// this.flagcolls[collid].items,
// this.flagcolls[collid].items.indexOf(this.item.id)
// );
2020-11-24 14:07:10 +01:00
// 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;
2020-11-24 14:07:10 +01:00
},
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);
2020-11-24 14:07:10 +01:00
if (!this.loadingFlag) {
let collid = e.target.getAttribute('collid');
let isActive = this.flagIsActive(collid);
2020-12-01 20:40:37 +01:00
let action = isActive ? 'unflag' : 'flag';
2020-11-24 14:07:10 +01:00
// console.log('collid', collid);
// console.log("this.item", this.item);
this.loadingFlag = collid;
this.flagUnflag({ action: action, id: this.item.id, collid: collid})
2020-12-01 20:40:37 +01:00
.then(data => {
console.log("onFlagActionCard then", data);
this.loadingFlag = false;
})
2020-11-24 14:07:10 +01:00
}
},
// onClickImg (e, index) {
// this.lightbox_index = index
// },
openModalCard (e) {
2020-12-25 17:37:15 +01:00
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}`,
2021-03-30 15:42:40 +02:00
draggable: false,
classes: "vm--modale-card",
// this does not work
// adaptative: true,
// maxWidth: 850,
// maxHeight: 610,
width: '95%',
height: '95%'
}
)
}
2020-11-24 14:07:10 +01:00
}
2019-06-11 18:04:46 +02:00
}
}
</script>
<style lang="scss" scoped>
</style>