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>
2026-04-08 13:32:30 +05:00
parent f0024c4243
commit 768a38b9d3
6 changed files with 351 additions and 39 deletions
@@ -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>
  );