MiniCard.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template>
  2. <article class="card minicard">
  3. <header
  4. @click.prevent="openModalCard"
  5. >
  6. <h1>{{ item.title }}</h1>
  7. <span v-if="item.reference" class="ref">{{ item.reference }}</span>
  8. </header>
  9. <nav class="tools">
  10. <section class="tool samples" v-if="item.samples && item.samples.length">
  11. <span class="btn mdi mdi-map-marker-star-outline"/>
  12. <div class="tool-content">
  13. <span class="label">{{ $t("materio.Samples") }}</span>
  14. <ul>
  15. <li
  16. v-for="sample in item.samples"
  17. :key="sample.showroom.id"
  18. >
  19. <span class="showroom">{{ sample.showroom.name }}</span>: {{ sample.location }}
  20. </li>
  21. </ul>
  22. </div>
  23. </section>
  24. <section class="tool flags">
  25. <span
  26. class="mdi unflag"
  27. :class="[
  28. itemIsLoading() ? 'mdi-loading mdi-spin' : 'mdi-folder-remove'
  29. ]"
  30. @click.prevent="onUnFlagCard"
  31. />
  32. </section>
  33. </nav>
  34. <section class="images" v-switcher>
  35. <figure
  36. v-for="(img, index) in item.images"
  37. :key="img.url"
  38. v-lazy="index"
  39. class="lazy"
  40. >
  41. <img
  42. :data-src="img.style_minicard.url"
  43. :title="img.title"
  44. />
  45. <img
  46. class="blank"
  47. :src="blanksrc"
  48. @click.prevent="openModalCard"
  49. >
  50. </figure>
  51. </section>
  52. </article>
  53. </template>
  54. <script>
  55. import { mapState, mapActions } from 'vuex'
  56. import cardMixins from 'vuejs/components/cardMixins'
  57. import ModalCard from 'vuejs/components/Content/ModalCard'
  58. export default {
  59. name: "MiniCard",
  60. props: ['item', 'collid'],
  61. mixins: [cardMixins],
  62. components: {
  63. ModalCard
  64. },
  65. data() {
  66. return {
  67. blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
  68. loadingItem: false
  69. }
  70. },
  71. computed: {
  72. ...mapState({
  73. isloggedin: state => state.User.isloggedin
  74. })
  75. },
  76. methods: {
  77. ...mapActions({
  78. flagUnflag: 'User/flagUnflag'
  79. }),
  80. itemIsLoading(id) {
  81. return this.loadingItem
  82. },
  83. onUnFlagCard (e) {
  84. console.log("Card onFlagActionCard", e, this.item)
  85. if (!this.loadingItem) {
  86. this.loadingItem = true;
  87. this.flagUnflag({
  88. action: 'unflag',
  89. id: this.item.id,
  90. collid: this.collid
  91. })
  92. .then(data => {
  93. console.log("onUnFlagCard then", data)
  94. this.loadingItem = false;
  95. })
  96. }
  97. },
  98. openModalCard (e) {
  99. console.log('openModalCard', this.isLoggedin)
  100. if (this.isloggedin) {
  101. this.$modal.show(
  102. ModalCard,
  103. { item: this.item },
  104. {
  105. name: `modal-${this.item.id}`,
  106. draggable: false,
  107. classes: "vm--modale-card",
  108. // this does not work
  109. // adaptative: true,
  110. // maxWidth: 850,
  111. // maxHeight: 610,
  112. width: '95%',
  113. height: '95%'
  114. }
  115. )
  116. }
  117. }
  118. }
  119. }
  120. </script>
  121. <style lang="scss" scoped>
  122. </style>