Merge branch '31349-pipelines-vue' into 'master'
Use vue file for table pagination component Closes #31349 See merge request !11210
This commit is contained in:
commit
bb3b62af6e
5 changed files with 34 additions and 31 deletions
|
@ -1,17 +1,17 @@
|
|||
<script>
|
||||
/* global Flash */
|
||||
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 TablePaginationComponent from '../../vue_shared/components/table_pagination';
|
||||
import tablePagination from '../../vue_shared/components/table_pagination.vue';
|
||||
import '../../lib/utils/common_utils';
|
||||
import eventHub from '../event_hub';
|
||||
|
||||
export default {
|
||||
|
||||
components: {
|
||||
'environment-table': EnvironmentTable,
|
||||
'table-pagination': TablePaginationComponent,
|
||||
environmentTable,
|
||||
tablePagination,
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
|
@ -1,16 +1,16 @@
|
|||
<script>
|
||||
/* global Flash */
|
||||
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 TablePaginationComponent from '../../vue_shared/components/table_pagination';
|
||||
import tablePagination from '../../vue_shared/components/table_pagination.vue';
|
||||
import '../../lib/utils/common_utils';
|
||||
import '../../vue_shared/vue_resource_interceptor';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'environment-table': EnvironmentTable,
|
||||
'table-pagination': TablePaginationComponent,
|
||||
environmentTable,
|
||||
tablePagination,
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
|
@ -2,7 +2,7 @@ import Visibility from 'visibilityjs';
|
|||
import PipelinesService from './services/pipelines_service';
|
||||
import eventHub from './event_hub';
|
||||
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 ErrorState from './components/error_state.vue';
|
||||
import NavigationTabs from './components/navigation_tabs';
|
||||
|
@ -18,7 +18,7 @@ export default {
|
|||
},
|
||||
|
||||
components: {
|
||||
'gl-pagination': TablePaginationComponent,
|
||||
tablePagination,
|
||||
'pipelines-table-component': PipelinesTableComponent,
|
||||
'empty-state': EmptyState,
|
||||
'error-state': ErrorState,
|
||||
|
@ -275,12 +275,13 @@ export default {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<gl-pagination
|
||||
<table-pagination
|
||||
v-if="shouldRenderPagination"
|
||||
:pagenum="pagenum"
|
||||
:change="change"
|
||||
:count="state.count.all"
|
||||
:pageInfo="state.pageInfo"/>
|
||||
:pageInfo="state.pageInfo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
<script>
|
||||
const PAGINATION_UI_BUTTON_LIMIT = 4;
|
||||
const UI_LIMIT = 6;
|
||||
const SPREAD = '...';
|
||||
|
@ -114,22 +115,23 @@ export default {
|
|||
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>
|
|
@ -1,5 +1,5 @@
|
|||
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';
|
||||
|
||||
describe('Pagination component', () => {
|
||||
|
|
Loading…
Reference in a new issue