kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Use vue file for table pagination component

This commit is contained in:
Filipa Lacerda 2017-05-10 08:00:50 +00:00 committed by Phil Hughes
parent f222d81c47
commit 5b3fb0d41f
5 changed files with 34 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/environments/components/environment.vue
View File

@ -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() {

8
app/assets/javascripts/environments/folder/environments_folder_view.vue
View File

@ -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() {

9
app/assets/javascripts/pipelines/pipelines.js
View File

@ -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>
`, `,

38
app/assets/javascripts/vue_shared/components/table_pagination.js → app/assets/javascripts/vue_shared/components/table_pagination.vue
View File

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

2
spec/javascripts/vue_shared/components/table_pagination_spec.js
View File

@ -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', () => {