From 373a766f5c91c1289ab0f6947dc967f7d77646d5 Mon Sep 17 00:00:00 2001
From: konrad <k@knt.li>
Date: Sat, 16 Oct 2021 15:39:50 +0000
Subject: [PATCH] fix: pagination in vue 3 (#859)

This fixes using Vikunja with pagination.

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/859
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>
---
 src/components/misc/pagination.vue | 89 +++++++++++++++---------------
 1 file changed, 43 insertions(+), 46 deletions(-)

diff --git a/src/components/misc/pagination.vue b/src/components/misc/pagination.vue
index 83d9d0028..958ba2dea 100644
--- a/src/components/misc/pagination.vue
+++ b/src/components/misc/pagination.vue
@@ -1,42 +1,39 @@
 <template>
-    <nav
-        aria-label="pagination"
-        class="pagination is-centered p-4"
-        role="navigation"
-        v-if="totalPages > 1"
-    >
-        <router-link
-            :disabled="currentPage === 1"
-            :to="getRouteForPagination(currentPage - 1)"
-            class="pagination-previous"
-            tag="button">
-            {{ $t('misc.previous') }}
-        </router-link>
-        <router-link
-            :disabled="currentPage === totalPages"
-            :to="getRouteForPagination(currentPage + 1)"
-            class="pagination-next"
-            tag="button">
-            {{ $t('misc.next') }}
-        </router-link>
-        <ul class="pagination-list">
-            <template v-for="(p, i) in pages">
-                <li :key="'page' + i" v-if="p.isEllipsis">
-                    <span class="pagination-ellipsis">&hellip;</span>
-                </li>
-                <li :key="'page' + i" v-else>
-                    <router-link
-                        :aria-label="'Goto page ' + p.number"
-                        :class="{ 'is-current': p.number === currentPage }"
-                        :to="getRouteForPagination(p.number)"
-                        class="pagination-link"
-                    >
-                        {{ p.number }}
-                    </router-link>
-                </li>
-            </template>
-        </ul>
-    </nav>
+	<nav
+		aria-label="pagination"
+		class="pagination is-centered p-4"
+		role="navigation"
+		v-if="totalPages > 1"
+	>
+		<router-link
+			:disabled="currentPage === 1 ? true : null"
+			:to="getRouteForPagination(currentPage - 1)"
+			class="pagination-previous"
+			tag="button">
+			{{ $t('misc.previous') }}
+		</router-link>
+		<router-link
+			:disabled="currentPage === totalPages ? true : null"
+			:to="getRouteForPagination(currentPage + 1)"
+			class="pagination-next"
+			tag="button">
+			{{ $t('misc.next') }}
+		</router-link>
+		<ul class="pagination-list">
+			<li :key="`page-${i}`" v-for="(p, i) in pages">
+				<span class="pagination-ellipsis" v-if="p.isEllipsis">&hellip;</span>
+				<router-link
+					:aria-label="'Goto page ' + p.number"
+					:class="{ 'is-current': p.number === currentPage }"
+					:to="getRouteForPagination(p.number)"
+					class="pagination-link"
+					v-else
+				>
+					{{ p.number }}
+				</router-link>
+			</li>
+		</ul>
+	</nav>
 </template>
 
 <script>
@@ -112,14 +109,14 @@ export default {
 
 <style lang="scss" scoped>
 .pagination {
-  padding-bottom: 1rem;
+	padding-bottom: 1rem;
 
-  .pagination-previous,
-  .pagination-next {
-    &:not(:disabled):hover {
-      background: $scheme-main;
-      cursor: pointer;
-    }
-  }
+	.pagination-previous,
+	.pagination-next {
+		&:not(:disabled):hover {
+			background: $scheme-main;
+			cursor: pointer;
+		}
+	}
 }
 </style>
\ No newline at end of file