58 lines
2.4 KiB
TypeScript
58 lines
2.4 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useTransition } from "react";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Button } from "@/components/ui/button";
|
||
import { updateCategory, deleteCategory } from "@/app/admin/categories/actions";
|
||
|
||
interface Props {
|
||
category: { id: string; title: string; slug: string };
|
||
courseCount: number;
|
||
}
|
||
|
||
export function CategoryRow({ category, courseCount }: Props) {
|
||
const [editing, setEditing] = useState(false);
|
||
const [pending, startTransition] = useTransition();
|
||
|
||
function handleUpdate(e: React.FormEvent<HTMLFormElement>) {
|
||
e.preventDefault();
|
||
const fd = new FormData(e.currentTarget);
|
||
startTransition(() => updateCategory(category.id, fd));
|
||
setEditing(false);
|
||
}
|
||
|
||
function handleDelete() {
|
||
if (courseCount > 0) {
|
||
alert(`Нельзя удалить: к категории привязано ${courseCount} курсов`);
|
||
return;
|
||
}
|
||
if (!confirm(`Удалить категорию «${category.title}»?`)) return;
|
||
startTransition(() => deleteCategory(category.id));
|
||
}
|
||
|
||
return (
|
||
<div className="flex items-center gap-3 px-4 py-3" style={{ border: "2px solid var(--border)", background: "var(--background)" }}>
|
||
{editing ? (
|
||
<form onSubmit={handleUpdate} className="flex items-center gap-2 flex-1">
|
||
<Input name="title" defaultValue={category.title} required className="h-8 text-sm" />
|
||
<Input name="slug" defaultValue={category.slug} className="h-8 text-sm w-36" />
|
||
<Button type="submit" size="sm" disabled={pending}>Сохранить</Button>
|
||
<Button type="button" variant="ghost" size="sm" onClick={() => setEditing(false)}>✕</Button>
|
||
</form>
|
||
) : (
|
||
<>
|
||
<span className="flex-1 font-medium" style={{ color: "var(--foreground)" }}>{category.title}</span>
|
||
<span className="text-xs font-mono" style={{ color: "var(--muted-foreground)" }}>/{category.slug}</span>
|
||
<span className="text-xs" style={{ color: "var(--muted-foreground)" }}>{courseCount} курсов</span>
|
||
<button onClick={() => setEditing(true)} className="text-xs underline" style={{ color: "var(--muted-foreground)" }}>
|
||
Редакт.
|
||
</button>
|
||
<button onClick={handleDelete} disabled={pending} className="text-xs" style={{ color: "oklch(0.577 0.245 27.325)" }}>
|
||
Удалить
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|