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

112 lines
2.9 KiB
Vue
Raw Normal View History

<template>
<div id="Base">
<div class="loading" v-if="!searchinfos">
2021-06-01 22:46:15 +02:00
<span>{{ $t('default.Loading…') }}</span>
</div>
<div class="cards-list" v-else>
<aside class="search-info">
{{ searchinfos }}
</aside>
<div class="loading" v-if="!items.length & !noresults">
2021-06-01 22:46:15 +02:00
<span>{{ $t('default.Loading…') }}</span>
</div>
<ul v-else>
<li v-for="item in items" v-bind:key="item.id">
<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')) {
this.$store.commit('Search/setKeys', params.get('keys'))
2019-06-06 18:12:07 +02:00
this.pagetitle = params.get('keys')
} else {
2021-01-19 16:30:14 +01:00
this.$store.commit('Search/setKeys', '')
this.pagetitle = 'Base'
}
if (params.has('term')) {
this.$store.commit('Search/setTerm', params.get('term'))
} else {
this.$store.commit('Search/setTerm', '')
}
if (params.has('filters')) {
this.$store.commit('Search/setFilters', params.get('filters').split(','))
} else {
this.$store.commit('Search/setFilters', [])
}
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.$store.commit('Search/setFilters', to.query.filters)
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>