materio-d9/web/themes/custom/materiotheme/vuejs/components/Pages/Thematique.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>