Card.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <template>
  2. <article class="card search-card">
  3. <header
  4. @click.prevent="openModalCard"
  5. >
  6. <h1 v-if="isloggedin">{{ item.title }}</h1>
  7. <h4>{{ item.short_description }}</h4>
  8. <span v-if="isloggedin" class="ref">{{ item.reference }}</span>
  9. </header>
  10. <nav class="tools" v-if="isloggedin">
  11. <section class="tool flags">
  12. <span class="btn mdi mdi-folder-outline"/>
  13. <div class="tool-content">
  14. <ul>
  15. <li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
  16. <span
  17. class="flag mdi"
  18. :class="[
  19. flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close-circle isActive' : 'mdi-plus'
  20. ]"
  21. :collid="coll.id"
  22. @click.prevent="onFlagActionCard"
  23. >
  24. {{ coll.name }}
  25. </span>
  26. </li>
  27. </ul>
  28. </div>
  29. </section>
  30. </nav>
  31. <section class="images" v-switcher>
  32. <figure
  33. v-for="(img, index) in item.images"
  34. :key="img.url"
  35. >
  36. <img
  37. class="lazy"
  38. v-lazy="index"
  39. :data-src="img.style_cardmedium_url"
  40. :title="img.title"
  41. />
  42. <img
  43. class="blank"
  44. :src="blanksrc"
  45. @click.prevent="openModalCard"
  46. />
  47. </figure>
  48. </section>
  49. <!-- <CoolLightBox
  50. v-if="isloggedin"
  51. :items="item.images"
  52. :index="lightbox_index"
  53. srcName="style_hd_url"
  54. :loop="true"
  55. @close="lightbox_index = null">
  56. </CoolLightBox> -->
  57. </article>
  58. </template>
  59. <script>
  60. import { mapState, mapActions } from 'vuex'
  61. import cardMixins from 'vuejs/components/cardMixins'
  62. import ModalCard from 'vuejs/components/Content/ModalCard'
  63. export default {
  64. name: "Card",
  65. props: ['item'],
  66. mixins: [cardMixins],
  67. components: {
  68. ModalCard
  69. },
  70. data() {
  71. return {
  72. blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
  73. loadingFlag: false
  74. // lightbox_index: null
  75. }
  76. },
  77. computed: {
  78. ...mapState({
  79. flagcolls: state => state.User.flagcolls,
  80. isloggedin: state => state.User.isloggedin
  81. })
  82. },
  83. methods: {
  84. ...mapActions({
  85. flagUnflag: 'User/flagUnflag'
  86. }),
  87. flagIsActive(collid) {
  88. // console.log("Card flagIsActive",
  89. // this.item.id,
  90. // this.flagcolls[collid].items,
  91. // this.flagcolls[collid].items.indexOf(this.item.id)
  92. // );
  93. // console.log(this.flagcolls[collid].items_uuids);
  94. // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
  95. return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;
  96. },
  97. flagIsLoading(collid) {
  98. // console.log(this.item.uuid);
  99. // console.log(this.flagcolls[collid].items_uuids);
  100. return collid === this.loadingFlag;
  101. },
  102. onFlagActionCard (e) {
  103. console.log("Card onFlagActionCard", e, this.item);
  104. if (!this.loadingFlag) {
  105. let collid = e.target.getAttribute('collid');
  106. let isActive = this.flagIsActive(collid);
  107. let action = isActive ? 'unflag' : 'flag';
  108. // console.log('collid', collid);
  109. // console.log("this.item", this.item);
  110. this.loadingFlag = collid;
  111. this.flagUnflag({ action: action, id: this.item.id, collid: collid})
  112. .then(data => {
  113. console.log("onFlagActionCard then", data);
  114. this.loadingFlag = false;
  115. })
  116. }
  117. },
  118. // onClickImg (e, index) {
  119. // this.lightbox_index = index
  120. // },
  121. openModalCard (e) {
  122. console.log('openModalCard', this.isLoggedin);
  123. if(this.isloggedin){
  124. this.$modal.show(
  125. ModalCard,
  126. { item: this.item },
  127. {
  128. draggable: true,
  129. width: '850px',
  130. height: '610px'
  131. }
  132. )
  133. }
  134. }
  135. }
  136. }
  137. </script>
  138. <style lang="scss" scoped>
  139. </style>