constant variable hardcoding
This commit is contained in:
parent
758cdf54fe
commit
d0a5428a38
4 changed files with 42 additions and 23 deletions
|
@ -2,6 +2,14 @@
|
|||
/* eslint-disable no-param-reassign, no-plusplus */
|
||||
|
||||
((gl) => {
|
||||
const PAGINATION_SIZE = 30;
|
||||
const PAGINATION_UI_BUTTON_LIMIT = 4;
|
||||
const SPREAD = '...';
|
||||
const PREV = 'Prev';
|
||||
const NEXT = 'Next';
|
||||
const FIRST = '<< First';
|
||||
const LAST = 'Last >>';
|
||||
|
||||
gl.VueGlPagination = Vue.extend({
|
||||
props: [
|
||||
'changepage',
|
||||
|
@ -10,40 +18,42 @@
|
|||
],
|
||||
computed: {
|
||||
last() {
|
||||
return Math.ceil(+this.count / 30);
|
||||
return Math.ceil(+this.count / PAGINATION_SIZE);
|
||||
},
|
||||
getItems() {
|
||||
const total = +this.last;
|
||||
const page = +this.pagenum;
|
||||
const items = [];
|
||||
|
||||
if (page > 1) items.push({ title: '<< First', where: 1 });
|
||||
if (page > 1) items.push({ title: FIRST, where: 1 });
|
||||
|
||||
if (page > 1) {
|
||||
items.push({ title: 'Prev', where: page - 1 });
|
||||
items.push({ title: PREV, where: page - 1 });
|
||||
} else {
|
||||
items.push({ title: 'Prev', where: page - 1, disabled: true });
|
||||
items.push({ title: PREV, where: page - 1, disabled: true });
|
||||
}
|
||||
|
||||
if (page > 6) items.push({ title: '...', separator: true });
|
||||
if (page > 6) items.push({ title: SPREAD, separator: true });
|
||||
|
||||
const start = Math.max(page - 4, 1);
|
||||
const end = Math.min(page + 4, total);
|
||||
const start = Math.max(page - PAGINATION_UI_BUTTON_LIMIT, 1);
|
||||
const end = Math.min(page + PAGINATION_UI_BUTTON_LIMIT, total);
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
const isActive = i === page;
|
||||
items.push({ title: i, active: isActive, where: i });
|
||||
}
|
||||
|
||||
if (total - page > 4) items.push({ title: '...', separator: true });
|
||||
|
||||
if (page === total) {
|
||||
items.push({ title: 'Next', where: page + 1, disabled: true });
|
||||
} else if (total - page >= 1) {
|
||||
items.push({ title: 'Next', where: page + 1 });
|
||||
if (total - page > PAGINATION_UI_BUTTON_LIMIT) {
|
||||
items.push({ title: SPREAD, separator: true });
|
||||
}
|
||||
|
||||
if (total - page >= 1) items.push({ title: 'Last >>', where: total });
|
||||
if (page === total) {
|
||||
items.push({ title: NEXT, where: page + 1, disabled: true });
|
||||
} else if (total - page >= 1) {
|
||||
items.push({ title: NEXT, where: page + 1 });
|
||||
}
|
||||
|
||||
if (total - page >= 1) items.push({ title: LAST, where: total });
|
||||
|
||||
return items;
|
||||
},
|
||||
|
|
|
@ -29,7 +29,7 @@
|
|||
store: new gl.PipelineStore(),
|
||||
},
|
||||
components: {
|
||||
'vue-pipelines': gl.VuePipeLines,
|
||||
'vue-pipelines': gl.VuePipelines,
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
|
|
|
@ -2,7 +2,13 @@
|
|||
/* eslint-disable no-param-reassign, no-bitwise*/
|
||||
|
||||
((gl) => {
|
||||
gl.VuePipeLines = Vue.extend({
|
||||
const SPREAD = '...';
|
||||
const PREV = 'Prev';
|
||||
const NEXT = 'Next';
|
||||
const FIRST = '<< First';
|
||||
const LAST = 'Last >>';
|
||||
|
||||
gl.VuePipelines = Vue.extend({
|
||||
components: {
|
||||
runningPipeline: gl.VueRunningPipeline,
|
||||
pipelineActions: gl.VuePipelineActions,
|
||||
|
@ -41,12 +47,12 @@
|
|||
methods: {
|
||||
changepage(e, last) {
|
||||
const text = e.target.innerText;
|
||||
if (text === '...') return;
|
||||
if (text === SPREAD) return;
|
||||
if (/^-?[\d.]+(?:e-?\d+)?$/.test(text)) this.pagenum = +text;
|
||||
if (text === 'Last >>') this.pagenum = last;
|
||||
if (text === 'Next') this.pagenum = +this.pagenum + 1;
|
||||
if (text === 'Prev') this.pagenum = +this.pagenum - 1;
|
||||
if (text === '<< First') this.pagenum = 1;
|
||||
if (text === LAST) this.pagenum = last;
|
||||
if (text === NEXT) this.pagenum = +this.pagenum + 1;
|
||||
if (text === PREV) this.pagenum = +this.pagenum - 1;
|
||||
if (text === FIRST) this.pagenum = 1;
|
||||
|
||||
window.history.pushState({}, null, `?p=${this.pagenum}`);
|
||||
clearInterval(this.intervalId);
|
||||
|
|
|
@ -2,6 +2,9 @@
|
|||
/* eslint-disable no-param-reassign */
|
||||
|
||||
((gl) => {
|
||||
const PAGINATION_LIMIT = 31;
|
||||
const SLICE_LIMIT = 29;
|
||||
|
||||
class PipelineUpdater {
|
||||
constructor(pipelines) {
|
||||
this.pipelines = pipelines;
|
||||
|
@ -11,8 +14,8 @@
|
|||
});
|
||||
};
|
||||
this.currentPageSlicer = (update) => {
|
||||
if (update.length <= 30) return update;
|
||||
return update.slice(0, 29);
|
||||
if (update.length < PAGINATION_LIMIT) return update;
|
||||
return update.slice(0, SLICE_LIMIT);
|
||||
};
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue