adds 'load more' button

This commit is contained in:
buttle 2021-11-10 13:53:09 +01:00
parent c7c096d3c4
commit a5928c7e43
2 changed files with 43 additions and 15 deletions

View File

@ -70,7 +70,7 @@ This file is part of ArciveList.
</p>
</div>
</li>
<li v-for="site in getDisplayedSites()"
<li v-for="site in sites"
class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
<ul class="">
@ -104,6 +104,13 @@ This file is part of ArciveList.
</aside>
</li>
</ul>
<div class="load_more"
v-if="more_sites_to_display"
v-on:click="loadMoreSites()">
<button>
Load more
</button>
</div>
</article>
</main>
<aside>
@ -145,8 +152,8 @@ export default {
mounted() {
var payload = {
'sites': JSON.parse(this.collections),
'column_name': 'date',
'order': this.columns_order['date']}
'column_name': this.active_column,
'order': this.columns_order[this.active_column]}
this.setSites(payload)
},
@ -165,18 +172,30 @@ export default {
getOrderIcon: function(name) {
return this.columns_order[name] == 'asc' ? faSortAlphaUp : faSortAlphaDown
},
loadMoreSites() {
console.log('loading')
this.incrementPageCount()
},
...mapGetters([
'getDisplayedSites'
'getDisplayedSites', 'getPageSize', 'getPageCount'
]),
...mapMutations([
'setSites', 'setColumnOrder'
'setSites', 'setColumnOrder', 'incrementPageCount'
]),
},
watched: {
},
computed: {
sites: function() {
return this.getDisplayedSites().slice(0, this.getPageCount() * this.getPageSize())
},
more_sites_to_display: function() {
if (this.getDisplayedSites().length > this.getPageCount() * this.getPageSize()) {
return true
}
return false
}
}
};
</script>

View File

@ -17,6 +17,8 @@ const store = new Vuex.Store({
search_text: "",
sites: [],
filtered_sites: [],
page_size: 10,
page_count: 1,
},
mutations: {
setSearchText(state, text) {
@ -25,6 +27,9 @@ const store = new Vuex.Store({
setSites(state, payload) {
state.sites = _.sortBy(payload.sites, payload.column_name)
},
incrementPageCount(state) {
state.page_count = state.page_count +1
},
setFilteredSites(state, filtered_site_ids) {
console.log(filtered_site_ids)
var sites = []
@ -38,11 +43,9 @@ const store = new Vuex.Store({
state.filtered_sites = sites
},
setColumnOrder(state, payload) {
var column_name = payload.column_name
var order = payload.order
state.sites = _.sortBy(state.sites, column_name)
state.filtered_sites = _.sortBy(state.filtered_sites, column_name)
if (order == 'desc') {
state.sites = _.sortBy(state.sites, payload.column_name)
state.filtered_sites = _.sortBy(state.filtered_sites, payload.column_name)
if (payload.order == 'desc') {
state.sites.reverse()
state.filtered_sites.reverse()
}
@ -55,6 +58,12 @@ const store = new Vuex.Store({
}
return state.filtered_sites
},
getPageSize: state => {
return state.page_size
},
getPageCount: state => {
return state.page_count
},
}
})