Use vue file for table pagination component
This commit is contained in:
parent
f222d81c47
commit
5b3fb0d41f
|
@ -1,17 +1,17 @@
|
||||||
<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() {
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
<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';
|
||||||
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 {
|
||||||
},
|
},
|
||||||
|
|
||||||
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 {
|
||||||
/>
|
/>
|
||||||
</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>
|
||||||
`,
|
`,
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
<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 {
|
||||||
return items;
|
return items;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
template: `
|
};
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
<div class="gl-pagination">
|
<div class="gl-pagination">
|
||||||
<ul class="pagination clearfix">
|
<ul class="pagination clearfix">
|
||||||
<li v-for='item in getItems'
|
<li
|
||||||
:class='{
|
v-for="item in getItems"
|
||||||
|
:class="{
|
||||||
page: item.page,
|
page: item.page,
|
||||||
prev: item.prev,
|
prev: item.prev,
|
||||||
next: item.next,
|
next: item.next,
|
||||||
separator: item.separator,
|
separator: item.separator,
|
||||||
active: item.active,
|
active: item.active,
|
||||||
disabled: item.disabled
|
disabled: item.disabled
|
||||||
}'
|
}">
|
||||||
>
|
|
||||||
<a @click="changePage($event)">{{item.title}}</a>
|
<a @click="changePage($event)">{{item.title}}</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
`,
|
</template>
|
||||||
};
|
|
|
@ -1,5 +1,5 @@
|
||||||
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', () => {
|
||||||
|
|
Loading…
Reference in New Issue