Refactor app architecture and clean local artifacts
This commit is contained in:
AzuTear
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<Card class="overflow-hidden">
|
||||
<div class="border-b border-slate-100 p-5">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-500">Audit Log</p>
|
||||
<h2 class="mt-1 text-xl font-bold text-slate-900">Letzte Aktionen</h2>
|
||||
</div>
|
||||
<div class="grid h-10 w-10 place-items-center rounded-2xl bg-sky-100 text-sky-700">
|
||||
<FileClock class="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-h-[760px] divide-y divide-slate-100 overflow-y-auto" :aria-busy="loading">
|
||||
<article v-for="entry in entries" :key="entry.id" class="grid gap-4 px-5 py-4 sm:grid-cols-[16px_minmax(0,1fr)]">
|
||||
<span class="mt-2 h-3 w-3 rounded-full ring-4 ring-white" :class="entry.dotClass" />
|
||||
<div class="min-w-0">
|
||||
<div class="flex flex-wrap items-start justify-between gap-3">
|
||||
<div class="min-w-0">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span class="rounded-full border px-3 py-1 text-xs font-semibold" :class="entry.actionToneClass">
|
||||
{{ entry.actionLabel }}
|
||||
</span>
|
||||
<span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">{{ entry.actionGroup }}</span>
|
||||
</div>
|
||||
<h3 class="mt-3 text-base font-bold leading-6 text-slate-950">{{ entry.summary }}</h3>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-start gap-3">
|
||||
<time class="text-right text-sm text-slate-500" :datetime="entry.createdAt">
|
||||
{{ entry.createdLabel }}
|
||||
<span class="block text-xs text-slate-400">{{ entry.ageLabel }}</span>
|
||||
</time>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="gap-2 rounded-2xl border border-slate-200 bg-white px-3 text-slate-700 shadow-none hover:bg-slate-50"
|
||||
@click="$emit('openDetail', entry)"
|
||||
>
|
||||
<Eye class="h-4 w-4" />
|
||||
Details
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 grid gap-2 text-sm text-slate-500 md:grid-cols-3">
|
||||
<p>
|
||||
<span class="block text-[10px] font-bold uppercase tracking-[0.16em] text-slate-400">Admin</span>
|
||||
<span class="font-semibold text-slate-700">{{ entry.adminTwitchUserId }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="block text-[10px] font-bold uppercase tracking-[0.16em] text-slate-400">Objekt</span>
|
||||
<span class="font-semibold text-slate-700">{{ entry.entityLabel }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="block text-[10px] font-bold uppercase tracking-[0.16em] text-slate-400">Rohaktion</span>
|
||||
<code class="rounded-md bg-slate-100 px-1.5 py-0.5 text-xs font-semibold text-slate-700">{{ entry.actionType }}</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="entry.changeItems.length > 0" class="mt-3 rounded-2xl border border-amber-100 bg-amber-50/70 px-4 py-3">
|
||||
<p class="text-sm font-semibold text-amber-800">Änderungsdiff</p>
|
||||
<dl class="mt-3 grid gap-2">
|
||||
<div
|
||||
v-for="change in entry.changeItems"
|
||||
:key="`${change.field}-${change.to}`"
|
||||
class="grid gap-2 rounded-xl border border-white/80 bg-white/80 px-3 py-2 text-sm lg:grid-cols-[150px_minmax(0,1fr)]"
|
||||
>
|
||||
<dt class="font-bold text-slate-700">
|
||||
{{ change.label }}
|
||||
<span v-if="change.sensitive" class="ml-2 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] uppercase tracking-[0.12em] text-amber-700">
|
||||
sensibel
|
||||
</span>
|
||||
</dt>
|
||||
<dd class="grid gap-2 sm:grid-cols-2">
|
||||
<span class="min-w-0 rounded-lg bg-slate-50 px-2 py-1 text-slate-600">
|
||||
<span class="block text-[10px] font-bold uppercase tracking-[0.14em] text-slate-400">Vorher</span>
|
||||
<span class="break-words">{{ change.from || 'leer' }}</span>
|
||||
</span>
|
||||
<span class="min-w-0 rounded-lg bg-emerald-50 px-2 py-1 text-emerald-800">
|
||||
<span class="block text-[10px] font-bold uppercase tracking-[0.14em] text-emerald-600">Nachher</span>
|
||||
<span class="break-words">{{ change.to || 'leer' }}</span>
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<details v-if="entry.metadataItems.length > 0" class="mt-3 rounded-2xl border border-slate-100 bg-slate-50 px-4 py-3">
|
||||
<summary class="cursor-pointer text-sm font-semibold text-sky-700">Metadaten anzeigen</summary>
|
||||
<dl class="mt-3 grid gap-2 text-sm sm:grid-cols-2">
|
||||
<div v-for="item in entry.metadataItems" :key="item.key" class="min-w-0">
|
||||
<dt class="text-[10px] font-bold uppercase tracking-[0.16em] text-slate-400">{{ item.key }}</dt>
|
||||
<dd class="mt-0.5 break-words text-slate-700">{{ item.value }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</details>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<p v-if="entries.length === 0" class="px-5 py-14 text-center text-sm text-slate-500">
|
||||
{{ emptyText }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 bg-white px-5 py-4">
|
||||
<p class="text-sm font-semibold text-slate-500">{{ pageSummaryLabel }}</p>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="gap-2 rounded-2xl border border-slate-200 bg-white px-4 text-slate-700 shadow-none hover:bg-slate-50"
|
||||
:disabled="!hasMore || loadingMore || loading"
|
||||
@click="$emit('loadMore')"
|
||||
>
|
||||
<ChevronDown class="h-4 w-4" :class="{ 'animate-bounce': loadingMore }" />
|
||||
{{ hasMore ? (loadingMore ? 'Lädt ...' : 'Mehr laden') : 'Alles geladen' }}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ChevronDown, Eye, FileClock } from '@lucide/vue'
|
||||
|
||||
import type { AuditLogRow } from './useAdminAuditManager'
|
||||
import Button from '../ui/Button.vue'
|
||||
import Card from '../ui/Card.vue'
|
||||
|
||||
defineProps<{
|
||||
entries: AuditLogRow[]
|
||||
loading: boolean
|
||||
loadingMore: boolean
|
||||
hasMore: boolean
|
||||
pageSummaryLabel: string
|
||||
emptyText: string
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
openDetail: [entry: AuditLogRow]
|
||||
loadMore: []
|
||||
}>()
|
||||
</script>
|
||||
Reference in New Issue
Block a user