98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { EyeIcon, EyeOffIcon } from "lucide-react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useTransition } from "react";
|
|
import { toast } from "sonner";
|
|
|
|
import { setStructuredGuideVisibility } from "@/app/admin/actions";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function GuideVisibilityControl({
|
|
guideId,
|
|
guideName,
|
|
isPublic,
|
|
className,
|
|
}: {
|
|
guideId: string;
|
|
guideName: string;
|
|
isPublic: boolean;
|
|
className?: string;
|
|
}) {
|
|
const router = useRouter();
|
|
const [pending, startTransition] = useTransition();
|
|
|
|
const updateVisibility = (nextPublic: boolean) => {
|
|
startTransition(async () => {
|
|
const result = await setStructuredGuideVisibility(guideId, nextPublic);
|
|
if (result.status !== "saved") {
|
|
toast.error(result.message ?? "เปลี่ยนสถานะ Guide ไม่สำเร็จ");
|
|
return;
|
|
}
|
|
toast.success(nextPublic ? "เผยแพร่ Guide แล้ว" : "เปลี่ยน Guide เป็น Private แล้ว");
|
|
router.refresh();
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className={cn("flex flex-wrap items-center gap-2", className)}>
|
|
<Badge variant={isPublic ? "default" : "secondary"}>
|
|
{isPublic ? "Public" : "Private"}
|
|
</Badge>
|
|
{isPublic ? (
|
|
<AlertDialog>
|
|
<AlertDialogTrigger
|
|
render={
|
|
<Button type="button" variant="outline" size="sm" disabled={pending} />
|
|
}
|
|
>
|
|
{pending ? <Spinner data-icon="inline-start" /> : <EyeOffIcon data-icon="inline-start" />}
|
|
Make private
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>เปลี่ยน {guideName} เป็น Private?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Guide จะหายจากหน้าเว็บไซต์และลิงก์สาธารณะจะเปิดไม่ได้ แต่ยังแก้ไขได้ใน Admin
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>ยกเลิก</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
variant="destructive"
|
|
onClick={() => updateVisibility(false)}
|
|
>
|
|
ยืนยัน Private
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
) : (
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
disabled={pending}
|
|
onClick={() => updateVisibility(true)}
|
|
>
|
|
{pending ? <Spinner data-icon="inline-start" /> : <EyeIcon data-icon="inline-start" />}
|
|
Make Publish
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|