<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 { 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) 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} ` // ?XDEBUG_SESSION_START=1 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>