Made the page paginator more smart.

frontend/pages/history/index.vue

@@ -4,6 +4,17 @@
       <span class="title is-4">History</span>
       <div class="is-pulled-right">
         <div class="field is-grouped">
+          <div class="control">
+            <div class="select">
+              <select v-model="perpage" :disabled="isLoading" @change="loadContent(1,false)">
+                <option value="" disabled>Per page</option>
+                <option v-for="i in [50,100,200,400,500]" :key="`perpage-${i}`" :value="i">
+                  {{ i }}
+                </option>
+              </select>
+            </div>
+          </div>
+
           <p class="control">
             <button class="button is-primary" @click="searchForm = !searchForm">
               <span class="icon">
@@ -42,7 +53,8 @@
         <div class="control">
           <div class="select">
             <select v-model="page" @change="loadContent(page)" :disabled="isLoading">
-              <option v-for="(item, index) in makePagination()" :key="index" :value="item.page">
+              <option v-for="(item, index) in makePagination(page, last_page)" :key="index" :value="item.page"
+                      :disabled="item.page === 0">
                 {{ item.text }}
               </option>
             </select>
@@ -209,7 +221,7 @@
 import request from '~/utils/request.js'
 import moment from 'moment'
 import Message from '~/components/Message.vue'
-import {formatDuration, makeName, makeSearchLink, notification} from '~/utils/index.js'
+import {formatDuration, makeName, makePagination, makeSearchLink, notification} from '~/utils/index.js'
 
 const route = useRoute()
 const router = useRouter()
@@ -318,25 +330,6 @@ const loadContent = async (pageNumber, fromPopState = false) => {
   }
 }
 
-const makePagination = () => {
-  let pagination = []
-  let pages = Math.ceil(total.value / perpage.value)
-
-  if (pages < 2) {
-    return pagination
-  }
-
-  for (let i = 1; i <= pages; i++) {
-    pagination.push({
-      page: i,
-      text: `Page #${i}`,
-      selected: parseInt(page.value) === i,
-    })
-  }
-
-  return pagination
-}
-
 const clearSearch = () => {
   query.value = ''
   searchForm.value = false

frontend/pages/parity.vue

@@ -49,7 +49,7 @@
         <div class="control">
           <div class="select">
             <select v-model="page" @change="loadContent(page)" :disabled="isLoading">
-              <option v-for="(item, index) in makePagination()" :key="index" :value="item.page">
+              <option v-for="(item, index) in makePagination(page, last_page)" :key="index" :value="item.page">
                 {{ item.text }}
               </option>
             </select>
@@ -171,7 +171,7 @@
 <script setup>
 import request from '~/utils/request.js'
 import Message from '~/components/Message.vue'
-import {makeName, makeSearchLink, notification} from '~/utils/index.js'
+import {makeName, makePagination, makeSearchLink, notification} from '~/utils/index.js'
 import moment from 'moment'
 import {useStorage} from '@vueuse/core'
 
@@ -251,24 +251,6 @@ const loadContent = async (pageNumber, fromPopState = false) => {
   }
 }
 
-const makePagination = () => {
-  let pagination = []
-  let pages = Math.ceil(total.value / perpage.value)
-
-  if (pages < 2) {
-    return pagination
-  }
-
-  for (let i = 1; i <= pages; i++) {
-    pagination.push({
-      page: i,
-      text: `Page #${i}`,
-      selected: parseInt(page.value) === i,
-    })
-  }
-
-  return pagination
-}
 const deleteData = async () => {
   if (isDeleting.value) {
     return

frontend/utils/index.js

@@ -359,6 +359,56 @@ const makeName = (item, asMovie = false) => {
     })
 }
 
+/**
+ * Make pagination
+ *
+ * @param {number} current
+ * @param {number} last
+ * @param {number} delta
+ *
+ * @returns {Array}
+ */
+const makePagination = (current, last, delta = 5) => {
+    let pagination = []
+
+    if (last < 2) {
+        return pagination
+    }
+
+    const strR = '-'.repeat(9 + `${last}`.length)
+
+    const left = current - delta,
+        right = current + delta + 1;
+
+    for (let i = 1; i <= last; i++) {
+        if (i === 1 || i === last || (i >= left && i < right)) {
+            if (i === left && i > 2) {
+                pagination.push({
+                    page: 0,
+                    text: strR,
+                    selected: false,
+                });
+            }
+
+            pagination.push({
+                page: i,
+                text: `Page #${i}`,
+                selected: i === current
+            });
+
+            if (i === right - 1 && i < last - 1) {
+                pagination.push({
+                    page: 0,
+                    text: strR,
+                    selected: false,
+                });
+            }
+        }
+    }
+
+    return pagination;
+}
+
 export {
     ag_set,
     ag,
@@ -374,4 +424,5 @@ export {
     makeSearchLink,
     dEvent,
     makeName,
+    makePagination,
 }