Commit 5b3fb0d4 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Phil Hughes

Use vue file for table pagination component

parent f222d81c
<script> <script>
/* global Flash */ /* global Flash */
import EnvironmentsService from '../services/environments_service'; import EnvironmentsService from '../services/environments_service';
import EnvironmentTable from './environments_table.vue'; import environmentTable from './environments_table.vue';
import EnvironmentsStore from '../stores/environments_store'; import EnvironmentsStore from '../stores/environments_store';
import TablePaginationComponent from '../../vue_shared/components/table_pagination'; import tablePagination from '../../vue_shared/components/table_pagination.vue';
import '../../lib/utils/common_utils'; import '../../lib/utils/common_utils';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
export default { export default {
components: { components: {
'environment-table': EnvironmentTable, environmentTable,
'table-pagination': TablePaginationComponent, tablePagination,
}, },
data() { data() {
......
<script> <script>
/* global Flash */ /* global Flash */
import EnvironmentsService from '../services/environments_service'; import EnvironmentsService from '../services/environments_service';
import EnvironmentTable from '../components/environments_table.vue'; import environmentTable from '../components/environments_table.vue';
import EnvironmentsStore from '../stores/environments_store'; import EnvironmentsStore from '../stores/environments_store';
import TablePaginationComponent from '../../vue_shared/components/table_pagination'; import tablePagination from '../../vue_shared/components/table_pagination.vue';
import '../../lib/utils/common_utils'; import '../../lib/utils/common_utils';
import '../../vue_shared/vue_resource_interceptor'; import '../../vue_shared/vue_resource_interceptor';
export default { export default {
components: { components: {
'environment-table': EnvironmentTable, environmentTable,
'table-pagination': TablePaginationComponent, tablePagination,
}, },
data() { data() {
......
...@@ -2,7 +2,7 @@ import Visibility from 'visibilityjs'; ...@@ -2,7 +2,7 @@ import Visibility from 'visibilityjs';
import PipelinesService from './services/pipelines_service'; import PipelinesService from './services/pipelines_service';
import eventHub from './event_hub'; import eventHub from './event_hub';
import PipelinesTableComponent from '../vue_shared/components/pipelines_table'; import PipelinesTableComponent from '../vue_shared/components/pipelines_table';
import TablePaginationComponent from '../vue_shared/components/table_pagination'; import tablePagination from '../vue_shared/components/table_pagination.vue';
import EmptyState from './components/empty_state.vue'; import EmptyState from './components/empty_state.vue';
import ErrorState from './components/error_state.vue'; import ErrorState from './components/error_state.vue';
import NavigationTabs from './components/navigation_tabs'; import NavigationTabs from './components/navigation_tabs';
...@@ -18,7 +18,7 @@ export default { ...@@ -18,7 +18,7 @@ export default {
}, },
components: { components: {
'gl-pagination': TablePaginationComponent, tablePagination,
'pipelines-table-component': PipelinesTableComponent, 'pipelines-table-component': PipelinesTableComponent,
'empty-state': EmptyState, 'empty-state': EmptyState,
'error-state': ErrorState, 'error-state': ErrorState,
...@@ -275,12 +275,13 @@ export default { ...@@ -275,12 +275,13 @@ export default {
/> />
</div> </div>
<gl-pagination <table-pagination
v-if="shouldRenderPagination" v-if="shouldRenderPagination"
:pagenum="pagenum" :pagenum="pagenum"
:change="change" :change="change"
:count="state.count.all" :count="state.count.all"
:pageInfo="state.pageInfo"/> :pageInfo="state.pageInfo"
/>
</div> </div>
</div> </div>
`, `,
......
<script>
const PAGINATION_UI_BUTTON_LIMIT = 4; const PAGINATION_UI_BUTTON_LIMIT = 4;
const UI_LIMIT = 6; const UI_LIMIT = 6;
const SPREAD = '...'; const SPREAD = '...';
...@@ -114,22 +115,23 @@ export default { ...@@ -114,22 +115,23 @@ export default {
return items; return items;
}, },
}, },
template: `
<div class="gl-pagination">
<ul class="pagination clearfix">
<li v-for='item in getItems'
:class='{
page: item.page,
prev: item.prev,
next: item.next,
separator: item.separator,
active: item.active,
disabled: item.disabled
}'
>
<a @click="changePage($event)">{{item.title}}</a>
</li>
</ul>
</div>
`,
}; };
</script>
<template>
<div class="gl-pagination">
<ul class="pagination clearfix">
<li
v-for="item in getItems"
:class="{
page: item.page,
prev: item.prev,
next: item.next,
separator: item.separator,
active: item.active,
disabled: item.disabled
}">
<a @click="changePage($event)">{{item.title}}</a>
</li>
</ul>
</div>
</template>
import Vue from 'vue'; import Vue from 'vue';
import paginationComp from '~/vue_shared/components/table_pagination'; import paginationComp from '~/vue_shared/components/table_pagination.vue';
import '~/lib/utils/common_utils'; import '~/lib/utils/common_utils';
describe('Pagination component', () => { describe('Pagination component', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment