AURORA-1683 панель документов: счётчик и поповер комментариев

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andrey Epifancev 2026-10-27 00:23:40 +04:00
parent 63251b287a
commit 470851ef19
2 changed files with 54 additions and 8 deletions

View File

@ -0,0 +1,42 @@
import { CommentOutlined } from '@ant-design/icons';
import { Button, Popover } from 'antd';
import { useState } from 'react';
import { CommentsList } from './CommentsList';
import { useDocumentComments } from './useDocumentComments';
/** Кнопка с числом комментариев в строке панели документов [39-01]; по клику — список только для чтения. */
export function CommentsPopover({ documentId, fileName, count }: { documentId: string; fileName: string; count: number }) {
const [open, setOpen] = useState(false);
const { state, load, reset } = useDocumentComments(documentId);
const onOpenChange = (next: boolean) => {
setOpen(next);
if (next) load();
else reset();
};
const content = (
<div
// клики внутри поповера всплывают по дереву React до onClick строки таблицы и открывали бы документ
onClick={(e) => e.stopPropagation()}
onKeyDown={(e) => e.stopPropagation()}
style={{ width: 360, maxWidth: 420 }}>
<div style={{ maxHeight: 320, overflowY: 'auto', marginBottom: 8 }}>
<CommentsList state={state} emptyText='Комментарий отсутствует' />
</div>
<div style={{ textAlign: 'right' }}>
<Button size='small' onClick={() => onOpenChange(false)}>
Закрыть
</Button>
</div>
</div>
);
return (
<Popover trigger='click' title={`Комментарии к документу ${fileName}`} content={content} open={open} onOpenChange={onOpenChange}>
<Button icon={<CommentOutlined />} aria-label={`Комментарии: ${count}`} onClick={(e) => e.stopPropagation()}>
{count > 0 ? count : null}
</Button>
</Popover>
);
}

View File

@ -4,6 +4,7 @@ import type { ColumnsType } from 'antd/es/table';
import type { ReactNode } from 'react';
import { useNavigate } from 'react-router-dom';
import type { CheckResult, FileOut, FileType } from '../../types/api';
import { CommentsPopover } from '../DocumentComments/CommentsPopover';
import { FileWarningsPopover } from './FileWarningsPopover';
import { type DocumentRow, type RowStatus, buildDocumentRows, rowBadge } from './documentRows';
@ -138,14 +139,17 @@ export function FilesList({
title: '',
dataIndex: 'action',
render: (_, r) => (
<Button
icon={<DeleteOutlined />}
aria-label='Удалить файл'
onClick={(e) => {
e.stopPropagation();
onDeleteClick(r);
}}
/>
<div style={{ display: 'flex', gap: 8 }}>
{r.documentId && <CommentsPopover documentId={r.documentId} fileName={r.name} count={r.commentsCount} />}
<Button
icon={<DeleteOutlined />}
aria-label='Удалить файл'
onClick={(e) => {
e.stopPropagation();
onDeleteClick(r);
}}
/>
</div>
),
},
];