Guillermo Arrieta Medina
f28804bb5b
- Mueve el botón "+ Nueva unidad" al final de la lista y lo centra. - Al crear una unidad: hace scrollIntoView, la unidad queda expandida, el título entra en modo edición y recibe focus. - Al crear un subtema: nombre y horas quedan editables y el input del nombre recibe focus. - Click en título de unidad o en un subtema inicia la edición y pone focus en el campo correspondiente. - Elimina el botón "Listo": los cambios se guardan al pulsar Enter o perder el foco (onBlur). - Presionar Esc cancela la edición y restaura el valor anterior. - Evita el bug donde pulsar Enter tras crear una unidad añadía unidades extra (se desenfoca el botón y se dirige el foco al input correspondiente). - Persistencia inmediata: las modificaciones se guardan vía useUpdateSubjectContenido en los puntos de commit. - Conserva el estado de unidades expandidas tras las actualizaciones para evitar colapsos inesperados.
759 lines
24 KiB
TypeScript
759 lines
24 KiB
TypeScript
import { useParams } from '@tanstack/react-router'
|
|
import {
|
|
Plus,
|
|
GripVertical,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
Edit3,
|
|
Trash2,
|
|
Clock,
|
|
} from 'lucide-react'
|
|
import { useEffect, useRef, useState } from 'react'
|
|
|
|
import type { ContenidoApi, ContenidoTemaApi } from '@/data/api/subjects.api'
|
|
import type { FocusEvent, KeyboardEvent } from 'react'
|
|
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from '@/components/ui/alert-dialog'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from '@/components/ui/collapsible'
|
|
import { Input } from '@/components/ui/input'
|
|
import { useSubject, useUpdateSubjectContenido } from '@/data/hooks/useSubjects'
|
|
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: Array<Tema>
|
|
}
|
|
|
|
function isRecord(value: unknown): value is Record<string, unknown> {
|
|
return typeof value === 'object' && value !== null && !Array.isArray(value)
|
|
}
|
|
|
|
function coerceNumber(value: unknown): number | undefined {
|
|
if (typeof value === 'number' && Number.isFinite(value)) return value
|
|
if (typeof value === 'string') {
|
|
const trimmed = value.trim()
|
|
if (!trimmed) return undefined
|
|
const parsed = Number(trimmed)
|
|
return Number.isFinite(parsed) ? parsed : undefined
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
function coerceString(value: unknown): string | undefined {
|
|
if (typeof value === 'string') return value
|
|
return undefined
|
|
}
|
|
|
|
function mapTemaValue(value: unknown): ContenidoTemaApi | null {
|
|
if (typeof value === 'string') {
|
|
const trimmed = value.trim()
|
|
return trimmed ? trimmed : null
|
|
}
|
|
if (isRecord(value)) {
|
|
const nombre = coerceString(value.nombre)
|
|
if (!nombre) return null
|
|
const horasEstimadas = coerceNumber(value.horasEstimadas)
|
|
const descripcion = coerceString(value.descripcion)
|
|
return {
|
|
...value,
|
|
nombre,
|
|
horasEstimadas,
|
|
descripcion,
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
|
|
function mapContenidoItem(value: unknown, index: number): ContenidoApi | null {
|
|
if (!isRecord(value)) return null
|
|
|
|
const unidad = coerceNumber(value.unidad) ?? index + 1
|
|
const titulo = coerceString(value.titulo) ?? 'Sin título'
|
|
|
|
let temas: Array<ContenidoTemaApi> = []
|
|
if (Array.isArray(value.temas)) {
|
|
temas = value.temas
|
|
.map(mapTemaValue)
|
|
.filter((t): t is ContenidoTemaApi => t !== null)
|
|
} else if (typeof value.temas === 'string' && value.temas.trim()) {
|
|
temas = value.temas
|
|
.split(/\r?\n|,/)
|
|
.map((t) => t.trim())
|
|
.filter(Boolean)
|
|
}
|
|
|
|
return { unidad, titulo, temas }
|
|
}
|
|
|
|
function mapContenidoTematicoFromDb(value: unknown): Array<ContenidoApi> {
|
|
if (value == null) return []
|
|
|
|
if (typeof value === 'string') {
|
|
try {
|
|
return mapContenidoTematicoFromDb(JSON.parse(value))
|
|
} catch {
|
|
return []
|
|
}
|
|
}
|
|
|
|
if (Array.isArray(value)) {
|
|
return value
|
|
.map((item, idx) => mapContenidoItem(item, idx))
|
|
.filter((x): x is ContenidoApi => x !== null)
|
|
}
|
|
|
|
if (isRecord(value)) {
|
|
if (Array.isArray(value.contenido_tematico)) {
|
|
return mapContenidoTematicoFromDb(value.contenido_tematico)
|
|
}
|
|
if (Array.isArray(value.unidades)) {
|
|
return mapContenidoTematicoFromDb(value.unidades)
|
|
}
|
|
}
|
|
|
|
return []
|
|
}
|
|
|
|
function serializeUnidadesToApi(
|
|
unidades: Array<UnidadTematica>,
|
|
): Array<ContenidoApi> {
|
|
return unidades
|
|
.slice()
|
|
.sort((a, b) => a.numero - b.numero)
|
|
.map((u, idx) => ({
|
|
unidad: u.numero || idx + 1,
|
|
titulo: u.nombre || 'Sin título',
|
|
temas: u.temas.map((t) => ({
|
|
nombre: t.nombre || 'Tema',
|
|
horasEstimadas: t.horasEstimadas ?? 0,
|
|
descripcion: t.descripcion,
|
|
})),
|
|
}))
|
|
}
|
|
|
|
// Props del componente
|
|
|
|
export function ContenidoTematico() {
|
|
const updateContenido = useUpdateSubjectContenido()
|
|
const { asignaturaId } = useParams({
|
|
from: '/planes/$planId/asignaturas/$asignaturaId',
|
|
})
|
|
|
|
const { data: data, isLoading: isLoading } = useSubject(asignaturaId)
|
|
const [unidades, setUnidades] = useState<Array<UnidadTematica>>([])
|
|
const [expandedUnits, setExpandedUnits] = useState<Set<string>>(new Set())
|
|
const unitContainerRefs = useRef<Map<string, HTMLDivElement>>(new Map())
|
|
const unitTitleInputRef = useRef<HTMLInputElement | null>(null)
|
|
const temaNombreInputElRef = useRef<HTMLInputElement | null>(null)
|
|
const [pendingScrollUnitId, setPendingScrollUnitId] = useState<string | null>(
|
|
null,
|
|
)
|
|
const cancelNextBlurRef = useRef(false)
|
|
const [deleteDialog, setDeleteDialog] = useState<{
|
|
type: 'unidad' | 'tema'
|
|
id: string
|
|
parentId?: string
|
|
} | null>(null)
|
|
const [editingUnit, setEditingUnit] = useState<string | null>(null)
|
|
const [unitDraftNombre, setUnitDraftNombre] = useState('')
|
|
const [unitOriginalNombre, setUnitOriginalNombre] = useState('')
|
|
const [editingTema, setEditingTema] = useState<{
|
|
unitId: string
|
|
temaId: string
|
|
} | null>(null)
|
|
const [temaDraftNombre, setTemaDraftNombre] = useState('')
|
|
const [temaOriginalNombre, setTemaOriginalNombre] = useState('')
|
|
const [temaDraftHoras, setTemaDraftHoras] = useState('')
|
|
const [temaOriginalHoras, setTemaOriginalHoras] = useState(0)
|
|
|
|
const persistUnidades = async (nextUnidades: Array<UnidadTematica>) => {
|
|
const payload = serializeUnidadesToApi(nextUnidades)
|
|
await updateContenido.mutateAsync({
|
|
subjectId: asignaturaId,
|
|
unidades: payload,
|
|
})
|
|
}
|
|
|
|
const beginEditUnit = (unitId: string) => {
|
|
const unit = unidades.find((u) => u.id === unitId)
|
|
const nombre = unit?.nombre ?? ''
|
|
setEditingUnit(unitId)
|
|
setUnitDraftNombre(nombre)
|
|
setUnitOriginalNombre(nombre)
|
|
setExpandedUnits((prev) => {
|
|
const next = new Set(prev)
|
|
next.add(unitId)
|
|
return next
|
|
})
|
|
}
|
|
|
|
const commitEditUnit = () => {
|
|
if (!editingUnit) return
|
|
const next = unidades.map((u) =>
|
|
u.id === editingUnit ? { ...u, nombre: unitDraftNombre } : u,
|
|
)
|
|
setUnidades(next)
|
|
setEditingUnit(null)
|
|
void persistUnidades(next)
|
|
}
|
|
|
|
const cancelEditUnit = () => {
|
|
setEditingUnit(null)
|
|
setUnitDraftNombre(unitOriginalNombre)
|
|
}
|
|
|
|
const beginEditTema = (unitId: string, temaId: string) => {
|
|
const unit = unidades.find((u) => u.id === unitId)
|
|
const tema = unit?.temas.find((t) => t.id === temaId)
|
|
const nombre = tema?.nombre ?? ''
|
|
const horas = tema?.horasEstimadas ?? 0
|
|
|
|
setEditingTema({ unitId, temaId })
|
|
setTemaDraftNombre(nombre)
|
|
setTemaOriginalNombre(nombre)
|
|
setTemaDraftHoras(String(horas))
|
|
setTemaOriginalHoras(horas)
|
|
setExpandedUnits((prev) => {
|
|
const next = new Set(prev)
|
|
next.add(unitId)
|
|
return next
|
|
})
|
|
}
|
|
|
|
const commitEditTema = () => {
|
|
if (!editingTema) return
|
|
const parsedHoras = Number.parseInt(temaDraftHoras, 10)
|
|
const horasEstimadas = Number.isFinite(parsedHoras) ? parsedHoras : 0
|
|
|
|
const next = unidades.map((u) => {
|
|
if (u.id !== editingTema.unitId) return u
|
|
return {
|
|
...u,
|
|
temas: u.temas.map((t) =>
|
|
t.id === editingTema.temaId
|
|
? { ...t, nombre: temaDraftNombre, horasEstimadas }
|
|
: t,
|
|
),
|
|
}
|
|
})
|
|
|
|
setUnidades(next)
|
|
setEditingTema(null)
|
|
void persistUnidades(next)
|
|
}
|
|
|
|
const cancelEditTema = () => {
|
|
setEditingTema(null)
|
|
setTemaDraftNombre(temaOriginalNombre)
|
|
setTemaDraftHoras(String(temaOriginalHoras))
|
|
}
|
|
|
|
const handleTemaEditorBlurCapture = (e: FocusEvent<HTMLDivElement>) => {
|
|
if (cancelNextBlurRef.current) {
|
|
cancelNextBlurRef.current = false
|
|
return
|
|
}
|
|
const nextFocus = e.relatedTarget as Node | null
|
|
if (nextFocus && e.currentTarget.contains(nextFocus)) return
|
|
commitEditTema()
|
|
}
|
|
|
|
const handleTemaEditorKeyDownCapture = (e: KeyboardEvent<HTMLDivElement>) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault()
|
|
if (e.target instanceof HTMLElement) e.target.blur()
|
|
return
|
|
}
|
|
if (e.key === 'Escape') {
|
|
e.preventDefault()
|
|
cancelNextBlurRef.current = true
|
|
cancelEditTema()
|
|
if (e.target instanceof HTMLElement) e.target.blur()
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
const contenido = mapContenidoTematicoFromDb(
|
|
data ? data.contenido_tematico : undefined,
|
|
)
|
|
|
|
const transformed = contenido.map((u, idx) => ({
|
|
id: `u-${u.unidad || idx + 1}`,
|
|
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-${u.unidad || idx + 1}-${tidx + 1}`,
|
|
nombre: typeof t === 'string' ? t : t?.nombre || 'Tema',
|
|
horasEstimadas: t?.horasEstimadas || 0,
|
|
}))
|
|
: [],
|
|
}))
|
|
|
|
setUnidades(transformed)
|
|
// Mantener las unidades ya expandidas si existen; si no, expandir la primera.
|
|
setExpandedUnits((prev) => {
|
|
const validIds = new Set(transformed.map((u) => u.id))
|
|
const filtered = new Set(
|
|
Array.from(prev).filter((id) => validIds.has(id)),
|
|
)
|
|
if (filtered.size > 0) return filtered
|
|
return transformed.length > 0 ? new Set([transformed[0].id]) : new Set()
|
|
})
|
|
}, [data])
|
|
|
|
useEffect(() => {
|
|
if (!editingUnit) return
|
|
// Foco controlado (evitamos autoFocus por lint/a11y)
|
|
setTimeout(() => unitTitleInputRef.current?.focus(), 0)
|
|
}, [editingUnit])
|
|
|
|
useEffect(() => {
|
|
if (!editingTema) return
|
|
setTimeout(() => temaNombreInputElRef.current?.focus(), 0)
|
|
}, [editingTema])
|
|
|
|
useEffect(() => {
|
|
if (!pendingScrollUnitId) return
|
|
const el = unitContainerRefs.current.get(pendingScrollUnitId)
|
|
if (!el) return
|
|
el.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
|
setPendingScrollUnitId(null)
|
|
}, [pendingScrollUnitId, unidades.length])
|
|
|
|
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 newNumero = unidades.length + 1
|
|
const newId = `u-${newNumero}`
|
|
const newUnidad: UnidadTematica = {
|
|
id: newId,
|
|
nombre: 'Nueva Unidad',
|
|
numero: newNumero,
|
|
temas: [],
|
|
}
|
|
const next = [...unidades, newUnidad]
|
|
setUnidades(next)
|
|
setExpandedUnits((prev) => {
|
|
const n = new Set(prev)
|
|
n.add(newId)
|
|
return n
|
|
})
|
|
setPendingScrollUnitId(newId)
|
|
|
|
// Abrir edición del título inmediatamente
|
|
setEditingUnit(newId)
|
|
setUnitDraftNombre(newUnidad.nombre)
|
|
setUnitOriginalNombre(newUnidad.nombre)
|
|
}
|
|
|
|
// --- Lógica de Temas ---
|
|
const addTema = (unidadId: string) => {
|
|
const unit = unidades.find((u) => u.id === unidadId)
|
|
const unitNumero = unit?.numero ?? 0
|
|
const newTemaIndex = (unit?.temas.length ?? 0) + 1
|
|
const newTemaId = `t-${unitNumero}-${newTemaIndex}`
|
|
const newTema: Tema = {
|
|
id: newTemaId,
|
|
nombre: 'Nuevo tema',
|
|
horasEstimadas: 2,
|
|
}
|
|
|
|
const next = unidades.map((u) =>
|
|
u.id === unidadId ? { ...u, temas: [...u.temas, newTema] } : u,
|
|
)
|
|
setUnidades(next)
|
|
|
|
// Expandir unidad y poner el subtema en edición con foco en el nombre
|
|
setExpandedUnits((prev) => {
|
|
const n = new Set(prev)
|
|
n.add(unidadId)
|
|
return n
|
|
})
|
|
setEditingTema({ unitId: unidadId, temaId: newTemaId })
|
|
setTemaDraftNombre(newTema.nombre)
|
|
setTemaOriginalNombre(newTema.nombre)
|
|
setTemaDraftHoras(String(newTema.horasEstimadas ?? 0))
|
|
setTemaOriginalHoras(newTema.horasEstimadas ?? 0)
|
|
}
|
|
|
|
const handleDelete = () => {
|
|
if (!deleteDialog) return
|
|
let next: Array<UnidadTematica> = unidades
|
|
if (deleteDialog.type === 'unidad') {
|
|
next = unidades
|
|
.filter((u) => u.id !== deleteDialog.id)
|
|
.map((u, i) => ({ ...u, numero: i + 1 }))
|
|
} else if (deleteDialog.parentId) {
|
|
next = unidades.map((u) =>
|
|
u.id === deleteDialog.parentId
|
|
? { ...u, temas: u.temas.filter((t) => t.id !== deleteDialog.id) }
|
|
: u,
|
|
)
|
|
}
|
|
setUnidades(next)
|
|
setDeleteDialog(null)
|
|
void persistUnidades(next)
|
|
// 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>
|
|
|
|
<div className="space-y-4">
|
|
{unidades.map((unidad) => (
|
|
<div
|
|
key={unidad.id}
|
|
ref={(el) => {
|
|
if (el) unitContainerRefs.current.set(unidad.id, el)
|
|
else unitContainerRefs.current.delete(unidad.id)
|
|
}}
|
|
>
|
|
<Card 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
|
|
ref={unitTitleInputRef}
|
|
value={unitDraftNombre}
|
|
onChange={(e) => setUnitDraftNombre(e.target.value)}
|
|
onBlur={() => {
|
|
if (cancelNextBlurRef.current) {
|
|
cancelNextBlurRef.current = false
|
|
return
|
|
}
|
|
commitEditUnit()
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault()
|
|
e.currentTarget.blur()
|
|
return
|
|
}
|
|
if (e.key === 'Escape') {
|
|
e.preventDefault()
|
|
cancelNextBlurRef.current = true
|
|
cancelEditUnit()
|
|
e.currentTarget.blur()
|
|
}
|
|
}}
|
|
className="h-8 max-w-md bg-white"
|
|
/>
|
|
) : (
|
|
<CardTitle
|
|
className="cursor-pointer text-base font-semibold transition-colors hover:text-blue-600"
|
|
onClick={() => beginEditUnit(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 &&
|
|
editingTema.unitId === unidad.id &&
|
|
editingTema.temaId === tema.id
|
|
}
|
|
draftNombre={temaDraftNombre}
|
|
draftHoras={temaDraftHoras}
|
|
onBeginEdit={() => beginEditTema(unidad.id, tema.id)}
|
|
onDraftNombreChange={setTemaDraftNombre}
|
|
onDraftHorasChange={setTemaDraftHoras}
|
|
onEditorBlurCapture={handleTemaEditorBlurCapture}
|
|
onEditorKeyDownCapture={
|
|
handleTemaEditorKeyDownCapture
|
|
}
|
|
onNombreInputRef={(el) => {
|
|
temaNombreInputElRef.current = el
|
|
}}
|
|
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>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex justify-center pt-2">
|
|
<Button
|
|
variant="outline"
|
|
className="gap-2"
|
|
onClick={(e) => {
|
|
// Evita que Enter vuelva a disparar el click sobre el botón.
|
|
e.currentTarget.blur()
|
|
addUnidad()
|
|
}}
|
|
>
|
|
<Plus className="h-4 w-4" /> Nueva unidad
|
|
</Button>
|
|
</div>
|
|
|
|
<DeleteConfirmDialog
|
|
dialog={deleteDialog}
|
|
setDialog={setDeleteDialog}
|
|
onConfirm={handleDelete}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// --- Componentes Auxiliares ---
|
|
interface TemaRowProps {
|
|
tema: Tema
|
|
index: number
|
|
isEditing: boolean
|
|
draftNombre: string
|
|
draftHoras: string
|
|
onBeginEdit: () => void
|
|
onDraftNombreChange: (value: string) => void
|
|
onDraftHorasChange: (value: string) => void
|
|
onEditorBlurCapture: (e: FocusEvent<HTMLDivElement>) => void
|
|
onEditorKeyDownCapture: (e: KeyboardEvent<HTMLDivElement>) => void
|
|
onNombreInputRef: (el: HTMLInputElement | null) => void
|
|
onDelete: () => void
|
|
}
|
|
|
|
function TemaRow({
|
|
tema,
|
|
index,
|
|
isEditing,
|
|
draftNombre,
|
|
draftHoras,
|
|
onBeginEdit,
|
|
onDraftNombreChange,
|
|
onDraftHorasChange,
|
|
onEditorBlurCapture,
|
|
onEditorKeyDownCapture,
|
|
onNombreInputRef,
|
|
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"
|
|
onBlurCapture={onEditorBlurCapture}
|
|
onKeyDownCapture={onEditorKeyDownCapture}
|
|
>
|
|
<Input
|
|
ref={onNombreInputRef}
|
|
value={draftNombre}
|
|
onChange={(e) => onDraftNombreChange(e.target.value)}
|
|
className="h-8 flex-1 bg-white"
|
|
placeholder="Nombre"
|
|
/>
|
|
<Input
|
|
type="number"
|
|
value={draftHoras}
|
|
onChange={(e) => onDraftHorasChange(e.target.value)}
|
|
className="h-8 w-16 bg-white"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<button
|
|
type="button"
|
|
className="flex flex-1 items-center gap-3 text-left"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onBeginEdit()
|
|
}}
|
|
>
|
|
<p className="text-sm font-medium text-slate-700">{tema.nombre}</p>
|
|
<Badge variant="secondary" className="text-[10px] opacity-60">
|
|
{tema.horasEstimadas}h
|
|
</Badge>
|
|
</button>
|
|
<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={(e) => {
|
|
e.stopPropagation()
|
|
onBeginEdit()
|
|
}}
|
|
>
|
|
<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={(e) => {
|
|
e.stopPropagation()
|
|
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>
|
|
)
|
|
}
|