Guillermo.Arrieta/acad-ia-2
0
0
Fork 0
Code Issues 9 Pull Requests Actions Wiki Activity

Merge branch 'main' into issue/225-mejoras-en-el-diseo

Browse Source
This commit is contained in:
Guillermo Arrieta Medina
2026-04-14 12:52:14 -06:00
parent b37d36fe15 03cdd24c1d
commit 1ede5bca32
4 changed files with 162 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/asignaturas/detalle/AsignaturaDetailPage.tsx
+13 -24
View File
@@ -128,8 +128,6 @@ export default function AsignaturaDetailPage() {
}
/* ---------- sincronizar API ---------- */
useEffect(() => {
console.log(requisitosFormateados)
if (asignaturaApi) setAsignatura(asignaturaApi)
}, [asignaturaApi, requisitosFormateados])
@@ -182,7 +180,6 @@ function DatosGenerales({
const criteriosEvaluacion: Array<CriterioEvaluacionRow> = useMemo(() => {
const raw = (data as any)?.criterios_de_evaluacion
console.log(raw)
if (!Array.isArray(raw)) return []
@@ -232,7 +229,7 @@ function DatosGenerales({
if (isLoading) return <p>Cargando información...</p>
return (
<div className="animate-in fade-in space-y-8 pb-8 duration-500">
<div className="animate-in fade-in mx-auto max-w-7xl space-y-8 px-4 py-8 duration-500">
{/* Encabezado de la Sección */}
<div className="flex flex-col justify-between gap-4 border-b pb-6 md:flex-row md:items-center">
<div>
@@ -414,8 +411,7 @@ function InfoCard({
useEffect(() => {
setData(initialContent)
setTempText(initialContent)
console.log(data)
console.log(initialContent)
if (type === 'evaluation') {
const raw = Array.isArray(initialContent) ? initialContent : []
const rows: Array<CriterioEvaluacionRowDraft> = raw
@@ -457,10 +453,6 @@ function InfoCard({
}, [highlightToken])
const handleSave = () => {
console.log('clave, valor:', clave, String(tempText ?? ''))
console.log(clave)
console.log(tempText)
if (type === 'evaluation') {
const cleaned: Array<CriterioEvaluacionRow> = []
for (const r of evalRows) {
@@ -491,8 +483,6 @@ function InfoCard({
return
}
if (type === 'requirements') {
console.log('entre aqui ')
// Si tempText es un array y tiene elementos, tomamos el ID del primero
// Si es "none" o está vacío, mandamos null (para limpiar la seriación)
const prerequisiteId =
@@ -519,8 +509,6 @@ function InfoCard({
}
const handleIARequest = (campoClave: string) => {
console.log(campoClave)
let targetClave = campoClave
if (type === 'evaluation' && !targetClave) {
targetClave = 'criterios_de_evaluacion'
@@ -529,8 +517,6 @@ function InfoCard({
if (targetClave === 'contenido') {
targetClave = 'contenido_tematico'
}
console.log(targetClave)
console.log(asignaturaId)
navigate({
to: '/planes/$planId/asignaturas/$asignaturaId/iaasignatura',
@@ -652,18 +638,12 @@ function InfoCard({
: 'none'
}
onValueChange={(val) => {
console.log(availableSubjects)
const selected = availableSubjects?.find(
(s) => s.id === val,
)
if (val === 'none' || !selected) {
console.log('guardando')
setTempText([])
} else {
console.log('hola')
setTempText([
{
id: selected.id,
@@ -677,20 +657,29 @@ function InfoCard({
>
<SelectTrigger className="w-full">
<div className="flex-1 truncate text-left">
<SelectValue placeholder="Selecciona una materia" />
<SelectValue placeholder="Selecciona una materia">
{Array.isArray(tempText) && tempText.length > 0
? `${tempText[0].code} - ${tempText[0].name}`
: undefined}
</SelectValue>
</div>
</SelectTrigger>
<SelectContent>
<SelectItem value="none">
Ninguna (Sin seriación)
</SelectItem>
{availableSubjects?.map((asig) => (
<SelectItem
key={asig.id}
value={asig.id}
className="max-w-[300px] sm:max-w-[500px]"
>
<span className="block truncate">
<span className="text-primary font-bold">
[C{asig.numero_ciclo}]
</span>{' '}
<span className="inline-block truncate">
{asig.codigo} - {asig.nombre}
</span>
</SelectItem>
src/components/asignaturas/detalle/mapa/AlertaConflicto.tsx
+4 -8
View File
@@ -36,7 +36,8 @@ export const AlertaConflicto = ({
))}
</div>
<p className="mt-2 text-xs font-semibold text-slate-500">
¿Deseas ignorar la regla y moverla de todos modos?
¿Deseas ignorar la regla y moverla de todos modos (Esto eliminará la
seriación)?
</p>
</div>
)
@@ -62,13 +63,8 @@ export const AlertaConflicto = ({
<div className="mt-8 flex flex-col-reverse justify-end gap-3 sm:flex-row">
<AlertDialog.Cancel asChild>
<Button
variant="ghost"
onClick={() => onConfirm()} // Si tu componente espera resolve
className="font-semibold text-slate-500 hover:text-slate-700"
>
Cancelar
</Button>
<Button variant="ghost">Cancelar</Button>
{/* Radix automáticamente llamará a onOpenChange(false) al hacer clic aquí */}
</AlertDialog.Cancel>
<AlertDialog.Action asChild>
src/routes/planes/$planId/_detalle/mapa.tsx
+58 -73
View File
@@ -6,7 +6,6 @@ import { useMemo, useState, useEffect, Fragment, useRef } from 'react'
import type { TipoAsignatura } from '@/data'
import type { Asignatura } from '@/types/plan'
import type { TablesUpdate } from '@/types/supabase'
import { AlertaConflicto } from '@/components/asignaturas/detalle/mapa/AlertaConflicto'
import { Badge } from '@/components/ui/badge'
@@ -402,15 +401,19 @@ function MapaCurricularPage() {
asignatura: Asignatura,
nuevoCiclo: number,
) => {
// 1. Esperamos la interacción del usuario
const acepto = await validarConInterrupcion(asignatura.id, nuevoCiclo)
if (!acepto) {
setConfirmState(null)
return
// 2. Limpiamos el estado del modal ANTES de seguir
setConfirmState(null)
// 3. Verificamos la respuesta
if (acepto === false) {
return // Detenemos la ejecución aquí
}
// 4. Solo si acepto es true, ejecutamos la API
const patch = { numero_ciclo: nuevoCiclo }
updateAsignatura(
{ asignaturaId: asignatura.id, patch: patch as any },
{
@@ -420,12 +423,9 @@ function MapaCurricularPage() {
m.id === asignatura.id ? { ...m, ciclo: nuevoCiclo } : m,
),
)
setConfirmState(null) // Cerramos el modal de Radix al tener éxito
},
onError: (err) => {
// En lugar de alert nativo, podrías usar un toast aquí
console.error('Error al actualizar:', err)
setConfirmState(null)
},
},
)
@@ -587,48 +587,61 @@ function MapaCurricularPage() {
return val
}
const handleSaveChanges = () => {
if (!editingData) return
setAsignaturas((prev) =>
prev.map((m) => (m.id === editingData.id ? { ...editingData } : m)),
)
type AsignaturaPatch = {
codigo?: TablesUpdate<'asignaturas'>['codigo']
nombre?: TablesUpdate<'asignaturas'>['nombre']
tipo?: TablesUpdate<'asignaturas'>['tipo']
creditos?: TablesUpdate<'asignaturas'>['creditos']
horas_academicas?: TablesUpdate<'asignaturas'>['horas_academicas']
horas_independientes?: TablesUpdate<'asignaturas'>['horas_independientes']
numero_ciclo?: TablesUpdate<'asignaturas'>['numero_ciclo']
linea_plan_id?: TablesUpdate<'asignaturas'>['linea_plan_id']
prerrequisito_asignatura_id?: string | null
const procesarCambioAsignatura = async (
asignaturaId: string,
nuevosDatos: Partial<Asignatura>,
) => {
const asignaturaOriginal = asignaturas.find((a) => a.id === asignaturaId)
if (!asignaturaOriginal) return
// ¿Cambió el ciclo? Si es así, validamos seriación
if (
nuevosDatos.ciclo !== undefined &&
nuevosDatos.ciclo !== asignaturaOriginal.ciclo
) {
const acepto = await validarConInterrupcion(
asignaturaId,
nuevosDatos.ciclo,
)
setConfirmState(null)
if (!acepto) return // El usuario canceló, no guardamos nada
}
const patch: Partial<AsignaturaPatch> = {
nombre: editingData.nombre,
codigo: editingData.clave,
creditos: editingData.creditos,
horas_academicas: editingData.hd,
horas_independientes: editingData.hi,
numero_ciclo: editingData.ciclo,
linea_plan_id: editingData.lineaCurricularId,
prerrequisito_asignatura_id: editingData.prerrequisito_asignatura_id,
tipo: editingData.tipo.toUpperCase() as TipoAsignatura, // Asegurar que coincida con el ENUM (OBLIGATORIA/OPTATIVA)
// Si llegamos aquí, o no cambió el ciclo o el usuario aceptó el conflicto
const patch = {
nombre: nuevosDatos.nombre ?? asignaturaOriginal.nombre,
codigo: nuevosDatos.clave ?? asignaturaOriginal.clave,
numero_ciclo: nuevosDatos.ciclo,
linea_plan_id: nuevosDatos.lineaCurricularId,
creditos: nuevosDatos.creditos,
horas_academicas: nuevosDatos.hd,
horas_independientes: nuevosDatos.hi,
prerrequisito_asignatura_id: nuevosDatos.prerrequisito_asignatura_id,
tipo: nuevosDatos.tipo?.toUpperCase() as TipoAsignatura,
}
updateAsignatura(
{ asignaturaId: editingData.id, patch: patch as any },
{ asignaturaId, patch: patch as any },
{
onSuccess: () => {
setIsEditModalOpen(false)
// Opcional: Mostrar un toast de éxito
},
onError: (error) => {
console.error('Error al guardar:', error)
alert('Hubo un error al guardar los cambios.')
setAsignaturas((prev) =>
prev.map((m) =>
m.id === asignaturaId ? { ...m, ...nuevosDatos } : m,
),
)
setIsEditModalOpen(false) // Cerramos el modal si estaba abierto
},
onError: (err) => console.error('Error al guardar:', err),
},
)
}
const handleSaveChanges = () => {
if (!editingData) return
// Llamamos a la lógica centralizada que incluye la alerta
procesarCambioAsignatura(editingData.id, editingData)
}
const unassignedAsignaturas = asignaturas.filter(
(m) => m.ciclo === null || m.lineaCurricularId === null,
)
@@ -700,41 +713,13 @@ function MapaCurricularPage() {
lineaId: string | null,
) => {
e.preventDefault()
if (!draggedAsignatura) return
// Buscamos la asignatura completa para tener sus datos
const asignatura = asignaturas.find((a) => a.id === draggedAsignatura)
if (!asignatura) return
// SI EL CAMBIO ES DE CICLO (y no solo de línea o a la bandeja)
// Ejecutamos la validación segura
if (cicloDestino !== null && cicloDestino !== asignatura.ciclo) {
// Llamamos a la función que agregaste
// IMPORTANTE: Asegúrate que handleCambioCicloSeguro esté definida ANTES o sea accesible
await handleCambioCicloSeguro(asignatura, cicloDestino)
// Si la validación interna de handleCambioCicloSeguro falla o el usuario cancela,
// la ejecución se detiene dentro de esa función.
} else {
// CASO B: Es un movimiento a la bandeja (null) o cambio de línea en el mismo ciclo
// Mantenemos la lógica simple de actualización
setAsignaturas((prev) =>
prev.map((m) =>
m.id === draggedAsignatura
? { ...m, ciclo: cicloDestino, lineaCurricularId: lineaId }
: m,
),
)
updateAsignatura(
{
asignaturaId: draggedAsignatura,
patch: { numero_ciclo: cicloDestino, linea_plan_id: lineaId },
},
{ onError: (err) => console.error('Error al mover:', err) },
)
}
// Solo disparamos la lógica si realmente hay un cambio de posición
procesarCambioAsignatura(draggedAsignatura, {
ciclo: cicloDestino,
lineaCurricularId: lineaId,
})
setDraggedAsignatura(null)
}
src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx
+87 -3
View File
@@ -17,9 +17,10 @@ import {
} from 'lucide-react'
import { useEffect, useState } from 'react'
import { AlertaConflicto } from '@/components/asignaturas/detalle/mapa/AlertaConflicto'
import { Badge } from '@/components/ui/badge'
import { lateralConfetti } from '@/components/ui/lateral-confetti'
import { useSubject, useUpdateAsignatura } from '@/data'
import { useSubject, useUpdateAsignatura, usePlanAsignaturas } from '@/data'
import { cn } from '@/lib/utils'
export const Route = createFileRoute(
@@ -167,6 +168,45 @@ function AsignaturaLayout() {
const { data: asignaturaApi, isLoading: loadingAsig } =
useSubject(asignaturaId)
const { data: todasLasAsignaturas } = usePlanAsignaturas(planId)
const [confirmState, setConfirmState] = useState<{
isOpen: boolean
resolve: (value: boolean) => void
mensaje: string
} | null>(null)
const validarConInterrupcion = async (
nuevoCiclo: number,
): Promise<boolean> => {
if (!todasLasAsignaturas || !asignaturaApi) return true
const materiasConflicto = todasLasAsignaturas.filter((a) => {
const esPrerrequisitoConflictivo =
asignaturaApi.prerrequisito_asignatura_id === a.id &&
(a.numero_ciclo ?? 0) >= nuevoCiclo
const esDependienteConflictiva =
a.prerrequisito_asignatura_id === asignaturaApi.id &&
(a.numero_ciclo ?? 0) <= nuevoCiclo
return esPrerrequisitoConflictivo || esDependienteConflictiva
})
if (materiasConflicto.length === 0) return true
const listaNombres = materiasConflicto.map((m) => m.nombre)
return new Promise((resolve) => {
setConfirmState({
isOpen: true,
resolve,
mensaje: JSON.stringify({
main: `Mover "${asignaturaApi.nombre}" al ciclo ${nuevoCiclo} genera conflictos con:`,
materias: listaNombres,
}),
})
})
}
const updateAsignatura = useUpdateAsignatura()
const [headerData, setHeaderData] = useState({
@@ -187,7 +227,25 @@ function AsignaturaLayout() {
}
}, [asignaturaApi])
const handleUpdateHeader = (key: string, value: string | number) => {
const handleUpdateHeader = async (key: string, value: string | number) => {
// 1. Si es ciclo, validamos antes de hacer nada
if (key === 'ciclo') {
const nuevoCiclo = Number(value)
const acepto = await validarConInterrupcion(nuevoCiclo)
setConfirmState(null) // Cerramos el modal tras la respuesta
if (!acepto) {
// Revertimos el estado local al valor de la API si cancela
setHeaderData((prev) => ({
...prev,
ciclo: asignaturaApi?.numero_ciclo ?? 0,
}))
return
}
}
// 2. Si no es ciclo o si aceptó el conflicto, procedemos
const newData = { ...headerData, [key]: value }
setHeaderData(newData)
@@ -294,10 +352,36 @@ function AsignaturaLayout() {
</div>
</section>
{/* TABS NAVEGACIÓN (Se mantiene semántico para el cuerpo de la página) */}
{/* TABS NAVEGACIÓN (Se mantiene semántico para el cuerpo de la página)
<nav className="border-border bg-background/80 sticky top-0 z-20 border-b backdrop-blur-md">
<div className="mx-auto px-4 py-1 md:px-6 lg:px-8">
<div className="scrollbar-hide flex items-center justify-start gap-8 overflow-x-auto whitespace-nowrap md:justify-start">
*/}
{confirmState && (
<AlertaConflicto
isOpen={confirmState.isOpen}
onOpenChange={(open) => {
if (!open) {
confirmState.resolve(false)
setConfirmState(null)
}
}}
onConfirm={() => confirmState.resolve(true)}
titulo="Conflicto de Seriación"
descripcion={confirmState.mensaje}
/>
)}
{/* TABS */}
<nav className="sticky top-0 z-20 border-b bg-white">
<div className="mx-auto p-4 py-2 md:px-6 lg:px-8">
{/* CAMBIOS CLAVE:
1. overflow-x-auto: Permite scroll horizontal.
2. scrollbar-hide: (Opcional) para que no se vea la barra fea.
3. justify-start md:justify-center: Alineado a la izquierda en móvil para que el scroll funcione, centrado en desktop.
*/}
<div className="no-scrollbar flex items-center justify-start gap-8 overflow-x-auto whitespace-nowrap md:justify-start">
{[
{ label: 'Datos', to: '' },
{ label: 'Contenido', to: 'contenido' },