frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🪑 Cleaning up the table styles

Browse Source
This commit is contained in:
Rishi Ghan
2023-12-05 21:40:40 -06:00
parent 701d216e44
commit c74c443534
1 changed files with 67 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/client/components/Import/Import.tsx
View File

@@ -159,7 +159,7 @@ export const Import = (props: IProps): ReactElement => {
<div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-12 lg:px-8"> <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-12 lg:px-8">
<article <article
role="alert" role="alert"
className="rounded-md max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600" className="rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
> >
<div className="message-body"> <div className="message-body">
<p> <p>
@@ -195,9 +195,9 @@ export const Import = (props: IProps): ReactElement => {
<span>Start Import</span> <span>Start Import</span>
</button> </button>
</p> */} </p> */}
<div> <div className="mt-4">
<button <button
className="mt-4 flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-600 bg-green-300 px-5 py-3 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500" className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-600 bg-green-300 px-5 py-3 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
onClick={() => { onClick={() => {
initiateImport(); initiateImport();
importJobQueue.setStatus("running"); importJobQueue.setStatus("running");
@@ -212,7 +212,7 @@ export const Import = (props: IProps): ReactElement => {
{importJobQueue.status !== "drained" && {importJobQueue.status !== "drained" &&
!isUndefined(importJobQueue.status) && ( !isUndefined(importJobQueue.status) && (
<> <div className="mt-4">
<table className="table"> <table className="table">
<thead> <thead>
<tr> <tr>
@@ -259,53 +259,75 @@ export const Import = (props: IProps): ReactElement => {
<span className="has-text-weight-bold"> <span className="has-text-weight-bold">
{importJobQueue.mostRecentImport} {importJobQueue.mostRecentImport}
</span> </span>
</> </div>
)} )}
{/* Past imports */} {/* Past imports */}
{!isLoading && !isEmpty(data?.data) && ( {!isLoading && !isEmpty(data?.data) && (
<div className="max-w-screen-lg"> <div className="max-w-screen-lg">
<h3 className="text-xl">Past Imports</h3> <h3 className="text-xl mt-4">Past Imports</h3>
<table className="min-w-lg divide-y-2 divide-gray-200 dark:divide-gray-700 bg-slate text-md"> <div className="overflow-x-auto mt-4 rounded-lg border border-gray-200">
<thead> <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md">
<tr> <thead className="ltr:text-left rtl:text-right">
<th>Time Started</th> <tr>
<th>Session Id</th> <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900">
<th>Imported</th> Time Started
<th>Failed</th> </th>
</tr> <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900">
</thead> Session Id
</th>
<th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900">
Imported
</th>
<th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900">
Failed
</th>
</tr>
</thead>
<tbody> <tbody className="divide-y divide-gray-200">
{data?.data.map((jobResult, id) => { {data?.data.map((jobResult, id) => {
return ( return (
<tr key={id}> <tr key={id}>
<td> <td className="whitespace-nowrap px-4 py-2 text-gray-700 dark:text-slate-400">
{format( {format(
new Date(jobResult.earliestTimestamp), new Date(jobResult.earliestTimestamp),
"EEEE, hh:mma, do LLLL Y", "EEEE, hh:mma, do LLLL Y",
)} )}
</td> </td>
<td> <td className="whitespace-nowrap px-4 py-2 text-gray-700 dark:text-slate-400">
<span className="tag is-warning"> <span className="tag is-warning">
{jobResult.sessionId} {jobResult.sessionId}
</span> </span>
</td> </td>
<td> <td className="whitespace-nowrap px-4 py-2 text-gray-700 dark:text-slate-400">
<span className="tag is-success"> <span className="inline-flex items-center justify-center rounded-full bg-emerald-100 px-2 py-0.5 text-emerald-700">
{jobResult.completedJobs} <span className="h-5 w-6">
</span> <i className="icon-[solar--check-circle-line-duotone] h-5 w-5"></i>
</td> </span>
<td>
<span className="tag is-danger"> <p className="whitespace-nowrap text-sm">
{jobResult.failedJobs} {jobResult.completedJobs}
</span> </p>
</td> </span>
</tr> </td>
); <td className="whitespace-nowrap px-4 py-2 text-gray-700 dark:text-slate-400">
})} <span className="inline-flex items-center justify-center rounded-full bg-red-100 px-2 py-0.5 text-red-700">
</tbody> <span className="h-5 w-6">
</table> <i className="icon-[solar--close-circle-line-duotone] h-5 w-5"></i>
</span>
<p className="whitespace-nowrap text-sm">
{jobResult.failedJobs}
</p>
</span>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div> </div>
)} )}
</div> </div>