MVP
This commit is contained in:
Marcelo
@@ -14,6 +14,11 @@ import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { toast } from "sonner";
|
||||
import { getClientLocale } from "@/lib/i18n/clientLocale";
|
||||
import {
|
||||
getLessonContentTypeLabel,
|
||||
parseLessonDescriptionMeta,
|
||||
type LessonContentType,
|
||||
} from "@/lib/courses/lessonContent";
|
||||
|
||||
import { Prisma } from "@prisma/client";
|
||||
|
||||
@@ -35,22 +40,44 @@ type CourseData = {
|
||||
modules: {
|
||||
id: string;
|
||||
title: Prisma.JsonValue;
|
||||
lessons: { id: string; title: Prisma.JsonValue }[];
|
||||
lessons: { id: string; title: Prisma.JsonValue; description: Prisma.JsonValue | null }[];
|
||||
}[];
|
||||
};
|
||||
|
||||
const selectableLessonTypes: LessonContentType[] = [
|
||||
"VIDEO",
|
||||
"LECTURE",
|
||||
"ACTIVITY",
|
||||
"QUIZ",
|
||||
"FINAL_EXAM",
|
||||
];
|
||||
|
||||
function getLessonTypeBadgeClass(type: LessonContentType): string {
|
||||
if (type === "LECTURE") return "border-indigo-200 bg-indigo-50 text-indigo-700";
|
||||
if (type === "ACTIVITY") return "border-rose-200 bg-rose-50 text-rose-700";
|
||||
if (type === "QUIZ" || type === "FINAL_EXAM") return "border-amber-200 bg-amber-50 text-amber-700";
|
||||
return "border-sky-200 bg-sky-50 text-sky-700";
|
||||
}
|
||||
|
||||
export default function TeacherEditCourseForm({ course }: { course: CourseData }) {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [optimisticModules, setOptimisticModules] = useState(course.modules);
|
||||
const [editingModuleId, setEditingModuleId] = useState<string | null>(null);
|
||||
const [editingTitle, setEditingTitle] = useState("");
|
||||
const [newLessonTypeByModule, setNewLessonTypeByModule] = useState<Record<string, LessonContentType>>({});
|
||||
const [learningOutcomes, setLearningOutcomes] = useState<string[]>(() =>
|
||||
parseLearningOutcomes(course.learningOutcomes)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setOptimisticModules(course.modules);
|
||||
setNewLessonTypeByModule(
|
||||
course.modules.reduce<Record<string, LessonContentType>>((acc, module) => {
|
||||
acc[module.id] = acc[module.id] ?? "VIDEO";
|
||||
return acc;
|
||||
}, {}),
|
||||
);
|
||||
}, [course.modules]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -134,10 +161,11 @@ export default function TeacherEditCourseForm({ course }: { course: CourseData }
|
||||
|
||||
// 3. CREATE NEW LESSON
|
||||
const handleAddLesson = async (moduleId: string) => {
|
||||
const selectedType = newLessonTypeByModule[moduleId] ?? "VIDEO";
|
||||
setLoading(true);
|
||||
const res = await createLesson(moduleId);
|
||||
const res = await createLesson(moduleId, selectedType);
|
||||
if (res.success && res.lessonId) {
|
||||
toast.success("Lección creada");
|
||||
toast.success(`Lección creada (${getLessonContentTypeLabel(selectedType)})`);
|
||||
// Redirect immediately to the video upload page
|
||||
router.push(`/teacher/courses/${course.slug}/lessons/${res.lessonId}`);
|
||||
} else {
|
||||
@@ -444,61 +472,92 @@ export default function TeacherEditCourseForm({ course }: { course: CourseData }
|
||||
|
||||
{/* Lessons List */}
|
||||
<div className="divide-y divide-slate-100">
|
||||
{module.lessons.map((lesson, lessonIndex) => (
|
||||
<div
|
||||
key={lesson.id}
|
||||
className="px-4 py-3 flex items-center gap-2 hover:bg-slate-50 transition-colors group"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleReorderLesson(moduleIndex, lessonIndex, "up")}
|
||||
disabled={lessonIndex === 0}
|
||||
className="p-0.5 rounded text-slate-400 hover:bg-slate-200 hover:text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-colors"
|
||||
aria-label="Mover lección arriba"
|
||||
>
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleReorderLesson(moduleIndex, lessonIndex, "down")}
|
||||
disabled={lessonIndex === module.lessons.length - 1}
|
||||
className="p-0.5 rounded text-slate-400 hover:bg-slate-200 hover:text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-colors"
|
||||
aria-label="Mover lección abajo"
|
||||
>
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<Link
|
||||
href={`/teacher/courses/${course.slug}/lessons/${lesson.id}`}
|
||||
className="flex items-center gap-3 flex-1 min-w-0"
|
||||
{module.lessons.map((lesson, lessonIndex) => {
|
||||
const lessonMeta = parseLessonDescriptionMeta(lesson.description);
|
||||
const lessonType = lessonMeta.contentType;
|
||||
return (
|
||||
<div
|
||||
key={lesson.id}
|
||||
className="px-4 py-3 flex items-center gap-2 hover:bg-slate-50 transition-colors group"
|
||||
>
|
||||
<span className="text-slate-400 text-lg group-hover:text-blue-500 flex-shrink-0">▶</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-700 group-hover:text-slate-900">
|
||||
{getStr(lesson.title)}
|
||||
</p>
|
||||
<div className="flex flex-col">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleReorderLesson(moduleIndex, lessonIndex, "up")}
|
||||
disabled={lessonIndex === 0}
|
||||
className="p-0.5 rounded text-slate-400 hover:bg-slate-200 hover:text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-colors"
|
||||
aria-label="Mover lección arriba"
|
||||
>
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleReorderLesson(moduleIndex, lessonIndex, "down")}
|
||||
disabled={lessonIndex === module.lessons.length - 1}
|
||||
className="p-0.5 rounded text-slate-400 hover:bg-slate-200 hover:text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-colors"
|
||||
aria-label="Mover lección abajo"
|
||||
>
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-xs text-slate-400 opacity-0 group-hover:opacity-100 border border-slate-200 rounded px-2 py-1 flex-shrink-0">
|
||||
Editar Contenido
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
<Link
|
||||
href={`/teacher/courses/${course.slug}/lessons/${lesson.id}`}
|
||||
className="flex items-center gap-3 flex-1 min-w-0"
|
||||
>
|
||||
<span className="text-slate-400 text-lg group-hover:text-blue-500 flex-shrink-0">▶</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="mb-1 flex items-center gap-2">
|
||||
<span
|
||||
className={`inline-flex rounded-full border px-2 py-0.5 text-[11px] font-semibold ${getLessonTypeBadgeClass(
|
||||
lessonType,
|
||||
)}`}
|
||||
>
|
||||
{getLessonContentTypeLabel(lessonType)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm font-medium text-slate-700 group-hover:text-slate-900">
|
||||
{getStr(lesson.title)}
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-xs text-slate-400 opacity-0 group-hover:opacity-100 border border-slate-200 rounded px-2 py-1 flex-shrink-0">
|
||||
Editar Contenido
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Add Lesson Button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleAddLesson(module.id)}
|
||||
disabled={loading}
|
||||
className="w-full text-left px-4 py-3 text-xs text-slate-500 hover:text-blue-600 hover:bg-slate-50 font-medium flex items-center gap-2 transition-colors"
|
||||
>
|
||||
<span className="text-lg leading-none">+</span> Agregar Lección
|
||||
</button>
|
||||
<div className="flex flex-wrap items-center gap-2 px-4 py-3">
|
||||
<select
|
||||
value={newLessonTypeByModule[module.id] ?? "VIDEO"}
|
||||
onChange={(event) =>
|
||||
setNewLessonTypeByModule((prev) => ({
|
||||
...prev,
|
||||
[module.id]: event.target.value as LessonContentType,
|
||||
}))
|
||||
}
|
||||
className="rounded-md border border-slate-300 px-2 py-1.5 text-xs text-slate-700 outline-none focus:border-black"
|
||||
>
|
||||
{selectableLessonTypes.map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{getLessonContentTypeLabel(type)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleAddLesson(module.id)}
|
||||
disabled={loading}
|
||||
className="text-xs text-slate-500 hover:text-blue-600 hover:bg-slate-50 font-medium flex items-center gap-2 transition-colors rounded px-2 py-1.5"
|
||||
>
|
||||
<span className="text-lg leading-none">+</span> Agregar Lección
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -527,8 +586,8 @@ export default function TeacherEditCourseForm({ course }: { course: CourseData }
|
||||
<h3 className="font-semibold text-slate-900 mb-2">💡 Tips</h3>
|
||||
<ul className="text-sm text-slate-600 space-y-2 list-disc pl-4">
|
||||
<li>Crea módulos para organizar tus temas.</li>
|
||||
<li>Dentro de cada módulo, agrega lecciones.</li>
|
||||
<li>Haz clic en una lección para <strong>subir el video</strong>.</li>
|
||||
<li>Dentro de cada módulo, agrega lecciones con tipo (video, lectura, actividad, quiz).</li>
|
||||
<li>Haz clic en una lección para editar su contenido según el formato elegido.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user