Files
ikea/resources/js/Pages/Superuser/Activity/Logging.vue
2024-03-31 14:31:22 +02:00

116 lines
3.3 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';
</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 ">
{{ rec.context }}
</td>
<td class="px-2 py-1 border border-inherit ">
{{ rec.logged_at }}
</td>
</tr>
</TransitionGroup>
</template>
</Builder>
</template>
</Card>
</DashboardLayout>
</template>