fixed article graphql refactoring, continued to improve graphql for materials
This commit is contained in:
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="loading" v-if="!content || loading">
|
||||
<div class="loading" v-if="!article || loading">
|
||||
<span>Loading ...</span>
|
||||
</div>
|
||||
<article class="article" v-else>
|
||||
@ -25,12 +25,13 @@
|
||||
</nav>
|
||||
<div class="cols">
|
||||
<div class="col col-left">
|
||||
<section v-if="content.image_accroche" class="accroche">
|
||||
<section v-if="image_accroche" class="accroche">
|
||||
<figure>
|
||||
<img
|
||||
:src="content.image_accroche.src"
|
||||
:alt="content.image_accroche.alt"
|
||||
:title="content.image_accroche.title"
|
||||
:src="image_accroche.url"
|
||||
:alt="image_accroche.alt"
|
||||
:title="image_accroche.title"
|
||||
@click="setLightboxIndex(0)"
|
||||
/>
|
||||
</figure>
|
||||
</section>
|
||||
@ -38,39 +39,41 @@
|
||||
<div class="thesaurus">
|
||||
<ul>
|
||||
<li
|
||||
v-for="term in content.field_thesaurus" v-bind:key="term.id"
|
||||
v-for="term in article.thesaurus" v-bind:key="term.id"
|
||||
>{{ term.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<ul>
|
||||
<li
|
||||
v-for="term in content.field_tags" v-bind:key="term.id"
|
||||
v-for="term in article.tags" v-bind:key="term.id"
|
||||
>{{ term.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="content.field_showroom" class="showroom">
|
||||
<h2>{{ content.field_showroom.name }}</h2>
|
||||
<a class="mail" :href="'mail:'+content.field_showroom.field_public_email">
|
||||
{{ content.field_showroom.field_public_email }}</a>
|
||||
<section v-if="article.showroom" class="showroom">
|
||||
<h2>{{ article.showroom.name }}</h2>
|
||||
<a class="mail" :href="'mail:'+article.showroom.field_public_email">
|
||||
{{ article.showroom.field_public_email }}</a>
|
||||
<br/>
|
||||
<a class="phone" :href="'tel:' + content.field_showroom.field_public_phone">
|
||||
{{ content.field_showroom.field_public_phone }}</a>
|
||||
<a class="phone" :href="'tel:' + article.showroom.field_public_phone">
|
||||
{{ article.showroom.field_public_phone }}</a>
|
||||
</section>
|
||||
</div> <!-- //col-left -->
|
||||
<div class="col col-right">
|
||||
<section class="body" v-html="content.body"></section>
|
||||
<section class="body" v-html="article.body"></section>
|
||||
<CoolLightBox
|
||||
:items="content.lightbox_items"
|
||||
:items="lightbox_items"
|
||||
:index="lightbox_index"
|
||||
:loop="true"
|
||||
srcName="url"
|
||||
@close="lightbox_index = null">
|
||||
</CoolLightBox>
|
||||
<div class="gallery-wrapper">
|
||||
<div
|
||||
class="image"
|
||||
v-for="(image, imageIndex) in content.lightbox_items"
|
||||
v-for="(image, imageIndex) in lightbox_items"
|
||||
v-if="imageIndex > 0"
|
||||
:key="imageIndex"
|
||||
@click="setLightboxIndex(imageIndex)"
|
||||
:style="{ backgroundImage: 'url(' + image.thumb + ')' }"
|
||||
@ -80,7 +83,7 @@
|
||||
<h3 class="field__label">{{$t("materio.Linked Materials")}}</h3>
|
||||
<div class="card-list">
|
||||
<ul class="">
|
||||
<li v-for="node in content.field_linked_materials" v-bind:key="node.id">
|
||||
<li v-for="node in article.linked_materials" v-bind:key="node.id">
|
||||
<Card :item="node" />
|
||||
</li>
|
||||
</ul>
|
||||
@ -120,8 +123,8 @@ 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/materiau.fragment.gql'
|
||||
// import articleFields from 'vuejs/api/gql/article.fragment.gql'
|
||||
// import materiauFields from 'vuejs/api/gql/materiau.fragment.gql'
|
||||
import articleFields from 'vuejs/api/gql/article.fragment.gql'
|
||||
|
||||
import qs from 'querystring-es3'
|
||||
import Card from 'vuejs/components/Content/Card'
|
||||
@ -138,7 +141,9 @@ export default {
|
||||
index:-1,
|
||||
prevnext:{},
|
||||
uuid:null,
|
||||
content:null,
|
||||
article:null,
|
||||
image_accroche: null,
|
||||
lightbox_items: null,
|
||||
loading:true,
|
||||
lightbox_index:null,
|
||||
}
|
||||
@ -160,17 +165,17 @@ export default {
|
||||
getArticle(){
|
||||
console.log(this.$route);
|
||||
// get the article uuid
|
||||
if(this.$route.query.uuid){
|
||||
if(this.$route.query.nid){
|
||||
// we come from internal link with vuejs
|
||||
// directly record uuid
|
||||
this.uuid = this.$route.query.uuid
|
||||
this.nid = this.$route.query.nid
|
||||
}else if(drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article'){
|
||||
// we landed in an internal page
|
||||
// get the uuid from drupalDeclouped, provided by materio_decoupled.module
|
||||
this.uuid = drupalDecoupled.entity_uuid
|
||||
this.nid = drupalDecoupled.entity_id
|
||||
}
|
||||
|
||||
if(this.uuid){
|
||||
if(this.nid){
|
||||
this.loadArticle()
|
||||
// get the prev next items
|
||||
if(!this.items.length){
|
||||
@ -191,7 +196,7 @@ export default {
|
||||
},
|
||||
getIndex(){
|
||||
console.log("Article getIndex");
|
||||
this.getItemIndex(this.uuid).then((index) => {
|
||||
this.getItemIndex(this.nid).then((index) => {
|
||||
this.index = index
|
||||
// console.log('article index', index, this);
|
||||
this.getPrevNextItems(index).then((pn) => {
|
||||
@ -200,42 +205,91 @@ export default {
|
||||
})
|
||||
},
|
||||
loadArticle(){
|
||||
console.log('loadArticle', this.uuid)
|
||||
console.log('loadArticle', this.nid)
|
||||
this.loading = true;
|
||||
let params = {
|
||||
include:'field_linked_materials.images,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
|
||||
}
|
||||
let q = qs.stringify(params)
|
||||
JSONAPI.get(`node/article/${this.uuid}?${q}`)
|
||||
.then(({ data }) => {
|
||||
console.log('loadArticle data', data)
|
||||
this.parseDataJSONAPI(data)
|
||||
})
|
||||
.catch(( error ) => {
|
||||
console.warn('Issue with loadArticle', error)
|
||||
Promise.reject(error)
|
||||
})
|
||||
// let ast = gql`{
|
||||
// article(id: ${this.uuid}) {
|
||||
// ...ArticleFields
|
||||
// }
|
||||
// let params = {
|
||||
// include:'field_linked_materials.images,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
|
||||
// }
|
||||
// ${ articleFields }
|
||||
// `
|
||||
// MGQ.post('', { query: print(ast)
|
||||
// })
|
||||
// .then((data) => {
|
||||
// console.log('loadArticle', data )
|
||||
// this.parseDataGQL(data.data.article)
|
||||
// let q = qs.stringify(params)
|
||||
// JSONAPI.get(`node/article/${this.uuid}?${q}`)
|
||||
// .then(({ data }) => {
|
||||
// console.log('loadArticle data', data)
|
||||
// this.parseDataJSONAPI(data)
|
||||
// })
|
||||
// .catch(error => {
|
||||
// console.warn('Issue with loadArticle', error)
|
||||
// Promise.reject(error)
|
||||
// .catch(( error ) => {
|
||||
// console.warn('Issue with loadArticle', error)
|
||||
// Promise.reject(error)
|
||||
// })
|
||||
let ast = gql`{
|
||||
article(id: ${this.nid}) {
|
||||
...ArticleFields
|
||||
}
|
||||
}
|
||||
${ articleFields }
|
||||
`
|
||||
MGQ.post('', { query: print(ast)
|
||||
})
|
||||
.then(({ data:{data:{article}}}) => {
|
||||
console.log('loadArticle', article )
|
||||
this.parseDataGQL(article)
|
||||
})
|
||||
.catch(error => {
|
||||
console.warn('Issue with loadArticle', error)
|
||||
Promise.reject(error)
|
||||
})
|
||||
},
|
||||
parseDataGQL(article){
|
||||
console.log('parseDataGQL article', article)
|
||||
this.article = article
|
||||
|
||||
this.image_accroche = article.images[0]
|
||||
|
||||
this.lightbox_items = [];
|
||||
|
||||
// fill the lightbox
|
||||
for (var i = 0; i < article.images.length; i++) {
|
||||
article.images[i].thumb = article.images[i].style_articlecardmedium.url
|
||||
this.lightbox_items.push(article.images[i]);
|
||||
}
|
||||
|
||||
// parse embeded videos pushing it in lightbox
|
||||
for (var i = 0; i < article.videos.length; i++) {
|
||||
let videoUrl = article.videos[i].url
|
||||
let provider_regex = /https:\/\/(www\.)?(?<provider>youtube|vimeo)\.com\/.+/;
|
||||
let match = provider_regex.exec(videoUrl)
|
||||
// console.log('provider', match.groups.provider);
|
||||
let video_id = null;
|
||||
let video_thumb = null;
|
||||
switch (match.groups.provider) {
|
||||
case 'vimeo':
|
||||
let vimeo_regex = /https:\/\/vimeo\.com\/(?<id>\d+)/;
|
||||
video_id = vimeo_regex.exec(videoUrl).groups.id || null;
|
||||
// TODO: get the vimeo thumb https://coderwall.com/p/fdrdmg/get-a-thumbnail-from-a-vimeo-video
|
||||
video_thumb = "http://blogpeda.ac-poitiers.fr/ent-lyc/files/2015/06/Vimeo_icon_block.png"
|
||||
break;
|
||||
case 'youtube':
|
||||
let youtube_regex = /https:\/\/(www\.)?youtube\.com\/watch\?v=(?<id>.+)/;
|
||||
video_id = youtube_regex.exec(videoUrl).groups.id || null;
|
||||
video_thumb = "http://img.youtube.com/vi/"+video_id+"/0.jpg"
|
||||
break;
|
||||
}
|
||||
// console.log('video_id', video_id);
|
||||
|
||||
this.lightbox_items.push({
|
||||
url: videoUrl,
|
||||
title: "",
|
||||
description: "",
|
||||
thumb: video_thumb
|
||||
});
|
||||
}
|
||||
|
||||
console.log('this.content.lightbox_items', this.lightbox_items);
|
||||
|
||||
// update main page title
|
||||
this.$store.commit('Common/setPagetitle', article.title)
|
||||
|
||||
this.loading = false;
|
||||
},
|
||||
// parseDataGQL(data){
|
||||
// console.log('parseDataGQL data', data)
|
||||
// },
|
||||
parseDataJSONAPI(data){
|
||||
let attrs = data.data.attributes
|
||||
let relations = data.data.relationships
|
||||
@ -376,48 +430,8 @@ export default {
|
||||
this.loading = false;
|
||||
console.log('article.content',this.content);
|
||||
|
||||
this.getFieldDefinition()
|
||||
},
|
||||
getFieldDefinition(field){
|
||||
// // JSONAPI.get(`field_config/${field}`)
|
||||
// // .then(({ data }) => {
|
||||
// // console.log('getFieldDefinition data', data)
|
||||
// // })
|
||||
// // .catch(( error ) => {
|
||||
// // console.warn('Issue with getFieldDefinition', error)
|
||||
// // Promise.reject(error)
|
||||
// // })
|
||||
// REST.get('/entity/node_type/materiau?_format=json')
|
||||
// .then((data) => {
|
||||
// console.log('getFieldDefiintion', data)
|
||||
// })
|
||||
// .catch(error => {
|
||||
// console.warn('Issue with getFieldDefiintion', error)
|
||||
// Promise.reject(error)
|
||||
// })
|
||||
//
|
||||
|
||||
// https://stackoverflow.com/a/52612632
|
||||
// https://stackoverflow.com/a/57873339
|
||||
let ast = gql`{
|
||||
materiau(id: 5150) {
|
||||
...MateriauFields
|
||||
}
|
||||
}
|
||||
${ materiauFields }
|
||||
`
|
||||
MGQ.post('', { query: print(ast)
|
||||
})
|
||||
.then((data) => {
|
||||
console.log('getFieldDefinition', data )
|
||||
})
|
||||
.catch(error => {
|
||||
console.warn('Issue with getFieldDefiintion', error)
|
||||
Promise.reject(error)
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
onNext(){
|
||||
// console.log('clicked on next', this.prevnext.next);
|
||||
let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
</div>
|
||||
<div class="cards-list" v-else>
|
||||
<ul>
|
||||
<li v-for="item in items" v-bind:key="item.uuid">
|
||||
<li v-for="item in items" v-bind:key="item.nid">
|
||||
<ArticleCard :item="item"/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user