ModalCard.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <template>
  2. <div class="loading" v-if="!material || loading">
  3. <span>Loading ...</span>
  4. </div>
  5. <article v-else class="card modal-card">
  6. <section class="col col-right">
  7. <header>
  8. <h1>{{ material.title }}</h1>
  9. <h4>{{ material.short_description }}</h4>
  10. <span class="ref">{{ material.reference }}</span>
  11. </header>
  12. <nav class="tools">
  13. <section class="tool close">
  14. <span
  15. class="btn mdi mdi-close"
  16. @click.prevent="onCloseModalCard"
  17. />
  18. </section>
  19. <section class="tool flags">
  20. <span class="btn mdi mdi-folder-outline"/>
  21. <div class="tool-content">
  22. <ul>
  23. <li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
  24. <span
  25. class="flag mdi"
  26. :class="[
  27. flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close-circle isActive' : 'mdi-plus'
  28. ]"
  29. :collid="coll.id"
  30. @click.prevent="onFlagActionCard"
  31. >
  32. {{ coll.name }}
  33. </span>
  34. </li>
  35. </ul>
  36. </div>
  37. </section>
  38. </nav>
  39. <section class="samples">
  40. <h3>{{ $t("materio.Samples") }}</h3>
  41. <ul>
  42. <li
  43. v-for="sample in material.samples"
  44. :key="sample.showroom.id"
  45. >
  46. <span class="showroom">{{ sample.showroom.name }}</span>: {{ sample.location }}
  47. </li>
  48. </ul>
  49. </section>
  50. <section class="body" v-html="material.body"/>
  51. </section>
  52. <section class="col col-left images" v-switcher>
  53. <figure
  54. v-for="(img, index) in material.images"
  55. :key="img.url"
  56. >
  57. <img
  58. class="lazy"
  59. v-lazy="index"
  60. :data-src="img.style_cardfull.url"
  61. :title="img.title"
  62. />
  63. <img
  64. class="blank"
  65. :src="blanksrc"
  66. @click="lightbox_index = index"
  67. >
  68. </figure>
  69. </section>
  70. <CoolLightBox
  71. :items="material.images"
  72. :index="lightbox_index"
  73. srcName="url"
  74. :loop="true"
  75. @close="lightbox_index = null">
  76. </CoolLightBox>
  77. </article>
  78. </template>
  79. <script>
  80. import { mapState, mapActions } from 'vuex'
  81. import cardMixins from 'vuejs/components/cardMixins'
  82. import { MGQ } from 'vuejs/api/graphql-axios'
  83. import { print } from 'graphql/language/printer'
  84. import gql from 'graphql-tag'
  85. import materiauFields from 'vuejs/api/gql/materiaumodal.fragment.gql'
  86. export default {
  87. name: "ModalCard",
  88. props: ['item'],
  89. mixins: [cardMixins],
  90. data() {
  91. return {
  92. material: null,
  93. loading: false,
  94. blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
  95. loadingFlag: false,
  96. lightbox_index: null
  97. }
  98. },
  99. computed: {
  100. ...mapState({
  101. flagcolls: state => state.User.flagcolls,
  102. showrooms: state => state.Showrooms.showrooms_by_tid
  103. })
  104. },
  105. created () {
  106. console.log('modale item', this.item)
  107. this.loadMaterial()
  108. },
  109. methods: {
  110. ...mapActions({
  111. flagUnflag: 'User/flagUnflag'
  112. }),
  113. loadMaterial(){
  114. console.log('loadMaterial', this.item.id)
  115. this.loading = true
  116. let ast = gql`{
  117. materiau(id: ${this.item.id}, lang: "${drupalDecoupled.lang_code}") {
  118. ...MateriauFields
  119. }
  120. }
  121. ${ materiauFields }
  122. `
  123. MGQ.post('', { query: print(ast)
  124. })
  125. .then(({ data:{data:{materiau}}}) => {
  126. console.log('loadMaterial', materiau )
  127. this.material = materiau
  128. this.loading = false
  129. // delay the lazyload to let the card the time to update dom
  130. // maybe not the best method
  131. setTimeout(function () {
  132. this.activateLazyLoad()
  133. }.bind(this), 5)
  134. })
  135. .catch(error => {
  136. console.warn('Issue with loadMaterial', error)
  137. Promise.reject(error)
  138. })
  139. },
  140. flagIsActive(collid) {
  141. // console.log(this.item.uuid);
  142. // console.log(this.flagcolls[collid].items_uuids);
  143. // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
  144. return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;
  145. },
  146. flagIsLoading(collid) {
  147. // console.log(this.item.uuid);
  148. // console.log(this.flagcolls[collid].items_uuids);
  149. return collid === this.loadingFlag;
  150. },
  151. onFlagActionCard (e) {
  152. console.log("Card onFlagActionCard", e);
  153. if (!this.loadingFlag) {
  154. let collid = e.target.getAttribute('collid');
  155. let isActive = this.flagIsActive(collid);
  156. let action = isActive ? 'unflag' : 'flag';
  157. // console.log('collid', collid);
  158. // console.log("this.item", this.item);
  159. this.loadingFlag = collid;
  160. this.flagUnflag({ action: action, id: this.item.id, collid: collid})
  161. .then(data => {
  162. console.log("onFlagActionCard then", data);
  163. this.loadingFlag = false;
  164. })
  165. }
  166. },
  167. onCloseModalCard (e) {
  168. this.$modal.hideAll()
  169. }
  170. }
  171. }
  172. </script>
  173. <style lang="scss" scoped>
  174. </style>