feat: migrate BrokerOperationsTable to design system
This commit is contained in:
parent
da656330b3
commit
e044b64de4
@ -1,6 +1,8 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import type { ReactNode } from 'react';
|
||||
import type { BrokerOperation, BrokerOperationsPage } from '@/shared/api/responses';
|
||||
import { Box } from '@mui/material';
|
||||
import { Button, Heading, Skeleton, Text } from '@moex-vibe/design-system';
|
||||
import { TableSkeleton } from '@/shared/ui/TableSkeleton';
|
||||
import {
|
||||
getBrokerOperationImpact,
|
||||
@ -10,42 +12,33 @@ import {
|
||||
import { getBrokerInstrumentPath } from '@/entities/broker-position';
|
||||
import { formatBrokerSignedMoney } from '@/shared/lib/formatters';
|
||||
|
||||
const tableStyle = {
|
||||
const tableSx = {
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse',
|
||||
fontSize: 14,
|
||||
} satisfies React.CSSProperties;
|
||||
} as const;
|
||||
|
||||
const thStyle = {
|
||||
borderBottom: '1px solid #e0e0e0',
|
||||
color: 'var(--color-text-secondary)',
|
||||
const thSx = {
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
color: 'text.secondary',
|
||||
fontWeight: 600,
|
||||
padding: '10px 8px',
|
||||
} satisfies React.CSSProperties;
|
||||
p: 1,
|
||||
textAlign: 'left',
|
||||
} as const;
|
||||
|
||||
const tdStyle = {
|
||||
borderBottom: '1px solid #eeeeee',
|
||||
padding: '10px 8px',
|
||||
const tdSx = {
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
p: 1,
|
||||
verticalAlign: 'top',
|
||||
} satisfies React.CSSProperties;
|
||||
textAlign: 'left',
|
||||
} as const;
|
||||
|
||||
const pagButtonStyle = {
|
||||
padding: '6px 14px',
|
||||
borderRadius: 6,
|
||||
border: '1px solid #e0e0e0',
|
||||
background: 'var(--color-surface)',
|
||||
color: 'var(--color-text)',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
lineHeight: 1.4,
|
||||
} satisfies React.CSSProperties;
|
||||
|
||||
const pagButtonDisabledStyle = {
|
||||
...pagButtonStyle,
|
||||
opacity: 0.35,
|
||||
cursor: 'not-allowed',
|
||||
} satisfies React.CSSProperties;
|
||||
const tdSxRight = {
|
||||
...tdSx,
|
||||
textAlign: 'right',
|
||||
} as const;
|
||||
|
||||
function formatDate(value: string | null) {
|
||||
if (!value) return '-';
|
||||
@ -53,11 +46,10 @@ function formatDate(value: string | null) {
|
||||
return new Date(value).toLocaleString('ru-RU');
|
||||
}
|
||||
|
||||
function moneyColor(impact: BrokerOperationImpact): string {
|
||||
if (impact === 'adds') return 'var(--color-positive)';
|
||||
if (impact === 'reduces') return 'var(--color-negative)';
|
||||
|
||||
return 'var(--color-text)';
|
||||
function operationTone(impact: BrokerOperationImpact) {
|
||||
if (impact === 'adds') return 'positive' as const;
|
||||
if (impact === 'reduces') return 'negative' as const;
|
||||
return 'primary' as const;
|
||||
}
|
||||
|
||||
function OperationInstrument({ operation }: { operation: BrokerOperation }) {
|
||||
@ -69,19 +61,23 @@ function OperationInstrument({ operation }: { operation: BrokerOperation }) {
|
||||
});
|
||||
const name = operation.name || operation.description;
|
||||
|
||||
if (!path && !name) return <span>-</span>;
|
||||
if (!path) return <span>{name}</span>;
|
||||
if (!path && !name) return <Text>-</Text>;
|
||||
if (!path) return <Text>{name}</Text>;
|
||||
if (!ticker || ticker === '-') return <Link to={path}>{name}</Link>;
|
||||
|
||||
return (
|
||||
<div style={{ display: 'grid', gap: 2 }}>
|
||||
<Link to={path} style={{ fontWeight: 700 }}>
|
||||
{ticker}
|
||||
<Box sx={{ display: 'grid', gap: 0.5 }}>
|
||||
<Link to={path}>
|
||||
<Box component="span" sx={{ fontWeight: 700 }}>
|
||||
{ticker}
|
||||
</Box>
|
||||
</Link>
|
||||
{name && name !== ticker && (
|
||||
<span style={{ color: 'var(--color-text-secondary)', fontSize: 12 }}>{name}</span>
|
||||
<Text variant="caption" tone="secondary">
|
||||
{name}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -103,146 +99,156 @@ export function BrokerOperationsTable({
|
||||
|
||||
return (
|
||||
<section aria-busy={isFetching}>
|
||||
<div
|
||||
style={{
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
gap: 1.5,
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 12,
|
||||
mb: 1.5,
|
||||
}}
|
||||
>
|
||||
<h2 style={{ fontSize: 20, margin: 0 }}>{title}</h2>
|
||||
<Heading level={2}>{title}</Heading>
|
||||
{headerAction}
|
||||
{pagination && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<button
|
||||
type="button"
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="small"
|
||||
aria-label="Предыдущая страница"
|
||||
onClick={onPrevious}
|
||||
disabled={!canGoBack || isFetching}
|
||||
style={canGoBack && !isFetching ? pagButtonStyle : pagButtonDisabledStyle}
|
||||
>
|
||||
{isFetching ? (
|
||||
<span
|
||||
className="loading-spinner"
|
||||
style={{ width: 14, height: 14, display: 'block' }}
|
||||
/>
|
||||
) : (
|
||||
'←'
|
||||
)}
|
||||
</button>
|
||||
<span
|
||||
style={{
|
||||
{isFetching ? <Skeleton shape="circular" width={14} height={14} /> : '←'}
|
||||
</Button>
|
||||
<Box
|
||||
sx={{
|
||||
minWidth: 20,
|
||||
textAlign: 'center',
|
||||
color: 'var(--color-text-secondary)',
|
||||
color: 'text.secondary',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{pageNumber}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
</Box>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="small"
|
||||
aria-label="Следующая страница"
|
||||
onClick={onNext}
|
||||
disabled={!canGoForward || isFetching}
|
||||
style={canGoForward && !isFetching ? pagButtonStyle : pagButtonDisabledStyle}
|
||||
>
|
||||
{isFetching ? (
|
||||
<span
|
||||
className="loading-spinner"
|
||||
style={{ width: 14, height: 14, display: 'block' }}
|
||||
/>
|
||||
) : (
|
||||
'→'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{isFetching ? <Skeleton shape="circular" width={14} height={14} /> : '→'}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{isLoading ? (
|
||||
<div style={{ overflowX: 'auto', background: 'var(--color-surface)' }}>
|
||||
<table style={tableStyle}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="left" style={thStyle}>
|
||||
<Box sx={{ overflowX: 'auto', bgcolor: 'surface.default' }}>
|
||||
<Box component="table" sx={tableSx}>
|
||||
<Box component="thead">
|
||||
<Box component="tr">
|
||||
<Box component="th" sx={thSx}>
|
||||
Дата
|
||||
</th>
|
||||
<th align="left" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={thSx}>
|
||||
Тип
|
||||
</th>
|
||||
<th align="left" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={thSx}>
|
||||
Инструмент
|
||||
</th>
|
||||
<th align="right" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={{ ...thSx, textAlign: 'right' }}>
|
||||
Сумма
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<TableSkeleton
|
||||
rows={5}
|
||||
columns={[{ width: '35%' }, { width: '30%' }, { width: '40%' }, { width: '25%' }]}
|
||||
/>
|
||||
</table>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
) : operations.length === 0 && !isFetching ? (
|
||||
<p style={{ color: 'var(--color-text-secondary)' }}>{emptyMessage}</p>
|
||||
<Text component="p" tone="muted">
|
||||
{emptyMessage}
|
||||
</Text>
|
||||
) : (
|
||||
<div className="table-container">
|
||||
<div style={{ overflowX: 'auto', background: 'var(--color-surface)' }}>
|
||||
<table style={tableStyle}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="left" style={thStyle}>
|
||||
<Box sx={{ position: 'relative' }}>
|
||||
<Box sx={{ overflowX: 'auto', bgcolor: 'surface.default' }}>
|
||||
<Box component="table" sx={tableSx}>
|
||||
<Box component="thead">
|
||||
<Box component="tr">
|
||||
<Box component="th" sx={thSx}>
|
||||
Дата
|
||||
</th>
|
||||
<th align="left" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={thSx}>
|
||||
Тип
|
||||
</th>
|
||||
<th align="left" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={thSx}>
|
||||
Инструмент
|
||||
</th>
|
||||
<th align="right" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={{ ...thSx, textAlign: 'right' }}>
|
||||
Сумма
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box component="tbody">
|
||||
{operations.map((operation) => {
|
||||
const impact = getBrokerOperationImpact(operation);
|
||||
return (
|
||||
<tr key={operation.cursor || operation.id}>
|
||||
<td style={tdStyle}>{formatDate(operation.date)}</td>
|
||||
<td style={tdStyle}>
|
||||
<span>{getBrokerOperationTypeLabel(operation)}</span>
|
||||
</td>
|
||||
<td style={tdStyle}>
|
||||
<Box component="tr" key={operation.cursor || operation.id}>
|
||||
<Box component="td" sx={tdSx}>
|
||||
{formatDate(operation.date)}
|
||||
</Box>
|
||||
<Box component="td" sx={tdSx}>
|
||||
<Text>{getBrokerOperationTypeLabel(operation)}</Text>
|
||||
</Box>
|
||||
<Box component="td" sx={tdSx}>
|
||||
<OperationInstrument operation={operation} />
|
||||
</td>
|
||||
<td
|
||||
</Box>
|
||||
<Box
|
||||
component="td"
|
||||
sx={{
|
||||
...tdSxRight,
|
||||
color:
|
||||
operationTone(impact) === 'positive'
|
||||
? 'success.main'
|
||||
: operationTone(impact) === 'negative'
|
||||
? 'error.main'
|
||||
: 'text.primary',
|
||||
fontWeight: 700,
|
||||
}}
|
||||
align="right"
|
||||
style={{ ...tdStyle, color: moneyColor(impact), fontWeight: 700 }}
|
||||
>
|
||||
{formatBrokerSignedMoney(operation.payment)}
|
||||
</td>
|
||||
</tr>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
{isFetching && (
|
||||
<div className="table-loading-overlay" role="status">
|
||||
<div className="loading-spinner" aria-hidden="true" />
|
||||
<span style={{ fontSize: 13, color: 'var(--color-text-secondary)' }}>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 1,
|
||||
bgcolor: 'rgba(255,255,255,0.7)',
|
||||
}}
|
||||
>
|
||||
<Box className="loading-spinner" />
|
||||
<Text variant="caption" tone="secondary">
|
||||
{pagination ? `Загрузка страницы ${pageNumber}…` : 'Обновление операций…'}
|
||||
</span>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user