141 lines
3.3 KiB
TypeScript
141 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { Pencil, Trash2 } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
import { deleteEvent } from "@/actions/events";
|
|
import { useConfirmDialog } from "@/components/admin/confirm-dialog";
|
|
import { DataTable } from "@/components/admin/data-table";
|
|
import Link from "@/components/link";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useServerAction } from "@/hooks/use-server-action";
|
|
import type { DataTableColumn, PaginatedResult } from "@/types/common";
|
|
|
|
interface EventRow {
|
|
id: number;
|
|
title: string;
|
|
typeName: string;
|
|
typeColor: string;
|
|
startsAt: Date;
|
|
endsAt: Date | null;
|
|
status: string;
|
|
hostUserId: number;
|
|
}
|
|
|
|
const statusVariants: Record<
|
|
string,
|
|
"default" | "secondary" | "outline" | "destructive"
|
|
> = {
|
|
published: "default",
|
|
draft: "secondary",
|
|
cancelled: "destructive",
|
|
completed: "outline",
|
|
};
|
|
|
|
interface EventsTableProps {
|
|
data: PaginatedResult<EventRow>;
|
|
}
|
|
|
|
export function EventsTable({ data }: EventsTableProps) {
|
|
const t = useTranslations("pages.admin.events");
|
|
const { run, isPending } = useServerAction();
|
|
const { confirm, dialog: confirmDialog } = useConfirmDialog();
|
|
|
|
const statusLabel: Record<string, string> = {
|
|
published: t("statusPublished"),
|
|
draft: t("statusDraft"),
|
|
cancelled: t("statusCancelled"),
|
|
completed: t("statusCompleted"),
|
|
};
|
|
|
|
async function handleDelete(row: EventRow) {
|
|
const ok = await confirm({
|
|
title: "Delete event",
|
|
description: `Delete "${row.title}"? This cannot be undone.`,
|
|
confirmLabel: "Delete",
|
|
cancelLabel: "Cancel",
|
|
});
|
|
if (!ok) return;
|
|
run(() => deleteEvent({ id: row.id }), {
|
|
successMessage: "Event deleted!",
|
|
errorMessage: "Failed to delete event.",
|
|
});
|
|
}
|
|
|
|
const columns: DataTableColumn<EventRow>[] = [
|
|
{ key: "id", label: t("colId"), sortable: true },
|
|
{
|
|
key: "title",
|
|
label: t("colTitle"),
|
|
sortable: true,
|
|
render: (value) => <span className="font-medium">{String(value)}</span>,
|
|
},
|
|
{
|
|
key: "typeName",
|
|
label: t("colType"),
|
|
sortable: false,
|
|
render: (_, row) => (
|
|
<Badge style={{ backgroundColor: row.typeColor, color: "#fff" }}>
|
|
{row.typeName}
|
|
</Badge>
|
|
),
|
|
},
|
|
{
|
|
key: "startsAt",
|
|
label: t("colStarts"),
|
|
sortable: true,
|
|
render: (value) => (
|
|
<span className="text-sm">
|
|
{new Date(value as unknown as string).toLocaleString()}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: "status",
|
|
label: t("colStatus"),
|
|
sortable: true,
|
|
render: (value) => {
|
|
const key = String(value);
|
|
return (
|
|
<Badge variant={statusVariants[key] ?? "secondary"}>
|
|
{statusLabel[key] ?? key}
|
|
</Badge>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
key: "actions",
|
|
label: t("colActions"),
|
|
render: (_, row) => (
|
|
<div className="flex items-center gap-1">
|
|
<Button variant="ghost" size="icon" asChild>
|
|
<Link href={`/admin/events/${row.id}`}>
|
|
<Pencil className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
disabled={isPending}
|
|
onClick={() => handleDelete(row)}
|
|
aria-label="Delete event"
|
|
>
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
</Button>
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<DataTable
|
|
data={data}
|
|
columns={columns}
|
|
searchPlaceholder={t("searchPlaceholder")}
|
|
/>
|
|
{confirmDialog}
|
|
</>
|
|
);
|
|
}
|