Add course tree, lesson actions, and module description schema
- CourseTree: expandable module/lesson overview with Eye/Video icons - SortableLessons: Kinescope ID in create form, published toggle, move-to-module dropdown - Actions: toggleLessonPublished, moveLessonToModule, updateModule with description - Schema: add description field to Module model + migration Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -27,7 +27,8 @@ export async function createModule(courseId: string, formData: FormData) {
|
||||
export async function updateModule(moduleId: string, courseId: string, formData: FormData) {
|
||||
await requireAdmin();
|
||||
const title = formData.get("title") as string;
|
||||
await prisma.module.update({ where: { id: moduleId }, data: { title } });
|
||||
const description = (formData.get("description") as string | null)?.trim() || null;
|
||||
await prisma.module.update({ where: { id: moduleId }, data: { title, description } });
|
||||
revalidatePath(`/admin/courses/${courseId}`);
|
||||
}
|
||||
|
||||
|
||||
@@ -14,8 +14,11 @@ async function requireAdmin() {
|
||||
export async function createLesson(moduleId: string, courseId: string, formData: FormData) {
|
||||
await requireAdmin();
|
||||
const title = formData.get("title") as string;
|
||||
const kinescopeId = (formData.get("kinescopeId") as string | null)?.trim() || null;
|
||||
const count = await prisma.lesson.count({ where: { moduleId } });
|
||||
const lesson = await prisma.lesson.create({ data: { moduleId, title, order: count } });
|
||||
const lesson = await prisma.lesson.create({
|
||||
data: { moduleId, title, kinescopeId, order: count },
|
||||
});
|
||||
revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
|
||||
redirect(`/admin/courses/${courseId}/modules/${moduleId}/lessons/${lesson.id}`);
|
||||
}
|
||||
@@ -42,3 +45,46 @@ export async function reorderLessons(moduleId: string, courseId: string, ordered
|
||||
);
|
||||
revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
|
||||
}
|
||||
|
||||
export async function toggleLessonPublished(
|
||||
lessonId: string,
|
||||
courseId: string,
|
||||
moduleId: string,
|
||||
currentValue: boolean
|
||||
) {
|
||||
await requireAdmin();
|
||||
await prisma.lesson.update({
|
||||
where: { id: lessonId },
|
||||
data: { published: !currentValue },
|
||||
});
|
||||
revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
|
||||
revalidatePath(`/admin/courses/${courseId}`);
|
||||
}
|
||||
|
||||
export async function moveLessonToModule(
|
||||
lessonId: string,
|
||||
targetModuleId: string,
|
||||
courseId: string,
|
||||
sourceModuleId: string
|
||||
) {
|
||||
await requireAdmin();
|
||||
// verify target module belongs to same course
|
||||
const target = await prisma.module.findFirst({
|
||||
where: { id: targetModuleId, courseId },
|
||||
});
|
||||
if (!target) throw new Error("Module not found");
|
||||
|
||||
const maxOrder = await prisma.lesson.aggregate({
|
||||
where: { moduleId: targetModuleId },
|
||||
_max: { order: true },
|
||||
});
|
||||
|
||||
await prisma.lesson.update({
|
||||
where: { id: lessonId },
|
||||
data: { moduleId: targetModuleId, order: (maxOrder._max.order ?? -1) + 1 },
|
||||
});
|
||||
|
||||
revalidatePath(`/admin/courses/${courseId}/modules/${sourceModuleId}`);
|
||||
revalidatePath(`/admin/courses/${courseId}/modules/${targetModuleId}`);
|
||||
revalidatePath(`/admin/courses/${courseId}`);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,173 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ChevronDown, ChevronRight, Video, FileText, Eye, EyeOff } from "lucide-react";
|
||||
|
||||
type Lesson = {
|
||||
id: string;
|
||||
title: string;
|
||||
published: boolean;
|
||||
kinescopeId: string | null;
|
||||
};
|
||||
|
||||
type Module = {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string | null;
|
||||
lessons: Lesson[];
|
||||
};
|
||||
|
||||
export function CourseTree({
|
||||
courseId,
|
||||
modules,
|
||||
}: {
|
||||
courseId: string;
|
||||
modules: Module[];
|
||||
}) {
|
||||
// All modules expanded by default
|
||||
const [expanded, setExpanded] = useState<Set<string>>(
|
||||
() => new Set(modules.map((m) => m.id))
|
||||
);
|
||||
|
||||
function toggle(id: string) {
|
||||
setExpanded((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.has(id) ? next.delete(id) : next.add(id);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
const totalLessons = modules.reduce((s, m) => s + m.lessons.length, 0);
|
||||
const publishedLessons = modules.reduce(
|
||||
(s, m) => s + m.lessons.filter((l) => l.published).length,
|
||||
0
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Summary bar */}
|
||||
<div className="flex items-center gap-4 mb-4 text-xs" style={{ color: "var(--muted-foreground)" }}>
|
||||
<span>{modules.length} модулей · {totalLessons} уроков</span>
|
||||
<span
|
||||
className="px-2 py-0.5"
|
||||
style={{ border: "1px solid var(--border)" }}
|
||||
>
|
||||
<Eye size={10} className="inline mr-1" />
|
||||
{publishedLessons} / {totalLessons} опубликовано
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="hover:underline"
|
||||
onClick={() => setExpanded(new Set(modules.map((m) => m.id)))}
|
||||
>
|
||||
Развернуть все
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="hover:underline"
|
||||
onClick={() => setExpanded(new Set())}
|
||||
>
|
||||
Свернуть все
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
{modules.map((mod, mi) => {
|
||||
const isOpen = expanded.has(mod.id);
|
||||
const modPublished = mod.lessons.filter((l) => l.published).length;
|
||||
return (
|
||||
<div key={mod.id} style={{ border: "2px solid var(--border)" }}>
|
||||
{/* Module header */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggle(mod.id)}
|
||||
className="w-full flex items-center gap-2 px-4 py-2.5 text-left"
|
||||
style={{ background: "var(--background)" }}
|
||||
>
|
||||
<span style={{ color: "var(--muted-foreground)", width: 16, flexShrink: 0 }}>
|
||||
{isOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
|
||||
</span>
|
||||
<span className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)", minWidth: 20 }}>
|
||||
{mi + 1}
|
||||
</span>
|
||||
<span className="flex-1 font-medium text-sm">{mod.title}</span>
|
||||
{mod.description && (
|
||||
<span className="text-xs hidden sm:block max-w-xs truncate" style={{ color: "var(--muted-foreground)" }}>
|
||||
{mod.description}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-xs shrink-0" style={{ color: "var(--muted-foreground)" }}>
|
||||
{modPublished}/{mod.lessons.length} уроков
|
||||
</span>
|
||||
<Link
|
||||
href={`/admin/courses/${courseId}/modules/${mod.id}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="text-xs shrink-0 hover:underline ml-2"
|
||||
style={{ color: "var(--muted-foreground)" }}
|
||||
>
|
||||
Редактировать →
|
||||
</Link>
|
||||
</button>
|
||||
|
||||
{/* Lessons list */}
|
||||
{isOpen && (
|
||||
<div style={{ borderTop: "1px solid var(--border)" }}>
|
||||
{mod.lessons.length === 0 ? (
|
||||
<p className="px-10 py-2 text-xs" style={{ color: "var(--muted-foreground)" }}>
|
||||
Уроков нет
|
||||
</p>
|
||||
) : (
|
||||
mod.lessons.map((lesson, li) => (
|
||||
<div
|
||||
key={lesson.id}
|
||||
className="flex items-center gap-2 px-4 py-1.5"
|
||||
style={{
|
||||
borderTop: li > 0 ? "1px solid var(--border)" : undefined,
|
||||
background: "var(--background)",
|
||||
}}
|
||||
>
|
||||
{/* Indent */}
|
||||
<span className="w-5 shrink-0" />
|
||||
{/* Index */}
|
||||
<span className="text-xs w-6 shrink-0 text-right" style={{ color: "var(--muted-foreground)" }}>
|
||||
{li + 1}
|
||||
</span>
|
||||
{/* Published indicator */}
|
||||
<span
|
||||
className="shrink-0"
|
||||
title={lesson.published ? "Опубликован" : "Черновик"}
|
||||
style={{ color: lesson.published ? "#3A6A3A" : "var(--muted-foreground)" }}
|
||||
>
|
||||
{lesson.published ? <Eye size={13} /> : <EyeOff size={13} />}
|
||||
</span>
|
||||
{/* Kinescope indicator */}
|
||||
<span
|
||||
className="shrink-0"
|
||||
title={lesson.kinescopeId ? "Видео прикреплено" : "Без видео"}
|
||||
style={{ color: lesson.kinescopeId ? "#3A6A3A" : "var(--border)" }}
|
||||
>
|
||||
{lesson.kinescopeId ? <Video size={13} /> : <FileText size={13} />}
|
||||
</span>
|
||||
{/* Title */}
|
||||
<span className="flex-1 text-sm truncate">{lesson.title}</span>
|
||||
{/* Edit link */}
|
||||
<Link
|
||||
href={`/admin/courses/${courseId}/modules/${mod.id}/lessons/${lesson.id}`}
|
||||
className="text-xs shrink-0 hover:underline"
|
||||
style={{ color: "var(--muted-foreground)" }}
|
||||
>
|
||||
Ред. →
|
||||
</Link>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -17,23 +17,39 @@ import {
|
||||
} from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import Link from "next/link";
|
||||
import { createLesson, deleteLesson, updateLesson, reorderLessons } from "@/app/admin/courses/[courseId]/modules/[moduleId]/actions";
|
||||
import { Eye, EyeOff, Video } from "lucide-react";
|
||||
import {
|
||||
createLesson,
|
||||
deleteLesson,
|
||||
updateLesson,
|
||||
reorderLessons,
|
||||
toggleLessonPublished,
|
||||
moveLessonToModule,
|
||||
} from "@/app/admin/courses/[courseId]/modules/[moduleId]/actions";
|
||||
|
||||
interface Lesson {
|
||||
id: string;
|
||||
title: string;
|
||||
order: number;
|
||||
published: boolean;
|
||||
kinescopeId: string | null;
|
||||
}
|
||||
|
||||
interface OtherModule {
|
||||
id: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
function SortableLesson({
|
||||
lesson,
|
||||
courseId,
|
||||
moduleId,
|
||||
otherModules,
|
||||
}: {
|
||||
lesson: Lesson;
|
||||
courseId: string;
|
||||
moduleId: string;
|
||||
otherModules: OtherModule[];
|
||||
}) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [editValue, setEditValue] = useState(lesson.title);
|
||||
@@ -59,23 +75,42 @@ function SortableLesson({
|
||||
startTransition(() => deleteLesson(lesson.id, courseId, moduleId));
|
||||
}
|
||||
|
||||
function handleTogglePublished() {
|
||||
startTransition(() => toggleLessonPublished(lesson.id, courseId, moduleId, lesson.published));
|
||||
}
|
||||
|
||||
function handleMove(targetModuleId: string) {
|
||||
if (!targetModuleId) return;
|
||||
startTransition(() => moveLessonToModule(lesson.id, targetModuleId, courseId, moduleId));
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={{ ...style, border: "2px solid var(--border)", background: "var(--color-surface)" }}
|
||||
className="flex items-center gap-3 px-4 py-3"
|
||||
style={{ ...style, border: "2px solid var(--border)", background: "var(--color-surface)", opacity: pending ? 0.5 : 1 }}
|
||||
className="flex items-center gap-2 px-3 py-2.5"
|
||||
>
|
||||
{/* Drag handle */}
|
||||
<button
|
||||
type="button"
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className="cursor-grab active:cursor-grabbing text-lg select-none"
|
||||
className="cursor-grab active:cursor-grabbing text-lg select-none shrink-0"
|
||||
style={{ color: "var(--muted-foreground)" }}
|
||||
aria-label="Перетащить"
|
||||
>
|
||||
⠿
|
||||
</button>
|
||||
|
||||
{/* Kinescope indicator */}
|
||||
<span
|
||||
title={lesson.kinescopeId ? `Kinescope: ${lesson.kinescopeId}` : "Без видео"}
|
||||
className="shrink-0"
|
||||
style={{ color: lesson.kinescopeId ? "#3A6A3A" : "var(--border)" }}
|
||||
>
|
||||
<Video size={13} />
|
||||
</span>
|
||||
|
||||
{editing ? (
|
||||
<form onSubmit={handleUpdate} className="flex items-center gap-2 flex-1">
|
||||
<input
|
||||
@@ -101,36 +136,72 @@ function SortableLesson({
|
||||
</form>
|
||||
) : (
|
||||
<>
|
||||
<span className="flex-1 font-medium text-sm">{lesson.title}</span>
|
||||
<span
|
||||
className="text-xs px-2 py-0.5"
|
||||
<span className="flex-1 text-sm truncate">{lesson.title}</span>
|
||||
|
||||
{/* Published toggle */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleTogglePublished}
|
||||
disabled={pending}
|
||||
title={lesson.published ? "Скрыть" : "Опубликовать"}
|
||||
className="shrink-0 flex items-center gap-1 text-xs px-2 py-0.5 transition-opacity hover:opacity-70"
|
||||
style={{
|
||||
border: "1px solid var(--border)",
|
||||
color: lesson.published ? "var(--foreground)" : "var(--muted-foreground)",
|
||||
background: lesson.published ? "var(--accent)" : "transparent",
|
||||
color: lesson.published ? "var(--foreground)" : "var(--muted-foreground)",
|
||||
}}
|
||||
>
|
||||
{lesson.published ? "Опубликован" : "Черновик"}
|
||||
</span>
|
||||
{lesson.published ? <Eye size={11} /> : <EyeOff size={11} />}
|
||||
{lesson.published ? "Опубл." : "Черновик"}
|
||||
</button>
|
||||
|
||||
{/* Edit */}
|
||||
<Link
|
||||
href={`/admin/courses/${courseId}/modules/${moduleId}/lessons/${lesson.id}`}
|
||||
className="btn-aubade text-xs px-3 py-1"
|
||||
className="btn-aubade text-xs px-3 py-1 shrink-0"
|
||||
>
|
||||
Редактировать →
|
||||
Ред. →
|
||||
</Link>
|
||||
|
||||
{/* Rename */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditing(true)}
|
||||
className="text-xs"
|
||||
className="text-xs shrink-0"
|
||||
style={{ color: "var(--muted-foreground)" }}
|
||||
>
|
||||
Переименовать
|
||||
Переим.
|
||||
</button>
|
||||
|
||||
{/* Move to module */}
|
||||
{otherModules.length > 0 && (
|
||||
<select
|
||||
defaultValue=""
|
||||
onChange={(e) => handleMove(e.target.value)}
|
||||
className="text-xs shrink-0"
|
||||
style={{
|
||||
border: "1px solid var(--border)",
|
||||
background: "var(--background)",
|
||||
color: "var(--muted-foreground)",
|
||||
padding: "2px 4px",
|
||||
cursor: "pointer",
|
||||
maxWidth: 120,
|
||||
}}
|
||||
title="Переместить в модуль"
|
||||
>
|
||||
<option value="" disabled>Переместить…</option>
|
||||
{otherModules.map((m) => (
|
||||
<option key={m.id} value={m.id}>{m.title}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
|
||||
{/* Delete */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDelete}
|
||||
disabled={pending}
|
||||
className="text-xs"
|
||||
className="text-xs shrink-0"
|
||||
style={{ color: "oklch(0.577 0.245 27.325)" }}
|
||||
>
|
||||
Удалить
|
||||
@@ -145,10 +216,12 @@ export function SortableLessons({
|
||||
courseId,
|
||||
moduleId,
|
||||
lessons,
|
||||
otherModules = [],
|
||||
}: {
|
||||
courseId: string;
|
||||
moduleId: string;
|
||||
lessons: Lesson[];
|
||||
otherModules?: OtherModule[];
|
||||
}) {
|
||||
const [items, setItems] = useState(lessons);
|
||||
const [creating, startTransition] = useTransition();
|
||||
@@ -158,7 +231,6 @@ export function SortableLessons({
|
||||
function handleDragEnd(event: DragEndEvent) {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
|
||||
const oldIndex = items.findIndex((l) => l.id === active.id);
|
||||
const newIndex = items.findIndex((l) => l.id === over.id);
|
||||
const newItems = arrayMove(items, oldIndex, newIndex);
|
||||
@@ -178,7 +250,13 @@ export function SortableLessons({
|
||||
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
|
||||
<SortableContext items={items.map((l) => l.id)} strategy={verticalListSortingStrategy}>
|
||||
{items.map((lesson) => (
|
||||
<SortableLesson key={lesson.id} lesson={lesson} courseId={courseId} moduleId={moduleId} />
|
||||
<SortableLesson
|
||||
key={lesson.id}
|
||||
lesson={lesson}
|
||||
courseId={courseId}
|
||||
moduleId={moduleId}
|
||||
otherModules={otherModules}
|
||||
/>
|
||||
))}
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
@@ -189,20 +267,32 @@ export function SortableLessons({
|
||||
</p>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleCreate} className="flex gap-2 pt-3">
|
||||
<input
|
||||
name="title"
|
||||
placeholder="Название нового урока"
|
||||
required
|
||||
disabled={creating}
|
||||
className="flex-1 max-w-xs px-3 py-2 text-sm"
|
||||
style={{ border: "2px solid var(--border)", background: "var(--background)", outline: "none" }}
|
||||
onFocus={(e) => (e.currentTarget.style.borderColor = "var(--foreground)")}
|
||||
onBlur={(e) => (e.currentTarget.style.borderColor = "var(--border)")}
|
||||
/>
|
||||
<button type="submit" disabled={creating} className="btn-aubade text-xs px-4 py-2">
|
||||
{creating ? "Создание..." : "+ Урок"}
|
||||
</button>
|
||||
{/* Quick create form */}
|
||||
<form onSubmit={handleCreate} className="pt-3 space-y-2">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
name="title"
|
||||
placeholder="Название урока"
|
||||
required
|
||||
disabled={creating}
|
||||
className="flex-1 max-w-xs px-3 py-2 text-sm"
|
||||
style={{ border: "2px solid var(--border)", background: "var(--background)", outline: "none" }}
|
||||
onFocus={(e) => (e.currentTarget.style.borderColor = "var(--foreground)")}
|
||||
onBlur={(e) => (e.currentTarget.style.borderColor = "var(--border)")}
|
||||
/>
|
||||
<input
|
||||
name="kinescopeId"
|
||||
placeholder="Kinescope ID (опционально)"
|
||||
disabled={creating}
|
||||
className="flex-1 max-w-xs px-3 py-2 text-sm font-mono"
|
||||
style={{ border: "2px solid var(--border)", background: "var(--background)", outline: "none" }}
|
||||
onFocus={(e) => (e.currentTarget.style.borderColor = "var(--foreground)")}
|
||||
onBlur={(e) => (e.currentTarget.style.borderColor = "var(--border)")}
|
||||
/>
|
||||
<button type="submit" disabled={creating} className="btn-aubade text-xs px-4 py-2 shrink-0">
|
||||
{creating ? "Создание..." : "+ Урок"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user