From 7bd6e80cfbe853b811b38b18ca70771f0fe50999 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20Engstr=C3=B6m?= Date: Wed, 12 Jun 2024 13:01:08 +0200 Subject: [PATCH] LWS-313: Yet another pagination bugfix (#1057) * LWS-313: Pagination predicate bug * Fix sequence reactivity issue * Fix failing pagination test * update changelog --- .../src/lib/components/find/Pagination.svelte | 132 +++++++++++------- lxl-web/src/lib/i18n/locales/en.js | 1 + lxl-web/src/lib/i18n/locales/sv.js | 1 + lxl-web/src/lib/types/search.ts | 1 + lxl-web/src/lib/utils/search.ts | 1 + .../src/routes/(app)/[[lang=lang]]/help/en.md | 1 + .../src/routes/(app)/[[lang=lang]]/help/sv.md | 1 + lxl-web/tests/find.spec.ts | 2 +- 8 files changed, 87 insertions(+), 53 deletions(-) diff --git a/lxl-web/src/lib/components/find/Pagination.svelte b/lxl-web/src/lib/components/find/Pagination.svelte index e5ac63c83..4bbddadf8 100644 --- a/lxl-web/src/lib/components/find/Pagination.svelte +++ b/lxl-web/src/lib/components/find/Pagination.svelte @@ -5,89 +5,107 @@ import BiChevronLeft from '~icons/bi/chevron-left'; export let data: SearchResult; - $: ({ first, last, next, totalItems, itemsPerPage, itemOffset, maxItems } = data); + $: ({ first, last, next, previous, totalItems, itemsPerPage, itemOffset, maxItems } = data); + $: showPagination = data.items.length > 0 && totalItems > itemsPerPage; + $: currentPage = Math.floor(itemOffset / itemsPerPage) + 1; - $: isFirstPage = currentPage === 1; $: lastItem = totalItems > maxItems ? maxItems : totalItems; $: lastPage = Math.ceil(lastItem / itemsPerPage); - $: isLastPage = currentPage === lastPage; // How many pages to display in a sequence (excl first & last) - let sequenceSize = 3; + const numberOfPages = 7; + $: sequenceSize = numberOfPages > lastPage ? lastPage : numberOfPages; - $: if (sequenceSize > lastPage) { - sequenceSize = lastPage; - } - $: sequenceStart = (() => { - if (currentPage + (sequenceSize - 1) >= lastPage) { - return lastPage - (sequenceSize - 1); - } else { - return currentPage; + $: pageSequence = (() => { + let pages = []; + let halfSequence = Math.floor(sequenceSize / 2); + + // exclude first & last pages from sequence + let sequenceStart = currentPage - halfSequence < 2 ? 2 : currentPage - halfSequence; + let sequenceEnd = + currentPage + halfSequence > lastPage - 1 ? lastPage - 1 : currentPage + halfSequence; + if (sequenceStart > sequenceEnd) { + sequenceEnd = sequenceStart; + } + + // add remaining pages to beginning or end + const remainder = sequenceSize - (sequenceEnd - sequenceStart + 1); + if (remainder && sequenceStart > 2) { + sequenceStart = sequenceStart - remainder < 2 ? 2 : sequenceStart - remainder; + } + + if (remainder && sequenceEnd < lastPage - 1) { + sequenceEnd = sequenceEnd + remainder > lastPage - 1 ? lastPage - 1 : sequenceEnd + remainder; } + + for (let i = sequenceStart; i <= sequenceEnd; i++) { + pages.push({ page: i, link: getOffsetLink(itemsPerPage * (i - 1)) }); + } + return pages; })(); - $: pageSequence = [...Array(sequenceSize)].map((el, i) => sequenceStart + i); - $: sequenceEnd = pageSequence[pageSequence.length - 1]; function getOffsetLink(offset: number) { let o = offset < 0 ? 0 : offset; - const params = new URLSearchParams($page.url.searchParams.toString()); - params.set('_offset', o.toString()); - return `${$page.url.pathname}?${params.toString()}`; + return `${first['@id']}&_offset=${o}`; } -{#if data.items.length > 0 && totalItems > itemsPerPage} -