150 lines
3.8 KiB
Vue
150 lines
3.8 KiB
Vue
<template>
|
|
<div class="loading" v-if="!thematique || loading">
|
|
<span>{{ $t('default.Loading…') }}</span>
|
|
</div>
|
|
<article class="thematique" v-else>
|
|
<div class="cols">
|
|
<div class="col col-left">
|
|
<section class="body" v-html="thematique.body"></section>
|
|
<section class="visuel">
|
|
<img :src="image_accroche.style_cardfull_url" alt="">
|
|
</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 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)
|
|
if (this.$route.params.id) {
|
|
// we come from internal link with vuejs
|
|
// using path to load from route is hasardous
|
|
// this.path = this.$route.path
|
|
this.id = this.$route.params.id
|
|
} else if (drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'thematique') {
|
|
// we landed in an internal page
|
|
// get the id from drupalDeclouped, provided by materio_decoupled.module
|
|
this.id = drupalDecoupled.entity_id
|
|
}
|
|
|
|
if (this.id) {
|
|
this.loadThematique()
|
|
} else {
|
|
// if for any reason we dont have the id redirect to home
|
|
this.$router.replace({name:'home'})
|
|
}
|
|
},
|
|
loadThematique(){
|
|
console.log('loadThematique')
|
|
this.loading = true
|
|
//
|
|
const ast = gql`{
|
|
thematique(id: ${this.id}, lang: "${drupalDecoupled.lang_code}") {
|
|
...ThematiqueFields
|
|
}
|
|
}
|
|
${thematiqueFields}
|
|
`
|
|
|
|
MGQ.post('', { query: print(ast)
|
|
})
|
|
.then(({ data:{data:{thematique}}}) => {
|
|
console.log('loaded Thematique', thematique)
|
|
this.parseDataGQL(thematique)
|
|
})
|
|
.catch(error => {
|
|
console.warn('Issue with loadThematique', error)
|
|
Promise.reject(error)
|
|
})
|
|
},
|
|
parseDataGQL(thematique){
|
|
console.log('parseDataGQL thematique', thematique)
|
|
if (thematique) {
|
|
this.thematique = thematique
|
|
|
|
if (thematique.images) {
|
|
this.image_accroche = thematique.images[0]
|
|
}
|
|
|
|
// update main page title
|
|
this.$store.commit('Common/setPagetitle', thematique.title)
|
|
|
|
} else {
|
|
console.warn('Thematique not loaded');
|
|
}
|
|
this.loading = false;
|
|
},
|
|
},
|
|
components: {
|
|
Card
|
|
},
|
|
watch: {
|
|
'$route' (to, from) {
|
|
console.log('route change')
|
|
this.getThematique()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|