Pagination page crash patch

This commit is contained in:
Troplo 2021-01-28 20:21:17 +11:00
parent ba056a4670
commit 37c3b2dda9
3 changed files with 18 additions and 5 deletions

View file

@ -9,7 +9,7 @@ import throttle from 'lodash.throttle'
export default { export default {
name: 'Pagination', name: 'Pagination',
props: ['loading', 'query-selector', 'padding-bottom', 'padding-top', 'paginate'], props: ['loading', 'query-selector', 'padding-bottom', 'padding-top', 'paginate', 'wait'],
computed: { computed: {
element () { element () {
if(this.querySelector){ if(this.querySelector){
@ -48,7 +48,7 @@ export default {
} }
if(scrollBottom > 0) { if(scrollBottom > 0) {
if(this.paginate) { if(this.paginate && !this.wait) {
this.$emit('loadNext'); this.$emit('loadNext');
} }
} else if(scrollTop > 0) { } else if(scrollTop > 0) {

View file

@ -41,6 +41,7 @@
v-if='items.length' v-if='items.length'
:loading='loading' :loading='loading'
:paginate="paginate" :paginate="paginate"
:wait="wait"
@loadNext='getItems(false)' @loadNext='getItems(false)'
> >
<div class="column is-3 has-text-centered" style="float: left;" v-for='(item) in items' :key='"marketplace-" + item.id'> <div class="column is-3 has-text-centered" style="float: left;" v-for='(item) in items' :key='"marketplace-" + item.id'>
@ -153,7 +154,8 @@ export default {
paginate: true, paginate: true,
offset: 0, offset: 0,
nextURL: null, nextURL: null,
category: this.$route.params.category category: this.$route.params.category,
wait: true
} }
}, },
methods: { methods: {
@ -175,6 +177,9 @@ export default {
}, },
getItems (initial) { getItems (initial) {
this.loading = true this.loading = true
if(!initial) {
this.wait = true
}
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'marketplace/' + this.category + '?offset=' + this.offset) .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'marketplace/' + this.category + '?offset=' + this.offset)
.then(res => { .then(res => {
@ -194,9 +199,11 @@ export default {
this.last = res.data.Items this.last = res.data.Items
} }
this.loading = false this.loading = false
this.wait = false
}) })
.catch((e) => { .catch((e) => {
this.loading = false this.loading = false
this.wait = false
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e)
}) })
}, },

View file

@ -7,11 +7,11 @@
</NoItems> </NoItems>
</div> </div>
<Pagination <Pagination
key='user-row'
class='columns is-multiline' class='columns is-multiline'
v-if='users.length' v-if='users.length'
:loading='loading' :loading='loading'
:paginate="paginate" :paginate="paginate"
:wait="wait"
@loadNext='getUsers(false)' @loadNext='getUsers(false)'
> >
<div class="column is-3" v-for='(user) in users' :key='"user-" + user.id'> <div class="column is-3" v-for='(user) in users' :key='"user-" + user.id'>
@ -113,7 +113,8 @@ export default {
offset: 0, offset: 0,
paginate: true, paginate: true,
limit: 30, limit: 30,
loading: true loading: true,
wait: true
} }
}, },
methods: { methods: {
@ -124,6 +125,9 @@ export default {
this.offset = 0 this.offset = 0
this.paginate = true this.paginate = true
} }
if(!initial) {
this.wait = true
}
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'user/' + '?offset=' + this.offset) .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'user/' + '?offset=' + this.offset)
.then(res => { .then(res => {
@ -141,9 +145,11 @@ export default {
this.users.push(...res.data) this.users.push(...res.data)
} }
this.loading = false this.loading = false
this.wait = false
}) })
.catch((e) => { .catch((e) => {
this.loading = false this.loading = false
this.wait = false
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e)
}) })
} }