152 lines
3.8 KiB
Vue
152 lines
3.8 KiB
Vue
<template>
|
|
<div class="loading" v-if="!thematique || loading">
|
|
<span>Loading ...</span>
|
|
</div>
|
|
<article class="thematique" v-else>
|
|
<div class="cols">
|
|
<div class="col col-left">
|
|
<section class="body" v-html="thematique.body"></section>
|
|
</div> <!-- //col-left -->
|
|
<div class="col col-right">
|
|
<aside class="linked-materials">
|
|
<div class="card-list">
|
|
<ul class="">
|
|
<li v-for="node in thematique.linked_materials" v-bind:key="node.id">
|
|
<Card :item="node" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
</div> <!-- // col-right -->
|
|
</div> <!-- // cols -->
|
|
</article>
|
|
</template>
|
|
|
|
<script>
|
|
import router from 'vuejs/route'
|
|
import store from 'vuejs/store'
|
|
|
|
// import { JSONAPI } from 'vuejs/api/json-axios'
|
|
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 thematiqueFields from 'vuejs/api/gql/thematique.fragment.gql'
|
|
|
|
// import qs from 'querystring-es3'
|
|
import Card from 'vuejs/components/Content/Card'
|
|
|
|
import { mapState, mapActions } from 'vuex'
|
|
|
|
export default {
|
|
name: "Thematique",
|
|
router,
|
|
store,
|
|
data(){
|
|
return {
|
|
nid:null,
|
|
path: null,
|
|
thematique:{},
|
|
image_accroche: null,
|
|
loading:true,
|
|
}
|
|
},
|
|
metaInfo () {
|
|
return {
|
|
title: this.thematique.title
|
|
}
|
|
},
|
|
// computed: {
|
|
// ...mapState({
|
|
// items: state => state.Blabla.items
|
|
// })
|
|
// },
|
|
created(){
|
|
this.getThematique()
|
|
},
|
|
methods: {
|
|
// ...mapActions({
|
|
// getItems: 'Blabla/getItems',
|
|
// getItemIndex: 'Blabla/getItemIndex',
|
|
// getPrevNextItems: 'Blabla/getPrevNextItems'
|
|
// }),
|
|
getThematique(){
|
|
console.log('getThematique', this.$route);
|
|
// get the article uuid
|
|
// 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
|
|
this.path = this.$route.path
|
|
} else {
|
|
// we landed in an internal page
|
|
this.path = window.location.pathname
|
|
}
|
|
|
|
if(this.path){
|
|
this.loadThematique()
|
|
}else{
|
|
// if for any reason we dont have the uuid
|
|
// redirect to home
|
|
this.$route.replace('home')
|
|
}
|
|
},
|
|
loadThematique(){
|
|
console.log('loadThematique')
|
|
this.loading = true
|
|
|
|
let ast = gql`{
|
|
route(path: "${this.path}") {
|
|
...ThematiqueFields
|
|
}
|
|
}
|
|
${ thematiqueFields }
|
|
`
|
|
MGQ.post('', { query: print(ast)
|
|
})
|
|
.then(({ data:{data:{route}}}) => {
|
|
console.log('loaded Thematique', route)
|
|
this.parseDataGQL(route)
|
|
})
|
|
.catch(error => {
|
|
console.warn('Issue with loadThematique', error)
|
|
Promise.reject(error)
|
|
})
|
|
},
|
|
parseDataGQL(thematique){
|
|
console.log('parseDataGQL thematique', thematique)
|
|
this.thematique = thematique
|
|
|
|
this.image_accroche = thematique.images[0]
|
|
|
|
// update main page title
|
|
this.$store.commit('Common/setPagetitle', thematique.title)
|
|
|
|
this.loading = false;
|
|
},
|
|
},
|
|
components: {
|
|
Card
|
|
},
|
|
watch: {
|
|
'$route' (to, from) {
|
|
console.log('route change')
|
|
this.getThematique()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|