140 lines
5.5 KiB
Vue
140 lines
5.5 KiB
Vue
<script setup>
|
|
import AdminLayout from '@/Layouts/AdminLayout.vue'
|
|
import { Head, Link } from '@inertiajs/vue3'
|
|
import { MailIcon, ArrowLeftIcon, ClockIcon, UserIcon, AlertCircleIcon, FileTextIcon, CodeIcon } from 'lucide-vue-next'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card'
|
|
import { Button } from '@/Components/ui/button'
|
|
import { Badge } from '@/Components/ui/badge'
|
|
import { Separator } from '@/Components/ui/separator'
|
|
|
|
const props = defineProps({
|
|
log: Object,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<AdminLayout title="Email Log">
|
|
<Head title="Email Log" />
|
|
|
|
<div class="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex items-start gap-3">
|
|
<div class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary">
|
|
<MailIcon class="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<CardTitle>Email Log #{{ props.log.id }}</CardTitle>
|
|
<CardDescription>
|
|
Ustvarjeno: {{ new Date(props.log.created_at).toLocaleString() }}
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
<Button variant="outline" size="sm" as-child>
|
|
<Link :href="route('admin.email-logs.index')">
|
|
<ArrowLeftIcon class="h-4 w-4 mr-2" />
|
|
Nazaj
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
</Card>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle class="text-base">Podrobnosti</CardTitle>
|
|
</CardHeader>
|
|
<CardContent class="space-y-3">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm text-muted-foreground">Status:</span>
|
|
<Badge
|
|
:variant="
|
|
props.log.status === 'sent' ? 'default' :
|
|
props.log.status === 'queued' || props.log.status === 'sending' ? 'secondary' :
|
|
props.log.status === 'failed' ? 'destructive' : 'outline'
|
|
"
|
|
>
|
|
{{ props.log.status }}
|
|
</Badge>
|
|
</div>
|
|
<Separator />
|
|
<div class="space-y-1">
|
|
<div class="text-sm font-medium flex items-center gap-2">
|
|
<UserIcon class="h-4 w-4" />
|
|
Prejemnik
|
|
</div>
|
|
<div class="text-sm text-muted-foreground">
|
|
<template v-if="props.log.to_email">
|
|
{{ props.log.to_email }} {{ props.log.to_name ? '(' + props.log.to_name + ')' : '' }}
|
|
</template>
|
|
<template v-else>
|
|
<span v-if="Array.isArray(props.log.to_recipients) && props.log.to_recipients.length">
|
|
{{ props.log.to_recipients.join(', ') }}
|
|
</span>
|
|
<span v-else>-</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<Separator />
|
|
<div class="space-y-1">
|
|
<div class="text-sm font-medium">Zadeva</div>
|
|
<div class="text-sm text-muted-foreground">{{ props.log.subject }}</div>
|
|
</div>
|
|
<Separator />
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm text-muted-foreground">Predloga:</span>
|
|
<Badge variant="outline">{{ props.log.template?.name || '-' }}</Badge>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm text-muted-foreground">Poskusi:</span>
|
|
<Badge variant="secondary">{{ props.log.attempt }}</Badge>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm text-muted-foreground flex items-center gap-1">
|
|
<ClockIcon class="h-4 w-4" />
|
|
Trajanje:
|
|
</span>
|
|
<span class="text-sm">{{ props.log.duration_ms ? props.log.duration_ms + ' ms' : '-' }}</span>
|
|
</div>
|
|
<div v-if="props.log.error_message" class="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
|
|
<div class="flex items-start gap-2">
|
|
<AlertCircleIcon class="h-4 w-4 text-destructive mt-0.5" />
|
|
<div>
|
|
<div class="text-sm font-medium text-destructive">Napaka</div>
|
|
<div class="text-xs text-destructive/80 mt-1">{{ props.log.error_message }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle class="text-base flex items-center gap-2">
|
|
<FileTextIcon class="h-4 w-4" />
|
|
Besedilo
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<pre class="text-xs whitespace-pre-wrap break-words bg-muted p-3 rounded-md">{{ props.log.body?.body_text || '' }}</pre>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle class="text-base flex items-center gap-2">
|
|
<CodeIcon class="h-4 w-4" />
|
|
HTML vsebina
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<iframe :srcdoc="props.log.body?.body_html || ''" class="w-full h-[480px] border rounded-md bg-white"></iframe>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</AdminLayout>
|
|
</template>
|