bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added pathauto, refactored article to load gql directly from path, the vuejs route and drupal route can finally match, HALLELUYA git status

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2020-12-24 17:11:51 +01:00
parent ee97e675e3
commit 78155f83b8
12 changed files with 220 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue
View File

@@ -37,8 +37,8 @@ export default {
console.log('clicked on article', this.alias);
this.$router.push({
name:`article`,
params: { alias:this.alias },
query: { nid: this.item.nid }
params: { alias:this.alias }
// query: { nid: this.item.nid }
// meta: { uuid:this.item.uuid },
})
}

198
web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue
View File

@@ -140,7 +140,8 @@ export default {
return {
index:-1,
prevnext:{},
uuid:null,
nid:null,
path: null,
article:null,
image_accroche: null,
lightbox_items: null,
@@ -165,17 +166,26 @@ export default {
getArticle(){
console.log(this.$route);
// get the article uuid
if(this.$route.query.nid){
// if(this.$route.query.nid){
// // we come from internal link with vuejs
// // directly record 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.nid = drupalDecoupled.entity_id
// }
if (this.$route.path) {
// we come from internal link with vuejs
// directly record uuid
this.nid = this.$route.query.nid
}else if(drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article'){
this.path = this.$route.path
} else {
// we landed in an internal page
// get the uuid from drupalDeclouped, provided by materio_decoupled.module
this.nid = drupalDecoupled.entity_id
this.path = window.location.pathname
}
if(this.nid){
if(this.path){
this.loadArticle()
// get the prev next items
if(!this.items.length){
@@ -205,33 +215,29 @@ export default {
})
},
loadArticle(){
console.log('loadArticle', this.nid)
console.log('loadArticle')
this.loading = true
// let params = {
// include:'field_linked_materials.images,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
// let ast = gql`{
// article(id: ${this.nid}) {
// ...ArticleFields
// }
// }
// 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)
// })
// ${ articleFields }
// `
let ast = gql`{
article(id: ${this.nid}) {
route(path: "${this.path}") {
...ArticleFields
}
}
${ articleFields }
`
MGQ.post('', { query: print(ast)
})
.then(({ data:{data:{article}}}) => {
console.log('loadArticle', article )
this.parseDataGQL(article)
.then(({ data:{data:{route}}}) => {
console.log('loadArticle', route )
this.parseDataGQL(route)
})
.catch(error => {
console.warn('Issue with loadArticle', error)
@@ -290,148 +296,6 @@ export default {
this.loading = false;
},
parseDataJSONAPI(data){
let attrs = data.data.attributes
let relations = data.data.relationships
console.log('relations', relations);
let inc = data.included
console.log('included', inc);
this.content = {
title:attrs.title,
body: attrs.body.value
}
// build lightbox array
// will be filled by videos and field_visuel
this.content.lightbox_items = [];
// parse embeded videos pushing it in lightbox
for(let key in attrs.field_video){
let videolink = attrs.field_video[key]
// console.log('videolink', videolink);
let provider_regex = /https:\/\/(www\.)?(?<provider>youtube|vimeo)\.com\/.+/;
let match = provider_regex.exec(videolink)
// 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(videolink).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(videolink).groups.id || null;
video_thumb = "http://img.youtube.com/vi/"+video_id+"/0.jpg"
break;
}
// console.log('video_id', video_id);
this.content.lightbox_items.push({
src: videolink,
title: "",
description: "",
thumb: video_thumb
});
// this.content.videos.push({
// provider: match.groups.provider,
// id: video_id,
// href: videolink
// });
}
// parse all relationships
for (let key in relations) {
// skip loop if the property is from prototype
if (!relations.hasOwnProperty(key)) continue;
let relation_obj = relations[key]
console.log("relation", key, relation_obj);
// console.log('typeof relation_obj.data', typeof relation_obj.data);
if(!relation_obj.data) continue;
// showroom is unique field so no array in data
// we parse it here
switch (key) {
case 'field_showroom':
let included = inc.find((i) => { return i.id == relation_obj.data.id })
// console.log('included',included);
this.content[key] = included.attributes;
break
}
// skip relation_obj if data is not array
if(!Array.isArray(relation_obj.data)) continue
// create empty field array
this.content[key] = []
// parse relationship values using included
let field = {}
// loop through all relation items
relation_obj.data.forEach((e) => {
// get the included values for each item using id
let included = inc.find((i) => { return i.id == e.id })
// if we not found an included item skip the item
if(typeof included != 'undefined'){
// fill the item values
switch (key) {
case 'field_visuel':
// build the field object (not used for now)
field = e.meta
field.id = e.id
field.src = included.attributes.uri.url
field.thumb = included.links.article_card_medium.href
break;
case 'field_linked_materials':
field = included.attributes
field.id = field.uuid = included.id
// get the linked material included images
field.images = [];
included.relationships.images.data.forEach((img) => {
// console.log('href', img.meta.imageDerivatives.links.card_medium.href);
if(img.meta.imageDerivatives){
field.images.push({
title:img.meta.title,
src: img.meta.imageDerivatives.links.hd.href,
img_styles: {
card_medium: img.meta.imageDerivatives.links.card_medium.href,
card_full: img.meta.imageDerivatives.links.card_full.href
}
})
}
})
break;
case 'field_thesaurus':
case 'field_tags':
field = included.attributes
field.id = included.id
break;
default:
}
this.content[key].push(field)
}
})
}
// extract first visuel as accroche
this.content.image_accroche = this.content.field_visuel.shift()
// fill the lightbox
for(let visuel of this.content.field_visuel){
this.content.lightbox_items.push(visuel);
}
console.log('this.content.lightbox_items', this.content.lightbox_items);
// update main page title
this.$store.commit('Common/setPagetitle', this.content.title)
this.loading = false;
console.log('article.content',this.content);
},
onNext(){
// console.log('clicked on next', this.prevnext.next);
let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')