123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245 |
- <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">
- <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-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>
- </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
- }),
- 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
- }
- }
- },
- 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.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}`,
- 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>
|