349 lines
13 KiB
TypeScript
349 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useMemo, useState } from "react"
|
|
import { GitMerge, Loader2, Pencil, Plus, Save, Tag, Trash2, X } from "lucide-react"
|
|
import { toast } from "sonner"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog"
|
|
|
|
interface Genre {
|
|
id: string
|
|
name: string
|
|
slug: string
|
|
description?: string | null
|
|
icon?: string | null
|
|
novelCount?: number
|
|
}
|
|
|
|
export function GenreClient() {
|
|
const [genres, setGenres] = useState<Genre[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [submitting, setSubmitting] = useState(false)
|
|
const [keyword, setKeyword] = useState("")
|
|
|
|
// Form state
|
|
const [editingId, setEditingId] = useState<string | null>(null)
|
|
const [formName, setFormName] = useState("")
|
|
const [formDesc, setFormDesc] = useState("")
|
|
const [formIcon, setFormIcon] = useState("")
|
|
|
|
// Merge dialog
|
|
const [mergeOpen, setMergeOpen] = useState(false)
|
|
const [mergeSource, setMergeSource] = useState<Genre | null>(null)
|
|
const [mergeTargetId, setMergeTargetId] = useState("")
|
|
const [mergeKeyword, setMergeKeyword] = useState("")
|
|
|
|
// Delete confirm
|
|
const [deleteTarget, setDeleteTarget] = useState<Genre | null>(null)
|
|
const [deleteOpen, setDeleteOpen] = useState(false)
|
|
|
|
const filtered = useMemo(() => {
|
|
const q = keyword.trim().toLowerCase()
|
|
if (!q) return genres
|
|
return genres.filter(
|
|
(g) =>
|
|
g.name.toLowerCase().includes(q) ||
|
|
g.slug.toLowerCase().includes(q)
|
|
)
|
|
}, [keyword, genres])
|
|
|
|
const mergeTargetOptions = useMemo(() => {
|
|
const q = mergeKeyword.trim().toLowerCase()
|
|
return genres.filter(
|
|
(g) =>
|
|
g.id !== mergeSource?.id &&
|
|
(!q || g.name.toLowerCase().includes(q) || g.slug.toLowerCase().includes(q))
|
|
)
|
|
}, [genres, mergeSource, mergeKeyword])
|
|
|
|
const fetchGenres = async () => {
|
|
try {
|
|
const res = await fetch("/api/mod/the-loai")
|
|
if (!res.ok) throw new Error("Không thể tải danh sách thể loại")
|
|
const data: Genre[] = await res.json()
|
|
// Enrich with novelCount from public endpoint
|
|
const countRes = await fetch("/api/genres")
|
|
if (countRes.ok) {
|
|
const countData: Genre[] = await countRes.json()
|
|
const countMap = Object.fromEntries(countData.map((g) => [g.id, g.novelCount ?? 0]))
|
|
data.forEach((g) => { g.novelCount = countMap[g.id] ?? 0 })
|
|
}
|
|
setGenres(data)
|
|
} catch (err: any) {
|
|
toast.error(err.message || "Lỗi tải thể loại")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => { fetchGenres() }, [])
|
|
|
|
const resetForm = () => {
|
|
setEditingId(null)
|
|
setFormName("")
|
|
setFormDesc("")
|
|
setFormIcon("")
|
|
}
|
|
|
|
const handleEdit = (g: Genre) => {
|
|
setEditingId(g.id)
|
|
setFormName(g.name)
|
|
setFormDesc(g.description || "")
|
|
setFormIcon(g.icon || "")
|
|
window.scrollTo({ top: 0, behavior: "smooth" })
|
|
}
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!formName.trim()) { toast.error("Vui lòng nhập tên thể loại"); return }
|
|
|
|
setSubmitting(true)
|
|
try {
|
|
const payload: Record<string, any> = {
|
|
name: formName.trim(),
|
|
description: formDesc.trim() || null,
|
|
icon: formIcon.trim() || null,
|
|
}
|
|
if (editingId) payload.id = editingId
|
|
|
|
const res = await fetch("/api/mod/the-loai", {
|
|
method: editingId ? "PUT" : "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload),
|
|
})
|
|
const data = await res.json()
|
|
if (!res.ok) throw new Error(data.detail || "Không thể lưu")
|
|
toast.success(editingId ? "Đã cập nhật thể loại" : "Đã tạo thể loại")
|
|
resetForm()
|
|
fetchGenres()
|
|
} catch (err: any) {
|
|
toast.error(err.message)
|
|
} finally {
|
|
setSubmitting(false)
|
|
}
|
|
}
|
|
|
|
const confirmDelete = (g: Genre) => {
|
|
setDeleteTarget(g)
|
|
setDeleteOpen(true)
|
|
}
|
|
|
|
const handleDelete = async () => {
|
|
if (!deleteTarget) return
|
|
setSubmitting(true)
|
|
try {
|
|
const res = await fetch(`/api/mod/the-loai?id=${deleteTarget.id}`, { method: "DELETE" })
|
|
const data = await res.json()
|
|
if (!res.ok) throw new Error(data.detail || "Không thể xóa")
|
|
toast.success(`Đã xóa thể loại "${deleteTarget.name}"`)
|
|
if (editingId === deleteTarget.id) resetForm()
|
|
setDeleteOpen(false)
|
|
fetchGenres()
|
|
} catch (err: any) {
|
|
toast.error(err.message)
|
|
} finally {
|
|
setSubmitting(false)
|
|
}
|
|
}
|
|
|
|
const openMerge = (g: Genre) => {
|
|
setMergeSource(g)
|
|
setMergeTargetId("")
|
|
setMergeKeyword("")
|
|
setMergeOpen(true)
|
|
}
|
|
|
|
const handleMerge = async () => {
|
|
if (!mergeSource || !mergeTargetId) { toast.error("Vui lòng chọn thể loại đích"); return }
|
|
setSubmitting(true)
|
|
try {
|
|
const res = await fetch("/api/mod/the-loai/merge", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ sourceId: mergeSource.id, targetId: mergeTargetId }),
|
|
})
|
|
const data = await res.json()
|
|
if (!res.ok) throw new Error(data.detail || "Không thể gộp")
|
|
const target = genres.find((g) => g.id === mergeTargetId)
|
|
toast.success(`Đã gộp "${mergeSource.name}" vào "${target?.name}"`)
|
|
setMergeOpen(false)
|
|
if (editingId === mergeSource.id) resetForm()
|
|
fetchGenres()
|
|
} catch (err: any) {
|
|
toast.error(err.message)
|
|
} finally {
|
|
setSubmitting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-3">
|
|
<Tag className="h-6 w-6 text-primary" />
|
|
<h1 className="text-2xl font-bold">Quản lý Thể Loại</h1>
|
|
</div>
|
|
|
|
{/* Form tạo / chỉnh sửa */}
|
|
<form onSubmit={handleSubmit} className="rounded-xl border bg-card p-5 space-y-4">
|
|
<h2 className="font-semibold text-base">{editingId ? "Chỉnh sửa thể loại" : "Tạo thể loại mới"}</h2>
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div className="space-y-1">
|
|
<label className="text-sm font-medium">Tên thể loại <span className="text-destructive">*</span></label>
|
|
<Input value={formName} onChange={(e) => setFormName(e.target.value)} placeholder="Ví dụ: Kiếm Hiệp" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<label className="text-sm font-medium">Icon (tên Lucide)</label>
|
|
<Input value={formIcon} onChange={(e) => setFormIcon(e.target.value)} placeholder="Ví dụ: Sword, Flame, Heart..." />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<label className="text-sm font-medium">Mô tả</label>
|
|
<Textarea value={formDesc} onChange={(e) => setFormDesc(e.target.value)} placeholder="Mô tả ngắn về thể loại..." rows={2} />
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button type="submit" disabled={submitting} size="sm">
|
|
{submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : editingId ? <Save className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
|
|
<span className="ml-1">{editingId ? "Lưu thay đổi" : "Tạo thể loại"}</span>
|
|
</Button>
|
|
{editingId && (
|
|
<Button type="button" variant="ghost" size="sm" onClick={resetForm}>
|
|
<X className="h-4 w-4" /><span className="ml-1">Hủy</span>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</form>
|
|
|
|
{/* Danh sách */}
|
|
<div className="rounded-xl border bg-card">
|
|
<div className="flex items-center gap-3 border-b px-5 py-3">
|
|
<Input
|
|
placeholder="Tìm theo tên, slug..."
|
|
value={keyword}
|
|
onChange={(e) => setKeyword(e.target.value)}
|
|
className="max-w-xs h-8 text-sm"
|
|
/>
|
|
<span className="ml-auto text-sm text-muted-foreground whitespace-nowrap">{filtered.length} / {genres.length} thể loại</span>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-16">
|
|
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : filtered.length === 0 ? (
|
|
<div className="py-16 text-center text-sm text-muted-foreground">Không tìm thấy thể loại nào</div>
|
|
) : (
|
|
<div className="divide-y">
|
|
{filtered.map((g) => (
|
|
<div key={g.id} className={`flex items-center gap-3 px-5 py-3 hover:bg-muted/40 transition-colors ${editingId === g.id ? "bg-primary/5" : ""}`}>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium text-sm truncate">{g.name}</p>
|
|
<p className="text-xs text-muted-foreground truncate">{g.slug}{g.description ? ` · ${g.description}` : ""}</p>
|
|
</div>
|
|
<span className="text-xs text-muted-foreground whitespace-nowrap shrink-0">
|
|
{g.novelCount ?? 0} truyện
|
|
</span>
|
|
<div className="flex gap-1 shrink-0">
|
|
<Button variant="ghost" size="icon" className="h-7 w-7" title="Chỉnh sửa" onClick={() => handleEdit(g)}>
|
|
<Pencil className="h-3.5 w-3.5" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" className="h-7 w-7" title="Gộp thể loại" onClick={() => openMerge(g)}>
|
|
<GitMerge className="h-3.5 w-3.5" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" className="h-7 w-7 text-destructive hover:text-destructive" title="Xóa" onClick={() => confirmDelete(g)}>
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Dialog xóa */}
|
|
<Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Xác nhận xóa thể loại</DialogTitle>
|
|
<DialogDescription>
|
|
Thể loại <strong>"{deleteTarget?.name}"</strong> sẽ bị xóa vĩnh viễn
|
|
{(deleteTarget?.novelCount ?? 0) > 0 && (
|
|
<> và bị gỡ khỏi <strong>{deleteTarget?.novelCount} truyện</strong></>
|
|
)}. Hành động này không thể hoàn tác.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button variant="ghost" onClick={() => setDeleteOpen(false)}>Hủy</Button>
|
|
<Button variant="destructive" disabled={submitting} onClick={handleDelete}>
|
|
{submitting ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : null}
|
|
Xóa
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Dialog gộp */}
|
|
<Dialog open={mergeOpen} onOpenChange={setMergeOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Gộp thể loại</DialogTitle>
|
|
<DialogDescription>
|
|
Tất cả truyện của <strong>"{mergeSource?.name}"</strong> sẽ được chuyển sang thể loại đích,
|
|
sau đó <strong>"{mergeSource?.name}"</strong> sẽ bị xóa.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-3 my-2">
|
|
<div className="rounded-md border bg-muted/40 px-3 py-2 text-sm">
|
|
<span className="text-muted-foreground">Nguồn (sẽ bị xóa): </span>
|
|
<strong>{mergeSource?.name}</strong>
|
|
{(mergeSource?.novelCount ?? 0) > 0 && <span className="text-muted-foreground"> · {mergeSource?.novelCount} truyện</span>}
|
|
</div>
|
|
|
|
<Input
|
|
placeholder="Tìm thể loại đích..."
|
|
value={mergeKeyword}
|
|
onChange={(e) => setMergeKeyword(e.target.value)}
|
|
className="h-8 text-sm"
|
|
/>
|
|
|
|
<div className="max-h-52 overflow-y-auto rounded-md border divide-y">
|
|
{mergeTargetOptions.length === 0 ? (
|
|
<p className="py-4 text-center text-sm text-muted-foreground">Không có thể loại nào</p>
|
|
) : (
|
|
mergeTargetOptions.map((g) => (
|
|
<button
|
|
key={g.id}
|
|
type="button"
|
|
onClick={() => setMergeTargetId(g.id)}
|
|
className={`w-full flex items-center gap-2 px-3 py-2 text-sm text-left hover:bg-muted transition-colors ${mergeTargetId === g.id ? "bg-primary/10 font-medium" : ""}`}
|
|
>
|
|
<span className="flex-1">{g.name}</span>
|
|
<span className="text-xs text-muted-foreground shrink-0">{g.novelCount ?? 0} truyện</span>
|
|
</button>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="ghost" onClick={() => setMergeOpen(false)}>Hủy</Button>
|
|
<Button disabled={!mergeTargetId || submitting} onClick={handleMerge}>
|
|
{submitting ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <GitMerge className="h-4 w-4 mr-1" />}
|
|
Gộp thể loại
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|