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

🪑 Many changes to DC++ downloads table

Browse Source
This commit is contained in:
Rishi Ghan
2023-12-27 23:45:48 -05:00
parent d647feff4d
commit 63ab0784e3
9 changed files with 107 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/client/components/ComicDetail/AcquisitionPanel.tsx
View File

@@ -323,52 +323,45 @@ export const AcquisitionPanel = (
{!isNil(airDCPPSearchInstance) && {!isNil(airDCPPSearchInstance) &&
!isEmpty(airDCPPSearchInfo) && !isEmpty(airDCPPSearchInfo) &&
!isNil(hubs) && ( !isNil(hubs) && (
<div className="columns"> <div className="flex flex-row gap-3 my-5 font-hasklig">
<div className="column is-one-quarter is-size-7"> <div className="block max-w-sm h-fit p-6 text-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
<div className="card"> <dl>
<div className="card-content"> <dt>
<dl> <div className="mb-1">
<dt> {hubs.map((value, idx) => (
<div className="tags mb-1"> <span className="tag is-warning" key={idx}>
{hubs.map((value, idx) => ( {value.identity.name}
<span className="tag is-warning" key={idx}>
{value.identity.name}
</span>
))}
</div>
</dt>
<dt>
Query:
<span className="has-text-weight-semibold">
{airDCPPSearchInfo.query.pattern}
</span> </span>
</dt> ))}
<dd> </div>
Extensions: </dt>
<span className="has-text-weight-semibold">
{airDCPPSearchInfo.query.extensions.join(", ")} <dt>
</span> Query:
</dd> <span className="has-text-weight-semibold">
<dd> {airDCPPSearchInfo.query.pattern}
File type: </span>
<span className="has-text-weight-semibold"> </dt>
{airDCPPSearchInfo.query.file_type} <dd>
</span> Extensions:
</dd> <span className="has-text-weight-semibold">
</dl> {airDCPPSearchInfo.query.extensions.join(", ")}
</div> </span>
</div> </dd>
<dd>
File type:
<span className="has-text-weight-semibold">
{airDCPPSearchInfo.query.file_type}
</span>
</dd>
</dl>
</div> </div>
<div className="column is-one-quarter is-size-7"> <div className="block max-w-sm p-6 h-fit text-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
<div className="card"> <dl>
<div className="card-content"> <dt>Search Instance: {airDCPPSearchInstance.id}</dt>
<dl> <dt>Owned by {airDCPPSearchInstance.owner}</dt>
<dt>Search Instance: {airDCPPSearchInstance.id}</dt> <dd>Expires in: {airDCPPSearchInstance.expires_in}</dd>
<dt>Owned by {airDCPPSearchInstance.owner}</dt> </dl>
<dd>Expires in: {airDCPPSearchInstance.expires_in}</dd>
</dl>
</div>
</div>
</div> </div>
</div> </div>
)} )}
@@ -376,8 +369,8 @@ export const AcquisitionPanel = (
{/* AirDC++ results */} {/* AirDC++ results */}
<div className="columns"> <div className="columns">
{!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? ( {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
<div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200"> <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200 dark:border-gray-500">
<table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md"> <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-500 text-md">
<thead> <thead>
<tr> <tr>
<th className="whitespace-nowrap px-2 py-2 font-medium text-gray-900 dark:text-slate-200"> <th className="whitespace-nowrap px-2 py-2 font-medium text-gray-900 dark:text-slate-200">
@@ -394,13 +387,15 @@ export const AcquisitionPanel = (
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-slate-500"> <tbody className="divide-y divide-slate-100 dark:divide-gray-500">
{map(airDCPPSearchResults, ({ result }, idx) => { {map(airDCPPSearchResults, ({ result }, idx) => {
return ( return (
<tr <tr
key={idx} key={idx}
className={ className={
!isNil(result.dupe) ? "bg-purple-50" : "w-fit text-sm" !isNil(result.dupe)
? "bg-gray-100 dark:bg-gray-700"
: "w-fit text-sm"
} }
> >
<td className="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-slate-300"> <td className="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-slate-300">
@@ -415,7 +410,15 @@ export const AcquisitionPanel = (
<dd> <dd>
<div className="inline-flex flex-row gap-2"> <div className="inline-flex flex-row gap-2">
{!isNil(result.dupe) ? ( {!isNil(result.dupe) ? (
<span className="tag is-warning">Dupe</span> <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--copy-bold-duotone] w-5 h-5"></i>
</span>
<span className="text-md text-slate-500 dark:text-slate-900">
Dupe
</span>
</span>
) : null} ) : null}
{/* Nicks */} {/* Nicks */}
@@ -468,9 +471,9 @@ export const AcquisitionPanel = (
</span> </span>
</span> </span>
</td> </td>
<td> <td className="px-2">
<button <button
className="button is-small is-light is-success" className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
onClick={() => onClick={() =>
download( download(
airDCPPSearchInstance.id, airDCPPSearchInstance.id,
@@ -483,10 +486,10 @@ export const AcquisitionPanel = (
) )
} }
> >
<span className="icon"> <span className="text-xs">Download</span>
<i className="fas fa-file-download"></i> <span className="w-5 h-5">
<i className="h-5 w-5 icon-[solar--download-bold-duotone]"></i>
</span> </span>
<span>Download </span>
</button> </button>
</td> </td>
</tr> </tr>

17
src/client/components/ComicDetail/ActionMenu/Menu.tsx
View File

@@ -70,27 +70,28 @@ export const Menu = (props): ReactElement => {
} }
}; };
const customStyles = { const customStyles = {
placeholder: (base) => ({
...base,
color: "black",
}),
option: (base, { data, isDisabled, isFocused, isSelected }) => { option: (base, { data, isDisabled, isFocused, isSelected }) => {
return { return {
...base, ...base,
backgroundColor: isFocused ? "gray" : "black", backgroundColor: isFocused ? "gray" : "rgb(156, 163, 175)",
}; };
}, },
control: (base) => ({ control: (base) => ({
...base, ...base,
backgroundColor: "black", backgroundColor: "rgb(156, 163, 175)",
border: "1px solid #CCC", color: "black",
border: "1px solid rgb(156, 163, 175)",
}), }),
}; };
return ( return (
<Select <Select
components={{ Placeholder }} components={{ Placeholder }}
placeholder={ placeholder={<span>Select Action</span>}
<span>
<i className="fa-solid fa-list"></i> Actions
</span>
}
styles={customStyles} styles={customStyles}
name="actions" name="actions"
isSearchable={false} isSearchable={false}

31
src/client/components/ComicDetail/ComicDetail.tsx
View File

@@ -224,7 +224,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
{ {
id: 5, id: 5,
icon: ( icon: (
<i className="h-5 w-5 icon-[solar--magnet-bold-duotone] text-slate-500 dark:text-slate-300" /> <span className="inline-flex flex-row">
<i className="h-5 w-5 icon-[solar--magnet-bold-duotone] text-slate-500 dark:text-slate-300" />
</span>
), ),
name: "Torrent Search", name: "Torrent Search",
content: <>Torrents</>, content: <>Torrents</>,
@@ -233,7 +235,15 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
{ {
id: 6, id: 6,
icon: ( icon: (
<i className="h-5 w-5 icon-[solar--download-bold-duotone] text-slate-500 dark:text-slate-300" /> <span className="inline-flex flex-row">
{/* download count */}
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="text-md text-slate-500 dark:text-slate-900">
34
</span>
</span>
<i className="h-5 w-5 icon-[solar--download-bold-duotone] text-slate-500 dark:text-slate-300" />
</span>
), ),
name: "Downloads", name: "Downloads",
content: content:
@@ -283,7 +293,15 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
created_at: createdAt, created_at: createdAt,
updated_at: updatedAt, updated_at: updatedAt,
}} }}
/> >
{/* action dropdown */}
<div className="mt-1 flex flex-row gap-2 w-full">
<Menu
data={data.data}
handlers={{ setSlidingPanelContentId, setVisible }}
/>
</div>
</RawFileDetails>
{/* <Modal {/* <Modal
style={{ content: { marginTop: "2rem" } }} style={{ content: { marginTop: "2rem" } }}
@@ -305,13 +323,6 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
</Modal> */} </Modal> */}
</div> </div>
)} )}
{/* action dropdown */}
{/* <div className="mt-4 is-size-7">
<Menu
data={data.data}
handlers={{ setSlidingPanelContentId, setVisible }}
/>
</div> */}
</div> </div>
</div> </div>

1
src/client/components/ComicDetail/DownloadsPanel.tsx
View File

@@ -61,7 +61,6 @@ export const DownloadsPanel = (
}, [comicObject]); }, [comicObject]);
const Bundles = (props) => { const Bundles = (props) => {
console.log("asdas", props);
return ( return (
<div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200"> <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200">
<table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md"> <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md">

49
src/client/components/ComicDetail/RawFileDetails.tsx
View File

@@ -7,7 +7,6 @@ import { format, parseISO } from "date-fns";
export const RawFileDetails = (props): ReactElement => { export const RawFileDetails = (props): ReactElement => {
const { rawFileDetails, inferredMetadata, created_at, updated_at } = const { rawFileDetails, inferredMetadata, created_at, updated_at } =
props.data; props.data;
const PaperClipIcon = () => <></>;
return ( return (
<> <>
<div className="max-w-2xl ml-5"> <div className="max-w-2xl ml-5">
@@ -89,52 +88,7 @@ export const RawFileDetails = (props): ReactElement => {
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400"> <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
Actions Actions
</dt> </dt>
<dd className="mt-1 text-sm text-gray-900"> <dd className="mt-1 text-sm text-gray-900">{props.children}</dd>
<ul
role="list"
className="divide-y divide-gray-200 rounded-md border border-gray-200"
>
<li className="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
<div className="flex w-0 flex-1 items-center">
<PaperClipIcon
className="h-5 w-5 flex-shrink-0 text-gray-400"
aria-hidden="true"
/>
<span className="ml-2 w-0 flex-1 truncate">
resume_back_end_developer.pdf
</span>
</div>
<div className="ml-4 flex-shrink-0">
<a
href="#"
className="font-medium text-indigo-600 hover:text-indigo-500"
>
Download
</a>
</div>
</li>
<li className="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
<div className="flex w-0 flex-1 items-center">
{/* Read comic button */}
<button
className="button is-success is-light"
onClick={() => {}}
>
<i className="fa-solid fa-book-open mr-2"></i>
Read
</button>
</div>
<div className="ml-4 flex-shrink-0">
<a
href="#"
className="font-medium text-indigo-600 hover:text-indigo-500"
>
Download
</a>
</div>
</li>
</ul>
</dd>
</div> </div>
</dl> </dl>
</div> </div>
@@ -169,4 +123,5 @@ RawFileDetails.propTypes = {
created_at: PropTypes.string, created_at: PropTypes.string,
updated_at: PropTypes.string, updated_at: PropTypes.string,
}), }),
children: PropTypes.any,
}; };

29
src/client/components/ComicDetail/TabControls.tsx
View File

@@ -24,21 +24,22 @@ export const TabControls = (props): ReactElement => {
onClick={() => setActive(id)} onClick={() => setActive(id)}
> >
{/* Downloads tab and count badge */} {/* Downloads tab and count badge */}
{/* <a> <>
{id === 6 && !isNil(acquisition.directconnect) ? ( {id === 6 && !isNil(acquisition.directconnect) ? (
<span className="download-icon-labels"> <span className="inline-flex flex-row">
<i className="fa-solid fa-download"></i> {/* download count */}
<span className="tag downloads-count is-info is-light"> <span className="inline-flex mx-2 items-center bg-slate-200 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
{acquisition.directconnect.downloads.length} <span className="text-md text-slate-500 dark:text-slate-900">
{acquisition.directconnect.downloads.length}
</span>
</span>
<i className="h-5 w-5 icon-[solar--download-bold-duotone] text-slate-500 dark:text-slate-300" />
</span> </span>
</span> ) : (
) : ( <span className="w-5 h-5">{icon}</span>
<span className="icon is-small">{icon}</span> )}
)} {name}
{name} </>
</a> */}
<span className="w-5 h-5">{icon}</span>
{name}
</a> </a>
))} ))}
</nav> </nav>

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

@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
import { isEmpty, isNil, isUndefined } from "lodash"; import { isEmpty, isNil, isUndefined } from "lodash";
import MetadataPanel from "../shared/MetadataPanel"; import MetadataPanel from "../shared/MetadataPanel";
import T2Table from "../shared/T2Table"; import T2Table from "../shared/T2Table";
import SearchBar from "../Library/SearchBar";
import ellipsize from "ellipsize"; import ellipsize from "ellipsize";
import { useQuery, keepPreviousData } from "@tanstack/react-query"; import { useQuery, keepPreviousData } from "@tanstack/react-query";
import axios from "axios"; import axios from "axios";
@@ -20,6 +21,7 @@ export const Library = (): ReactElement => {
// Default page state // Default page state
// offset: 0 // offset: 0
const [offset, setOffset] = useState(0); const [offset, setOffset] = useState(0);
const [searchResults, setSearchResults] = useState([]);
// Method to fetch paginated issues // Method to fetch paginated issues
const fetchIssues = async (searchQuery, offset, type) => { const fetchIssues = async (searchQuery, offset, type) => {
@@ -216,6 +218,7 @@ export const Library = (): ReactElement => {
{!isUndefined(searchResults?.hits) ? ( {!isUndefined(searchResults?.hits) ? (
<div> <div>
<div className="library"> <div className="library">
<SearchBar />
<T2Table <T2Table
totalPages={searchResults.hits.total.value} totalPages={searchResults.hits.total.value}
columns={columns} columns={columns}

2
src/client/components/Library/SearchBar.tsx
View File

@@ -6,7 +6,6 @@ import { searchIssue } from "../../actions/fileops.actions";
export const SearchBar = (): ReactElement => { export const SearchBar = (): ReactElement => {
const handleSubmit = useCallback((e) => { const handleSubmit = useCallback((e) => {
// dispatch(
// searchIssue( // searchIssue(
// { // {
// query: { // query: {
@@ -22,7 +21,6 @@ export const SearchBar = (): ReactElement => {
// trigger: "libraryPage", // trigger: "libraryPage",
// }, // },
// ), // ),
// );
}, []); }, []);
return ( return (
<Form <Form

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

@@ -1,6 +1,5 @@
import React, { ReactElement, useMemo, useState } from "react"; import React, { ReactElement, useMemo, useState } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import SearchBar from "../Library/SearchBar";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { import {
ColumnDef, ColumnDef,
@@ -74,8 +73,6 @@ export const T2Table = (tableOptions): ReactElement => {
<div> <div>
{/* Search bar */} {/* Search bar */}
<div className="flex flex-row gap-2 justify-between mt-5"> <div className="flex flex-row gap-2 justify-between mt-5">
<SearchBar />
{/* pagination controls */} {/* pagination controls */}
<div> <div>
Page {pageIndex} of {Math.ceil(totalPages / pageSize)} Page {pageIndex} of {Math.ceil(totalPages / pageSize)}