Thematique.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <template>
  2. <div class="loading" v-if="!thematique || loading">
  3. <span>{{ $t('default.Loading…') }}</span>
  4. </div>
  5. <article class="thematique" v-else>
  6. <div class="cols">
  7. <div class="col col-left">
  8. <section class="body" v-html="thematique.body"></section>
  9. <section class="visuel">
  10. <img :src="image_accroche.style_cardfull_url" alt="">
  11. </section>
  12. </div> <!-- //col-left -->
  13. <div class="col col-right">
  14. <aside class="linked-materials">
  15. <div class="card-list">
  16. <ul class="">
  17. <li v-for="node in thematique.linked_materials" v-bind:key="node.id">
  18. <Card :item="node" />
  19. </li>
  20. </ul>
  21. </div>
  22. </aside>
  23. </div> <!-- // col-right -->
  24. </div> <!-- // cols -->
  25. </article>
  26. </template>
  27. <script>
  28. import router from 'vuejs/route'
  29. import store from 'vuejs/store'
  30. // import { JSONAPI } from 'vuejs/api/json-axios'
  31. import { REST } from 'vuejs/api/rest-axios'
  32. import { MGQ } from 'vuejs/api/graphql-axios'
  33. import { print } from 'graphql/language/printer'
  34. import gql from 'graphql-tag'
  35. // import materiauFields from 'vuejs/api/gql/materiau.fragment.gql'
  36. import thematiqueFields from 'vuejs/api/gql/thematique.fragment.gql'
  37. // import qs from 'querystring-es3'
  38. import Card from 'vuejs/components/Content/Card'
  39. import { mapState, mapActions } from 'vuex'
  40. export default {
  41. name: "Thematique",
  42. router,
  43. store,
  44. data(){
  45. return {
  46. nid:null,
  47. path: null,
  48. thematique:{},
  49. image_accroche: null,
  50. loading:true,
  51. }
  52. },
  53. metaInfo () {
  54. return {
  55. title: this.thematique.title
  56. }
  57. },
  58. // computed: {
  59. // ...mapState({
  60. // items: state => state.Blabla.items
  61. // })
  62. // },
  63. created(){
  64. this.getThematique()
  65. },
  66. methods: {
  67. // ...mapActions({
  68. // getItems: 'Blabla/getItems',
  69. // getItemIndex: 'Blabla/getItemIndex',
  70. // getPrevNextItems: 'Blabla/getPrevNextItems'
  71. // }),
  72. getThematique(){
  73. console.log('getThematique', this.$route)
  74. if (this.$route.params.id) {
  75. // we come from internal link with vuejs
  76. // using path to load from route is hasardous
  77. // this.path = this.$route.path
  78. this.id = this.$route.params.id
  79. } else if (drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'thematique') {
  80. // we landed in an internal page
  81. // get the id from drupalDeclouped, provided by materio_decoupled.module
  82. this.id = drupalDecoupled.entity_id
  83. }
  84. if (this.id) {
  85. this.loadThematique()
  86. } else {
  87. // if for any reason we dont have the id redirect to home
  88. this.$router.replace({name:'home'})
  89. }
  90. },
  91. loadThematique(){
  92. console.log('loadThematique')
  93. this.loading = true
  94. //
  95. const ast = gql`{
  96. thematique(id: ${this.id}, lang: "${drupalDecoupled.lang_code}") {
  97. ...ThematiqueFields
  98. }
  99. }
  100. ${thematiqueFields}
  101. `
  102. // ?XDEBUG_SESSION_START=1
  103. MGQ.post('', { query: print(ast)
  104. })
  105. .then(({ data:{data:{thematique}}}) => {
  106. console.log('loaded Thematique', thematique)
  107. this.parseDataGQL(thematique)
  108. })
  109. .catch(error => {
  110. console.warn('Issue with loadThematique', error)
  111. Promise.reject(error)
  112. })
  113. },
  114. parseDataGQL(thematique){
  115. console.log('parseDataGQL thematique', thematique)
  116. if (thematique) {
  117. this.thematique = thematique
  118. if (thematique.images) {
  119. this.image_accroche = thematique.images[0]
  120. }
  121. // update main page title
  122. this.$store.commit('Common/setPagetitle', thematique.title)
  123. } else {
  124. console.warn('Thematique not loaded');
  125. }
  126. this.loading = false;
  127. },
  128. },
  129. components: {
  130. Card
  131. },
  132. watch: {
  133. '$route' (to, from) {
  134. console.log('route change')
  135. this.getThematique()
  136. }
  137. }
  138. }
  139. </script>
  140. <style lang="scss" scoped>
  141. </style>