ModalCard.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  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. <span class="label">{{ $t("materio.My folders") }}</span>
  23. <ul>
  24. <li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
  25. <span
  26. class="flag mdi"
  27. :class="[
  28. flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close-circle isActive' : 'mdi-plus'
  29. ]"
  30. :collid="coll.id"
  31. @click.prevent="onFlagActionCard"
  32. >
  33. {{ coll.name }}
  34. </span>
  35. </li>
  36. </ul>
  37. </div>
  38. </section>
  39. <section class="tool samples">
  40. <span class="btn mdi mdi-beaker-outline"/>
  41. <div class="tool-content">
  42. <span class="label">{{ $t("materio.Samples") }}</span>
  43. <ul>
  44. <li
  45. v-for="sample in material.samples"
  46. :key="sample.showroom.id"
  47. >
  48. <span class="showroom">{{ sample.showroom.name }}</span>: {{ sample.location }}
  49. </li>
  50. </ul>
  51. </div>
  52. </section>
  53. <section class="tool industriels" v-if="material.manufacturer || material.distributor">
  54. <span class="btn mdi mdi-factory"/>
  55. <div class="tool-content">
  56. <section v-if="material.distributor">
  57. <span class="label">{{ $t("materio.Distributor") }}</span>
  58. <ul>
  59. <li v-for="distrib in material.distributor" v-bind:key="distrib.id">
  60. <h2>{{ distrib.name }}</h2>
  61. <p v-if="distrib.website">
  62. <a target="_blank" :href="distrib.website.url">distrib.website.url</a>
  63. </p>
  64. <p v-if="distrib.email"><a :href="'mailto:'+distrib.email">{{ distrib.email }}</a></p>
  65. </li>
  66. </ul>
  67. </section>
  68. <section v-if="material.manufacturer">
  69. <span class="label">{{ $t("materio.Manufacturer") }}</span>
  70. <ul>
  71. <li v-for="manu in material.manufacturer" v-bind:key="manu.id">
  72. <h2>{{ manu.name }}</h2>
  73. <p v-if="manu.website">
  74. <a target="_blank" :href="manu.website.url">manu.website.url</a>
  75. </p>
  76. <p v-if="manu.email"><a :href="'mailto:'+manu.email">{{ manu.email }}</a></p>
  77. </li>
  78. </ul>
  79. </section>
  80. </div>
  81. </section>
  82. </nav>
  83. <section class="body" v-html="material.body"/>
  84. <section class="linked-materials">
  85. <span class="label">{{ $t("materio.Linked materials") }}</span>
  86. <ul>
  87. <li v-for="m in material.linked_materials" v-bind:key="m.id">
  88. <LinkedMaterialCard :item="m"/>
  89. </li>
  90. </ul>
  91. </section>
  92. </section>
  93. <section class="col col-left images" v-switcher>
  94. <figure
  95. v-for="(img, index) in material.images"
  96. :key="img.url"
  97. >
  98. <img
  99. class="lazy"
  100. v-lazy="index"
  101. :data-src="img.style_cardfull.url"
  102. :title="img.title"
  103. />
  104. <img
  105. class="blank"
  106. :src="blanksrc"
  107. @click="lightbox_index = index"
  108. >
  109. </figure>
  110. </section>
  111. <CoolLightBox
  112. :items="material.images"
  113. :index="lightbox_index"
  114. srcName="url"
  115. :loop="true"
  116. @close="lightbox_index = null">
  117. </CoolLightBox>
  118. </article>
  119. </template>
  120. <script>
  121. import { mapState, mapActions } from 'vuex'
  122. import LinkedMaterialCard from 'vuejs/components/Content/LinkedMaterialCard'
  123. import cardMixins from 'vuejs/components/cardMixins'
  124. import { MGQ } from 'vuejs/api/graphql-axios'
  125. import { print } from 'graphql/language/printer'
  126. import gql from 'graphql-tag'
  127. import materiauFields from 'vuejs/api/gql/materiaumodal.fragment.gql'
  128. export default {
  129. name: "ModalCard",
  130. props: ['item'],
  131. mixins: [cardMixins],
  132. components: {
  133. LinkedMaterialCard
  134. },
  135. data() {
  136. return {
  137. material: null,
  138. loading: false,
  139. blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
  140. loadingFlag: false,
  141. lightbox_index: null
  142. }
  143. },
  144. computed: {
  145. ...mapState({
  146. flagcolls: state => state.User.flagcolls,
  147. showrooms: state => state.Showrooms.showrooms_by_tid
  148. })
  149. },
  150. created () {
  151. console.log('modale item', this.item)
  152. this.loadMaterial()
  153. },
  154. methods: {
  155. ...mapActions({
  156. flagUnflag: 'User/flagUnflag'
  157. }),
  158. loadMaterial(){
  159. console.log('loadMaterial', this.item.id)
  160. this.loading = true
  161. let ast = gql`{
  162. materiau(id: ${this.item.id}, lang: "${drupalDecoupled.lang_code}") {
  163. ...MateriauFields
  164. }
  165. }
  166. ${ materiauFields }
  167. `
  168. MGQ.post('', { query: print(ast)
  169. })
  170. .then(({ data:{data:{materiau}}}) => {
  171. console.log('loadMaterial material loaded', materiau )
  172. this.material = materiau
  173. this.loading = false
  174. // delay the lazyload to let the card the time to update dom
  175. // maybe not the best method
  176. setTimeout(function () {
  177. this.activateLazyLoad()
  178. }.bind(this), 5)
  179. })
  180. .catch(error => {
  181. console.warn('Issue with loadMaterial', error)
  182. Promise.reject(error)
  183. })
  184. },
  185. flagIsActive(collid) {
  186. // console.log(this.item.uuid);
  187. // console.log(this.flagcolls[collid].items_uuids);
  188. // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
  189. return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;
  190. },
  191. flagIsLoading(collid) {
  192. // console.log(this.item.uuid);
  193. // console.log(this.flagcolls[collid].items_uuids);
  194. return collid === this.loadingFlag;
  195. },
  196. onFlagActionCard (e) {
  197. console.log("Card onFlagActionCard", e);
  198. if (!this.loadingFlag) {
  199. let collid = e.target.getAttribute('collid');
  200. let isActive = this.flagIsActive(collid);
  201. let action = isActive ? 'unflag' : 'flag';
  202. // console.log('collid', collid);
  203. // console.log("this.item", this.item);
  204. this.loadingFlag = collid;
  205. this.flagUnflag({ action: action, id: this.item.id, collid: collid})
  206. .then(data => {
  207. console.log("onFlagActionCard then", data);
  208. this.loadingFlag = false;
  209. })
  210. }
  211. },
  212. onCloseModalCard (e) {
  213. // this.$modal.hideAll()
  214. this.$modal.hide(`modal-${this.item.id}`)
  215. }
  216. }
  217. }
  218. </script>
  219. <style lang="scss" scoped>
  220. </style>