123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586 |
- <template>
- <div class="loading" v-if="!material || loading">
- <span>Loading ...</span>
- </div>
- <article
- v-else
- class="card modal-card"
- v-touch="onTapCard"
- v-touch:swipe="onSwipeCard"
- >
- <section class="col col-right">
- <header>
- <h1>{{ material.title }}</h1>
- <h4>{{ material.short_description }}</h4>
- <span class="ref">{{ material.reference }}</span>
- </header>
- <nav ref="tools" class="tools">
- <section class="tool close">
- <span
- class="btn mdi mdi-close"
- @click.prevent="onCloseModalCard"
- />
- </section>
- <section class="tool flags">
- <span
- class="btn mdi mdi-folder-outline"
- v-touch.prevent.stop="onTapTool"
- />
- <div class="tool-content">
- <span class="label">{{ $t("materio.My folders") }}</span>
- <ul>
- <li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
- <span
- class="flag mdi"
- :class="[
- flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close-circle isActive' : 'mdi-plus'
- ]"
- :collid="coll.id"
- @click.prevent="onFlagActionCard"
- >
- {{ coll.name }}
- </span>
- </li>
- <li v-if="collsLength<15" class="create-flag">
- <input
- placeholder="new folder"
- v-model="new_folder_name"
- @keyup.enter.prevent.stop="onCreateFlagColl"
- />
- <span
- class="add-btn mdi"
- :class="addFlagBtnClassObj"
- @click.prevent.stop="onCreateFlagColl"
- />
- </li>
- </ul>
- </div>
- </section>
- <section class="tool samples" v-if="item.samples && item.samples.length">
- <span
- class="btn mdi mdi-beaker-outline"
- v-touch.prevent.stop="onTapTool"
- />
- <div class="tool-content">
- <span class="label">{{ $t("materio.Samples") }}</span>
- <ul>
- <li
- v-for="sample in item.samples"
- :key="sample.showroom.id"
- >
- <span class="showroom">{{ sample.showroom.name }}</span>: {{ sample.location }}
- </li>
- </ul>
- </div>
- </section>
- <section class="tool note">
- <span
- v-if="note_id"
- class="btn mdi mdi-note"
- v-touch.prevent.stop="onTapTool"
- />
- <span
- v-else
- class="btn mdi mdi-note-outline"
- v-touch.prevent.stop="onTapTool"
- />
- <div class="tool-content">
- <textarea spellcheck="false" v-model="note" name="note" @input="onNoteInput"/>
- </div>
- </section>
- <section class="tool print">
- <a :href="material.path+'/printable/print'" target="_blank">
- <span class="btn mdi mdi-printer"/>
- </a>
- </section>
- <!-- <section class="tool industriels" v-if="material.manufacturer || material.distributor">
- <span class="btn mdi mdi-factory"/>
- <div class="tool-content">
- <section v-if="material.distributor">
- <span class="label">{{ $t("materio.Distributor") }}</span>
- <ul>
- <li v-for="distrib in material.distributor" v-bind:key="distrib.id">
- <h2>{{ distrib.name }}</h2>
- <p v-if="distrib.website">
- <a target="_blank" :href="distrib.website.url">distrib.website.url</a>
- </p>
- <p v-if="distrib.email"><a :href="'mailto:'+distrib.email">{{ distrib.email }}</a></p>
- </li>
- </ul>
- </section>
- <section v-if="material.manufacturer">
- <span class="label">{{ $t("materio.Manufacturer") }}</span>
- <ul>
- <li v-for="manu in material.manufacturer" v-bind:key="manu.id">
- <h2>{{ manu.name }}</h2>
- <p v-if="manu.website">
- <a target="_blank" :href="manu.website.url">manu.website.url</a>
- </p>
- <p v-if="manu.email"><a :href="'mailto:'+manu.email">{{ manu.email }}</a></p>
- </li>
- </ul>
- </section>
- </div>
- </section> -->
- </nav>
- <vsa-list>
- <vsa-item :initActive="true">
- <vsa-heading>
- <span class="label">Description</span>
- </vsa-heading>
- <vsa-content>
- <section class="body" v-html="material.body"/>
- <section class="attachments">
- <!-- <h4 class="label">{{ $t("materio.Attachments") }}</h4> -->
- <ul>
- <li
- v-for="attachmt in material.attachments" :key="attachmt.file.fid"
- >
- <a target="_blank" :href="attachmt.file.url">{{ attachmt.file.filename}} <span>({{ prettyFileSize(attachmt.file.filesize) }})</span></a>
- <p v-if="attachmt.description" class="description" v-html="attachmt.description" />
- </li>
- </ul>
- </section>
- <section class="industriels">
- <!-- <h4 class="label">{{ $t("default.Contact") }}</h4> -->
- <section v-if="material.manufacturer">
- <span class="label">{{ $t("materio.Manufacturer") }}</span>
- <ul>
- <li v-for="manu in material.manufacturer" v-bind:key="manu.id">
- <h2>{{ manu.name }}</h2>
- <p v-if="manu.website">
- <a target="_blank" :href="manu.website.url">{{shortUrl(manu.website.url)}}</a>
- </p>
- <p v-if="manu.email"><a :href="'mailto:'+manu.email">{{ manu.email }}</a></p>
- </li>
- </ul>
- </section>
- <section v-if="material.distributor">
- <span class="label">{{ $t("materio.Distributor") }}</span>
- <ul>
- <li v-for="distrib in material.distributor" v-bind:key="distrib.id">
- <h2>{{ distrib.name }}</h2>
- <p v-if="distrib.website">
- <a target="_blank" :href="distrib.website.url">{{shortUrl(distrib.website.url)}}</a>
- </p>
- <p v-if="distrib.email"><a :href="'mailto:'+distrib.email">{{ distrib.email }}</a></p>
- </li>
- </ul>
- </section>
- </section>
- </vsa-content>
- </vsa-item>
- <!-- <vsa-item v-if="item.samples && item.samples.length">
- <vsa-heading>
- <span class="label">{{ $t("materio.Samples") }}</span>
- </vsa-heading>
- <vsa-content>
- <section class="samples">
- <ul>
- <li
- v-for="sample in material.samples"
- :key="sample.showroom.id"
- >
- <span class="showroom">{{ sample.showroom.name }}</span>: {{ sample.location }}
- </li>
- </ul>
- </section>
- </vsa-content>
- </vsa-item> -->
- <vsa-item v-if="material.linked_materials.length">
- <vsa-heading>
- <span class="label">{{ $t("materio.Linked materials") }}</span>
- </vsa-heading>
- <vsa-content>
- <section class="linked-materials">
- <ul>
- <li v-for="m in material.linked_materials" v-bind:key="m.id">
- <LinkedMaterialCard :item="m"/>
- </li>
- </ul>
- </section>
- </vsa-content>
- </vsa-item>
- <!-- <vsa-item v-if="material.manufacturer || material.distributor">
- <vsa-heading>
- <span class="label">{{ $t("default.Contact") }}</span>
- </vsa-heading>
- <vsa-content>
- <section class="industriels">
- <section v-if="material.manufacturer">
- <span class="label">{{ $t("materio.Manufacturer") }}</span>
- <ul>
- <li v-for="manu in material.manufacturer" v-bind:key="manu.id">
- <h2>{{ manu.name }}</h2>
- <p v-if="manu.website">
- <a target="_blank" :href="manu.website.url">{{shortUrl(manu.website.url)}}</a>
- </p>
- <p v-if="manu.email"><a :href="'mailto:'+manu.email">{{ manu.email }}</a></p>
- </li>
- </ul>
- </section>
- <section v-if="material.distributor">
- <span class="label">{{ $t("materio.Distributor") }}</span>
- <ul>
- <li v-for="distrib in material.distributor" v-bind:key="distrib.id">
- <h2>{{ distrib.name }}</h2>
- <p v-if="distrib.website">
- <a target="_blank" :href="distrib.website.url">{{shortUrl(distrib.website.url)}}</a>
- </p>
- <p v-if="distrib.email"><a :href="'mailto:'+distrib.email">{{ distrib.email }}</a></p>
- </li>
- </ul>
- </section>
- </section>
- </vsa-content>
- </vsa-item> -->
- <!-- <vsa-item v-if="material.attachments && material.attachments.length">
- <vsa-heading>
- <span class="label">{{ $t("materio.Attachments") }}</span>
- </vsa-heading>
- <vsa-content>
- <section class="attachments">
- <ul>
- <li
- v-for="attachmt in material.attachments" :key="attachmt.file.fid"
- >
- <a target="_blank" :href="attachmt.file.url">{{ attachmt.file.filename}} <span>({{ prettyFileSize(attachmt.file.filesize) }})</span></a>
- <p v-if="attachmt.description" class="description" v-html="attachmt.description" />
- </li>
- </ul>
- </section>
- </vsa-content>
- </vsa-item> -->
- </vsa-list>
- </section>
- <section class="col col-left images" v-switcher>
- <figure
- v-for="(img, index) in material.images"
- :key="img.url"
- class="lazy"
- v-lazy="index"
- >
- <img
- :data-src="img.style_cardfull.url"
- :title="img.title"
- />
- <img
- class="blank"
- :src="blanksrc"
- @click="lightbox_index = index"
- >
- </figure>
- </section>
- <CoolLightBox
- :items="material.images"
- :index="lightbox_index"
- srcName="url"
- :loop="true"
- @close="lightbox_index = null">
- </CoolLightBox>
- </article>
- </template>
- <script>
- import { mapState, mapActions } from 'vuex'
- import {
- VsaList,
- VsaItem,
- VsaHeading,
- VsaContent,
- VsaIcon
- } from 'vue-simple-accordion'
- import 'vue-simple-accordion/dist/vue-simple-accordion.css'
- import LinkedMaterialCard from 'vuejs/components/Content/LinkedMaterialCard'
- import cardMixins from 'vuejs/components/cardMixins'
- import { REST } from 'vuejs/api/rest-axios'
- import { MGQ } from 'vuejs/api/graphql-axios'
- import { print } from 'graphql/language/printer'
- import gql from 'graphql-tag'
- import materiauFields from 'vuejs/api/gql/materiaumodal.fragment.gql'
- const prettyBytes = require('pretty-bytes')
- const _debounce = require('lodash/debounce')
- export default {
- name: "ModalCard",
- props: ['item', 'addNoteId'],
- mixins: [cardMixins],
- components: {
- LinkedMaterialCard,
- VsaList,
- VsaItem,
- VsaHeading,
- VsaContent,
- VsaIcon
- // VsaList: () => import(
- // /* webpackPrefetch: true */
- // /* webpackChunkName: "vsa" */
- // /* webpackExports: ["VsaList"] */
- // '/app/node_modules/vue-simple-accordion/'),
- // VsaItem: () => import(
- // /* webpackPrefetch: true */
- // /* webpackChunkName: "vsa" */
- // /* webpackExports: ["VsaItem"] */
- // '/app/node_modules/vue-simple-accordion/'),
- // VsaHeading: () => import(
- // /* webpackPrefetch: true */
- // /* webpackChunkName: "vsa" */
- // /* webpackExports: ["VsaHeading"] */
- // '/app/node_modules/vue-simple-accordion/'),
- // VsaContent: () => import(
- // /* webpackPrefetch: true */
- // /* webpackChunkName: "vsa" */
- // /* webpackExports: ["VsaContent"] */
- // '/app/node_modules/vue-simple-accordion/'),
- // VsaIcon: () => import(
- // /* webpackPrefetch: true */
- // /* webpackChunkName: "vsa" */
- // /* webpackExports: ["VsaIcon"] */
- // '/app/node_modules/vue-simple-accordion/')
- },
- data() {
- return {
- material: null,
- loading: false,
- blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
- new_folder_name: "",
- is_creating_folder: false,
- loadingFlag: false,
- lightbox_index: null,
- note: "",
- note_id: null
- }
- },
- computed: {
- ...mapState({
- csrf_token: state => state.User.csrf_token,
- flagcolls: state => state.User.flagcolls,
- showrooms: state => state.Showrooms.showrooms_by_tid
- }),
- collsLength() {
- return Object.keys(this.flagcolls).length
- },
- addFlagBtnClassObj() {
- return {
- 'mdi-plus-circle-outline': !this.is_creating_folder,
- 'mdi-loading': this.is_creating_folder,
- active: this.new_folder_name.length > 4 && !this.is_creating_folder,
- loading: this.is_creating_folder
- }
- }
- },
- created () {
- console.log('modale item', this.item)
- this.loadMaterial()
- this.note_id = this.item.note_id
- this.debouncedSaveNote = _debounce(this.saveNote, 500)
- },
- // watch: {
- // // whenever question changes, this function will run
- // // TODO: on mobile, this is called only on white caractere key
- // note: function (n, o) {
- // console.log("note watcher: note", n)
- // this.debouncedSaveNote()
- // }
- // },
- methods: {
- ...mapActions({
- // refreshItem: 'Search/refreshItem',
- createFlagColl: 'User/createFlagColl',
- flagUnflag: 'User/flagUnflag'
- }),
- loadMaterial(){
- console.log('loadMaterial', this.item.id)
- this.loading = true
- const ast = gql`{
- materiau(id: ${this.item.id}, lang: "${drupalDecoupled.lang_code}") {
- ...MateriauFields
- }
- }
- ${materiauFields}
- `
- MGQ.post('', { query: print(ast)
- })
- .then(({ data:{data:{materiau}}}) => {
- console.log('loadMaterial material loaded', materiau)
- this.material = materiau
- this.loading = false
- if (materiau.note && materiau.note.id) {
- this.note_id = materiau.note.id
- this.note = materiau.note.contenu
- }
- // delay the lazyload to let the card the time to update dom
- // maybe not the best method
- setTimeout(function () {
- this.activateLazyLoad()
- }.bind(this), 5)
- })
- .catch(error => {
- console.warn('Issue with loadMaterial', error)
- Promise.reject(error)
- })
- },
- onCreateFlagColl () {
- console.log("Card onCreateFlagColl", this.new_folder_name)
- this.is_creating_folder = true;
- this.createFlagColl(this.new_folder_name)
- .then(data => {
- console.log("Card onCreateFlagColl then", data)
- this.new_folder_name = "";
- this.is_creating_folder = false;
- let collid = data.id
- this.loadingFlag = collid;
- this.flagUnflag({ action: 'flag', id: this.item.id, collid: collid})
- .then(data => {
- console.log("onFlagActionCard then", data)
- this.loadingFlag = false;
- })
- })
- },
- flagIsActive(collid) {
- // console.log(this.item.uuid)
- // console.log(this.flagcolls[collid].items_uuids)
- // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
- return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;
- },
- flagIsLoading(collid) {
- // console.log(this.item.uuid)
- // console.log(this.flagcolls[collid].items_uuids)
- return collid === this.loadingFlag;
- },
- onFlagActionCard (e) {
- console.log("Card onFlagActionCard", e)
- if (!this.loadingFlag) {
- let collid = e.target.getAttribute('collid');
- let isActive = this.flagIsActive(collid);
- let action = isActive ? 'unflag' : 'flag';
- // console.log('collid', collid)
- // console.log("this.item", this.item)
- this.loadingFlag = collid;
- this.flagUnflag({ action: action, id: this.item.id, collid: collid})
- .then(data => {
- console.log("onFlagActionCard then", data)
- this.loadingFlag = false;
- })
- }
- },
- onCloseModalCard (e) {
- // this.$modal.hideAll()
- this.$modal.hide(`modal-${this.item.id}`)
- },
- onSwipeCard (e) {
- console.log('onSwipeCard', e)
- switch(e){
- case 'top':
- break
- case 'bottom':
- break
- case 'left':
- case 'right':
- this.$modal.hide(`modal-${this.item.id}`)
- break
- }
- },
- prettyFileSize(bytes){
- return prettyBytes(parseInt(bytes))
- },
- shortUrl(url){
- return url.replace(/^http:\/\//, '').replace(/^www\./, '')
- },
- onNoteInput(e){
- console.log('onNoteInput', e, this.note)
- this.note = e.target.value
- this.debouncedSaveNote()
- },
- saveNote(){
- console.log("saveNote", this.note_id, this.note)
- if (this.note_id) {
- this.updateNote()
- } else {
- this.createNote()
- }
- },
- updateNote(){
- let params = {
- type: [{target_id:'note'}],
- field_contenu: this.note
- }
- let config = {
- headers:{
- "X-CSRF-Token": this.csrf_token
- }
- }
- REST.patch(`/node/${this.note_id}?_format=json`, params, config)
- .then(({ data }) => {
- console.log('updateNote REST data', data)
- })
- .catch(error => {
- console.warn('Issue with updateNote', error)
- })
- },
- createNote(){
- let params = {
- type: [{target_id:'note'}],
- title: [{value:`note`}],
- field_contenu: this.note,
- field_target: this.item.id
- }
- let config = {
- headers:{
- "X-CSRF-Token": this.csrf_token
- }
- }
- REST.post('/node?_format=json', params, config)
- .then(({ data }) => {
- console.log('createNote REST data', data)
- this.note_id = data.nid[0].value
- // call search results refresh of the item to display that note is now existing for this item
- // this.refreshItem({id: this.item.id})
- // no needs to refresh the entire item via searchresults
- // plus if we are in article, there is not searchresults
- // instead call the callbackfunction from the parent to add directly the note id
- this.addNoteId(this.note_id)
- })
- .catch(error => {
- console.warn('Issue with createNote', error)
- })
- },
- onTapTool (e) {
- console.log('ontapTool', e)
- let tools = e.target.parentNode.parentNode.querySelectorAll('section.tool')
- tools.forEach((item, i) => {
- item.classList.remove('tapped')
- })
- e.target.parentNode.classList.add('tapped')
- },
- onTapCard (e) {
- console.log('ontapCard', e.target.tagName)
- // in case we tap on note's textarea
- if(e.target.tagName == "TEXTAREA"){
- return;
- }
- let tools = this.$refs['tools'].querySelectorAll('section.tool')
- // console.log()
- tools.forEach((item, i) => {
- console.log('item', item)
- item.classList.remove('tapped')
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
|