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

🏗️ Refactoring table for library

Browse Source
This commit is contained in:
Rishi Ghan
2023-12-18 18:02:15 -05:00
parent 1180a2b42c
commit b1d8951842
4 changed files with 103 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/client/components/Library/Library.tsx
View File

@@ -53,39 +53,37 @@ export const Library = (): ReactElement => {
const ComicInfoXML = (value) => { const ComicInfoXML = (value) => {
return value.data ? ( return value.data ? (
<div className="comicvine-metadata mt-3"> <dl className="flex flex-col text-md p-4 mx-4 my-3 rounded-lg bg-amber-400 w-max">
<dl> <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="tags has-addons is-size-7"> <span className="pr-1 pt-1">
<span className="tag">Series</span> <i className="icon-[solar--bookmark-square-minimalistic-bold-duotone] w-5 h-5"></i>
<span className="tag is-warning is-light">
{ellipsize(value.data.series[0], 25)}
</span>
</span> </span>
</dl> <span className="text-md text-slate-900 dark:text-slate-900">
<dl> {ellipsize(value.data.series[0], 45)}
<div className="field is-grouped is-grouped-multiline"> </span>
<div className="control"> </span>
<span className="tags has-addons is-size-7 mt-2"> <div className="field is-grouped is-grouped-multiline">
<span className="tag">Pages</span> <div className="control">
<span className="tag is-info is-light has-text-weight-bold"> <span className="tags has-addons is-size-7 mt-2">
{value.data.pagecount[0]} <span className="tag">Pages</span>
</span> <span className="tag is-info is-light has-text-weight-bold">
{value.data.pagecount[0]}
</span> </span>
</div> </span>
<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> </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; ) : null;
}; };
@@ -110,13 +108,11 @@ export const Library = (): ReactElement => {
{ {
header: "ComicInfo.xml", header: "ComicInfo.xml",
accessorKey: "_source.sourcedMetadata.comicInfo", accessorKey: "_source.sourcedMetadata.comicInfo",
align: "center",
minWidth: 250,
cell: (info) => cell: (info) =>
!isEmpty(info.getValue()) ? ( !isEmpty(info.getValue()) ? (
<ComicInfoXML data={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", header: "Publisher",
accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation", accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
cell: (info) => { cell: (info) => {
return ( return !isNil(info.getValue()) ? (
!isNil(info.getValue()) && ( <h6>{info.getValue().publisher.name}</h6>
<h6 className="is-size-7 has-text-weight-bold"> ) : (
{info.getValue().publisher.name} "Chimin"
</h6>
)
); );
}, },
}, },

14
src/client/components/shared/Carda.tsx
View File

@@ -141,11 +141,23 @@ const renderCard = (props: ICardProps): ReactElement => {
return ( return (
<> <>
{/* thumbnail */} {/* 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} /> <img src={props.imageUrl} />
</div> </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: default:
return <></>; return <></>;

113
src/client/components/shared/MetadataPanel.tsx
View File

@@ -31,61 +31,49 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
{ {
name: "rawFileDetails", name: "rawFileDetails",
content: () => ( content: () => (
<dl> <dl className="bg-[#647587] p-3 rounded-lg">
<dt> <dt>
<h6 <p className="text-lg">{issueName}</p>
className="name has-text-weight-medium mb-1"
style={props.titleStyle}
>
{issueName}
</h6>
</dt> </dt>
<dd className="is-size-7"> <dd className="text-sm">
Is a part of{" "} Is a part of <span>{inferredMetadata.issue.name}</span>
<span className="has-text-weight-semibold">
{inferredMetadata.issue.name}
</span>
</dd> </dd>
<dd className="is-size-7 mt-2"> {/* Issue number */}
<div className="field is-grouped is-grouped-multiline"> {inferredMetadata.issue.number && (
<div className="control"> <dd className="my-2">
<span className="tags"> <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 <span className="pr-1 pt-1">
className="tag is-success is-light has-text-weight-semibold" <i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
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>
</span> </span>
</div> <span className="text-md text-slate-900 dark:text-slate-900">
<div className="control"> {inferredMetadata.issue.number}
{inferredMetadata.issue.number && ( </span>
<div className="tags has-addons"> </span>
<span className="tag is-light" style={props.tagsStyle}> </dd>
Issue # )}
</span> <dd className="flex flex-row gap-2 w-max">
<span className="tag is-warning" style={props.tagsStyle}> {/* File extension */}
{inferredMetadata.issue.number} <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> <span className="pr-1 pt-1">
</div> <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
)} </span>
</div>
</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> </dd>
</dl> </dl>
), ),
@@ -208,25 +196,14 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
}); });
return ( return (
<div className="column" style={props.containerStyle}> <div className="flex gap-5 my-3">
<div className="comic-detail issue-metadata"> <Card
<dl> imageUrl={url}
<dd> orientation={"cover-only"}
<div className="columns mt-2"> hasDetails={false}
<div className="column is-3"> imageStyle={props.imageStyle}
<Card />
imageUrl={url} <div>{metadataPanel.content()}</div>
orientation={"vertical"}
hasDetails={false}
imageStyle={props.imageStyle}
// cardContainerStyle={{ maxWidth: 200 }}
/>
</div>
<div className="column">{metadataPanel.content()}</div>
</div>
</dd>
</dl>
</div>
</div> </div>
); );
}; };

19
src/client/components/shared/T2Table.tsx
View File

@@ -126,14 +126,14 @@ export const T2Table = (tableOptions): ReactElement => {
</nav> </nav>
</div> </div>
<table className="table-auto"> <table className="table-auto">
<thead> <thead className="sticky top-0 bg-slate-200 dark:bg-slate-500">
{table.getHeaderGroups().map((headerGroup, idx) => ( {table.getHeaderGroups().map((headerGroup, idx) => (
<tr key={headerGroup.id}> <tr key={headerGroup.id}>
{headerGroup.headers.map((header, idx) => ( {headerGroup.headers.map((header, idx) => (
<th <th
key={header.id} key={header.id}
colSpan={header.colSpan} colSpan={header.colSpan}
className="sticky top-0 px-6 py-3" className="px-3 py-3"
> >
{header.isPlaceholder {header.isPlaceholder
? null ? null
@@ -151,11 +151,16 @@ export const T2Table = (tableOptions): ReactElement => {
{table.getRowModel().rows.map((row, idx) => { {table.getRowModel().rows.map((row, idx) => {
return ( return (
<tr key={row.id} onClick={() => rowClickHandler(row)}> <tr key={row.id} onClick={() => rowClickHandler(row)}>
{row.getVisibleCells().map((cell) => ( {row.getVisibleCells().map((cell) => {
<td key={cell.id}> return (
{flexRender(cell.column.columnDef.cell, cell.getContext())} <td key={cell.id} className="align-top">
</td> {flexRender(
))} cell.column.columnDef.cell,
cell.getContext(),
)}
</td>
);
})}
</tr> </tr>
); );
})} })}