260 lines
7.8 KiB
Vue
260 lines
7.8 KiB
Vue
<script setup>
|
|
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
|
import { Head, Link, router } from "@inertiajs/vue3";
|
|
import { ref } from "vue";
|
|
import { MailIcon, FilterIcon, ExternalLinkIcon } from "lucide-vue-next";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/Components/ui/card";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { Input } from "@/Components/ui/input";
|
|
import { Label } from "@/Components/ui/label";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/Components/ui/select";
|
|
import { Badge } from "@/Components/ui/badge";
|
|
import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
|
|
import AppCard from "@/Components/app/ui/card/AppCard.vue";
|
|
|
|
const props = defineProps({
|
|
logs: Object,
|
|
templates: Array,
|
|
filters: Object,
|
|
});
|
|
|
|
const form = ref({
|
|
status: props.filters?.status || "",
|
|
to: props.filters?.to || "",
|
|
subject: props.filters?.subject || "",
|
|
template_id: props.filters?.template_id || "",
|
|
date_from: props.filters?.date_from || "",
|
|
date_to: props.filters?.date_to || "",
|
|
});
|
|
|
|
function applyFilters() {
|
|
router.get(
|
|
route("admin.email-logs.index"),
|
|
{
|
|
...form.value,
|
|
},
|
|
{ preserveState: true, preserveScroll: true }
|
|
);
|
|
}
|
|
|
|
function getStatusVariant(status) {
|
|
if (status === "sent") return "default";
|
|
if (status === "queued" || status === "sending") return "secondary";
|
|
if (status === "failed") return "destructive";
|
|
return "outline";
|
|
}
|
|
|
|
const columns = [
|
|
{
|
|
key: "created_at",
|
|
label: "Datum",
|
|
sortable: false,
|
|
},
|
|
{
|
|
key: "status",
|
|
label: "Status",
|
|
sortable: false,
|
|
},
|
|
{
|
|
key: "to_email",
|
|
label: "Prejemnik",
|
|
sortable: false,
|
|
},
|
|
{
|
|
key: "subject",
|
|
label: "Zadeva",
|
|
sortable: false,
|
|
},
|
|
{
|
|
key: "template",
|
|
label: "Predloga",
|
|
sortable: false,
|
|
},
|
|
{
|
|
key: "duration_ms",
|
|
label: "Trajanje",
|
|
sortable: false,
|
|
},
|
|
{
|
|
key: "actions",
|
|
label: "Dejanja",
|
|
sortable: false,
|
|
align: "right",
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<AdminLayout title="Email Logs">
|
|
<Head title="Email Logs" />
|
|
|
|
<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 Logs</CardTitle>
|
|
<CardDescription>
|
|
Pregled vseh poslanih in čakajočih e-poštnih sporočil
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form @submit.prevent="applyFilters" class="space-y-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
|
<div class="space-y-2">
|
|
<Label for="status">Status</Label>
|
|
<Select v-model="form.status">
|
|
<SelectTrigger id="status">
|
|
<SelectValue placeholder="All statuses" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem :value="null">All statuses</SelectItem>
|
|
<SelectItem value="queued">Queued</SelectItem>
|
|
<SelectItem value="sending">Sending</SelectItem>
|
|
<SelectItem value="sent">Sent</SelectItem>
|
|
<SelectItem value="failed">Failed</SelectItem>
|
|
<SelectItem value="bounced">Bounced</SelectItem>
|
|
<SelectItem value="deferred">Deferred</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="to">To email</Label>
|
|
<Input id="to" v-model="form.to" placeholder="prejemnik@email.com" />
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="subject">Subject</Label>
|
|
<Input
|
|
id="subject"
|
|
v-model="form.subject"
|
|
placeholder="Iskanje po zadevi"
|
|
/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="template">Template</Label>
|
|
<Select v-model="form.template_id">
|
|
<SelectTrigger id="template">
|
|
<SelectValue placeholder="All templates" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem :value="null">All templates</SelectItem>
|
|
<SelectItem v-for="t in templates" :key="t.id" :value="t.id">{{
|
|
t.name
|
|
}}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="date_from">Od datuma</Label>
|
|
<Input id="date_from" v-model="form.date_from" type="date" />
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="date_to">Do datuma</Label>
|
|
<Input id="date_to" v-model="form.date_to" type="date" />
|
|
</div>
|
|
</div>
|
|
<Button type="submit" size="sm">
|
|
<FilterIcon class="h-4 w-4 mr-2" />
|
|
Filtriraj
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<AppCard
|
|
title=""
|
|
padding="none"
|
|
class="p-0! gap-0"
|
|
header-class="py-3! px-4 gap-0 text-muted-foreground"
|
|
body-class=""
|
|
>
|
|
<template #header>
|
|
<div class="flex items-center gap-2">
|
|
<MailIcon size="18" />
|
|
<CardTitle class="uppercase">Uvozi</CardTitle>
|
|
</div>
|
|
</template>
|
|
<DataTableNew2
|
|
:columns="columns"
|
|
:data="logs.data"
|
|
:meta="logs"
|
|
:show-toolbar="false"
|
|
:show-pagination="true"
|
|
route-name="admin.email-logs.index"
|
|
:preserve-state="true"
|
|
:preserve-scroll="true"
|
|
empty-text="Ni e-poštnih dnevnikov"
|
|
empty-description="Začnite z ustvarjanjem e-poštnih sporočil"
|
|
>
|
|
<template #cell-created_at="{ value }">
|
|
<div class="whitespace-nowrap text-sm">
|
|
{{ new Date(value).toLocaleString() }}
|
|
</div>
|
|
</template>
|
|
|
|
<template #cell-status="{ value }">
|
|
<Badge :variant="getStatusVariant(value)">
|
|
{{ value }}
|
|
</Badge>
|
|
</template>
|
|
|
|
<template #cell-to_email="{ row }">
|
|
<div class="max-w-55 truncate">
|
|
{{
|
|
row.to_email ||
|
|
(Array.isArray(row.to_recipients) && row.to_recipients.length
|
|
? row.to_recipients.join(", ")
|
|
: "-")
|
|
}}
|
|
</div>
|
|
</template>
|
|
|
|
<template #cell-subject="{ value }">
|
|
<div class="max-w-[320px] truncate">{{ value }}</div>
|
|
</template>
|
|
|
|
<template #cell-template="{ row }">
|
|
<div class="max-w-55 truncate">{{ row.template?.name || "-" }}</div>
|
|
</template>
|
|
|
|
<template #cell-duration_ms="{ value }">
|
|
<span v-if="value" class="text-xs text-muted-foreground">
|
|
{{ value }} ms
|
|
</span>
|
|
<span v-else class="text-muted-foreground">-</span>
|
|
</template>
|
|
|
|
<template #cell-actions="{ row }">
|
|
<Button size="sm" variant="ghost" as-child>
|
|
<Link :href="route('admin.email-logs.show', row.id)">
|
|
<ExternalLinkIcon class="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</template>
|
|
</DataTableNew2>
|
|
</AppCard>
|
|
</div>
|
|
</AdminLayout>
|
|
</template>
|