Browse Source

feat: replace action buttons with dropdown menu in test list

Колонка с названием теста теперь занимает всю свободную ширину.
Три действия (Открыть, Изменить, Пройти тест) убраны в выпадающее меню по кнопке «…».

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
master
Aleksey Razorvin 1 week ago
parent
commit
f414f62f31
  1. 56
      frontend/src/pages/TestList/index.tsx

56
frontend/src/pages/TestList/index.tsx

@ -1,6 +1,6 @@
import { EditOutlined, PlayCircleOutlined, PlusOutlined } from '@ant-design/icons' import { EditOutlined, MoreOutlined, PlayCircleOutlined, PlusOutlined } from '@ant-design/icons'
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
import { Button, Space, Spin, Table, Tag, Typography } from 'antd' import { Button, Dropdown, Spin, Table, Typography } from 'antd'
import type { ColumnsType } from 'antd/es/table' import type { ColumnsType } from 'antd/es/table'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
@ -58,28 +58,36 @@ export default function TestList() {
{ {
title: '', title: '',
key: 'actions', key: 'actions',
width: 200, width: 60,
align: 'center',
render: (_: unknown, record: TestListItem) => ( render: (_: unknown, record: TestListItem) => (
<Space> <Dropdown
<Button size="small" onClick={() => navigate(`/tests/${record.id}`)}> menu={{
Открыть items: [
</Button> {
<Button key: 'open',
size="small" label: 'Открыть',
icon={<EditOutlined />} onClick: () => navigate(`/tests/${record.id}`),
onClick={() => navigate(`/tests/${record.id}/edit`)} },
> {
Изменить key: 'edit',
</Button> icon: <EditOutlined />,
<Button label: 'Изменить',
size="small" onClick: () => navigate(`/tests/${record.id}/edit`),
type="primary" },
icon={<PlayCircleOutlined />} { type: 'divider' },
onClick={() => navigate(`/tests/${record.id}/take`)} {
key: 'take',
icon: <PlayCircleOutlined />,
label: 'Пройти тест',
onClick: () => navigate(`/tests/${record.id}/take`),
},
],
}}
trigger={['click']}
> >
Пройти тест <Button size="small" icon={<MoreOutlined />} />
</Button> </Dropdown>
</Space>
), ),
}, },
] ]
@ -90,7 +98,7 @@ export default function TestList() {
return ( return (
<div style={{ maxWidth: 1000, margin: '0 auto', padding: 24 }}> <div style={{ maxWidth: 1000, margin: '0 auto', padding: 24 }}>
<Space style={{ width: '100%', justifyContent: 'space-between', marginBottom: 16 }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
<Title level={2} style={{ margin: 0 }}> <Title level={2} style={{ margin: 0 }}>
Тесты Тесты
</Title> </Title>
@ -101,7 +109,7 @@ export default function TestList() {
> >
Создать тест Создать тест
</Button> </Button>
</Space> </div>
<Table <Table
dataSource={tests} dataSource={tests}

Loading…
Cancel
Save