1 files changed, 84 insertions, 0 deletions
diff --git a/extension/src/entries/options/components/EvHistoryTable.vue b/extension/src/entries/options/components/EvHistoryTable.vue
new file mode 100644
index 0000000..6ea6cac
--- /dev/null
+++ b/extension/src/entries/options/components/EvHistoryTable.vue
@@ -0,0 +1,84 @@
+<template>
+   <table class="min-w-full divide-y-2 divide-gray-200 dark:divide-dark-500">
+        <thead class="text-left bg-gray-50 dark:bg-dark-700">
+            <tr>
+                <th class="p-2 font-medium whitespace-nowrap dark:text-white">
+                    Type
+                </th>
+                <th class="p-2 font-medium whitespace-nowrap dark:text-white">
+                    Origin
+                </th>
+                <th class="p-2 font-medium whitespace-nowrap dark:text-white">
+                    Time
+                </th>
+                <th class="p-2"></th>
+            </tr>
+        </thead>
+
+        <tbody class="divide-y divide-gray-200 dark:divide-dark-500">
+            <tr v-for="req in requests" :key="req.uuid" class="">
+                <td class="p-2 t font-medium truncate max-w-[8rem] whitespace-nowrap ">
+                    {{ req.requestType }}
+                </td>
+                <td class="p-2 whitespace-nowrap">
+                    {{ req.origin }}
+                </td>
+                <td class="p-2 whitespace-nowrap">
+                    {{ createShortDateAndTime(req) }}
+                </td>
+                <td class="p-2 text-right whitespace-nowrap">
+                    <div v-if="!readonly" class="button-group">
+                        <button class="rounded btn xs" @click="approve(req)">
+                            <fa-icon icon="check" class="inline" />
+                        </button>
+                        <button class="rounded btn red xs" @click="deny(req)">
+                            <fa-icon icon="trash-can" class="inline" />
+                        </button>
+                    </div>
+                    <div v-else class="text-sm font-bold">
+                        {{ statusToString(req.status) }}
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue';
+import { PermissionRequest, PrStatus } from '../../../features';
+
+const emit = defineEmits(['deny', 'approve'])
+const props = defineProps<{
+    requests: PermissionRequest[],
+    readonly: boolean
+}>()
+
+const { requests, readonly } = toRefs(props)
+
+const createShortDateAndTime = (request: PermissionRequest) => {
+    const date = new Date(request.timestamp)
+    const hours = date.getHours()
+    const minutes = date.getMinutes()
+    const seconds = date.getSeconds()
+    const day = date.getDate()
+    const month = date.getMonth() + 1
+    const year = date.getFullYear()
+    return `${month}/${day}/${year} ${hours}:${minutes}:${seconds}`
+}
+
+const deny = (request: PermissionRequest) => emit('deny', request)
+const approve = (request: PermissionRequest) => emit('approve', request)
+
+const statusToString = (status: PrStatus) => {
+    switch(status) {
+        case PrStatus.Approved:
+            return 'Approved'
+        case PrStatus.Denied:
+            return 'Denied'
+        case PrStatus.Pending:
+            return 'Pending'
+    }
+}
+
+</script>
+\ No newline at end of file