Se agregan filtros de plan de estudios, carrera y se limpian filtros
This commit is contained in:
@@ -2,7 +2,7 @@ import { createFileRoute, Link, useRouter } from '@tanstack/react-router'
|
||||
import { useSuspenseQuery, queryOptions, useQueryClient } from '@tanstack/react-query'
|
||||
import { supabase } from '@/auth/supabase'
|
||||
import * as Icons from 'lucide-react'
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@/components/ui/select'
|
||||
@@ -10,6 +10,7 @@ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { toast } from 'sonner'
|
||||
import { InfoChip } from '@/components/planes/InfoChip'
|
||||
|
||||
/* ================== Tipos ================== */
|
||||
type FacMini = { id: string; nombre: string; color?: string | null; icon?: string | null }
|
||||
@@ -79,7 +80,8 @@ async function fetchPlanIdsByScope(search: Pick<SearchState, 'planId' | 'carrera
|
||||
async function fetchAsignaturas(search: SearchState): Promise<Asignatura[]> {
|
||||
const planIds = await fetchPlanIdsByScope(search)
|
||||
if (planIds && planIds.length === 0) return []
|
||||
|
||||
console.log(AsignaturaCard);
|
||||
|
||||
let query = supabase
|
||||
.from('asignaturas')
|
||||
.select(`
|
||||
@@ -172,6 +174,30 @@ function RouteComponent() {
|
||||
const [facultad, setFacultad] = useState("todas")
|
||||
const [carrera, setCarrera] = useState("todas")
|
||||
|
||||
/* useEffect(() => {
|
||||
const timeout = setTimeout(() => {
|
||||
router.navigate({
|
||||
to: '/asignaturas',
|
||||
search: { ...search, q },
|
||||
replace: true,
|
||||
})
|
||||
}, 400)
|
||||
return () => clearTimeout(timeout)
|
||||
}, [q]) */
|
||||
|
||||
|
||||
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const value = e.target.value
|
||||
setQ(value)
|
||||
router.navigate({
|
||||
to: '/asignaturas',
|
||||
search: {
|
||||
...search,
|
||||
q: value,
|
||||
},
|
||||
replace: true, // evita recargar o empujar al historial
|
||||
})
|
||||
}
|
||||
|
||||
// 🟣 Lista única de facultades
|
||||
const facultadesList = useMemo(() => {
|
||||
@@ -260,6 +286,7 @@ const carrerasList = useMemo(() => {
|
||||
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 planOK = !search.planId || a.plan?.id === search.planId
|
||||
|
||||
const flagOK =
|
||||
!flag ||
|
||||
@@ -267,7 +294,7 @@ const carrerasList = useMemo(() => {
|
||||
(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
|
||||
return matchesQ && semOK && tipoOK && flagOK && carreraOK && facultadOK && planOK
|
||||
})
|
||||
}, [q, sem, tipo, flag, carrera, facultad, asignaturas])
|
||||
|
||||
@@ -289,7 +316,19 @@ const carrerasList = useMemo(() => {
|
||||
}, [filtered, groupBy])
|
||||
|
||||
// Helpers
|
||||
const clearFilters = () => { setQ(''); setSem('todos'); setTipo('todos'); setCarrera('todas'); setFlag('') }
|
||||
const clearFilters = () => { setQ(''); setSem('todos'); setTipo('todos'); setCarrera('todas'); setFlag('') ; setFacultad('todas')
|
||||
// Actualiza la URL limpiando todos los query params
|
||||
router.navigate({
|
||||
to: '/asignaturas',
|
||||
search: {
|
||||
q: '',
|
||||
planId: '',
|
||||
carreraId: '',
|
||||
facultadId: '',
|
||||
f: ''
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// NEW: util para clonar 1 asignatura
|
||||
async function cloneOne(src: Asignatura, overrides: {
|
||||
@@ -324,6 +363,8 @@ const carrerasList = useMemo(() => {
|
||||
if (error) throw error
|
||||
}
|
||||
|
||||
|
||||
|
||||
// NEW: abrir modal clon individual
|
||||
function openClone(a: Asignatura) {
|
||||
setCloneTarget(a)
|
||||
@@ -352,6 +393,8 @@ const carrerasList = useMemo(() => {
|
||||
setCart([])
|
||||
}
|
||||
|
||||
|
||||
|
||||
// NEW: clonado en lote
|
||||
async function cloneBulk() {
|
||||
if (!bulk.plan_destino_id) { toast.error('Selecciona un plan de destino'); return }
|
||||
@@ -426,34 +469,43 @@ const carrerasList = useMemo(() => {
|
||||
</div>
|
||||
|
||||
{/* Filtros */}
|
||||
<div className="grid gap-4 sm:grid-cols-5">
|
||||
<div className="grid gap-4 sm:grid-cols-5 items-end">
|
||||
{/* 🔍 Búsqueda */}
|
||||
<div>
|
||||
<Label>Búsqueda</Label>
|
||||
<Input
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
onChange={handleChange}
|
||||
placeholder="Nombre, clave, plan, carrera, facultad…"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 📘 Semestre */}
|
||||
<div>
|
||||
<Label>Semestre</Label>
|
||||
<Select value={sem} onValueChange={setSem}>
|
||||
<SelectTrigger><SelectValue placeholder="Todos" /></SelectTrigger>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Todos" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="todos">Todos</SelectItem>
|
||||
{semestres.map(s => <SelectItem key={s} value={s}>Semestre {s}</SelectItem>)}
|
||||
{semestres.map((s) => (
|
||||
<SelectItem key={s} value={s}>
|
||||
Semestre {s}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 🏛️ Facultad */}
|
||||
<div>
|
||||
<Label>Facultad</Label>
|
||||
<Select
|
||||
value={facultad ?? "todas"}
|
||||
onValueChange={(val) => {
|
||||
setFacultad(val)
|
||||
setCarrera("todas") // reset de carrera al cambiar facultad
|
||||
setCarrera("todas")
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[200px]">
|
||||
@@ -470,8 +522,8 @@ const carrerasList = useMemo(() => {
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{facultad && facultad !== "todas" && (
|
||||
<div>
|
||||
{/* 🎓 Carrera */}
|
||||
<div className={!facultad || facultad === "todas" ? "invisible" : ""}>
|
||||
<Label>Carrera</Label>
|
||||
<Select
|
||||
value={carrera ?? "todas"}
|
||||
@@ -490,11 +542,38 @@ const carrerasList = useMemo(() => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 📜 Plan */}
|
||||
<div className={!carrera || carrera === "todas" ? "invisible" : ""}>
|
||||
<Label>Plan</Label>
|
||||
<Select
|
||||
value={search.planId ?? "todos"}
|
||||
onValueChange={(val) => {
|
||||
router.navigate({
|
||||
search: { ...search, planId: val === "todos" ? "" : val },
|
||||
})
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[200px]">
|
||||
<SelectValue placeholder="Filtrar por plan" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="todos">Todos los planes</SelectItem>
|
||||
{planes
|
||||
.filter((p) => p.carrera?.id === carrera)
|
||||
.map((p) => (
|
||||
<SelectItem key={p.id} value={p.id}>
|
||||
{p.nombre}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Chips de salud */}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<HealthChip
|
||||
@@ -518,7 +597,7 @@ const carrerasList = useMemo(() => {
|
||||
label="Sin contenidos"
|
||||
value={salud.sinContenidos}
|
||||
/>
|
||||
{(q || sem !== 'todos' || tipo !== 'todos' || flag) && (
|
||||
{/*(q || sem !== 'todos' || tipo !== 'todos' || flag || carrera=='todos')*/ true && (
|
||||
<Button variant="ghost" className="h-7 px-3" onClick={clearFilters}>
|
||||
Limpiar filtros
|
||||
</Button>
|
||||
@@ -750,9 +829,15 @@ function AsignaturaCard({ a, onClone, onAddToCart }: { a: Asignatura; onClone: (
|
||||
const horasP = a.horas_practicas ?? 0
|
||||
const meta = tipoMeta(a.tipo)
|
||||
const FacIcon = (Icons as any)[a.plan?.carrera?.facultad?.icon ?? 'Building2'] || Icons.Building2
|
||||
|
||||
console.log(a);
|
||||
|
||||
return (
|
||||
<li className="group relative overflow-hidden rounded-2xl border bg-white/75 dark:bg-neutral-900/60 shadow-sm hover:shadow-md transition-all">
|
||||
<li className="group relative overflow-hidden rounded-2xl border bg-white/75 dark:bg-neutral-900/60 shadow-sm hover:shadow-md transition-all"
|
||||
style={{
|
||||
borderColor: a.plan?.carrera?.facultad?.color ?? '#ccc',
|
||||
backgroundColor: `${a.plan?.carrera?.facultad?.color}15`, // 15 = transparencia HEX
|
||||
}}
|
||||
>
|
||||
<div className="p-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border bg-white/80">
|
||||
@@ -803,14 +888,17 @@ function AsignaturaCard({ a, onClone, onAddToCart }: { a: Asignatura; onClone: (
|
||||
<Icons.ScrollText className="w-3.5 h-3.5" /> <strong>Plan:</strong>{a.plan.nombre}
|
||||
</span>
|
||||
{a.plan.carrera && (
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Icons.GraduationCap className="w-3.5 h-3.5" /> <strong>Carrera:</strong> {a.plan.carrera.nombre}
|
||||
</span>
|
||||
<InfoChip
|
||||
icon={<Icons.GraduationCap className="h-3 w-3" />}
|
||||
label={a.plan.carrera.nombre}
|
||||
/>
|
||||
)}
|
||||
{a.plan.carrera?.facultad && (
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<FacIcon className="w-3.5 h-3.5" /> {a.plan.carrera.facultad.nombre}
|
||||
</span>
|
||||
<InfoChip
|
||||
icon={<Icons.Building2 className="h-3 w-3" />}
|
||||
label={a.plan.carrera.facultad.nombre}
|
||||
tint={a.plan.carrera.facultad.color}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user