Merge branch 'main' into issue/197-que-el-contenido-temtico-se-muestre-en-el-historia
This commit is contained in:
@@ -229,12 +229,38 @@ export function IAAsignaturaTab() {
|
||||
}
|
||||
}, [activeChats, loadingConv])
|
||||
|
||||
const filteredFields = useMemo(() => {
|
||||
if (!showSuggestions) return availableFields
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const value = e.target.value
|
||||
const selectionStart = e.target.selectionStart // Posición del cursor
|
||||
setInput(value)
|
||||
|
||||
// Buscamos si el carácter anterior al cursor es ':'
|
||||
const lastChar = value.slice(selectionStart - 1, selectionStart)
|
||||
|
||||
if (lastChar === ':') {
|
||||
setShowSuggestions(true)
|
||||
} else if (!value.includes(':')) {
|
||||
// Si borran todos los dos puntos, cerramos
|
||||
setShowSuggestions(false)
|
||||
}
|
||||
}
|
||||
|
||||
const filteredFields = useMemo(() => {
|
||||
if (!showSuggestions || !input) return availableFields
|
||||
|
||||
// 1. Encontrar el ":" más cercano a la IZQUIERDA del cursor
|
||||
// Usamos una posición de referencia (si no tienes ref, usaremos el final del string,
|
||||
// pero para mayor precisión lo ideal es usar e.target.selectionStart en el onChange)
|
||||
|
||||
// Extraemos lo que hay después del último ':' para filtrar
|
||||
const lastColonIndex = input.lastIndexOf(':')
|
||||
const query = input.slice(lastColonIndex + 1).toLowerCase()
|
||||
if (lastColonIndex === -1) return availableFields
|
||||
|
||||
// 2. Extraer solo el fragmento de "búsqueda"
|
||||
// Cortamos desde el ":" hasta el final, y luego tomamos solo la primera palabra
|
||||
const textAfterColon = input.slice(lastColonIndex + 1)
|
||||
const query = textAfterColon.split(/\s/)[0].toLowerCase() // Se detiene al encontrar un espacio
|
||||
|
||||
if (!query) return availableFields
|
||||
|
||||
return availableFields.filter(
|
||||
(f) =>
|
||||
@@ -254,24 +280,28 @@ export function IAAsignaturaTab() {
|
||||
|
||||
// 3. Función para insertar el campo y limpiar el prompt
|
||||
const handleSelectField = (field: SelectedField) => {
|
||||
// 1. Agregamos al array de objetos (para tu lógica de API)
|
||||
if (!selectedFields.find((f) => f.key === field.key)) {
|
||||
setSelectedFields((prev) => [...prev, field])
|
||||
}
|
||||
|
||||
// 2. Lógica de autocompletado en el texto
|
||||
const lastColonIndex = input.lastIndexOf(':')
|
||||
if (lastColonIndex !== -1) {
|
||||
// Tomamos lo que había antes del ":" + el Nombre del Campo + un espacio
|
||||
const nuevoTexto = input.slice(0, lastColonIndex) + `${field.label} `
|
||||
const parteAntesDelColon = input.slice(0, lastColonIndex)
|
||||
|
||||
// Buscamos si hay texto después de la palabra que estamos escribiendo
|
||||
const textoDespuesDelColon = input.slice(lastColonIndex + 1)
|
||||
const espacioIndex = textoDespuesDelColon.indexOf(' ')
|
||||
|
||||
// Si hay un espacio, guardamos lo que sigue. Si no, es el final del texto.
|
||||
const parteRestante =
|
||||
espacioIndex !== -1 ? textoDespuesDelColon.slice(espacioIndex) : ''
|
||||
|
||||
// Reconstruimos: [Antes] + [Label] + [Lo que ya estaba después]
|
||||
const nuevoTexto = `${parteAntesDelColon}${field.label}${parteRestante}`
|
||||
setInput(nuevoTexto)
|
||||
}
|
||||
|
||||
// 3. Cerramos el buscador y devolvemos el foco al textarea
|
||||
setShowSuggestions(false)
|
||||
|
||||
// Opcional: Si tienes una ref del textarea, puedes hacer:
|
||||
// textareaRef.current?.focus()
|
||||
}
|
||||
|
||||
const handleSaveName = (id: string) => {
|
||||
@@ -740,10 +770,28 @@ export function IAAsignaturaTab() {
|
||||
<Textarea
|
||||
value={input}
|
||||
onChange={(e) => {
|
||||
setInput(e.target.value)
|
||||
if (e.target.value.endsWith(':')) setShowSuggestions(true)
|
||||
else if (showSuggestions && !e.target.value.includes(':'))
|
||||
const val = e.target.value
|
||||
const cursor = e.target.selectionStart
|
||||
setInput(val)
|
||||
|
||||
const textBeforeCursor = val.slice(0, cursor)
|
||||
const lastColonIndex = textBeforeCursor.lastIndexOf(':')
|
||||
|
||||
if (lastColonIndex !== -1) {
|
||||
const textSinceColon = textBeforeCursor.slice(
|
||||
lastColonIndex + 1,
|
||||
)
|
||||
|
||||
// Si hay un espacio después del ":", cerramos sugerencias (ya no es un comando)
|
||||
// Si no hay espacio, activamos
|
||||
if (!textSinceColon.includes(' ')) {
|
||||
setShowSuggestions(true)
|
||||
} else {
|
||||
setShowSuggestions(false)
|
||||
}
|
||||
} else {
|
||||
setShowSuggestions(false)
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
|
||||
@@ -218,26 +218,30 @@ function AsignaturasPage() {
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-slate-50/50">
|
||||
<TableHead className="w-30">Clave</TableHead>
|
||||
<TableHead>Nombre</TableHead>
|
||||
<TableHead className="text-center">Créditos</TableHead>
|
||||
<TableHead className="text-center">Ciclo</TableHead>
|
||||
<TableHead>Línea Curricular</TableHead>
|
||||
<TableHead>Tipo</TableHead>
|
||||
<TableHead>Estado</TableHead>
|
||||
<TableHead className="w-12.5"></TableHead>
|
||||
<TableHead className="w-30 px-6 py-4">Clave</TableHead>
|
||||
<TableHead className="px-6 py-4">Nombre</TableHead>
|
||||
<TableHead className="px-6 py-4 text-center">Créditos</TableHead>
|
||||
<TableHead className="px-6 py-4 text-center">Ciclo</TableHead>
|
||||
<TableHead className="px-6 py-4">Línea Curricular</TableHead>
|
||||
<TableHead className="px-6 py-4">Tipo</TableHead>
|
||||
<TableHead className="px-6 py-4">Estado</TableHead>
|
||||
<TableHead className="w-12.5 px-6 py-4"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredAsignaturas.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} className="h-40 text-center">
|
||||
<div className="text-muted-foreground flex flex-col items-center justify-center">
|
||||
<BookOpen className="mb-2 h-10 w-10 opacity-20" />
|
||||
<p className="font-medium">No se encontraron asignaturas</p>
|
||||
<p className="text-xs">
|
||||
Intenta cambiar los filtros de búsqueda
|
||||
</p>
|
||||
<TableCell colSpan={8} className="h-40 px-6 py-8 text-center">
|
||||
<div className="text-muted-foreground flex flex-col items-center justify-center gap-3">
|
||||
<BookOpen className="h-10 w-10 opacity-20" />
|
||||
<div>
|
||||
<p className="font-medium">
|
||||
No se encontraron asignaturas
|
||||
</p>
|
||||
<p className="mt-1 text-xs">
|
||||
Intenta cambiar los filtros de búsqueda
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
@@ -251,25 +255,25 @@ function AsignaturasPage() {
|
||||
to: '/planes/$planId/asignaturas/$asignaturaId',
|
||||
params: {
|
||||
planId,
|
||||
asignaturaId: asignatura.id, // 👈 puede ser índice, consecutivo o slug
|
||||
asignaturaId: asignatura.id,
|
||||
},
|
||||
state: {
|
||||
realId: asignatura.id, // 👈 ID largo oculto
|
||||
realId: asignatura.id,
|
||||
asignaturaId: asignatura.id,
|
||||
} as any,
|
||||
})
|
||||
}
|
||||
>
|
||||
<TableCell className="font-mono text-xs font-bold text-slate-400">
|
||||
<TableCell className="px-6 py-4 font-mono text-xs font-bold text-slate-400">
|
||||
{asignatura.clave}
|
||||
</TableCell>
|
||||
<TableCell className="font-semibold text-slate-700">
|
||||
<TableCell className="px-6 py-4 font-semibold text-slate-700">
|
||||
{asignatura.nombre}
|
||||
</TableCell>
|
||||
<TableCell className="text-center font-medium">
|
||||
<TableCell className="px-6 py-4 text-center font-medium">
|
||||
{asignatura.creditos}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<TableCell className="px-6 py-4 text-center">
|
||||
{asignatura.ciclo ? (
|
||||
<Badge variant="outline" className="font-normal">
|
||||
Ciclo {asignatura.ciclo}
|
||||
@@ -278,10 +282,10 @@ function AsignaturasPage() {
|
||||
<span className="text-slate-300">—</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-slate-600">
|
||||
<TableCell className="px-6 py-4 text-sm text-slate-600">
|
||||
{getLineaNombre(asignatura.lineaCurricularId)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCell className="px-6 py-4">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`capitalize shadow-sm ${tipoConfig[asignatura.tipo].className}`}
|
||||
@@ -289,7 +293,7 @@ function AsignaturasPage() {
|
||||
{tipoConfig[asignatura.tipo].label}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCell className="px-6 py-4">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`capitalize shadow-sm ${statusConfig[asignatura.estado].className}`}
|
||||
@@ -297,7 +301,7 @@ function AsignaturasPage() {
|
||||
{statusConfig[asignatura.estado].label}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCell className="px-6 py-4">
|
||||
<div className="opacity-0 transition-opacity group-hover:opacity-100">
|
||||
<ChevronRight className="h-5 w-5 text-slate-400" />
|
||||
</div>
|
||||
|
||||
@@ -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'],
|
||||
{
|
||||
@@ -198,7 +191,7 @@ function AsignaturaCardItem({
|
||||
isDragging: boolean
|
||||
onClick: () => void
|
||||
}) {
|
||||
const estado = estadoConfig[asignatura.estado] ?? estadoConfig.borrador
|
||||
const estado = estadoConfig[asignatura.estado]
|
||||
const EstadoIcon = estado.icon
|
||||
|
||||
return (
|
||||
@@ -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-40 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 */}
|
||||
<div
|
||||
className="absolute -top-10 -right-10 h-28 w-28 rounded-full blur-2xl transition-transform duration-500 group-hover:scale-110"
|
||||
className="absolute -top-10 -right-10 h-28 w-28 rounded-full blur-2xl"
|
||||
style={{ backgroundColor: hexToRgba(lineaColor, 0.22) }}
|
||||
/>
|
||||
|
||||
@@ -243,7 +236,7 @@ function AsignaturaCardItem({
|
||||
{/* top */}
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div
|
||||
className="inline-flex h-8 max-w-[200px] items-center gap-1.5 rounded-full border px-2.5 text-[11px] font-semibold"
|
||||
className="inline-flex h-8 max-w-32 items-center gap-1.5 rounded-full border px-2.5 text-[11px] font-semibold"
|
||||
style={{
|
||||
borderColor: hexToRgba(lineaColor, 0.2),
|
||||
backgroundColor: hexToRgba(lineaColor, 0.1),
|
||||
@@ -251,37 +244,29 @@ function AsignaturaCardItem({
|
||||
}}
|
||||
>
|
||||
<Icons.KeyRound className="h-3.5 w-3.5 shrink-0" />
|
||||
<span className="truncate">{asignatura.clave || 'Sin clave'}</span>
|
||||
<span className="truncate">
|
||||
{asignatura.clave || 'Sin clave'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative flex h-8 items-center overflow-hidden rounded-full bg-background/70 px-2 backdrop-blur-sm">
|
||||
<div className="flex gap-4 items-center gap-1.5 transition-transform duration-300 group-hover:-translate-x-[72px]">
|
||||
<span className={`h-2.5 w-2.5 rounded-full ${estado.dot}`} />
|
||||
<EstadoIcon
|
||||
className={[
|
||||
'h-3.5 w-3.5 text-foreground/65',
|
||||
asignatura.estado === 'generando' ? 'animate-spin' : '',
|
||||
].join(' ')}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={[
|
||||
'absolute right-2 flex translate-x-6 items-center gap-1.5 opacity-0 transition-all duration-300',
|
||||
'group-hover:translate-x-0 group-hover:opacity-100'
|
||||
].join(' ')}
|
||||
>
|
||||
<span className="text-[11px] font-semibold whitespace-nowrap">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="bg-background/70 flex h-8 items-center rounded-full px-2 backdrop-blur-sm">
|
||||
<EstadoIcon className="text-foreground/65 h-3.5 w-3.5" />
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="left">
|
||||
<span className="text-xs font-semibold">
|
||||
{estado.label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
{/* titulo */}
|
||||
<div className="mt-4 min-h-[72px]">
|
||||
<div className="mt-4 min-h-18">
|
||||
<h3
|
||||
className="overflow-hidden text-[18px] leading-[1.08] font-bold text-foreground"
|
||||
className="text-foreground text-md overflow-hidden leading-[1.08] font-bold"
|
||||
style={{
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 3,
|
||||
@@ -295,53 +280,59 @@ function AsignaturaCardItem({
|
||||
{/* bottom */}
|
||||
<div className="mt-auto grid grid-cols-3 gap-2">
|
||||
<div className="rounded-2xl border border-white/40 bg-white/55 px-2.5 py-2 backdrop-blur-sm dark:border-white/10 dark:bg-white/5">
|
||||
<div className="mb-1 flex items-center gap-1.5 text-muted-foreground">
|
||||
<div className="text-muted-foreground mb-1 flex items-center gap-1.5">
|
||||
<Icons.Award className="h-3.5 w-3.5" />
|
||||
<span className="text-[10px] font-medium uppercase tracking-wide">
|
||||
<span className="text-[10px] font-medium tracking-wide uppercase">
|
||||
CR
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-foreground">
|
||||
<div className="text-foreground text-sm font-bold">
|
||||
{asignatura.creditos}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-white/40 bg-white/55 px-2.5 py-2 backdrop-blur-sm dark:border-white/10 dark:bg-white/5">
|
||||
<div className="mb-1 flex items-center gap-1.5 text-muted-foreground">
|
||||
<div className="text-muted-foreground mb-1 flex items-center gap-1.5">
|
||||
<Icons.Clock3 className="h-3.5 w-3.5" />
|
||||
<span className="text-[10px] font-medium uppercase tracking-wide">
|
||||
<span className="text-[10px] font-medium tracking-wide uppercase">
|
||||
HD
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-foreground">
|
||||
<div className="text-foreground text-sm font-bold">
|
||||
{asignatura.hd}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-white/40 bg-white/55 px-2.5 py-2 backdrop-blur-sm dark:border-white/10 dark:bg-white/5">
|
||||
<div className="mb-1 flex items-center gap-1.5 text-muted-foreground">
|
||||
<div className="text-muted-foreground mb-1 flex items-center gap-1.5">
|
||||
<Icons.BookOpenText className="h-3.5 w-3.5" />
|
||||
<span className="text-[10px] font-medium uppercase tracking-wide">
|
||||
<span className="text-[10px] font-medium tracking-wide uppercase">
|
||||
HI
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-foreground">
|
||||
<div className="text-foreground text-sm font-bold">
|
||||
{asignatura.hi}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* drag affordance */}
|
||||
<div className="pointer-events-none absolute right-3 bottom-3 rounded-full bg-background/70 p-1.5 opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:opacity-100">
|
||||
<Icons.GripVertical className="h-4 w-4 text-muted-foreground/55" />
|
||||
<div className="bg-background/70 pointer-events-none absolute right-3 bottom-3 rounded-full p-1.5 opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:opacity-100">
|
||||
<Icons.GripVertical className="text-muted-foreground/55 h-4 w-4" />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
|
||||
<TooltipContent side="bottom">
|
||||
<div className="text-xs">
|
||||
{lineaNombre ? `${lineaNombre} · ` : ''}
|
||||
<div className="text-lg">
|
||||
{/* ciclo */}
|
||||
{asignatura.ciclo ? (
|
||||
<span className="font-bold">C{asignatura.ciclo} · </span>
|
||||
) : null}
|
||||
{lineaNombre ? (
|
||||
<span className="font-medium">{lineaNombre} · </span>
|
||||
) : null}
|
||||
{asignatura.nombre}
|
||||
</div>
|
||||
</TooltipContent>
|
||||
@@ -689,7 +680,7 @@ function MapaCurricularPage() {
|
||||
return <div className="p-10 text-center">Cargando mapa curricular...</div>
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-2 py-6">
|
||||
<div className="container">
|
||||
{/* Header */}
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
@@ -704,15 +695,15 @@ function MapaCurricularPage() {
|
||||
</Button>
|
||||
{asignaturas.filter((m) => !m.ciclo || !m.lineaCurricularId).length >
|
||||
0 && (
|
||||
<Badge className="border-amber-100 bg-amber-50 text-amber-600 hover:bg-amber-50">
|
||||
<AlertTriangle size={14} className="mr-1" />{' '}
|
||||
{
|
||||
asignaturas.filter((m) => !m.ciclo || !m.lineaCurricularId)
|
||||
.length
|
||||
}{' '}
|
||||
sin asignar
|
||||
</Badge>
|
||||
)}
|
||||
<Badge className="border-amber-100 bg-amber-50 text-amber-600 hover:bg-amber-50">
|
||||
<AlertTriangle size={14} className="mr-1" />{' '}
|
||||
{
|
||||
asignaturas.filter((m) => !m.ciclo || !m.lineaCurricularId)
|
||||
.length
|
||||
}{' '}
|
||||
sin asignar
|
||||
</Badge>
|
||||
)}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button className="bg-teal-700 text-white hover:bg-teal-800">
|
||||
@@ -768,172 +759,198 @@ function MapaCurricularPage() {
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto pb-6">
|
||||
<div className="min-w-[1500px]">
|
||||
<div
|
||||
className="grid gap-3"
|
||||
style={{
|
||||
gridTemplateColumns: `220px repeat(${ciclosTotales}, minmax(auto, 1fr)) 120px`,
|
||||
}}
|
||||
>
|
||||
<div className="self-end px-2 text-xs font-bold text-slate-400">
|
||||
LÍNEA CURRICULAR
|
||||
<div
|
||||
className="grid gap-2"
|
||||
style={{
|
||||
gridTemplateColumns: `140px repeat(${ciclosTotales}, minmax(auto, 1fr)) 120px`,
|
||||
}}
|
||||
>
|
||||
<div className="self-end px-2 text-xs font-bold text-slate-400">
|
||||
LÍNEA CURRICULAR
|
||||
</div>
|
||||
|
||||
{ciclosArray.map((n) => (
|
||||
<div
|
||||
key={`header-${n}`}
|
||||
className="rounded-lg bg-slate-100 p-2 text-center text-sm font-bold text-slate-600"
|
||||
>
|
||||
Ciclo {n}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{ciclosArray.map((n) => (
|
||||
<div
|
||||
key={`header-${n}`}
|
||||
className="rounded-lg bg-slate-100 p-2 text-center text-sm font-bold text-slate-600"
|
||||
>
|
||||
Ciclo {n}
|
||||
</div>
|
||||
))}
|
||||
<div className="self-end text-center text-xs font-bold text-slate-400">
|
||||
SUBTOTAL
|
||||
</div>
|
||||
|
||||
<div className="self-end text-center text-xs font-bold text-slate-400">
|
||||
SUBTOTAL
|
||||
</div>
|
||||
{lineas.map((linea, idx) => {
|
||||
const sub = getSubtotalLinea(linea.id)
|
||||
|
||||
{lineas.map((linea, idx) => {
|
||||
const sub = getSubtotalLinea(linea.id)
|
||||
|
||||
return (
|
||||
<Fragment key={linea.id}>
|
||||
<div
|
||||
className={`group relative flex items-center justify-between rounded-xl border-l-4 p-4 transition-all ${lineColors[idx % lineColors.length]
|
||||
} ${editingLineaId === linea.id ? 'bg-white ring-2 ring-teal-500/20' : ''}`}
|
||||
>
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<span
|
||||
contentEditable={editingLineaId === linea.id}
|
||||
suppressContentEditableWarning
|
||||
spellCheck={false}
|
||||
onKeyDown={(e) => 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 (
|
||||
<Fragment key={linea.id}>
|
||||
<div
|
||||
className={`group relative flex items-center justify-between rounded-xl border-l-4 p-3 transition-all ${
|
||||
lineColors[idx % lineColors.length]
|
||||
} ${editingLineaId === linea.id ? 'bg-white ring-2 ring-teal-500/20' : ''}`}
|
||||
>
|
||||
<div className="min-w-0 flex-1 overflow-hidden">
|
||||
<span
|
||||
contentEditable={editingLineaId === linea.id}
|
||||
suppressContentEditableWarning
|
||||
spellCheck={false}
|
||||
onKeyDown={(e) => 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}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setEditingLineaId(linea.id)}
|
||||
className="..."
|
||||
>
|
||||
{' '}
|
||||
<Pencil size={12} />{' '}
|
||||
</button>
|
||||
<Trash2
|
||||
onClick={() => borrarLinea(linea.id)}
|
||||
className="..."
|
||||
size={14}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ciclosArray.map((ciclo) => (
|
||||
<div
|
||||
key={`${linea.id}-${ciclo}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={(e) => 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) => (
|
||||
<AsignaturaCardItem
|
||||
key={m.id}
|
||||
asignatura={m}
|
||||
lineaColor={linea.color || '#1976d2'}
|
||||
lineaNombre={linea.nombre}
|
||||
isDragging={draggedAsignatura === m.id}
|
||||
onDragStart={handleDragStart}
|
||||
onClick={() => {
|
||||
setEditingData(m)
|
||||
setIsEditModalOpen(true)
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="flex flex-col justify-center rounded-xl border border-slate-100 bg-slate-50 p-4 text-[10px] font-medium text-slate-500">
|
||||
<div>Cr: {sub.cr}</div>
|
||||
<div>HD: {sub.hd}</div>
|
||||
<div>HI: {sub.hi}</div>
|
||||
{linea.nombre}
|
||||
</span>
|
||||
</div>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
|
||||
<div className="col-span-full my-2 border-t border-slate-200"></div>
|
||||
|
||||
<div className="self-center p-2 font-bold text-slate-600">
|
||||
Totales por Ciclo
|
||||
</div>
|
||||
|
||||
{ciclosArray.map((ciclo) => {
|
||||
const t = getTotalesCiclo(ciclo)
|
||||
return (
|
||||
<div
|
||||
key={`footer-${ciclo}`}
|
||||
className="rounded-lg bg-slate-50 p-2 text-center text-[10px]"
|
||||
>
|
||||
<div className="font-bold text-slate-700">Cr: {t.cr}</div>
|
||||
<div>
|
||||
HD: {t.hd} • HI: {t.hi}
|
||||
<div className="ml-2 flex flex-shrink-0 items-center gap-1">
|
||||
<button
|
||||
onClick={() => setEditingLineaId(linea.id)}
|
||||
className="..."
|
||||
>
|
||||
{' '}
|
||||
<Pencil size={12} />{' '}
|
||||
</button>
|
||||
<Trash2
|
||||
onClick={() => borrarLinea(linea.id)}
|
||||
className="..."
|
||||
size={14}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
<div className="flex flex-col justify-center rounded-lg bg-teal-50 p-2 text-center text-xs font-bold text-teal-800">
|
||||
<div>{stats.cr} Cr</div>
|
||||
<div>{stats.hd + stats.hi} Hrs</div>
|
||||
</div>
|
||||
{ciclosArray.map((ciclo) => (
|
||||
<div
|
||||
key={`${linea.id}-${ciclo}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={(e) => handleDrop(e, ciclo, linea.id)}
|
||||
className="min-h-35 space-y-2 rounded-xl border-2 border-dashed border-slate-100 bg-slate-50/20"
|
||||
>
|
||||
{asignaturas
|
||||
.filter(
|
||||
(m) =>
|
||||
m.ciclo === ciclo && m.lineaCurricularId === linea.id,
|
||||
)
|
||||
.map((m) => (
|
||||
<AsignaturaCardItem
|
||||
key={m.id}
|
||||
asignatura={m}
|
||||
lineaColor={linea.color || '#1976d2'}
|
||||
lineaNombre={linea.nombre}
|
||||
isDragging={draggedAsignatura === m.id}
|
||||
onDragStart={handleDragStart}
|
||||
onClick={() => {
|
||||
setEditingData(m)
|
||||
setIsEditModalOpen(true)
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div
|
||||
className={`flex flex-col justify-center rounded-xl border p-4 text-[10px] font-medium ${
|
||||
sub.cr === 0 && sub.hd === 0 && sub.hi === 0
|
||||
? 'border-slate-100 bg-slate-50/50 text-slate-300'
|
||||
: 'border-slate-200 bg-slate-50 text-slate-600'
|
||||
}`}
|
||||
>
|
||||
{sub.cr === 0 && sub.hd === 0 && sub.hi === 0 ? (
|
||||
<div className="text-slate-400">—</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<div className="font-bold text-slate-700">
|
||||
Cr: {sub.cr}
|
||||
</div>
|
||||
<div className="text-slate-600">
|
||||
HD: {sub.hd} • HI: {sub.hi}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
|
||||
<div className="col-span-full my-2 border-t border-slate-200"></div>
|
||||
|
||||
<div className="self-center p-2 font-bold text-slate-600">
|
||||
Totales por Ciclo
|
||||
</div>
|
||||
|
||||
{ciclosArray.map((ciclo) => {
|
||||
const t = getTotalesCiclo(ciclo)
|
||||
const isEmpty = t.cr === 0 && t.hd === 0 && t.hi === 0
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`footer-${ciclo}`}
|
||||
className={`rounded-lg p-2 text-center text-[10px] ${
|
||||
isEmpty ? 'bg-slate-100/50 text-slate-400' : 'bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
{isEmpty ? (
|
||||
<div className="py-1 text-xs text-slate-400">—</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="font-bold text-slate-700">Cr: {t.cr}</div>
|
||||
<div>
|
||||
HD: {t.hd} • HI: {t.hi}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
<div className="flex flex-col justify-center rounded-lg bg-teal-50 p-2 text-center text-xs font-bold text-teal-800">
|
||||
<div>{stats.cr} Cr</div>
|
||||
<div>{stats.hd + stats.hi} Hrs</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Asignaturas Sin Asignar */}
|
||||
<div className="mt-12 rounded-[28px] border border-border bg-card/80 p-5 shadow-sm backdrop-blur-sm">
|
||||
<div className="border-border bg-card/80 mt-12 rounded-[28px] border p-5 shadow-sm backdrop-blur-sm">
|
||||
<div className="mb-5 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
|
||||
<div className="bg-muted text-muted-foreground flex h-9 w-9 items-center justify-center rounded-2xl">
|
||||
<Icons.Inbox className="h-4.5 w-4.5" />
|
||||
</div>
|
||||
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-sm font-bold tracking-wide text-foreground uppercase">
|
||||
<h3 className="text-foreground text-sm font-bold tracking-wide uppercase">
|
||||
Bandeja de entrada
|
||||
</h3>
|
||||
|
||||
<div className="inline-flex h-6 min-w-6 items-center justify-center rounded-full bg-muted px-2 text-[11px] font-semibold text-muted-foreground">
|
||||
<div className="bg-muted text-muted-foreground inline-flex h-6 min-w-6 items-center justify-center rounded-full px-2 text-[11px] font-semibold">
|
||||
{unassignedAsignaturas.length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-0.5 text-sm text-muted-foreground">
|
||||
<p className="text-muted-foreground mt-0.5 text-sm">
|
||||
Asignaturas sin ciclo o línea curricular
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 rounded-full border border-dashed border-border bg-background/80 px-3 py-1.5 text-xs text-muted-foreground">
|
||||
<div className="border-border bg-background/80 text-muted-foreground flex items-center gap-2 rounded-full border border-dashed px-3 py-1.5 text-xs">
|
||||
<Icons.MoveDown className="h-3.5 w-3.5" />
|
||||
<span>Arrastra aquí para desasignar</span>
|
||||
</div>
|
||||
@@ -969,18 +986,18 @@ function MapaCurricularPage() {
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex min-h-[188px] flex-col items-center justify-center rounded-[20px] border border-border/70 bg-background/70 px-6 text-center">
|
||||
<div className="mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
|
||||
<div className="border-border/70 bg-background/70 flex min-h-[188px] flex-col items-center justify-center rounded-[20px] border px-6 text-center">
|
||||
<div className="bg-muted text-muted-foreground mb-3 flex h-12 w-12 items-center justify-center rounded-2xl">
|
||||
<Icons.CheckCheck className="h-5 w-5" />
|
||||
</div>
|
||||
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
<p className="text-foreground text-sm font-semibold">
|
||||
No hay asignaturas pendientes
|
||||
</p>
|
||||
|
||||
<p className="mt-1 max-w-md text-sm text-muted-foreground">
|
||||
Todo está colocado en el mapa. Arrastra una asignatura aquí para quitarle
|
||||
ciclo y línea curricular.
|
||||
<p className="text-muted-foreground mt-1 max-w-md text-sm">
|
||||
Todo está colocado en el mapa. Arrastra una asignatura aquí para
|
||||
quitarle ciclo y línea curricular.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user