77 lines
2.3 KiB
React
77 lines
2.3 KiB
React
|
/**
|
||
|
|
* Strukturierte Zeilenfehler aus Universal-CSV-Import (error_details mit hint/code).
|
||
|
|
*/
|
||
|
|
export default function CsvImportErrorDetails({ errors, title, defaultOpen = true, maxVisible = 20 }) {
|
||
|
|
if (!errors?.length) return null
|
||
|
|
|
||
|
|
const shown = errors.slice(0, maxVisible)
|
||
|
|
const rest = errors.length - shown.length
|
||
|
|
|
||
|
|
return (
|
||
|
|
<details
|
||
|
|
className="card"
|
||
|
|
style={{ marginBottom: 16, padding: 16, cursor: 'pointer' }}
|
||
|
|
open={defaultOpen}
|
||
|
|
>
|
||
|
|
<summary style={{ fontWeight: 600, color: 'var(--text1)' }}>
|
||
|
|
{title || `Zeilenfehler (${errors.length})`}
|
||
|
|
</summary>
|
||
|
|
<ul
|
||
|
|
style={{
|
||
|
|
margin: '12px 0 0 0',
|
||
|
|
padding: 0,
|
||
|
|
listStyle: 'none',
|
||
|
|
fontSize: 13,
|
||
|
|
lineHeight: 1.5,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{shown.map((err, i) => {
|
||
|
|
const row = err.row ?? err.row_index
|
||
|
|
const message = err.error ?? err.message ?? (typeof err === 'string' ? err : JSON.stringify(err))
|
||
|
|
return (
|
||
|
|
<li
|
||
|
|
key={i}
|
||
|
|
style={{
|
||
|
|
padding: '10px 12px',
|
||
|
|
marginBottom: 8,
|
||
|
|
background: 'var(--surface2)',
|
||
|
|
borderRadius: 8,
|
||
|
|
borderLeft: '3px solid var(--danger)',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div style={{ color: 'var(--text1)' }}>
|
||
|
|
{row != null && (
|
||
|
|
<strong style={{ marginRight: 6 }}>Zeile {row}:</strong>
|
||
|
|
)}
|
||
|
|
{message}
|
||
|
|
{err.code && (
|
||
|
|
<code
|
||
|
|
style={{
|
||
|
|
marginLeft: 8,
|
||
|
|
fontSize: 11,
|
||
|
|
color: 'var(--text3)',
|
||
|
|
background: 'var(--surface)',
|
||
|
|
padding: '1px 6px',
|
||
|
|
borderRadius: 4,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{err.code}
|
||
|
|
</code>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{err.hint && (
|
||
|
|
<div style={{ marginTop: 6, fontSize: 12, color: 'var(--text2)' }}>{err.hint}</div>
|
||
|
|
)}
|
||
|
|
</li>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</ul>
|
||
|
|
{rest > 0 && (
|
||
|
|
<p style={{ fontSize: 12, color: 'var(--text3)', margin: '8px 0 0' }}>
|
||
|
|
… und {rest} weitere Fehler (Details in der Import-Historie).
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</details>
|
||
|
|
)
|
||
|
|
}
|