added showrooms pages, made page-title color
This commit is contained in:
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div class="loading" v-if="!content">
|
||||
<span>Loading ...</span>
|
||||
</div>
|
||||
<article class="article" v-else>
|
||||
<header>
|
||||
<h1>{{ content.title }}</h1>
|
||||
<nav v-if="index != -1">
|
||||
<a @click.prevent="onPrev" href="#">prev : {{ prevnext.prev.title }}</a>
|
||||
<a @click.prevent="onNext" href="#">next : {{ prevnext.next.title }}</a>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="taxonomy">
|
||||
<div class="thesaurus">
|
||||
<ul>
|
||||
<li
|
||||
v-for="term in content.field_thesaurus" v-bind:key="term.id"
|
||||
>{{ term.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<ul>
|
||||
<li
|
||||
v-for="term in content.field_tags" v-bind:key="term.id"
|
||||
>{{ term.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body" v-html="content.body"></div>
|
||||
<div class="linked-materials">
|
||||
<ul>
|
||||
<li v-for="node in content.field_linked_materials" v-bind:key="node.id">
|
||||
<section :uuid="node.id">
|
||||
<h1>{{ node.title }}</h1>
|
||||
<h3>{{ node.field_reference }}</h3>
|
||||
<h2>{{ node.field_short_description }}</h2>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="visuels">
|
||||
<figure
|
||||
v-for="visuel in content.field_visuel" v-bind:key="visuel.id"
|
||||
>
|
||||
<img
|
||||
:src="visuel.src"
|
||||
:alt="visuel.alt"
|
||||
:title="visuel.title"
|
||||
/>
|
||||
<caption></caption>
|
||||
</figure>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import router from 'vuejs/route'
|
||||
import { JSONAPI } from 'vuejs/api/json-axios'
|
||||
import qs from 'querystring'
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "Article",
|
||||
router,
|
||||
props: ['item'],
|
||||
data(){
|
||||
return {
|
||||
index:-1,
|
||||
prevnext:{},
|
||||
uuid:null,
|
||||
content:null
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getArticle()
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
getItemIndex: 'Blabla/getItemIndex',
|
||||
getPrevNextItems: 'Blabla/getPrevNextItems'
|
||||
}),
|
||||
getIndex(){
|
||||
console.log("Article getIndex");
|
||||
this.getItemIndex(this.uuid).then((index) => {
|
||||
this.index = index
|
||||
// console.log('article index', index, this);
|
||||
this.getPrevNextItems(index).then((pn) => {
|
||||
this.prevnext = pn
|
||||
})
|
||||
})
|
||||
},
|
||||
getArticle(){
|
||||
console.log(this.$route);
|
||||
// get the article uuid
|
||||
if(this.$route.query.uuid){
|
||||
// we come from internal link with vuejs
|
||||
// directly record uuid
|
||||
this.uuid = this.$route.query.uuid
|
||||
}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.uuid = drupalDecoupled.entity_uuid
|
||||
}
|
||||
|
||||
if(this.uuid){
|
||||
this.getIndex()
|
||||
this.loadArticle()
|
||||
}else{
|
||||
// if for any reason we dont have the uuid
|
||||
// redirect to home
|
||||
this.$route.replace('home')
|
||||
}
|
||||
},
|
||||
loadArticle(){
|
||||
console.log('loadArticle', this.uuid)
|
||||
let params = {
|
||||
include:'field_linked_materials,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
|
||||
}
|
||||
let q = qs.stringify(params)
|
||||
JSONAPI.get(`node/article/${this.uuid}?${q}`)
|
||||
.then(({ data }) => {
|
||||
console.log('loadArticle data', data)
|
||||
this.parseData(data)
|
||||
})
|
||||
.catch(( error ) => {
|
||||
console.warn('Issue with loadArticle', error)
|
||||
Promise.reject(error)
|
||||
})
|
||||
},
|
||||
parseData(data){
|
||||
let attrs = data.data.attributes
|
||||
let relations = data.data.relationships
|
||||
console.log('relations', relations);
|
||||
let inc = data.included
|
||||
console.log('included', inc);
|
||||
|
||||
this.content = {
|
||||
title:attrs.title,
|
||||
body: attrs.body.value
|
||||
}
|
||||
|
||||
// parse all relationships
|
||||
for (let key in relations) {
|
||||
// skip loop if the property is from prototype
|
||||
if (!relations.hasOwnProperty(key)) continue;
|
||||
|
||||
let obj = relations[key]
|
||||
console.log('typeof obj.data', typeof obj.data);
|
||||
// skip obj if data is not array
|
||||
if(!Array.isArray(obj.data)) continue
|
||||
|
||||
this.content[key] = []
|
||||
// parse relationship values using included
|
||||
let field = {}
|
||||
obj.data.forEach((e) => {
|
||||
// get the included values
|
||||
let included = inc.find((i) => { return i.id == e.id })
|
||||
if(typeof included != 'undefined'){
|
||||
// fill the values
|
||||
switch (key) {
|
||||
case 'field_visuel':
|
||||
field = e.meta
|
||||
field.id = e.id
|
||||
field.src = included.links.card_medium.href
|
||||
break;
|
||||
case 'field_linked_materials':
|
||||
case 'field_thesaurus':
|
||||
case 'field_tags':
|
||||
field = included.attributes
|
||||
field.id = included.id
|
||||
break;
|
||||
// case 'field_showroom':
|
||||
// field = included.attributes
|
||||
// break
|
||||
default:
|
||||
}
|
||||
this.content[key].push(field)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
console.log('article.content',this.content);
|
||||
},
|
||||
onNext(){
|
||||
console.log('clicked on next', this.prevnext.next);
|
||||
let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')
|
||||
this.$router.push({
|
||||
name:`article`,
|
||||
params: { alias:alias },
|
||||
query: { uuid: this.prevnext.next.uuid }
|
||||
})
|
||||
},
|
||||
onPrev(){
|
||||
console.log('clicked on prev', this.prevnext.next);
|
||||
let alias = this.prevnext.prev.view_node.replace(/^.?\/blabla\//g, '')
|
||||
this.$router.push({
|
||||
name:`article`,
|
||||
params: { alias:alias },
|
||||
query: { uuid: this.prevnext.prev.uuid }
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route' (to, from) {
|
||||
console.log('route change')
|
||||
this.getArticle()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div id="Base">
|
||||
<div class="loading" v-if="!items.length">
|
||||
<span>Loading ...</span>
|
||||
</div>
|
||||
<div class="cards-list" v-else>
|
||||
<aside class="search-info">
|
||||
{{ searchinfos }}
|
||||
</aside>
|
||||
<ul>
|
||||
<li v-for="item in items" v-bind:key="item.uuid">
|
||||
<Card :item="item"/>
|
||||
</li>
|
||||
</ul>
|
||||
<infinite-loading
|
||||
v-if="count > limit"
|
||||
@infinite="nextPage"
|
||||
>
|
||||
<div slot="no-more">No more results</div>
|
||||
</infinite-loading>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
import Card from 'vuejs/components/Content/Card'
|
||||
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "Base",
|
||||
data() {
|
||||
return {
|
||||
pagetitle:"Base",
|
||||
// searchinfos: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
items: state => state.Search.items,
|
||||
searchinfos: state => state.Search.infos,
|
||||
count: state => state.Search.count,
|
||||
limit: state => state.Search.limit
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
newSearch: 'Search/newSearch',
|
||||
nextPage: 'Search/nextPage'
|
||||
}),
|
||||
// infiniteHandler($state){
|
||||
// console.log('inifiniteHandler', $state);
|
||||
// this.nextPage()
|
||||
// }
|
||||
},
|
||||
created() {
|
||||
// at first page load or first route entering launch a search if params exists in url query
|
||||
console.log('Base created() location',window.location);
|
||||
let params = new URLSearchParams(window.location.search)
|
||||
if(params.has('keys') || params.has('term')){
|
||||
this.$store.commit('Search/setKeys', params.get('keys'))
|
||||
this.$store.commit('Search/setTerm', params.get('term'))
|
||||
this.pagetitle = params.get('keys')
|
||||
this.newSearch()
|
||||
}
|
||||
},
|
||||
beforeRouteUpdate (to, from, next) {
|
||||
// when query change launch a new search
|
||||
console.log('Base beforeRouteUpdate', to, from, next);
|
||||
this.$store.commit('Search/setKeys', to.query.keys)
|
||||
this.$store.commit('Search/setTerm', to.query.term)
|
||||
this.pagetitle = to.query.keys
|
||||
this.newSearch()
|
||||
next()
|
||||
},
|
||||
components: {
|
||||
Card
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div id="blabla">
|
||||
<div class="loading" v-if="!items.length">
|
||||
<span>Loading ...</span>
|
||||
</div>
|
||||
<div class="cards-list" v-else>
|
||||
<ul>
|
||||
<li v-for="item in items" v-bind:key="item.uuid">
|
||||
<ArticleCard :item="item"/>
|
||||
</li>
|
||||
</ul>
|
||||
<infinite-loading @infinite="nextPage">
|
||||
<div slot="no-more">No more articles</div>
|
||||
</infinite-loading>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import ArticleCard from 'vuejs/components/Content/ArticleCard'
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "Blabla",
|
||||
// data() {
|
||||
// return {
|
||||
// items:[],
|
||||
// page:0
|
||||
// }
|
||||
// },
|
||||
computed: {
|
||||
...mapState({
|
||||
items: state => state.Blabla.items
|
||||
})
|
||||
},
|
||||
created(){
|
||||
if(!this.items.length)
|
||||
this.getItems()
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
getItems: 'Blabla/getItems',
|
||||
nextPage: 'Blabla/nextPage'
|
||||
})
|
||||
},
|
||||
components: {
|
||||
ArticleCard
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<script>
|
||||
|
||||
import Vue from 'vue'
|
||||
|
||||
export default {
|
||||
props: ['html'], // get the html from parent with props
|
||||
data() {
|
||||
return {
|
||||
template: null // compiled template from html used in render
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// console.log('Home beforeMount');
|
||||
// compile the html src (coming from parent with props or from ajax call)
|
||||
if(this.html){
|
||||
// console.log('html', this.html);
|
||||
this.template = Vue.compile(this.html)
|
||||
this.$options.staticRenderFns = []
|
||||
this._staticTrees = []
|
||||
this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)))
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
if(!this.template){
|
||||
return h('span', 'Loading ...')
|
||||
}else{
|
||||
return this.template.render.call(this)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div id="showrooms">
|
||||
<div class="loading" v-if="!items.length">
|
||||
<span>Loading ...</span>
|
||||
</div>
|
||||
<Showroom
|
||||
v-else
|
||||
v-for="item in items"
|
||||
v-bind:key="item.uuid"
|
||||
:item="item"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import Showroom from 'vuejs/components/Content/Showroom'
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "Showrooms",
|
||||
// data() {
|
||||
// return {
|
||||
// items:[],
|
||||
// page:0
|
||||
// }
|
||||
// },
|
||||
computed: {
|
||||
...mapState({
|
||||
items: state => state.Showrooms.items
|
||||
})
|
||||
},
|
||||
created(){
|
||||
if(!this.items.length)
|
||||
this.getItems()
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
getItems: 'Showrooms/getItems'
|
||||
})
|
||||
},
|
||||
components: {
|
||||
Showroom
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user