63 lines
1.4 KiB
Vue
63 lines
1.4 KiB
Vue
|
<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>
|