<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>