🏗️ Refactoring table for library
This commit is contained in:
@@ -53,39 +53,37 @@ export const Library = (): ReactElement => {
|
||||
|
||||
const ComicInfoXML = (value) => {
|
||||
return value.data ? (
|
||||
<div className="comicvine-metadata mt-3">
|
||||
<dl>
|
||||
<span className="tags has-addons is-size-7">
|
||||
<span className="tag">Series</span>
|
||||
<span className="tag is-warning is-light">
|
||||
{ellipsize(value.data.series[0], 25)}
|
||||
</span>
|
||||
<dl className="flex flex-col text-md p-4 mx-4 my-3 rounded-lg bg-amber-400 w-max">
|
||||
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--bookmark-square-minimalistic-bold-duotone] w-5 h-5"></i>
|
||||
</span>
|
||||
</dl>
|
||||
<dl>
|
||||
<div className="field is-grouped is-grouped-multiline">
|
||||
<div className="control">
|
||||
<span className="tags has-addons is-size-7 mt-2">
|
||||
<span className="tag">Pages</span>
|
||||
<span className="tag is-info is-light has-text-weight-bold">
|
||||
{value.data.pagecount[0]}
|
||||
</span>
|
||||
<span className="text-md text-slate-900 dark:text-slate-900">
|
||||
{ellipsize(value.data.series[0], 45)}
|
||||
</span>
|
||||
</span>
|
||||
<div className="field is-grouped is-grouped-multiline">
|
||||
<div className="control">
|
||||
<span className="tags has-addons is-size-7 mt-2">
|
||||
<span className="tag">Pages</span>
|
||||
<span className="tag is-info is-light has-text-weight-bold">
|
||||
{value.data.pagecount[0]}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="control">
|
||||
<span className="tags has-addons is-size-7 mt-2">
|
||||
<span className="tag">Issue</span>
|
||||
{!isNil(value.data.number) && (
|
||||
<span className="tag has-text-weight-bold is-success is-light">
|
||||
{parseInt(value.data.number[0], 10)}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div className="control">
|
||||
<span className="tags has-addons is-size-7 mt-2">
|
||||
<span className="tag">Issue</span>
|
||||
{!isNil(value.data.number) && (
|
||||
<span className="tag has-text-weight-bold is-success is-light">
|
||||
{parseInt(value.data.number[0], 10)}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
) : null;
|
||||
};
|
||||
|
||||
@@ -110,13 +108,11 @@ export const Library = (): ReactElement => {
|
||||
{
|
||||
header: "ComicInfo.xml",
|
||||
accessorKey: "_source.sourcedMetadata.comicInfo",
|
||||
align: "center",
|
||||
minWidth: 250,
|
||||
cell: (info) =>
|
||||
!isEmpty(info.getValue()) ? (
|
||||
<ComicInfoXML data={info.getValue()} />
|
||||
) : (
|
||||
<span className="tag mt-5">No ComicInfo.xml</span>
|
||||
<span className="text-sm p-4">No ComicInfo.xml</span>
|
||||
),
|
||||
},
|
||||
],
|
||||
@@ -128,12 +124,10 @@ export const Library = (): ReactElement => {
|
||||
header: "Publisher",
|
||||
accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
|
||||
cell: (info) => {
|
||||
return (
|
||||
!isNil(info.getValue()) && (
|
||||
<h6 className="is-size-7 has-text-weight-bold">
|
||||
{info.getValue().publisher.name}
|
||||
</h6>
|
||||
)
|
||||
return !isNil(info.getValue()) ? (
|
||||
<h6>{info.getValue().publisher.name}</h6>
|
||||
) : (
|
||||
"Chimin"
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
@@ -141,11 +141,23 @@ const renderCard = (props: ICardProps): ReactElement => {
|
||||
return (
|
||||
<>
|
||||
{/* thumbnail */}
|
||||
<div className="rounded-md overflow-hidden w-fit h-fit">
|
||||
<div className="rounded-lg overflow-hidden w-fit h-fit">
|
||||
<img src={props.imageUrl} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
case "card-with-info-panel":
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-row">
|
||||
{/* thumbnail */}
|
||||
<div className="rounded-md overflow-hidden w-fit h-fit">
|
||||
<img src={props.imageUrl} />
|
||||
</div>
|
||||
{/* myata-dyata */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
default:
|
||||
return <></>;
|
||||
|
||||
@@ -31,61 +31,49 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
|
||||
{
|
||||
name: "rawFileDetails",
|
||||
content: () => (
|
||||
<dl>
|
||||
<dl className="bg-[#647587] p-3 rounded-lg">
|
||||
<dt>
|
||||
<h6
|
||||
className="name has-text-weight-medium mb-1"
|
||||
style={props.titleStyle}
|
||||
>
|
||||
{issueName}
|
||||
</h6>
|
||||
<p className="text-lg">{issueName}</p>
|
||||
</dt>
|
||||
<dd className="is-size-7">
|
||||
Is a part of{" "}
|
||||
<span className="has-text-weight-semibold">
|
||||
{inferredMetadata.issue.name}
|
||||
</span>
|
||||
<dd className="text-sm">
|
||||
Is a part of <span>{inferredMetadata.issue.name}</span>
|
||||
</dd>
|
||||
|
||||
<dd className="is-size-7 mt-2">
|
||||
<div className="field is-grouped is-grouped-multiline">
|
||||
<div className="control">
|
||||
<span className="tags">
|
||||
<span
|
||||
className="tag is-success is-light has-text-weight-semibold"
|
||||
style={props.tagsStyle}
|
||||
>
|
||||
{rawFileDetails.extension}
|
||||
</span>
|
||||
<span
|
||||
className="tag is-success is-light has-text-weight-semibold"
|
||||
style={props.tagsStyle}
|
||||
>
|
||||
{rawFileDetails.mimeType}
|
||||
</span>
|
||||
<span
|
||||
className="tag is-success is-light"
|
||||
style={props.tagsStyle}
|
||||
>
|
||||
{prettyBytes(rawFileDetails.fileSize)}
|
||||
</span>
|
||||
{/* Issue number */}
|
||||
{inferredMetadata.issue.number && (
|
||||
<dd className="my-2">
|
||||
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="control">
|
||||
{inferredMetadata.issue.number && (
|
||||
<div className="tags has-addons">
|
||||
<span className="tag is-light" style={props.tagsStyle}>
|
||||
Issue #
|
||||
</span>
|
||||
<span className="tag is-warning" style={props.tagsStyle}>
|
||||
{inferredMetadata.issue.number}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-md text-slate-900 dark:text-slate-900">
|
||||
{inferredMetadata.issue.number}
|
||||
</span>
|
||||
</span>
|
||||
</dd>
|
||||
)}
|
||||
<dd className="flex flex-row gap-2 w-max">
|
||||
{/* File extension */}
|
||||
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<span className="text-md text-slate-500 dark:text-slate-900">
|
||||
{rawFileDetails.mimeType}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* size */}
|
||||
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
|
||||
</span>
|
||||
|
||||
<span className="text-md text-slate-500 dark:text-slate-900">
|
||||
{prettyBytes(rawFileDetails.fileSize)}
|
||||
</span>
|
||||
</span>
|
||||
</dd>
|
||||
</dl>
|
||||
),
|
||||
@@ -208,25 +196,14 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="column" style={props.containerStyle}>
|
||||
<div className="comic-detail issue-metadata">
|
||||
<dl>
|
||||
<dd>
|
||||
<div className="columns mt-2">
|
||||
<div className="column is-3">
|
||||
<Card
|
||||
imageUrl={url}
|
||||
orientation={"vertical"}
|
||||
hasDetails={false}
|
||||
imageStyle={props.imageStyle}
|
||||
// cardContainerStyle={{ maxWidth: 200 }}
|
||||
/>
|
||||
</div>
|
||||
<div className="column">{metadataPanel.content()}</div>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div className="flex gap-5 my-3">
|
||||
<Card
|
||||
imageUrl={url}
|
||||
orientation={"cover-only"}
|
||||
hasDetails={false}
|
||||
imageStyle={props.imageStyle}
|
||||
/>
|
||||
<div>{metadataPanel.content()}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -126,14 +126,14 @@ export const T2Table = (tableOptions): ReactElement => {
|
||||
</nav>
|
||||
</div>
|
||||
<table className="table-auto">
|
||||
<thead>
|
||||
<thead className="sticky top-0 bg-slate-200 dark:bg-slate-500">
|
||||
{table.getHeaderGroups().map((headerGroup, idx) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header, idx) => (
|
||||
<th
|
||||
key={header.id}
|
||||
colSpan={header.colSpan}
|
||||
className="sticky top-0 px-6 py-3"
|
||||
className="px-3 py-3"
|
||||
>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
@@ -151,11 +151,16 @@ export const T2Table = (tableOptions): ReactElement => {
|
||||
{table.getRowModel().rows.map((row, idx) => {
|
||||
return (
|
||||
<tr key={row.id} onClick={() => rowClickHandler(row)}>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
))}
|
||||
{row.getVisibleCells().map((cell) => {
|
||||
return (
|
||||
<td key={cell.id} className="align-top">
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user