Enhance attachment display in ChangeEquipmentStatusList

- Added a new component, StatusChangeAttachmentLink, to render file attachments in the ChangeEquipmentStatusList.
- Updated the rendering logic to display up to three attachment links with a count of additional attachments if more than three exist.
- Improved the overall user interface for better visibility of file attachments related to equipment status changes.
This commit is contained in:
Первов Артем
2026-04-21 12:36:53 +03:00
parent b1aefae2fa
commit 48c61cc2e5

View File

@@ -13,6 +13,7 @@ import {
TopToolbar, TopToolbar,
} from 'react-admin'; } from 'react-admin';
import { equipmentStatusChoices } from '../equipment/shared'; import { equipmentStatusChoices } from '../equipment/shared';
import { StatusChangeAttachmentLink } from './StatusChangeAttachmentLink';
const statusFilters = [ const statusFilters = [
<TextInput key="q" source="q" label="Поиск" alwaysOn />, <TextInput key="q" source="q" label="Поиск" alwaysOn />,
@@ -41,9 +42,31 @@ export function ChangeEquipmentStatusList() {
<TextField source="responsible" /> <TextField source="responsible" />
<FunctionField <FunctionField
label="Файлы" label="Файлы"
render={(record: { attachments?: { id: string }[] | null }) => { render={(record: {
const count = Array.isArray(record.attachments) ? record.attachments.length : 0; id: string;
return count ? String(count) : '—'; attachments?: { id: string; originalFileName?: string | null }[] | null;
}) => {
const items = Array.isArray(record.attachments) ? record.attachments : [];
if (!items.length) {
return '—';
}
return (
<div style={{ display: 'grid', gap: 4, minWidth: 180 }}>
{items.slice(0, 3).map((att) => (
<div key={att.id} style={{ lineHeight: 1.2 }}>
<StatusChangeAttachmentLink
statusChangeId={record.id}
attachmentId={att.id}
fileName={att.originalFileName ?? 'файл'}
/>
</div>
))}
{items.length > 3 ? (
<span style={{ opacity: 0.75, fontSize: 12 }}>{`+ ещё ${items.length - 3}`}</span>
) : null}
</div>
);
}} }}
/> />
</Datagrid> </Datagrid>