diff options
Diffstat (limited to 'app/assets/javascripts/releases/components/releases_pagination_graphql.vue')
-rw-r--r-- | app/assets/javascripts/releases/components/releases_pagination_graphql.vue | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/app/assets/javascripts/releases/components/releases_pagination_graphql.vue b/app/assets/javascripts/releases/components/releases_pagination_graphql.vue new file mode 100644 index 00000000000..a4fe407a5bd --- /dev/null +++ b/app/assets/javascripts/releases/components/releases_pagination_graphql.vue @@ -0,0 +1,35 @@ +<script> +import { mapActions, mapState } from 'vuex'; +import { GlKeysetPagination } from '@gitlab/ui'; +import { historyPushState, buildUrlWithCurrentLocation } from '~/lib/utils/common_utils'; + +export default { + name: 'ReleasesPaginationGraphql', + components: { GlKeysetPagination }, + computed: { + ...mapState('list', ['graphQlPageInfo']), + showPagination() { + return this.graphQlPageInfo.hasPreviousPage || this.graphQlPageInfo.hasNextPage; + }, + }, + methods: { + ...mapActions('list', ['fetchReleasesGraphQl']), + onPrev(before) { + historyPushState(buildUrlWithCurrentLocation(`?before=${before}`)); + this.fetchReleasesGraphQl({ before }); + }, + onNext(after) { + historyPushState(buildUrlWithCurrentLocation(`?after=${after}`)); + this.fetchReleasesGraphQl({ after }); + }, + }, +}; +</script> +<template> + <gl-keyset-pagination + v-if="showPagination" + v-bind="graphQlPageInfo" + @prev="onPrev($event)" + @next="onNext($event)" + /> +</template> |