chore: added view event data function (#38)

waltid-web-wallet/web/src/components/modals/ViewEventDataModal.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <CloseButton />
+        <div class="flex min-h-full items-end p-4 sm:items-center sm:p-0">
+            <div class="sm:flex sm:items-start">
+                <div class="shadow p-3 mt-2 font-mono">
+                    <h3 class="font-semibold mb-2">{{ props.title }}</h3>
+                    <pre v-if="props.data!=null">{{ JSON.stringify(props.data, null, 2) }}</pre>
+                    <pre v-else>No data available.</pre>
+                </div>
+            </div>
+        </div>
+        <OkButton />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import CloseButton from "./CloseButton.vue";
+import OkButton from "./OkButton.vue";
+
+const props = defineProps<{
+    title: string;
+    data: object;
+}>();
+</script>

waltid-web-wallet/web/src/pages/wallet/[wallet]/eventlog.vue

@@ -64,11 +64,20 @@
                                 <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                     <p class="text-gray-900 whitespace-no-wrap">{{item.originator}}</p>
                                 </td>
+
                                 <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right">
-                                    <button type="button" class="inline-block text-gray-500 hover:text-gray-700">
-                                        <svg class="inline-block h-6 w-6 fill-current" viewBox="0 0 24 24">
-                                            <path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z" />
+                                    <button 
+                                    class="inline-block text-gray-500 hover:text-gray-700"
+                                    @click="viewData(`${item.event}.${item.action}`, item.data)"
+                                    type="button">
+                                        <!-- horizontal -->
+                                        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 3">
+                                            <path d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z"/>
                                         </svg>
+                                        <!-- vertical -->
+                                        <!-- <svg class="inline-block h-6 w-6 fill-current" viewBox="0 0 24 24">
+                                            <path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z" />
+                                        </svg> -->
                                     </button>
                                 </td>
                             </tr>
@@ -90,14 +99,26 @@
 <script setup>
 import CenterMain from "~/components/CenterMain.vue";
 import LoadingIndicator from "~/components/loading/LoadingIndicator.vue";
+import useModalStore from "~/stores/useModalStore";
+import ViewEventDataModal from "~/components/modals/ViewEventDataModal.vue";
+
+const store = useModalStore();
 
 const currentWallet = useCurrentWallet()
 console.log("Loading EventLog...");
-// const eventLog = await useLazyFetch(`/wallet-api/wallet/${currentWallet.value}/eventlog`).data;
-// refreshNuxtData();
 const { data: eventLog, pending: pending, refresh, error } = await useLazyFetch(`/wallet-api/wallet/${currentWallet.value}/eventlog`);
 refreshNuxtData();
-// const { data: eventLog, pending: pending, refresh, error } = await useLazyAsyncData(() => $fetch(`/wallet-api/wallet/${currentWallet.value}/eventlog`));
+function viewData(title, data) {
+    console.log(`View event data: ${title}`);
+
+    store.openModal({
+        component: ViewEventDataModal,
+        props: {
+            title: title,
+            data: data,
+        },
+    });
+}
 </script>
 
 <style scoped></style>