diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index ed0d6f35ea6..fb53a84bd9c 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -1,5 +1,5 @@ /* global Vue, gl */ -/* eslint-disable no-param-reassign */ +/* eslint-disable no-param-reassign, no-plusplus */ ((gl) => { gl.VueGlPagination = Vue.extend({ @@ -26,61 +26,64 @@ computed: { last() { return Math.ceil(+this.count / 5); }, getItems() { + const total = +this.count; + const page = +this.pagenum; const items = []; - const pages = this.createSection(+this.last + 1); - pages.shift(); - if (+this.pagenum > 1) items.push({ text: 'First', first: true }); + if (page > 1) { + items.push({ title: '<< First', where: 1 }); + } - items.push({ text: 'Prev', prev: true, class: this.prevstatus() }); + if (page > 1) { + items.push({ title: 'Prev', where: page - 1 }); + } else { + items.push({ title: 'Prev', where: page - 1, disabled: true }); + } - pages.forEach(i => items.push({ text: i, number: true })); + if (page > 6) { + items.push({ title: '...', separator: true }); + } - let nextDisabled = false; - if (+this.pagenum === this.last) { nextDisabled = true; } - items.push({ text: 'Next', next: true, disabled: nextDisabled }); + const start = Math.max(page - 4, 1); + const end = Math.min(page + 4, total); - if (+this.pagenum !== this.last) items.push({ text: 'Last »', last: true }); + 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 >= 1) { + items.push({ title: 'Last >>', where: total }); + } return items; }, }, template: `