diff options
author | Phil Hughes <me@iamphill.com> | 2019-06-11 20:01:42 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2019-06-11 20:01:42 +0300 |
commit | 7e350ab309ee270885fa5138b6e0badd74472e35 (patch) | |
tree | 6a5de01198d211f318162d7dc428fd8dc3d4c8bf /app/assets/javascripts | |
parent | 7e2f44e0f642344a319d7fcd2468165d5cd3756b (diff) | |
parent | 18b906c026d885124c5b4eb1608d1b883a932956 (diff) |
Merge branch '62788-graphql-pagination' into 'master'
Creates pagination component graphql
Closes #62788
See merge request gitlab-org/gitlab-ce!29277
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: { |