From 81ef66fafc4a1d305413a196659af41c64c5bee0 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Tue, 18 Feb 2025 13:14:42 +0100
Subject: [PATCH] refactor(ui): use secondary buttons in pagination

---
 front/src/components/ui/Pagination.vue | 28 +++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/front/src/components/ui/Pagination.vue b/front/src/components/ui/Pagination.vue
index fb9a59597..dfbd3b801 100644
--- a/front/src/components/ui/Pagination.vue
+++ b/front/src/components/ui/Pagination.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useElementSize } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { isMobileView } from '~/composables/screen'
 import { preventNonNumeric } from '~/utils/event-validators'
 
@@ -50,6 +50,10 @@ const setPage = () => {
   if (goTo.value == null) return
   page.value = Math.min(pages, Math.max(1, goTo.value))
 }
+
+watch(page, (newPage) => {
+  goTo.value = newPage
+})
 </script>
 
 <template>
@@ -58,7 +62,7 @@ const setPage = () => {
     <ul class="pages">
       <li>
         <Button low-height min-content @click="page -= 1" :disabled="page <= 1" :aria-label="t('vui.aria.pagination.gotoPrevious')"
-          outline icon="bi-chevron-left">
+          secondary icon="bi-chevron-left">
           <span v-if="!isSmall">{{ t('vui.pagination.previous') }}</span>
         </Button>
       </li>
@@ -67,7 +71,7 @@ const setPage = () => {
         <li>
           <Button square-small v-if="i <= pages && i > 0 && pages > 3" @click="page = i"
             :aria-label="page !== i ? t('vui.aria.pagination.gotoPage', i) : t('vui.aria.pagination.currentPage', page)"
-            :outline="page !== i">
+            :secondary="page !== i">
             {{ i }}
           </Button>
         </li>
@@ -77,7 +81,7 @@ const setPage = () => {
         <li>
           <Button square-small @click="page = 1"
             :aria-label="page !== 1 ? t('vui.aria.pagination.gotoPage', page) : t('vui.aria.pagination.currentPage', page)"
-            :outline="page !== 1">
+            :secondary="page !== 1">
             1
           </Button>
         </li>
@@ -90,7 +94,7 @@ const setPage = () => {
         <li>
           <Button square-small @click="page = pages"
             :aria-label="page !== pages ? t('vui.aria.pagination.gotoPage', page) : t('vui.aria.pagination.currentPage', page)"
-            :outline="page !== pages">
+            :secondary="page !== pages">
             {{ pages }}
           </Button>
         </li>
@@ -98,7 +102,7 @@ const setPage = () => {
 
       <li>
         <Button low-height min-content @click="page += 1" :disabled="page >= pages" :aria-label="t('vui.aria.pagination.gotoNext')"
-           outline icon="right bi-chevron-right">
+           secondary icon="right bi-chevron-right">
           <span v-if="!isSmall">{{ t('vui.pagination.next') }}</span>
 
         </Button>
@@ -108,9 +112,15 @@ const setPage = () => {
 <!-- TODO: Move number input functionality into `Input` component -->
     <div class="goto">
       {{ t('vui.go-to') }}
-      <Input :placeholder="page.toString()" @keyup.enter="setPage" @keydown="preventNonNumeric"
-        inputmode="numeric" pattern="[0-9]*"
-        v-model="goTo" />
+      <Input
+        :placeholder="page.toString()"
+        @click.stop
+        @keyup.enter="setPage"
+        @keydown="preventNonNumeric"
+        inputmode="numeric"
+        pattern="[0-9]*"
+        v-model="goTo"
+      />
     </div>
   </nav>
 </template>