From 2359e38f8531ddc2ba6f675818f757b9dba8a38a Mon Sep 17 00:00:00 2001 From: Alejandro Rosales Date: Mon, 23 Mar 2026 14:30:16 -0600 Subject: [PATCH] =?UTF-8?q?Mejorar=20el=20espaciado=20y=20la=20organizaci?= =?UTF-8?q?=C3=B3n=20de=20la=20interfaz=20en=20el=20componente=20MapaCurri?= =?UTF-8?q?cular?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/planes/$planId/_detalle/mapa.tsx | 390 ++++++++++---------- 1 file changed, 190 insertions(+), 200 deletions(-) diff --git a/src/routes/planes/$planId/_detalle/mapa.tsx b/src/routes/planes/$planId/_detalle/mapa.tsx index cd14490..1fb3feb 100644 --- a/src/routes/planes/$planId/_detalle/mapa.tsx +++ b/src/routes/planes/$planId/_detalle/mapa.tsx @@ -1,13 +1,8 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/label-has-associated-control */ import { createFileRoute } from '@tanstack/react-router' -import { - Plus, - ChevronDown, - AlertTriangle, - Trash2, - Pencil, -} from 'lucide-react' +import { Plus, ChevronDown, AlertTriangle, Trash2, Pencil } from 'lucide-react' +import * as Icons from 'lucide-react' import { useMemo, useState, useEffect, Fragment } from 'react' import type { TipoAsignatura } from '@/data' @@ -36,6 +31,12 @@ import { SelectTrigger, SelectValue, } from '@/components/ui/select' +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@/components/ui/tooltip' import { useCreateLinea, useDeleteLinea, @@ -45,12 +46,6 @@ import { useUpdateAsignatura, useUpdateLinea, } from '@/data' -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from '@/components/ui/tooltip' // --- Mapeadores (Fuera del componente para mayor limpieza) --- const palette = [ @@ -137,8 +132,6 @@ function StatItem({ ) } -import * as Icons from 'lucide-react' - const estadoConfig: Record< Asignatura['estado'], { @@ -210,10 +203,10 @@ function AsignaturaCardItem({ onDragStart={(e) => onDragStart(e, asignatura.id)} onClick={onClick} className={[ - 'group relative h-[200px] w-[272px] shrink-0 overflow-hidden rounded-[22px] border text-left', + 'group relative h-50 w-50 shrink-0 overflow-hidden rounded-[22px] border text-left', 'transition-all duration-300 ease-out', - 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30', - 'active:cursor-grabbing cursor-grab', + 'focus-visible:ring-ring/30 focus-visible:ring-2 focus-visible:outline-none', + 'cursor-grab active:cursor-grabbing', isDragging ? 'scale-[0.985] opacity-45 shadow-none' : 'hover:-translate-y-1 hover:shadow-lg', @@ -235,7 +228,7 @@ function AsignaturaCardItem({ {/* glow decorativo */}
@@ -243,7 +236,7 @@ function AsignaturaCardItem({ {/* top */}
- {asignatura.clave || 'Sin clave'} + + {asignatura.clave || 'Sin clave'} +
-
-
- - -
-
- + + +
+ +
+ + + {estado.label} -
- -
+ +
{/* titulo */} -
+

-
+
- + CR
-
+
{asignatura.creditos}
-
+
- + HD
-
+
{asignatura.hd}
-
+
- + HI
-
+
{asignatura.hi}
{/* drag affordance */} -
- +
+
@@ -341,7 +326,13 @@ function AsignaturaCardItem({
- {lineaNombre ? `${lineaNombre} · ` : ''} + {/* ciclo */} + {asignatura.ciclo ? ( + C{asignatura.ciclo} · + ) : null} + {lineaNombre ? ( + {lineaNombre} · + ) : null} {asignatura.nombre}
@@ -689,7 +680,7 @@ function MapaCurricularPage() { return
Cargando mapa curricular...
return ( -
+
{/* Header */}
@@ -704,15 +695,15 @@ function MapaCurricularPage() { {asignaturas.filter((m) => !m.ciclo || !m.lineaCurricularId).length > 0 && ( - - {' '} - { - asignaturas.filter((m) => !m.ciclo || !m.lineaCurricularId) - .length - }{' '} - sin asignar - - )} + + {' '} + { + asignaturas.filter((m) => !m.ciclo || !m.lineaCurricularId) + .length + }{' '} + sin asignar + + )}
-
-
-
- LÍNEA CURRICULAR +
+
+ LÍNEA CURRICULAR +
+ + {ciclosArray.map((n) => ( +
+ Ciclo {n}
+ ))} - {ciclosArray.map((n) => ( -
- Ciclo {n} -
- ))} +
+ SUBTOTAL +
-
- SUBTOTAL -
+ {lineas.map((linea, idx) => { + const sub = getSubtotalLinea(linea.id) - {lineas.map((linea, idx) => { - const sub = getSubtotalLinea(linea.id) - - return ( - -
-
- handleKeyDownLinea(e, linea.id)} - onBlur={(e) => handleBlurLinea(e, linea.id)} - onClick={() => { - if (editingLineaId !== linea.id) { - setEditingLineaId(linea.id) - setTempNombreLinea(linea.nombre) - } - }} - className={`block w-full text-xs font-bold break-words outline-none ${editingLineaId === linea.id + return ( + +
+
+ handleKeyDownLinea(e, linea.id)} + onBlur={(e) => handleBlurLinea(e, linea.id)} + onClick={() => { + if (editingLineaId !== linea.id) { + setEditingLineaId(linea.id) + setTempNombreLinea(linea.nombre) + } + }} + className={`block w-full truncate text-xs font-bold break-words outline-none ${ + editingLineaId === linea.id ? 'cursor-text border-b border-teal-500/50 pb-1' : 'cursor-pointer' - }`} - > - {linea.nombre} - -
-
- - borrarLinea(linea.id)} - className="..." - size={14} - /> -
-
- - {ciclosArray.map((ciclo) => ( -
handleDrop(e, ciclo, linea.id)} - className="min-h-[140px] space-y-2 rounded-xl border-2 border-dashed border-slate-100 bg-slate-50/20 p-2" + }`} > - {asignaturas - .filter( - (m) => - m.ciclo === ciclo && - m.lineaCurricularId === linea.id, - ) - .map((m) => ( - { - setEditingData(m) - setIsEditModalOpen(true) - }} - /> - ))} -
- ))} - -
-
Cr: {sub.cr}
-
HD: {sub.hd}
-
HI: {sub.hi}
+ {linea.nombre} +
- - ) - })} - -
- -
- Totales por Ciclo -
- - {ciclosArray.map((ciclo) => { - const t = getTotalesCiclo(ciclo) - return ( -
-
Cr: {t.cr}
-
- HD: {t.hd} • HI: {t.hi} +
+ + borrarLinea(linea.id)} + className="..." + size={14} + />
- ) - })} -
-
{stats.cr} Cr
-
{stats.hd + stats.hi} Hrs
-
+ {ciclosArray.map((ciclo) => ( +
handleDrop(e, ciclo, linea.id)} + className="min-h-[140px] space-y-2 rounded-xl border-2 border-dashed border-slate-100 bg-slate-50/20 p-2" + > + {asignaturas + .filter( + (m) => + m.ciclo === ciclo && m.lineaCurricularId === linea.id, + ) + .map((m) => ( + { + setEditingData(m) + setIsEditModalOpen(true) + }} + /> + ))} +
+ ))} + +
+
Cr: {sub.cr}
+
HD: {sub.hd}
+
HI: {sub.hi}
+
+ + ) + })} + +
+ +
+ Totales por Ciclo +
+ + {ciclosArray.map((ciclo) => { + const t = getTotalesCiclo(ciclo) + return ( +
+
Cr: {t.cr}
+
+ HD: {t.hd} • HI: {t.hi} +
+
+ ) + })} + +
+
{stats.cr} Cr
+
{stats.hd + stats.hi} Hrs
{/* Asignaturas Sin Asignar */} -
+
-
+
-

+

Bandeja de entrada

-
+
{unassignedAsignaturas.length}
-

+

Asignaturas sin ciclo o línea curricular

-
+
Arrastra aquí para desasignar
@@ -969,18 +959,18 @@ function MapaCurricularPage() { ))}
) : ( -
-
+
+
-

+

No hay asignaturas pendientes

-

- Todo está colocado en el mapa. Arrastra una asignatura aquí para quitarle - ciclo y línea curricular. +

+ Todo está colocado en el mapa. Arrastra una asignatura aquí para + quitarle ciclo y línea curricular.

)} -- 2.49.1