Asset list pagination: Skip pages to prevent overflow

hernihistorie · Jan 15, 2025 · 4a5e630 · 4a5e630
1 parent 5612bc2
commit 4a5e630
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 14 deletions.
diff --git a/src/lib/AssetList.svelte b/src/lib/AssetList.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <div id="assetList" class="assets">
-    <div style="display: flex; justify-content: space-between;">
+    <div class="heading-pagination" style="display: flex; justify-content: space-between;">
         {#if props.withHeading}
             <h3 id="Predmety">Předměty</h3>
         {/if}
@@ -42,4 +42,10 @@
     .assets {
         min-height: 100vh;
     }
+
+    @media (max-width: 800px) {
+        .heading-pagination {
+            flex-direction: column;
+        }
+    }
 </style>
diff --git a/src/lib/AssetListPagination.svelte b/src/lib/AssetListPagination.svelte
@@ -1,34 +1,79 @@
 <script lang="ts">
-	import { PAGE_SIZE } from '$src/lib/rhinventory_api';
+    import { PAGE_SIZE } from '$src/lib/rhinventory_api';
 
     let {
         assetPage = $bindable<number>(),
         assetCount = $bindable<number | null>()
     } = $props();
+
+    function getVisiblePages(currentPage: number, totalPages: number) {
+        const pages: (number | null)[] = [];
+        
+        if (totalPages <= 7) {
+            return Array.from({length: totalPages}, (_, i) => i + 1);
+        }
+
+        // Always add first two pages
+        pages.push(1, 2);
+
+        // Add dots after 2 if current page is far from start
+        if (currentPage > 4) {
+            pages.push(null);
+        }
+
+        // Add pages around current page
+        const start = Math.max(3, currentPage - 1);
+        const end = Math.min(totalPages - 2, currentPage + 1);
+        
+        for (let i = start; i <= end; i++) {
+            if (!pages.includes(i)) {
+                pages.push(i);
+            }
+        }
+
+        // Add dots before last two pages if current page is far from end
+        if (currentPage < totalPages - 3) {
+            pages.push(null);
+        }
+
+        // Always add last two pages
+        pages.push(totalPages - 1, totalPages);
+
+        return pages;
+    }
 </script>
 
 <div class="pagination">
     {#if assetCount && assetCount > PAGE_SIZE}
-        <!-- Strana {assetPage} z {assetsData.assetCount / PAGE_SIZE} -->
-        {#each {length: (assetCount + PAGE_SIZE-1) / PAGE_SIZE}, i}
-            <button
-                class={{'active': assetPage==i+1}}
-                onclick={() => {
-                    assetPage = i+1;
-                    document.querySelector('#assetList')?.scrollIntoView({block: 'start', behavior: 'instant'});
-                }}
-            >
-                {i+1}
-            </button>
+        {#each getVisiblePages(assetPage, Math.ceil(assetCount / PAGE_SIZE)) as pageNum}
+            {#if pageNum === null}
+                <span class="dots">...</span>
+            {:else}
+                <button
+                    class:active={assetPage === pageNum}
+                    onclick={() => {
+                        assetPage = pageNum;
+                        document.querySelector('#assetList')?.scrollIntoView({block: 'start', behavior: 'instant'});
+                    }}
+                >
+                    {pageNum}
+                </button>
+            {/if}
         {/each}
     {/if}
 </div>
 
 <style>
+    .dots {
+        display: inline-block;
+        padding: 0 0.5em;
+        user-select: none;
+    }
     .pagination {
         display: flex;
         justify-content: flex-end;
         align-items: center;
+        flex-wrap: wrap;
     }
 
     button {

diff --git a/src/lib/rhinventory_api.ts b/src/lib/rhinventory_api.ts
@@ -1,6 +1,6 @@
 import type { AssetData } from "$src/types";
 
-export const PAGE_SIZE = 15
+export const PAGE_SIZE = 20
 
 type RHInventoryAPIAsset = {
     id: number;