Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-05-17 14:56:36 +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 { Submission } from "@/generated/client";
import { getStatusColorClass } from "@/lib/status";
import { Clock4Icon, CpuIcon } from "lucide-react";
import { EditorLanguageIcons } from "@/config/editor-language-icons";
import { formatDistanceToNow, isBefore, subDays, format } from "date-fns";
interface SubmissionsTableProps {
submissions: Submission[]
submissions: Submission[];
}
export default function SubmissionsTable({ submissions }: SubmissionsTableProps) {
const sortedSubmissions = [...submissions].sort(
(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
)
);
return (
<Table>
<TableHeader className="bg-transparent">
<TableRow className="hover:bg-transparent">
<TableHead className="w-[100px]">Index</TableHead>
<TableHead>Status</TableHead>
<TableHead>Language</TableHead>
<TableHead>Time</TableHead>
<TableHead>Memory</TableHead>
<TableHead>Submitted</TableHead>
<TableHead className="w-[170px]">Status</TableHead>
<TableHead className="w-[100px]">Language</TableHead>
<TableHead className="w-[100px]">Time</TableHead>
<TableHead className="w-[100px]">Memory</TableHead>
</TableRow>
</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">
{sortedSubmissions.map((submission, index) => {
const Icon = EditorLanguageIcons[submission.language];
@ -46,26 +48,49 @@ export default function SubmissionsTable({ submissions }: SubmissionsTableProps)
return (
<TableRow
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">
{sortedSubmissions.length - index}
</TableCell>
<TableCell className={getStatusColorClass(submission.status)}>
<span>{submission.status}</span>
<TableCell>
<div className="flex flex-col truncate">
<span className={getStatusColorClass(submission.status)}>
{submission.status}
</span>
<span className="text-xs">{submittedDisplay}</span>
</div>
</TableCell>
<TableCell>
<Icon size={16} aria-hidden="true" />
</TableCell>
<TableCell>{submission.executionTime}</TableCell>
<TableCell>{submission.memoryUsage}</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>
</TableRow>
);
})}
</TableBody>
</Table>
)
);
}