920 lines
27 KiB
TypeScript
920 lines
27 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
ChevronRight,
|
|
ChevronsDownUp,
|
|
ChevronsUpDown,
|
|
Copy,
|
|
Eye,
|
|
EyeOff,
|
|
EyeOff as EyeOffIcon,
|
|
FolderTree,
|
|
Loader2,
|
|
Package,
|
|
Pencil,
|
|
Plus,
|
|
Power,
|
|
PowerOff,
|
|
Search,
|
|
ToggleLeft,
|
|
ToggleRight,
|
|
Trash2,
|
|
X,
|
|
} from "lucide-react";
|
|
import { useRouter } from "next/navigation";
|
|
import {
|
|
createContext,
|
|
useCallback,
|
|
useContext,
|
|
useEffect,
|
|
useRef,
|
|
useState,
|
|
} from "react";
|
|
import { toast } from "sonner";
|
|
import { useConfirmDialog } from "@/components/admin/confirm-dialog";
|
|
import Link from "@/components/link";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
ContextMenu,
|
|
ContextMenuContent,
|
|
ContextMenuItem,
|
|
ContextMenuLabel,
|
|
ContextMenuSeparator,
|
|
ContextMenuTrigger,
|
|
} from "@/components/ui/context-menu";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { adminFetch } from "@/lib/admin-fetch";
|
|
import { catalogueIconUrl } from "@/lib/catalog-assets";
|
|
import { translateCaption } from "@/lib/catalog-translations";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/* ─── Types ──────────────────────────────────────────────── */
|
|
|
|
interface TreeNode {
|
|
id: number;
|
|
caption: string;
|
|
parentId: number;
|
|
enabled: string;
|
|
visible: string;
|
|
iconImage: number;
|
|
iconColor: number;
|
|
pageLayout: string;
|
|
childCount: number;
|
|
itemCount: number;
|
|
}
|
|
|
|
interface CatalogTreeProps {
|
|
rootPages: TreeNode[];
|
|
catalogType?: "normal" | "bc";
|
|
}
|
|
|
|
/* ─── Context for expand/collapse all ────────────────────── */
|
|
|
|
interface TreeContext {
|
|
expandSignal: number;
|
|
collapseSignal: number;
|
|
filterMode: FilterMode;
|
|
onToggleEnabled: (node: TreeNode) => void;
|
|
onToggleVisible: (node: TreeNode) => void;
|
|
onDeletePage: (node: TreeNode) => void;
|
|
searchQuery: string;
|
|
catalogType: "normal" | "bc";
|
|
}
|
|
|
|
const TreeCtx = createContext<TreeContext>({
|
|
expandSignal: 0,
|
|
collapseSignal: 0,
|
|
filterMode: "all",
|
|
onToggleEnabled: () => {},
|
|
onToggleVisible: () => {},
|
|
onDeletePage: () => {},
|
|
searchQuery: "",
|
|
catalogType: "normal",
|
|
});
|
|
|
|
/* ─── Catalog Icon ───────────────────────────────────────── */
|
|
|
|
export function CatalogIcon({
|
|
iconImage,
|
|
size = 20,
|
|
}: {
|
|
iconImage: number;
|
|
size?: number;
|
|
}) {
|
|
const [error, setError] = useState(false);
|
|
|
|
if (error || iconImage <= 0) {
|
|
return <Package className="h-4 w-4 text-muted-foreground shrink-0" />;
|
|
}
|
|
|
|
return (
|
|
<img
|
|
src={catalogueIconUrl(iconImage)}
|
|
alt=""
|
|
width={size}
|
|
height={size}
|
|
className="shrink-0 object-contain"
|
|
style={{ imageRendering: "pixelated", minWidth: size, minHeight: size }}
|
|
onError={() => setError(true)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
/* ─── Layout label helper ────────────────────────────────── */
|
|
|
|
export const LAYOUT_COLORS: Record<string, string> = {
|
|
default_3x3:
|
|
"bg-[var(--admin-info-subtle)] text-[var(--admin-info)] dark:text-[var(--admin-info)]",
|
|
frontpage:
|
|
"bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)] dark:text-[var(--admin-warning)]",
|
|
spaces_new:
|
|
"bg-[var(--admin-success-subtle)] text-[var(--admin-success)] dark:text-[var(--admin-success)]",
|
|
pets: "bg-[var(--admin-error)]/15 text-[var(--admin-error)]",
|
|
pets2: "bg-[var(--admin-error)]/15 text-[var(--admin-error)]",
|
|
pets3: "bg-[var(--admin-error)]/15 text-[var(--admin-error)]",
|
|
marketplace: "bg-[var(--admin-accent)]/15 text-[var(--admin-accent-text)]",
|
|
recycler:
|
|
"bg-[var(--admin-success-subtle)] text-[var(--admin-success)] dark:text-[var(--admin-success)]",
|
|
club_buy:
|
|
"bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)] dark:text-[var(--admin-warning)]",
|
|
single_bundle:
|
|
"bg-[var(--admin-info-subtle)] text-[var(--admin-info)] dark:text-[var(--admin-info)]",
|
|
room_bundle:
|
|
"bg-[var(--admin-info-subtle)] text-[var(--admin-info)] dark:text-[var(--admin-info)]",
|
|
};
|
|
|
|
/* ─── Highlight matched text ─────────────────────────────── */
|
|
|
|
function HighlightText({ text, query }: { text: string; query: string }) {
|
|
if (!query.trim()) return <>{text}</>;
|
|
const idx = text.toLowerCase().indexOf(query.toLowerCase());
|
|
if (idx === -1) return <>{text}</>;
|
|
return (
|
|
<>
|
|
{text.slice(0, idx)}
|
|
<mark className="bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)] rounded-sm px-0.5">
|
|
{text.slice(idx, idx + query.length)}
|
|
</mark>
|
|
{text.slice(idx + query.length)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
/* ─── Main Tree Component ────────────────────────────────── */
|
|
|
|
type FilterMode = "all" | "enabled" | "disabled";
|
|
|
|
export function CatalogTree({
|
|
rootPages,
|
|
catalogType = "normal",
|
|
}: CatalogTreeProps) {
|
|
const router = useRouter();
|
|
const { confirm, dialog: confirmDialog } = useConfirmDialog();
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [searchResults, setSearchResults] = useState<TreeNode[] | null>(null);
|
|
const [searching, setSearching] = useState(false);
|
|
const searchTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
const searchInputRef = useRef<HTMLInputElement>(null);
|
|
const [expandSignal, setExpandSignal] = useState(0);
|
|
const [collapseSignal, setCollapseSignal] = useState(0);
|
|
const [filterMode, setFilterMode] = useState<FilterMode>("all");
|
|
|
|
// "/" keyboard shortcut to focus search
|
|
useEffect(() => {
|
|
function onKeyDown(e: KeyboardEvent) {
|
|
if (e.key === "/" && !e.metaKey && !e.ctrlKey && !e.altKey) {
|
|
const tag = (e.target as HTMLElement)?.tagName;
|
|
if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
|
|
e.preventDefault();
|
|
searchInputRef.current?.focus();
|
|
}
|
|
}
|
|
document.addEventListener("keydown", onKeyDown);
|
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
}, []);
|
|
|
|
// Debounced search
|
|
useEffect(() => {
|
|
if (!searchQuery.trim()) {
|
|
setSearchResults(null);
|
|
return;
|
|
}
|
|
|
|
if (searchTimeout.current) clearTimeout(searchTimeout.current);
|
|
searchTimeout.current = setTimeout(async () => {
|
|
setSearching(true);
|
|
try {
|
|
const catParam = catalogType === "bc" ? "&catalog=bc" : "";
|
|
const res = await adminFetch(
|
|
`/api/admin/catalog/tree?search=${encodeURIComponent(searchQuery.trim())}${catParam}`,
|
|
);
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setSearchResults(data.pages || []);
|
|
}
|
|
} catch (error) {
|
|
console.error("[CatalogTree] Search failed:", error);
|
|
} finally {
|
|
setSearching(false);
|
|
}
|
|
}, 300);
|
|
|
|
return () => {
|
|
if (searchTimeout.current) clearTimeout(searchTimeout.current);
|
|
};
|
|
}, [searchQuery, catalogType]);
|
|
|
|
// Quick actions from context menu
|
|
const catParam = catalogType === "bc" ? "&catalog=bc" : "";
|
|
const catBody = catalogType === "bc" ? ', "catalog": "bc"' : "";
|
|
|
|
const handleToggleEnabled = useCallback(
|
|
async (node: TreeNode) => {
|
|
try {
|
|
const res = await adminFetch("/api/admin/catalog/tree", {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: `{"pageId":${node.id},"toggleField":"toggleEnabled"${catBody}}`,
|
|
});
|
|
if (!res.ok) throw new Error();
|
|
toast.success(
|
|
`${node.caption} ${node.enabled === "1" ? "disabled" : "enabled"}`,
|
|
);
|
|
router.refresh();
|
|
} catch {
|
|
toast.error("Failed to toggle. Open the page to edit.");
|
|
}
|
|
},
|
|
[router, catBody],
|
|
);
|
|
|
|
const handleToggleVisible = useCallback(
|
|
async (node: TreeNode) => {
|
|
try {
|
|
const res = await adminFetch("/api/admin/catalog/tree", {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: `{"pageId":${node.id},"toggleField":"toggleVisible"${catBody}}`,
|
|
});
|
|
if (!res.ok) throw new Error();
|
|
toast.success(
|
|
`${node.caption} ${node.visible === "1" ? "hidden" : "visible"}`,
|
|
);
|
|
router.refresh();
|
|
} catch {
|
|
toast.error("Failed to toggle. Open the page to edit.");
|
|
}
|
|
},
|
|
[router, catBody],
|
|
);
|
|
|
|
const handleDeletePage = useCallback(
|
|
async (node: TreeNode) => {
|
|
const childInfo =
|
|
node.childCount > 0
|
|
? ` Its ${node.childCount} child page(s) will be moved to parent.`
|
|
: "";
|
|
const itemInfo =
|
|
node.itemCount > 0 ? ` ${node.itemCount} item(s) will be deleted.` : "";
|
|
const ok = await confirm({
|
|
title: "Delete page",
|
|
description: `Delete "${node.caption}"?${childInfo}${itemInfo}`,
|
|
confirmLabel: "Delete",
|
|
});
|
|
if (!ok) return;
|
|
|
|
try {
|
|
const res = await adminFetch(
|
|
`/api/admin/catalog/tree?pageId=${node.id}&mode=reparent${catParam}`,
|
|
{
|
|
method: "DELETE",
|
|
},
|
|
);
|
|
if (!res.ok) throw new Error();
|
|
toast.success(`"${node.caption}" deleted`);
|
|
router.refresh();
|
|
} catch {
|
|
toast.error("Failed to delete page.");
|
|
}
|
|
},
|
|
[router, catParam, confirm],
|
|
);
|
|
|
|
const unfilteredPages = searchResults ?? rootPages;
|
|
const displayPages =
|
|
filterMode === "all"
|
|
? unfilteredPages
|
|
: unfilteredPages.filter((p) =>
|
|
filterMode === "enabled" ? p.enabled === "1" : p.enabled !== "1",
|
|
);
|
|
|
|
return (
|
|
<TreeCtx.Provider
|
|
value={{
|
|
expandSignal,
|
|
collapseSignal,
|
|
filterMode,
|
|
searchQuery: searchResults !== null ? searchQuery : "",
|
|
onToggleEnabled: handleToggleEnabled,
|
|
onToggleVisible: handleToggleVisible,
|
|
onDeletePage: handleDeletePage,
|
|
catalogType,
|
|
}}
|
|
>
|
|
{confirmDialog}
|
|
<TooltipProvider delayDuration={400}>
|
|
<div className="rounded-lg border bg-card shadow-sm">
|
|
{/* Header */}
|
|
<div className="border-b px-4 py-3 flex items-center justify-between gap-3">
|
|
<div className="flex items-center gap-2">
|
|
<FolderTree className="h-4 w-4 text-primary" />
|
|
<h3 className="text-sm font-semibold">Catalog Structure</h3>
|
|
<Badge variant="secondary" className="text-[10px] h-5">
|
|
{displayPages.length}
|
|
{filterMode !== "all" ? ` / ${unfilteredPages.length}` : ""}{" "}
|
|
pages
|
|
</Badge>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
{/* Status filter */}
|
|
<div className="flex items-center rounded-md border bg-muted/30 p-0.5">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
onClick={() => setFilterMode("all")}
|
|
className={cn(
|
|
"px-2 py-1 rounded text-xs font-medium transition-colors",
|
|
filterMode === "all"
|
|
? "bg-background shadow-sm text-foreground"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
)}
|
|
>
|
|
All
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<p>Show all pages</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
onClick={() => setFilterMode("enabled")}
|
|
className={cn(
|
|
"px-2 py-1 rounded text-xs font-medium transition-colors flex items-center gap-1",
|
|
filterMode === "enabled"
|
|
? "bg-background shadow-sm text-[var(--admin-success)] dark:text-[var(--admin-success)]"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
)}
|
|
>
|
|
<ToggleRight className="h-3 w-3" />
|
|
On
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<p>Show enabled only</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
onClick={() => setFilterMode("disabled")}
|
|
className={cn(
|
|
"px-2 py-1 rounded text-xs font-medium transition-colors flex items-center gap-1",
|
|
filterMode === "disabled"
|
|
? "bg-background shadow-sm text-[var(--admin-error)] dark:text-[var(--admin-error)]"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
)}
|
|
>
|
|
<ToggleLeft className="h-3 w-3" />
|
|
Off
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<p>Show disabled only</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
|
|
{/* Expand / Collapse all */}
|
|
{searchResults === null && (
|
|
<>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8"
|
|
onClick={() => setExpandSignal((s) => s + 1)}
|
|
>
|
|
<ChevronsUpDown className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<p>Expand all</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8"
|
|
onClick={() => setCollapseSignal((s) => s + 1)}
|
|
>
|
|
<ChevronsDownUp className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<p>Collapse all</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</>
|
|
)}
|
|
|
|
{/* Search */}
|
|
<div className="relative w-56">
|
|
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
|
|
<Input
|
|
ref={searchInputRef}
|
|
placeholder="Search pages... /"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="h-8 pl-8 pr-8 text-sm"
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Escape") {
|
|
setSearchQuery("");
|
|
searchInputRef.current?.blur();
|
|
}
|
|
}}
|
|
/>
|
|
{searching ? (
|
|
<Loader2 className="absolute right-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 animate-spin text-muted-foreground" />
|
|
) : (
|
|
searchQuery && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setSearchQuery("")}
|
|
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
|
>
|
|
<X className="h-3.5 w-3.5" />
|
|
</button>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tree body */}
|
|
<div className="p-1.5 max-h-[calc(100vh-280px)] overflow-y-auto">
|
|
{searchResults !== null && (
|
|
<div className="px-2 py-1.5 mb-1 flex items-center justify-between">
|
|
<p className="text-xs text-muted-foreground">
|
|
{searchResults.length} result
|
|
{searchResults.length !== 1 ? "s" : ""} for "
|
|
{searchQuery}"
|
|
</p>
|
|
</div>
|
|
)}
|
|
{displayPages.map((page) => (
|
|
<TreeItem
|
|
key={page.id}
|
|
node={page}
|
|
level={0}
|
|
isSearchResult={searchResults !== null}
|
|
defaultExpanded={searchResults === null}
|
|
/>
|
|
))}
|
|
{displayPages.length === 0 && (
|
|
<p className="text-sm text-muted-foreground text-center py-8">
|
|
{searchResults !== null
|
|
? "No pages match your search"
|
|
: "No catalog pages found"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</TooltipProvider>
|
|
</TreeCtx.Provider>
|
|
);
|
|
}
|
|
|
|
/* ─── Tree Item ──────────────────────────────────────────── */
|
|
|
|
function TreeItem({
|
|
node,
|
|
level,
|
|
isSearchResult,
|
|
defaultExpanded,
|
|
}: {
|
|
node: TreeNode;
|
|
level: number;
|
|
isSearchResult?: boolean;
|
|
defaultExpanded?: boolean;
|
|
}) {
|
|
void isSearchResult;
|
|
const {
|
|
expandSignal,
|
|
collapseSignal,
|
|
filterMode,
|
|
searchQuery,
|
|
onToggleEnabled,
|
|
onToggleVisible,
|
|
onDeletePage,
|
|
catalogType,
|
|
} = useContext(TreeCtx);
|
|
const router = useRouter();
|
|
const [expanded, setExpanded] = useState(false);
|
|
const [children, setChildren] = useState<TreeNode[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [loaded, setLoaded] = useState(false);
|
|
const hasChildren = node.childCount > 0;
|
|
|
|
const loadChildren = useCallback(async () => {
|
|
if (loaded || !hasChildren) return;
|
|
setLoading(true);
|
|
try {
|
|
const catParam = catalogType === "bc" ? "&catalog=bc" : "";
|
|
const res = await adminFetch(
|
|
`/api/admin/catalog/tree?parentId=${node.id}${catParam}`,
|
|
);
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setChildren(data.pages || []);
|
|
setLoaded(true);
|
|
}
|
|
} catch (error) {
|
|
console.error("[CatalogTree] Failed to load children:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [node.id, loaded, hasChildren, catalogType]);
|
|
|
|
// Auto-expand root level on mount
|
|
useEffect(() => {
|
|
if (defaultExpanded && level === 0 && hasChildren && !loaded) {
|
|
loadChildren().then(() => setExpanded(true));
|
|
}
|
|
}, [defaultExpanded, level, hasChildren, loaded, loadChildren]);
|
|
|
|
// Expand all signal
|
|
useEffect(() => {
|
|
if (expandSignal > 0 && hasChildren) {
|
|
if (!loaded) {
|
|
loadChildren().then(() => setExpanded(true));
|
|
} else {
|
|
setExpanded(true);
|
|
}
|
|
}
|
|
}, [expandSignal, hasChildren, loaded, loadChildren]);
|
|
|
|
// Collapse all signal
|
|
useEffect(() => {
|
|
if (collapseSignal > 0) {
|
|
setExpanded(false);
|
|
}
|
|
}, [collapseSignal]);
|
|
|
|
const handleToggle = () => {
|
|
if (!expanded && !loaded) {
|
|
loadChildren().then(() => setExpanded(true));
|
|
return;
|
|
}
|
|
setExpanded(!expanded);
|
|
};
|
|
|
|
const isDisabled = node.enabled !== "1";
|
|
const isHidden = node.visible !== "1";
|
|
const isEmpty = node.itemCount === 0 && node.childCount === 0;
|
|
const layoutColor =
|
|
LAYOUT_COLORS[node.pageLayout] || "bg-muted text-muted-foreground";
|
|
const italianName = translateCaption(node.caption);
|
|
const displayName = italianName ?? node.caption;
|
|
|
|
return (
|
|
<div>
|
|
<ContextMenu>
|
|
<ContextMenuTrigger asChild>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
{/* biome-ignore lint/a11y/useSemanticElements: wrapped by Tooltip+ContextMenuTrigger asChild (Radix); a real button nests button-in-button when expanded */}
|
|
<div
|
|
role="button"
|
|
tabIndex={0}
|
|
className={cn(
|
|
"flex items-center gap-1.5 rounded-md px-2 py-1 hover:bg-accent/60 group transition-colors cursor-default",
|
|
isDisabled && "opacity-40",
|
|
isEmpty && !isDisabled && "opacity-60",
|
|
)}
|
|
style={{ paddingLeft: `${level * 20 + 8}px` }}
|
|
onDoubleClick={() =>
|
|
router.push(
|
|
catalogType === "bc"
|
|
? `/admin/catalog/builder-club/${node.id}`
|
|
: `/admin/catalog/${node.id}`,
|
|
)
|
|
}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
router.push(
|
|
catalogType === "bc"
|
|
? `/admin/catalog/builder-club/${node.id}`
|
|
: `/admin/catalog/${node.id}`,
|
|
);
|
|
}
|
|
}}
|
|
>
|
|
{/* Expand/collapse toggle */}
|
|
{hasChildren ? (
|
|
<button
|
|
type="button"
|
|
onClick={handleToggle}
|
|
className="flex items-center justify-center h-5 w-5 shrink-0 rounded hover:bg-accent"
|
|
>
|
|
{loading ? (
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
|
|
) : (
|
|
<ChevronRight
|
|
className={cn(
|
|
"h-3.5 w-3.5 text-muted-foreground transition-transform duration-150",
|
|
expanded && "rotate-90",
|
|
)}
|
|
/>
|
|
)}
|
|
</button>
|
|
) : (
|
|
<span className="h-5 w-5 shrink-0" />
|
|
)}
|
|
|
|
{/* Catalog icon */}
|
|
<CatalogIcon iconImage={node.iconImage} />
|
|
|
|
{/* Caption link */}
|
|
<Link
|
|
href={
|
|
catalogType === "bc"
|
|
? `/admin/catalog/builder-club/${node.id}`
|
|
: `/admin/catalog/${node.id}`
|
|
}
|
|
className={cn(
|
|
"flex-1 min-w-0 hover:text-primary transition-colors",
|
|
isEmpty && !isDisabled
|
|
? "text-muted-foreground italic"
|
|
: "",
|
|
)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"text-sm truncate block",
|
|
!isEmpty && "font-medium",
|
|
)}
|
|
>
|
|
<HighlightText text={displayName} query={searchQuery} />
|
|
</span>
|
|
{italianName && (
|
|
<span className="text-[10px] text-muted-foreground truncate block leading-tight">
|
|
<HighlightText text={node.caption} query={searchQuery} />
|
|
</span>
|
|
)}
|
|
</Link>
|
|
|
|
{/* Quick toggle enabled on hover */}
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onToggleEnabled(node);
|
|
}}
|
|
className={cn(
|
|
"flex items-center justify-center h-5 w-5 shrink-0 rounded opacity-0 group-hover:opacity-100 transition-opacity",
|
|
isDisabled
|
|
? "hover:bg-[var(--admin-success-subtle)] text-muted-foreground hover:text-[var(--admin-success)]"
|
|
: "hover:bg-[var(--admin-error-subtle)] text-muted-foreground hover:text-[var(--admin-error)]",
|
|
)}
|
|
>
|
|
{isDisabled ? (
|
|
<Power className="h-3 w-3" />
|
|
) : (
|
|
<PowerOff className="h-3 w-3" />
|
|
)}
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
<p>{isDisabled ? "Enable" : "Disable"}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
|
|
{/* Quick add subpage */}
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
router.push(
|
|
catalogType === "bc"
|
|
? `/admin/catalog?catalog=bc&newPageParent=${node.id}`
|
|
: `/admin/catalog?newPageParent=${node.id}`,
|
|
);
|
|
}}
|
|
className="flex items-center justify-center h-5 w-5 shrink-0 rounded hover:bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-primary"
|
|
>
|
|
<Plus className="h-3 w-3" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
<p>Create subpage</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
|
|
{/* Status indicators */}
|
|
<div className="flex items-center gap-1 shrink-0">
|
|
{isHidden && (
|
|
<EyeOff className="h-3 w-3 text-muted-foreground" />
|
|
)}
|
|
{isDisabled && (
|
|
<Badge
|
|
variant="destructive"
|
|
className="h-4 px-1 text-[9px]"
|
|
>
|
|
OFF
|
|
</Badge>
|
|
)}
|
|
{node.itemCount > 0 && (
|
|
<Badge
|
|
variant="secondary"
|
|
className="h-5 px-1.5 text-[10px] font-mono"
|
|
>
|
|
{node.itemCount}
|
|
</Badge>
|
|
)}
|
|
{/* Layout badge on hover */}
|
|
<Badge
|
|
className={cn(
|
|
"h-5 px-1.5 text-[9px] font-mono opacity-0 group-hover:opacity-100 transition-opacity border-0",
|
|
layoutColor,
|
|
)}
|
|
>
|
|
{node.pageLayout.replace("default_3x3", "3x3")}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right" className="text-xs max-w-72 p-3">
|
|
<p className="font-semibold mb-1.5">
|
|
{node.caption}{" "}
|
|
<span className="text-muted-foreground font-normal">
|
|
#{node.id}
|
|
</span>
|
|
</p>
|
|
<table className="w-full">
|
|
<tbody>
|
|
<tr>
|
|
<td className="text-muted-foreground pr-3 py-px">Layout</td>
|
|
<td className="py-px">{node.pageLayout}</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="text-muted-foreground pr-3 py-px">Items</td>
|
|
<td className="py-px">{node.itemCount}</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="text-muted-foreground pr-3 py-px">
|
|
Subpages
|
|
</td>
|
|
<td className="py-px">{node.childCount}</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="text-muted-foreground pr-3 py-px">Icon</td>
|
|
<td className="py-px">{node.iconImage}</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="text-muted-foreground pr-3 py-px">
|
|
Visible
|
|
</td>
|
|
<td className="py-px">
|
|
{node.visible === "1" ? "Yes" : "No"}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="text-muted-foreground pr-3 py-px">
|
|
Enabled
|
|
</td>
|
|
<td className="py-px">
|
|
{node.enabled === "1" ? "Yes" : "No"}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p className="text-muted-foreground mt-2 text-[10px]">
|
|
Right-click for actions · Double-click to open
|
|
</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</ContextMenuTrigger>
|
|
|
|
{/* Right-click context menu */}
|
|
<ContextMenuContent className="w-48">
|
|
<ContextMenuLabel>
|
|
{node.caption} #{node.id}
|
|
</ContextMenuLabel>
|
|
<ContextMenuItem
|
|
onClick={() =>
|
|
router.push(
|
|
catalogType === "bc"
|
|
? `/admin/catalog/builder-club/${node.id}`
|
|
: `/admin/catalog/${node.id}`,
|
|
)
|
|
}
|
|
>
|
|
<Pencil className="h-4 w-4" />
|
|
Edit Page
|
|
</ContextMenuItem>
|
|
<ContextMenuItem
|
|
onClick={() => navigator.clipboard.writeText(String(node.id))}
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
Copy ID
|
|
</ContextMenuItem>
|
|
<ContextMenuSeparator />
|
|
<ContextMenuItem onClick={() => onToggleEnabled(node)}>
|
|
{node.enabled === "1" ? (
|
|
<PowerOff className="h-4 w-4" />
|
|
) : (
|
|
<Power className="h-4 w-4" />
|
|
)}
|
|
{node.enabled === "1" ? "Disable" : "Enable"}
|
|
</ContextMenuItem>
|
|
<ContextMenuItem onClick={() => onToggleVisible(node)}>
|
|
{node.visible === "1" ? (
|
|
<EyeOffIcon className="h-4 w-4" />
|
|
) : (
|
|
<Eye className="h-4 w-4" />
|
|
)}
|
|
{node.visible === "1" ? "Hide" : "Show"}
|
|
</ContextMenuItem>
|
|
<ContextMenuSeparator />
|
|
<ContextMenuItem
|
|
onClick={() =>
|
|
router.push(
|
|
catalogType === "bc"
|
|
? `/admin/catalog?catalog=bc&newPageParent=${node.id}`
|
|
: `/admin/catalog?newPageParent=${node.id}`,
|
|
)
|
|
}
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Create Subpage
|
|
</ContextMenuItem>
|
|
<ContextMenuSeparator />
|
|
<ContextMenuItem
|
|
variant="destructive"
|
|
onClick={() => onDeletePage(node)}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
Delete
|
|
</ContextMenuItem>
|
|
</ContextMenuContent>
|
|
</ContextMenu>
|
|
|
|
{/* Children */}
|
|
{expanded &&
|
|
children.length > 0 &&
|
|
(() => {
|
|
const filteredChildren =
|
|
filterMode === "all"
|
|
? children
|
|
: children.filter((c) =>
|
|
filterMode === "enabled"
|
|
? c.enabled === "1"
|
|
: c.enabled !== "1",
|
|
);
|
|
return filteredChildren.length > 0 ? (
|
|
<div className="relative">
|
|
{/* Tree guide line */}
|
|
<div
|
|
className="absolute top-0 bottom-0 border-l border-border/40"
|
|
style={{ left: `${level * 20 + 18}px` }}
|
|
/>
|
|
{filteredChildren.map((child) => (
|
|
<TreeItem key={child.id} node={child} level={level + 1} />
|
|
))}
|
|
</div>
|
|
) : null;
|
|
})()}
|
|
</div>
|
|
);
|
|
}
|