materio-d9/web/themes/custom/materiotheme/vuejs/components/Pages/Base.vue

96 lines
2.4 KiB
Vue
Raw Normal View History

<template>
<div id="Base">
<div class="loading" v-if="!searchinfos">
<span>Loading ...</span>
</div>
<div class="cards-list" v-else>
<aside class="search-info">
{{ searchinfos }}
</aside>
<div class="loading" v-if="!items.length & !noresults">
<span>Loading ...</span>
</div>
<ul v-else>
2019-06-11 18:04:46 +02:00
<li v-for="item in items" v-bind:key="item.uuid">
<Card v-if="item.bundle == 'materiau'" :item="item"/>
<CardThematique v-if="item.bundle == 'thematique'" :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 CardThematique from 'vuejs/components/Content/CardThematique'
import { mapState, mapActions } from 'vuex'
export default {
name: "Base",
2019-06-06 18:12:07 +02:00
data() {
return {
pagetitle:"Base",
// searchinfos: null
}
},
computed: {
...mapState({
2019-06-06 18:12:07 +02:00
items: state => state.Search.items,
searchinfos: state => state.Search.infos,
count: state => state.Search.count,
noresults: state => state.Search.noresults,
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'))
2019-06-06 18:12:07 +02:00
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)
2019-06-06 18:12:07 +02:00
this.pagetitle = to.query.keys
this.newSearch()
next()
},
components: {
Card,
CardThematique
}
}
</script>
<style lang="scss" scoped>
</style>