MiniCard.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  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 flags">
  11. <span
  12. class="mdi unflag"
  13. :class="[
  14. itemIsLoading() ? 'mdi-loading mdi-spin' : 'mdi-folder-remove'
  15. ]"
  16. @click.prevent="onUnFlagCard"
  17. />
  18. </section>
  19. </nav>
  20. <section class="images" v-switcher>
  21. <figure
  22. v-for="(img, index) in item.images"
  23. :key="img.url"
  24. >
  25. <img
  26. class="lazy"
  27. v-lazy="index"
  28. :data-src="img.style_minicard.url"
  29. :title="img.title"
  30. />
  31. <img
  32. class="blank"
  33. :src="blanksrc"
  34. @click.prevent="openModalCard"
  35. >
  36. </figure>
  37. </section>
  38. </article>
  39. </template>
  40. <script>
  41. import { mapState, mapActions } from 'vuex'
  42. import cardMixins from 'vuejs/components/cardMixins'
  43. import ModalCard from 'vuejs/components/Content/ModalCard'
  44. export default {
  45. name: "MiniCard",
  46. props: ['item', 'collid'],
  47. mixins: [cardMixins],
  48. components: {
  49. ModalCard
  50. },
  51. data() {
  52. return {
  53. blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
  54. loadingItem: false
  55. }
  56. },
  57. computed: {
  58. ...mapState({
  59. isloggedin: state => state.User.isloggedin
  60. })
  61. },
  62. methods: {
  63. ...mapActions({
  64. flagUnflag: 'User/flagUnflag'
  65. }),
  66. itemIsLoading(id) {
  67. return this.loadingItem
  68. },
  69. onUnFlagCard (e) {
  70. console.log("Card onFlagActionCard", e, this.item);
  71. if (!this.loadingItem) {
  72. this.loadingItem = true;
  73. this.flagUnflag({
  74. action: 'unflag',
  75. id: this.item.id,
  76. collid: this.collid
  77. })
  78. .then(data => {
  79. console.log("onUnFlagCard then", data);
  80. this.loadingItem = false;
  81. })
  82. }
  83. },
  84. openModalCard (e) {
  85. console.log('openModalCard', this.isLoggedin);
  86. if(this.isloggedin){
  87. this.$modal.show(
  88. ModalCard,
  89. { item: this.item },
  90. {
  91. name: `modal-${this.item.id}`,
  92. draggable: true,
  93. width: '850px',
  94. height: '610px'
  95. }
  96. )
  97. }
  98. }
  99. }
  100. }
  101. </script>
  102. <style lang="scss" scoped>
  103. </style>