AURORA-1683 панель документов: счётчик и поповер комментариев
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
63251b287a
commit
470851ef19
42
web/src/widgets/DocumentComments/CommentsPopover.tsx
Normal file
42
web/src/widgets/DocumentComments/CommentsPopover.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user