From 2e71ddbffc9b666d35cbac2584796ee298ab6c48 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Sat, 14 Apr 2018 16:02:11 +0200
Subject: [PATCH] Pagination now support a compact mode
---
front/src/components/Pagination.vue | 30 ++++++++++++++++-------------
1 file changed, 17 insertions(+), 13 deletions(-)
diff --git a/front/src/components/Pagination.vue b/front/src/components/Pagination.vue
index 47cf5183..ca40cdd0 100644
--- a/front/src/components/Pagination.vue
+++ b/front/src/components/Pagination.vue
@@ -1,25 +1,25 @@
<template>
- <div class="ui pagination borderless menu">
- <a
- v-if="current - 1 >= 1"
+ <div class="ui pagination menu">
+ <div
+ :disabled="current - 1 < 1"
@click="selectPage(current - 1)"
- :class="[{'disabled': current - 1 < 1}, 'item']"><i class="angle left icon"></i></a>
- <template>
- <a
+ :class="[{'disabled': current - 1 < 1}, 'item']"><i class="angle left icon"></i></div>
+ <template v-if="!compact">
+ <div
v-if="page !== 'skip'"
v-for="page in pages"
@click="selectPage(page)"
:class="[{'active': page === current}, 'item']">
{{ page }}
- </a>
- <a v-else class="disabled item">
+ </div>
+ <div v-else class="disabled item">
...
- </a>
+ </div>
</template>
- <a
- v-if="current + 1 <= maxPage"
+ <div
+ :disabled="current + 1 > maxPage"
@click="selectPage(current + 1)"
- :class="[{'disabled': current + 1 > maxPage}, 'item']"><i class="angle right icon"></i></a>
+ :class="[{'disabled': current + 1 > maxPage}, 'item']"><i class="angle right icon"></i></div>
</div>
</template>
@@ -30,7 +30,8 @@ export default {
props: {
current: {type: Number, default: 1},
paginateBy: {type: Number, default: 25},
- total: {type: Number}
+ total: {type: Number},
+ compact: {type: Boolean, default: false}
},
computed: {
pages: function () {
@@ -72,6 +73,9 @@ export default {
},
methods: {
selectPage: function (page) {
+ if (page > this.maxPage || page < 1) {
+ return
+ }
if (this.current !== page) {
this.$emit('page-changed', page)
}
--
GitLab