diff options
| -rw-r--r-- | src/routes/[username]/transactions/[...page]/+page.server.js | 14 | ||||
| -rw-r--r-- | src/routes/[username]/transactions/[...page]/+page.svelte (renamed from src/routes/[username]/transactions/+page.svelte) | 31 |
2 files changed, 40 insertions, 5 deletions
diff --git a/src/routes/[username]/transactions/[...page]/+page.server.js b/src/routes/[username]/transactions/[...page]/+page.server.js new file mode 100644 index 00000000..d84c895a --- /dev/null +++ b/src/routes/[username]/transactions/[...page]/+page.server.js @@ -0,0 +1,14 @@ +import { get, auth } from '$lib/utils'; + +let offset = 25; + +export async function load({ params, request }) { + let page = parseInt(params.page || 1); + let transactions = await get('/payments', auth(request)); + let total = transactions.length; + let pages = new Array(Math.ceil(total / offset)); + let i = (page - 1) * offset; + transactions = transactions.slice(i, i + offset); + + return { total, transactions, page, pages }; +} diff --git a/src/routes/[username]/transactions/+page.svelte b/src/routes/[username]/transactions/[...page]/+page.svelte index 5a132394..a5209ed8 100644 --- a/src/routes/[username]/transactions/+page.svelte +++ b/src/routes/[username]/transactions/[...page]/+page.svelte @@ -1,12 +1,15 @@ <script> import { AppHeader } from '$comp'; - import { user, newPayment } from '$lib/store'; + import { newPayment } from '$lib/store'; import { t } from '$lib/translations'; - import { f, s } from "$lib/utils"; + import { f, s } from '$lib/utils'; + export let data; - $newPayment = false; + let { user } = data; - $: transactions = $user.payments; + $newPayment = false; + let page, total, transactions = [], pages = []; + $: data && ({ page, pages, total, transactions } = data); </script> <AppHeader /> @@ -16,7 +19,21 @@ {$t('user.transactions.header')} </h1> - <div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg"> + <div class="container w-full mx-auto flex px-10 lg:px-40 mb-8 text-right"> + <div class="ml-auto flex"> + {#if pages.length > 1} + {#each pages as _, i} + <a href={`/${user.username}/transactions/${i+1}`} class:active={page === i + 1}> + <div class="border p-4 px-6 border-r-0 last:border-r"> + {i + 1} + </div> + </a> + {/each} + {/if} + </div> + </div> + + <div class="container w-full mx-auto md:text-lg px-10 lg:px-40"> <div class="text-secondary grid grid-cols-3 mb-5"> <h2>{$t('user.transactions.AMOUNT')}</h2> <h2 class="text-center">{$t('user.transactions.TYPE')}</h2> @@ -55,3 +72,7 @@ </div> </div> </div> + +<style> + .active { @apply font-bold; } +</style> |