bjoernpoettker/paperlessmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: redesign summary view in MailImportWizard to improve readability and document information layout
Build and Push Multi-Platform Images / build-and-push (push) Successful in 15s
Details

Browse Source
This commit is contained in:
Björn Pöttker
2026-05-09 12:15:54 +02:00
parent 3f2b3a7af4
commit e4f765fcfd
1 changed files with 48 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
paperless-frontend/src/components/MailImportWizard.tsx
+48 -54
View File
@@ -1,20 +1,19 @@
import { useState, useEffect } from 'react';
import {
import {
Modal, Steps, Button, Table, Radio, Select, Input, DatePicker,
Space, Row, Col, Typography, message, Spin, Result, Alert, Card, Tag
Space, Row, Col, Typography, message, Spin, Result, Alert, Tag
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { emailImportApi, type AttachmentImportData } from '../api/email-import';
import { paperlessApi, type PaperlessCorrespondent } from '../api/paperless';
import dayjs from 'dayjs';
import {
PrinterOutlined, FileTextOutlined, PaperClipOutlined, ArrowRightOutlined,
WarningOutlined
import {
PrinterOutlined, PaperClipOutlined, ArrowRightOutlined, WarningOutlined
} from '@ant-design/icons';
import PdfSplitViewer from './PdfSplitViewer';
import BarcodePositioner from './BarcodePositioner';
const { Text, Title } = Typography;
const { Text } = Typography;
interface MailImportWizardProps {
visible: boolean;
@@ -664,66 +663,61 @@ export default function MailImportWizard({ visible, onClose, email, attachments
const attachmentsToImport = importData.filter(i => i.type === 'ATTACHMENT');
return (
<div style={{ padding: '0 24px' }}>
<Title level={4} style={{ marginBottom: 24 }}>Zusammenfassung des Imports</Title>
<Text type="secondary" style={{ display: 'block', marginBottom: 24 }}>
Bitte überprüfe die folgende Struktur. Mit Klick auf "Import Ausführen" werden die Belegnummern reserviert und die Dokumente hochgeladen.
</Text>
{mainDocs.length === 0 && <Alert type="warning" message="Keine Hauptdokumente zum Importieren ausgewählt." />}
<div>
{mainDocs.length === 0 && (
<Alert type="warning" message="Keine Hauptdokumente zum Importieren ausgewählt." style={{ marginBottom: 16 }} />
)}
{mainDocs.map(main => {
const mainAttachments = attachmentsToImport.filter(a => a.parentVirtualId === main.virtualId);
const mode = belegnummerMode[main.virtualId] || 'neu';
const num = belegnummern[main.virtualId] || '000000';
const yr = barcodes[main.virtualId]?.jahr || dayjs(email.Date).format('YYYY');
return (
<div key={main.virtualId} style={{ marginBottom: 24 }}>
<Card size="small" style={{ borderLeft: '4px solid #1890ff' }}>
<Row align="middle">
<Col span={16}>
<Space>
<FileTextOutlined style={{ fontSize: 20, color: '#1890ff' }} />
<div>
<Text strong style={{ fontSize: 16 }}>{main.fileName}</Text>
<br />
<Text type="secondary" style={{ fontSize: 12 }}>Hauptdokument</Text>
</div>
</Space>
</Col>
<Col span={8} style={{ textAlign: 'right' }}>
<Tag color="blue" style={{ fontSize: 14, padding: '4px 12px' }}>
{mode === 'neu' ? `Belegnr.: ${yr}-${num}` : `Belegnr.: ${yr}-${num}`}
</Tag>
</Col>
</Row>
const datum = eingangsdaten[main.virtualId];
const belegnr = `${yr}-${String(num).padStart(6, '0')}`;
{mainAttachments.length > 0 && (
<div style={{ marginTop: 12, paddingLeft: 32 }}>
{mainAttachments.map(att => (
<div key={att.virtualId} style={{ marginBottom: 8, padding: '8px 12px', background: '#fafafa', borderRadius: 4, display: 'flex', alignItems: 'center' }}>
<ArrowRightOutlined style={{ marginRight: 12, color: '#8c8c8c' }} />
<PaperClipOutlined style={{ marginRight: 8 }} />
<Text style={{ flex: 1 }}>{att.fileName}</Text>
<Tag>Anlage</Tag>
</div>
))}
</div>
)}
</Card>
return (
<div key={main.virtualId} style={{ marginBottom: 24, padding: 16, border: '1px solid #f0f0f0', borderRadius: 8 }}>
<Text strong style={{ fontSize: 16, marginBottom: 12, display: 'block' }}>{main.fileName}</Text>
<Row gutter={24} align="middle">
<Col span={20}>
<Space size={24}>
<Text type="secondary">
Eingangsdatum: <Text strong>{datum?.format('DD.MM.YYYY') ?? '—'}</Text>
</Text>
<Text type="secondary">
Belegnummer: <Tag color="blue" style={{ fontSize: 13 }}>{belegnr}</Tag>
</Text>
</Space>
{mainAttachments.length > 0 && (
<div style={{ marginTop: 12, paddingLeft: 16 }}>
{mainAttachments.map(att => (
<div key={att.virtualId} style={{ marginBottom: 8, padding: '6px 12px', background: '#fafafa', borderRadius: 4, display: 'flex', alignItems: 'center' }}>
<ArrowRightOutlined style={{ marginRight: 12, color: '#8c8c8c' }} />
<PaperClipOutlined style={{ marginRight: 8 }} />
<Text style={{ flex: 1 }}>{att.fileName}</Text>
<Tag>Anlage</Tag>
</div>
))}
</div>
)}
</Col>
<Col span={4} style={{ textAlign: 'right' }}>
<Button icon={<PrinterOutlined />} onClick={() => printDocument(main.virtualId, main.attachmentId)}>
Drucken
</Button>
</Col>
</Row>
</div>
);
})}
{/* Orphans (Attachments without parent or parents ignored) */}
{attachmentsToImport.filter(a => !mainDocs.find(m => m.virtualId === a.parentVirtualId)).map(orphan => (
<div key={orphan.virtualId} style={{ marginBottom: 12 }}>
<Alert
type="error"
message={`Anlage ohne Hauptdokument: ${orphan.fileName}`}
description="Bitte gehe zurück und ordne diese Anlage einem Hauptdokument zu oder ignoriere sie."
/>
<Alert
type="error"
message={`Anlage ohne Hauptdokument: ${orphan.fileName}`}
description="Bitte gehe zurück und ordne diese Anlage einem Hauptdokument zu oder ignoriere sie."
/>
</div>
))}
</div>