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. 58
      frontend/src/pages/TestList/index.tsx

58
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 { 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}

Loading…
Cancel
Save