Bachir Soussi Chiadmi
75b908ba26
removed fixed head, replaced with flex moved pagetitle and searchform to headerbottom region added Common store to vuejs with pagetitle data added pagetitle vuejs component
89 lines
2.1 KiB
Vue
89 lines
2.1 KiB
Vue
<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>
|