Add lesson progress tracking
- Toggle lesson completion via server action (LessonProgress table) - "Отметить как пройденный" button on lesson page, turns accent when done - Course sidebar: progress bar, checkmarks on completed lessons, X/Y counter per module - Dashboard: progress bar on each course card with completion percentage Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -47,9 +47,20 @@ export default async function CourseLayout({ children, params }: Props) {
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch completed lesson IDs for this user
|
||||
const allLessonIds = course.modules.flatMap((m) => m.lessons.map((l) => l.id));
|
||||
const progressRecords = isAdmin
|
||||
? []
|
||||
: await prisma.lessonProgress.findMany({
|
||||
where: { userId: session.user.id, lessonId: { in: allLessonIds } },
|
||||
select: { lessonId: true },
|
||||
});
|
||||
|
||||
const completedLessonIds = new Set(progressRecords.map((p) => p.lessonId));
|
||||
|
||||
return (
|
||||
<div className="flex flex-1">
|
||||
<CourseSidebar course={course} />
|
||||
<CourseSidebar course={course} completedLessonIds={completedLessonIds} />
|
||||
<main className="flex-1 min-w-0 overflow-y-auto">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
"use server";
|
||||
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { headers } from "next/headers";
|
||||
import { revalidatePath } from "next/cache";
|
||||
|
||||
export async function toggleLessonProgress(lessonId: string, slug: string) {
|
||||
const session = await auth.api.getSession({ headers: await headers() });
|
||||
if (!session) throw new Error("Unauthorized");
|
||||
|
||||
const existing = await prisma.lessonProgress.findUnique({
|
||||
where: { userId_lessonId: { userId: session.user.id, lessonId } },
|
||||
});
|
||||
|
||||
if (existing) {
|
||||
await prisma.lessonProgress.delete({
|
||||
where: { userId_lessonId: { userId: session.user.id, lessonId } },
|
||||
});
|
||||
} else {
|
||||
await prisma.lessonProgress.create({
|
||||
data: { userId: session.user.id, lessonId },
|
||||
});
|
||||
}
|
||||
|
||||
revalidatePath(`/courses/${slug}/lessons/${lessonId}`);
|
||||
revalidatePath(`/courses/${slug}`);
|
||||
revalidatePath("/dashboard");
|
||||
}
|
||||
@@ -5,6 +5,7 @@ import { headers } from "next/headers";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { KinescopePlayer } from "@/components/player/kinescope-player";
|
||||
import { LessonContent } from "@/components/student/lesson-content";
|
||||
import { LessonCompleteButton } from "@/components/student/lesson-complete-button";
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ slug: string; lessonId: string }>;
|
||||
@@ -16,21 +17,23 @@ export default async function LessonPage({ params }: Props) {
|
||||
const session = await auth.api.getSession({ headers: await headers() });
|
||||
const isAdmin = session?.user.role === "admin";
|
||||
|
||||
const lesson = await prisma.lesson.findUnique({
|
||||
where: { id: lessonId, ...(isAdmin ? {} : { published: true }) },
|
||||
include: {
|
||||
files: { orderBy: { createdAt: "asc" } },
|
||||
module: {
|
||||
include: {
|
||||
course: {
|
||||
include: {
|
||||
modules: {
|
||||
orderBy: { order: "asc" },
|
||||
include: {
|
||||
lessons: {
|
||||
where: { published: true },
|
||||
orderBy: { order: "asc" },
|
||||
select: { id: true, title: true },
|
||||
const [lesson, progress] = await Promise.all([
|
||||
prisma.lesson.findUnique({
|
||||
where: { id: lessonId, ...(isAdmin ? {} : { published: true }) },
|
||||
include: {
|
||||
files: { orderBy: { createdAt: "asc" } },
|
||||
module: {
|
||||
include: {
|
||||
course: {
|
||||
include: {
|
||||
modules: {
|
||||
orderBy: { order: "asc" },
|
||||
include: {
|
||||
lessons: {
|
||||
where: { published: true },
|
||||
orderBy: { order: "asc" },
|
||||
select: { id: true, title: true },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -38,11 +41,18 @@ export default async function LessonPage({ params }: Props) {
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}),
|
||||
session && !isAdmin
|
||||
? prisma.lessonProgress.findUnique({
|
||||
where: { userId_lessonId: { userId: session.user.id, lessonId } },
|
||||
})
|
||||
: null,
|
||||
]);
|
||||
|
||||
if (!lesson || lesson.module.course.slug !== slug) notFound();
|
||||
|
||||
const isCompleted = !!progress;
|
||||
|
||||
// Build ordered flat list of all lessons for prev/next
|
||||
const allLessons = lesson.module.course.modules.flatMap((m) => m.lessons);
|
||||
const idx = allLessons.findIndex((l) => l.id === lessonId);
|
||||
@@ -108,7 +118,7 @@ export default async function LessonPage({ params }: Props) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Prev / Next navigation */}
|
||||
{/* Complete button + Prev/Next navigation */}
|
||||
<div
|
||||
className="flex items-center justify-between pt-6 mt-6"
|
||||
style={{ borderTop: "2px solid var(--border)" }}
|
||||
@@ -116,23 +126,28 @@ export default async function LessonPage({ params }: Props) {
|
||||
{prevLesson ? (
|
||||
<Link
|
||||
href={`/courses/${slug}/lessons/${prevLesson.id}`}
|
||||
className="btn-aubade text-sm max-w-[45%]"
|
||||
className="btn-aubade text-sm max-w-[40%]"
|
||||
>
|
||||
← {prevLesson.title}
|
||||
</Link>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
|
||||
{!isAdmin && (
|
||||
<LessonCompleteButton lessonId={lessonId} slug={slug} isCompleted={isCompleted} />
|
||||
)}
|
||||
|
||||
{nextLesson ? (
|
||||
<Link
|
||||
href={`/courses/${slug}/lessons/${nextLesson.id}`}
|
||||
className="btn-aubade btn-aubade-accent text-sm max-w-[45%] text-right"
|
||||
className="btn-aubade btn-aubade-accent text-sm max-w-[40%] text-right"
|
||||
>
|
||||
{nextLesson.title} →
|
||||
</Link>
|
||||
) : (
|
||||
<div className="text-sm" style={{ color: "var(--muted-foreground)" }}>
|
||||
Последний урок курса
|
||||
{isAdmin ? "Последний урок курса" : ""}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -14,7 +14,12 @@ export default async function StudentDashboard() {
|
||||
course: {
|
||||
include: {
|
||||
modules: {
|
||||
include: { _count: { select: { lessons: true } } },
|
||||
include: {
|
||||
lessons: {
|
||||
where: { published: true },
|
||||
select: { id: true },
|
||||
},
|
||||
},
|
||||
},
|
||||
_count: { select: { modules: true } },
|
||||
},
|
||||
@@ -27,6 +32,18 @@ export default async function StudentDashboard() {
|
||||
const active = enrollments.filter((e) => !e.expiresAt || e.expiresAt > now);
|
||||
const expired = enrollments.filter((e) => e.expiresAt && e.expiresAt <= now);
|
||||
|
||||
// Fetch progress for all lessons in active courses
|
||||
const allLessonIds = active.flatMap((e) =>
|
||||
e.course.modules.flatMap((m) => m.lessons.map((l) => l.id))
|
||||
);
|
||||
const progressRecords = allLessonIds.length > 0
|
||||
? await prisma.lessonProgress.findMany({
|
||||
where: { userId: session.user.id, lessonId: { in: allLessonIds } },
|
||||
select: { lessonId: true },
|
||||
})
|
||||
: [];
|
||||
const completedSet = new Set(progressRecords.map((p) => p.lessonId));
|
||||
|
||||
return (
|
||||
<main className="max-w-4xl mx-auto px-6 py-10 w-full">
|
||||
<h1 className="text-2xl font-bold mb-1">Мои курсы</h1>
|
||||
@@ -45,7 +62,14 @@ export default async function StudentDashboard() {
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{active.map(({ course, expiresAt }) => {
|
||||
const totalLessons = course.modules.reduce((s, m) => s + m._count.lessons, 0);
|
||||
const totalLessons = course.modules.reduce((s, m) => s + m.lessons.length, 0);
|
||||
const completedLessons = course.modules
|
||||
.flatMap((m) => m.lessons)
|
||||
.filter((l) => completedSet.has(l.id)).length;
|
||||
const progressPct = totalLessons > 0
|
||||
? Math.round((completedLessons / totalLessons) * 100)
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={course.id}
|
||||
@@ -60,23 +84,46 @@ export default async function StudentDashboard() {
|
||||
📚
|
||||
</div>
|
||||
)}
|
||||
<div className="p-4 flex-1">
|
||||
<div className="p-4 flex-1 flex flex-col gap-2">
|
||||
<h2 className="font-bold text-base leading-tight">{course.title}</h2>
|
||||
{course.description && (
|
||||
<p className="text-xs mt-1 line-clamp-2" style={{ color: "var(--muted-foreground)" }}>
|
||||
<p className="text-xs line-clamp-2" style={{ color: "var(--muted-foreground)" }}>
|
||||
{course.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center justify-between mt-3">
|
||||
<span className="text-xs" style={{ color: "var(--muted-foreground)" }}>
|
||||
{course._count.modules} модулей · {totalLessons} уроков
|
||||
</span>
|
||||
{expiresAt && (
|
||||
<span className="text-xs" style={{ color: "var(--muted-foreground)" }}>
|
||||
до {new Date(expiresAt).toLocaleDateString("ru-RU")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
{totalLessons > 0 && (
|
||||
<div className="mt-auto">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs" style={{ color: "var(--muted-foreground)" }}>
|
||||
{completedLessons} из {totalLessons} уроков
|
||||
</span>
|
||||
<span
|
||||
className="text-xs font-bold"
|
||||
style={{ color: progressPct === 100 ? "var(--foreground)" : "var(--muted-foreground)" }}
|
||||
>
|
||||
{progressPct === 100 ? "✓ Завершён" : `${progressPct}%`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-1.5 w-full" style={{ background: "var(--border)" }}>
|
||||
<div
|
||||
className="h-full transition-all"
|
||||
style={{
|
||||
width: `${progressPct}%`,
|
||||
background: progressPct === 100 ? "var(--foreground)" : "var(--accent)",
|
||||
border: progressPct > 0 ? "1px solid var(--foreground)" : "none",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{expiresAt && (
|
||||
<p className="text-xs" style={{ color: "var(--muted-foreground)" }}>
|
||||
Доступ до {new Date(expiresAt).toLocaleDateString("ru-RU")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user