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 Confirmation Dialog

Browse Source
This commit is contained in:
glax
2025-07-22 22:24:44 +02:00
parent 7e610c485b
commit 87589a2a11
1 changed files with 46 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ 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, Modal, ModalDialog, Stack, Tooltip, Typography} from "@mui/joy"; import {Alert, Button, Modal, ModalDialog, Stack, Tooltip, Typography} from "@mui/joy";
import {KeyboardDoubleArrowRight, Warning} from "@mui/icons-material"; import {KeyboardDoubleArrowRight, Warning} from "@mui/icons-material";
import {LoadingState, StateIndicator} from "../Loading.tsx"; import {LoadingState, StateIndicator} from "../Loading.tsx";
@@ -26,6 +26,11 @@ export default function ({manga} : {manga : Manga | undefined}) : ReactNode {
}); });
}, [open]); }, [open]);
const exit = (manga : Manga) => {
setOpen(false);
setSimilar(similar.filter(m => m.key != manga.key));
}
return ( return (
<> <>
<Button onClick={_ => setOpen(true)}> <Button onClick={_ => setOpen(true)}>
@@ -35,7 +40,7 @@ export default function ({manga} : {manga : Manga | undefined}) : ReactNode {
<ModalClose /> <ModalClose />
<Stack direction={"row"} spacing={2} flexWrap={"wrap"} useFlexGap> <Stack direction={"row"} spacing={2} flexWrap={"wrap"} useFlexGap>
{similar.map(similarManga => <MangaCard manga={similarManga}> {similar.map(similarManga => <MangaCard manga={similarManga}>
<ConfirmationModal manga={manga as Manga} similarManga={similarManga} /> <ConfirmationModal manga={manga as Manga} similarManga={similarManga} exit={() => exit(similarManga)} />
</MangaCard>)} </MangaCard>)}
</Stack> </Stack>
</Drawer> </Drawer>
@@ -43,7 +48,7 @@ export default function ({manga} : {manga : Manga | undefined}) : ReactNode {
); );
} }
function ConfirmationModal({manga, similarManga} : {manga : Manga, similarManga : Manga}) : ReactNode { function ConfirmationModal({manga, similarManga, exit} : {manga : Manga, similarManga : Manga, exit: ()=>void}) : ReactNode {
const [open, setOpen] = useState<boolean>(false); const [open, setOpen] = useState<boolean>(false);
const Api = useContext(ApiContext); const Api = useContext(ApiContext);
@@ -54,38 +59,47 @@ function ConfirmationModal({manga, similarManga} : {manga : Manga, similarManga
Api.mangaMergeIntoPartialUpdate(manga.key as string, similarManga.key as string).then(response => { Api.mangaMergeIntoPartialUpdate(manga.key as string, similarManga.key as string).then(response => {
if (response.ok){ if (response.ok){
setLoadingState(LoadingState.success); setLoadingState(LoadingState.success);
setTimeout(() => setOpen(false), 2000); setOpen(false);
exit();
}else }else
setLoadingState(LoadingState.failure); setLoadingState(LoadingState.failure);
}).catch(_ => setLoadingState(LoadingState.failure)); }).catch(_ => setLoadingState(LoadingState.failure));
} }
return ( return <>
<> {
<Button onClick={_ => setOpen(true)}> loadingState == LoadingState.success ?
Merge into <Alert
</Button> color="success"
<Modal open={open} onClose={_ => setOpen(false)}> startDecorator={StateIndicator(LoadingState.success)}
<ModalDialog> >
<ModalClose /> Merged Successfully!
<Typography level={"h2"}>Confirm Merge</Typography> </Alert>
<Stack direction={"row"} spacing={3} alignItems={"center"}> :
<MangaCard manga={manga} /> <Button onClick={_ => setOpen(true)}>
<Typography color={"danger"} level={"h1"}><KeyboardDoubleArrowRight /></Typography> Merge into
<MangaCard manga={similarManga} /> </Button>
</Stack> }
<Tooltip title={"THIS CAN NOT BE UNDONE!"}> <Modal open={open} onClose={_ => setOpen(false)}>
<Button <ModalDialog>
onClick={merge} <ModalClose />
disabled={loadingState === LoadingState.loading} <Typography level={"h2"}>Confirm Merge</Typography>
endDecorator={StateIndicator(loadingState)} <Stack direction={"row"} spacing={3} alignItems={"center"}>
color={"danger"} <MangaCard manga={manga} />
startDecorator={<Warning />}> <Typography color={"danger"} level={"h1"}><KeyboardDoubleArrowRight /></Typography>
Merge <MangaCard manga={similarManga} />
</Button> </Stack>
</Tooltip> <Tooltip title={"THIS CAN NOT BE UNDONE!"}>
</ModalDialog> <Button
</Modal> onClick={merge}
</> disabled={loadingState === LoadingState.loading}
); endDecorator={StateIndicator(loadingState)}
color={"danger"}
startDecorator={<Warning />}>
Merge
</Button>
</Tooltip>
</ModalDialog>
</Modal>
</>;
} }