created thematique page
This commit is contained in:
@ -4,18 +4,17 @@ fragment SearchResultFields on SearchResult {
|
||||
title
|
||||
short_description
|
||||
reference
|
||||
path
|
||||
images{
|
||||
url
|
||||
alt
|
||||
style_cardmedium{
|
||||
url
|
||||
}
|
||||
style_cardmedium_url
|
||||
style_hd_url
|
||||
}
|
||||
visuels{
|
||||
url
|
||||
alt
|
||||
style_cardmedium{
|
||||
url
|
||||
}
|
||||
style_cardmedium_url
|
||||
style_hd_url
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
fragment ThematiqueFields on Thematique {
|
||||
id
|
||||
title
|
||||
body
|
||||
tags {
|
||||
id
|
||||
name
|
||||
}
|
||||
linked_materials {
|
||||
id
|
||||
title
|
||||
short_description
|
||||
images {
|
||||
url
|
||||
style_cardmedium_url
|
||||
style_hd_url
|
||||
}
|
||||
}
|
||||
images {
|
||||
id
|
||||
url
|
||||
alt
|
||||
style_cardmedium{
|
||||
url
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -118,7 +118,8 @@ export default {
|
||||
}
|
||||
},
|
||||
openModalCard (e) {
|
||||
if(this.isLoggedin){
|
||||
console.log('openModalCard', this.isLoggedin);
|
||||
if(this.isloggedin){
|
||||
this.$modal.show(
|
||||
ModalCard,
|
||||
{ item: this.item },
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
<template>
|
||||
<article class="card card-thematique search-card">
|
||||
<header
|
||||
@click="openThematique"
|
||||
>
|
||||
<h1>{{ item.title }}</h1>
|
||||
<h4>{{ item.short_description }}</h4>
|
||||
<header>
|
||||
<a
|
||||
:href="item.path"
|
||||
@click.prevent="openThematique"
|
||||
>
|
||||
<h1>{{ item.title }}</h1>
|
||||
<h4>{{ item.short_description }}</h4>
|
||||
</a>
|
||||
</header>
|
||||
<section class="images" v-switcher>
|
||||
<figure
|
||||
@ -14,7 +17,7 @@
|
||||
<img
|
||||
class="lazy"
|
||||
v-lazy="index"
|
||||
:data-src="img.style_cardmedium.url"
|
||||
:data-src="img.style_cardmedium_url"
|
||||
:title="img.title"
|
||||
/>
|
||||
<img
|
||||
@ -27,7 +30,7 @@
|
||||
<CoolLightBox
|
||||
:items="item.visuels"
|
||||
:index="lightbox_index"
|
||||
srcName="url"
|
||||
srcName="style_hd_url"
|
||||
:loop="true"
|
||||
@close="lightbox_index = null">
|
||||
</CoolLightBox>
|
||||
@ -50,7 +53,8 @@ export default {
|
||||
return {
|
||||
blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
|
||||
// loadingFlag: false,
|
||||
lightbox_index: null
|
||||
lightbox_index: null,
|
||||
alias: this.item.path.replace(/^.?\/thematique\//g, '')
|
||||
}
|
||||
},
|
||||
// computed: {
|
||||
@ -95,15 +99,12 @@ export default {
|
||||
// },
|
||||
openThematique (e) {
|
||||
console.log('openThematique', e);
|
||||
// this.$modal.show(
|
||||
// ModalCard,
|
||||
// { item: this.item },
|
||||
// {
|
||||
// draggable: true,
|
||||
// width: '850px',
|
||||
// height: '610px'
|
||||
// }
|
||||
// )
|
||||
this.$router.push({
|
||||
name:`thematique`,
|
||||
params: { alias:this.alias }
|
||||
// query: { nid: this.item.nid }
|
||||
// meta: { uuid:this.item.uuid },
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
|
||||
|
||||
import Home from 'vuejs/components/Pages/Home'
|
||||
import Base from 'vuejs/components/Pages/Base'
|
||||
import Thematique from 'vuejs/components/Pages/Thematique'
|
||||
import Blabla from 'vuejs/components/Pages/Blabla'
|
||||
import Article from 'vuejs/components/Pages/Article'
|
||||
import Showrooms from 'vuejs/components/Pages/Showrooms'
|
||||
@ -41,17 +42,11 @@ const routes = [
|
||||
// 'base': Base
|
||||
// }
|
||||
},
|
||||
// {
|
||||
// name:'blabla',
|
||||
// path: `${basePath}blabla`,
|
||||
// component: Blabla,
|
||||
// children: [
|
||||
// {
|
||||
// path: `${basePath}blabla/:alias`,
|
||||
// component: Article
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
{
|
||||
name: 'thematique',
|
||||
path: `${basePath}thematique/:alias`,
|
||||
component: Thematique
|
||||
},
|
||||
{
|
||||
name: 'blabla',
|
||||
path: `${basePath}blabla`,
|
||||
|
||||
Reference in New Issue
Block a user