feat: add SubmissionListPage
This commit is contained in:
parent
1c69063825
commit
9c7dbd5a34
120
src/components/SubmissionTable.tsx
Normal file
120
src/components/SubmissionTable.tsx
Normal file
@ -0,0 +1,120 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Badge, Button, Center, Link } from "@chakra-ui/react";
|
||||
import type { ColumnDef, PaginationState } from "@tanstack/react-table";
|
||||
import { Link as ReactRouterLink } from "react-router-dom";
|
||||
|
||||
import type { SubmissionWithPoint } from "../app/services/status";
|
||||
import { useListQuery } from "../app/services/status";
|
||||
import type { UserProfile } from "../app/services/user";
|
||||
import Table from "./Table";
|
||||
import Title from "./Title";
|
||||
import type { SubmissionInfo } from "../app/services/submission";
|
||||
import type { ProblemInfo } from "../app/services/problem";
|
||||
|
||||
const columns: ColumnDef<SubmissionWithPoint>[] = [
|
||||
{
|
||||
id: "id",
|
||||
accessorFn: (i, _) => i.submission.meta.ID,
|
||||
header: (_) => <Title word="ID" />,
|
||||
},
|
||||
{
|
||||
id: "title",
|
||||
accessorFn: (i, _) => i.submission.problem,
|
||||
header: (_) => <Title word="Problem" />,
|
||||
cell: ({ cell }) => {
|
||||
const problem = cell.getValue() as ProblemInfo;
|
||||
return (
|
||||
<Link as={ReactRouterLink} to={`/problem/${problem.meta.ID}`} color="teal.500">
|
||||
{problem.title}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "user",
|
||||
accessorFn: (i, _) => i.submission.user,
|
||||
header: (_) => <Title word="User" />,
|
||||
cell: ({ cell }) => {
|
||||
const user = cell.getValue() as UserProfile;
|
||||
return (
|
||||
<Link as={ReactRouterLink} to={`/profile/${user.meta.ID}`} color="teal.500">
|
||||
{user.nick_name}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "point",
|
||||
accessorKey: "point",
|
||||
header: (_) => <Title word="Point" center={true} />,
|
||||
cell: ({ cell }) => {
|
||||
const point = cell.getValue() as number;
|
||||
const color = point === -1 ? "purple" : point === 100 ? "green" : "red";
|
||||
return (
|
||||
<Center>
|
||||
<Badge colorScheme={color} fontSize="md">
|
||||
{point}
|
||||
</Badge>
|
||||
</Center>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "date",
|
||||
accessorFn: (i, _) => new Date(i.submission.meta.CreatedAt).toLocaleString(),
|
||||
header: (_) => <Title word="Date" />,
|
||||
},
|
||||
{
|
||||
id: "action",
|
||||
accessorKey: "submission",
|
||||
header: (_) => <Title word="Action" center={true} />,
|
||||
cell: ({ cell }) => {
|
||||
const submission = cell.getValue() as SubmissionInfo;
|
||||
return (
|
||||
<Center>
|
||||
<Button variant="outline" colorScheme="teal" size="sm">
|
||||
<Link as={ReactRouterLink} to={`/status/${submission.meta.ID}`}>
|
||||
Detail Status
|
||||
</Link>
|
||||
</Button>
|
||||
</Center>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
interface SubmissionTableProps {
|
||||
pid?: number;
|
||||
uid?: number;
|
||||
}
|
||||
|
||||
export default function SubmissionTable(props: SubmissionTableProps) {
|
||||
const [paging, setPaging] = useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
const { data: info, isFetching } = useListQuery({
|
||||
pid: props.pid || 0,
|
||||
uid: props.uid || 0,
|
||||
offset: paging.pageIndex * paging.pageSize,
|
||||
limit: paging.pageSize,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
console.log(info?.body.data);
|
||||
}, [info]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table<SubmissionWithPoint>
|
||||
header={<Title word="Judge Status" />}
|
||||
columns={columns}
|
||||
data={info?.body.data || []}
|
||||
total={info?.body.count || 0}
|
||||
paging={paging}
|
||||
setPaging={setPaging}
|
||||
isLoading={isFetching}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
27
src/pages/SubmissionListPage.tsx
Normal file
27
src/pages/SubmissionListPage.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import { lazy } from "react";
|
||||
import { Box, Stack } from "@chakra-ui/react";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
import { useDetailQuery } from "../app/services/problem";
|
||||
|
||||
const SubmissionTable = lazy(() => import("../components/SubmissionTable"));
|
||||
const ProblemInfoMenu = lazy(() => import("../components/ProblemInfoMenu"));
|
||||
|
||||
export default function SubmissionListPage() {
|
||||
const { id } = useParams();
|
||||
const pid = Number(id) || 0;
|
||||
const { data: details } = useDetailQuery({ pid: pid });
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack direction={{ base: "column", md: "row" }}>
|
||||
<Box w="100%">
|
||||
<SubmissionTable pid={pid} />
|
||||
</Box>
|
||||
<Box w="480px">
|
||||
<ProblemInfoMenu data={details?.body} />
|
||||
</Box>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
@ -11,6 +11,7 @@ const LogoutPage = lazy(() => import("./pages/LogoutPage"));
|
||||
const ProblemListPage = lazy(() => import("./pages/ProblemListPage"));
|
||||
const ProblemDetailPage = lazy(() => import("./pages/ProblemDetailPage"));
|
||||
const SubmitPage = lazy(() => import("./pages/SubmitPage"));
|
||||
const SubmissionListPage = lazy(() => import("./pages/SubmissionListPage"));
|
||||
|
||||
export const router: RouteObject[] = [
|
||||
{
|
||||
@ -50,6 +51,14 @@ export const router: RouteObject[] = [
|
||||
</RequireAuth>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "problem/:id/submission",
|
||||
element: (
|
||||
<RequireAuth>
|
||||
<SubmissionListPage />
|
||||
</RequireAuth>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
Loading…
Reference in New Issue
Block a user