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