ModalCard.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586
  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_id"
  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" @input="onNoteInput"/>
  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. class="lazy"
  261. v-lazy="index"
  262. >
  263. <img
  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 {
  286. VsaList,
  287. VsaItem,
  288. VsaHeading,
  289. VsaContent,
  290. VsaIcon
  291. } from 'vue-simple-accordion'
  292. import 'vue-simple-accordion/dist/vue-simple-accordion.css'
  293. import LinkedMaterialCard from 'vuejs/components/Content/LinkedMaterialCard'
  294. import cardMixins from 'vuejs/components/cardMixins'
  295. import { REST } from 'vuejs/api/rest-axios'
  296. import { MGQ } from 'vuejs/api/graphql-axios'
  297. import { print } from 'graphql/language/printer'
  298. import gql from 'graphql-tag'
  299. import materiauFields from 'vuejs/api/gql/materiaumodal.fragment.gql'
  300. const prettyBytes = require('pretty-bytes')
  301. const _debounce = require('lodash/debounce')
  302. export default {
  303. name: "ModalCard",
  304. props: ['item', 'addNoteId'],
  305. mixins: [cardMixins],
  306. components: {
  307. LinkedMaterialCard,
  308. VsaList,
  309. VsaItem,
  310. VsaHeading,
  311. VsaContent,
  312. VsaIcon
  313. // VsaList: () => import(
  314. // /* webpackPrefetch: true */
  315. // /* webpackChunkName: "vsa" */
  316. // /* webpackExports: ["VsaList"] */
  317. // '/app/node_modules/vue-simple-accordion/'),
  318. // VsaItem: () => import(
  319. // /* webpackPrefetch: true */
  320. // /* webpackChunkName: "vsa" */
  321. // /* webpackExports: ["VsaItem"] */
  322. // '/app/node_modules/vue-simple-accordion/'),
  323. // VsaHeading: () => import(
  324. // /* webpackPrefetch: true */
  325. // /* webpackChunkName: "vsa" */
  326. // /* webpackExports: ["VsaHeading"] */
  327. // '/app/node_modules/vue-simple-accordion/'),
  328. // VsaContent: () => import(
  329. // /* webpackPrefetch: true */
  330. // /* webpackChunkName: "vsa" */
  331. // /* webpackExports: ["VsaContent"] */
  332. // '/app/node_modules/vue-simple-accordion/'),
  333. // VsaIcon: () => import(
  334. // /* webpackPrefetch: true */
  335. // /* webpackChunkName: "vsa" */
  336. // /* webpackExports: ["VsaIcon"] */
  337. // '/app/node_modules/vue-simple-accordion/')
  338. },
  339. data() {
  340. return {
  341. material: null,
  342. loading: false,
  343. blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
  344. new_folder_name: "",
  345. is_creating_folder: false,
  346. loadingFlag: false,
  347. lightbox_index: null,
  348. note: "",
  349. note_id: null
  350. }
  351. },
  352. computed: {
  353. ...mapState({
  354. csrf_token: state => state.User.csrf_token,
  355. flagcolls: state => state.User.flagcolls,
  356. showrooms: state => state.Showrooms.showrooms_by_tid
  357. }),
  358. collsLength() {
  359. return Object.keys(this.flagcolls).length
  360. },
  361. addFlagBtnClassObj() {
  362. return {
  363. 'mdi-plus-circle-outline': !this.is_creating_folder,
  364. 'mdi-loading': this.is_creating_folder,
  365. active: this.new_folder_name.length > 4 && !this.is_creating_folder,
  366. loading: this.is_creating_folder
  367. }
  368. }
  369. },
  370. created () {
  371. console.log('modale item', this.item)
  372. this.loadMaterial()
  373. this.note_id = this.item.note_id
  374. this.debouncedSaveNote = _debounce(this.saveNote, 500)
  375. },
  376. // watch: {
  377. // // whenever question changes, this function will run
  378. // // TODO: on mobile, this is called only on white caractere key
  379. // note: function (n, o) {
  380. // console.log("note watcher: note", n)
  381. // this.debouncedSaveNote()
  382. // }
  383. // },
  384. methods: {
  385. ...mapActions({
  386. // refreshItem: 'Search/refreshItem',
  387. createFlagColl: 'User/createFlagColl',
  388. flagUnflag: 'User/flagUnflag'
  389. }),
  390. loadMaterial(){
  391. console.log('loadMaterial', this.item.id)
  392. this.loading = true
  393. const ast = gql`{
  394. materiau(id: ${this.item.id}, lang: "${drupalDecoupled.lang_code}") {
  395. ...MateriauFields
  396. }
  397. }
  398. ${materiauFields}
  399. `
  400. MGQ.post('', { query: print(ast)
  401. })
  402. .then(({ data:{data:{materiau}}}) => {
  403. console.log('loadMaterial material loaded', materiau)
  404. this.material = materiau
  405. this.loading = false
  406. if (materiau.note && materiau.note.id) {
  407. this.note_id = materiau.note.id
  408. this.note = materiau.note.contenu
  409. }
  410. // delay the lazyload to let the card the time to update dom
  411. // maybe not the best method
  412. setTimeout(function () {
  413. this.activateLazyLoad()
  414. }.bind(this), 5)
  415. })
  416. .catch(error => {
  417. console.warn('Issue with loadMaterial', error)
  418. Promise.reject(error)
  419. })
  420. },
  421. onCreateFlagColl () {
  422. console.log("Card onCreateFlagColl", this.new_folder_name)
  423. this.is_creating_folder = true;
  424. this.createFlagColl(this.new_folder_name)
  425. .then(data => {
  426. console.log("Card onCreateFlagColl then", data)
  427. this.new_folder_name = "";
  428. this.is_creating_folder = false;
  429. let collid = data.id
  430. this.loadingFlag = collid;
  431. this.flagUnflag({ action: 'flag', id: this.item.id, collid: collid})
  432. .then(data => {
  433. console.log("onFlagActionCard then", data)
  434. this.loadingFlag = false;
  435. })
  436. })
  437. },
  438. flagIsActive(collid) {
  439. // console.log(this.item.uuid)
  440. // console.log(this.flagcolls[collid].items_uuids)
  441. // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
  442. return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;
  443. },
  444. flagIsLoading(collid) {
  445. // console.log(this.item.uuid)
  446. // console.log(this.flagcolls[collid].items_uuids)
  447. return collid === this.loadingFlag;
  448. },
  449. onFlagActionCard (e) {
  450. console.log("Card onFlagActionCard", e)
  451. if (!this.loadingFlag) {
  452. let collid = e.target.getAttribute('collid');
  453. let isActive = this.flagIsActive(collid);
  454. let action = isActive ? 'unflag' : 'flag';
  455. // console.log('collid', collid)
  456. // console.log("this.item", this.item)
  457. this.loadingFlag = collid;
  458. this.flagUnflag({ action: action, id: this.item.id, collid: collid})
  459. .then(data => {
  460. console.log("onFlagActionCard then", data)
  461. this.loadingFlag = false;
  462. })
  463. }
  464. },
  465. onCloseModalCard (e) {
  466. // this.$modal.hideAll()
  467. this.$modal.hide(`modal-${this.item.id}`)
  468. },
  469. onSwipeCard (e) {
  470. console.log('onSwipeCard', e)
  471. switch(e){
  472. case 'top':
  473. break
  474. case 'bottom':
  475. break
  476. case 'left':
  477. case 'right':
  478. this.$modal.hide(`modal-${this.item.id}`)
  479. break
  480. }
  481. },
  482. prettyFileSize(bytes){
  483. return prettyBytes(parseInt(bytes))
  484. },
  485. shortUrl(url){
  486. return url.replace(/^http:\/\//, '').replace(/^www\./, '')
  487. },
  488. onNoteInput(e){
  489. console.log('onNoteInput', e, this.note)
  490. this.note = e.target.value
  491. this.debouncedSaveNote()
  492. },
  493. saveNote(){
  494. console.log("saveNote", this.note_id, this.note)
  495. if (this.note_id) {
  496. this.updateNote()
  497. } else {
  498. this.createNote()
  499. }
  500. },
  501. updateNote(){
  502. let params = {
  503. type: [{target_id:'note'}],
  504. field_contenu: this.note
  505. }
  506. let config = {
  507. headers:{
  508. "X-CSRF-Token": this.csrf_token
  509. }
  510. }
  511. REST.patch(`/node/${this.note_id}?_format=json`, params, config)
  512. .then(({ data }) => {
  513. console.log('updateNote REST data', data)
  514. })
  515. .catch(error => {
  516. console.warn('Issue with updateNote', error)
  517. })
  518. },
  519. createNote(){
  520. let params = {
  521. type: [{target_id:'note'}],
  522. title: [{value:`note`}],
  523. field_contenu: this.note,
  524. field_target: this.item.id
  525. }
  526. let config = {
  527. headers:{
  528. "X-CSRF-Token": this.csrf_token
  529. }
  530. }
  531. REST.post('/node?_format=json', params, config)
  532. .then(({ data }) => {
  533. console.log('createNote REST data', data)
  534. this.note_id = data.nid[0].value
  535. // call search results refresh of the item to display that note is now existing for this item
  536. // this.refreshItem({id: this.item.id})
  537. // no needs to refresh the entire item via searchresults
  538. // plus if we are in article, there is not searchresults
  539. // instead call the callbackfunction from the parent to add directly the note id
  540. this.addNoteId(this.note_id)
  541. })
  542. .catch(error => {
  543. console.warn('Issue with createNote', error)
  544. })
  545. },
  546. onTapTool (e) {
  547. console.log('ontapTool', e)
  548. let tools = e.target.parentNode.parentNode.querySelectorAll('section.tool')
  549. tools.forEach((item, i) => {
  550. item.classList.remove('tapped')
  551. })
  552. e.target.parentNode.classList.add('tapped')
  553. },
  554. onTapCard (e) {
  555. console.log('ontapCard', e.target.tagName)
  556. // in case we tap on note's textarea
  557. if(e.target.tagName == "TEXTAREA"){
  558. return;
  559. }
  560. let tools = this.$refs['tools'].querySelectorAll('section.tool')
  561. // console.log()
  562. tools.forEach((item, i) => {
  563. console.log('item', item)
  564. item.classList.remove('tapped')
  565. })
  566. }
  567. }
  568. }
  569. </script>
  570. <style lang="scss" scoped>
  571. </style>