feat: replace action buttons with dropdown menu in test list
Колонка с названием теста теперь занимает всю свободную ширину. Три действия (Открыть, Изменить, Пройти тест) убраны в выпадающее меню по кнопке «…». Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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 { Button, Space, Spin, Table, Tag, Typography } from 'antd'
|
||||
import { Button, Dropdown, Spin, Table, Typography } from 'antd'
|
||||
import type { ColumnsType } from 'antd/es/table'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
|
||||
@@ -58,28 +58,36 @@ export default function TestList() {
|
||||
{
|
||||
title: '',
|
||||
key: 'actions',
|
||||
width: 200,
|
||||
width: 60,
|
||||
align: 'center',
|
||||
render: (_: unknown, record: TestListItem) => (
|
||||
<Space>
|
||||
<Button size="small" onClick={() => navigate(`/tests/${record.id}`)}>
|
||||
Открыть
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => navigate(`/tests/${record.id}/edit`)}
|
||||
>
|
||||
Изменить
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon={<PlayCircleOutlined />}
|
||||
onClick={() => navigate(`/tests/${record.id}/take`)}
|
||||
>
|
||||
Пройти тест
|
||||
</Button>
|
||||
</Space>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: 'open',
|
||||
label: 'Открыть',
|
||||
onClick: () => navigate(`/tests/${record.id}`),
|
||||
},
|
||||
{
|
||||
key: 'edit',
|
||||
icon: <EditOutlined />,
|
||||
label: 'Изменить',
|
||||
onClick: () => navigate(`/tests/${record.id}/edit`),
|
||||
},
|
||||
{ type: 'divider' },
|
||||
{
|
||||
key: 'take',
|
||||
icon: <PlayCircleOutlined />,
|
||||
label: 'Пройти тест',
|
||||
onClick: () => navigate(`/tests/${record.id}/take`),
|
||||
},
|
||||
],
|
||||
}}
|
||||
trigger={['click']}
|
||||
>
|
||||
<Button size="small" icon={<MoreOutlined />} />
|
||||
</Dropdown>
|
||||
),
|
||||
},
|
||||
]
|
||||
@@ -90,7 +98,7 @@ export default function TestList() {
|
||||
|
||||
return (
|
||||
<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>
|
||||
@@ -101,7 +109,7 @@ export default function TestList() {
|
||||
>
|
||||
Создать тест
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
dataSource={tests}
|
||||
|
||||
Reference in New Issue
Block a user