Reorganización de archivos y enlace a wizard de creación de asignatura
This commit is contained in:
@@ -131,7 +131,17 @@ function AsignaturasPage() {
|
||||
<Button variant="outline" size="sm">
|
||||
<Copy className="mr-2 h-4 w-4" /> Clonar
|
||||
</Button>
|
||||
<Button className="bg-emerald-700 hover:bg-emerald-800">
|
||||
<Button
|
||||
onClick={() => {
|
||||
console.log('planId desde asignaturas', planId)
|
||||
|
||||
navigate({
|
||||
to: `/planes/${planId}/asignaturas/nueva`,
|
||||
resetScroll: false,
|
||||
})
|
||||
}}
|
||||
className="ring-offset-background bg-primary text-primary-foreground hover:bg-primary/90 inline-flex h-11 items-center justify-center gap-2 rounded-md px-8 text-sm font-medium shadow-md transition-colors"
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" /> Nueva Asignatura
|
||||
</Button>
|
||||
</div>
|
||||
15
src/routes/planes/$planId/_detalle/asignaturas/nueva.tsx
Normal file
15
src/routes/planes/$planId/_detalle/asignaturas/nueva.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
|
||||
import { NuevaAsignaturaModalContainer } from '@/features/asignaturas/nueva/NuevaAsignaturaModalContainer'
|
||||
|
||||
export const Route = createFileRoute(
|
||||
'/planes/$planId/_detalle/asignaturas/nueva',
|
||||
)({
|
||||
component: NuevaAsignaturaModal,
|
||||
})
|
||||
|
||||
function NuevaAsignaturaModal() {
|
||||
const { planId } = Route.useParams()
|
||||
console.log('planId desde nueva', planId)
|
||||
return <NuevaAsignaturaModalContainer planId={planId} />
|
||||
}
|
||||
@@ -1,330 +0,0 @@
|
||||
import { createFileRoute, Outlet, Link, notFound } from '@tanstack/react-router'
|
||||
import {
|
||||
ChevronLeft,
|
||||
GraduationCap,
|
||||
Clock,
|
||||
Hash,
|
||||
CalendarDays,
|
||||
Save,
|
||||
} from 'lucide-react'
|
||||
import { useState, useEffect, forwardRef } from 'react'
|
||||
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { NotFoundPage } from '@/components/ui/NotFoundPage'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { plans_get } from '@/data/api/plans.api'
|
||||
import { usePlan } from '@/data/hooks/usePlans'
|
||||
import { qk } from '@/data/query/keys'
|
||||
|
||||
export const Route = createFileRoute('/planes/$planId/_detalle')({
|
||||
loader: async ({ context: { queryClient }, params: { planId } }) => {
|
||||
try {
|
||||
console.log('loader')
|
||||
|
||||
await queryClient.ensureQueryData({
|
||||
queryKey: qk.plan(planId),
|
||||
queryFn: () => plans_get(planId),
|
||||
})
|
||||
} catch (e: any) {
|
||||
// PGRST116: The result contains 0 rows
|
||||
if (e?.code === 'PGRST116') {
|
||||
throw notFound()
|
||||
}
|
||||
throw e
|
||||
}
|
||||
},
|
||||
notFoundComponent: () => {
|
||||
return (
|
||||
<NotFoundPage
|
||||
title="Plan de Estudios no encontrado"
|
||||
message="El plan de estudios que intentas consultar no existe o no tienes permisos para verlo."
|
||||
/>
|
||||
)
|
||||
},
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
const { planId } = Route.useParams()
|
||||
const { data, isLoading } = usePlan(planId)
|
||||
|
||||
// Estados locales para manejar la edición "en vivo" antes de persistir
|
||||
const [nombrePlan, setNombrePlan] = useState('')
|
||||
const [nivelPlan, setNivelPlan] = useState('')
|
||||
const [isDirty, setIsDirty] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setNombrePlan(data.nombre || '')
|
||||
setNivelPlan(data.nivel || '')
|
||||
}
|
||||
}, [data])
|
||||
|
||||
const niveles = [
|
||||
'Licenciatura',
|
||||
'Maestría',
|
||||
'Doctorado',
|
||||
'Diplomado',
|
||||
'Especialidad',
|
||||
]
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault() // Evita el salto de línea
|
||||
e.currentTarget.blur() // Quita el foco, lo que dispara el onBlur y "guarda" en el estado
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
console.log('Guardando en DB...', { nombrePlan, nivelPlan })
|
||||
// Aquí iría tu mutation
|
||||
setIsDirty(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Botón Flotante de Guardar */}
|
||||
{isDirty && (
|
||||
<div className="animate-in fade-in slide-in-from-bottom-4 fixed right-8 bottom-8 z-50 duration-300">
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
className="gap-2 rounded-full bg-teal-600 px-6 shadow-xl hover:bg-teal-700"
|
||||
>
|
||||
<Save size={16} /> Guardar cambios del Plan
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{/* 1. Header Superior */}
|
||||
<div className="sticky top-0 z-20 border-b bg-white/50 shadow-sm backdrop-blur-sm">
|
||||
<div className="px-6 py-2">
|
||||
<Link
|
||||
to="/planes"
|
||||
className="flex w-fit items-center gap-1 text-xs text-gray-500 transition-colors hover:text-gray-800"
|
||||
>
|
||||
<ChevronLeft size={14} /> Volver a planes
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto max-w-400 space-y-8 p-8">
|
||||
{/* Header del Plan */}
|
||||
{isLoading ? (
|
||||
/* ===== SKELETON ===== */
|
||||
<div className="mx-auto max-w-400 p-8">
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<DatosGeneralesSkeleton key={i} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-col items-start justify-between gap-4 md:flex-row">
|
||||
<div>
|
||||
<h1 className="flex items-baseline gap-2 text-3xl font-bold tracking-tight text-slate-900">
|
||||
<span>{nivelPlan} en</span>
|
||||
<span
|
||||
role="textbox"
|
||||
tabIndex={0}
|
||||
contentEditable
|
||||
suppressContentEditableWarning
|
||||
spellCheck={false} // Quita el subrayado rojo de error ortográfico
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={(e) =>
|
||||
setNombrePlan(e.currentTarget.textContent || '')
|
||||
}
|
||||
className="cursor-text border-b border-transparent decoration-transparent transition-colors outline-none select-text hover:border-slate-300 focus:border-teal-500"
|
||||
style={{
|
||||
WebkitTextDecoration: 'none',
|
||||
textDecoration: 'none',
|
||||
}} // Doble seguridad contra subrayados
|
||||
>
|
||||
{nombrePlan}
|
||||
</span>
|
||||
</h1>
|
||||
<p className="mt-1 text-lg font-medium text-slate-500">
|
||||
{data?.carreras?.facultades?.nombre}{' '}
|
||||
{data?.carreras?.nombre_corto}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
{/* <Badge className="gap-1 border-teal-200 bg-teal-50 px-3 text-teal-700 hover:bg-teal-100">
|
||||
<CheckCircle2 size={12} /> {data?.estados_plan?.etiqueta}
|
||||
</Badge> */}
|
||||
<Badge
|
||||
className={`gap-1 border-teal-200 bg-teal-50 px-3 text-teal-700 hover:bg-teal-100`}
|
||||
>
|
||||
{data?.estados_plan?.etiqueta}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 3. Cards de Información con Context Menu */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<InfoCard
|
||||
icon={<GraduationCap className="text-slate-400" />}
|
||||
label="Nivel"
|
||||
value={nivelPlan}
|
||||
isEditable
|
||||
/>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuContent className="w-48">
|
||||
{niveles.map((n) => (
|
||||
<DropdownMenuItem
|
||||
key={n}
|
||||
onClick={() => {
|
||||
setNivelPlan(n)
|
||||
setIsDirty(true)
|
||||
}}
|
||||
>
|
||||
{n}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<InfoCard
|
||||
icon={<Clock className="text-slate-400" />}
|
||||
label="Duración"
|
||||
value={`${data?.numero_ciclos || 0} Ciclos`}
|
||||
/>
|
||||
<InfoCard
|
||||
icon={<Hash className="text-slate-400" />}
|
||||
label="Créditos"
|
||||
value="320"
|
||||
/>
|
||||
<InfoCard
|
||||
icon={<CalendarDays className="text-slate-400" />}
|
||||
label="Creación"
|
||||
value={data?.creado_en?.split('T')[0]} // Cortamos la fecha para que no sea tan larga
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 4. Navegación de Tabs */}
|
||||
<div className="scrollbar-hide overflow-x-auto border-b">
|
||||
<nav className="flex min-w-max gap-8">
|
||||
<Tab to="/planes/$planId/" params={{ planId }}>
|
||||
Datos Generales
|
||||
</Tab>
|
||||
<Tab to="/planes/$planId/mapa" params={{ planId }}>
|
||||
Mapa Curricular
|
||||
</Tab>
|
||||
<Tab to="/planes/$planId/asignaturas" params={{ planId }}>
|
||||
Asignaturas
|
||||
</Tab>
|
||||
<Tab to="/planes/$planId/flujo" params={{ planId }}>
|
||||
Flujo y Estados
|
||||
</Tab>
|
||||
<Tab to="/planes/$planId/iaplan" params={{ planId }}>
|
||||
IA del Plan
|
||||
</Tab>
|
||||
<Tab to="/planes/$planId/documento" params={{ planId }}>
|
||||
Documento
|
||||
</Tab>
|
||||
<Tab to="/planes/$planId/historial" params={{ planId }}>
|
||||
Historial
|
||||
</Tab>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<main className="animate-in fade-in pt-2 duration-500">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const InfoCard = forwardRef<
|
||||
HTMLDivElement,
|
||||
{
|
||||
icon: React.ReactNode
|
||||
label: string
|
||||
value: string | number | undefined
|
||||
isEditable?: boolean
|
||||
} & React.HTMLAttributes<HTMLDivElement>
|
||||
>(function InfoCard(
|
||||
{ icon, label, value, isEditable, className, ...props },
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
{...props}
|
||||
className={`flex h-18 w-full items-center gap-4 rounded-xl border border-slate-200/60 bg-slate-50/50 p-4 shadow-sm transition-all ${
|
||||
isEditable
|
||||
? 'cursor-pointer hover:border-teal-200 hover:bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500/40'
|
||||
: ''
|
||||
} ${className ?? ''}`}
|
||||
>
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border bg-white shadow-sm">
|
||||
{icon}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="mb-0.5 truncate text-[10px] font-bold tracking-wider text-slate-400 uppercase">
|
||||
{label}
|
||||
</p>
|
||||
<p className="truncate text-sm font-semibold text-slate-700">
|
||||
{value || '---'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
function Tab({
|
||||
to,
|
||||
params,
|
||||
children,
|
||||
}: {
|
||||
to: string
|
||||
params?: any
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<Link
|
||||
to={to}
|
||||
params={params}
|
||||
className="border-b-2 border-transparent pb-3 text-sm font-medium text-slate-500 transition-all hover:text-slate-800"
|
||||
activeProps={{ className: 'border-teal-600 text-teal-700 font-bold' }}
|
||||
activeOptions={{
|
||||
exact: true,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
function DatosGeneralesSkeleton() {
|
||||
return (
|
||||
<div className="rounded-xl border bg-white">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b px-5 py-3">
|
||||
<Skeleton className="h-4 w-40" />
|
||||
<Skeleton className="h-8 w-16" />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="space-y-3 p-5">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-11/12" />
|
||||
<Skeleton className="h-4 w-10/12" />
|
||||
<Skeleton className="h-4 w-9/12" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user