ENCOA-277, ENCOA-276, ENCOA-282, ENCOA-283

This commit is contained in:
Carlos-Mesquita
2024-12-21 19:23:53 +00:00
parent f6d387ce2d
commit 98a1636d0c
31 changed files with 2513 additions and 194 deletions

View File

@@ -0,0 +1,77 @@
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:&nbsp;
</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;