490 lines
15 KiB
TypeScript
490 lines
15 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import {
|
|
Plus,
|
|
GripVertical,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
Edit3,
|
|
Trash2,
|
|
Clock,
|
|
Save,
|
|
} from 'lucide-react'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from '@/components/ui/collapsible'
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from '@/components/ui/alert-dialog'
|
|
import { cn } from '@/lib/utils'
|
|
//import { toast } from 'sonner';
|
|
|
|
export interface Tema {
|
|
id: string
|
|
nombre: string
|
|
descripcion?: string
|
|
horasEstimadas?: number
|
|
}
|
|
|
|
export interface UnidadTematica {
|
|
id: string
|
|
nombre: string
|
|
numero: number
|
|
temas: Tema[]
|
|
}
|
|
|
|
const initialData: UnidadTematica[] = [
|
|
{
|
|
id: 'u1',
|
|
numero: 1,
|
|
nombre: 'Fundamentos de Inteligencia Artificial',
|
|
temas: [
|
|
{ id: 't1', nombre: 'Tipos de IA y aplicaciones', horasEstimadas: 6 },
|
|
{ id: 't2', nombre: 'Ética en IA', horasEstimadas: 3 },
|
|
],
|
|
},
|
|
]
|
|
|
|
// Estructura que viene de tu JSON/API
|
|
interface ContenidoApi {
|
|
unidad: number
|
|
titulo: string
|
|
temas: string[] | any[] // Acepta strings o objetos
|
|
[key: string]: any // Esta línea permite que haya más claves desconocidas
|
|
}
|
|
|
|
// Props del componente
|
|
interface ContenidoTematicoProps {
|
|
data: {
|
|
contenido_tematico: ContenidoApi[]
|
|
}
|
|
isLoading: boolean
|
|
}
|
|
export function ContenidoTematico({ data, isLoading }: ContenidoTematicoProps) {
|
|
const [unidades, setUnidades] = useState<UnidadTematica[]>([])
|
|
const [expandedUnits, setExpandedUnits] = useState<Set<string>>(
|
|
new Set(['u1']),
|
|
)
|
|
const [deleteDialog, setDeleteDialog] = useState<{
|
|
type: 'unidad' | 'tema'
|
|
id: string
|
|
parentId?: string
|
|
} | null>(null)
|
|
const [editingUnit, setEditingUnit] = useState<string | null>(null)
|
|
const [editingTema, setEditingTema] = useState<{
|
|
unitId: string
|
|
temaId: string
|
|
} | null>(null)
|
|
const [isSaving, setIsSaving] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (data?.contenido_tematico) {
|
|
const transformed = data.contenido_tematico.map(
|
|
(u: any, idx: number) => ({
|
|
id: `u-${idx}`,
|
|
numero: u.unidad || idx + 1,
|
|
nombre: u.titulo || 'Sin título',
|
|
temas: Array.isArray(u.temas)
|
|
? u.temas.map((t: any, tidx: number) => ({
|
|
id: `t-${idx}-${tidx}`,
|
|
nombre: typeof t === 'string' ? t : t.nombre || 'Tema',
|
|
horasEstimadas: t.horasEstimadas || 0,
|
|
}))
|
|
: [],
|
|
}),
|
|
)
|
|
setUnidades(transformed)
|
|
|
|
// Expandir la primera unidad automáticamente
|
|
if (transformed.length > 0) {
|
|
setExpandedUnits(new Set([transformed[0].id]))
|
|
}
|
|
}
|
|
}, [data])
|
|
|
|
if (isLoading)
|
|
return <div className="p-10 text-center">Cargando contenido...</div>
|
|
|
|
// 3. Cálculo de horas (ahora dinámico basado en los nuevos datos)
|
|
const totalHoras = unidades.reduce(
|
|
(acc, u) =>
|
|
acc + u.temas.reduce((sum, t) => sum + (t.horasEstimadas || 0), 0),
|
|
0,
|
|
)
|
|
|
|
// --- Lógica de Unidades ---
|
|
const toggleUnit = (id: string) => {
|
|
const newExpanded = new Set(expandedUnits)
|
|
newExpanded.has(id) ? newExpanded.delete(id) : newExpanded.add(id)
|
|
setExpandedUnits(newExpanded)
|
|
}
|
|
|
|
const addUnidad = () => {
|
|
const newId = `u-${Date.now()}`
|
|
const newUnidad: UnidadTematica = {
|
|
id: newId,
|
|
nombre: 'Nueva Unidad',
|
|
numero: unidades.length + 1,
|
|
temas: [],
|
|
}
|
|
setUnidades([...unidades, newUnidad])
|
|
setExpandedUnits(new Set([...expandedUnits, newId]))
|
|
setEditingUnit(newId)
|
|
}
|
|
|
|
const updateUnidadNombre = (id: string, nombre: string) => {
|
|
setUnidades(unidades.map((u) => (u.id === id ? { ...u, nombre } : u)))
|
|
}
|
|
|
|
// --- Lógica de Temas ---
|
|
const addTema = (unidadId: string) => {
|
|
setUnidades(
|
|
unidades.map((u) => {
|
|
if (u.id === unidadId) {
|
|
const newTemaId = `t-${Date.now()}`
|
|
const newTema: Tema = {
|
|
id: newTemaId,
|
|
nombre: 'Nuevo tema',
|
|
horasEstimadas: 2,
|
|
}
|
|
setEditingTema({ unitId: unidadId, temaId: newTemaId })
|
|
return { ...u, temas: [...u.temas, newTema] }
|
|
}
|
|
return u
|
|
}),
|
|
)
|
|
}
|
|
|
|
const updateTema = (
|
|
unidadId: string,
|
|
temaId: string,
|
|
updates: Partial<Tema>,
|
|
) => {
|
|
setUnidades(
|
|
unidades.map((u) => {
|
|
if (u.id === unidadId) {
|
|
return {
|
|
...u,
|
|
temas: u.temas.map((t) =>
|
|
t.id === temaId ? { ...t, ...updates } : t,
|
|
),
|
|
}
|
|
}
|
|
return u
|
|
}),
|
|
)
|
|
}
|
|
|
|
const handleDelete = () => {
|
|
if (!deleteDialog) return
|
|
if (deleteDialog.type === 'unidad') {
|
|
setUnidades(
|
|
unidades
|
|
.filter((u) => u.id !== deleteDialog.id)
|
|
.map((u, i) => ({ ...u, numero: i + 1 })),
|
|
)
|
|
} else if (deleteDialog.parentId) {
|
|
setUnidades(
|
|
unidades.map((u) =>
|
|
u.id === deleteDialog.parentId
|
|
? { ...u, temas: u.temas.filter((t) => t.id !== deleteDialog.id) }
|
|
: u,
|
|
),
|
|
)
|
|
}
|
|
setDeleteDialog(null)
|
|
//toast.success("Eliminado correctamente");
|
|
}
|
|
|
|
return (
|
|
<div className="animate-in fade-in mx-auto max-w-5xl space-y-6 py-10 duration-500">
|
|
<div className="flex items-center justify-between border-b pb-4">
|
|
<div>
|
|
<h2 className="text-2xl font-bold tracking-tight text-slate-900">
|
|
Contenido Temático
|
|
</h2>
|
|
<p className="mt-1 text-sm text-slate-500">
|
|
{unidades.length} unidades • {totalHoras} horas estimadas totales
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="outline" onClick={addUnidad} className="gap-2">
|
|
<Plus className="h-4 w-4" /> Nueva unidad
|
|
</Button>
|
|
<Button
|
|
onClick={() => {
|
|
setIsSaving(true)
|
|
setTimeout(() => {
|
|
setIsSaving(false) /*toast.success("Guardado")*/
|
|
}, 1000)
|
|
}}
|
|
disabled={isSaving}
|
|
className="bg-blue-600 hover:bg-blue-700"
|
|
>
|
|
<Save className="mr-2 h-4 w-4" />{' '}
|
|
{isSaving ? 'Guardando...' : 'Guardar'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{unidades.map((unidad) => (
|
|
<Card
|
|
key={unidad.id}
|
|
className="overflow-hidden border-slate-200 shadow-sm"
|
|
>
|
|
<Collapsible
|
|
open={expandedUnits.has(unidad.id)}
|
|
onOpenChange={() => toggleUnit(unidad.id)}
|
|
>
|
|
<CardHeader className="border-b border-slate-100 bg-slate-50/50 py-3">
|
|
<div className="flex items-center gap-3">
|
|
<GripVertical className="h-4 w-4 cursor-grab text-slate-300" />
|
|
<CollapsibleTrigger asChild>
|
|
<Button variant="ghost" size="sm" className="h-auto p-0">
|
|
{expandedUnits.has(unidad.id) ? (
|
|
<ChevronDown className="h-4 w-4" />
|
|
) : (
|
|
<ChevronRight className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</CollapsibleTrigger>
|
|
<Badge className="bg-blue-600 font-mono">
|
|
Unidad {unidad.numero}
|
|
</Badge>
|
|
|
|
{editingUnit === unidad.id ? (
|
|
<Input
|
|
value={unidad.nombre}
|
|
onChange={(e) =>
|
|
updateUnidadNombre(unidad.id, e.target.value)
|
|
}
|
|
onBlur={() => setEditingUnit(null)}
|
|
onKeyDown={(e) =>
|
|
e.key === 'Enter' && setEditingUnit(null)
|
|
}
|
|
className="h-8 max-w-md bg-white"
|
|
autoFocus
|
|
/>
|
|
) : (
|
|
<CardTitle
|
|
className="cursor-pointer text-base font-semibold transition-colors hover:text-blue-600"
|
|
onClick={() => setEditingUnit(unidad.id)}
|
|
>
|
|
{unidad.nombre}
|
|
</CardTitle>
|
|
)}
|
|
|
|
<div className="ml-auto flex items-center gap-3">
|
|
<span className="flex items-center gap-1 text-xs font-medium text-slate-400">
|
|
<Clock className="h-3 w-3" />{' '}
|
|
{unidad.temas.reduce(
|
|
(sum, t) => sum + (t.horasEstimadas || 0),
|
|
0,
|
|
)}
|
|
h
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 text-slate-400 hover:text-red-500"
|
|
onClick={() =>
|
|
setDeleteDialog({ type: 'unidad', id: unidad.id })
|
|
}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CollapsibleContent>
|
|
<CardContent className="bg-white pt-4">
|
|
<div className="ml-10 space-y-1 border-l-2 border-slate-50 pl-4">
|
|
{unidad.temas.map((tema, idx) => (
|
|
<TemaRow
|
|
key={tema.id}
|
|
tema={tema}
|
|
index={idx + 1}
|
|
isEditing={
|
|
editingTema?.unitId === unidad.id &&
|
|
editingTema?.temaId === tema.id
|
|
}
|
|
onEdit={() =>
|
|
setEditingTema({ unitId: unidad.id, temaId: tema.id })
|
|
}
|
|
onStopEditing={() => setEditingTema(null)}
|
|
onUpdate={(updates) =>
|
|
updateTema(unidad.id, tema.id, updates)
|
|
}
|
|
onDelete={() =>
|
|
setDeleteDialog({
|
|
type: 'tema',
|
|
id: tema.id,
|
|
parentId: unidad.id,
|
|
})
|
|
}
|
|
/>
|
|
))}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="mt-2 w-full justify-start text-blue-600 hover:bg-blue-50 hover:text-blue-700"
|
|
onClick={() => addTema(unidad.id)}
|
|
>
|
|
<Plus className="mr-2 h-3 w-3" /> Añadir subtema
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
<DeleteConfirmDialog
|
|
dialog={deleteDialog}
|
|
setDialog={setDeleteDialog}
|
|
onConfirm={handleDelete}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// --- Componentes Auxiliares ---
|
|
interface TemaRowProps {
|
|
tema: Tema
|
|
index: number
|
|
isEditing: boolean
|
|
onEdit: () => void
|
|
onStopEditing: () => void
|
|
onUpdate: (updates: Partial<Tema>) => void
|
|
onDelete: () => void
|
|
}
|
|
|
|
function TemaRow({
|
|
tema,
|
|
index,
|
|
isEditing,
|
|
onEdit,
|
|
onStopEditing,
|
|
onUpdate,
|
|
onDelete,
|
|
}: TemaRowProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'group flex items-center gap-3 rounded-md p-2 transition-all',
|
|
isEditing ? 'bg-blue-50 ring-1 ring-blue-100' : 'hover:bg-slate-50',
|
|
)}
|
|
>
|
|
<span className="w-4 font-mono text-xs text-slate-400">{index}.</span>
|
|
{isEditing ? (
|
|
<div className="animate-in slide-in-from-left-2 flex flex-1 items-center gap-2">
|
|
<Input
|
|
value={tema.nombre}
|
|
onChange={(e) => onUpdate({ nombre: e.target.value })}
|
|
className="h-8 flex-1 bg-white"
|
|
placeholder="Nombre"
|
|
autoFocus
|
|
/>
|
|
<Input
|
|
type="number"
|
|
value={tema.horasEstimadas}
|
|
onChange={(e) =>
|
|
onUpdate({ horasEstimadas: parseInt(e.target.value) || 0 })
|
|
}
|
|
className="h-8 w-16 bg-white"
|
|
/>
|
|
<Button
|
|
size="sm"
|
|
className="h-8 bg-emerald-600"
|
|
onClick={onStopEditing}
|
|
>
|
|
Listo
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="flex-1 cursor-pointer" onClick={onEdit}>
|
|
<p className="text-sm font-medium text-slate-700">{tema.nombre}</p>
|
|
</div>
|
|
<Badge variant="secondary" className="text-[10px] opacity-60">
|
|
{tema.horasEstimadas}h
|
|
</Badge>
|
|
<div className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-7 w-7 text-slate-400 hover:text-blue-600"
|
|
onClick={onEdit}
|
|
>
|
|
<Edit3 className="h-3 w-3" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-7 w-7 text-slate-400 hover:text-red-500"
|
|
onClick={onDelete}
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface DeleteDialogState {
|
|
type: 'unidad' | 'tema'
|
|
id: string
|
|
parentId?: string
|
|
}
|
|
|
|
interface DeleteConfirmDialogProps {
|
|
dialog: DeleteDialogState | null
|
|
setDialog: (value: DeleteDialogState | null) => void
|
|
onConfirm: () => void
|
|
}
|
|
|
|
function DeleteConfirmDialog({
|
|
dialog,
|
|
setDialog,
|
|
onConfirm,
|
|
}: DeleteConfirmDialogProps) {
|
|
return (
|
|
<AlertDialog open={!!dialog} onOpenChange={() => setDialog(null)}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>¿Confirmar eliminación?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Estás a punto de borrar un {dialog?.type}. Esta acción no se puede
|
|
deshacer.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Cancelar</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={onConfirm}
|
|
className="bg-red-600 text-white hover:bg-red-700"
|
|
>
|
|
Eliminar
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
)
|
|
}
|