created thematique page

2020-12-25 17:37:15 +01:00
parent f65e8fb140
commit 144ab7db26
13 changed files with 589 additions and 67 deletions
--- a/web/themes/custom/materiotheme/vuejs/components/Pages/Thematique.vue
+++ b/web/themes/custom/materiotheme/vuejs/components/Pages/Thematique.vue
@ -0,0 +1,151 @@
+<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>