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

Merge pull request 'feat/admin' (#33) from feat/admin into main

Browse Source 
Reviewed-on: #33
This commit is contained in:
rov 2026-04-10 11:02:45 -03:00
commit 5fc5f4676d
6 changed files with 198 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/generated/api.schemas.ts
View File

@ -117,6 +117,7 @@ export interface ContentProviderDTO {
name: string;
url?: string;
active?: boolean;
supportsContentFetch?: boolean;
}
export interface ContentProviderListDTO {
@ -214,9 +215,9 @@ export interface PageMangaImportJobDTO {
number?: number;
pageable?: PageableObject;
numberOfElements?: number;
sort?: SortObject;
first?: boolean;
last?: boolean;
sort?: SortObject;
empty?: boolean;
}
@ -277,9 +278,9 @@ export interface PageMangaListDTO {
number?: number;
pageable?: PageableObject;
numberOfElements?: number;
sort?: SortObject;
first?: boolean;
last?: boolean;
sort?: SortObject;
empty?: boolean;
}

56
src/features/admin/components/FailedImportJobs.tsx
View File

@ -18,6 +18,8 @@ import {
DialogTitle,
} from "@/components/ui/dialog.tsx";
import { Input } from "@/components/ui/input.tsx";
import { Skeleton } from "@/components/ui/skeleton.tsx";
import { Spinner } from "@/components/ui/spinner.tsx";
import {
Select,
SelectContent,
@ -46,7 +48,7 @@ export const FailedImportJobs = () => {
const [errorDialogOpen, setErrorDialogOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const { data } = useGetMangaImportJobs({
const { data, isPending } = useGetMangaImportJobs({
status: statusFilter,
searchQuery: searchQuery,
page: currentPage - 1,
@ -54,6 +56,41 @@ export const FailedImportJobs = () => {
});
const importJobsData = data?.data;
if (isPending) {
return (
<div className="space-y-5">
<div>
<Skeleton className="h-7 w-52" />
<Skeleton className="mt-2 h-4 w-72" />
</div>
<div className="grid grid-cols-2 gap-4 sm:grid-cols-5">
{Array.from({ length: 5 }).map((_, i) => (
<Card key={i} className="p-4">
<Skeleton className="h-4 w-20" />
<Skeleton className="mt-2 h-8 w-16" />
</Card>
))}
</div>
<div className="flex flex-wrap items-center gap-4">
<div className="relative flex-1 min-w-[200px]">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Skeleton className="h-10 w-full pl-10" />
</div>
<Skeleton className="h-10 w-[150px]" />
</div>
<Card>
<div className="p-6 flex flex-col items-center justify-center">
<Spinner className="size-12 text-primary" />
<Skeleton className="mt-4 h-4 w-48" />
</div>
</Card>
</div>
);
}
const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleString("en-US", {
year: "numeric",
@ -328,23 +365,6 @@ export const FailedImportJobs = () => {
>
Close
</Button>
{/*<Button*/}
{/* variant="default"*/}
{/* onClick={() => {*/}
{/* // Mock retry action*/}
{/* setJobs((prev) =>*/}
{/* prev.map((j) =>*/}
{/* j.id === selectedJob.id*/}
{/* ? { ...j, status: "PENDING" as ImportStatus, updatedAt: new Date().toISOString() }*/}
{/* : j*/}
{/* )*/}
{/* )*/}
{/* setErrorDialogOpen(false)*/}
{/* }}*/}
{/*>*/}
{/* <RefreshCw className="mr-2 h-4 w-4" />*/}
{/* Retry Import*/}
{/*</Button>*/}
</div>
</div>
)}

53
src/features/admin/components/IngestReview.tsx
View File

@ -2,9 +2,60 @@ import {Card} from "@/components/ui/card.tsx";
import {AlertCircle} from "lucide-react";
import {useGetMangaIngestReviews} from "@/api/generated/manga-ingest-review/manga-ingest-review.ts";
import {ImportReviewCard} from "@/features/admin/components/ImportReviewCard.tsx";
import {Skeleton} from "@/components/ui/skeleton.tsx";
import {Spinner} from "@/components/ui/spinner.tsx";
export const IngestReview = () => {
const { data: importReviewData, queryKey } = useGetMangaIngestReviews();
const { data: importReviewData, queryKey, isPending } = useGetMangaIngestReviews();
if (isPending) {
return (
<div className="space-y-6">
<div>
<Skeleton className="h-7 w-40" />
<Skeleton className="mt-2 h-4 w-72" />
</div>
<div className="flex flex-col items-center justify-center py-12">
<Spinner className="size-12 text-primary" />
<Skeleton className="mt-4 h-4 w-48" />
</div>
{Array.from({ length: 2 }).map((_, i) => (
<Card key={i} className="p-4">
<div className="space-y-4">
<div className="flex items-start justify-between">
<div className="flex-1 space-y-2">
<Skeleton className="h-5 w-48" />
<Skeleton className="h-4 w-32" />
</div>
</div>
<Skeleton className="h-16 w-full rounded-md" />
<div className="space-y-3">
<div className="flex flex-row gap-4 w-full">
<div className="w-full space-y-2">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-10 w-full" />
</div>
<div className="w-full space-y-2">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-10 w-full" />
</div>
</div>
<div className="flex gap-2">
<Skeleton className="h-10 flex-1" />
<Skeleton className="h-10 w-10" />
</div>
</div>
</div>
</Card>
))}
</div>
);
}
return (<div className="space-y-6">
<div>

61
src/features/admin/components/ProviderManager.tsx
View File

@ -7,6 +7,7 @@ import {
import { Badge } from "@/components/ui/badge.tsx";
import { Button } from "@/components/ui/button.tsx";
import { Card } from "@/components/ui/card.tsx";
import {toast} from "sonner";
export const ProviderManager = () => {
const { data } = useGetContentProviders();
@ -15,12 +16,26 @@ export const ProviderManager = () => {
const {
mutate: mutateFetchContentProviderMangas,
isPending: isPendingFetchContentProviderMangas,
} = useFetchContentProviderMangas();
} = useFetchContentProviderMangas({
mutation: {
onSuccess: () => {
toast.success("Content Provider mangas update queued successfully!");
},
},
});
const {
mutate: mutateFetchAllContentProviderMangas,
isPending: isPendingFetchAllContentProviderMangas,
} = useFetchAllContentProviderMangas();
} = useFetchAllContentProviderMangas(
{
mutation: {
onSuccess: () => {
toast.success("All Content Provider mangas update queued successfully!");
},
},
}
);
const activeCount = providers?.filter((p) => p.active).length;
@ -104,26 +119,28 @@ export const ProviderManager = () => {
</p>
</div>
<Button
variant="outline"
size="sm"
onClick={() =>
mutateFetchContentProviderMangas({
providerId: provider?.id ?? -1,
})
}
disabled={
!provider.active || isPendingFetchContentProviderMangas
}
className="gap-2 shrink-0"
>
{isPendingFetchContentProviderMangas ? (
<Loader2 className="h-3 w-3 animate-spin" />
) : (
<RefreshCw className="h-3 w-3" />
)}
Update
</Button>
{provider.supportsContentFetch && (
<Button
variant="outline"
size="sm"
onClick={() =>
mutateFetchContentProviderMangas({
providerId: provider?.id ?? -1,
})
}
disabled={
!provider.active || isPendingFetchContentProviderMangas
}
className="gap-2 shrink-0"
>
{isPendingFetchContentProviderMangas ? (
<Loader2 className="h-3 w-3 animate-spin" />
) : (
<RefreshCw className="h-3 w-3" />
)}
Update
</Button>
)}
</div>
</Card>
);

48
src/pages/Admin.tsx
View File

@ -2,6 +2,8 @@ import {AlertCircle, ArrowLeft, Download, FileStack, Server, Shield} from "lucid
import { type ReactNode, useEffect, useState } from "react";
import { useNavigate } from "react-router";
import { Button } from "@/components/ui/button.tsx";
import { Skeleton } from "@/components/ui/skeleton.tsx";
import { Spinner } from "@/components/ui/spinner.tsx";
import { useAuth } from "@/contexts/AuthContext.tsx";
import { FailedImportJobs } from "@/features/admin/components/FailedImportJobs.tsx";
import { ProviderManager } from "@/features/admin/components/ProviderManager.tsx";
@ -70,6 +72,52 @@ const Admin = () => {
// },
];
if (isLoading) {
return (
<main className="min-h-screen bg-background">
<div className="flex">
<aside className="sticky top-0 h-screen w-64 shrink-0 border-r border-border bg-card">
<div className="flex h-full flex-col">
<div className="border-b border-border px-6 py-5">
<div className="flex items-center gap-2">
<Skeleton className="h-5 w-5" />
<Skeleton className="h-5 w-28" />
</div>
<Skeleton className="mt-2 h-3 w-40" />
</div>
<nav className="flex-1 space-y-1 px-3 py-4">
{Array.from({ length: 4 }).map((_, i) => (
<div
key={i}
className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5"
>
<Skeleton className="h-4 w-4" />
<Skeleton className="h-4 w-24" />
</div>
))}
</nav>
<div className="border-t border-border px-3 py-4">
<div className="flex items-center gap-2 px-3 py-2">
<Skeleton className="h-4 w-4" />
<Skeleton className="h-4 w-20" />
</div>
</div>
</div>
</aside>
<div className="flex-1 flex items-center justify-center px-8 py-8">
<div className="flex flex-col items-center gap-4">
<Spinner className="size-12 text-primary" />
<Skeleton className="h-4 w-48" />
</div>
</div>
</div>
</main>
);
}
return (
<main className="min-h-screen bg-background">
<div className="flex">

33
src/pages/Manga.tsx
View File

@ -249,18 +249,20 @@ const Manga = () => {
{/* Manga Info Section */}
<div className="grid gap-8 lg:grid-cols-[300px_1fr]">
{/* Cover */}
<div className="relative aspect-2/3 overflow-hidden rounded-lg border border-border bg-muted lg:sticky lg:top-8 lg:h-fit">
<img
src={
(mangaData.data?.coverImageKey &&
import.meta.env.VITE_OMV_BASE_URL +
"/" +
mangaData.data?.coverImageKey) ||
"/placeholder.svg"
}
alt={mangaData.data?.title ?? ""}
className="absolute inset-0 w-full h-full object-cover"
/>
<div className="lg:sticky lg:top-24">
<div className="relative aspect-2/3 overflow-hidden rounded-lg border border-border bg-muted">
<img
src={
(mangaData.data?.coverImageKey &&
import.meta.env.VITE_OMV_BASE_URL +
"/" +
mangaData.data?.coverImageKey) ||
"/placeholder.svg"
}
alt={mangaData.data?.title ?? ""}
className="absolute inset-0 w-full h-full object-cover"
/>
</div>
</div>
{/* Details */}
@ -359,9 +361,10 @@ const Manga = () => {
</div>
)}
<p className="text-pretty text-justify leading-relaxed text-foreground">
{mangaData.data?.synopsis}
</p>
<p
className="text-pretty text-justify leading-relaxed text-foreground"
dangerouslySetInnerHTML={{ __html: mangaData.data?.synopsis ?? "" }}
/>
<div className="grid gap-4 sm:grid-cols-2">
<div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">