Bachir Soussi Chiadmi
417b084216
remain to automaticly export jsons and updated json files with webpack and to understand how to access nested translations
142 lines
3.9 KiB
Vue
142 lines
3.9 KiB
Vue
<template>
|
|
<article class="card modal-card">
|
|
<section class="col col-right">
|
|
<header>
|
|
<h1>{{ item.title }}</h1>
|
|
<h4>{{ item.field_short_description }}</h4>
|
|
<span class="ref">{{ item.field_reference }}</span>
|
|
</header>
|
|
<nav class="tools">
|
|
<section class="tool close">
|
|
<span
|
|
class="btn mdi mdi-close"
|
|
@click.prevent="onCloseModalCard"
|
|
/>
|
|
</section>
|
|
<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="samples">
|
|
<h3>{{ $t("Validation.Bundle") }}</h3>
|
|
<ul>
|
|
<li
|
|
v-for="sample in item.field_samples"
|
|
:key="sample.target_id"
|
|
>
|
|
<span class="showroom">{{ showrooms[sample.target_id].name }}</span>: {{ sample.location }}
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="body" v-html="item.body.processed"/>
|
|
</section>
|
|
<section class="col col-left 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_full"
|
|
: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'
|
|
|
|
export default {
|
|
name: "ModalCard",
|
|
props: ['item'],
|
|
mixins: [cardMixins],
|
|
data() {
|
|
return {
|
|
blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
|
|
loadingFlag: false,
|
|
lightbox_index: null
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
flagcolls: state => state.User.flagcolls,
|
|
showrooms: state => state.Showrooms.showrooms_by_tid
|
|
})
|
|
},
|
|
created () {
|
|
console.log('modale item', this.item)
|
|
},
|
|
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;
|
|
})
|
|
}
|
|
},
|
|
onCloseModalCard (e) {
|
|
this.$modal.hideAll()
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|