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

🏗 Scaffold for tabulated volumes page WIP

Browse Source
This commit is contained in:
Rishi Ghan
2022-04-10 00:31:35 -07:00
parent 6a8d729ad9
commit 771400fdf3
4 changed files with 155 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/client/components/Dashboard/VolumeGroups.tsx
View File

@@ -21,14 +21,12 @@ export const VolumeGroups = (props): ReactElement => {
return ( return (
<section className="volumes-container mt-4"> <section className="volumes-container mt-4">
<div className="content"> <div className="content">
<span className="icon-text mb-1" onClick={navigateToVolumes}> <a className="mb-1" onClick={navigateToVolumes}>
<span> <span className="is-size-4 has-text-weight-semibold">Volumes</span>
<span className="title is-4">Volumes</span>
</span>
<span className="icon mt-1"> <span className="icon mt-1">
<i className="fa-solid fa-circle-chevron-right"></i> <i className="fa-solid fa-angle-right"></i>
</span> </span>
</span> </a>
<p className="subtitle is-7">Based on ComicVine Volume information</p> <p className="subtitle is-7">Based on ComicVine Volume information</p>
</div> </div>
<Masonry <Masonry

10
src/client/components/Dashboard/WantedComicsList.tsx
View File

@@ -27,14 +27,14 @@ export const WantedComicsList = ({
return ( return (
<> <>
<div className="content"> <div className="content">
<span className="icon-text mb-1" onClick={navigateToWantedComics}> <a className="mb-1" onClick={navigateToWantedComics}>
<span> <span className="is-size-4 has-text-weight-semibold">
<span className="title is-4">Wanted Comics</span> Wanted Comics
</span> </span>
<span className="icon mt-1"> <span className="icon mt-1">
<i className="fa-solid fa-circle-chevron-right"></i> <i className="fa-solid fa-angle-right"></i>
</span> </span>
</span> </a>
<p className="subtitle is-7"> <p className="subtitle is-7">
Comics marked as wanted from various sources. Comics marked as wanted from various sources.
</p> </p>

2
src/client/components/PullList/PullList.tsx
View File

@@ -14,7 +14,7 @@ export const PullList = (): ReactElement => {
useEffect(() => { useEffect(() => {
dispatch( dispatch(
getWeeklyPullList({ getWeeklyPullList({
startDate: "2022-4-8", startDate: "2022-4-22",
pageSize: "100", pageSize: "100",
currentPage: "1", currentPage: "1",
}), }),

146
src/client/components/Volumes/Volumes.tsx
View File

@@ -30,7 +30,151 @@ export const Volumes = (props): ReactElement => {
); );
}, []); }, []);
console.log(volumes); console.log(volumes);
return <div>as</div>;
const columnData = useMemo(
() => [
{
Header: "Volume Details",
id: "volumeDetails",
minWidth: 450,
accessor: (row) => {
return (
<div className="columns">
<div className="column">
<div className="comic-detail issue-metadata">
<dl>
<dd>
<div className="columns mt-2">
<div className="column is-3">
<Card
imageUrl={
row._source.sourcedMetadata.comicvine
.volumeInformation.image.thumb_url
}
orientation={"vertical"}
hasDetails={false}
// cardContainerStyle={{ maxWidth: 200 }}
/>
</div>
<div className="column">
<dl>
<dt>
<h6 className="name has-text-weight-medium mb-1">
{
row._source.sourcedMetadata.comicvine
.volumeInformation.name
}
</h6>
</dt>
<dd className="is-size-7">
published by{" "}
<span className="has-text-weight-semibold">
{
row._source.sourcedMetadata.comicvine
.volumeInformation.publisher.name
}
</span>
</dd>
<dd className="is-size-7">
<span>
{ellipsize(
convert(
row._source.sourcedMetadata.comicvine
.volumeInformation.description,
{
baseElements: {
selectors: ["p"],
},
},
),
120,
)}
</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">
Total Issues
</span>
<span className="tag is-success is-light">
{
row._source.sourcedMetadata.comicvine
.volumeInformation.count_of_issues
}
</span>
</span>
</div>
</div>
</dd>
</dl>
</div>
</div>
</dd>
</dl>
</div>
</div>
</div>
);
},
},
{
Header: "Download Status",
columns: [
{
Header: "Files",
accessor: "_source.acquisition.directconnect",
align: "right",
Cell: (props) => {
return (
<div
style={{
display: "flex",
// flexDirection: "column",
justifyContent: "center",
}}
>
{props.cell.value.length > 0 ? (
<span className="tag is-warning">
{props.cell.value.length}
</span>
) : null}
</div>
);
},
},
{
Header: "Type",
id: "Air",
},
{
Header: "Type",
id: "dcc",
},
],
},
],
[],
);
return (
<section className="container">
<div className="section">
{volumes.hits ? (
<div>
<div className="library">
<h1 className="title">Volumes</h1>
{/* Search bar */}
<SearchBar />
<T2Table rowData={volumes.hits.hits} columns={columnData} />
</div>
</div>
) : null}
</div>
</section>
);
}; };
export default Volumes; export default Volumes;