cleanup
This commit is contained in:
parent
e95a2b156b
commit
cdbbce17cb
6 changed files with 27 additions and 111 deletions
|
@ -8,117 +8,38 @@
|
||||||
'count',
|
'count',
|
||||||
'pagenum',
|
'pagenum',
|
||||||
],
|
],
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
nslice: +this.pagenum,
|
|
||||||
endcount: this.last,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
pagenumberstatus(n) {
|
pagenumberstatus(n) {
|
||||||
if (n - 1 === +this.pagenum) return 'active';
|
if (n - 1 === +this.pagenum) return 'active';
|
||||||
return '';
|
return '';
|
||||||
},
|
},
|
||||||
prevstatus() {
|
createSection(n) { return Array.from(Array(n)).map((e, i) => i); },
|
||||||
if (+this.pagenum > 1) return '';
|
|
||||||
return 'disabled';
|
|
||||||
},
|
|
||||||
createSection(n) {
|
|
||||||
return Array.from(Array(n)).map((e, i) => i);
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
dynamicpage() {
|
last() { return Math.ceil(+this.count / 5); },
|
||||||
const section = this.createSection(this.upcount);
|
getItems() {
|
||||||
section.shift();
|
const items = [];
|
||||||
this.nslice = +this.pagenum;
|
const pages = this.createSection(+this.last + 1);
|
||||||
this.endcount = +this.pagenum + 5;
|
pages.shift();
|
||||||
if (+this.pagenum + 5 <= this.last) {
|
|
||||||
return section.slice(+this.pagenum, +this.pagenum + 5);
|
if (+this.pagenum !== 1) items.push({ text: 'Prev' });
|
||||||
}
|
|
||||||
if (+this.pagenum + 5 > this.last) {
|
pages.forEach(i => items.push({ text: i }));
|
||||||
return section.slice(this.last - 5, this.last);
|
|
||||||
}
|
if (+this.pagenum < this.last) items.push({ text: 'Next' });
|
||||||
},
|
if (+this.pagenum !== this.last) items.push({ text: 'Last »' });
|
||||||
paginationsection() {
|
|
||||||
if (this.last < 6 && this.pagenum < 6) {
|
return items;
|
||||||
const pageArray = this.createSection(6);
|
|
||||||
pageArray.shift();
|
|
||||||
return pageArray.slice(0, this.upcount);
|
|
||||||
}
|
|
||||||
return this.dynamicpage;
|
|
||||||
},
|
|
||||||
last() {
|
|
||||||
return Math.ceil(+this.count / 5);
|
|
||||||
},
|
|
||||||
upcount() {
|
|
||||||
return +this.last + 1;
|
|
||||||
},
|
|
||||||
endspread() {
|
|
||||||
if (+this.pagenum < this.last) return true;
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
begspread() {
|
|
||||||
if (+this.pagenum > 5 && +this.pagenum < this.last) return true;
|
|
||||||
return false;
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
template: `
|
template: `
|
||||||
<div class="gl-pagination">
|
<div class="gl-pagination">
|
||||||
<ul class="pagination clearfix" v-for='n in paginationsection'>
|
<ul class="pagination clearfix" v-for='(item, index) in getItems'>
|
||||||
<li
|
<li :class='pagenumberstatus(index + 1)'>
|
||||||
:class='prevstatus(n)'
|
<span @click='changepage($event, last)'>{{item.text}}</span>
|
||||||
v-if='n - 1 === 1 || n - 1 === nslice || n - 1 === this.last - 5'
|
|
||||||
>
|
|
||||||
<span @click='changepage($event, {where: pagenum - 1})'>Prev</span>
|
|
||||||
</li>
|
|
||||||
<li v-if='n - 1 === last && upcount > 4 && begspread'>
|
|
||||||
<span class="gap">…</span>
|
|
||||||
</li>
|
|
||||||
<li :class='pagenumberstatus(n)' v-if='n >= 2'>
|
|
||||||
<span @click='changepage($event)'>{{(n - 1)}}</span>
|
|
||||||
</li>
|
|
||||||
<li v-if='(n === upcount || n === endcount) && +pagenum + 5 !== last'>
|
|
||||||
<span class="gap">…</span>
|
|
||||||
</li>
|
|
||||||
<li
|
|
||||||
class="next"
|
|
||||||
v-if='(n === upcount || n === endcount) && pagenum !== last'
|
|
||||||
>
|
|
||||||
<span @click='changepage($event,{where: +pagenum + 1})'>Next</span>
|
|
||||||
</li>
|
|
||||||
<li
|
|
||||||
class="last"
|
|
||||||
v-if='(n === upcount || n === endcount) && +pagenum !== last'
|
|
||||||
>
|
|
||||||
<span @click='changepage($event, {where: last})'>Last »</span>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
// render(createElement) {
|
|
||||||
// return createElement('div', {
|
|
||||||
// class: {
|
|
||||||
// 'gl-pagination': true,
|
|
||||||
// },
|
|
||||||
// }, [createElement('ul', {
|
|
||||||
// class: {
|
|
||||||
// pagination: true,
|
|
||||||
// clearfix: true,
|
|
||||||
// },
|
|
||||||
// }, this.paginationsection.map((e, i) => {
|
|
||||||
// if (!i) return createElement('li', [createElement('span', {
|
|
||||||
// class: {
|
|
||||||
// prev: this.prevstatus,
|
|
||||||
// },
|
|
||||||
// }, 'Prev')]);
|
|
||||||
// if (i) {
|
|
||||||
// return createElement('li',
|
|
||||||
// [createElement('span', i)]
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
// })),
|
|
||||||
// ]);
|
|
||||||
// },
|
|
||||||
});
|
});
|
||||||
})(window.gl || (window.gl = {}));
|
})(window.gl || (window.gl = {}));
|
||||||
|
|
|
@ -34,7 +34,7 @@
|
||||||
<vue-pipelines
|
<vue-pipelines
|
||||||
:scope='scope'
|
:scope='scope'
|
||||||
:store='store'
|
:store='store'
|
||||||
:count='90'
|
:count='count'
|
||||||
>
|
>
|
||||||
</vue-pipelines>
|
</vue-pipelines>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,13 +3,6 @@
|
||||||
|
|
||||||
((gl) => {
|
((gl) => {
|
||||||
gl.VuePipelineHead = Vue.extend({
|
gl.VuePipelineHead = Vue.extend({
|
||||||
components: {
|
|
||||||
'vue-running-icon': gl.VueRunningIcon,
|
|
||||||
},
|
|
||||||
props: [
|
|
||||||
'pipeline',
|
|
||||||
'pipelineurl',
|
|
||||||
],
|
|
||||||
template: `
|
template: `
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
|
@ -35,10 +35,12 @@
|
||||||
shortsha(pipeline) {
|
shortsha(pipeline) {
|
||||||
return pipeline.sha.slice(0, 8);
|
return pipeline.sha.slice(0, 8);
|
||||||
},
|
},
|
||||||
changepage(event, page = {}) {
|
changepage(event, last) {
|
||||||
if (page) this.pagenum = +event.target.innerText;
|
const text = event.target.innerText;
|
||||||
if (page.where) this.pagenum = +page.where;
|
if (typeof +text === 'number') this.pagenum = +text;
|
||||||
if (page.where) this.pagenum = +page.where;
|
if (text === 'Last »') this.pagenum = last;
|
||||||
|
if (text === 'Next') this.pagnum = +this.pagenum + 1;
|
||||||
|
if (text === 'Prev') this.pagenum = +this.pagenum - 1;
|
||||||
|
|
||||||
window.history.pushState({}, null, `?p=${this.pagenum}`);
|
window.history.pushState({}, null, `?p=${this.pagenum}`);
|
||||||
clearInterval(this.intervalId);
|
clearInterval(this.intervalId);
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
// eventually clearInterval(this.intervalId)
|
// eventually clearInterval(this.intervalId)
|
||||||
this.intervalId = setInterval(() => {
|
this.intervalId = setInterval(() => {
|
||||||
goFetch();
|
goFetch();
|
||||||
}, 60000);
|
}, 3000);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
})(window.gl || (window.gl = {}));
|
})(window.gl || (window.gl = {}));
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
((gl) => {
|
((gl) => {
|
||||||
gl.VueFailedScope = Vue.extend({
|
gl.VueFailedScope = Vue.extend({
|
||||||
components: {
|
components: {
|
||||||
'vue-failed-icon': gl.VuePendingIcon,
|
'vue-failed-icon': gl.VueFailedIcon,
|
||||||
},
|
},
|
||||||
props: [
|
props: [
|
||||||
'scope',
|
'scope',
|
||||||
|
|
Loading…
Reference in a new issue