BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding pagination to the collection and wishlist pages.

Browse source
This commit is contained in:
Bradley Shellnut 2022-11-10 12:14:28 -06:00
parent da5328844f
commit 87b8e5c073
3 changed files with 95 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/routes/collection/+page.svelte
View file

@ -3,12 +3,18 @@
import { collectionStore } from '$lib/stores/collectionStore';
import type { GameType, SavedGameType } from '$root/lib/types';
import { boredState } from '$root/lib/stores/boredState';
import Pagination from '$root/lib/components/pagination/index.svelte';
import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
import { tick } from 'svelte';
let isOpen: boolean = false;
let gameToRemove: GameType | SavedGameType;
console.log('isOpen', isOpen);
let pageSize = 10;
let page = 1;
$: totalItems = $collectionStore.length;
$: skip = (page - 1) * pageSize;
$: gamesShown = $collectionStore.slice(skip, skip + pageSize);
interface RemoveGameEvent extends Event {
detail: GameType | SavedGameType;
@ -33,6 +39,27 @@
dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
}));
}
async function handleNextPageEvent(event: CustomEvent) {
if (+event?.detail?.page === page + 1) {
page += 1;
}
await tick();
}
async function handlePreviousPageEvent(event: CustomEvent) {
if (+event?.detail?.page === page - 1) {
page -= 1;
}
await tick();
}
async function handlePerPageEvent(event: CustomEvent) {
console.log('Per Page Event called', event.detail);
page = 1;
pageSize = event.detail.pageSize;
await tick();
}
</script>
<svelte:head>
@ -46,13 +73,24 @@
{#if $collectionStore.length === 0}
<h2>No games in your collection</h2>
{:else}
{#each $collectionStore as game (game.id)}
{#each gamesShown as game (game.id)}
<Game
on:handleRemoveWishlist={handleRemoveWishlist}
on:handleRemoveCollection={handleRemoveCollection}
{game}
/>
{/each}
<Pagination
{pageSize}
{page}
{totalItems}
forwardText="Next"
backwardText="Prev"
pageSizes={[10, 25, 50, 100]}
on:nextPageEvent={handleNextPageEvent}
on:previousPageEvent={handlePreviousPageEvent}
on:perPageEvent={handlePerPageEvent}
/>
{/if}
</div>
</div>

18
src/routes/game/[id]/+page.svelte
View file

@ -62,11 +62,19 @@
</div>
<div style="display: grid; place-items: center; gap: 2rem;">
<div class="details">
<p>Year: {game?.year_published}</p>
<p>Players: {game.players}</p>
<p>Playtime: {game.playtime} minutes</p>
<p>Minimum Age: {game.min_age}</p>
{#if game?.price !== 0.0}
{#if game?.year_published}
<p>Year: {game?.year_published}</p>
{/if}
{#if game?.players}
<p>Players: {game.players}</p>
{/if}
{#if game?.playtime}
<p>Playtime: {game.playtime} minutes</p>
{/if}
{#if game?.min_age}
<p>Minimum Age: {game.min_age}</p>
{/if}
{#if +game?.price !== 0.0}
<p>Price: ${game?.price}</p>
{/if}
<LinkWithIcon external ariaLabel={`Board Game Atlas Link for ${game.name}`} url={game.url}>

44
src/routes/wishlist/+page.svelte
View file

@ -3,12 +3,18 @@
import { wishlistStore } from '$lib/stores/wishlistStore';
import type { GameType, SavedGameType } from '$root/lib/types';
import { boredState } from '$root/lib/stores/boredState';
import Pagination from '$root/lib/components/pagination/index.svelte';
import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
import { tick } from 'svelte';
let isOpen: boolean = false;
let gameToRemove: GameType | SavedGameType;
console.log('isOpen', isOpen);
let pageSize = 10;
let page = 1;
$: totalItems = $wishlistStore.length;
$: skip = (page - 1) * pageSize;
$: gamesShown = $wishlistStore.slice(skip, skip + pageSize);
interface RemoveGameEvent extends Event {
detail: GameType | SavedGameType;
@ -29,6 +35,27 @@
dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
}));
}
async function handleNextPageEvent(event: CustomEvent) {
if (+event?.detail?.page === page + 1) {
page += 1;
}
await tick();
}
async function handlePreviousPageEvent(event: CustomEvent) {
if (+event?.detail?.page === page - 1) {
page -= 1;
}
await tick();
}
async function handlePerPageEvent(event: CustomEvent) {
console.log('Per Page Event called', event.detail);
page = 1;
pageSize = event.detail.pageSize;
await tick();
}
</script>
<svelte:head>
@ -42,13 +69,24 @@
{#if $wishlistStore.length === 0}
<h2>No games in your wishlist</h2>
{:else}
{#each $wishlistStore as game}
{#each gamesShown as game}
<Game
on:handleRemoveWishlist={handleRemoveWishlist}
on:handleRemoveCollection={handleRemoveCollection}
{game}
/>
{/each}
<Pagination
{pageSize}
{page}
{totalItems}
forwardText="Next"
backwardText="Prev"
pageSizes={[10, 25, 50, 100]}
on:nextPageEvent={handleNextPageEvent}
on:previousPageEvent={handlePreviousPageEvent}
on:perPageEvent={handlePerPageEvent}
/>
{/if}
</div>
</div>