Merge branch 'master' of https://github.lci.ulsa.mx/AlexRG/Acad-IA
This commit is contained in:
@@ -169,6 +169,36 @@ function RouteComponent() {
|
||||
const [groupBy, setGroupBy] = useState<'semestre' | 'ninguno'>('semestre')
|
||||
const [flag, setFlag] = useState<'' | 'sinBibliografia' | 'sinCriterios' | 'sinContenidos'>(search.f ?? '')
|
||||
|
||||
const [facultad, setFacultad] = useState("todas")
|
||||
const [carrera, setCarrera] = useState("todas")
|
||||
|
||||
|
||||
// 🟣 Lista única de facultades
|
||||
const facultadesList = useMemo(() => {
|
||||
const unique = new Map<string, string>()
|
||||
planes?.forEach((p) => {
|
||||
const fac = p.carrera?.facultad
|
||||
if (fac?.id && fac?.nombre) unique.set(fac.id, fac.nombre)
|
||||
})
|
||||
return Array.from(unique.entries())
|
||||
}, [planes])
|
||||
|
||||
// 🎓 Lista de carreras según la facultad seleccionada
|
||||
const carrerasList = useMemo(() => {
|
||||
const unique = new Map<string, string>()
|
||||
planes?.forEach((p) => {
|
||||
if (
|
||||
p.carrera?.id &&
|
||||
p.carrera?.nombre &&
|
||||
(!facultad || facultad === "todas" || p.carrera?.facultad?.id === facultad)
|
||||
) {
|
||||
unique.set(p.carrera.id, p.carrera.nombre)
|
||||
}
|
||||
})
|
||||
return Array.from(unique.entries())
|
||||
}, [planes, facultad])
|
||||
|
||||
|
||||
// NEW: Clonado individual
|
||||
const [cloneOpen, setCloneOpen] = useState(false)
|
||||
const [cloneTarget, setCloneTarget] = useState<Asignatura | null>(null)
|
||||
@@ -217,28 +247,30 @@ function RouteComponent() {
|
||||
return { sinBibliografia, sinCriterios, sinContenidos }
|
||||
}, [asignaturas])
|
||||
|
||||
// Filtrado
|
||||
const filtered = useMemo(() => {
|
||||
const t = q.trim().toLowerCase()
|
||||
return asignaturas.filter(a => {
|
||||
const matchesQ =
|
||||
!t ||
|
||||
[a.nombre, a.clave, a.tipo, a.objetivos, a.plan?.nombre, a.plan?.carrera?.nombre, a.plan?.carrera?.facultad?.nombre]
|
||||
.filter(Boolean)
|
||||
.some(v => String(v).toLowerCase().includes(t))
|
||||
const t = q.trim().toLowerCase()
|
||||
return asignaturas.filter(a => {
|
||||
const matchesQ =
|
||||
!t ||
|
||||
[a.nombre, a.clave, a.tipo, a.objetivos, a.plan?.nombre, a.plan?.carrera?.nombre, a.plan?.carrera?.facultad?.nombre]
|
||||
.filter(Boolean)
|
||||
.some(v => String(v).toLowerCase().includes(t))
|
||||
|
||||
const semOK = sem === 'todos' || String(a.semestre ?? '—') === sem
|
||||
const tipoOK = tipo === 'todos' || (a.tipo ?? '—') === tipo
|
||||
const semOK = sem === 'todos' || String(a.semestre ?? '—') === sem
|
||||
const tipoOK = tipo === 'todos' || (a.tipo ?? '—') === tipo
|
||||
const carreraOK = carrera === 'todas' || a.plan?.carrera?.id === carrera
|
||||
const facultadOK = facultad === 'todas' || a.plan?.carrera?.facultad?.id === facultad
|
||||
|
||||
const flagOK =
|
||||
!flag ||
|
||||
(flag === 'sinBibliografia' && (!a.bibliografia || a.bibliografia.length === 0)) ||
|
||||
(flag === 'sinCriterios' && (!a.criterios_evaluacion || !a.criterios_evaluacion.trim())) ||
|
||||
(flag === 'sinContenidos' && (!a.contenidos || Object.keys(a.contenidos ?? {}).length === 0))
|
||||
const flagOK =
|
||||
!flag ||
|
||||
(flag === 'sinBibliografia' && (!a.bibliografia || a.bibliografia.length === 0)) ||
|
||||
(flag === 'sinCriterios' && (!a.criterios_evaluacion || !a.criterios_evaluacion.trim())) ||
|
||||
(flag === 'sinContenidos' && (!a.contenidos || Object.keys(a.contenidos ?? {}).length === 0))
|
||||
|
||||
return matchesQ && semOK && tipoOK && flagOK && carreraOK && facultadOK
|
||||
})
|
||||
}, [q, sem, tipo, flag, carrera, facultad, asignaturas])
|
||||
|
||||
return matchesQ && semOK && tipoOK && flagOK
|
||||
})
|
||||
}, [q, sem, tipo, flag, asignaturas])
|
||||
|
||||
// Agrupación
|
||||
const groups = useMemo(() => {
|
||||
@@ -257,7 +289,7 @@ function RouteComponent() {
|
||||
}, [filtered, groupBy])
|
||||
|
||||
// Helpers
|
||||
const clearFilters = () => { setQ(''); setSem('todos'); setTipo('todos'); setFlag('') }
|
||||
const clearFilters = () => { setQ(''); setSem('todos'); setTipo('todos'); setCarrera('todas'); setFlag('') }
|
||||
|
||||
// NEW: util para clonar 1 asignatura
|
||||
async function cloneOne(src: Asignatura, overrides: {
|
||||
@@ -394,7 +426,7 @@ function RouteComponent() {
|
||||
</div>
|
||||
|
||||
{/* Filtros */}
|
||||
<div className="grid gap-4 sm:grid-cols-4">
|
||||
<div className="grid gap-4 sm:grid-cols-5">
|
||||
<div>
|
||||
<Label>Búsqueda</Label>
|
||||
<Input
|
||||
@@ -416,29 +448,53 @@ function RouteComponent() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Tipo</Label>
|
||||
<Select value={tipo} onValueChange={setTipo}>
|
||||
<SelectTrigger><SelectValue placeholder="Todos" /></SelectTrigger>
|
||||
<SelectContent className="max-h-64">
|
||||
<SelectItem value="todos">Todos</SelectItem>
|
||||
{tipos.map(t => <SelectItem key={t} value={t}>{t}</SelectItem>)}
|
||||
<Label>Facultad</Label>
|
||||
<Select
|
||||
value={facultad ?? "todas"}
|
||||
onValueChange={(val) => {
|
||||
setFacultad(val)
|
||||
setCarrera("todas") // reset de carrera al cambiar facultad
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[200px]">
|
||||
<SelectValue placeholder="Filtrar por facultad" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="todas">Todas las facultades</SelectItem>
|
||||
{facultadesList.map(([id, nombre]) => (
|
||||
<SelectItem key={id} value={id}>
|
||||
{nombre}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{facultad && facultad !== "todas" && (
|
||||
<div>
|
||||
<Label>Agrupación</Label>
|
||||
<Select value={groupBy} onValueChange={(v) => setGroupBy(v as any)}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<Label>Carrera</Label>
|
||||
<Select
|
||||
value={carrera ?? "todas"}
|
||||
onValueChange={(val) => setCarrera(val)}
|
||||
>
|
||||
<SelectTrigger className="w-[200px]">
|
||||
<SelectValue placeholder="Filtrar por carrera" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="semestre">Por semestre</SelectItem>
|
||||
<SelectItem value="ninguno">Sin agrupación</SelectItem>
|
||||
<SelectItem value="todas">Todas las carreras</SelectItem>
|
||||
{carrerasList.map(([id, nombre]) => (
|
||||
<SelectItem key={id} value={id}>
|
||||
{nombre}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* Chips de salud */}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<HealthChip
|
||||
|
||||
@@ -10,26 +10,44 @@ import { Plus, RefreshCcw, Building2 } from "lucide-react"
|
||||
import { InfoChip } from "@/components/planes/InfoChip"
|
||||
import { CreatePlanDialog } from "@/components/planes/CreatePlanDialog"
|
||||
import { chipTint } from "@/components/planes/chipTint"
|
||||
import { z } from 'zod'
|
||||
|
||||
|
||||
import { z } from "zod"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
|
||||
export type PlanDeEstudios = {
|
||||
id: string; nombre: string; nivel: string | null; duracion: string | null;
|
||||
total_creditos: number | null; estado: string | null; fecha_creacion: string | null; carrera_id: string | null
|
||||
id: string
|
||||
nombre: string
|
||||
nivel: string | null
|
||||
duracion: string | null
|
||||
total_creditos: number | null
|
||||
estado: string | null
|
||||
fecha_creacion: string | null
|
||||
carrera_id: string | null
|
||||
}
|
||||
type PlanRow = PlanDeEstudios & {
|
||||
carreras: {
|
||||
id: string; nombre: string;
|
||||
facultades?: { id: string; nombre: string; color?: string | null; icon?: string | null } | null
|
||||
id: string
|
||||
nombre: string
|
||||
facultades?: {
|
||||
id: string
|
||||
nombre: string
|
||||
color?: string | null
|
||||
icon?: string | null
|
||||
} | null
|
||||
} | null
|
||||
}
|
||||
|
||||
const planSearchSchema = z.object({
|
||||
plan: z.string().nullable()
|
||||
plan: z.string().nullable(),
|
||||
facultad: z.string().nullable().optional(),
|
||||
carrera: z.string().nullable().optional(),
|
||||
})
|
||||
|
||||
|
||||
export const Route = createFileRoute("/_authenticated/planes")({
|
||||
component: RouteComponent,
|
||||
loader: async () => {
|
||||
@@ -45,93 +63,191 @@ export const Route = createFileRoute("/_authenticated/planes")({
|
||||
`)
|
||||
.order("fecha_creacion", { ascending: false })
|
||||
.limit(100)
|
||||
console.log({ data, error })
|
||||
if (error) throw new Error(error.message)
|
||||
return (data ?? []) as PlanRow[]
|
||||
},
|
||||
validateSearch: planSearchSchema,
|
||||
})
|
||||
|
||||
|
||||
function RouteComponent() {
|
||||
const auth = useSupabaseAuth()
|
||||
const { plan } = Route.useSearch()
|
||||
const { plan, facultad, carrera } = Route.useSearch()
|
||||
const [openCreate, setOpenCreate] = useState(false)
|
||||
const data = Route.useLoaderData() as PlanRow[]
|
||||
const router = useRouter()
|
||||
const navigate = useNavigate({ from: Route.fullPath })
|
||||
|
||||
const showFacultad =
|
||||
auth.claims?.role === "lci" || auth.claims?.role === "vicerrectoria"
|
||||
const showCarrera =
|
||||
showFacultad || auth.claims?.role === "secretario_academico"
|
||||
|
||||
const showFacultad = auth.claims?.role === "lci" || auth.claims?.role === "vicerrectoria"
|
||||
const showCarrera = showFacultad || auth.claims?.role === "secretario_academico"
|
||||
// 🟣 Lista única de facultades
|
||||
const facultadesList = useMemo(() => {
|
||||
const unique = new Map<string, string>()
|
||||
data?.forEach((p) => {
|
||||
const fac = p.carreras?.facultades
|
||||
if (fac?.id && fac?.nombre) unique.set(fac.id, fac.nombre)
|
||||
})
|
||||
return Array.from(unique.entries())
|
||||
}, [data])
|
||||
|
||||
// 🎓 Lista de carreras según facultad seleccionada
|
||||
const carrerasList = useMemo(() => {
|
||||
const unique = new Map<string, string>()
|
||||
data?.forEach((p) => {
|
||||
if (
|
||||
p.carreras?.id &&
|
||||
p.carreras?.nombre &&
|
||||
(!facultad || p.carreras?.facultades?.id === facultad)
|
||||
) {
|
||||
unique.set(p.carreras.id, p.carreras.nombre)
|
||||
}
|
||||
})
|
||||
return Array.from(unique.entries())
|
||||
}, [data, facultad])
|
||||
|
||||
// 🧩 Filtrado general
|
||||
const filtered = useMemo(() => {
|
||||
const term = plan?.trim().toLowerCase()
|
||||
if (!term || !data) return data
|
||||
return data.filter((p) =>
|
||||
[p.nombre, p.nivel, p.estado, p.carreras?.nombre, p.carreras?.facultades?.nombre]
|
||||
.filter(Boolean)
|
||||
.some((v) => String(v).toLowerCase().includes(term))
|
||||
)
|
||||
}, [plan, data])
|
||||
let results = data ?? []
|
||||
|
||||
if (term) {
|
||||
results = results.filter((p) =>
|
||||
[p.nombre, p.nivel, p.estado, p.carreras?.nombre, p.carreras?.facultades?.nombre]
|
||||
.filter(Boolean)
|
||||
.some((v) => String(v).toLowerCase().includes(term))
|
||||
)
|
||||
}
|
||||
|
||||
if (facultad && facultad !== "todas") {
|
||||
results = results.filter((p) => p.carreras?.facultades?.id === facultad)
|
||||
}
|
||||
|
||||
if (carrera && carrera !== "todas") {
|
||||
results = results.filter((p) => p.carreras?.id === carrera)
|
||||
}
|
||||
|
||||
return results
|
||||
}, [plan, facultad, carrera, data])
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||||
<CardTitle className="text-xl font-mono">Planes de estudio</CardTitle>
|
||||
<div className="flex w-full items-center gap-2 md:w-auto">
|
||||
|
||||
<div className="flex w-full flex-col md:flex-row items-center gap-2 md:w-auto">
|
||||
{/* 🔍 Buscador */}
|
||||
<div className="relative w-full md:w-80">
|
||||
<Input
|
||||
value={plan ?? ''}
|
||||
onChange={e => navigate({ search: { plan: e.target.value } })}
|
||||
value={plan ?? ""}
|
||||
onChange={(e) =>
|
||||
navigate({ search: { plan: e.target.value, facultad, carrera } })
|
||||
}
|
||||
placeholder="Buscar por nombre, nivel, estado…"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline" size="icon" onClick={() => router.invalidate()} title="Recargar">
|
||||
|
||||
{/* 🏛️ Filtro por facultad */}
|
||||
<Select
|
||||
value={facultad ?? "todas"}
|
||||
onValueChange={(val) =>
|
||||
navigate({ search: { plan, facultad: val, carrera: "todas" } })
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-[200px]">
|
||||
<SelectValue placeholder="Filtrar por facultad" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="todas">Todas las facultades</SelectItem>
|
||||
{facultadesList.map(([id, nombre]) => (
|
||||
<SelectItem key={id} value={id}>
|
||||
{nombre}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* 🎓 Filtro por carrera (según facultad) */}
|
||||
{facultad && facultad !== "todas" && (
|
||||
<Select
|
||||
value={carrera ?? "todas"}
|
||||
onValueChange={(val) =>
|
||||
navigate({ search: { plan, facultad, carrera: val } })
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-[200px]">
|
||||
<SelectValue placeholder="Filtrar por carrera" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="todas">Todas las carreras</SelectItem>
|
||||
{carrerasList.map(([id, nombre]) => (
|
||||
<SelectItem key={id} value={id}>
|
||||
{nombre}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
|
||||
|
||||
{/* 🔁 Recargar */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => router.invalidate()}
|
||||
title="Recargar"
|
||||
>
|
||||
<RefreshCcw className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
{/* ➕ Nuevo plan */}
|
||||
<Button onClick={() => setOpenCreate(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" /> Nuevo plan
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
{/* GRID de tarjetas con estilo suave por facultad */}
|
||||
{/* GRID de tarjetas */}
|
||||
<CardContent>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{filtered?.map((p) => {
|
||||
const fac = p.carreras?.facultades
|
||||
const styles = chipTint(fac?.color)
|
||||
const IconComp = (fac?.icon && (Icons as any)[fac.icon]) || Building2
|
||||
const IconComp =
|
||||
(fac?.icon && (Icons as any)[fac.icon]) || Building2
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={p.id}
|
||||
to="/plan/$planId"
|
||||
mask={{ to: '/plan/$planId', params: { planId: p.id } }}
|
||||
mask={{ to: "/plan/$planId", params: { planId: p.id } }}
|
||||
className="group relative overflow-hidden rounded-3xl bg-white shadow-sm ring-1 transition-all hover:shadow-md hover:-translate-y-0.5"
|
||||
params={{ planId: p.id }}
|
||||
style={styles}
|
||||
>
|
||||
<div className="relative p-5 h-40 flex flex-col justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="inline-flex items-center justify-center rounded-2xl border px-2.5 py-2"
|
||||
style={{ borderColor: styles.borderColor as string, background: 'rgba(255,255,255,.6)' }}>
|
||||
<span
|
||||
className="inline-flex items-center justify-center rounded-2xl border px-2.5 py-2"
|
||||
style={{
|
||||
borderColor: styles.borderColor as string,
|
||||
background: "rgba(255,255,255,.6)",
|
||||
}}
|
||||
>
|
||||
<IconComp className="w-6 h-6" />
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<div className="font-semibold truncate">{p.nombre}</div>
|
||||
<div className="text-xs text-neutral-600 truncate">
|
||||
{p.nivel ?? "—"} {p.duracion ? `· ${p.duracion}` : ""}
|
||||
{p.nivel ?? "—"}{" "}
|
||||
{p.duracion ? `· ${p.duracion}` : ""}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dentro del map de tarjetas, sustituye SOLO el footer inferior */}
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
{/* grupo izquierdo: chips (wrap si no caben) */}
|
||||
<div className="min-w-0 flex-1 flex flex-wrap items-center gap-2">
|
||||
{showCarrera && p.carreras?.nombre && (
|
||||
<InfoChip
|
||||
@@ -148,18 +264,21 @@ function RouteComponent() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* derecha: estado */}
|
||||
{p.estado && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-white/60"
|
||||
style={{ borderColor: (chipTint(fac?.color).borderColor as string) }}
|
||||
style={{
|
||||
borderColor:
|
||||
chipTint(fac?.color).borderColor as string,
|
||||
}}
|
||||
>
|
||||
{p.estado && p.estado.length > 10 ? `${p.estado.slice(0, 10)}…` : p.estado}
|
||||
{p.estado.length > 10
|
||||
? `${p.estado.slice(0, 10)}…`
|
||||
: p.estado}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
@@ -167,16 +286,14 @@ function RouteComponent() {
|
||||
</div>
|
||||
|
||||
{!filtered?.length && (
|
||||
<div className="text-center text-sm text-muted-foreground py-10">Sin resultados</div>
|
||||
<div className="text-center text-sm text-muted-foreground py-10">
|
||||
Sin resultados
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<CreatePlanDialog
|
||||
open={openCreate}
|
||||
onOpenChange={setOpenCreate}
|
||||
/>
|
||||
|
||||
<CreatePlanDialog open={openCreate} onOpenChange={setOpenCreate} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user