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>
|
||||
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: {
|
||||
|
|
|
@ -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