mangamochi/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Introduce MangaImport component and update import functionality in Admin

Browse Source
This commit is contained in:
Rodrigo Verdiani 2026-03-28 19:38:10 -03:00
parent 32c3d4ad3b
commit 096412cfb2
6 changed files with 104 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/features/admin/components/MangaImport.tsx Normal file
View File

@ -0,0 +1,80 @@
import {Card} from "@/components/ui/card.tsx";
import {Download, FileUp} from "lucide-react";
import {Button} from "@/components/ui/button.tsx";
import {useState} from "react";
import {ProviderImportDialog} from "@/features/admin/components/ProviderImportDialog.tsx";
import {MangaManualImportDialog} from "@/features/admin/components/MangaManualImportDialog.tsx";
export const MangaImport = () => {
const [providerDialogOpen, setProviderDialogOpen] = useState(false);
const [fileImportDialogOpen, setFileImportDialogOpen] = useState(false);
return (<div className="space-y-6">
<div>
<h2 className="text-xl font-semibold text-foreground">
Import Manga
</h2>
<p className="text-sm text-muted-foreground">
Import manga from external providers or upload files directly.
</p>
</div>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
<Card className="p-6">
<div className="flex flex-col items-center gap-4 text-center">
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
<Download className="h-6 w-6 text-primary" />
</div>
<div>
<h3 className="font-semibold text-foreground">
Import from Provider
</h3>
<p className="mt-1 text-sm text-muted-foreground">
Import manga from MangaDex or other supported providers.
</p>
</div>
<Button
variant="outline"
className="gap-2"
onClick={() => setProviderDialogOpen(true)}
>
<Download className="mr-2 h-4 w-4" />
Import from Provider</Button>
</div>
</Card>
<Card className="p-6">
<div className="flex flex-col items-center gap-4 text-center">
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
<FileUp className="h-6 w-6 text-primary" />
</div>
<div>
<h3 className="font-semibold text-foreground">
File Upload
</h3>
<p className="mt-1 text-sm text-muted-foreground">
Upload CBZ or CBR files to import manga data in
bulk.
</p>
</div>
<Button
variant="outline"
className="gap-2"
onClick={() => setFileImportDialogOpen(true)}
>
<FileUp className="h-4 w-4" />
Upload Files
</Button>
</div>
</Card>
<ProviderImportDialog
dialogOpen={providerDialogOpen}
onDialogOpenChange={setProviderDialogOpen}
/>
<MangaManualImportDialog
fileImportDialogOpen={fileImportDialogOpen}
onFileImportDialogOpenChange={setFileImportDialogOpen}
/>
</div>
</div>);
}

8
src/features/home/components/MangaManualImportDialog.tsx → src/features/admin/components/MangaManualImportDialog.tsx
View File

