diff options
Diffstat (limited to 'app/assets/javascripts/environments/environment_details/pagination.vue')
-rw-r--r-- | app/assets/javascripts/environments/environment_details/pagination.vue | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/app/assets/javascripts/environments/environment_details/pagination.vue b/app/assets/javascripts/environments/environment_details/pagination.vue new file mode 100644 index 00000000000..414610b306a --- /dev/null +++ b/app/assets/javascripts/environments/environment_details/pagination.vue @@ -0,0 +1,74 @@ +<script> +import { GlKeysetPagination } from '@gitlab/ui'; +import { setUrlParams } from '~/lib/utils/url_utility'; +import { translations } from './constants'; + +export default { + components: { + GlKeysetPagination, + }, + props: { + pageInfo: { + type: Object, + required: true, + }, + disabled: { + type: Boolean, + required: false, + default: false, + }, + }, + translations, + computed: { + previousLink() { + if (!this.pageInfo || !this.pageInfo.hasPreviousPage) { + return ''; + } + return setUrlParams({ before: this.pageInfo.startCursor }, window.location.href, true); + }, + nextLink() { + if (!this.pageInfo || !this.pageInfo.hasNextPage) { + return ''; + } + return setUrlParams({ after: this.pageInfo.endCursor }, window.location.href, true); + }, + isPaginationVisible() { + if (!this.pageInfo) { + return false; + } + + return this.pageInfo.hasNextPage || this.pageInfo.hasPreviousPage; + }, + }, + methods: { + onPrev(previousCursor) { + this.$router.push({ query: { before: previousCursor } }); + }, + onNext(nextCursor) { + this.$router.push({ query: { after: nextCursor } }); + }, + onPaginationClick(event) { + // this check here is to ensure the proper default behvaior when a user ctrl/cmd + clicks the link + if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) { + return; + } + event.preventDefault(); + }, + }, +}; +</script> +<template> + <div v-if="isPaginationVisible" class="gl--flex-center"> + <gl-keyset-pagination + v-bind="pageInfo" + :prev-text="$options.translations.previousPageButtonLabel" + :next-text="$options.translations.nextPageButtonLabel" + :prev-button-link="previousLink" + :next-button-link="nextLink" + :disabled="disabled" + @prev="onPrev" + @next="onNext" + @click="onPaginationClick" + /> + </div> +</template> |