diff --git a/changes/changelog.d/84.bugfix b/changes/changelog.d/84.bugfix new file mode 100644 index 000000000..2d7e08da0 --- /dev/null +++ b/changes/changelog.d/84.bugfix @@ -0,0 +1 @@ +Smarter pagination which takes a fixed size (#84) diff --git a/front/src/components/Pagination.vue b/front/src/components/Pagination.vue index 83b386fde..71813a18a 100644 --- a/front/src/components/Pagination.vue +++ b/front/src/components/Pagination.vue @@ -1,23 +1,23 @@ @@ -32,7 +32,38 @@ export default { }, computed: { pages: function () { - return _.range(1, this.maxPage + 1) + let range = 2 + let current = this.current + let beginning = _.range(1, Math.min(this.maxPage, 1 + range)) + let middle = _.range(Math.max(1, current - range + 1), Math.min(this.maxPage, current + range)) + let end = _.range(this.maxPage, Math.max(1, this.maxPage - range)) + let allowed = beginning.concat(middle, end) + allowed = _.uniq(allowed) + allowed = _.sortBy(allowed, [(e) => { return e }]) + let final = [] + allowed.forEach(p => { + let last = final.slice(-1)[0] + let consecutive = true + if (last === 'skip') { + consecutive = false + } else { + if (!last) { + consecutive = true + } else { + consecutive = last + 1 === p + } + } + if (consecutive) { + final.push(p) + } else { + if (p !== 'skip') { + final.push('skip') + final.push(p) + } + } + }) + console.log(final) + return final }, maxPage: function () { return Math.ceil(this.total / this.paginateBy)