MVP
This commit is contained in:
Marcelo
@@ -4,14 +4,23 @@ import { useEffect, useMemo, useState, useTransition } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Check, CircleDashed, ClipboardCheck, FileText, Lock, PlayCircle } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { toggleLessonComplete } from "@/app/(public)/courses/[slug]/learn/actions";
|
||||
import ProgressBar from "@/components/ProgressBar";
|
||||
import { getLessonContentTypeLabel, isFinalExam, type LessonContentType } from "@/lib/courses/lessonContent";
|
||||
import { markdownToSafeHtml } from "@/lib/courses/lessonMarkdown";
|
||||
import {
|
||||
getLessonContentTypeLabel,
|
||||
isFinalExam,
|
||||
type LessonActivityMeta,
|
||||
type LessonContentType,
|
||||
} from "@/lib/courses/lessonContent";
|
||||
|
||||
type ClassroomLesson = {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
lectureContent: string;
|
||||
activity: LessonActivityMeta | null;
|
||||
contentType: LessonContentType;
|
||||
materialUrl: string | null;
|
||||
videoUrl: string | null;
|
||||
@@ -40,6 +49,14 @@ type CompletionCertificate = {
|
||||
certificateNumber: string | null;
|
||||
};
|
||||
|
||||
type ActivityResult = {
|
||||
score: number;
|
||||
correct: number;
|
||||
total: number;
|
||||
passed: boolean;
|
||||
questionResults: Record<string, boolean>;
|
||||
};
|
||||
|
||||
function getYouTubeEmbedUrl(url: string | null | undefined): string | null {
|
||||
if (!url?.trim()) return null;
|
||||
const trimmed = url.trim();
|
||||
@@ -57,6 +74,10 @@ function getIsPdfUrl(url: string | null | undefined): boolean {
|
||||
return /\.pdf(?:$|\?)/i.test(url.trim());
|
||||
}
|
||||
|
||||
function isAssessmentType(contentType: LessonContentType): boolean {
|
||||
return contentType === "ACTIVITY" || contentType === "QUIZ" || contentType === "FINAL_EXAM";
|
||||
}
|
||||
|
||||
export default function StudentClassroomClient({
|
||||
courseSlug,
|
||||
courseTitle,
|
||||
@@ -70,6 +91,8 @@ export default function StudentClassroomClient({
|
||||
const [selectedLessonId, setSelectedLessonId] = useState(initialSelectedLessonId);
|
||||
const [completedLessonIds, setCompletedLessonIds] = useState(initialCompletedLessonIds);
|
||||
const [completionCertificate, setCompletionCertificate] = useState<CompletionCertificate | null>(null);
|
||||
const [activityAnswers, setActivityAnswers] = useState<Record<string, string>>({});
|
||||
const [activityResult, setActivityResult] = useState<ActivityResult | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedLessonId(initialSelectedLessonId);
|
||||
@@ -89,10 +112,17 @@ export default function StudentClassroomClient({
|
||||
const selectedLesson =
|
||||
flatLessons.find((lesson) => lesson.id === selectedLessonId) ?? flatLessons[0] ?? null;
|
||||
|
||||
useEffect(() => {
|
||||
setActivityAnswers({});
|
||||
setActivityResult(null);
|
||||
}, [selectedLesson?.id]);
|
||||
|
||||
const selectedLessonTypeLabel = selectedLesson ? getLessonContentTypeLabel(selectedLesson.contentType) : "";
|
||||
const selectedLessonActivity = selectedLesson?.activity?.questions?.length ? selectedLesson.activity : null;
|
||||
const selectedLectureHtml = markdownToSafeHtml(selectedLesson?.lectureContent || selectedLesson?.description || "");
|
||||
|
||||
const isRestricted = (lessonId: string) => {
|
||||
if (!isEnrolled) return false; // Non-enrolled can click any lesson (preview shows content, locked shows premium message)
|
||||
if (!isEnrolled) return false;
|
||||
const lessonIndex = flatLessons.findIndex((lesson) => lesson.id === lessonId);
|
||||
if (lessonIndex <= 0) return false;
|
||||
if (completedSet.has(lessonId)) return false;
|
||||
@@ -109,7 +139,7 @@ export default function StudentClassroomClient({
|
||||
};
|
||||
|
||||
const handleToggleComplete = async () => {
|
||||
if (!selectedLesson || isSaving) return;
|
||||
if (!selectedLesson || isSaving || !isEnrolled) return;
|
||||
|
||||
const lessonId = selectedLesson.id;
|
||||
const wasCompleted = completedSet.has(lessonId);
|
||||
@@ -146,6 +176,40 @@ export default function StudentClassroomClient({
|
||||
});
|
||||
};
|
||||
|
||||
const submitActivity = async () => {
|
||||
if (!selectedLesson || !selectedLessonActivity) return;
|
||||
|
||||
const total = selectedLessonActivity.questions.length;
|
||||
if (total === 0) return;
|
||||
|
||||
const unanswered = selectedLessonActivity.questions.filter((question) => !activityAnswers[question.id]);
|
||||
if (unanswered.length > 0) {
|
||||
toast.error("Responde todas las preguntas antes de enviar.");
|
||||
return;
|
||||
}
|
||||
|
||||
let correct = 0;
|
||||
const questionResults: Record<string, boolean> = {};
|
||||
|
||||
for (const question of selectedLessonActivity.questions) {
|
||||
const answerId = activityAnswers[question.id];
|
||||
const selectedOption = question.options.find((option) => option.id === answerId);
|
||||
const isCorrect = Boolean(selectedOption?.isCorrect);
|
||||
if (isCorrect) correct += 1;
|
||||
questionResults[question.id] = isCorrect;
|
||||
}
|
||||
|
||||
const score = Math.round((correct / total) * 100);
|
||||
const passingScore = selectedLesson.contentType === "ACTIVITY" ? 0 : selectedLessonActivity.passingScorePercent;
|
||||
const passed = selectedLesson.contentType === "ACTIVITY" ? true : score >= passingScore;
|
||||
|
||||
setActivityResult({ score, correct, total, passed, questionResults });
|
||||
|
||||
if (passed && isEnrolled && !completedSet.has(selectedLesson.id)) {
|
||||
await handleToggleComplete();
|
||||
}
|
||||
};
|
||||
|
||||
if (!selectedLesson) {
|
||||
return (
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6">
|
||||
@@ -217,6 +281,7 @@ export default function StudentClassroomClient({
|
||||
`}</style>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<section className="space-y-4 rounded-xl border border-slate-200 bg-white p-5">
|
||||
<Link href={`/courses/${courseSlug}`} className="text-sm font-medium text-slate-600 hover:text-slate-900">
|
||||
{"<-"} Back to Course
|
||||
@@ -255,12 +320,113 @@ export default function StudentClassroomClient({
|
||||
key={`${selectedLesson.id}-${selectedLesson.videoUrl}`}
|
||||
className="h-full w-full"
|
||||
controls
|
||||
onEnded={handleToggleComplete}
|
||||
onEnded={() => {
|
||||
if (isEnrolled) {
|
||||
void handleToggleComplete();
|
||||
}
|
||||
}}
|
||||
src={selectedLesson.videoUrl}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center text-sm text-slate-300">Video not available for this lesson</div>
|
||||
<div className="flex h-full items-center justify-center text-sm text-slate-300">
|
||||
Video not available for this lesson
|
||||
</div>
|
||||
)
|
||||
) : selectedLesson.contentType === "LECTURE" ? (
|
||||
<article
|
||||
className="space-y-4 text-[16px] leading-8 text-slate-800 [&_a]:font-medium [&_a]:text-blue-700 [&_a]:underline [&_blockquote]:rounded-r-md [&_blockquote]:border-l-4 [&_blockquote]:border-slate-300 [&_blockquote]:bg-slate-100 [&_blockquote]:px-4 [&_blockquote]:py-2 [&_h1]:mt-6 [&_h1]:text-3xl [&_h1]:font-semibold [&_h2]:mt-5 [&_h2]:text-2xl [&_h2]:font-semibold [&_h3]:mt-4 [&_h3]:text-xl [&_h3]:font-semibold [&_ol]:list-decimal [&_ol]:space-y-2 [&_ol]:pl-7 [&_p]:my-3 [&_ul]:list-disc [&_ul]:space-y-2 [&_ul]:pl-7"
|
||||
dangerouslySetInnerHTML={{ __html: selectedLectureHtml }}
|
||||
/>
|
||||
) : isAssessmentType(selectedLesson.contentType) && selectedLessonActivity ? (
|
||||
<div className="space-y-4">
|
||||
<p className="inline-flex rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-700">
|
||||
{selectedLessonTypeLabel}
|
||||
</p>
|
||||
|
||||
{selectedLessonActivity.instructions ? (
|
||||
<p className="rounded-lg border border-slate-200 bg-white px-4 py-3 text-sm leading-relaxed text-slate-700">
|
||||
{selectedLessonActivity.instructions}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="space-y-3">
|
||||
{selectedLessonActivity.questions.map((question, index) => (
|
||||
<div key={question.id} className="rounded-xl border border-slate-200 bg-white p-4">
|
||||
<p className="text-sm font-semibold text-slate-900">
|
||||
{index + 1}. {question.prompt}
|
||||
</p>
|
||||
<div className="mt-3 grid gap-2">
|
||||
{question.options.map((option) => {
|
||||
const isSelected = activityAnswers[question.id] === option.id;
|
||||
const showResult = Boolean(activityResult);
|
||||
const isCorrect = option.isCorrect;
|
||||
return (
|
||||
<button
|
||||
key={option.id}
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setActivityAnswers((prev) => ({
|
||||
...prev,
|
||||
[question.id]: option.id,
|
||||
}))
|
||||
}
|
||||
className={`rounded-lg border px-3 py-2 text-left text-sm transition-colors ${
|
||||
isSelected ? "border-slate-500 bg-slate-900 text-white" : "border-slate-300 bg-white text-slate-700 hover:bg-slate-50"
|
||||
} ${
|
||||
showResult && isCorrect
|
||||
? "border-emerald-300 bg-emerald-50 text-emerald-900"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{option.text}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{activityResult && question.explanation ? (
|
||||
<p className="mt-3 rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-600">
|
||||
{question.explanation}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void submitActivity()}
|
||||
className="rounded-md border border-slate-300 bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800"
|
||||
>
|
||||
Enviar respuestas
|
||||
</button>
|
||||
|
||||
{activityResult ? (
|
||||
<div
|
||||
className={`rounded-lg border px-4 py-3 text-sm ${
|
||||
activityResult.passed
|
||||
? "border-emerald-200 bg-emerald-50 text-emerald-900"
|
||||
: "border-amber-200 bg-amber-50 text-amber-900"
|
||||
}`}
|
||||
>
|
||||
Resultado: {activityResult.correct}/{activityResult.total} ({activityResult.score}%)
|
||||
{selectedLesson.contentType !== "ACTIVITY" ? (
|
||||
<span>
|
||||
{" "}
|
||||
| Mínimo: {selectedLessonActivity.passingScorePercent}%{" "}
|
||||
{activityResult.passed ? "(Aprobado)" : "(No aprobado)"}
|
||||
</span>
|
||||
) : (
|
||||
<span> | Actividad completada</span>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{isFinalExam(selectedLesson.contentType) ? (
|
||||
<div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
|
||||
Debes aprobar esta evaluación final para graduarte y emitir el certificado del curso.
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<p className="inline-flex rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-700">
|
||||
@@ -271,35 +437,29 @@ export default function StudentClassroomClient({
|
||||
) : (
|
||||
<p className="text-sm text-slate-600">Este contenido no tiene descripción adicional.</p>
|
||||
)}
|
||||
|
||||
{selectedLesson.materialUrl ? (
|
||||
getIsPdfUrl(selectedLesson.materialUrl) ? (
|
||||
<iframe
|
||||
className="h-[430px] w-full rounded-lg border border-slate-200 bg-white"
|
||||
src={selectedLesson.materialUrl}
|
||||
title={`${selectedLesson.title} material`}
|
||||
/>
|
||||
) : (
|
||||
<a
|
||||
className="inline-flex rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-800 hover:bg-slate-100"
|
||||
href={selectedLesson.materialUrl}
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Abrir material
|
||||
</a>
|
||||
)
|
||||
) : null}
|
||||
|
||||
{isFinalExam(selectedLesson.contentType) ? (
|
||||
<div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
|
||||
Debes completar esta evaluación final para graduarte y emitir el certificado del curso.
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedLesson.materialUrl ? (
|
||||
getIsPdfUrl(selectedLesson.materialUrl) ? (
|
||||
<iframe
|
||||
className="h-[430px] w-full rounded-lg border border-slate-200 bg-white"
|
||||
src={selectedLesson.materialUrl}
|
||||
title={`${selectedLesson.title} material`}
|
||||
/>
|
||||
) : (
|
||||
<a
|
||||
className="inline-flex rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-800 hover:bg-slate-100"
|
||||
href={selectedLesson.materialUrl}
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Abrir material
|
||||
</a>
|
||||
)
|
||||
) : null}
|
||||
|
||||
<div className="space-y-2 rounded-xl border border-slate-200 bg-white p-4">
|
||||
<h1 className="text-2xl font-semibold text-slate-900">{selectedLesson.title}</h1>
|
||||
<p className="inline-flex w-fit rounded-full border border-slate-300 bg-slate-50 px-2.5 py-0.5 text-xs font-semibold text-slate-700">
|
||||
@@ -313,18 +473,14 @@ export default function StudentClassroomClient({
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{isEnrolled && (
|
||||
{isEnrolled && !isAssessmentType(selectedLesson.contentType) && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleToggleComplete}
|
||||
onClick={() => void handleToggleComplete()}
|
||||
disabled={isSaving}
|
||||
className="rounded-md border border-slate-300 bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-60"
|
||||
>
|
||||
{completedSet.has(selectedLesson.id)
|
||||
? "Marcar como pendiente"
|
||||
: isFinalExam(selectedLesson.contentType)
|
||||
? "Marcar evaluación final como completada"
|
||||
: "Marcar como completada"}
|
||||
{completedSet.has(selectedLesson.id) ? "Marcar como pendiente" : "Marcar como completada"}
|
||||
</button>
|
||||
)}
|
||||
</section>
|
||||
|
||||
159
components/teacher/FileUpload.tsx
Normal file
159
components/teacher/FileUpload.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { createBrowserClient } from "@supabase/ssr";
|
||||
import { toast } from "sonner";
|
||||
import { FileDown, Upload, X, Loader2 } from "lucide-react";
|
||||
|
||||
interface FileUploadProps {
|
||||
lessonId: string;
|
||||
currentFileUrl?: string | null;
|
||||
onUploadComplete: (url: string) => void;
|
||||
onRemove?: () => void;
|
||||
accept?: string;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
const ALLOWED_MIMES = [
|
||||
"application/pdf",
|
||||
"application/msword",
|
||||
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
||||
"application/vnd.openxmlformats-officedocument.presentationml.presentation",
|
||||
"text/plain"
|
||||
].join(",");
|
||||
|
||||
export default function FileUpload({
|
||||
lessonId,
|
||||
currentFileUrl,
|
||||
onUploadComplete,
|
||||
onRemove,
|
||||
accept = ALLOWED_MIMES,
|
||||
label = "Documento / Material"
|
||||
}: FileUploadProps) {
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
setUploading(true);
|
||||
|
||||
const supabase = createBrowserClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
||||
);
|
||||
|
||||
// 1. Verify session
|
||||
const { data: { user }, error: authError } = await supabase.auth.getUser();
|
||||
if (authError || !user) {
|
||||
toast.error("Error de autenticación: Por favor inicia sesión de nuevo.");
|
||||
setUploading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. Create a unique file path: lesson_id/timestamp_filename
|
||||
const filePath = `${lessonId}/${Date.now()}_${file.name.replace(/\s+/g, '_')}`;
|
||||
|
||||
// 3. Upload to Supabase Storage (assets bucket)
|
||||
const { error } = await supabase.storage
|
||||
.from("assets")
|
||||
.upload(filePath, file, {
|
||||
upsert: true,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
console.error("Storage upload error:", error);
|
||||
if (error.message.includes("row-level security policy")) {
|
||||
toast.error("Error de permisos: El bucket 'assets' no permite subidas para profesores.");
|
||||
} else {
|
||||
toast.error("Error al subir: " + error.message);
|
||||
}
|
||||
setUploading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// 4. Get Public URL
|
||||
const { data: { publicUrl } } = supabase.storage
|
||||
.from("assets")
|
||||
.getPublicUrl(filePath);
|
||||
|
||||
onUploadComplete(publicUrl);
|
||||
setUploading(false);
|
||||
toast.success("Archivo subido con éxito");
|
||||
};
|
||||
|
||||
const fileName = currentFileUrl ? currentFileUrl.split('/').pop() : "";
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-slate-700">{label}</label>
|
||||
|
||||
{currentFileUrl ? (
|
||||
<div className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg bg-white group shadow-sm">
|
||||
<div className="h-10 w-10 bg-slate-100 rounded flex items-center justify-center text-slate-500">
|
||||
<FileDown className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-900 truncate">
|
||||
{decodeURIComponent(fileName || "Archivo adjunto")}
|
||||
</p>
|
||||
<a
|
||||
href={currentFileUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-blue-600 hover:underline"
|
||||
>
|
||||
Ver archivo actual
|
||||
</a>
|
||||
</div>
|
||||
<button
|
||||
onClick={onRemove}
|
||||
className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-md transition-colors"
|
||||
title="Eliminar archivo"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<div className="relative">
|
||||
<input
|
||||
type="file"
|
||||
accept={accept}
|
||||
onChange={handleFileUpload}
|
||||
disabled={uploading}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
||||
/>
|
||||
<button className="text-xs bg-slate-100 text-slate-700 px-2 py-1 rounded border border-slate-200 hover:bg-slate-200">
|
||||
Cambiar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative border-2 border-dashed border-slate-300 rounded-lg p-6 hover:border-black hover:bg-slate-50 transition-all cursor-pointer group">
|
||||
<input
|
||||
type="file"
|
||||
accept={accept}
|
||||
onChange={handleFileUpload}
|
||||
disabled={uploading}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
|
||||
/>
|
||||
<div className="flex flex-col items-center justify-center text-center space-y-2">
|
||||
{uploading ? (
|
||||
<Loader2 className="h-8 w-8 text-slate-400 animate-spin" />
|
||||
) : (
|
||||
<Upload className="h-8 w-8 text-slate-400 group-hover:text-black" />
|
||||
)}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900">
|
||||
{uploading ? "Subiendo archivo..." : "Haz clic o arrastra un archivo aquí"}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 mt-1">
|
||||
Formatos permitidos: <span className="font-semibold">PDF, Word, PowerPoint o Texto (.txt)</span>
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 mt-0.5">Máximo 50MB</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -14,7 +14,7 @@ export default function VideoUpload({ lessonId, currentVideoUrl, onUploadComplet
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const handleVideoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
@@ -26,28 +26,46 @@ export default function VideoUpload({ lessonId, currentVideoUrl, onUploadComplet
|
||||
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
||||
);
|
||||
|
||||
// Create a unique file path: lesson_id/timestamp_filename
|
||||
// 1. Verify session
|
||||
const { data: { user }, error: authError } = await supabase.auth.getUser();
|
||||
if (authError || !user) {
|
||||
toast.error("Authentication error: Please log in again.");
|
||||
setUploading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Authenticated User ID:", user.id);
|
||||
|
||||
// 2. Create a unique file path: lesson_id/timestamp_filename
|
||||
const filePath = `${lessonId}/${Date.now()}_${file.name}`;
|
||||
|
||||
// 3. Upload to Supabase Storage
|
||||
const { error } = await supabase.storage
|
||||
.from("courses") // Make sure this bucket exists!
|
||||
.from("courses")
|
||||
.upload(filePath, file, {
|
||||
upsert: true,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
toast.error("Upload failed: " + error.message);
|
||||
console.error("Storage upload error:", error);
|
||||
// Hint for common RLS issue
|
||||
if (error.message.includes("row-level security policy")) {
|
||||
toast.error("Upload failed: RLS Policy error. Make sure 'courses' bucket allows uploads for authenticated teachers.");
|
||||
} else {
|
||||
toast.error("Upload failed: " + error.message);
|
||||
}
|
||||
setUploading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Get Public URL
|
||||
// 4. Get Public URL
|
||||
const { data: { publicUrl } } = supabase.storage
|
||||
.from("courses")
|
||||
.getPublicUrl(filePath);
|
||||
|
||||
onUploadComplete(publicUrl);
|
||||
setUploading(false);
|
||||
toast.success("Video subido con éxito");
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -73,7 +91,7 @@ export default function VideoUpload({ lessonId, currentVideoUrl, onUploadComplet
|
||||
<input
|
||||
type="file"
|
||||
accept="video/*"
|
||||
onChange={handleUpload}
|
||||
onChange={handleVideoUpload}
|
||||
disabled={uploading}
|
||||
className="block w-full text-sm text-slate-500
|
||||
file:mr-4 file:py-2 file:px-4
|
||||
|
||||
Reference in New Issue
Block a user