Skip to content

Commit

Permalink
show end state, fixed border-radius
Browse files Browse the repository at this point in the history
  • Loading branch information
@didrikhegna
didrikhegna committed Feb 19, 2024
1 parent 4b6135b commit 673b570
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 101 deletions.
189 changes: 89 additions & 100 deletions components/crystallize-import/src/ui/import/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,112 +138,101 @@ export const App = () => {
<div className="app-section">
<DataMatchingForm />
</div>
{(state.loading || state.done) && (
<div className=" bg-white pt-4 rounded-md shadow-md">
<div className="pb-8 pt-6 px-6">
<h2 className="text-gray-600 font-semibold m-0">Progress log</h2>
<label>Running data import ...</label>
</div>
<div className="flex flex-col py-4 px-6 bg-slate-100 max-h-[500px] overflow-scroll reverse flex-col-reverse">
<div className="flex flex-col gap-2">
{streamLogs.map((log, i) => {
const decoded = JSON.parse(log);
return (
<div key={i} className="flex items-start gap-4">
<span className="text-xs text-slate-600 w-6 pt-1.5">{i + 1}</span>
<span
className={`${decoded.event} w-28 p-1.5 center rounded inline-flex text-[10px] font-bold`}
>
{decoded.event}
</span>
<span className="text-xs text-slate-600 pt-1.5">
{messageFactory(decoded)}
</span>
</div>
);
})}
</div>
</div>
</div>
)}
{state.errors && state.errors.length > 0 && (
<div className="error">
<p>Errors: </p>
<pre>{JSON.stringify(state.errors, null, 2)}</pre>
</div>
)}
{state.done && (
<div className="feedback-container">
<h1>Import completed</h1>
</>
)}
{(state.loading || state.done) && (
<div className=" bg-white pt-4 rounded-md shadow-md mt-8">
<div className="pb-8 pt-6 px-6">
<h2 className="text-gray-600 font-semibold m-0">Progress log</h2>
<label>{state.done ? 'Import completed' : 'Running data import ...'}</label>
</div>
<div className="flex flex-col py-4 px-6 bg-slate-100 max-h-[500px] overflow-scroll reverse flex-col-reverse">
<div className="flex flex-col gap-2">
{streamLogs.map((log, i) => {
const decoded = JSON.parse(log);
return (
<div key={i} className="flex items-start gap-4">
<span className="text-xs text-slate-600 w-6 pt-1.5">{i + 1}</span>
<span
className={`${decoded.event} w-28 p-1.5 center rounded inline-flex text-[10px] font-bold`}
>
{decoded.event}
</span>
<span className="text-xs text-slate-600 pt-1.5">{messageFactory(decoded)}</span>
</div>
);
})}
</div>
)}
</div>
</div>
)}
{state.errors && state.errors.length > 0 && (
<div className="error">
<p>Errors: </p>
<pre>{JSON.stringify(state.errors, null, 2)}</pre>
</div>
)}

{state.preflight && (
<div>
{state.preflight.validCount > 0 && (
<h2 className="text-green-600 bg-green-100 font-medium px-6 rounded-md py-4 m-0">
{state.preflight.validCount} rows are valid.
</h2>
)}
{state.preflight.errorCount > 0 && (
<div className="flex flex-col bg-white rounded-md shadow-md">
<h2 className="text-pink-600 font-medium px-6 border-0 border-b border-solid border-slate-200 py-4 m-0">
{state.preflight.errorCount} rows are invalid.
</h2>
{state.preflight && (
<div>
{state.preflight.validCount > 0 && (
<h2 className="text-green-600 bg-green-100 font-medium px-6 rounded-md py-4 m-0">
{state.preflight.validCount} rows are valid.
</h2>
)}
{state.preflight.errorCount > 0 && (
<div className="flex flex-col bg-white rounded-md shadow-md">
<h2 className="text-pink-600 font-medium px-6 border-0 border-b border-solid border-slate-200 py-4 m-0">
{state.preflight.errorCount} rows are invalid.
</h2>

<div className="flex flex-col max-h-[800px] overflow-scroll rounded-md shadow">
{state.preflight.errors.map((error, i) => (
<details
key={i}
className=" cursor-pointer py-1 border-0 border-b border-solid border-slate-200 px-4"
>
<summary className="grid w-full !grid-cols-3">
<div className="pl-4">
<span className="text-xs">Record {i + 1}</span> <br />
<span className="text-sm ">
{error.item?.name || (
<span className="italic">Missing Name</span>
)}
</span>
</div>
<div className="flex flex-col max-h-[800px] overflow-scroll rounded-md shadow">
{state.preflight.errors.map((error, i) => (
<details
key={i}
className=" cursor-pointer py-1 border-0 border-b border-solid border-slate-200 px-4"
>
<summary className="grid w-full !grid-cols-3">
<div className="pl-4">
<span className="text-xs">Record {i + 1}</span> <br />
<span className="text-sm ">
{error.item?.name || <span className="italic">Missing Name</span>}
</span>
</div>

<div className="col-span-2 flex gap-3 flex-wrap">
{error.errors.map((err, j) => (
<span
key={j}
className="text-xs bg-pink-100 text-pink-600 px-3 py-1 rounded font-medium"
>
{err.message}
</span>
))}
</div>
</summary>
<div>
{error.errors.map((err, j) => (
<li className="flex flex-col bg-slate-100 my-3 px-6 rounded-lg">
<p
key={j}
className="text-sm bg-pink-100 text-pink-600 px-3 py-1 rounded items-center"
>
{err.message}
</p>
<pre className="!text-xs">
{JSON.stringify(error.item, null, 2)}
</pre>
<pre className="text-xs">
{JSON.stringify(err, null, 2)}
</pre>
</li>
))}
</div>
</details>
))}
</div>
</div>
)}
<div className="col-span-2 flex gap-3 flex-wrap">
{error.errors.map((err, j) => (
<span
key={j}
className="text-xs bg-pink-100 text-pink-600 px-3 py-1 rounded font-medium"
>
{err.message}
</span>
))}
</div>
</summary>
<div>
{error.errors.map((err, j) => (
<li className="flex flex-col bg-slate-100 my-3 px-6 rounded-lg">
<p
key={j}
className="text-sm bg-pink-100 text-pink-600 px-3 py-1 rounded items-center"
>
{err.message}
</p>
<pre className="!text-xs">
{JSON.stringify(error.item, null, 2)}
</pre>
<pre className="text-xs">{JSON.stringify(err, null, 2)}</pre>
</li>
))}
</div>
</details>
))}
</div>
</div>
)}
</>
</div>
)}
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion components/crystallize-import/src/ui/import/components/FileChooser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export const FileChooser = ({ onChange }: FileChooserProps) => {
const { getRootProps, getInputProps } = useDropzone({ onDrop });

return (
<div className="p-4 bg-white shadow mt-8 min-h-[400px] flex items-stretch flex-col">
<div className="p-4 bg-white shadow mt-8 min-h-[400px] flex items-stretch flex-col rounded-md">
<div className="file-chooser" {...getRootProps()}>
<input {...getInputProps()} />
<img height={50} src="/file_upload.svg" alt="Click to Upload" />
Expand Down

0 comments on commit 673b570

Please sign in to comment.