feat: improve pagination (#662) (#663)

frontend/src/components/Pagination.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    required: true
+  },
+  totalCount: {
+    type: Number,
+    required: true
+  },
+  pageSize: {
+    type: Number,
+    required: true
+  },
+  onGotoPage: {
+    type: Function,
+    required: true
+  },
+  onNextPage: {
+    type: Function,
+    required: true
+  },
+  onPrevPage: {
+    type: Function,
+    required: true
+  },
+  hasNextPage: {
+    type: Boolean,
+    required: true
+  },
+  hasPrevPage: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const totalPages = computed(() => Math.ceil(props.totalCount / props.pageSize));
+
+const pages = computed(() => {
+  const current = props.currentPage;
+  const last = totalPages.value;
+  const delta = 2; // Number of pages to show before and after current page
+  
+  const range = [];
+  const rangeWithDots = [];
+
+  // If total pages is small, just show all pages
+  if (last <= 7) {
+    for (let i = 1; i <= last; i++) {
+      rangeWithDots.push({ type: 'page', value: i });
+    }
+    return rangeWithDots;
+  }
+
+  // Calculate the range around the current page
+  let start = Math.max(2, current - delta);
+  let end = Math.min(last - 1, current + delta);
+
+  // Adjust range to always show a consistent number of pages if possible
+  if (current <= delta + 2) {
+    end = 2 + delta * 2;
+  } else if (current >= last - delta - 1) {
+    start = last - delta * 2 - 1;
+  }
+
+  // Add dots before the range if needed
+  if (start > 2) {
+    rangeWithDots.push({ type: 'page', value: 1 });
+    rangeWithDots.push({ type: 'dots', value: 'dots-start' });
+  } else {
+    for (let i = 1; i < start; i++) {
+      rangeWithDots.push({ type: 'page', value: i });
+    }
+  }
+
+  // Add the central range
+  for (let i = start; i <= end; i++) {
+    rangeWithDots.push({ type: 'page', value: i });
+  }
+
+  // Add dots after the range if needed
+  if (end < last - 1) {
+    rangeWithDots.push({ type: 'dots', value: 'dots-end' });
+    rangeWithDots.push({ type: 'page', value: last });
+  } else {
+    for (let i = end + 1; i <= last; i++) {
+      rangeWithDots.push({ type: 'page', value: i });
+    }
+  }
+
+  return rangeWithDots;
+});
+</script>
+
+<template>
+  <ul class="pagination pagination-sm mb-0" v-if="totalPages > 1">
+    <li :class="{ disabled: !hasPrevPage }" class="page-item">
+      <a class="page-link" href="#" @click.prevent="hasPrevPage && onPrevPage()">&laquo;</a>
+    </li>
+
+    <li v-for="item in pages" :key="item.type === 'page' ? item.value : item.value" :class="{ active: currentPage === item.value, disabled: item.type === 'dots' }" class="page-item">
+      <a v-if="item.type === 'page'" class="page-link" href="#" @click.prevent="onGotoPage(item.value)">{{ item.value }}</a>
+      <span v-else class="page-link">...</span>
+    </li>
+
+    <li :class="{ disabled: !hasNextPage }" class="page-item">
+      <a class="page-link" href="#" @click.prevent="hasNextPage && onNextPage()">&raquo;</a>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.page-link {
+  cursor: pointer;
+}
+.page-item.disabled .page-link {
+  cursor: default;
+}
+</style>

frontend/src/stores/audit.js

