glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-09-10 20:08:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Move Download Accordion to separate File

Browse Source
This commit is contained in:
glax
2025-09-05 16:24:28 +02:00
parent 5070e76480
commit c6e667d429
3 changed files with 101 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
tranga-website/src/App.tsx
View File

@@ -9,7 +9,7 @@ import MangaList from './Components/Mangas/MangaList.tsx';
import { Search } from './Search.tsx'; import { Search } from './Search.tsx';
import MangaConnectorProvider from './contexts/MangaConnectorContext.tsx'; import MangaConnectorProvider from './contexts/MangaConnectorContext.tsx';
import LibraryProvider from './contexts/FileLibraryContext.tsx'; import LibraryProvider from './contexts/FileLibraryContext.tsx';
import MangaDetail from './MangaDetail.tsx'; import MangaDetail from './Components/Mangas/Detail/MangaDetail.tsx';
export default function App() { export default function App() {
const [apiUri, setApiUri] = useState<string>( const [apiUri, setApiUri] = useState<string>(

94
tranga-website/src/Components/Mangas/Detail/DownloadSection.tsx Normal file
View File

@@ -0,0 +1,94 @@
import {
Accordion,
AccordionDetails,
AccordionSummary,
Box,
Checkbox,
List,
ListItem, Option,
Select,
Stack,
Typography
} from "@mui/joy";
import {ReactNode, useContext} from "react";
import TButton from "../../Inputs/TButton.tsx";
import MangaConnectorIcon from "../MangaConnectorIcon.tsx";
import {FileLibrary, Manga, MangaConnectorId} from "../../../api/data-contracts.ts";
import {FileLibraryContext} from "../../../contexts/FileLibraryContext.tsx";
export default function DownloadSection (props: DownloadSectionProps) : ReactNode {
const Libraries = useContext(FileLibraryContext);
return (
<Accordion defaultExpanded={props.downloadOpen}>
<AccordionSummary>
<Typography level={'h3'}>Download</Typography>
</AccordionSummary>
<AccordionDetails>
<Stack
direction={'column'}
gap={2}
sx={{ flexBasis: 0 }}>
<Box>
<Typography>Select a Library to Download to:</Typography>
<Select
placeholder={'Select a Library'}
value={props.library?.key}
onChange={props.onLibraryChange}>
{Libraries.map((l) => (
<Option
key={l.key}
value={l.key}>
{l.libraryName} ({l.basePath})
</Option>
))}
</Select>
</Box>
<Box>
<Typography>
Select which connectors you want to download this Manga from:
</Typography>
<List>
{props.manga?.mangaConnectorIds.map((id) => (
<ListItem key={id.key}>
<Checkbox
defaultChecked={id.useForDownload}
onChange={(c) =>
props.downloadFromMap.set(id, c.target.checked)
}
label={
<div
style={{
display: 'flex',
alignItems: 'center',
gap: 5,
}}>
<MangaConnectorIcon
mangaConnectorName={
id.mangaConnectorName
}
/>
<Typography>
{id.mangaConnectorName}
</Typography>
</div>
}
/>
</ListItem>
))}
</List>
</Box>
<TButton completionAction={props.setDownload}>Download All</TButton>
</Stack>
</AccordionDetails>
</Accordion>
);
}
export interface DownloadSectionProps {
manga?: Manga;
downloadOpen: boolean;
library?: FileLibrary;
onLibraryChange: (_: any, value: string | null) => void;
downloadFromMap: Map<MangaConnectorId, boolean>;
setDownload: () => Promise<void>;
}

84
tranga-website/src/MangaDetail.tsx → tranga-website/src/Components/Mangas/Detail/MangaDetail.tsx
View File

@@ -1,31 +1,21 @@
import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react'; import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react';
import { import {
Accordion,
AccordionDetails,
AccordionSummary,
Box,
Card, Card,
CardCover, CardCover,
Checkbox,
Chip, Chip,
List,
ListItem,
Modal, Modal,
ModalDialog, ModalDialog,
Option,
Select,
Stack, Stack,
Typography, Typography,
useTheme, useTheme,
} from '@mui/joy'; } from '@mui/joy';
import ModalClose from '@mui/joy/ModalClose'; import ModalClose from '@mui/joy/ModalClose';
import { FileLibrary, Manga, MangaConnectorId } from './api/data-contracts.ts'; import { FileLibrary, Manga, MangaConnectorId } from '../../../api/data-contracts.ts';
import { ApiContext } from './contexts/ApiContext.tsx'; import { ApiContext } from '../../../contexts/ApiContext.tsx';
import { MangaContext } from './contexts/MangaContext.tsx'; import { MangaContext } from '../../../contexts/MangaContext.tsx';
import { FileLibraryContext } from './contexts/FileLibraryContext.tsx'; import { FileLibraryContext } from '../../../contexts/FileLibraryContext.tsx';
import MangaConnectorIcon from './Components/Mangas/MangaConnectorIcon.tsx';
import TButton from './Components/Inputs/TButton.tsx';
import MarkdownPreview from '@uiw/react-markdown-preview'; import MarkdownPreview from '@uiw/react-markdown-preview';
import DownloadSection from "./DownloadSection.tsx";
export default function MangaDetail(props: MangaDetailProps): ReactNode { export default function MangaDetail(props: MangaDetailProps): ReactNode {
const Api = useContext(ApiContext); const Api = useContext(ApiContext);
@@ -151,69 +141,7 @@ export default function MangaDetail(props: MangaDetailProps): ReactNode {
/> />
</Stack> </Stack>
</Stack> </Stack>
<DownloadSection downloadOpen={props.downloadOpen??false} library={library} onLibraryChange={onLibraryChange} downloadFromMap={downloadFromMap} setDownload={setDownload} />
<Accordion defaultExpanded={props.downloadOpen}>
<AccordionSummary>
<Typography level={'h3'}>Download</Typography>
</AccordionSummary>
<AccordionDetails>
<Stack
direction={'column'}
gap={2}
sx={{ flexBasis: 0 }}>
<Box>
<Typography>Select a Library to Download to:</Typography>
<Select
placeholder={'Select a Library'}
value={library?.key}
onChange={onLibraryChange}>
{Libraries.map((l) => (
<Option
key={l.key}
value={l.key}>
{l.libraryName} ({l.basePath})
</Option>
))}
</Select>
</Box>
<Box>
<Typography>
Select which connectors you want to download this Manga from:
</Typography>
<List>
{manga?.mangaConnectorIds.map((id) => (
<ListItem key={id.key}>
<Checkbox
defaultChecked={id.useForDownload}
onChange={(c) =>
downloadFromMap.set(id, c.target.checked)
}
label={
<div
style={{
display: 'flex',
alignItems: 'center',
gap: 5,
}}>
<MangaConnectorIcon
mangaConnectorName={
id.mangaConnectorName
}
/>
<Typography>
{id.mangaConnectorName}
</Typography>
</div>
}
/>
</ListItem>
))}
</List>
</Box>
<TButton completionAction={setDownload}>Download All</TButton>
</Stack>
</AccordionDetails>
</Accordion>
</ModalDialog> </ModalDialog>
</Modal> </Modal>
); );