mirror change from https://github.com/binhkid2/FullStack-Blog-Nestjs-Nextjs-Postgres
This commit is contained in:
373
frontend/app/dashboard/components/post-sheet.tsx
Normal file
373
frontend/app/dashboard/components/post-sheet.tsx
Normal file
@@ -0,0 +1,373 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { clientFetch } from "@/lib/api";
|
||||
import { toast } from "sonner";
|
||||
import { BlogPost, PostStatus, ContentFormat, UserRole } from "@/lib/types";
|
||||
import { TiptapEditor } from "@/components/dashboard/tiptap-editor";
|
||||
import { ImageUploader } from "@/components/dashboard/image-uploader";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
} from "@/components/ui/sheet";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Loader2, FileText, Settings2 } from "lucide-react";
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
/** If provided, the sheet is in edit mode. Otherwise, create mode. */
|
||||
post?: BlogPost | null;
|
||||
userRole: UserRole;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
const defaultStatus = (role: UserRole): PostStatus =>
|
||||
role === UserRole.ADMIN ? PostStatus.PUBLISHED : PostStatus.DRAFT;
|
||||
|
||||
export function PostSheet({ open, onOpenChange, post, userRole, onSuccess }: Props) {
|
||||
const isEdit = !!post;
|
||||
|
||||
/* ── form state ─────────────────────────────────────────────────────────── */
|
||||
const [title, setTitle] = useState("");
|
||||
const [slug, setSlug] = useState("");
|
||||
const [excerpt, setExcerpt] = useState("");
|
||||
const [content, setContent] = useState("");
|
||||
const [contentFormat, setContentFormat] = useState<ContentFormat>(ContentFormat.HTML);
|
||||
const [status, setStatus] = useState<PostStatus>(defaultStatus(userRole));
|
||||
const [isFeatured, setIsFeatured] = useState(false);
|
||||
const [categories, setCategories] = useState("");
|
||||
const [tags, setTags] = useState("");
|
||||
const [imageUrl, setImageUrl] = useState("");
|
||||
const [imageAlt, setImageAlt] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
/* ── populate when sheet opens ──────────────────────────────────────────── */
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
if (post) {
|
||||
setTitle(post.title);
|
||||
setSlug(post.slug);
|
||||
setExcerpt(post.excerpt ?? "");
|
||||
setContent(post.content ?? "");
|
||||
setContentFormat(post.contentFormat);
|
||||
setStatus(post.status);
|
||||
setIsFeatured(post.isFeatured);
|
||||
setCategories(post.categories.join(","));
|
||||
setTags(post.tags.join(","));
|
||||
setImageUrl(post.featuredImageUrl ?? "");
|
||||
setImageAlt(post.featuredImageAlt ?? "");
|
||||
} else {
|
||||
setTitle("");
|
||||
setSlug("");
|
||||
setExcerpt("");
|
||||
setContent("");
|
||||
setContentFormat(ContentFormat.HTML);
|
||||
setStatus(defaultStatus(userRole));
|
||||
setIsFeatured(false);
|
||||
setCategories("");
|
||||
setTags("");
|
||||
setImageUrl("");
|
||||
setImageAlt("");
|
||||
}
|
||||
}, [open, post, userRole]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!content || content === "<p></p>") {
|
||||
toast.error("Content cannot be empty.");
|
||||
return;
|
||||
}
|
||||
|
||||
const body = {
|
||||
title: title.trim(),
|
||||
slug: slug.trim() || undefined,
|
||||
excerpt: excerpt.trim() || undefined,
|
||||
content,
|
||||
contentFormat,
|
||||
status: userRole !== UserRole.ADMIN ? PostStatus.DRAFT : status,
|
||||
isFeatured,
|
||||
categories: categories.trim() || undefined,
|
||||
tags: tags.trim() || undefined,
|
||||
featuredImageUrl: imageUrl || undefined,
|
||||
featuredImageAlt: imageAlt || undefined,
|
||||
};
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
if (isEdit && post) {
|
||||
await clientFetch(`/blog-posts/${post.id}`, {
|
||||
method: "PATCH",
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
toast.success("Post updated!");
|
||||
} else {
|
||||
await clientFetch("/blog-posts", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
toast.success("Post created!");
|
||||
}
|
||||
onOpenChange(false);
|
||||
onSuccess();
|
||||
} catch (err: unknown) {
|
||||
toast.error(err instanceof Error ? err.message : "Something went wrong");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const statusColor: Record<PostStatus, string> = {
|
||||
[PostStatus.PUBLISHED]: "text-emerald-600",
|
||||
[PostStatus.DRAFT]: "text-zinc-500",
|
||||
[PostStatus.ARCHIVED]: "text-amber-600",
|
||||
};
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
{/* Wide sheet — takes 60% of screen on large displays */}
|
||||
<SheetContent
|
||||
side="right"
|
||||
className="w-full sm:max-w-2xl lg:max-w-3xl flex flex-col p-0 gap-0"
|
||||
>
|
||||
{/* ── Sheet header ──────────────────────────────────────────────────── */}
|
||||
<SheetHeader className="px-6 py-4 border-b shrink-0">
|
||||
<SheetTitle className="flex items-center gap-2">
|
||||
<FileText className="h-4 w-4 text-muted-foreground" />
|
||||
{isEdit ? "Edit Post" : "New Post"}
|
||||
</SheetTitle>
|
||||
<SheetDescription>
|
||||
{isEdit
|
||||
? `Editing "${post?.title}"`
|
||||
: "Fill in the details below and hit Publish (or save as Draft)."}
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
{/* ── Scrollable form body ──────────────────────────────────────────── */}
|
||||
<form
|
||||
id="post-sheet-form"
|
||||
onSubmit={handleSubmit}
|
||||
className="flex-1 overflow-y-auto"
|
||||
>
|
||||
<div className="px-6 py-5 space-y-5">
|
||||
|
||||
{/* Title + Slug */}
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="ps-title">
|
||||
Title <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="ps-title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="My awesome post"
|
||||
required
|
||||
className="text-base font-medium"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="ps-slug" className="text-muted-foreground text-xs">
|
||||
Slug <span className="text-muted-foreground/60">(auto-generated if empty)</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="ps-slug"
|
||||
value={slug}
|
||||
onChange={(e) => setSlug(e.target.value)}
|
||||
placeholder="my-awesome-post"
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Content editor */}
|
||||
<div className="space-y-1.5">
|
||||
<Label>
|
||||
Content <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<TiptapEditor
|
||||
value={content}
|
||||
onChange={setContent}
|
||||
placeholder="Write your post content here…"
|
||||
minHeight="340px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Excerpt */}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="ps-excerpt">Excerpt</Label>
|
||||
<Textarea
|
||||
id="ps-excerpt"
|
||||
value={excerpt}
|
||||
onChange={(e) => setExcerpt(e.target.value)}
|
||||
placeholder="A short description shown in post listings…"
|
||||
rows={2}
|
||||
className="resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Settings row */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
|
||||
<Settings2 className="h-3.5 w-3.5" />
|
||||
Post settings
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
{/* Status — admin only */}
|
||||
{userRole === UserRole.ADMIN ? (
|
||||
<div className="space-y-1.5">
|
||||
<Label>Status</Label>
|
||||
<Select
|
||||
value={status}
|
||||
onValueChange={(v) => setStatus(v as PostStatus)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={PostStatus.DRAFT}>
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="h-2 w-2 rounded-full bg-zinc-400" />
|
||||
Draft
|
||||
</span>
|
||||
</SelectItem>
|
||||
<SelectItem value={PostStatus.PUBLISHED}>
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="h-2 w-2 rounded-full bg-emerald-500" />
|
||||
Published
|
||||
</span>
|
||||
</SelectItem>
|
||||
<SelectItem value={PostStatus.ARCHIVED}>
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="h-2 w-2 rounded-full bg-amber-500" />
|
||||
Archived
|
||||
</span>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-muted-foreground">Status</Label>
|
||||
<div className="flex h-9 items-center text-sm text-muted-foreground border rounded-md px-3">
|
||||
Saved as Draft (Manager)
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Format */}
|
||||
<div className="space-y-1.5">
|
||||
<Label>Content format</Label>
|
||||
<Select
|
||||
value={contentFormat}
|
||||
onValueChange={(v) => setContentFormat(v as ContentFormat)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={ContentFormat.HTML}>HTML (Tiptap)</SelectItem>
|
||||
<SelectItem value={ContentFormat.MARKDOWN}>Markdown</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Categories + Tags */}
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="ps-cats">Categories</Label>
|
||||
<Input
|
||||
id="ps-cats"
|
||||
value={categories}
|
||||
onChange={(e) => setCategories(e.target.value)}
|
||||
placeholder="tech, tutorials"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="ps-tags">Tags</Label>
|
||||
<Input
|
||||
id="ps-tags"
|
||||
value={tags}
|
||||
onChange={(e) => setTags(e.target.value)}
|
||||
placeholder="nextjs, react"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Featured toggle */}
|
||||
{userRole === UserRole.ADMIN && (
|
||||
<div className="flex items-center justify-between rounded-lg border px-4 py-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium">Featured post</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Shown in the hero/featured section on the home page
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={isFeatured}
|
||||
onCheckedChange={setIsFeatured}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Featured image */}
|
||||
<ImageUploader
|
||||
value={imageUrl}
|
||||
onChange={setImageUrl}
|
||||
altValue={imageAlt}
|
||||
onAltChange={setImageAlt}
|
||||
label="Featured Image"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* ── Sticky footer ────────────────────────────────────────────────── */}
|
||||
<div className="border-t px-6 py-4 flex items-center justify-between gap-3 bg-background shrink-0">
|
||||
{isEdit && (
|
||||
<span className={`text-xs font-medium capitalize ${statusColor[status]}`}>
|
||||
● {status}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex gap-2 ml-auto">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" form="post-sheet-form" disabled={loading}>
|
||||
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{isEdit ? "Save changes" : status === PostStatus.PUBLISHED ? "Publish" : "Save Draft"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user