mdares/ACVE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MVP

Browse Source
This commit is contained in:
Marcelo
2026-03-20 04:54:08 +00:00
parent 62b3cfe467
commit 02afbd7cfb
12 changed files with 1491 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
components/teacher/FileUpload.tsx Normal file
View 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>
);
}

173
components/teacher/TeacherEditCourseForm.tsx
View File

@@ -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>

30
components/teacher/VideoUpload.tsx
View File

@@ -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