104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
import { Suspense } from "react"
|
|
import { User } from "lucide-react"
|
|
|
|
import { getClassStudents, getTeacherClasses, getStudentsSubjectScores } from "@/modules/classes/data-access"
|
|
import { StudentsFilters } from "@/modules/classes/components/students-filters"
|
|
import { StudentsTable } from "@/modules/classes/components/students-table"
|
|
import { EmptyState } from "@/shared/components/ui/empty-state"
|
|
import { Skeleton } from "@/shared/components/ui/skeleton"
|
|
|
|
export const dynamic = "force-dynamic"
|
|
|
|
type SearchParams = { [key: string]: string | string[] | undefined }
|
|
|
|
const getParam = (params: SearchParams, key: string) => {
|
|
const v = params[key]
|
|
return Array.isArray(v) ? v[0] : v
|
|
}
|
|
|
|
async function StudentsResults({ searchParams, defaultClassId }: { searchParams: Promise<SearchParams>, defaultClassId?: string }) {
|
|
const params = await searchParams
|
|
|
|
const q = getParam(params, "q") || undefined
|
|
const classId = getParam(params, "classId")
|
|
const status = getParam(params, "status")
|
|
|
|
// If classId is explicit in URL, use it (unless "all"). If not, use defaultClassId.
|
|
// If user explicitly selects "all", classId will be "all".
|
|
// However, the requirement is "Default to showing the first class".
|
|
// If classId param is missing, we use defaultClassId.
|
|
const targetClassId = classId ? (classId !== "all" ? classId : undefined) : defaultClassId
|
|
|
|
const filteredStudents = await getClassStudents({
|
|
q,
|
|
classId: targetClassId,
|
|
status: status && status !== "all" ? status : undefined,
|
|
})
|
|
|
|
// Fetch subject scores for all filtered students
|
|
if (filteredStudents.length > 0) {
|
|
const studentIds = filteredStudents.map(s => s.id)
|
|
const scores = await getStudentsSubjectScores(studentIds)
|
|
for (const student of filteredStudents) {
|
|
student.subjectScores = scores.get(student.id)
|
|
}
|
|
}
|
|
|
|
const hasFilters = Boolean(q || (classId && classId !== "all") || (status && status !== "all"))
|
|
|
|
if (filteredStudents.length === 0) {
|
|
return (
|
|
<EmptyState
|
|
icon={User}
|
|
title={hasFilters ? "No students match your filters" : "No students found"}
|
|
description={hasFilters ? "Try clearing filters or adjusting keywords." : "There are no students in your classes yet."}
|
|
action={hasFilters ? { label: "Clear filters", href: "/teacher/classes/students" } : undefined}
|
|
className="h-[360px] bg-card"
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-md border bg-card">
|
|
<StudentsTable students={filteredStudents} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StudentsResultsFallback() {
|
|
return (
|
|
<div className="rounded-md border bg-card">
|
|
<div className="p-4">
|
|
<Skeleton className="h-8 w-full" />
|
|
</div>
|
|
<div className="space-y-2 p-4 pt-0">
|
|
{Array.from({ length: 8 }).map((_, idx) => (
|
|
<Skeleton key={idx} className="h-10 w-full" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default async function StudentsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
|
const classes = await getTeacherClasses()
|
|
const params = await searchParams
|
|
|
|
// Logic to determine default class (first one available)
|
|
const defaultClassId = classes.length > 0 ? classes[0].id : undefined
|
|
|
|
return (
|
|
<div className="flex h-full flex-col space-y-4 p-8">
|
|
<div className="space-y-4">
|
|
<Suspense fallback={<div className="h-10 w-full animate-pulse rounded-md bg-muted" />}>
|
|
<StudentsFilters classes={classes} defaultClassId={defaultClassId} />
|
|
</Suspense>
|
|
|
|
<Suspense fallback={<StudentsResultsFallback />}>
|
|
<StudentsResults searchParams={searchParams} defaultClassId={defaultClassId} />
|
|
</Suspense>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|