Creates pagination component graphql
creates a pagination component for the graphql api
This commit is contained in:
parent
fd19f887df
commit
18b906c026
|
@ -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 »');
|
|
@ -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>
|
|
@ -1,13 +1,13 @@
|
||||||
<script>
|
<script>
|
||||||
import { s__ } from '../../locale';
|
import {
|
||||||
|
PAGINATION_UI_BUTTON_LIMIT,
|
||||||
const PAGINATION_UI_BUTTON_LIMIT = 4;
|
UI_LIMIT,
|
||||||
const UI_LIMIT = 6;
|
SPREAD,
|
||||||
const SPREAD = '...';
|
PREV,
|
||||||
const PREV = s__('Pagination|Prev');
|
NEXT,
|
||||||
const NEXT = s__('Pagination|Next');
|
FIRST,
|
||||||
const FIRST = s__('Pagination|« First');
|
LAST,
|
||||||
const LAST = s__('Pagination|Last »');
|
} from '~/vue_shared/components/pagination/constants';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: Adds pagination component for graphql api
|
||||||
|
merge_request: 29277
|
||||||
|
author:
|
||||||
|
type: added
|
|
@ -0,0 +1,70 @@
|
||||||
|
import { shallowMount } from '@vue/test-utils';
|
||||||
|
import GraphqlPagination from '~/vue_shared/components/pagination/graphql_pagination.vue';
|
||||||
|
|
||||||
|
describe('Graphql Pagination component', () => {
|
||||||
|
let wrapper;
|
||||||
|
function factory({ hasNextPage = true, hasPreviousPage = true }) {
|
||||||
|
wrapper = shallowMount(GraphqlPagination, {
|
||||||
|
propsData: {
|
||||||
|
hasNextPage,
|
||||||
|
hasPreviousPage,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
wrapper.destroy();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('without previous page', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
factory({ hasPreviousPage: false });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders disabled previous button', () => {
|
||||||
|
expect(wrapper.find('.js-prev-btn').attributes().disabled).toEqual('true');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('with previous page', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
factory({ hasPreviousPage: true });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders enabled previous button', () => {
|
||||||
|
expect(wrapper.find('.js-prev-btn').attributes().disabled).toEqual(undefined);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('emits previousClicked on click', () => {
|
||||||
|
wrapper.find('.js-prev-btn').vm.$emit('click');
|
||||||
|
|
||||||
|
expect(wrapper.emitted().previousClicked.length).toBe(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('without next page', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
factory({ hasNextPage: false });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders disabled next button', () => {
|
||||||
|
expect(wrapper.find('.js-next-btn').attributes().disabled).toEqual('true');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('with next page', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
factory({ hasNextPage: true });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders enabled next button', () => {
|
||||||
|
expect(wrapper.find('.js-next-btn').attributes().disabled).toEqual(undefined);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('emits nextClicked on click', () => {
|
||||||
|
wrapper.find('.js-next-btn').vm.$emit('click');
|
||||||
|
|
||||||
|
expect(wrapper.emitted().nextClicked.length).toBe(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue