From d11ce9615a7417c1627be69f38afeb1dc34d9e31 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Sun, 13 Mar 2022 11:22:48 +0100
Subject: [PATCH] Client - fix pagination

---
 .../src/components/Common/Pagination.vue       | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/fittrackee_client/src/components/Common/Pagination.vue b/fittrackee_client/src/components/Common/Pagination.vue
index 33c8366f..f93584e9 100644
--- a/fittrackee_client/src/components/Common/Pagination.vue
+++ b/fittrackee_client/src/components/Common/Pagination.vue
@@ -3,13 +3,15 @@
     <ul class="pagination">
       <li class="page-prev" :class="{ disabled: !pagination.has_prev }">
         <router-link
+          v-slot="{ navigate }"
           class="page-link"
           :to="{ path, query: getQuery(pagination.page, -1) }"
-          :event="pagination.has_prev ? 'click' : ''"
           :disabled="!pagination.has_prev"
         >
-          <i class="fa fa-chevron-left" aria-hidden="true" />
-          {{ $t('api.PAGINATION.PREVIOUS') }}
+          <slot @click="pagination.has_next ? navigate : null">
+            {{ $t('api.PAGINATION.PREVIOUS') }}
+            <i class="fa fa-chevron-left" aria-hidden="true" />
+          </slot>
         </router-link>
       </li>
       <li
@@ -29,13 +31,15 @@
       </li>
       <li class="page-next" :class="{ disabled: !pagination.has_next }">
         <router-link
+          v-slot="{ navigate }"
           class="page-link"
           :to="{ path, query: getQuery(pagination.page, 1) }"
-          :event="pagination.has_next ? 'click' : ''"
           :disabled="!pagination.has_next"
         >
-          {{ $t('api.PAGINATION.NEXT') }}
-          <i class="fa fa-chevron-right" aria-hidden="true" />
+          <slot @click="pagination.has_next ? navigate : null">
+            {{ $t('api.PAGINATION.NEXT') }}
+            <i class="fa fa-chevron-right" aria-hidden="true" />
+          </slot>
         </router-link>
       </li>
     </ul>
@@ -95,6 +99,8 @@
         &.disabled {
           cursor: default;
           a {
+            cursor: default;
+            pointer-events: none;
             color: var(--disabled-color);
           }
         }