@ -4,7 +4,7 @@ import type React from "react";
import { useState } from "react";
import { toast } from "sonner";
import { useRequestPresignedImport } from "@/api/generated/content/content.ts";
import { Button } from "@/components/ui/button";
import { Button } from "@/components/ui/button.tsx";
import {
Dialog,
DialogContent,
@ -12,9 +12,9 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Progress } from "@/components/ui/progress";
} from "@/components/ui/dialog.tsx";
import { Input } from "@/components/ui/input.tsx";
import { Progress } from "@/components/ui/progress.tsx";
interface MangaManualImportDialogProps {
fileImportDialogOpen: boolean;

4
src/features/home/components/ProviderImportDialog.tsx → src/features/admin/components/ProviderImportDialog.tsx
View File

@ -5,7 +5,7 @@ import { toast } from "sonner";
import { z } from "zod";
import { useGetContentProviders } from "@/api/generated/ingestion/ingestion.ts";
import { useImportFromProvider } from "@/api/generated/manga-import/manga-import.ts";
import { Button } from "@/components/ui/button";
import { Button } from "@/components/ui/button.tsx";
import {
Dialog,
DialogContent,
@ -23,7 +23,7 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form.tsx";
import { Input } from "@/components/ui/input";
import { Input } from "@/components/ui/input.tsx";
import {
Select,
SelectContent,

69
src/features/home/components/ImportDropdown.tsx
View File

@ -1,69 +0,0 @@
import { AlertCircle, Download, FileUp } from "lucide-react";
import { useState } from "react";
import { Link } from "react-router";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useAuth } from "@/contexts/AuthContext.tsx";
import { MangaManualImportDialog } from "@/features/home/components/MangaManualImportDialog.tsx";
import { ProviderImportDialog } from "@/features/home/components/ProviderImportDialog.tsx";
export function ImportDropdown() {
const { isAuthenticated } = useAuth();
const [providerDialogOpen, setProviderDialogOpen] = useState(false);
const [fileImportDialogOpen, setFileImportDialogOpen] = useState(false);
if (!isAuthenticated) {
return null;
}
return (
<>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="gap-2 bg-transparent">
<Download className="h-4 w-4" />
Import
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="">
<DropdownMenuItem onClick={() => setProviderDialogOpen(true)}>
<Download className="mr-2 h-4 w-4" />
Import from Provider
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setFileImportDialogOpen(true)}>
<FileUp className="mr-2 h-4 w-4" />
Import from File
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link
to="/import-review"
className="cursor-pointer gap-2 text-amber-600 dark:text-amber-500"
>
<AlertCircle className="h-4 w-4" />
<span>Import Review</span>
</Link>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<ProviderImportDialog
dialogOpen={providerDialogOpen}
onDialogOpenChange={setProviderDialogOpen}
/>
<MangaManualImportDialog
fileImportDialogOpen={fileImportDialogOpen}
onFileImportDialogOpenChange={setFileImportDialogOpen}
/>
</>
);
}

99
src/pages/Admin.tsx
View File

@ -1,10 +1,12 @@
import { ArrowLeft, FileStack, Server, Shield } from "lucide-react";
import {AlertCircle, ArrowLeft, Download, FileStack, Server, Shield} from "lucide-react";
import { type ReactNode, useEffect, useState } from "react";
import { useNavigate } from "react-router";
import { Button } from "@/components/ui/button.tsx";
import { useAuth } from "@/contexts/AuthContext.tsx";
import { FailedImportJobs } from "@/features/admin/components/FailedImportJobs.tsx";
import { ProviderManager } from "@/features/admin/components/ProviderManager.tsx";
import {MangaImport} from "@/features/admin/components/MangaImport.tsx";
import {useGetMangaImportJobs} from "@/api/generated/content/content.ts";
type Tab =
| "import"
@ -29,9 +31,9 @@ const Admin = () => {
// TODO: add user role verification
}, [isAuthenticated, isLoading]);
// const { data } = useGetMangaImportJobs();
//
// const failedImports = data?.data?.filter(dto => dto.status === MangaImportJobDTOStatus.FAILED)?.length;
const { data } = useGetMangaImportJobs();
const failedImports = data?.data?.failedJobs ?? 0;
const tabs: { id: Tab; label: string; icon: ReactNode; badge?: number }[] = [
{
@ -44,21 +46,21 @@ const Admin = () => {
// label: "Manga Library",
// icon: <BookOpen className="h-4 w-4" />,
// },
// {
// id: "import",
// label: "Import",
// icon: <Download className="h-4 w-4" />,
// },
// {
// id: "ingest-review",
// label: "Ingest Review",
// icon: <AlertCircle className="h-4 w-4" />,
// badge: failedImports.length > 0 ? failedImports.length : undefined,
// },
{
id: "import",
label: "Import",
icon: <Download className="h-4 w-4" />,
},
{
id: "ingest-review",
label: "Ingest Review",
icon: <AlertCircle className="h-4 w-4" />,
},
{
id: "import-jobs",
label: "Manual Import Jobs",
icon: <FileStack className="h-4 w-4" />,
badge: failedImports > 0 ? failedImports : undefined,
},
// {
// id: "users",
@ -132,73 +134,8 @@ const Admin = () => {
{/* Main Content */}
<div className="flex-1 px-8 py-8">
{activeTab === "providers" && <ProviderManager />}
{/*{activeTab === "manga" && <AdminMangaTable />}*/}
{/*{activeTab === "import" && (*/}
{/* <div className="space-y-6">*/}
{/* <div>*/}
{/* <h2 className="text-xl font-semibold text-foreground">*/}
{/* Import Manga*/}
{/* </h2>*/}
{/* <p className="text-sm text-muted-foreground">*/}
{/* Import manga from external providers or upload files directly.*/}
{/* </p>*/}
{/* </div>*/}
{/* <div className="grid grid-cols-1 gap-6 md:grid-cols-2">*/}
{/* /!* Import from Provider *!/*/}
{/* <Card className="p-6">*/}
{/* <div className="flex flex-col items-center gap-4 text-center">*/}
{/* <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">*/}
{/* <Download className="h-6 w-6 text-primary" />*/}
{/* </div>*/}
{/* <div>*/}
{/* <h3 className="font-semibold text-foreground">*/}
{/* Import from Provider*/}
{/* </h3>*/}
{/* <p className="mt-1 text-sm text-muted-foreground">*/}
{/* Import manga from MangaDex, MangaPlus, Bato.to, or*/}
{/* other supported providers.*/}
{/* </p>*/}
{/* </div>*/}
{/* <ImportDropdown />*/}
{/* </div>*/}
{/* </Card>*/}
{/* /!* Import from File *!/*/}
{/* <Card className="p-6">*/}
{/* <div className="flex flex-col items-center gap-4 text-center">*/}
{/* <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">*/}
{/* <FileUp className="h-6 w-6 text-primary" />*/}
{/* </div>*/}
{/* <div>*/}
{/* <h3 className="font-semibold text-foreground">*/}
{/* Bulk File Upload*/}
{/* </h3>*/}
{/* <p className="mt-1 text-sm text-muted-foreground">*/}
{/* Upload JSON, CSV, or text files to import manga data in*/}
{/* bulk.*/}
{/* </p>*/}
{/* </div>*/}
{/* <Button*/}
{/* variant="outline"*/}
{/* className="gap-2"*/}
{/* onClick={() => {*/}
{/* const importBtn = document.querySelector(*/}
{/* '[data-import-dropdown]'*/}
{/* ) as HTMLButtonElement*/}
{/* if (importBtn) importBtn.click()*/}
{/* }}*/}
{/* >*/}
{/* <FileUp className="h-4 w-4" />*/}
{/* Upload Files*/}
{/* </Button>*/}
{/* </div>*/}
{/* </Card>*/}
{/* </div>*/}
{/* </div>*/}
{/*)}*/}
{activeTab === "import" && <MangaImport />}
{/*{activeTab === "ingest-review" && (*/}
{/* <div className="space-y-6">*/}

2
src/pages/Home.tsx
View File

@ -8,7 +8,6 @@ import { ThemeToggle } from "@/components/ThemeToggle.tsx";
import { Input } from "@/components/ui/input.tsx";
import { useUIState } from "@/contexts/UIStateContext.tsx";
import { FilterSidebar } from "@/features/home/components/FilterSidebar.tsx";
import { ImportDropdown } from "@/features/home/components/ImportDropdown.tsx";
import { MangaGrid } from "@/features/home/components/MangaGrid.tsx";
import { SortDropdown } from "@/features/home/components/SortDropdown.tsx";
import { useDynamicPageSize } from "@/hooks/useDynamicPageSize.ts";
@ -93,7 +92,6 @@ const Home = () => {
</div>
</div>
<div className="flex items-center gap-4">
<ImportDropdown />
<ThemeToggle />
<AuthHeader />
</div>