Merge branch 'master' of github.com:coinos/coinos-ui-v2

3 files changed, 60 insertions, 24 deletions

diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index 78d9d511..5057ef5c 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -97,25 +97,26 @@
 	<input type="text" name="address" bind:value={$user.address} />
 </div>
 
-<div>
-	<div class="flex justify-between items-center">
-		<span class="font-bold">{$t('user.settings.emailNotifications')}</span>
-		<Toggle id="email-notify" />
-	</div>
-	<p class="text-secondary mt-1 w-9/12">
-		{$t('user.settings.emailNotificationsDescription')}
-	</p>
-</div>
-
-<div>
-	<div class="flex justify-between items-center">
-		<span class="font-bold">{$t('user.settings.smsNotifications')}</span>
-		<Toggle id="sms-notify" />
-	</div>
-	<p class="text-secondary mt-1 w-9/12">
-		{$t('user.settings.smsNotificationsDescription')}
-	</p>
-</div>
+<!-- TODO -->
+<!-- <div> -->
+<!-- 	<div class="flex justify-between items-center"> -->
+<!-- 		<span class="font-bold">{$t('user.settings.emailNotifications')}</span> -->
+<!-- 		<Toggle id="email-notify" /> -->
+<!-- 	</div> -->
+<!-- 	<p class="text-secondary mt-1 w-9/12"> -->
+<!-- 		{$t('user.settings.emailNotificationsDescription')} -->
+<!-- 	</p> -->
+<!-- </div> -->
+<!--  -->
+<!-- <div> -->
+<!-- 	<div class="flex justify-between items-center"> -->
+<!-- 		<span class="font-bold">{$t('user.settings.smsNotifications')}</span> -->
+<!-- 		<Toggle id="sms-notify" /> -->
+<!-- 	</div> -->
+<!-- 	<p class="text-secondary mt-1 w-9/12"> -->
+<!-- 		{$t('user.settings.smsNotificationsDescription')} -->
+<!-- 	</p> -->
+<!-- </div> -->
 
 <div>
 	<span class="font-bold">{$t('user.settings.profileImage')}</span>
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>