2016-11-02 20:54:04 -04:00
|
|
|
/* global Vue, gl */
|
2016-11-08 16:57:16 -05:00
|
|
|
/* eslint-disable no-param-reassign, no-plusplus */
|
2016-11-02 20:54:04 -04:00
|
|
|
|
2016-12-08 19:41:59 -05:00
|
|
|
//= require ./param_helper.js.es6
|
|
|
|
|
2016-11-02 20:54:04 -04:00
|
|
|
((gl) => {
|
2016-11-18 17:26:49 -05:00
|
|
|
const PAGINATION_UI_BUTTON_LIMIT = 4;
|
|
|
|
const SPREAD = '...';
|
|
|
|
const PREV = 'Prev';
|
|
|
|
const NEXT = 'Next';
|
|
|
|
const FIRST = '<< First';
|
|
|
|
const LAST = 'Last >>';
|
|
|
|
|
2016-11-02 20:54:04 -04:00
|
|
|
gl.VueGlPagination = Vue.extend({
|
2016-12-15 12:28:17 -05:00
|
|
|
props: {
|
2016-12-15 12:32:44 -05:00
|
|
|
|
|
|
|
/**
|
|
|
|
This function will take the information given by the pagination component
|
|
|
|
And make a new API call from the parent
|
|
|
|
|
|
|
|
Here is an example `change` method:
|
|
|
|
|
|
|
|
change(pagenum, apiScope) {
|
|
|
|
window.history.pushState({}, null, `?scope=${apiScope}&p=${pagenum}`);
|
|
|
|
clearInterval(this.timeLoopInterval);
|
|
|
|
this.pageRequest = true;
|
|
|
|
this.store.fetchDataLoop.call(this, Vue, pagenum, this.scope, apiScope);
|
|
|
|
},
|
|
|
|
*/
|
|
|
|
|
2016-12-15 12:28:17 -05:00
|
|
|
change: {
|
|
|
|
type: Function,
|
|
|
|
required: true,
|
|
|
|
},
|
2016-12-15 12:32:44 -05:00
|
|
|
|
|
|
|
/**
|
|
|
|
pageInfo will come from the headers of the API call
|
|
|
|
in the `.then` clause of the VueResource API call
|
|
|
|
there should be a function that contructs the pageInfo for this component
|
|
|
|
|
|
|
|
This is an example:
|
|
|
|
|
|
|
|
const pageInfo = (headers) => {
|
|
|
|
const values = {};
|
|
|
|
values.perPage = +headers['X-Per-Page'];
|
|
|
|
values.page = +headers['X-Page'];
|
|
|
|
values.total = +headers['X-Total'];
|
|
|
|
values.totalPages = +headers['X-Total-Pages'];
|
|
|
|
values.nextPage = +headers['X-Next-Page'];
|
|
|
|
values.previousPage = +headers['X-Prev-Page'];
|
|
|
|
return values;
|
|
|
|
};
|
|
|
|
*/
|
|
|
|
|
2016-12-15 12:28:17 -05:00
|
|
|
pageInfo: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
2016-12-08 19:37:00 -05:00
|
|
|
methods: {
|
2016-12-15 11:27:57 -05:00
|
|
|
changePage(e) {
|
2016-12-15 12:21:45 -05:00
|
|
|
let pageNum = this.pageInfo.page;
|
2016-12-08 19:41:59 -05:00
|
|
|
let apiScope = gl.getParameterByName('scope');
|
2016-12-08 19:37:00 -05:00
|
|
|
|
|
|
|
if (!apiScope) apiScope = 'all';
|
|
|
|
|
|
|
|
const text = e.target.innerText;
|
|
|
|
const { totalPages, nextPage, previousPage } = this.pageInfo;
|
|
|
|
|
2016-12-15 12:00:30 -05:00
|
|
|
if (text === SPREAD) {
|
|
|
|
return;
|
|
|
|
} else if (text === LAST) {
|
2016-12-15 12:21:45 -05:00
|
|
|
pageNum = totalPages;
|
2016-12-15 12:00:30 -05:00
|
|
|
} else if (text === NEXT) {
|
2016-12-15 12:21:45 -05:00
|
|
|
pageNum = nextPage;
|
2016-12-15 12:00:30 -05:00
|
|
|
} else if (text === PREV) {
|
2016-12-15 12:21:45 -05:00
|
|
|
pageNum = previousPage;
|
2016-12-15 12:00:30 -05:00
|
|
|
} else if (text === FIRST) {
|
2016-12-15 12:21:45 -05:00
|
|
|
pageNum = 1;
|
2016-12-15 12:00:30 -05:00
|
|
|
} else {
|
2016-12-15 12:21:45 -05:00
|
|
|
pageNum = +text;
|
2016-12-15 12:00:30 -05:00
|
|
|
}
|
2016-12-08 19:37:00 -05:00
|
|
|
|
2016-12-15 12:21:45 -05:00
|
|
|
this.change(pageNum, apiScope);
|
2016-12-08 19:37:00 -05:00
|
|
|
},
|
|
|
|
},
|
2016-11-03 00:41:51 -04:00
|
|
|
computed: {
|
2016-12-07 15:35:26 -05:00
|
|
|
prev() {
|
|
|
|
return this.pageInfo.previousPage;
|
|
|
|
},
|
|
|
|
next() {
|
|
|
|
return this.pageInfo.nextPage;
|
2016-11-08 17:03:25 -05:00
|
|
|
},
|
2016-11-08 14:23:29 -05:00
|
|
|
getItems() {
|
2016-12-07 15:35:26 -05:00
|
|
|
const total = this.pageInfo.totalPages;
|
|
|
|
const page = this.pageInfo.page;
|
2016-11-08 14:23:29 -05:00
|
|
|
const items = [];
|
|
|
|
|
2016-12-07 15:35:26 -05:00
|
|
|
if (page > 1) items.push({ title: FIRST });
|
2016-11-08 16:57:16 -05:00
|
|
|
|
|
|
|
if (page > 1) {
|
2016-12-07 15:35:26 -05:00
|
|
|
items.push({ title: PREV });
|
2016-11-08 16:57:16 -05:00
|
|
|
} else {
|
2016-12-07 15:35:26 -05:00
|
|
|
items.push({ title: PREV, disabled: true });
|
2016-11-08 16:57:16 -05:00
|
|
|
}
|
2016-11-08 14:23:29 -05:00
|
|
|
|
2016-11-18 17:26:49 -05:00
|
|
|
if (page > 6) items.push({ title: SPREAD, separator: true });
|
2016-11-08 14:23:29 -05:00
|
|
|
|
2016-11-18 17:26:49 -05:00
|
|
|
const start = Math.max(page - PAGINATION_UI_BUTTON_LIMIT, 1);
|
|
|
|
const end = Math.min(page + PAGINATION_UI_BUTTON_LIMIT, total);
|
2016-11-08 16:23:16 -05:00
|
|
|
|
2016-11-08 16:57:16 -05:00
|
|
|
for (let i = start; i <= end; i++) {
|
|
|
|
const isActive = i === page;
|
2016-12-07 15:35:26 -05:00
|
|
|
items.push({ title: i, active: isActive });
|
2016-11-08 16:57:16 -05:00
|
|
|
}
|
2016-11-08 16:23:16 -05:00
|
|
|
|
2016-11-18 17:26:49 -05:00
|
|
|
if (total - page > PAGINATION_UI_BUTTON_LIMIT) {
|
|
|
|
items.push({ title: SPREAD, separator: true });
|
|
|
|
}
|
2016-11-08 16:57:16 -05:00
|
|
|
|
|
|
|
if (page === total) {
|
2016-12-07 15:35:26 -05:00
|
|
|
items.push({ title: NEXT, disabled: true });
|
2016-11-08 16:57:16 -05:00
|
|
|
} else if (total - page >= 1) {
|
2016-12-07 15:35:26 -05:00
|
|
|
items.push({ title: NEXT });
|
2016-11-08 16:57:16 -05:00
|
|
|
}
|
|
|
|
|
2016-12-07 15:35:26 -05:00
|
|
|
if (total - page >= 1) items.push({ title: LAST });
|
2016-11-08 14:23:29 -05:00
|
|
|
|
|
|
|
return items;
|
2016-11-03 13:20:15 -04:00
|
|
|
},
|
2016-11-03 00:41:51 -04:00
|
|
|
},
|
2016-11-02 20:54:04 -04:00
|
|
|
template: `
|
|
|
|
<div class="gl-pagination">
|
2016-11-08 16:57:16 -05:00
|
|
|
<ul class="pagination clearfix" v-for='item in getItems'>
|
2016-11-08 16:23:16 -05:00
|
|
|
<li
|
2016-11-08 16:57:16 -05:00
|
|
|
:class='{
|
|
|
|
separator: item.separator,
|
|
|
|
active: item.active,
|
|
|
|
disabled: item.disabled
|
|
|
|
}'
|
2016-11-08 16:23:16 -05:00
|
|
|
>
|
2016-12-15 11:27:57 -05:00
|
|
|
<a
|
|
|
|
@click="changePage($event)"
|
2016-11-08 16:57:16 -05:00
|
|
|
>
|
|
|
|
{{item.title}}
|
2016-12-15 11:27:57 -05:00
|
|
|
</a>
|
2016-11-08 16:23:16 -05:00
|
|
|
</li>
|
2016-11-02 20:54:04 -04:00
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
`,
|
|
|
|
});
|
|
|
|
})(window.gl || (window.gl = {}));
|