Merge pull request #1149 from thunderstore-io/pagination-improvements

Improve pagination support for large page counts

src/components/navigation/PaginationButtons.vue

@@ -0,0 +1,58 @@
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import { truncatePagination } from "../../utils/Pagination";
+
+@Component({})
+export default class PaginationButtons extends Vue {
+    @Prop({ required: true })
+    private currentPage!: number;
+
+    @Prop({ required: true })
+    private pageCount!: number;
+
+    @Prop({ required: true })
+    private contextSize!: number;
+
+    @Prop({ required: true })
+    private onClick!: (pageIndex: number) => void;
+
+    @Watch("currentPage")
+    @Watch("pageCount")
+    @Watch("contextSize")
+    visibleButtons() {
+        return truncatePagination({
+            currentPage: this.currentPage,
+            pageCount: this.pageCount,
+            contextSize: this.contextSize,
+        });
+    }
+}
+</script>
+
+<template>
+<nav class="pagination">
+    <ul class="pagination-list">
+        <li
+            v-for="button in visibleButtons()"
+            :key="`pagination-${button.index}`"
+        >
+            <a
+                :class="[
+                    'pagination-link',
+                    'flex-centered',
+                    {'is-current': button.index === currentPage}
+                ]"
+                @click="onClick(button.index)"
+            >{{button.title}}</a>
+        </li>
+    </ul>
+</nav>
+</template>
+
+<style scoped lang="scss">
+.flex-centered {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>

src/components/views/OnlineModView.vue

@@ -59,15 +59,12 @@
             </p>
         </div>
         <br/>
-        <div class="pagination">
-            <div class="smaller-font">
-                <a v-for="index in getPaginationSize()" :key="`pagination-${index}`"
-                    :class="['pagination-link', {'is-current': index === pageNumber}]"
-                    @click="updatePageNumber(index)">
-                    {{index}}
-                </a>
-            </div>
-        </div>
+        <PaginationButtons
+            :current-page="pageNumber"
+            :page-count="getPaginationSize()"
+            :context-size="3"
+            :on-click="updatePageNumber"
+        />
     </div>
 </template>
 
@@ -84,15 +81,17 @@ import OnlineModListProvider from '../../providers/components/loaders/OnlineModL
 import ArrayUtils from '../../utils/ArrayUtils';
 import debounce from 'lodash.debounce';
 import SearchUtils from '../../utils/SearchUtils';
+import PaginationButtons from "../navigation/PaginationButtons.vue";
 
 @Component({
     components: {
         OnlineModList: OnlineModListProvider.provider,
+        PaginationButtons,
     }
 })
 
 export default class OnlineModView extends Vue {
-    readonly pageSize = 140;
+    readonly pageSize = 40;
     pagedThunderstoreModList: ThunderstoreMod[] = [];
     pageNumber = 1;
     searchableThunderstoreModList: ThunderstoreMod[] = [];

src/utils/Pagination.ts

@@ -0,0 +1,54 @@
+
+export type PaginationButton = {
+    index: number;
+    title: string;
+}
+
+export function truncatePagination(props: {
+    currentPage: number,
+    pageCount: number,
+    contextSize: number,
+}): PaginationButton[] {
+    const result = [];
+
+    if (props.currentPage - props.contextSize > 1) {
+        result.push({
+            index: 1,
+            title: "1"
+        });
+    }
+    if (props.currentPage - props.contextSize - 1 > 1) {
+        result.push({
+            index: props.currentPage - props.contextSize - 1,
+            title: "...",
+        });
+    }
+
+    for (
+        let i = props.currentPage - props.contextSize;
+        i <= props.currentPage + props.contextSize;
+        i++
+    ) {
+        if (i > 0 && i <= props.pageCount) {
+            result.push({
+                index: i,
+                title: i.toString(),
+            });
+        }
+    }
+
+    if (props.currentPage + props.contextSize + 1 < props.pageCount) {
+        result.push({
+            index: props.currentPage + props.contextSize + 1,
+            title: "...",
+        });
+    }
+    if (props.currentPage + props.contextSize < props.pageCount) {
+        result.push({
+            index: props.pageCount,
+            title: props.pageCount.toString(),
+        });
+    }
+
+    return result;
+}