2016-11-02 20:54:04 -04:00
|
|
|
/* global Vue, gl */
|
|
|
|
/* eslint-disable no-param-reassign */
|
|
|
|
|
|
|
|
((gl) => {
|
|
|
|
gl.VueGlPagination = Vue.extend({
|
|
|
|
props: [
|
|
|
|
'changepage',
|
|
|
|
'pages',
|
2016-11-03 00:41:51 -04:00
|
|
|
'count',
|
2016-11-03 13:20:15 -04:00
|
|
|
'pagenum',
|
2016-11-02 20:54:04 -04:00
|
|
|
],
|
2016-11-03 13:20:15 -04:00
|
|
|
methods: {
|
|
|
|
pagenumberstatus(n) {
|
2016-11-03 13:42:12 -04:00
|
|
|
if (n - 1 === +this.pagenum) return 'active';
|
2016-11-03 13:20:15 -04:00
|
|
|
return '';
|
|
|
|
},
|
2016-11-06 13:17:18 -05:00
|
|
|
prevstatus() {
|
|
|
|
if (+this.pagenum > 1) return '';
|
|
|
|
return 'prev disabled';
|
|
|
|
},
|
2016-11-03 13:20:15 -04:00
|
|
|
},
|
2016-11-03 00:41:51 -04:00
|
|
|
computed: {
|
2016-11-03 13:34:18 -04:00
|
|
|
last() {
|
2016-11-03 17:38:51 -04:00
|
|
|
return Math.ceil(+this.count / 5);
|
2016-11-03 13:34:18 -04:00
|
|
|
},
|
2016-11-03 00:41:51 -04:00
|
|
|
lastpage() {
|
2016-11-03 13:20:15 -04:00
|
|
|
return `pipelines?p=${this.last}`;
|
|
|
|
},
|
|
|
|
upcount() {
|
|
|
|
return +this.last + 1;
|
|
|
|
},
|
|
|
|
prev() {
|
|
|
|
if (this.pagenum === 1) return 1;
|
|
|
|
return this.pagenum - 1;
|
|
|
|
},
|
2016-11-03 00:41:51 -04:00
|
|
|
},
|
2016-11-02 20:54:04 -04:00
|
|
|
template: `
|
|
|
|
<div class="gl-pagination">
|
2016-11-03 13:34:18 -04:00
|
|
|
<ul class="pagination clearfix" v-for='n in upcount'>
|
2016-11-06 13:17:18 -05:00
|
|
|
<li :class='prevstatus(n)' v-if='n === 1'>
|
|
|
|
<span @click='changepage($event, {where: pagenum - 1})'>Prev</span>
|
2016-11-02 20:54:04 -04:00
|
|
|
</li>
|
2016-11-03 13:20:15 -04:00
|
|
|
<li :class='pagenumberstatus(n)' v-else>
|
2016-11-06 13:17:18 -05:00
|
|
|
<span @click='changepage($event)'>{{(n - 1)}}</span>
|
2016-11-02 20:54:04 -04:00
|
|
|
</li>
|
2016-11-03 17:38:51 -04:00
|
|
|
<!--
|
|
|
|
take a slice of current array (up to 5)
|
|
|
|
if at end make dots dissapear
|
|
|
|
if in second slice or more make dots appear in the front
|
|
|
|
-->
|
2016-11-06 13:17:18 -05:00
|
|
|
<li v-if='n === upcount && upcount > 4'>
|
2016-11-03 13:42:12 -04:00
|
|
|
<span class="gap">…</span>
|
2016-11-03 13:32:22 -04:00
|
|
|
</li>
|
2016-11-06 13:17:18 -05:00
|
|
|
<li class="next" v-if='n === upcount && pagenum !== last'>
|
|
|
|
<span @click='changepage($event, {where: pagenum + 1})'>
|
|
|
|
Next
|
|
|
|
</span>
|
2016-11-02 20:54:04 -04:00
|
|
|
</li>
|
2016-11-03 13:32:22 -04:00
|
|
|
<li class="last" v-if='n === upcount && pagenum !== last'>
|
2016-11-06 13:17:18 -05:00
|
|
|
<span @click='changepage($event, {last: last})'>Last »</span>
|
2016-11-02 20:54:04 -04:00
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
`,
|
|
|
|
});
|
|
|
|
})(window.gl || (window.gl = {}));
|