From 3ab0368cf8d4b9cda07ce663a179708dfbed015c Mon Sep 17 00:00:00 2001
From: mikeplotean <101570226+mikeplotean@users.noreply.github.com>
Date: Wed, 13 Dec 2023 23:46:03 +0200
Subject: [PATCH] chore: added next/prev buttons to event-log page (#40)

---
 .../src/pages/wallet/[wallet]/eventlog.vue    | 41 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/waltid-web-wallet/web/src/pages/wallet/[wallet]/eventlog.vue b/waltid-web-wallet/web/src/pages/wallet/[wallet]/eventlog.vue
index b18b2e776..8750aff5f 100644
--- a/waltid-web-wallet/web/src/pages/wallet/[wallet]/eventlog.vue
+++ b/waltid-web-wallet/web/src/pages/wallet/[wallet]/eventlog.vue
@@ -5,6 +5,24 @@
         <LoadingIndicator v-if="pending" class="my-6 mb-12 w-full"> Loading eventLog... </LoadingIndicator>
 
         <p class="mb-1">The list of events is shown below:</p>
+        <div class="flex items-center justify-between gap-x-6 py-4">
+            <div class="flex flex-none items-center gap-x-4">
+                <button
+                    v-if="eventLog?.currentStartingAfter"
+                    @click="prevPage(eventLog.currentStartingAfter)"
+                    class="hidden rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:block"
+                >Previous
+                </button>
+            </div>
+            <div class="flex flex-none items-center gap-x-4">
+                <button
+                    v-if="eventLog?.nextStartingAfter"
+                    @click="nextPage(eventLog.nextStartingAfter)"
+                    class="hidden rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:block"
+                >Next
+                </button>
+            </div>
+        </div>
 
         <div v-if="eventLog?.count > 0" aria-label="Credential list" class="h-full overflow-y-auto shadow-xl">
             <div class="container mx-auto px-4 sm:px-8">
@@ -105,9 +123,20 @@ import ViewEventDataModal from "~/components/modals/ViewEventDataModal.vue";
 const store = useModalStore();
 
 const currentWallet = useCurrentWallet()
+const startingAfter = ref("-1")
 console.log("Loading EventLog...");
-const { data: eventLog, pending: pending, refresh, error } = await useLazyFetch(`/wallet-api/wallet/${currentWallet.value}/eventlog`);
-refreshNuxtData();
+const { data: eventLog, pending: pending } = await useLazyAsyncData(
+    () =>
+        $fetch(`/wallet-api/wallet/${currentWallet.value}/eventlog`, {
+            params: {
+                limit: 4,
+                startingAfter: startingAfter.value,
+            },
+        }),
+    {
+        watch: [startingAfter],
+    },
+);
 function viewData(title, data) {
     console.log(`View event data: ${title}`);
 
@@ -119,6 +148,14 @@ function viewData(title, data) {
         },
     });
 }
+function prevPage(startingAfterParam){
+ console.log(`prev.page: ${startingAfterParam}`)
+ startingAfter.value = startingAfterParam
+}
+function nextPage(startingAfterParam){
+    console.log(`next.page: ${startingAfterParam}`)
+    startingAfter.value = startingAfterParam
+}
 </script>
 
 <style scoped></style>