style: clean up code with prettier and eslint
This commit is contained in:
1 parent
60278b9e71
commit
fb8e77bb68
378 files changed
+22407
-20689
No files matched your search
@@ -1,45 +1,35 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import {
|
||||
AlertCircle,
|
||||
Check,
|
||||
Download,
|
||||
Loader2,
|
||||
Package,
|
||||
Search,
|
||||
Shirt,
|
||||
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'
|
||||
import { AlertCircle, Check, Download, Loader2, Package, Search, Shirt, 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";
|
||||
|
||||
// ── Shared types ─────────────────────────────────────────────────────────────
|
||||
|
||||
interface FigureItem {
|
||||
lib: string
|
||||
revision: number
|
||||
nitroExists: boolean
|
||||
previewType?: string
|
||||
previewId?: number
|
||||
lib: string;
|
||||
revision: number;
|
||||
nitroExists: boolean;
|
||||
previewType?: string;
|
||||
previewId?: number;
|
||||
}
|
||||
|
||||
interface ClothingSetItem {
|
||||
setType: string
|
||||
setId: number
|
||||
gender: string
|
||||
club: number
|
||||
sellable: boolean
|
||||
present: boolean
|
||||
setType: string;
|
||||
setId: number;
|
||||
gender: string;
|
||||
club: number;
|
||||
sellable: boolean;
|
||||
present: boolean;
|
||||
}
|
||||
|
||||
type Mode = 'libs' | 'sets'
|
||||
type Mode = "libs" | "sets";
|
||||
|
||||
const PER_PAGE = 100
|
||||
const PER_PAGE = 100;
|
||||
|
||||
// ── Shared SSE reader ─────────────────────────────────────────────────────────
|
||||
|
||||
@@ -50,38 +40,38 @@ async function runSseImport(
|
||||
onComplete: (succeeded: number, failed: number) => void,
|
||||
): Promise<void> {
|
||||
const res = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
});
|
||||
if (!res.body) {
|
||||
toast.error('No response stream')
|
||||
return
|
||||
toast.error("No response stream");
|
||||
return;
|
||||
}
|
||||
const reader = res.body.getReader()
|
||||
const decoder = new TextDecoder()
|
||||
let buf = ''
|
||||
let succeeded = 0
|
||||
let failed = 0
|
||||
const reader = res.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buf = "";
|
||||
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' || evt.status === 'failed')) {
|
||||
onDone(evt.classname)
|
||||
if (!part.startsWith("data: ")) continue;
|
||||
const evt = JSON.parse(part.slice(6));
|
||||
if (evt.type === "item_progress" && (evt.status === "done" || evt.status === "failed")) {
|
||||
onDone(evt.classname);
|
||||
}
|
||||
if (evt.type === 'batch_complete') {
|
||||
succeeded = evt.succeeded
|
||||
failed = evt.failed
|
||||
if (evt.type === "batch_complete") {
|
||||
succeeded = evt.succeeded;
|
||||
failed = evt.failed;
|
||||
}
|
||||
}
|
||||
}
|
||||
onComplete(succeeded, failed)
|
||||
onComplete(succeeded, failed);
|
||||
}
|
||||
|
||||
// ── Avatar preview (renders a mini avatar wearing the item) ───────────────────
|
||||
@@ -89,30 +79,30 @@ async function runSseImport(
|
||||
// A default dressed avatar; the previewed part overrides/adds its slot so the
|
||||
// item is shown on a complete figure.
|
||||
const BASE_FIGURE: Record<string, string> = {
|
||||
hd: 'hd-180-1',
|
||||
hr: 'hr-828-45',
|
||||
ch: 'ch-665-92',
|
||||
lg: 'lg-700-82',
|
||||
sh: 'sh-705-62',
|
||||
}
|
||||
hd: "hd-180-1",
|
||||
hr: "hr-828-45",
|
||||
ch: "ch-665-92",
|
||||
lg: "lg-700-82",
|
||||
sh: "sh-705-62",
|
||||
};
|
||||
|
||||
// Head-worn slots → render head-only (zoomed) so the item fills the frame;
|
||||
// everything else renders the full body.
|
||||
const HEAD_TYPES = new Set(['hd', 'hr', 'ha', 'he', 'ea', 'fa', 'fc'])
|
||||
const HEAD_TYPES = new Set(["hd", "hr", "ha", "he", "ea", "fa", "fc"]);
|
||||
|
||||
function buildPreviewFigure(type: string, id: number): string {
|
||||
const parts: Record<string, string> = { ...BASE_FIGURE }
|
||||
parts[type] = `${type}-${id}` // default color
|
||||
return Object.values(parts).join('.')
|
||||
const parts: Record<string, string> = { ...BASE_FIGURE };
|
||||
parts[type] = `${type}-${id}`; // default color
|
||||
return Object.values(parts).join(".");
|
||||
}
|
||||
|
||||
function AvatarPreview({ type, id }: { type?: string; id?: number }) {
|
||||
const [failed, setFailed] = useState(false)
|
||||
const [failed, setFailed] = useState(false);
|
||||
if (failed || !type || id === undefined) {
|
||||
return <Shirt className="w-8 h-8 text-muted-foreground/60" />
|
||||
return <Shirt className="w-8 h-8 text-muted-foreground/60" />;
|
||||
}
|
||||
const figure = buildPreviewFigure(type, id)
|
||||
const headOnly = HEAD_TYPES.has(type) ? '&headonly=1' : ''
|
||||
const figure = buildPreviewFigure(type, id);
|
||||
const headOnly = HEAD_TYPES.has(type) ? "&headonly=1" : "";
|
||||
return (
|
||||
// biome-ignore lint/performance/noImgElement: dynamic avatar imaging, not a Next asset
|
||||
<img
|
||||
@@ -121,129 +111,129 @@ function AvatarPreview({ type, id }: { type?: string; id?: number }) {
|
||||
className="max-h-full object-contain image-pixelated"
|
||||
onError={() => setFailed(true)}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// ── Librerie (v1) view ────────────────────────────────────────────────────────
|
||||
|
||||
function LibsView() {
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [activeSearch, setActiveSearch] = useState('')
|
||||
const [items, setItems] = useState<FigureItem[]>([])
|
||||
const [page, setPage] = useState(1)
|
||||
const [total, setTotal] = useState(0)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
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 [activeSearch, setActiveSearch] = useState("");
|
||||
const [items, setItems] = useState<FigureItem[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
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 fetchItems = useCallback(async (search: string, pageNum: number) => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const params = new URLSearchParams({ page: String(pageNum) })
|
||||
if (search) params.set('search', search)
|
||||
const res = await fetch(`/api/admin/import/clothing?${params}`)
|
||||
const data = await res.json()
|
||||
const params = new URLSearchParams({ page: String(pageNum) });
|
||||
if (search) params.set("search", search);
|
||||
const res = await fetch(`/api/admin/import/clothing?${params}`);
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setError(data.error || 'Failed to load')
|
||||
return
|
||||
setError(data.error || "Failed to load");
|
||||
return;
|
||||
}
|
||||
setItems(data.item || [])
|
||||
setTotal(data.meta?.total || 0)
|
||||
setSelected(new Set())
|
||||
setItems(data.item || []);
|
||||
setTotal(data.meta?.total || 0);
|
||||
setSelected(new Set());
|
||||
} catch {
|
||||
setError('Network error')
|
||||
setError("Network error");
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setLoading(false);
|
||||
}
|
||||
}, [])
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchItems('', 1)
|
||||
}, [fetchItems])
|
||||
fetchItems("", 1);
|
||||
}, [fetchItems]);
|
||||
|
||||
function doSearch() {
|
||||
setActiveSearch(searchTerm)
|
||||
setPage(1)
|
||||
fetchItems(searchTerm, 1)
|
||||
setActiveSearch(searchTerm);
|
||||
setPage(1);
|
||||
fetchItems(searchTerm, 1);
|
||||
}
|
||||
|
||||
function goPage(dir: 'prev' | 'next') {
|
||||
const next = dir === 'next' ? page + 1 : Math.max(1, page - 1)
|
||||
setPage(next)
|
||||
fetchItems(activeSearch, next)
|
||||
function goPage(dir: "prev" | "next") {
|
||||
const next = dir === "next" ? page + 1 : Math.max(1, page - 1);
|
||||
setPage(next);
|
||||
fetchItems(activeSearch, next);
|
||||
}
|
||||
|
||||
const importable = useMemo(() => items.filter((p) => !p.nitroExists), [items])
|
||||
const importedCount = useMemo(() => items.filter((p) => p.nitroExists).length, [items])
|
||||
const lastPage = Math.max(Math.ceil(total / PER_PAGE), 1)
|
||||
const importable = useMemo(() => items.filter((p) => !p.nitroExists), [items]);
|
||||
const importedCount = useMemo(() => items.filter((p) => p.nitroExists).length, [items]);
|
||||
const lastPage = Math.max(Math.ceil(total / PER_PAGE), 1);
|
||||
|
||||
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) {
|
||||
setItems((prev) => prev.map((p) => (p.lib === lib ? { ...p, nitroExists: true } : p)))
|
||||
setItems((prev) => prev.map((p) => (p.lib === lib ? { ...p, nitroExists: true } : p)));
|
||||
}
|
||||
|
||||
async function importViaSse(toImport: FigureItem[]) {
|
||||
setBatchProgress({ done: 0, total: toImport.length })
|
||||
let done = 0
|
||||
setBatchProgress({ done: 0, total: toImport.length });
|
||||
let done = 0;
|
||||
await runSseImport(
|
||||
'/api/admin/import/clothing/batch',
|
||||
"/api/admin/import/clothing/batch",
|
||||
{ items: toImport, concurrency: 3 },
|
||||
(label) => {
|
||||
done++
|
||||
markDone(label)
|
||||
setBatchProgress({ done, total: toImport.length })
|
||||
done++;
|
||||
markDone(label);
|
||||
setBatchProgress({ done, total: toImport.length });
|
||||
},
|
||||
(succeeded, failed) => {
|
||||
setBatchProgress(null)
|
||||
setSelected(new Set())
|
||||
if (succeeded > 0) toast.success(`${succeeded} libraries imported`)
|
||||
if (failed > 0) toast.error(`${failed} failed`)
|
||||
setBatchProgress(null);
|
||||
setSelected(new Set());
|
||||
if (succeeded > 0) toast.success(`${succeeded} libraries imported`);
|
||||
if (failed > 0) toast.error(`${failed} failed`);
|
||||
},
|
||||
)
|
||||
setBatchProgress(null)
|
||||
);
|
||||
setBatchProgress(null);
|
||||
}
|
||||
|
||||
async function importOne(p: FigureItem) {
|
||||
setBusyLib(p.lib)
|
||||
setBusyLib(p.lib);
|
||||
try {
|
||||
await importViaSse([p])
|
||||
await importViaSse([p]);
|
||||
} finally {
|
||||
setBusyLib(null)
|
||||
setBusyLib(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function importSelected() {
|
||||
const toImport = items.filter((p) => selected.has(p.lib) && !p.nitroExists)
|
||||
if (toImport.length === 0) return
|
||||
await importViaSse(toImport)
|
||||
const toImport = items.filter((p) => selected.has(p.lib) && !p.nitroExists);
|
||||
if (toImport.length === 0) return;
|
||||
await importViaSse(toImport);
|
||||
}
|
||||
|
||||
async function remove(p: FigureItem) {
|
||||
setBusyLib(p.lib)
|
||||
setBusyLib(p.lib);
|
||||
try {
|
||||
const res = await fetch(`/api/admin/import/clothing?lib=${encodeURIComponent(p.lib)}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
const data = await res.json()
|
||||
method: "DELETE",
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
toast.success(`${p.lib} removed`)
|
||||
setItems((prev) => prev.map((x) => (x.lib === p.lib ? { ...x, nitroExists: false } : x)))
|
||||
toast.success(`${p.lib} removed`);
|
||||
setItems((prev) => prev.map((x) => (x.lib === p.lib ? { ...x, nitroExists: false } : x)));
|
||||
} else {
|
||||
toast.error(data.error || 'Delete failed')
|
||||
toast.error(data.error || "Delete failed");
|
||||
}
|
||||
} finally {
|
||||
setBusyLib(null)
|
||||
setBusyLib(null);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -277,12 +267,12 @@ function LibsView() {
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') doSearch()
|
||||
if (e.key === 'Escape') {
|
||||
setSearchTerm('')
|
||||
setActiveSearch('')
|
||||
setPage(1)
|
||||
fetchItems('', 1)
|
||||
if (e.key === "Enter") doSearch();
|
||||
if (e.key === "Escape") {
|
||||
setSearchTerm("");
|
||||
setActiveSearch("");
|
||||
setPage(1);
|
||||
fetchItems("", 1);
|
||||
}
|
||||
}}
|
||||
className="pl-9 pr-8"
|
||||
@@ -291,10 +281,10 @@ function LibsView() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSearchTerm('')
|
||||
setActiveSearch('')
|
||||
setPage(1)
|
||||
fetchItems('', 1)
|
||||
setSearchTerm("");
|
||||
setActiveSearch("");
|
||||
setPage(1);
|
||||
fetchItems("", 1);
|
||||
}}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
@@ -320,9 +310,7 @@ function LibsView() {
|
||||
)
|
||||
}
|
||||
>
|
||||
{selected.size === importable.length
|
||||
? 'Deselect page'
|
||||
: `Select page (${importable.length})`}
|
||||
{selected.size === importable.length ? "Deselect page" : `Select page (${importable.length})`}
|
||||
</Button>
|
||||
{selected.size > 0 && (
|
||||
<Button size="sm" className="h-8" onClick={importSelected} disabled={!!batchProgress}>
|
||||
@@ -352,28 +340,21 @@ function LibsView() {
|
||||
{!loading && items.length === 0 && !error && (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<Shirt className="w-12 h-12 mx-auto mb-3 opacity-50" />
|
||||
<p className="text-sm">
|
||||
No libraries found{activeSearch ? ` for "${activeSearch}"` : ''}
|
||||
</p>
|
||||
<p className="text-sm">No libraries found{activeSearch ? ` for "${activeSearch}"` : ""}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{items.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")}>
|
||||
{items.map((p) => {
|
||||
const isSelected = selected.has(p.lib)
|
||||
const isSelected = selected.has(p.lib);
|
||||
return (
|
||||
<div
|
||||
key={p.lib}
|
||||
className={cn(
|
||||
'rounded-lg border overflow-hidden bg-card relative hover:border-border transition-all',
|
||||
p.nitroExists && '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",
|
||||
p.nitroExists && "ring-1 ring-[var(--admin-success)]/30",
|
||||
isSelected && "ring-2 ring-primary border-primary",
|
||||
)}
|
||||
>
|
||||
{!p.nitroExists && (
|
||||
@@ -381,10 +362,10 @@ function LibsView() {
|
||||
type="button"
|
||||
onClick={() => toggle(p.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" />}
|
||||
@@ -434,7 +415,7 @@ function LibsView() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
@@ -449,7 +430,7 @@ function LibsView() {
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={page <= 1 || loading}
|
||||
onClick={() => goPage('prev')}
|
||||
onClick={() => goPage("prev")}
|
||||
>
|
||||
← Prev
|
||||
</Button>
|
||||
@@ -457,7 +438,7 @@ function LibsView() {
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={page >= lastPage || loading}
|
||||
onClick={() => goPage('next')}
|
||||
onClick={() => goPage("next")}
|
||||
>
|
||||
Next →
|
||||
</Button>
|
||||
@@ -465,120 +446,120 @@ function LibsView() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// ── Vestiti / Sets (v2) view ──────────────────────────────────────────────────
|
||||
|
||||
function SetsView() {
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [activeSearch, setActiveSearch] = useState('')
|
||||
const [items, setItems] = useState<ClothingSetItem[]>([])
|
||||
const [page, setPage] = useState(1)
|
||||
const [total, setTotal] = useState(0)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set())
|
||||
const [batchProgress, setBatchProgress] = useState<{ done: number; total: number } | null>(null)
|
||||
const [busyKey, setBusyKey] = useState<string | null>(null)
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [activeSearch, setActiveSearch] = useState("");
|
||||
const [items, setItems] = useState<ClothingSetItem[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
const [batchProgress, setBatchProgress] = useState<{ done: number; total: number } | null>(null);
|
||||
const [busyKey, setBusyKey] = useState<string | null>(null);
|
||||
|
||||
function itemKey(it: ClothingSetItem): string {
|
||||
return `${it.setType}-${it.setId}`
|
||||
return `${it.setType}-${it.setId}`;
|
||||
}
|
||||
|
||||
const fetchItems = useCallback(async (search: string, pageNum: number) => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const params = new URLSearchParams({ page: String(pageNum) })
|
||||
if (search) params.set('search', search)
|
||||
const res = await fetch(`/api/admin/import/clothing/sets?${params}`)
|
||||
const data = await res.json()
|
||||
const params = new URLSearchParams({ page: String(pageNum) });
|
||||
if (search) params.set("search", search);
|
||||
const res = await fetch(`/api/admin/import/clothing/sets?${params}`);
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setError(data.error || 'Failed to load')
|
||||
return
|
||||
setError(data.error || "Failed to load");
|
||||
return;
|
||||
}
|
||||
setItems(data.item || [])
|
||||
setTotal(data.meta?.total || 0)
|
||||
setSelected(new Set())
|
||||
setItems(data.item || []);
|
||||
setTotal(data.meta?.total || 0);
|
||||
setSelected(new Set());
|
||||
} catch {
|
||||
setError('Network error')
|
||||
setError("Network error");
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setLoading(false);
|
||||
}
|
||||
}, [])
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchItems('', 1)
|
||||
}, [fetchItems])
|
||||
fetchItems("", 1);
|
||||
}, [fetchItems]);
|
||||
|
||||
function doSearch() {
|
||||
setActiveSearch(searchTerm)
|
||||
setPage(1)
|
||||
fetchItems(searchTerm, 1)
|
||||
setActiveSearch(searchTerm);
|
||||
setPage(1);
|
||||
fetchItems(searchTerm, 1);
|
||||
}
|
||||
|
||||
function goPage(dir: 'prev' | 'next') {
|
||||
const next = dir === 'next' ? page + 1 : Math.max(1, page - 1)
|
||||
setPage(next)
|
||||
fetchItems(activeSearch, next)
|
||||
function goPage(dir: "prev" | "next") {
|
||||
const next = dir === "next" ? page + 1 : Math.max(1, page - 1);
|
||||
setPage(next);
|
||||
fetchItems(activeSearch, next);
|
||||
}
|
||||
|
||||
const importable = useMemo(() => items.filter((it) => !it.present), [items])
|
||||
const presentCount = useMemo(() => items.filter((it) => it.present).length, [items])
|
||||
const lastPage = Math.max(Math.ceil(total / PER_PAGE), 1)
|
||||
const importable = useMemo(() => items.filter((it) => !it.present), [items]);
|
||||
const presentCount = useMemo(() => items.filter((it) => it.present).length, [items]);
|
||||
const lastPage = Math.max(Math.ceil(total / PER_PAGE), 1);
|
||||
|
||||
function toggle(key: string) {
|
||||
setSelected((prev) => {
|
||||
const n = new Set(prev)
|
||||
if (n.has(key)) n.delete(key)
|
||||
else n.add(key)
|
||||
return n
|
||||
})
|
||||
const n = new Set(prev);
|
||||
if (n.has(key)) n.delete(key);
|
||||
else n.add(key);
|
||||
return n;
|
||||
});
|
||||
}
|
||||
|
||||
function markDone(label: string) {
|
||||
setItems((prev) => prev.map((it) => (itemKey(it) === label ? { ...it, present: true } : it)))
|
||||
setItems((prev) => prev.map((it) => (itemKey(it) === label ? { ...it, present: true } : it)));
|
||||
}
|
||||
|
||||
async function importViaSse(toImport: ClothingSetItem[]) {
|
||||
setBatchProgress({ done: 0, total: toImport.length })
|
||||
let done = 0
|
||||
setBatchProgress({ done: 0, total: toImport.length });
|
||||
let done = 0;
|
||||
await runSseImport(
|
||||
'/api/admin/import/clothing/sets/batch',
|
||||
"/api/admin/import/clothing/sets/batch",
|
||||
{
|
||||
items: toImport.map((it) => ({ setType: it.setType, setId: it.setId })),
|
||||
concurrency: 3,
|
||||
},
|
||||
(label) => {
|
||||
done++
|
||||
markDone(label)
|
||||
setBatchProgress({ done, total: toImport.length })
|
||||
done++;
|
||||
markDone(label);
|
||||
setBatchProgress({ done, total: toImport.length });
|
||||
},
|
||||
(succeeded, failed) => {
|
||||
setBatchProgress(null)
|
||||
setSelected(new Set())
|
||||
if (succeeded > 0) toast.success(`${succeeded} sets imported`)
|
||||
if (failed > 0) toast.error(`${failed} failed`)
|
||||
setBatchProgress(null);
|
||||
setSelected(new Set());
|
||||
if (succeeded > 0) toast.success(`${succeeded} sets imported`);
|
||||
if (failed > 0) toast.error(`${failed} failed`);
|
||||
},
|
||||
)
|
||||
setBatchProgress(null)
|
||||
);
|
||||
setBatchProgress(null);
|
||||
}
|
||||
|
||||
async function importOne(it: ClothingSetItem) {
|
||||
const key = itemKey(it)
|
||||
setBusyKey(key)
|
||||
const key = itemKey(it);
|
||||
setBusyKey(key);
|
||||
try {
|
||||
await importViaSse([it])
|
||||
await importViaSse([it]);
|
||||
} finally {
|
||||
setBusyKey(null)
|
||||
setBusyKey(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function importSelected() {
|
||||
const toImport = items.filter((it) => selected.has(itemKey(it)) && !it.present)
|
||||
if (toImport.length === 0) return
|
||||
await importViaSse(toImport)
|
||||
const toImport = items.filter((it) => selected.has(itemKey(it)) && !it.present);
|
||||
if (toImport.length === 0) return;
|
||||
await importViaSse(toImport);
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -611,12 +592,12 @@ function SetsView() {
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') doSearch()
|
||||
if (e.key === 'Escape') {
|
||||
setSearchTerm('')
|
||||
setActiveSearch('')
|
||||
setPage(1)
|
||||
fetchItems('', 1)
|
||||
if (e.key === "Enter") doSearch();
|
||||
if (e.key === "Escape") {
|
||||
setSearchTerm("");
|
||||
setActiveSearch("");
|
||||
setPage(1);
|
||||
fetchItems("", 1);
|
||||
}
|
||||
}}
|
||||
className="pl-9 pr-8"
|
||||
@@ -625,10 +606,10 @@ function SetsView() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSearchTerm('')
|
||||
setActiveSearch('')
|
||||
setPage(1)
|
||||
fetchItems('', 1)
|
||||
setSearchTerm("");
|
||||
setActiveSearch("");
|
||||
setPage(1);
|
||||
fetchItems("", 1);
|
||||
}}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
@@ -650,15 +631,11 @@ function SetsView() {
|
||||
disabled={!!batchProgress}
|
||||
onClick={() =>
|
||||
setSelected((prev) =>
|
||||
prev.size === importable.length
|
||||
? new Set()
|
||||
: new Set(importable.map((it) => itemKey(it))),
|
||||
prev.size === importable.length ? new Set() : new Set(importable.map((it) => itemKey(it))),
|
||||
)
|
||||
}
|
||||
>
|
||||
{selected.size === importable.length
|
||||
? 'Deselect page'
|
||||
: `Select page (${importable.length})`}
|
||||
{selected.size === importable.length ? "Deselect page" : `Select page (${importable.length})`}
|
||||
</Button>
|
||||
{selected.size > 0 && (
|
||||
<Button size="sm" className="h-8" onClick={importSelected} disabled={!!batchProgress}>
|
||||
@@ -688,27 +665,22 @@ function SetsView() {
|
||||
{!loading && items.length === 0 && !error && (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<Shirt className="w-12 h-12 mx-auto mb-3 opacity-50" />
|
||||
<p className="text-sm">No sets found{activeSearch ? ` for "${activeSearch}"` : ''}</p>
|
||||
<p className="text-sm">No sets found{activeSearch ? ` for "${activeSearch}"` : ""}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{items.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")}>
|
||||
{items.map((it) => {
|
||||
const key = itemKey(it)
|
||||
const isSelected = selected.has(key)
|
||||
const key = itemKey(it);
|
||||
const isSelected = selected.has(key);
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className={cn(
|
||||
'rounded-lg border overflow-hidden bg-card relative hover:border-border transition-all',
|
||||
it.present && '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",
|
||||
it.present && "ring-1 ring-[var(--admin-success)]/30",
|
||||
isSelected && "ring-2 ring-primary border-primary",
|
||||
)}
|
||||
>
|
||||
{!it.present && (
|
||||
@@ -716,10 +688,10 @@ function SetsView() {
|
||||
type="button"
|
||||
onClick={() => toggle(key)}
|
||||
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" />}
|
||||
@@ -772,7 +744,7 @@ function SetsView() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
@@ -787,7 +759,7 @@ function SetsView() {
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={page <= 1 || loading}
|
||||
onClick={() => goPage('prev')}
|
||||
onClick={() => goPage("prev")}
|
||||
>
|
||||
← Prev
|
||||
</Button>
|
||||
@@ -795,7 +767,7 @@ function SetsView() {
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={page >= lastPage || loading}
|
||||
onClick={() => goPage('next')}
|
||||
onClick={() => goPage("next")}
|
||||
>
|
||||
Next →
|
||||
</Button>
|
||||
@@ -803,36 +775,36 @@ function SetsView() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// ── Root component with mode toggle ──────────────────────────────────────────
|
||||
|
||||
export function ImportClothingClient() {
|
||||
const [mode, setMode] = useState<Mode>('libs')
|
||||
const [mode, setMode] = useState<Mode>("libs");
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-1 rounded-lg border p-1 w-fit">
|
||||
<Button
|
||||
size="sm"
|
||||
variant={mode === 'libs' ? 'default' : 'ghost'}
|
||||
variant={mode === "libs" ? "default" : "ghost"}
|
||||
className="h-7 text-xs"
|
||||
onClick={() => setMode('libs')}
|
||||
onClick={() => setMode("libs")}
|
||||
>
|
||||
Librerie
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={mode === 'sets' ? 'default' : 'ghost'}
|
||||
variant={mode === "sets" ? "default" : "ghost"}
|
||||
className="h-7 text-xs"
|
||||
onClick={() => setMode('sets')}
|
||||
onClick={() => setMode("sets")}
|
||||
>
|
||||
Vestiti (set)
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{mode === 'libs' ? <LibsView /> : <SetsView />}
|
||||
{mode === "libs" ? <LibsView /> : <SetsView />}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -9,5 +9,5 @@ export default function Loading() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
import { redirect } from 'next/navigation'
|
||||
import { canAccess, getAdminContext, PERMS } from '@/lib/permissions'
|
||||
import { ImportClothingClient } from './import-clothing-client'
|
||||
import { redirect } from "next/navigation";
|
||||
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
|
||||
import { ImportClothingClient } from "./import-clothing-client";
|
||||
|
||||
export default async function ImportClothingPage(_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 <ImportClothingClient />
|
||||
return <ImportClothingClient />;
|
||||
}
|
||||
Reference in new issue
Block a user