From 4c81c571a4221fe217b5442dd31655df0879432b Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Wed, 18 Jun 2025 17:51:29 +0200
Subject: [PATCH] Job Drawer add "Re-Run" button, Move Chapter-Drawer to the
 bottom of the screen (inline with Manga-Drawer) Format JobState and JobType
 (with spaces)

---
 tranga-website/src/Components/Chapter.tsx |  9 ++--
 tranga-website/src/Components/Jobs.tsx    | 51 +++++++++++++----------
 tranga-website/src/api/types/Jobs/IJob.ts |  9 +++-
 3 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/tranga-website/src/Components/Chapter.tsx b/tranga-website/src/Components/Chapter.tsx
index 5ef0ba9..cf89e49 100644
--- a/tranga-website/src/Components/Chapter.tsx
+++ b/tranga-website/src/Components/Chapter.tsx
@@ -1,14 +1,15 @@
 import React, {ReactElement, useContext, useState} from "react";
 import IChapter from "../api/types/IChapter.ts";
-import {Box, Chip, Link, Stack, Typography} from "@mui/joy";
+import {Box, Chip, Link, Stack, Tooltip, Typography} from "@mui/joy";
 import {MangaFromId} from "./Manga.tsx";
 import {ChapterContext} from "../api/Contexts/ChapterContext.tsx";
 import Drawer from "@mui/joy/Drawer";
 import ModalClose from "@mui/joy/ModalClose";
