350 lines
12 KiB
TypeScript
350 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import {
|
|
PlusIcon,
|
|
RefreshCwIcon,
|
|
RotateCcwIcon,
|
|
XCircleIcon,
|
|
Trash2Icon,
|
|
} from "lucide-react";
|
|
import { useEffect, useState, useTransition } from "react";
|
|
import { toast } from "sonner";
|
|
|
|
import {
|
|
deleteStructuredGuide,
|
|
cancelCatalogSync,
|
|
getCatalogSyncProgress,
|
|
moveGuideToTrash,
|
|
restoreStructuredGuide,
|
|
startCatalogSync,
|
|
} from "@/app/admin/actions";
|
|
import { DeleteConfirmationDialog } from "@/components/admin/delete-confirmation-dialog";
|
|
import { GuideVisibilityControl } from "@/components/admin/guide-visibility-control";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardAction,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import {
|
|
Empty,
|
|
EmptyContent,
|
|
EmptyDescription,
|
|
EmptyHeader,
|
|
EmptyTitle,
|
|
} from "@/components/ui/empty";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import { useAdminPresence } from "@/hooks/use-presence";
|
|
import type { CatalogSyncJob } from "@/lib/catalog/sync";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type GuideCard = {
|
|
id: string;
|
|
characterKey: string;
|
|
name: string;
|
|
overview: string;
|
|
coverUrl: string;
|
|
version: number;
|
|
updatedAt: Date;
|
|
trashedAt: Date | null;
|
|
isPublic: boolean;
|
|
};
|
|
|
|
export function StructuredDashboard({
|
|
guides,
|
|
trash,
|
|
catalogVersion,
|
|
latestCatalogVersion,
|
|
}: {
|
|
guides: GuideCard[];
|
|
trash: GuideCard[];
|
|
catalogVersion: string | null;
|
|
latestCatalogVersion: string | null;
|
|
}) {
|
|
const router = useRouter();
|
|
const [pending, startTransition] = useTransition();
|
|
const [syncJob, setSyncJob] = useState<CatalogSyncJob | null>(null);
|
|
const presence = useAdminPresence(null);
|
|
const catalogReady = Boolean(catalogVersion);
|
|
const updateAvailable = Boolean(
|
|
catalogVersion &&
|
|
latestCatalogVersion &&
|
|
catalogVersion !== latestCatalogVersion,
|
|
);
|
|
const syncJobId = syncJob?.id;
|
|
const syncJobStatus = syncJob?.status;
|
|
|
|
useEffect(() => {
|
|
if (!syncJobId || !syncJobStatus || ["completed", "unchanged", "cancelled", "error"].includes(syncJobStatus)) return;
|
|
let stopped = false;
|
|
const poll = async () => {
|
|
const latest = await getCatalogSyncProgress(syncJobId);
|
|
if (!stopped && latest) setSyncJob(latest);
|
|
};
|
|
void poll();
|
|
const timer = window.setInterval(() => void poll(), 1000);
|
|
return () => {
|
|
stopped = true;
|
|
window.clearInterval(timer);
|
|
};
|
|
}, [syncJobId, syncJobStatus]);
|
|
|
|
function startSync() {
|
|
startTransition(async () => {
|
|
const result = await startCatalogSync();
|
|
if (result.status === "error") toast.error(result.message);
|
|
else setSyncJob(result.job);
|
|
});
|
|
}
|
|
|
|
function cancelSync() {
|
|
if (!syncJob) return;
|
|
startTransition(async () => {
|
|
const result = await cancelCatalogSync(syncJob.id);
|
|
if (result) setSyncJob(result);
|
|
});
|
|
}
|
|
|
|
function run(
|
|
action: () => Promise<{ status: string; message?: string }>,
|
|
success: string,
|
|
) {
|
|
startTransition(async () => {
|
|
const result = await action();
|
|
if (result.status === "error") toast.error(result.message);
|
|
else {
|
|
toast.success(success);
|
|
router.refresh();
|
|
}
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-10">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Badge variant="outline">
|
|
Lunaris ที่ Sync:{" "}
|
|
{catalogVersion ? `v${catalogVersion}` : "ยังไม่ Sync"}
|
|
</Badge>
|
|
<Badge variant={updateAvailable ? "default" : "secondary"}>
|
|
{latestCatalogVersion
|
|
? updateAvailable
|
|
? `มีอัปเดต: v${latestCatalogVersion}`
|
|
: `ล่าสุด: v${latestCatalogVersion}`
|
|
: "ตรวจสอบเวอร์ชันล่าสุดไม่ได้"}
|
|
</Badge>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
disabled={pending || Boolean(syncJob && !["completed", "unchanged", "cancelled", "error"].includes(syncJob.status))}
|
|
onClick={startSync}
|
|
>
|
|
{pending ? (
|
|
<Spinner data-icon="inline-start" />
|
|
) : (
|
|
<RefreshCwIcon data-icon="inline-start" />
|
|
)}
|
|
Sync Catalog
|
|
</Button>
|
|
{syncJob && !["completed", "unchanged", "cancelled", "error"].includes(syncJob.status) ? (
|
|
<Button variant="destructive" disabled={pending} onClick={cancelSync}>
|
|
<XCircleIcon data-icon="inline-start" />
|
|
Cancel Sync
|
|
</Button>
|
|
) : null}
|
|
<Button
|
|
render={<Link href="/admin/create" />}
|
|
nativeButton={false}
|
|
disabled={!catalogReady}
|
|
>
|
|
<PlusIcon data-icon="inline-start" />
|
|
สร้าง Guide
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{syncJob ? (
|
|
<Card>
|
|
<CardContent className="space-y-2 pt-6">
|
|
<div className="flex items-center justify-between gap-3 text-sm">
|
|
<span>{syncJob.message}</span>
|
|
<span className="text-muted-foreground">{syncJob.total ? `${syncJob.completed}/${syncJob.total}` : "กำลังเริ่ม…"}</span>
|
|
</div>
|
|
<div className="h-2 overflow-hidden rounded-full bg-muted">
|
|
<div className={cn("h-full bg-primary transition-all", syncJob.total ? "" : "w-1/3 animate-pulse")} style={syncJob.total ? { width: `${Math.min(100, (syncJob.completed / syncJob.total) * 100)}%` } : undefined} />
|
|
</div>
|
|
{syncJob.status === "error" ? <p className="text-sm text-destructive">{syncJob.error ?? "Sync ไม่สำเร็จ"}</p> : null}
|
|
</CardContent>
|
|
</Card>
|
|
) : null}
|
|
{guides.length ? (
|
|
<div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
|
|
{guides.map((guide) => (
|
|
<Card
|
|
key={guide.id}
|
|
className="relative overflow-hidden py-0 transition-colors hover:bg-muted/50"
|
|
>
|
|
<Link
|
|
href={`/admin/${guide.characterKey}`}
|
|
prefetch
|
|
className="absolute inset-0 z-10 rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
>
|
|
<span className="sr-only">แก้ไข Guide {guide.name}</span>
|
|
</Link>
|
|
<div className="relative aspect-square bg-muted">
|
|
<Image
|
|
src={guide.coverUrl}
|
|
alt={`Guide ${guide.name}`}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<CardHeader className="pt-5">
|
|
<CardTitle>{guide.name}</CardTitle>
|
|
<CardDescription className="line-clamp-2">
|
|
{guide.overview}
|
|
</CardDescription>
|
|
<CardAction>
|
|
<div className="flex flex-col items-end gap-1">
|
|
<Badge variant="secondary">v{guide.version}</Badge>
|
|
{(presence?.editorsByGuide[guide.id] ?? []).map((editor) => (
|
|
<Badge key={editor.userId} variant="outline">{editor.name}</Badge>
|
|
))}
|
|
</div>
|
|
</CardAction>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-xs text-muted-foreground">
|
|
แก้ไขล่าสุด{" "}
|
|
{new Date(guide.updatedAt).toLocaleString("th-TH")}
|
|
</p>
|
|
</CardContent>
|
|
<CardFooter className="flex-wrap justify-between gap-2 pb-5">
|
|
<Button
|
|
className="relative z-20"
|
|
render={<Link href={`/admin/${guide.characterKey}`} />}
|
|
nativeButton={false}
|
|
>
|
|
แก้ไข Guide
|
|
</Button>
|
|
<GuideVisibilityControl
|
|
className="relative z-20"
|
|
guideId={guide.id}
|
|
guideName={guide.name}
|
|
isPublic={guide.isPublic}
|
|
/>
|
|
<DeleteConfirmationDialog
|
|
showSuccessToast={false}
|
|
trigger={
|
|
<Button
|
|
className="relative z-20"
|
|
variant="ghost"
|
|
size="icon"
|
|
/>
|
|
}
|
|
title={`ย้าย ${guide.name} ไปถังขยะ?`}
|
|
description="Guide จะหายจากหน้าเว็บไซต์ทันที และสามารถกู้คืนได้ภายหลัง"
|
|
confirmLabel="ย้ายไปถังขยะ"
|
|
onConfirm={() =>
|
|
run(() => moveGuideToTrash(guide.id), "ลบสำเร็จ!")
|
|
}
|
|
>
|
|
<Trash2Icon />
|
|
<span className="sr-only">ย้าย {guide.name} ไปถังขยะ</span>
|
|
</DeleteConfirmationDialog>
|
|
</CardFooter>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Empty className="border">
|
|
<EmptyHeader>
|
|
<EmptyTitle>ยังไม่มี Guide</EmptyTitle>
|
|
<EmptyDescription>
|
|
Sync Catalog แล้วเลือกตัวละครเพื่อสร้าง Guide แรก
|
|
</EmptyDescription>
|
|
</EmptyHeader>
|
|
<EmptyContent>
|
|
<Button
|
|
render={<Link href="/admin/create" />}
|
|
nativeButton={false}
|
|
disabled={!catalogReady}
|
|
>
|
|
สร้าง Guide
|
|
</Button>
|
|
</EmptyContent>
|
|
</Empty>
|
|
)}
|
|
{trash.length ? (
|
|
<section className="flex flex-col gap-4">
|
|
<div>
|
|
<h2 className="font-heading text-xl font-semibold">ถังขยะ</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
Guide ที่ซ่อนไว้จากเว็บไซต์
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
{trash.map((guide) => (
|
|
<Card key={guide.id}>
|
|
<CardHeader>
|
|
<CardTitle>{guide.name}</CardTitle>
|
|
<CardDescription>{guide.overview}</CardDescription>
|
|
<CardAction>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={pending}
|
|
onClick={() =>
|
|
run(
|
|
() => restoreStructuredGuide(guide.id),
|
|
"กู้คืน Guide แล้ว",
|
|
)
|
|
}
|
|
>
|
|
<RotateCcwIcon data-icon="inline-start" />
|
|
กู้คืน
|
|
</Button>
|
|
<DeleteConfirmationDialog
|
|
showSuccessToast={false}
|
|
trigger={
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
disabled={pending}
|
|
/>
|
|
}
|
|
title={`ลบ ${guide.name} ถาวร?`}
|
|
description="ข้อมูล Weapons, Artifacts, Constellations, Team และ Extra ทั้งหมดจะกู้คืนไม่ได้"
|
|
confirmLabel="ยืนยันลบถาวร"
|
|
onConfirm={() =>
|
|
run(
|
|
() => deleteStructuredGuide(guide.id),
|
|
"ลบสำเร็จ!",
|
|
)
|
|
}
|
|
>
|
|
<Trash2Icon data-icon="inline-start" />
|
|
ลบถาวร
|
|
</DeleteConfirmationDialog>
|
|
</div>
|
|
</CardAction>
|
|
</CardHeader>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|