Pagination page crash patch
This commit is contained in:
parent
ba056a4670
commit
37c3b2dda9
3 changed files with 18 additions and 5 deletions
|
@ -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) {
|
||||||
|
|
|
@ -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)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
|
@ -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)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue