This commit is contained in:
1 parent
e85e4d74ea
commit
2e4ed76121
378 files changed
+22404
-20686
No files matched your search
@@ -1,5 +1,5 @@
|
||||
// src/app/[locale]/admin/import/effects/import-effects-client.tsx
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import {
|
||||
AlertCircle,
|
||||
@@ -12,165 +12,160 @@ import {
|
||||
Sparkles,
|
||||
Trash2,
|
||||
X,
|
||||
} from 'lucide-react'
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { cn } from '@/lib/utils'
|
||||
} from "lucide-react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface EffectItem {
|
||||
id: string
|
||||
lib: string
|
||||
type: string
|
||||
revision: number
|
||||
present: boolean
|
||||
nitroExists: boolean
|
||||
id: string;
|
||||
lib: string;
|
||||
type: string;
|
||||
revision: number;
|
||||
present: boolean;
|
||||
nitroExists: boolean;
|
||||
}
|
||||
|
||||
type Filter = 'all' | 'fx' | 'dance'
|
||||
type Filter = "all" | "fx" | "dance";
|
||||
|
||||
export function ImportEffectsClient() {
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [effects, setEffects] = useState<EffectItem[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [filter, setFilter] = useState<Filter>('all')
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set())
|
||||
const [batchProgress, setBatchProgress] = useState<{ done: number; total: number } | null>(null)
|
||||
const [busyLib, setBusyLib] = useState<string | null>(null)
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [effects, setEffects] = useState<EffectItem[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [filter, setFilter] = useState<Filter>("all");
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
const [batchProgress, setBatchProgress] = useState<{ done: number; total: number } | null>(null);
|
||||
const [busyLib, setBusyLib] = useState<string | null>(null);
|
||||
|
||||
const fetchEffects = useCallback(async (search: string) => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const params = new URLSearchParams()
|
||||
if (search) params.set('search', search)
|
||||
const res = await fetch(`/api/admin/import/effects?${params}`)
|
||||
const data = await res.json()
|
||||
const params = new URLSearchParams();
|
||||
if (search) params.set("search", search);
|
||||
const res = await fetch(`/api/admin/import/effects?${params}`);
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setError(data.error || 'Failed to load')
|
||||
return
|
||||
setError(data.error || "Failed to load");
|
||||
return;
|
||||
}
|
||||
setEffects(data.effects || [])
|
||||
setSelected(new Set())
|
||||
setEffects(data.effects || []);
|
||||
setSelected(new Set());
|
||||
} catch {
|
||||
setError('Network error')
|
||||
setError("Network error");
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setLoading(false);
|
||||
}
|
||||
}, [])
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchEffects('')
|
||||
}, [fetchEffects])
|
||||
fetchEffects("");
|
||||
}, [fetchEffects]);
|
||||
|
||||
const visible = useMemo(
|
||||
() => effects.filter((e) => filter === 'all' || e.type === filter),
|
||||
() => effects.filter((e) => filter === "all" || e.type === filter),
|
||||
[effects, filter],
|
||||
)
|
||||
const importable = useMemo(() => visible.filter((e) => !e.present || !e.nitroExists), [visible])
|
||||
const importedCount = useMemo(
|
||||
() => visible.filter((e) => e.present && e.nitroExists).length,
|
||||
[visible],
|
||||
)
|
||||
);
|
||||
const importable = useMemo(() => visible.filter((e) => !e.present || !e.nitroExists), [visible]);
|
||||
const importedCount = useMemo(() => visible.filter((e) => e.present && e.nitroExists).length, [visible]);
|
||||
|
||||
function toggle(lib: string) {
|
||||
setSelected((prev) => {
|
||||
const n = new Set(prev)
|
||||
if (n.has(lib)) n.delete(lib)
|
||||
else n.add(lib)
|
||||
return n
|
||||
})
|
||||
const n = new Set(prev);
|
||||
if (n.has(lib)) n.delete(lib);
|
||||
else n.add(lib);
|
||||
return n;
|
||||
});
|
||||
}
|
||||
|
||||
function markDone(lib: string) {
|
||||
setEffects((prev) =>
|
||||
prev.map((e) => (e.lib === lib ? { ...e, present: true, nitroExists: true } : e)),
|
||||
)
|
||||
setEffects((prev) => prev.map((e) => (e.lib === lib ? { ...e, present: true, nitroExists: true } : e)));
|
||||
}
|
||||
|
||||
async function importViaSse(items: EffectItem[]) {
|
||||
setBatchProgress({ done: 0, total: items.length })
|
||||
const res = await fetch('/api/admin/import/effects/batch', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
setBatchProgress({ done: 0, total: items.length });
|
||||
const res = await fetch("/api/admin/import/effects/batch", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ items, concurrency: 3 }),
|
||||
})
|
||||
});
|
||||
if (!res.body) {
|
||||
toast.error('No response stream')
|
||||
setBatchProgress(null)
|
||||
return
|
||||
toast.error("No response stream");
|
||||
setBatchProgress(null);
|
||||
return;
|
||||
}
|
||||
const reader = res.body.getReader()
|
||||
const decoder = new TextDecoder()
|
||||
let buf = ''
|
||||
let done = 0
|
||||
let succeeded = 0
|
||||
let failed = 0
|
||||
const reader = res.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buf = "";
|
||||
let done = 0;
|
||||
let succeeded = 0;
|
||||
let failed = 0;
|
||||
while (true) {
|
||||
const { value, done: streamDone } = await reader.read()
|
||||
if (streamDone) break
|
||||
buf += decoder.decode(value, { stream: true })
|
||||
const parts = buf.split('\n\n')
|
||||
buf = parts.pop() ?? ''
|
||||
const { value, done: streamDone } = await reader.read();
|
||||
if (streamDone) break;
|
||||
buf += decoder.decode(value, { stream: true });
|
||||
const parts = buf.split("\n\n");
|
||||
buf = parts.pop() ?? "";
|
||||
for (const part of parts) {
|
||||
if (!part.startsWith('data: ')) continue
|
||||
const evt = JSON.parse(part.slice(6))
|
||||
if (evt.type === 'item_progress' && evt.status === 'done') {
|
||||
done++
|
||||
succeeded++
|
||||
markDone(evt.classname)
|
||||
setBatchProgress({ done, total: items.length })
|
||||
} else if (evt.type === 'item_progress' && evt.status === 'failed') {
|
||||
done++
|
||||
failed++
|
||||
setBatchProgress({ done, total: items.length })
|
||||
} else if (evt.type === 'batch_complete') {
|
||||
succeeded = evt.succeeded
|
||||
failed = evt.failed
|
||||
if (!part.startsWith("data: ")) continue;
|
||||
const evt = JSON.parse(part.slice(6));
|
||||
if (evt.type === "item_progress" && evt.status === "done") {
|
||||
done++;
|
||||
succeeded++;
|
||||
markDone(evt.classname);
|
||||
setBatchProgress({ done, total: items.length });
|
||||
} else if (evt.type === "item_progress" && evt.status === "failed") {
|
||||
done++;
|
||||
failed++;
|
||||
setBatchProgress({ done, total: items.length });
|
||||
} else if (evt.type === "batch_complete") {
|
||||
succeeded = evt.succeeded;
|
||||
failed = evt.failed;
|
||||
}
|
||||
}
|
||||
}
|
||||
setBatchProgress(null)
|
||||
setSelected(new Set())
|
||||
if (succeeded > 0) toast.success(`${succeeded} effect(s) imported`)
|
||||
if (failed > 0) toast.error(`${failed} failed`)
|
||||
setBatchProgress(null);
|
||||
setSelected(new Set());
|
||||
if (succeeded > 0) toast.success(`${succeeded} effect(s) imported`);
|
||||
if (failed > 0) toast.error(`${failed} failed`);
|
||||
}
|
||||
|
||||
async function importOne(e: EffectItem) {
|
||||
setBusyLib(e.lib)
|
||||
setBusyLib(e.lib);
|
||||
try {
|
||||
await importViaSse([e])
|
||||
await importViaSse([e]);
|
||||
} finally {
|
||||
setBusyLib(null)
|
||||
setBusyLib(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function importSelected() {
|
||||
const items = visible.filter((e) => selected.has(e.lib) && (!e.present || !e.nitroExists))
|
||||
if (items.length === 0) return
|
||||
await importViaSse(items)
|
||||
const items = visible.filter((e) => selected.has(e.lib) && (!e.present || !e.nitroExists));
|
||||
if (items.length === 0) return;
|
||||
await importViaSse(items);
|
||||
}
|
||||
|
||||
async function remove(e: EffectItem) {
|
||||
setBusyLib(e.lib)
|
||||
setBusyLib(e.lib);
|
||||
try {
|
||||
const res = await fetch(`/api/admin/import/effects?lib=${encodeURIComponent(e.lib)}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
const data = await res.json()
|
||||
method: "DELETE",
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
toast.success(`${e.lib} removed`)
|
||||
toast.success(`${e.lib} removed`);
|
||||
setEffects((prev) =>
|
||||
prev.map((x) => (x.lib === e.lib ? { ...x, present: false, nitroExists: false } : x)),
|
||||
)
|
||||
);
|
||||
} else {
|
||||
toast.error(data.error || 'Delete failed')
|
||||
toast.error(data.error || "Delete failed");
|
||||
}
|
||||
} finally {
|
||||
setBusyLib(null)
|
||||
setBusyLib(null);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -206,10 +201,10 @@ export function ImportEffectsClient() {
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') fetchEffects(searchTerm)
|
||||
if (e.key === 'Escape') {
|
||||
setSearchTerm('')
|
||||
fetchEffects('')
|
||||
if (e.key === "Enter") fetchEffects(searchTerm);
|
||||
if (e.key === "Escape") {
|
||||
setSearchTerm("");
|
||||
fetchEffects("");
|
||||
}
|
||||
}}
|
||||
className="pl-9 pr-8"
|
||||
@@ -218,8 +213,8 @@ export function ImportEffectsClient() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSearchTerm('')
|
||||
fetchEffects('')
|
||||
setSearchTerm("");
|
||||
fetchEffects("");
|
||||
}}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
@@ -230,11 +225,11 @@ export function ImportEffectsClient() {
|
||||
<Button onClick={() => fetchEffects(searchTerm)} size="sm" disabled={loading}>
|
||||
{loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
|
||||
</Button>
|
||||
{(['all', 'fx', 'dance'] as Filter[]).map((f) => (
|
||||
{(["all", "fx", "dance"] as Filter[]).map((f) => (
|
||||
<Button
|
||||
key={f}
|
||||
size="sm"
|
||||
variant={filter === f ? 'default' : 'outline'}
|
||||
variant={filter === f ? "default" : "outline"}
|
||||
onClick={() => setFilter(f)}
|
||||
>
|
||||
{f.toUpperCase()}
|
||||
@@ -256,9 +251,7 @@ export function ImportEffectsClient() {
|
||||
)
|
||||
}
|
||||
>
|
||||
{selected.size === importable.length
|
||||
? 'Deselect All'
|
||||
: `Select All (${importable.length})`}
|
||||
{selected.size === importable.length ? "Deselect All" : `Select All (${importable.length})`}
|
||||
</Button>
|
||||
{selected.size > 0 && (
|
||||
<Button size="sm" className="h-8" onClick={importSelected} disabled={!!batchProgress}>
|
||||
@@ -296,22 +289,17 @@ export function ImportEffectsClient() {
|
||||
|
||||
{/* Grid */}
|
||||
{visible.length > 0 && (
|
||||
<div
|
||||
className={cn(
|
||||
'grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3',
|
||||
loading && 'opacity-50',
|
||||
)}
|
||||
>
|
||||
<div className={cn("grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3", loading && "opacity-50")}>
|
||||
{visible.map((e) => {
|
||||
const imported = e.present && e.nitroExists
|
||||
const isSelected = selected.has(e.lib)
|
||||
const imported = e.present && e.nitroExists;
|
||||
const isSelected = selected.has(e.lib);
|
||||
return (
|
||||
<div
|
||||
key={e.lib}
|
||||
className={cn(
|
||||
'rounded-lg border overflow-hidden bg-card relative hover:border-border transition-all',
|
||||
imported && 'ring-1 ring-[var(--admin-success)]/30',
|
||||
isSelected && 'ring-2 ring-primary border-primary',
|
||||
"rounded-lg border overflow-hidden bg-card relative hover:border-border transition-all",
|
||||
imported && "ring-1 ring-[var(--admin-success)]/30",
|
||||
isSelected && "ring-2 ring-primary border-primary",
|
||||
)}
|
||||
>
|
||||
{!imported && (
|
||||
@@ -319,10 +307,10 @@ export function ImportEffectsClient() {
|
||||
type="button"
|
||||
onClick={() => toggle(e.lib)}
|
||||
className={cn(
|
||||
'absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors',
|
||||
"absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors",
|
||||
isSelected
|
||||
? 'bg-primary border-primary text-primary-foreground'
|
||||
: 'bg-background/80 border-muted-foreground/30 hover:border-muted-foreground',
|
||||
? "bg-primary border-primary text-primary-foreground"
|
||||
: "bg-background/80 border-muted-foreground/30 hover:border-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{isSelected && <Check className="w-3 h-3" />}
|
||||
@@ -330,13 +318,13 @@ export function ImportEffectsClient() {
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col items-center justify-center h-20 gap-1',
|
||||
e.type === 'dance'
|
||||
? 'bg-gradient-to-br from-[var(--admin-warning)]/25 to-[var(--admin-warning)]/10'
|
||||
: 'bg-gradient-to-br from-[var(--admin-accent)]/25 to-[var(--admin-accent)]/10',
|
||||
"flex flex-col items-center justify-center h-20 gap-1",
|
||||
e.type === "dance"
|
||||
? "bg-gradient-to-br from-[var(--admin-warning)]/25 to-[var(--admin-warning)]/10"
|
||||
: "bg-gradient-to-br from-[var(--admin-accent)]/25 to-[var(--admin-accent)]/10",
|
||||
)}
|
||||
>
|
||||
{e.type === 'dance' ? (
|
||||
{e.type === "dance" ? (
|
||||
<Music className="w-7 h-7 text-[var(--admin-warning)]/80" />
|
||||
) : (
|
||||
<Sparkles className="w-7 h-7 text-[var(--admin-accent-text)]" />
|
||||
@@ -385,10 +373,10 @@ export function ImportEffectsClient() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -10,5 +10,5 @@ export default function Loading() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -1,12 +1,12 @@
|
||||
// src/app/[locale]/admin/import/effects/page.tsx
|
||||
import { redirect } from 'next/navigation'
|
||||
import { canAccess, getAdminContext, PERMS } from '@/lib/permissions'
|
||||
import { ImportEffectsClient } from './import-effects-client'
|
||||
import { redirect } from "next/navigation";
|
||||
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
|
||||
import { ImportEffectsClient } from "./import-effects-client";
|
||||
|
||||
export default async function ImportEffectsPage(_props: { params: Promise<{ locale: string }> }) {
|
||||
const { session, permissions } = await getAdminContext()
|
||||
const { session, permissions } = await getAdminContext();
|
||||
if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
|
||||
redirect('/admin')
|
||||
redirect("/admin");
|
||||
}
|
||||
return <ImportEffectsClient />
|
||||
return <ImportEffectsClient />;
|
||||
}
|
||||
Reference in new issue
Block a user