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 47cf5183a..ca40cdd07 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)
       }