128 lines
3.5 KiB
Vue
128 lines
3.5 KiB
Vue
<script setup>
|
|
import DashboardLayout from '@/Layouts/DashboardLayout.vue';
|
|
import Card from '@/Components/Card.vue';
|
|
import Icon from '@/Components/Icon.vue';
|
|
import Builder from '@/Components/DataTable/Builder.vue';
|
|
import Th from '@/Components/DataTable/Th.vue';
|
|
import VueJsonPretty from "vue-json-pretty";
|
|
|
|
import {ref} from 'vue';
|
|
const dateValue = ref([]);
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<DashboardLayout
|
|
title="Logging Activity"
|
|
>
|
|
|
|
<Card class="bg-white dark:bg-gray-700 dark:text-gray-200">
|
|
<template #header>
|
|
<div class="flex items-center space-x-2 bg-gray-200 dark:bg-gray-800 p-2">
|
|
<p class="lowercase first-letter:capitalize font-semibold">
|
|
Logging for Today
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template #body>
|
|
<Builder
|
|
:url="route('superuser.activity.logging')"
|
|
>
|
|
<template #thead="table">
|
|
<tr class="bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-900">
|
|
<Th
|
|
:table="table"
|
|
:sort="false"
|
|
name="id"
|
|
class="border p-2 text-center"
|
|
>
|
|
ID
|
|
</Th>
|
|
|
|
<Th
|
|
:table="table"
|
|
:sort="true"
|
|
name="level_name"
|
|
class="border px-3 py-2 text-center whitespace-nowrap"
|
|
>
|
|
Level Name
|
|
</Th>
|
|
|
|
<Th
|
|
:table="table"
|
|
:sort="true"
|
|
name="message"
|
|
class="border px-3 py-2 text-center whitespace-nowrap"
|
|
>
|
|
Message
|
|
</Th>
|
|
|
|
<Th
|
|
:table="table"
|
|
:sort="true"
|
|
name="context"
|
|
class="border px-3 py-2 text-center whitespace-nowrap"
|
|
>
|
|
Context
|
|
</Th>
|
|
|
|
<Th
|
|
:table="table"
|
|
:sort="true"
|
|
name="logged_at"
|
|
class="border px-3 py-2 text-center whitespace-nowrap"
|
|
>
|
|
Logged At
|
|
</Th>
|
|
</tr>
|
|
</template>
|
|
|
|
|
|
|
|
<template #tbody="{ data }">
|
|
<TransitionGroup
|
|
enterActiveClass="transition-all duration-100"
|
|
leaveActiveClass="transition-all duration-50"
|
|
enterFromClass="opacity-0 -scale-y-100"
|
|
leaveToClass="opacity-0 -scale-y-100"
|
|
>
|
|
<tr
|
|
v-for="(rec, i) in data"
|
|
:key="i"
|
|
class="dark:hover:bg-gray-600 dark:border-gray-800 transition-all duration-300"
|
|
>
|
|
<td class="px-2 py-1 border border-inherit text-center">
|
|
{{ rec.id }}
|
|
</td>
|
|
|
|
<td class="px-2 py-1 border border-inherit ">
|
|
{{ rec.level_name }}
|
|
</td>
|
|
|
|
<td class="px-2 py-1 border border-inherit ">
|
|
{{ rec.message }}
|
|
</td>
|
|
|
|
<td class="px-2 py-1 border border-inherit ">
|
|
<vue-json-pretty :data="JSON.parse(rec.context)" />
|
|
</td>
|
|
|
|
<td class="px-2 py-1 border border-inherit ">
|
|
{{ rec.logged_at }}
|
|
</td>
|
|
</tr>
|
|
</TransitionGroup>
|
|
</template>
|
|
</Builder>
|
|
</template>
|
|
</Card>
|
|
</DashboardLayout>
|
|
</template>
|
|
|
|
<style>
|
|
@import 'vue-json-pretty/lib/styles.css';
|
|
|
|
</style>
|
|
|