@@ -11,7 +11,6 @@ export const auditStore = defineStore('audit', {
     filter: "",
     pageSize: 10,
     pageOffset: 0,
-    pages: [],
     fetching: false,
   }),
   getters: {
@@ -41,33 +40,22 @@ export const auditStore = defineStore('audit', {
     afterPageSizeChange() {
       // reset pageOffset to avoid problems with new page sizes
       this.pageOffset = 0
-      this.calculatePages()
-    },
-    calculatePages() {
-      let pageCounter = 1;
-      this.pages = []
-      for (let i = 0; i < this.FilteredCount; i+=this.pageSize) {
-        this.pages.push(pageCounter++)
-      }
     },
     gotoPage(page) {
       this.pageOffset = (page-1) * this.pageSize
-
-      this.calculatePages()
     },
     nextPage() {
-      this.pageOffset += this.pageSize
-
-      this.calculatePages()
+      if (this.hasNextPage) {
+        this.pageOffset += this.pageSize
+      }
     },
     previousPage() {
-      this.pageOffset -= this.pageSize
-
-      this.calculatePages()
+      if (this.hasPrevPage) {
+        this.pageOffset -= this.pageSize
+      }
     },
     setEntries(entries) {
       this.entries = entries
-      this.calculatePages()
       this.fetching = false
     },
     async LoadEntries() {

frontend/src/stores/peers.js

@@ -19,7 +19,6 @@ export const peerStore = defineStore('peers', {
     filter: "",
     pageSize: 10,
     pageOffset: 0,
-    pages: [],
     fetching: false,
     sortKey: 'IsConnected', // Default sort key
     sortOrder: -1, // 1 for ascending, -1 for descending
@@ -87,33 +86,22 @@ export const peerStore = defineStore('peers', {
     afterPageSizeChange() {
       // reset pageOffset to avoid problems with new page sizes
       this.pageOffset = 0
-      this.calculatePages()
-    },
-    calculatePages() {
-      let pageCounter = 1;
-      this.pages = []
-      for (let i = 0; i < this.FilteredCount; i+=this.pageSize) {
-        this.pages.push(pageCounter++)
-      }
     },
     gotoPage(page) {
       this.pageOffset = (page-1) * this.pageSize
-
-      this.calculatePages()
     },
     nextPage() {
-      this.pageOffset += this.pageSize
-
-      this.calculatePages()
+      if (this.hasNextPage) {
+        this.pageOffset += this.pageSize
+      }
     },
     previousPage() {
-      this.pageOffset -= this.pageSize
-
-      this.calculatePages()
+      if (this.hasPrevPage) {
+        this.pageOffset -= this.pageSize
+      }
     },
     setPeers(peers) {
       this.peers = peers
-      this.calculatePages()
       this.fetching = false
       this.trafficStats = {}
     },

frontend/src/stores/profile.js

@@ -20,7 +20,6 @@ export const profileStore = defineStore('profile', {
     filter: "",
     pageSize: 10,
     pageOffset: 0,
-    pages: [],
     fetching: false,
     sortKey: 'IsConnected', // Default sort key
     sortOrder: -1, // 1 for ascending, -1 for descending
@@ -80,29 +79,19 @@ export const profileStore = defineStore('profile', {
     afterPageSizeChange() {
       // reset pageOffset to avoid problems with new page sizes
       this.pageOffset = 0
-      this.calculatePages()
-    },
-    calculatePages() {
-      let pageCounter = 1;
-      this.pages = []
-      for (let i = 0; i < this.FilteredPeerCount; i+=this.pageSize) {
-        this.pages.push(pageCounter++)
-      }
     },
     gotoPage(page) {
       this.pageOffset = (page-1) * this.pageSize
-
-      this.calculatePages()
     },
     nextPage() {
-      this.pageOffset += this.pageSize
-
-      this.calculatePages()
+      if (this.hasNextPage) {
+        this.pageOffset += this.pageSize
+      }
     },
     previousPage() {
-      this.pageOffset -= this.pageSize
-
-      this.calculatePages()
+      if (this.hasPrevPage) {
+        this.pageOffset -= this.pageSize
+      }
     },
     setPeers(peers) {
       this.peers = peers

frontend/src/stores/users.js

@@ -12,7 +12,6 @@ export const userStore = defineStore('users', {
     filter: "",
     pageSize: 10,
     pageOffset: 0,
-    pages: [],
     fetching: false,
   }),
   getters: {
@@ -43,33 +42,22 @@ export const userStore = defineStore('users', {
     afterPageSizeChange() {
       // reset pageOffset to avoid problems with new page sizes
       this.pageOffset = 0
-      this.calculatePages()
-    },
-    calculatePages() {
-      let pageCounter = 1;
-      this.pages = []
-      for (let i = 0; i < this.FilteredCount; i+=this.pageSize) {
-        this.pages.push(pageCounter++)
-      }
     },
     gotoPage(page) {
       this.pageOffset = (page-1) * this.pageSize
-
-      this.calculatePages()
     },
     nextPage() {
-      this.pageOffset += this.pageSize
-
-      this.calculatePages()
+      if (this.hasNextPage) {
+        this.pageOffset += this.pageSize
+      }
     },
     previousPage() {
-      this.pageOffset -= this.pageSize
-
-      this.calculatePages()
+      if (this.hasPrevPage) {
+        this.pageOffset -= this.pageSize
+      }
     },
     setUsers(users) {
       this.users = users
-      this.calculatePages()
       this.fetching = false
     },
     setUserPeers(peers) {

frontend/src/views/AuditView.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { onMounted } from "vue";
 import {auditStore} from "@/stores/audit";
+import Pagination from "@/components/Pagination.vue";
 
 const audit = auditStore()
 
@@ -60,28 +61,24 @@ onMounted(async () => {
     </table>
   </div>
   <hr>
-  <div class="mt-3">
     <div class="row">
-      <div class="col-6">
-        <ul class="pagination pagination-sm">
-          <li :class="{disabled:audit.pageOffset===0}" class="page-item">
-            <a class="page-link" @click="audit.previousPage">&laquo;</a>
-          </li>
-
-          <li v-for="page in audit.pages" :key="page" :class="{active:audit.currentPage===page}" class="page-item">
-            <a class="page-link" @click="audit.gotoPage(page)">{{page}}</a>
-          </li>
-
-          <li :class="{disabled:!audit.hasNextPage}" class="page-item">
-            <a class="page-link" @click="audit.nextPage">&raquo;</a>
-          </li>
-        </ul>
+      <div class="col-12 col-md-6">
+        <Pagination
+            :currentPage="audit.currentPage"
+            :totalCount="audit.FilteredCount"
+            :pageSize="audit.pageSize"
+            :hasNextPage="audit.hasNextPage"
+            :hasPrevPage="audit.hasPrevPage"
+            :onGotoPage="audit.gotoPage"
+            :onNextPage="audit.nextPage"
+            :onPrevPage="audit.previousPage"
+        />
       </div>
-      <div class="col-6">
+      <div class="col-12 col-md-6">
         <div class="form-group row">
-          <label class="col-sm-6 col-form-label text-end" for="paginationSelector">{{ $t('general.pagination.size') }}:</label>
+          <label class="col-sm-6 col-form-label text-md-end" for="paginationSelector">{{ $t('general.pagination.size') }}:</label>
           <div class="col-sm-6">
-            <select id="paginationSelector" v-model.number="audit.pageSize" class="form-select" @click="audit.afterPageSizeChange()">
+            <select id="paginationSelector" v-model.number="audit.pageSize" class="form-select" @change="audit.afterPageSizeChange()">
               <option value="10">10</option>
               <option value="25">25</option>
               <option value="50">50</option>
@@ -92,5 +89,4 @@ onMounted(async () => {
         </div>
       </div>
     </div>
-  </div>
 </template>

frontend/src/views/InterfaceView.vue

@@ -1,9 +1,10 @@
 <script setup>
-import PeerViewModal from "../components/PeerViewModal.vue";
-import PeerEditModal from "../components/PeerEditModal.vue";
-import PeerMultiCreateModal from "../components/PeerMultiCreateModal.vue";
-import InterfaceEditModal from "../components/InterfaceEditModal.vue";
-import InterfaceViewModal from "../components/InterfaceViewModal.vue";
+import PeerViewModal from "@/components/PeerViewModal.vue";
+import PeerEditModal from "@/components/PeerEditModal.vue";
+import PeerMultiCreateModal from "@/components/PeerMultiCreateModal.vue";
+import InterfaceEditModal from "@/components/InterfaceEditModal.vue";
+import InterfaceViewModal from "@/components/InterfaceViewModal.vue";
+import Pagination from "@/components/Pagination.vue";
 
 import {computed, onMounted, ref} from "vue";
 import {peerStore} from "@/stores/peers";
@@ -482,26 +483,23 @@ onMounted(async () => {
   <hr v-if="interfaces.Count!==0">
   <div v-if="interfaces.Count!==0" class="mt-3">
     <div class="row">
-      <div class="col-6">
-        <ul class="pagination pagination-sm">
-          <li :class="{disabled:peers.pageOffset===0}" class="page-item">
-            <a class="page-link" @click="peers.previousPage">&laquo;</a>
-          </li>
-
-          <li v-for="page in peers.pages" :key="page" :class="{active:peers.currentPage===page}" class="page-item">
-            <a class="page-link" @click="peers.gotoPage(page)">{{page}}</a>
-          </li>
-
-          <li :class="{disabled:!peers.hasNextPage}" class="page-item">
-            <a class="page-link" @click="peers.nextPage">&raquo;</a>
-          </li>
-        </ul>
+      <div class="col-12 col-md-6">
+        <Pagination
+            :currentPage="peers.currentPage"
+            :totalCount="peers.FilteredCount"
+            :pageSize="peers.pageSize"
+            :hasNextPage="peers.hasNextPage"
+            :hasPrevPage="peers.hasPrevPage"
+            :onGotoPage="peers.gotoPage"
+            :onNextPage="peers.nextPage"
+            :onPrevPage="peers.previousPage"
+        />
       </div>
-      <div class="col-6">
+      <div class="col-12 col-md-6">
         <div class="form-group row">
-          <label class="col-sm-6 col-form-label text-end" for="paginationSelector">{{ $t('general.pagination.size') }}:</label>
+          <label class="col-sm-6 col-form-label text-md-end" for="paginationSelector">{{ $t('general.pagination.size') }}:</label>
           <div class="col-sm-6">
-            <select id="paginationSelector" v-model.number="peers.pageSize" class="form-select" @click="peers.afterPageSizeChange()">
+            <select id="paginationSelector" v-model.number="peers.pageSize" class="form-select" @change="peers.afterPageSizeChange()">
               <option value="10">10</option>
               <option value="25">25</option>
               <option value="50">50</option>

frontend/src/views/ProfileView.vue

@@ -6,6 +6,7 @@ import { useI18n } from "vue-i18n";
 import { profileStore } from "@/stores/profile";
 import { peerStore } from "@/stores/peers";
 import UserPeerEditModal from "@/components/UserPeerEditModal.vue";
+import Pagination from "@/components/Pagination.vue";
 import { settingsStore } from "@/stores/settings";
 import { humanFileSize } from "@/helpers/utils";
 
@@ -66,7 +67,6 @@ onMounted(async () => {
   await profile.LoadPeers()
   await profile.LoadStats()
   await profile.LoadInterfaces()
-  await profile.calculatePages(); // Forces to show initial page number
 })
 
 </script>
@@ -185,36 +185,33 @@ onMounted(async () => {
   <hr>
   <div class="mt-3">
     <div class="row">
-      <div class="col-6">
-        <ul class="pagination pagination-sm">
-          <li :class="{ disabled: profile.pageOffset === 0 }" class="page-item">
-            <a class="page-link" @click="profile.previousPage">&laquo;</a>
-          </li>
-
-          <li v-for="page in profile.pages" :key="page" :class="{ active: profile.currentPage === page }" class="page-item">
-            <a class="page-link" @click="profile.gotoPage(page)">{{ page }}</a>
-          </li>
-
-          <li :class="{ disabled: !profile.hasNextPage }" class="page-item">
-            <a class="page-link" @click="profile.nextPage">&raquo;</a>
-          </li>
-        </ul>
+      <div class="col-12 col-md-6">
+        <Pagination
+            :currentPage="profile.currentPage"
+            :totalCount="profile.FilteredPeerCount"
+            :pageSize="profile.pageSize"
+            :hasNextPage="profile.hasNextPage"
+            :hasPrevPage="profile.hasPrevPage"
+            :onGotoPage="profile.gotoPage"
+            :onNextPage="profile.nextPage"
+            :onPrevPage="profile.previousPage"
+        />
       </div>
-      <div class="col-6">
+      <div class="col-12 col-md-6">
         <div class="form-group row">
-          <label class="col-sm-6 col-form-label text-end" for="paginationSelector">
+          <label class="col-sm-6 col-form-label text-md-end" for="paginationSelector">
             {{ $t('general.pagination.size')}}:
           </label>
           <div class="col-sm-6">
-            <select id="paginationSelector" v-model.number="profile.pageSize" class="form-select" @click="profile.afterPageSizeChange()">
+            <select id="paginationSelector" v-model.number="profile.pageSize" class="form-select" @change="profile.afterPageSizeChange()">
               <option value="10">10</option>
               <option value="25">25</option>
               <option value="50">50</option>
-            <option value="100">100</option>
-            <option value="999999999">{{ $t('general.pagination.all') }}</option>
-          </select>
+              <option value="100">100</option>
+              <option value="999999999">{{ $t('general.pagination.all') }}</option>
+            </select>
+          </div>
         </div>
       </div>
     </div>
-  </div>
 </div></template>

frontend/src/views/UserView.vue

@@ -1,8 +1,9 @@
 <script setup>
 import {userStore} from "@/stores/users";
 import {ref, onMounted, computed} from "vue";
-import UserEditModal from "../components/UserEditModal.vue";
-import UserViewModal from "../components/UserViewModal.vue";
+import UserEditModal from "@/components/UserEditModal.vue";
+import UserViewModal from "@/components/UserViewModal.vue";
+import Pagination from "@/components/Pagination.vue";
 import {useI18n} from "vue-i18n";
 
 const users = userStore()
@@ -165,28 +166,24 @@ onMounted(() => {
     </table>
   </div>
   <hr>
-  <div class="mt-3">
     <div class="row">
-      <div class="col-6">
-        <ul class="pagination pagination-sm">
-          <li :class="{disabled:users.pageOffset===0}" class="page-item">
-            <a class="page-link" @click="users.previousPage">&laquo;</a>
-          </li>
-
-          <li v-for="page in users.pages" :key="page" :class="{active:users.currentPage===page}" class="page-item">
-            <a class="page-link" @click="users.gotoPage(page)">{{page}}</a>
-          </li>
-
-          <li :class="{disabled:!users.hasNextPage}" class="page-item">
-            <a class="page-link" @click="users.nextPage">&raquo;</a>
-          </li>
-        </ul>
+      <div class="col-12 col-md-6">
+        <Pagination
+            :currentPage="users.currentPage"
+            :totalCount="users.FilteredCount"
+            :pageSize="users.pageSize"
+            :hasNextPage="users.hasNextPage"
+            :hasPrevPage="users.hasPrevPage"
+            :onGotoPage="users.gotoPage"
+            :onNextPage="users.nextPage"
+            :onPrevPage="users.previousPage"
+        />
       </div>
-      <div class="col-6">
+      <div class="col-12 col-md-6">
         <div class="form-group row">
-          <label class="col-sm-6 col-form-label text-end" for="paginationSelector">{{ $t('general.pagination.size') }}:</label>
+          <label class="col-sm-6 col-form-label text-md-end" for="paginationSelector">{{ $t('general.pagination.size') }}:</label>
           <div class="col-sm-6">
-            <select id="paginationSelector" v-model.number="users.pageSize" class="form-select" @click="users.afterPageSizeChange()">
+            <select id="paginationSelector" v-model.number="users.pageSize" class="form-select" @change="users.afterPageSizeChange()">
               <option value="10">10</option>
               <option value="25">25</option>
               <option value="50">50</option>
@@ -197,5 +194,4 @@ onMounted(() => {
         </div>
       </div>
     </div>
-  </div>
 </template>