diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/incubation/pagination.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/incubation/pagination.vue | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/incubation/pagination.vue b/app/assets/javascripts/vue_shared/components/incubation/pagination.vue new file mode 100644 index 00000000000..b5afe92316a --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/incubation/pagination.vue @@ -0,0 +1,62 @@ +<script> +import { GlKeysetPagination } from '@gitlab/ui'; +import { setUrlParams } from '~/lib/utils/url_utility'; +import { __ } from '~/locale'; + +export default { + name: 'KeysetPagination', + components: { + GlKeysetPagination, + }, + props: { + startCursor: { + type: String, + required: false, + default: '', + }, + endCursor: { + type: String, + required: false, + default: '', + }, + hasNextPage: { + type: Boolean, + required: true, + }, + hasPreviousPage: { + type: Boolean, + required: true, + }, + }, + computed: { + previousPageLink() { + return setUrlParams({ cursor: this.startCursor }); + }, + nextPageLink() { + return setUrlParams({ cursor: this.endCursor }); + }, + isPaginationVisible() { + return this.hasPreviousPage || this.hasNextPage; + }, + }, + i18n: { + previousPageButtonLabel: __('Prev'), + nextPageButtonLabel: __('Next'), + }, +}; +</script> + +<template> + <div v-if="isPaginationVisible" class="gl--flex-center"> + <gl-keyset-pagination + :start-cursor="startCursor" + :end-cursor="endCursor" + :has-previous-page="hasPreviousPage" + :has-next-page="hasNextPage" + :prev-text="$options.i18n.previousPageButtonLabel" + :next-text="$options.i18n.nextPageButtonLabel" + :prev-button-link="previousPageLink" + :next-button-link="nextPageLink" + /> + </div> +</template> |