78 lines
3.8 KiB
TypeScript
78 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
import { FiAlertCircle } from "react-icons/fi";
|
|
import Dropdown from '../Dropdown';
|
|
import { errorsByRows, ExcelError } from '@/utils/excel.errors';
|
|
|
|
const ParseExcelErrors: React.FC<{ errors: ExcelError[] }> = (props) => {
|
|
const errorsByRow = errorsByRows(props.errors);
|
|
|
|
const ErrorTitle = (row: string) => (
|
|
<div className="flex gap-2 items-center w-full">
|
|
<FiAlertCircle className="text-red-500 h-5 w-5" />
|
|
<h3 className="text-sm font-medium text-red-800">
|
|
Errors found in row {row}
|
|
</h3>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{Object.entries(errorsByRow).map(([row, rowErrors]) => (
|
|
<div key={`row-${row}`} className="bg-red-50 rounded-lg">
|
|
<Dropdown
|
|
customTitle={ErrorTitle(row)}
|
|
className="w-full text-left font-semibold flex justify-between items-center p-4"
|
|
contentWrapperClassName="px-4 pb-4"
|
|
>
|
|
<div className="space-y-3">
|
|
{rowErrors.required.length > 0 && (
|
|
<div className="bg-white/50 rounded border border-red-200 p-2 text-sm text-red-700 hover:bg-white transition-colors">
|
|
<div className="font-medium">
|
|
Missing values:
|
|
</div>
|
|
<div className="text-red-600 mt-1 ml-2">
|
|
<span>
|
|
On columns:
|
|
</span>
|
|
<span className="font-mono bg-red-100/50 px-1 rounded">
|
|
{rowErrors.required.join(', ')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{rowErrors.other.length > 0 && (
|
|
<div className="space-y-2">
|
|
{rowErrors.other.map((error, index) => (
|
|
<div
|
|
key={`validation-${index}`}
|
|
className="bg-white/50 rounded border border-red-200 p-2 text-sm text-red-700 hover:bg-white transition-colors"
|
|
>
|
|
<div className="font-medium">
|
|
{error.error}:
|
|
</div>
|
|
<div className="text-red-600 mt-1 ml-2">
|
|
Value
|
|
<span className="font-mono bg-red-100/50 px-1 mx-2 rounded">
|
|
{error.value}
|
|
</span>
|
|
in column
|
|
<span className="font-mono bg-red-100/50 px-1 mx-2 rounded">
|
|
{error.column}
|
|
</span>
|
|
is invalid!
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Dropdown>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ParseExcelErrors;
|