feat: add problem status page
This commit is contained in:
parent
c796c83626
commit
47d8ed51fc
@ -17,6 +17,7 @@
|
||||
"ace-builds": "^1.32.2",
|
||||
"antd": "^5.12.4",
|
||||
"axios": "^1.6.2",
|
||||
"dayjs": "^1.11.10",
|
||||
"github-markdown-css": "^5.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-ace": "^10.1.0",
|
||||
|
@ -26,6 +26,9 @@ dependencies:
|
||||
axios:
|
||||
specifier: ^1.6.2
|
||||
version: 1.6.2
|
||||
dayjs:
|
||||
specifier: ^1.11.10
|
||||
version: 1.11.10
|
||||
github-markdown-css:
|
||||
specifier: ^5.5.0
|
||||
version: 5.5.0
|
||||
|
130
src/components/status-table.tsx
Normal file
130
src/components/status-table.tsx
Normal file
@ -0,0 +1,130 @@
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import { ProColumns, ProTable } from "@ant-design/pro-components";
|
||||
import { Button, Space } from "antd";
|
||||
|
||||
import { StatusApi } from "../api/status.ts";
|
||||
|
||||
interface SubmissionInfo {
|
||||
id: number;
|
||||
problem_title: string;
|
||||
problem_id: number;
|
||||
nick_name: string;
|
||||
user_id: number;
|
||||
point: string;
|
||||
date: Date;
|
||||
}
|
||||
|
||||
const columns: ProColumns<SubmissionInfo>[] = [
|
||||
{
|
||||
title: "ID",
|
||||
dataIndex: "id",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Problem",
|
||||
dataIndex: "problem_title",
|
||||
align: "left",
|
||||
},
|
||||
{
|
||||
title: "User",
|
||||
dataIndex: "nick_name",
|
||||
align: "left",
|
||||
},
|
||||
{
|
||||
title: "Point",
|
||||
dataIndex: "point",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Date",
|
||||
dataIndex: "date",
|
||||
valueType: "dateTime",
|
||||
align: "left",
|
||||
},
|
||||
{
|
||||
title: "Action",
|
||||
dataIndex: "action",
|
||||
render: (_node, entity) => {
|
||||
return (
|
||||
<Space>
|
||||
<Button>
|
||||
<Link to={`/problem/${entity.problem_id}`}>
|
||||
查看问题
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<Button>
|
||||
<Link to={`/profile/${entity.user_id}`}>查看作者</Link>
|
||||
</Button>
|
||||
|
||||
<Button>
|
||||
<Link to={`/status/${entity.id}`}>查看详情</Link>
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
interface StatusTableProps {
|
||||
title?: string;
|
||||
pid?: number;
|
||||
uid?: number;
|
||||
token: string;
|
||||
}
|
||||
|
||||
export default function StatusTable(props: StatusTableProps) {
|
||||
const request = async (
|
||||
params: Record<string, string> & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
keyword?: string | undefined;
|
||||
},
|
||||
) => {
|
||||
try {
|
||||
const cur = params.current || 1;
|
||||
const size = params.pageSize || 10;
|
||||
|
||||
const res = await StatusApi.Query(
|
||||
{
|
||||
pid: props.pid,
|
||||
uid: props.uid,
|
||||
offset: (cur - 1) * (size || 10),
|
||||
limit: size,
|
||||
},
|
||||
props.token,
|
||||
);
|
||||
const data = res.data.map((i) => {
|
||||
return {
|
||||
id: i.submission.meta.ID,
|
||||
problem_title: i.submission.problem.title,
|
||||
problem_id: i.submission.problem.meta.ID,
|
||||
nick_name: i.submission.user.nick_name,
|
||||
user_id: i.submission.user.meta.ID,
|
||||
point: i.point === -1 ? "Pending" : i.point.toString(),
|
||||
date: i.submission.meta.CreatedAt,
|
||||
};
|
||||
});
|
||||
return { success: true, data: data, total: res.count };
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
return { success: false, data: [], total: 0 };
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ProTable<SubmissionInfo>
|
||||
cardBordered
|
||||
columns={columns}
|
||||
request={request}
|
||||
rowKey={(record) => record.id}
|
||||
pagination={{
|
||||
pageSize: 10,
|
||||
}}
|
||||
search={false}
|
||||
dateFormatter="string"
|
||||
headerTitle={props.title || "Judge Status"}
|
||||
/>
|
||||
);
|
||||
}
|
14
src/pages/problem-status.tsx
Normal file
14
src/pages/problem-status.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import StatusTable from "../components/status-table.tsx";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useAuth } from "../components/hook.ts";
|
||||
|
||||
export default function ProblemStatusPage() {
|
||||
const auth = useAuth();
|
||||
const { pid } = useParams();
|
||||
|
||||
return (
|
||||
<>
|
||||
<StatusTable pid={+(pid || "0")} token={auth.token} />
|
||||
</>
|
||||
);
|
||||
}
|
@ -1,7 +1,9 @@
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import { ProColumns, ProTable } from "@ant-design/pro-components";
|
||||
import { Button } from "antd";
|
||||
|
||||
import { ProblemApi } from "../api/problem.ts";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
interface ProblemList {
|
||||
id: number;
|
||||
@ -32,7 +34,11 @@ const columns: ProColumns<ProblemList>[] = [
|
||||
hideInSearch: true,
|
||||
dataIndex: "action",
|
||||
render: (_node, entity) => {
|
||||
return <Link to={`/problem/${entity.id}`}>View</Link>;
|
||||
return (
|
||||
<Button>
|
||||
<Link to={`/problem/${entity.id}`}>View</Link>
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
@ -14,6 +14,9 @@ const LogoutPage = React.lazy(() => import("./pages/logout.tsx"));
|
||||
const RegisterPage = React.lazy(() => import("./pages/register.tsx"));
|
||||
const SearchPage = React.lazy(() => import("./pages/search.tsx"));
|
||||
const ProblemPage = React.lazy(() => import("./pages/problem.tsx"));
|
||||
const ProblemStatusPage = React.lazy(
|
||||
() => import("./pages/problem-status.tsx"),
|
||||
);
|
||||
const SubmitPage = React.lazy(() => import("./pages/submit.tsx"));
|
||||
|
||||
const RouteConfigs = [
|
||||
@ -37,14 +40,6 @@ const RouteConfigs = [
|
||||
path: "register",
|
||||
element: <RegisterPage />,
|
||||
},
|
||||
{
|
||||
path: "profile",
|
||||
element: (
|
||||
<RequireAuth>
|
||||
<p>Profile</p>
|
||||
</RequireAuth>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "search",
|
||||
element: <SearchPage />,
|
||||
@ -63,6 +58,30 @@ const RouteConfigs = [
|
||||
),
|
||||
loader: ProblemLoader,
|
||||
},
|
||||
{
|
||||
path: "problem/:pid/status",
|
||||
element: (
|
||||
<RequireAuth>
|
||||
<ProblemStatusPage />
|
||||
</RequireAuth>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "profile",
|
||||
element: (
|
||||
<RequireAuth>
|
||||
<p>Profile</p>
|
||||
</RequireAuth>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "profile/:uid",
|
||||
element: (
|
||||
<RequireAuth>
|
||||
<p>Profile - ID</p>
|
||||
</RequireAuth>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const NavConfigs = [
|
||||
|
Reference in New Issue
Block a user