diff options
Diffstat (limited to 'app/assets/javascripts')
3 files changed, 65 insertions, 9 deletions
diff --git a/app/assets/javascripts/vue_shared/components/pagination/constants.js b/app/assets/javascripts/vue_shared/components/pagination/constants.js new file mode 100644 index 00000000000..c24b142ac7e --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/pagination/constants.js @@ -0,0 +1,9 @@ +import { s__ } from '~/locale'; + +export const PAGINATION_UI_BUTTON_LIMIT = 4; +export const UI_LIMIT = 6; +export const SPREAD = '...'; +export const PREV = s__('Pagination|Prev'); +export const NEXT = s__('Pagination|Next'); +export const FIRST = s__('Pagination|« First'); +export const LAST = s__('Pagination|Last »'); diff --git a/app/assets/javascripts/vue_shared/components/pagination/graphql_pagination.vue b/app/assets/javascripts/vue_shared/components/pagination/graphql_pagination.vue new file mode 100644 index 00000000000..53e473432db --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/pagination/graphql_pagination.vue @@ -0,0 +1,47 @@ +<script> +import { GlButton } from '@gitlab/ui'; +import { PREV, NEXT } from '~/vue_shared/components/pagination/constants'; + +/** + * Pagination Component for graphql API + */ +export default { + name: 'GraphqlPaginationComponent', + components: { + GlButton, + }, + labels: { + prev: PREV, + next: NEXT, + }, + props: { + hasNextPage: { + required: true, + type: Boolean, + }, + hasPreviousPage: { + required: true, + type: Boolean, + }, + }, +}; +</script> +<template> + <div class="justify-content-center d-flex prepend-top-default"> + <div class="btn-group"> + <gl-button + class="js-prev-btn page-link" + :disabled="!hasPreviousPage" + @click="$emit('previousClicked')" + >{{ $options.labels.prev }}</gl-button + > + + <gl-button + class="js-next-btn page-link" + :disabled="!hasNextPage" + @click="$emit('nextClicked')" + >{{ $options.labels.next }}</gl-button + > + </div> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.vue b/app/assets/javascripts/vue_shared/components/table_pagination.vue index 9cce9a4e542..1e2d4ffa7e3 100644 --- a/app/assets/javascripts/vue_shared/components/table_pagination.vue +++ b/app/assets/javascripts/vue_shared/components/table_pagination.vue @@ -1,13 +1,13 @@ <script> -import { s__ } from '../../locale'; - -const PAGINATION_UI_BUTTON_LIMIT = 4; -const UI_LIMIT = 6; -const SPREAD = '...'; -const PREV = s__('Pagination|Prev'); -const NEXT = s__('Pagination|Next'); -const FIRST = s__('Pagination|« First'); -const LAST = s__('Pagination|Last »'); +import { + PAGINATION_UI_BUTTON_LIMIT, + UI_LIMIT, + SPREAD, + PREV, + NEXT, + FIRST, + LAST, +} from '~/vue_shared/components/pagination/constants'; export default { props: { |