+import {Archive} from "@mui/icons-material";
 
 export function ChapterPopupFromId({chapterId, open, setOpen, children}: { chapterId: string | null, open: boolean, setOpen: React.Dispatch<React.SetStateAction<boolean>>, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }) {
     return (
-        <Drawer open={open} onClose={() => setOpen(false)}>
+        <Drawer anchor={"bottom"} open={open} onClose={() => setOpen(false)}>
             <ModalClose />
             {
                 chapterId !== null ?
@@ -35,13 +36,13 @@ export function ChapterFromId({chapterId, children} : { chapterId: string, child
 
 export function Chapter({chapter, children} : { chapter: IChapter, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
     return (
-        <Stack direction={"row"}>
+        <Stack direction={"row"} spacing={5} sx={{paddingTop: "10px"}}>
             <MangaFromId mangaId={chapter.parentMangaId} />
             <Box>
                 <Link target={"_blank"} level={"title-lg"} href={chapter.url}>{chapter.title}</Link>
                 <Typography>Volume <Chip>{chapter.volumeNumber}</Chip></Typography>
                 <Typography>Chapter <Chip>{chapter.chapterNumber}</Chip></Typography>
-                <Typography>Title <Chip>{chapter.title}</Chip></Typography>
+                <Tooltip title={chapter.fullArchiveFilePath} placement={"bottom-start"}><Archive /></Tooltip>
             </Box>
             {children}
         </Stack>
diff --git a/tranga-website/src/Components/Jobs.tsx b/tranga-website/src/Components/Jobs.tsx
index 4381f02..987b187 100644
--- a/tranga-website/src/Components/Jobs.tsx
+++ b/tranga-website/src/Components/Jobs.tsx
@@ -9,11 +9,11 @@ import {
     Table,
     Typography
 } from "@mui/joy";
-import {GetJobsInState, GetJobsOfTypeAndWithState, GetJobsWithType} from "../api/Job.tsx";
+import {GetJobsInState, GetJobsOfTypeAndWithState, GetJobsWithType, StartJob} from "../api/Job.tsx";
 import * as React from "react";
 import {useCallback, useContext, useEffect, useState} from "react";
 import {ApiUriContext} from "../api/fetchApi.tsx";
-import IJob, {JobState, JobType} from "../api/types/Jobs/IJob.ts";
+import IJob, {JobState, JobStateToString, JobType, JobTypeToString} from "../api/types/Jobs/IJob.ts";
 import ModalClose from "@mui/joy/ModalClose";
 import {MangaPopupFromId} from "./MangaPopup.tsx";
 import IJobWithMangaId from "../api/types/Jobs/IJobWithMangaId.ts";
@@ -85,6 +85,10 @@ export default function JobsDrawer({open, connected, setOpen} : {open: boolean,
         setSelectedChapterId(chapterId);
         setChapterPopupOpen(true);
     }
+    
+    const ReRunJob = useCallback((jobId: string) => {
+        StartJob(apiUri, jobId, false);
+    }, [apiUri]);
 
     return (
         <Drawer size={"lg"} anchor={"left"} open={open} onClose={() => setOpen(false)}>
@@ -95,13 +99,13 @@ export default function JobsDrawer({open, connected, setOpen} : {open: boolean,
                     <Typography>State</Typography>
                 }>
                     <Option value={null}>None</Option>
-                    {Object.keys(JobState).map((state) => <Option value={state}>{state}</Option>)}
+                    {Object.keys(JobState).map((state) => <Option value={state}>{JobStateToString(state)}</Option>)}
                 </Select>
                 <Select placeholder={"Type"} value={filterType} onChange={handleChangeType} startDecorator={
                     <Typography>Type</Typography>
                 }>
                     <Option value={null}>None</Option>
-                    {Object.keys(JobType).map((type) => <Option value={type}>{type}</Option>)}
+                    {Object.keys(JobType).map((type) => <Option value={type}>{JobTypeToString(type)}</Option>)}
                 </Select>
                 <Input type={"number"}
                        value={page}
@@ -111,26 +115,28 @@ export default function JobsDrawer({open, connected, setOpen} : {open: boolean,
                        endDecorator={<Typography>/{Math.ceil(allJobs.length / pageSize)}</Typography>}/>
             </Stack>
             <DialogContent>
-                <Table borderAxis={"xBetween"} stickyHeader>
+                <Table borderAxis={"bothBetween"} stickyHeader sx={{tableLayout: "auto", width: "100%"}}>
                     <thead>
-                    <tr>
-                        <th>Type</th>
-                        <th>State</th>
-                        <th>Last Execution</th>
-                        <th>NextExecution</th>
-                        <th>Extra</th>
-                    </tr>
+                        <tr>
+                            <th>Type</th>
+                            <th>State</th>
+                            <th>Last Execution</th>
+                            <th>Next Execution</th>
+                            <th></th>
+                            <th>Extra</th>
+                        </tr>
                     </thead>
                     <tbody>
-                    {allJobs.slice((page-1)*pageSize, page*pageSize).map((job) => (
-                        <tr key={job.jobId}>
-                            <td>{job.jobType}</td>
-                            <td>{job.state}</td>
-                            <td>{new Date(job.lastExecution).toLocaleString()}</td>
-                            <td>{new Date(job.nextExecution).toLocaleString()}</td>
-                            <td>{ExtraContent(job, OpenMangaPopupDrawer, OpenChapterPopupDrawer)}</td>
-                        </tr>
-                    ))}
+                        {allJobs.slice((page-1)*pageSize, page*pageSize).map((job) => (
+                            <tr key={job.jobId}>
+                                <td>{JobTypeToString(job.jobType)}</td>
+                                <td>{JobStateToString(job.state)}</td>
+                                <td>{new Date(job.lastExecution).toLocaleString()}</td>
+                                <td>{new Date(job.nextExecution).toLocaleString()}</td>
+                                <td style={{whiteSpace: "nowrap"}}><Button onClick={() => ReRunJob(job.jobId)}>Re-Run</Button></td>
+                                <td>{ExtraContent(job, OpenMangaPopupDrawer, OpenChapterPopupDrawer)}</td>
+                            </tr>
+                        ))}
                     </tbody>
                 </Table>
             </DialogContent>
@@ -150,8 +156,7 @@ function ExtraContent(job: IJob, OpenMangaPopupDrawer: (mangaId: string) => void
         case JobType.MoveMangaLibraryJob:
             return <Button onClick={() => OpenMangaPopupDrawer((job as IJobWithMangaId).mangaId)}>Open Manga</Button>
         case JobType.DownloadSingleChapterJob:
-        case JobType.UpdateSingleChapterDownloadedJob:
-            return <Button onClick={() => OpenChapterPopupDrawer((job as IJobWithChapterId).chapterId)}>ShowChapter</Button>
+            return <Button onClick={() => OpenChapterPopupDrawer((job as IJobWithChapterId).chapterId)}>Show Chapter</Button>
         default:
             return null;
     }
diff --git a/tranga-website/src/api/types/Jobs/IJob.ts b/tranga-website/src/api/types/Jobs/IJob.ts
index 027ac3e..e7ad426 100644
--- a/tranga-website/src/api/types/Jobs/IJob.ts
+++ b/tranga-website/src/api/types/Jobs/IJob.ts
@@ -16,14 +16,21 @@ export enum JobType {
     RetrieveChaptersJob = "RetrieveChaptersJob",
     UpdateChaptersDownloadedJob = "UpdateChaptersDownloadedJob",
     MoveMangaLibraryJob = "MoveMangaLibraryJob",
-    UpdateSingleChapterDownloadedJob = "UpdateSingleChapterDownloadedJob",
     UpdateCoverJob = "UpdateCoverJob"
 }
 
+export function JobTypeToString(job: JobType | string): string {
+    return job.replace(/([A-Z])/g, ' $1').replace("Job", "").trim();
+}
+
 export enum JobState {
     FirstExecution = "FirstExecution",
     Running = "Running",
     Completed = "Completed",
     CompletedWaiting = "CompletedWaiting",
     Failed = "Failed"
+}
+
+export function JobStateToString(state: JobState | string): string {
+    return state.replace(/([A-Z])/g, ' $1').trim();
 }
\ No newline at end of file