ModalCard.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527
  1. <template>
  2. <div class="loading" v-if="!material || loading">
  3. <span>Loading ...</span>
  4. </div>
  5. <article
  6. v-else
  7. class="card modal-card"
  8. v-touch="onTapCard"
  9. v-touch:swipe="onSwipeCard"
  10. >
  11. <section class="col col-right">
  12. <header>
  13. <h1>{{ material.title }}</h1>
  14. <h4>{{ material.short_description }}</h4>
  15. <span class="ref">{{ material.reference }}</span>
  16. </header>
  17. <nav ref="tools" class="tools">
  18. <section class="tool close">
  19. <span
  20. class="btn mdi mdi-close"
  21. @click.prevent="onCloseModalCard"
  22. />
  23. </section>
  24. <section class="tool flags">
  25. <span
  26. class="btn mdi mdi-folder-outline"
  27. v-touch.prevent.stop="onTapTool"
  28. />
  29. <div class="tool-content">
  30. <span class="label">{{ $t("materio.My folders") }}</span>
  31. <ul>
  32. <li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
  33. <span
  34. class="flag mdi"
  35. :class="[
  36. flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close-circle isActive' : 'mdi-plus'
  37. ]"
  38. :collid="coll.id"
  39. @click.prevent="onFlagActionCard"
  40. >
  41. {{ coll.name }}
  42. </span>
  43. </li>
  44. <li v-if="collsLength<15" class="create-flag">
  45. <input
  46. placeholder="new folder"
  47. v-model="new_folder_name"
  48. @keyup.enter.prevent.stop="onCreateFlagColl"
  49. />
  50. <span
  51. class="add-btn mdi"
  52. :class="addFlagBtnClassObj"
  53. @click.prevent.stop="onCreateFlagColl"
  54. />
  55. </li>
  56. </ul>
  57. </div>
  58. </section>
  59. <section class="tool samples" v-if="item.samples && item.samples.length">
  60. <span
  61. class="btn mdi mdi-beaker-outline"
  62. v-touch.prevent.stop="onTapTool"
  63. />
  64. <div class="tool-content">
  65. <span class="label">{{ $t("materio.Samples") }}</span>
  66. <ul>
  67. <li
  68. v-for="sample in item.samples"
  69. :key="sample.showroom.id"
  70. >
  71. <span class="showroom">{{ sample.showroom.name }}</span>: {{ sample.location }}
  72. </li>
  73. </ul>
  74. </div>
  75. </section>
  76. <section class="tool note">
  77. <span
  78. v-if="note_nid"
  79. class="btn mdi mdi-note"
  80. v-touch.prevent.stop="onTapTool"
  81. />
  82. <span
  83. v-else
  84. class="btn mdi mdi-note-outline"
  85. v-touch.prevent.stop="onTapTool"
  86. />
  87. <div class="tool-content">
  88. <textarea spellcheck="false" v-model="note" name="note"/>
  89. </div>
  90. </section>
  91. <section class="tool print">
  92. <a :href="material.path+'/printable/print'" target="_blank">
  93. <span class="btn mdi mdi-printer"/>
  94. </a>
  95. </section>
  96. <!-- <section class="tool industriels" v-if="material.manufacturer || material.distributor">
  97. <span class="btn mdi mdi-factory"/>
  98. <div class="tool-content">
  99. <section v-if="material.distributor">
  100. <span class="label">{{ $t("materio.Distributor") }}</span>
  101. <ul>
  102. <li v-for="distrib in material.distributor" v-bind:key="distrib.id">
  103. <h2>{{ distrib.name }}</h2>
  104. <p v-if="distrib.website">
  105. <a target="_blank" :href="distrib.website.url">distrib.website.url</a>
  106. </p>
  107. <p v-if="distrib.email"><a :href="'mailto:'+distrib.email">{{ distrib.email }}</a></p>
  108. </li>
  109. </ul>
  110. </section>
  111. <section v-if="material.manufacturer">
  112. <span class="label">{{ $t("materio.Manufacturer") }}</span>
  113. <ul>
  114. <li v-for="manu in material.manufacturer" v-bind:key="manu.id">
  115. <h2>{{ manu.name }}</h2>
  116. <p v-if="manu.website">
  117. <a target="_blank" :href="manu.website.url">manu.website.url</a>
  118. </p>
  119. <p v-if="manu.email"><a :href="'mailto:'+manu.email">{{ manu.email }}</a></p>
  120. </li>
  121. </ul>
  122. </section>
  123. </div>
  124. </section> -->
  125. </nav>
  126. <vsa-list>
  127. <vsa-item :initActive="true">
  128. <vsa-heading>
  129. <span class="label">Description</span>
  130. </vsa-heading>
  131. <vsa-content>
  132. <section class="body" v-html="material.body"/>
  133. <section class="attachments">
  134. <!-- <h4 class="label">{{ $t("materio.Attachments") }}</h4> -->
  135. <ul>
  136. <li
  137. v-for="attachmt in material.attachments" :key="attachmt.file.fid"
  138. >
  139. <a target="_blank" :href="attachmt.file.url">{{ attachmt.file.filename}} <span>({{ prettyFileSize(attachmt.file.filesize) }})</span></a>
  140. <p v-if="attachmt.description" class="description" v-html="attachmt.description" />
  141. </li>
  142. </ul>
  143. </section>
  144. <section class="industriels">
  145. <!-- <h4 class="label">{{ $t("default.Contact") }}</h4> -->
  146. <section v-if="material.manufacturer">
  147. <span class="label">{{ $t("materio.Manufacturer") }}</span>
  148. <ul>
  149. <li v-for="manu in material.manufacturer" v-bind:key="manu.id">
  150. <h2>{{ manu.name }}</h2>
  151. <p v-if="manu.website">
  152. <a target="_blank" :href="manu.website.url">{{shortUrl(manu.website.url)}}</a>
  153. </p>
  154. <p v-if="manu.email"><a :href="'mailto:'+manu.email">{{ manu.email }}</a></p>
  155. </li>
  156. </ul>
  157. </section>
  158. <section v-if="material.distributor">
  159. <span class="label">{{ $t("materio.Distributor") }}</span>
  160. <ul>
  161. <li v-for="distrib in material.distributor" v-bind:key="distrib.id">
  162. <h2>{{ distrib.name }}</h2>
  163. <p v-if="distrib.website">
  164. <a target="_blank" :href="distrib.website.url">{{shortUrl(distrib.website.url)}}</a>
  165. </p>
  166. <p v-if="distrib.email"><a :href="'mailto:'+distrib.email">{{ distrib.email }}</a></p>
  167. </li>
  168. </ul>
  169. </section>
  170. </section>
  171. </vsa-content>
  172. </vsa-item>
  173. <!-- <vsa-item v-if="item.samples && item.samples.length">
  174. <vsa-heading>
  175. <span class="label">{{ $t("materio.Samples") }}</span>
  176. </vsa-heading>
  177. <vsa-content>
  178. <section class="samples">
  179. <ul>
  180. <li
  181. v-for="sample in material.samples"
  182. :key="sample.showroom.id"
  183. >
  184. <span class="showroom">{{ sample.showroom.name }}</span>: {{ sample.location }}
  185. </li>
  186. </ul>
  187. </section>
  188. </vsa-content>
  189. </vsa-item> -->
  190. <vsa-item v-if="material.linked_materials.length">
  191. <vsa-heading>
  192. <span class="label">{{ $t("materio.Linked materials") }}</span>
  193. </vsa-heading>
  194. <vsa-content>
  195. <section class="linked-materials">
  196. <ul>
  197. <li v-for="m in material.linked_materials" v-bind:key="m.id">
  198. <LinkedMaterialCard :item="m"/>
  199. </li>
  200. </ul>
  201. </section>
  202. </vsa-content>
  203. </vsa-item>
  204. <!-- <vsa-item v-if="material.manufacturer || material.distributor">
  205. <vsa-heading>
  206. <span class="label">{{ $t("default.Contact") }}</span>
  207. </vsa-heading>
  208. <vsa-content>
  209. <section class="industriels">
  210. <section v-if="material.manufacturer">
  211. <span class="label">{{ $t("materio.Manufacturer") }}</span>
  212. <ul>
  213. <li v-for="manu in material.manufacturer" v-bind:key="manu.id">
  214. <h2>{{ manu.name }}</h2>
  215. <p v-if="manu.website">
  216. <a target="_blank" :href="manu.website.url">{{shortUrl(manu.website.url)}}</a>
  217. </p>
  218. <p v-if="manu.email"><a :href="'mailto:'+manu.email">{{ manu.email }}</a></p>
  219. </li>
  220. </ul>
  221. </section>
  222. <section v-if="material.distributor">
  223. <span class="label">{{ $t("materio.Distributor") }}</span>
  224. <ul>
  225. <li v-for="distrib in material.distributor" v-bind:key="distrib.id">
  226. <h2>{{ distrib.name }}</h2>
  227. <p v-if="distrib.website">
  228. <a target="_blank" :href="distrib.website.url">{{shortUrl(distrib.website.url)}}</a>
  229. </p>
  230. <p v-if="distrib.email"><a :href="'mailto:'+distrib.email">{{ distrib.email }}</a></p>
  231. </li>
  232. </ul>
  233. </section>
  234. </section>
  235. </vsa-content>
  236. </vsa-item> -->
  237. <!-- <vsa-item v-if="material.attachments && material.attachments.length">
  238. <vsa-heading>
  239. <span class="label">{{ $t("materio.Attachments") }}</span>
  240. </vsa-heading>
  241. <vsa-content>
  242. <section class="attachments">
  243. <ul>
  244. <li
  245. v-for="attachmt in material.attachments" :key="attachmt.file.fid"
  246. >
  247. <a target="_blank" :href="attachmt.file.url">{{ attachmt.file.filename}} <span>({{ prettyFileSize(attachmt.file.filesize) }})</span></a>
  248. <p v-if="attachmt.description" class="description" v-html="attachmt.description" />
  249. </li>
  250. </ul>
  251. </section>
  252. </vsa-content>
  253. </vsa-item> -->
  254. </vsa-list>
  255. </section>
  256. <section class="col col-left images" v-switcher>
  257. <figure
  258. v-for="(img, index) in material.images"
  259. :key="img.url"
  260. >
  261. <img
  262. class="lazy"
  263. v-lazy="index"
  264. :data-src="img.style_cardfull.url"
  265. :title="img.title"
  266. />
  267. <img
  268. class="blank"
  269. :src="blanksrc"
  270. @click="lightbox_index = index"
  271. >
  272. </figure>
  273. </section>
  274. <CoolLightBox
  275. :items="material.images"
  276. :index="lightbox_index"
  277. srcName="url"
  278. :loop="true"
  279. @close="lightbox_index = null">
  280. </CoolLightBox>
  281. </article>
  282. </template>
  283. <script>
  284. import { mapState, mapActions } from 'vuex'
  285. import LinkedMaterialCard from 'vuejs/components/Content/LinkedMaterialCard'
  286. import cardMixins from 'vuejs/components/cardMixins'
  287. import { REST } from 'vuejs/api/rest-axios'
  288. import { MGQ } from 'vuejs/api/graphql-axios'
  289. import { print } from 'graphql/language/printer'
  290. import gql from 'graphql-tag'
  291. import materiauFields from 'vuejs/api/gql/materiaumodal.fragment.gql'
  292. const prettyBytes = require('pretty-bytes')
  293. const _debounce = require('lodash/debounce')
  294. export default {
  295. name: "ModalCard",
  296. props: ['item', 'addNoteId'],
  297. mixins: [cardMixins],
  298. components: {
  299. LinkedMaterialCard
  300. },
  301. data() {
  302. return {
  303. material: null,
  304. loading: false,
  305. blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
  306. new_folder_name: "",
  307. is_creating_folder: false,
  308. loadingFlag: false,
  309. lightbox_index: null,
  310. note: "",
  311. note_nid: null
  312. }
  313. },
  314. computed: {
  315. ...mapState({
  316. csrf_token: state => state.User.csrf_token,
  317. flagcolls: state => state.User.flagcolls,
  318. showrooms: state => state.Showrooms.showrooms_by_tid
  319. }),
  320. collsLength() {
  321. return Object.keys(this.flagcolls).length
  322. },
  323. addFlagBtnClassObj() {
  324. return {
  325. 'mdi-plus-circle-outline': !this.is_creating_folder,
  326. 'mdi-loading': this.is_creating_folder,
  327. active: this.new_folder_name.length > 4 && !this.is_creating_folder,
  328. loading: this.is_creating_folder
  329. }
  330. }
  331. },
  332. created () {
  333. console.log('modale item', this.item)
  334. this.loadMaterial()
  335. this.debouncedSaveNote = _debounce(this.saveNote, 500)
  336. },
  337. watch: {
  338. // whenever question changes, this function will run
  339. note: function (n, o) {
  340. console.log("note watcher: note", n)
  341. this.debouncedSaveNote()
  342. }
  343. },
  344. methods: {
  345. ...mapActions({
  346. // refreshItem: 'Search/refreshItem',
  347. createFlagColl: 'User/createFlagColl',
  348. flagUnflag: 'User/flagUnflag'
  349. }),
  350. loadMaterial(){
  351. console.log('loadMaterial', this.item.id)
  352. this.loading = true
  353. let ast = gql`{
  354. materiau(id: ${this.item.id}, lang: "${drupalDecoupled.lang_code}") {
  355. ...MateriauFields
  356. }
  357. }
  358. ${ materiauFields }
  359. `
  360. MGQ.post('', { query: print(ast)
  361. })
  362. .then(({ data:{data:{materiau}}}) => {
  363. console.log('loadMaterial material loaded', materiau )
  364. this.material = materiau
  365. this.loading = false
  366. if(materiau.note && materiau.note.id){
  367. this.note_id = materiau.note.id
  368. this.note = materiau.note.contenu
  369. }
  370. // delay the lazyload to let the card the time to update dom
  371. // maybe not the best method
  372. setTimeout(function () {
  373. this.activateLazyLoad()
  374. }.bind(this), 5)
  375. })
  376. .catch(error => {
  377. console.warn('Issue with loadMaterial', error)
  378. Promise.reject(error)
  379. })
  380. },
  381. onCreateFlagColl () {
  382. console.log("Card onCreateFlagColl", this.new_folder_name)
  383. this.is_creating_folder = true;
  384. this.createFlagColl(this.new_folder_name)
  385. .then(data => {
  386. console.log("Card onCreateFlagColl then", data);
  387. this.new_folder_name = "";
  388. this.is_creating_folder = false;
  389. let collid = data.id
  390. this.loadingFlag = collid;
  391. this.flagUnflag({ action: 'flag', id: this.item.id, collid: collid})
  392. .then(data => {
  393. console.log("onFlagActionCard then", data);
  394. this.loadingFlag = false;
  395. })
  396. })
  397. },
  398. flagIsActive(collid) {
  399. // console.log(this.item.uuid);
  400. // console.log(this.flagcolls[collid].items_uuids);
  401. // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
  402. return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;
  403. },
  404. flagIsLoading(collid) {
  405. // console.log(this.item.uuid);
  406. // console.log(this.flagcolls[collid].items_uuids);
  407. return collid === this.loadingFlag;
  408. },
  409. onFlagActionCard (e) {
  410. console.log("Card onFlagActionCard", e);
  411. if (!this.loadingFlag) {
  412. let collid = e.target.getAttribute('collid');
  413. let isActive = this.flagIsActive(collid);
  414. let action = isActive ? 'unflag' : 'flag';
  415. // console.log('collid', collid);
  416. // console.log("this.item", this.item);
  417. this.loadingFlag = collid;
  418. this.flagUnflag({ action: action, id: this.item.id, collid: collid})
  419. .then(data => {
  420. console.log("onFlagActionCard then", data);
  421. this.loadingFlag = false;
  422. })
  423. }
  424. },
  425. onCloseModalCard (e) {
  426. // this.$modal.hideAll()
  427. this.$modal.hide(`modal-${this.item.id}`)
  428. },
  429. onSwipeCard (e) {
  430. console.log('onSwipeCard', e)
  431. this.$modal.hide(`modal-${this.item.id}`)
  432. },
  433. prettyFileSize(bytes){
  434. return prettyBytes(parseInt(bytes))
  435. },
  436. shortUrl(url){
  437. return url.replace(/^http:\/\//, '').replace(/^www\./, '')
  438. },
  439. saveNote(){
  440. console.log("saveNote", this.note);
  441. if(this.note_nid){
  442. this.updateNote()
  443. }else{
  444. this.createNote()
  445. }
  446. },
  447. updateNote(){
  448. let params = {
  449. type: [{target_id:'note'}],
  450. field_contenu: this.note
  451. }
  452. let config = {
  453. headers:{
  454. "X-CSRF-Token": this.csrf_token
  455. }
  456. }
  457. REST.patch(`/node/${this.note_nid}?_format=json`, params, config)
  458. .then(({ data }) => {
  459. console.log('updateNote REST data', data)
  460. })
  461. .catch(error => {
  462. console.warn('Issue with updateNote', error)
  463. })
  464. },
  465. createNote(){
  466. let params = {
  467. type: [{target_id:'note'}],
  468. title: [{value:`note`}],
  469. field_contenu: this.note,
  470. field_target: this.item.id
  471. }
  472. let config = {
  473. headers:{
  474. "X-CSRF-Token": this.csrf_token
  475. }
  476. }
  477. REST.post('/node?_format=json', params, config)
  478. .then(({ data }) => {
  479. console.log('createNote REST data', data)
  480. this.note_nid = data.nid[0].value
  481. // call search results refresh of the item to display that note is now existing for this item
  482. // this.refreshItem({id: this.item.id})
  483. // no needs to refresh the entire item via searchresults
  484. // plus if we are in article, there is not searchresults
  485. // instead call the callbackfunction from teh parent to add directly the note id
  486. this.addNoteId(this.note_nid)
  487. })
  488. .catch(error => {
  489. console.warn('Issue with createNote', error)
  490. })
  491. },
  492. onTapTool (e) {
  493. console.log('ontapTool', e)
  494. let tools = e.target.parentNode.parentNode.querySelectorAll('section.tool')
  495. tools.forEach((item, i) => {
  496. item.classList.remove('tapped')
  497. })
  498. e.target.parentNode.classList.add('tapped')
  499. },
  500. onTapCard (e) {
  501. console.log('ontapCard', e)
  502. let tools = this.$refs['tools'].querySelectorAll('section.tool')
  503. // console.log();
  504. tools.forEach((item, i) => {
  505. console.log('item', item)
  506. item.classList.remove('tapped')
  507. })
  508. }
  509. }
  510. }
  511. </script>
  512. <style lang="scss" scoped>
  513. </style>