Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-05-17 23:12:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(submissions): improve submission table with icons and better status display

Browse Source
This commit is contained in:
cfngc4594 2025-04-13 13:18:10 +08:00
parent 105802a209
commit 8b3faf4a42
1 changed files with 40 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/submissions-table.tsx
View File

@ -9,31 +9,33 @@ import {
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Submission } from "@/generated/client"; import { Submission } from "@/generated/client";
import { getStatusColorClass } from "@/lib/status"; import { getStatusColorClass } from "@/lib/status";
import { Clock4Icon, CpuIcon } from "lucide-react";
import { EditorLanguageIcons } from "@/config/editor-language-icons"; import { EditorLanguageIcons } from "@/config/editor-language-icons";
import { formatDistanceToNow, isBefore, subDays, format } from "date-fns"; import { formatDistanceToNow, isBefore, subDays, format } from "date-fns";
interface SubmissionsTableProps { interface SubmissionsTableProps {
submissions: Submission[] submissions: Submission[];
} }
export default function SubmissionsTable({ submissions }: SubmissionsTableProps) { export default function SubmissionsTable({ submissions }: SubmissionsTableProps) {
const sortedSubmissions = [...submissions].sort( const sortedSubmissions = [...submissions].sort(
(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
) );
return ( return (
<Table> <Table>
<TableHeader className="bg-transparent"> <TableHeader className="bg-transparent">
<TableRow className="hover:bg-transparent"> <TableRow className="hover:bg-transparent">
<TableHead className="w-[100px]">Index</TableHead> <TableHead className="w-[100px]">Index</TableHead>
<TableHead>Status</TableHead> <TableHead className="w-[170px]">Status</TableHead>
<TableHead>Language</TableHead> <TableHead className="w-[100px]">Language</TableHead>
<TableHead>Time</TableHead> <TableHead className="w-[100px]">Time</TableHead>
<TableHead>Memory</TableHead> <TableHead className="w-[100px]">Memory</TableHead>
<TableHead>Submitted</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<tbody aria-hidden="true" className="table-row h-2"></tbody>
<tbody aria-hidden="true" className="table-row h-2" />
<TableBody className="[&_td:first-child]:rounded-l-lg [&_td:last-child]:rounded-r-lg"> <TableBody className="[&_td:first-child]:rounded-l-lg [&_td:last-child]:rounded-r-lg">
{sortedSubmissions.map((submission, index) => { {sortedSubmissions.map((submission, index) => {
const Icon = EditorLanguageIcons[submission.language]; const Icon = EditorLanguageIcons[submission.language];
@ -46,26 +48,49 @@ export default function SubmissionsTable({ submissions }: SubmissionsTableProps)
return ( return (
<TableRow <TableRow
key={submission.id} key={submission.id}
className={cn("border-b-0 hover:text-blue-500 hover:bg-muted", isEven ? "" : "bg-muted/50")} className={cn(
"border-b-0 hover:text-blue-500 hover:bg-muted",
isEven ? "" : "bg-muted/50"
)}
> >
<TableCell className="font-medium"> <TableCell className="font-medium">
{sortedSubmissions.length - index} {sortedSubmissions.length - index}
</TableCell> </TableCell>
<TableCell className={getStatusColorClass(submission.status)}> <TableCell>
<span>{submission.status}</span> <div className="flex flex-col truncate">
<span className={getStatusColorClass(submission.status)}>
{submission.status}
</span>
<span className="text-xs">{submittedDisplay}</span>
</div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Icon size={16} aria-hidden="true" /> <Icon size={16} aria-hidden="true" />
</TableCell> </TableCell>
<TableCell>{submission.executionTime}</TableCell>
<TableCell>{submission.memoryUsage}</TableCell>
<TableCell> <TableCell>
{submittedDisplay} <div className="flex items-center gap-1.5">
<Clock4Icon size={16} aria-hidden="true" />
<span>
{submission.executionTime === null
? "N/A"
: `${submission.executionTime} ms`}
</span>
</div>
</TableCell>
<TableCell>
<div className="flex items-center gap-1.5">
<CpuIcon size={16} aria-hidden="true" />
<span>
{submission.memoryUsage === null
? "N/A"
: `${submission.memoryUsage} MB`}
</span>
</div>
</TableCell> </TableCell>
</TableRow> </TableRow>
); );
})} })}
</TableBody> </TableBody>
</Table> </Table>
) );
} }