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

MangaMerge

Browse Source
This commit is contained in:
glax
2025-07-22 22:10:52 +02:00
parent 34dcd06ca9
commit 7e610c485b
1 changed files with 56 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
tranga-website/src/Components/Mangas/MangaMerge.tsx
View File

@@ -4,7 +4,9 @@ import Drawer from "@mui/joy/Drawer";
import ModalClose from "@mui/joy/ModalClose"; import ModalClose from "@mui/joy/ModalClose";
import {ApiContext} from "../../apiClient/ApiContext.tsx"; import {ApiContext} from "../../apiClient/ApiContext.tsx";
import {MangaCard} from "./MangaCard.tsx"; import {MangaCard} from "./MangaCard.tsx";
import {Button} from "@mui/joy"; import {Button, Modal, ModalDialog, Stack, Tooltip, Typography} from "@mui/joy";
import {KeyboardDoubleArrowRight, Warning} from "@mui/icons-material";
import {LoadingState, StateIndicator} from "../Loading.tsx";
export default function ({manga} : {manga : Manga | undefined}) : ReactNode { export default function ({manga} : {manga : Manga | undefined}) : ReactNode {
const Api = useContext(ApiContext); const Api = useContext(ApiContext);
@@ -29,10 +31,61 @@ export default function ({manga} : {manga : Manga | undefined}) : ReactNode {
<Button onClick={_ => setOpen(true)}> <Button onClick={_ => setOpen(true)}>
Merge Merge
</Button> </Button>
<Drawer open={open} onClose={() => setOpen(false)} anchor={"bottom"}> <Drawer size={"lg"} open={open} onClose={() => setOpen(false)} anchor={"bottom"}>
<ModalClose /> <ModalClose />
{similar.map(manga => <MangaCard manga={manga}></MangaCard>)} <Stack direction={"row"} spacing={2} flexWrap={"wrap"} useFlexGap>
{similar.map(similarManga => <MangaCard manga={similarManga}>
<ConfirmationModal manga={manga as Manga} similarManga={similarManga} />
</MangaCard>)}
</Stack>
</Drawer> </Drawer>
</> </>
); );
} }
function ConfirmationModal({manga, similarManga} : {manga : Manga, similarManga : Manga}) : ReactNode {
const [open, setOpen] = useState<boolean>(false);
const Api = useContext(ApiContext);
const [loadingState, setLoadingState] = useState<LoadingState>(LoadingState.none);
const merge = () => {
setLoadingState(LoadingState.loading);
Api.mangaMergeIntoPartialUpdate(manga.key as string, similarManga.key as string).then(response => {
if (response.ok){
setLoadingState(LoadingState.success);
setTimeout(() => setOpen(false), 2000);
}else
setLoadingState(LoadingState.failure);
}).catch(_ => setLoadingState(LoadingState.failure));
}
return (
<>
<Button onClick={_ => setOpen(true)}>
Merge into
</Button>
<Modal open={open} onClose={_ => setOpen(false)}>
<ModalDialog>
<ModalClose />
<Typography level={"h2"}>Confirm Merge</Typography>
<Stack direction={"row"} spacing={3} alignItems={"center"}>
<MangaCard manga={manga} />
<Typography color={"danger"} level={"h1"}><KeyboardDoubleArrowRight /></Typography>
<MangaCard manga={similarManga} />
</Stack>
<Tooltip title={"THIS CAN NOT BE UNDONE!"}>
<Button
onClick={merge}
disabled={loadingState === LoadingState.loading}
endDecorator={StateIndicator(loadingState)}
color={"danger"}
startDecorator={<Warning />}>
Merge
</Button>
</Tooltip>
</ModalDialog>
</Modal>
</>
);
}