🖼 Some UI fixes
This commit is contained in:
@@ -4,14 +4,14 @@ import ZeroState from "./ZeroState";
|
||||
import { RecentlyImported } from "./RecentlyImported";
|
||||
import { WantedComicsList } from "./WantedComicsList";
|
||||
import { VolumeGroups } from "./VolumeGroups";
|
||||
import { LibraryStatistics } from "./LibraryStatistics";
|
||||
import { PullList } from "./PullList";
|
||||
import {
|
||||
fetchVolumeGroups,
|
||||
getComicBooks,
|
||||
} from "../../actions/fileops.actions";
|
||||
import { getLibraryStatistics } from "../../actions/comicinfo.actions";
|
||||
import { isEmpty, isUndefined, map } from "lodash";
|
||||
import prettyBytes from "pretty-bytes";
|
||||
import { isEmpty } from "lodash";
|
||||
|
||||
export const Dashboard = (): ReactElement => {
|
||||
const dispatch = useDispatch();
|
||||
@@ -66,115 +66,7 @@ export const Dashboard = (): ReactElement => {
|
||||
<PullList issues={recentComics} />
|
||||
|
||||
{/* stats */}
|
||||
|
||||
<h4 className="title is-4 mt-2">Statistics</h4>
|
||||
<div className="columns is-multiline">
|
||||
<div className="column is-narrow is-two-quarter">
|
||||
<dl className="box">
|
||||
<dd className="is-size-4">
|
||||
<span className="has-text-weight-bold">
|
||||
{libraryStatistics.totalDocuments}
|
||||
</span>{" "}
|
||||
files
|
||||
</dd>
|
||||
<dd className="is-size-4">
|
||||
Library size
|
||||
<span className="has-text-weight-bold">
|
||||
{" "}
|
||||
{libraryStatistics.comicDirectorySize &&
|
||||
prettyBytes(libraryStatistics.comicDirectorySize)}
|
||||
</span>
|
||||
</dd>
|
||||
{!isUndefined(libraryStatistics.statistics) &&
|
||||
!isEmpty(libraryStatistics.statistics[0].issues) && (
|
||||
<dd className="is-size-6">
|
||||
<span className="has-text-weight-bold">
|
||||
{libraryStatistics.statistics[0].issues.length}
|
||||
</span>{" "}
|
||||
tagged with ComicVine
|
||||
</dd>
|
||||
)}
|
||||
{!isUndefined(libraryStatistics.statistics) &&
|
||||
!isEmpty(
|
||||
libraryStatistics.statistics[0].issuesWithComicInfoXML,
|
||||
) && (
|
||||
<dd className="is-size-6">
|
||||
<span className="has-text-weight-bold">
|
||||
{
|
||||
libraryStatistics.statistics[0]
|
||||
.issuesWithComicInfoXML.length
|
||||
}
|
||||
</span>{" "}
|
||||
with
|
||||
<span className="tag is-warning has-text-weight-bold mr-2 ml-1">
|
||||
ComicInfo.xml
|
||||
</span>
|
||||
</dd>
|
||||
)}
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div className="p-3 column is-one-quarter">
|
||||
<dl className="box">
|
||||
<dd className="is-size-6">
|
||||
<span className="has-text-weight-bold"></span> Issues
|
||||
</dd>
|
||||
<dd className="is-size-6">
|
||||
<span className="has-text-weight-bold">304</span> Volumes
|
||||
</dd>
|
||||
<dd className="is-size-6">
|
||||
{!isUndefined(libraryStatistics.statistics) &&
|
||||
!isEmpty(libraryStatistics.statistics[0].fileTypes) &&
|
||||
map(
|
||||
libraryStatistics.statistics[0].fileTypes,
|
||||
(fileType, idx) => {
|
||||
return (
|
||||
<span key={idx}>
|
||||
<span className="has-text-weight-bold">
|
||||
{fileType.data.length}
|
||||
</span>
|
||||
<span className="tag is-warning has-text-weight-bold mr-2 ml-1">
|
||||
{fileType._id}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
{/* file types */}
|
||||
<div className="p-3 column is-two-fifths">
|
||||
{/* publisher with most issues */}
|
||||
<dl className="box">
|
||||
{!isUndefined(libraryStatistics.statistics) &&
|
||||
!isEmpty(
|
||||
libraryStatistics.statistics[0]
|
||||
.publisherWithMostComicsInLibrary[0],
|
||||
) && (
|
||||
<dd className="is-size-6">
|
||||
<span className="has-text-weight-bold">
|
||||
{
|
||||
libraryStatistics.statistics[0]
|
||||
.publisherWithMostComicsInLibrary[0]._id
|
||||
}
|
||||
</span>
|
||||
{" has the most issues "}
|
||||
<span className="has-text-weight-bold">
|
||||
{
|
||||
libraryStatistics.statistics[0]
|
||||
.publisherWithMostComicsInLibrary[0].count
|
||||
}
|
||||
</span>
|
||||
</dd>
|
||||
)}
|
||||
<dd className="is-size-6">
|
||||
<span className="has-text-weight-bold">304</span> Volumes
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<LibraryStatistics stats={libraryStatistics} />
|
||||
<WantedComicsList comics={wantedComics} />
|
||||
<RecentlyImported comicBookCovers={recentComics} />
|
||||
<VolumeGroups volumeGroups={volumeGroups} />
|
||||
|
||||
115
src/client/components/Dashboard/LibraryStatistics.tsx
Normal file
115
src/client/components/Dashboard/LibraryStatistics.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import React, { ReactElement, useEffect } from "react";
|
||||
import prettyBytes from "pretty-bytes";
|
||||
import { isEmpty, isUndefined, map } from "lodash";
|
||||
|
||||
export const LibraryStatistics = (
|
||||
props: ILibraryStatisticsProps,
|
||||
): ReactElement => {
|
||||
// const { stats } = props;
|
||||
console.log(props);
|
||||
return (
|
||||
<>
|
||||
<h4 className="title is-4 mt-2">Statistics</h4>
|
||||
<div className="columns is-multiline">
|
||||
<div className="column is-narrow is-two-quarter">
|
||||
<dl className="box">
|
||||
<dd className="is-size-4">
|
||||
<span className="has-text-weight-bold">
|
||||
{props.stats.totalDocuments}
|
||||
</span>{" "}
|
||||
files
|
||||
</dd>
|
||||
<dd className="is-size-4">
|
||||
Library size
|
||||
<span className="has-text-weight-bold">
|
||||
{" "}
|
||||
{props.stats.comicDirectorySize &&
|
||||
prettyBytes(props.stats.comicDirectorySize)}
|
||||
</span>
|
||||
</dd>
|
||||
{!isUndefined(props.stats.statistics) &&
|
||||
!isEmpty(props.stats.statistics[0].issues) && (
|
||||
<dd className="is-size-6">
|
||||
<span className="has-text-weight-bold">
|
||||
{props.stats.statistics[0].issues.length}
|
||||
</span>{" "}
|
||||
tagged with ComicVine
|
||||
</dd>
|
||||
)}
|
||||
{!isUndefined(props.stats.statistics) &&
|
||||
!isEmpty(props.stats.statistics[0].issuesWithComicInfoXML) && (
|
||||
<dd className="is-size-6">
|
||||
<span className="has-text-weight-bold">
|
||||
{props.stats.statistics[0].issuesWithComicInfoXML.length}
|
||||
</span>{" "}
|
||||
with
|
||||
<span className="tag is-warning has-text-weight-bold mr-2 ml-1">
|
||||
ComicInfo.xml
|
||||
</span>
|
||||
</dd>
|
||||
)}
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div className="p-3 column is-one-quarter">
|
||||
<dl className="box">
|
||||
<dd className="is-size-6">
|
||||
<span className="has-text-weight-bold"></span> Issues
|
||||
</dd>
|
||||
<dd className="is-size-6">
|
||||
<span className="has-text-weight-bold">304</span> Volumes
|
||||
</dd>
|
||||
<dd className="is-size-6">
|
||||
{!isUndefined(props.stats.statistics) &&
|
||||
!isEmpty(props.stats.statistics[0].fileTypes) &&
|
||||
map(props.stats.statistics[0].fileTypes, (fileType, idx) => {
|
||||
return (
|
||||
<span key={idx}>
|
||||
<span className="has-text-weight-bold">
|
||||
{fileType.data.length}
|
||||
</span>
|
||||
<span className="tag is-warning has-text-weight-bold mr-2 ml-1">
|
||||
{fileType._id}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
{/* file types */}
|
||||
<div className="p-3 column is-two-fifths">
|
||||
{/* publisher with most issues */}
|
||||
<dl className="box">
|
||||
{!isUndefined(props.stats.statistics) &&
|
||||
!isEmpty(
|
||||
props.stats.statistics[0].publisherWithMostComicsInLibrary[0],
|
||||
) && (
|
||||
<dd className="is-size-6">
|
||||
<span className="has-text-weight-bold">
|
||||
{
|
||||
props.stats.statistics[0]
|
||||
.publisherWithMostComicsInLibrary[0]._id
|
||||
}
|
||||
</span>
|
||||
{" has the most issues "}
|
||||
<span className="has-text-weight-bold">
|
||||
{
|
||||
props.stats.statistics[0]
|
||||
.publisherWithMostComicsInLibrary[0].count
|
||||
}
|
||||
</span>
|
||||
</dd>
|
||||
)}
|
||||
<dd className="is-size-6">
|
||||
<span className="has-text-weight-bold">304</span> Volumes
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LibraryStatistics;
|
||||
@@ -23,7 +23,14 @@ export const WantedComicsList = ({
|
||||
return (
|
||||
<>
|
||||
<div className="content">
|
||||
<h4 className="title is-4">Wanted Comics</h4>
|
||||
<span className="icon-text mb-1">
|
||||
<span>
|
||||
<span className="title is-4">Wanted Comics</span>
|
||||
</span>
|
||||
<span className="icon mt-1">
|
||||
<i className="fa-regular fa-angle-right"></i>
|
||||
</span>
|
||||
</span>
|
||||
<p className="subtitle is-7">
|
||||
Comics marked as wanted from various sources.
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user