522 lines
19 KiB
TypeScript
522 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowLeft, HardHat, Loader2, Package, Pencil, Plus, Save, Trash2 } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { createBcItem, deleteBcItem, updateBcItem, updateBcPage } from "@/actions/catalog-bc";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { useServerAction } from "@/hooks/use-server-action";
|
|
|
|
// ── Types ────────────────────────────────────────────────────────────
|
|
|
|
export interface BcPageData {
|
|
id: number;
|
|
parentId: number;
|
|
caption: string;
|
|
pageLayout: string;
|
|
iconColor: number;
|
|
iconImage: number;
|
|
orderNum: number;
|
|
visible: string;
|
|
enabled: string;
|
|
pageHeadline: string;
|
|
pageTeaser: string;
|
|
pageSpecial: string;
|
|
pageText1: string;
|
|
pageText2: string;
|
|
pageTextDetails: string;
|
|
pageTextTeaser: string;
|
|
}
|
|
|
|
export interface BcItemData {
|
|
id: number;
|
|
pageId: number;
|
|
itemIds: string;
|
|
catalogName: string;
|
|
orderNumber: number;
|
|
extradata: string;
|
|
}
|
|
|
|
interface BcPageDetailProps {
|
|
page: BcPageData;
|
|
items: BcItemData[];
|
|
canEdit: boolean;
|
|
}
|
|
|
|
// ── Main Component ───────────────────────────────────────────────────
|
|
|
|
export function BcPageDetail({ page, items, canEdit }: BcPageDetailProps) {
|
|
const { isPending, run } = useServerAction();
|
|
const formRef = useRef<HTMLFormElement>(null);
|
|
const [editingItem, setEditingItem] = useState<BcItemData | null>(null);
|
|
const [addingItem, setAddingItem] = useState(false);
|
|
|
|
const [form, setForm] = useState({
|
|
caption: page.caption,
|
|
orderNum: page.orderNum,
|
|
enabled: page.enabled as "0" | "1",
|
|
visible: page.visible as "0" | "1",
|
|
pageHeadline: page.pageHeadline,
|
|
pageTeaser: page.pageTeaser,
|
|
pageSpecial: page.pageSpecial,
|
|
pageText1: page.pageText1,
|
|
pageText2: page.pageText2,
|
|
pageTextDetails: page.pageTextDetails,
|
|
pageTextTeaser: page.pageTextTeaser,
|
|
});
|
|
|
|
// Ctrl+S / Cmd+S to save
|
|
useEffect(() => {
|
|
if (!canEdit) return;
|
|
function onKeyDown(e: KeyboardEvent) {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === "s") {
|
|
e.preventDefault();
|
|
formRef.current?.requestSubmit();
|
|
}
|
|
}
|
|
document.addEventListener("keydown", onKeyDown);
|
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
}, [canEdit]);
|
|
|
|
function update<K extends keyof typeof form>(key: K, value: (typeof form)[K]) {
|
|
setForm((prev) => ({ ...prev, [key]: value }));
|
|
}
|
|
|
|
function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
run(() => updateBcPage({ id: page.id, ...form }), {
|
|
successMessage: "BC page updated and catalog synced.",
|
|
errorMessage: "Failed to update.",
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-3">
|
|
<Link
|
|
href="/admin/catalog?catalog=bc"
|
|
className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
BC Catalog
|
|
</Link>
|
|
<span className="text-muted-foreground">/</span>
|
|
<div className="flex items-center gap-2">
|
|
<HardHat className="h-5 w-5 text-[var(--admin-warning)]" />
|
|
<h1 className="text-2xl font-bold tracking-tight">{page.caption}</h1>
|
|
<Badge variant="outline" className="font-mono text-xs">
|
|
#{page.id}
|
|
</Badge>
|
|
<Badge variant="secondary" className="font-mono text-xs">
|
|
{page.pageLayout}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
<form ref={formRef} onSubmit={handleSubmit}>
|
|
<div className="grid gap-4 lg:grid-cols-3">
|
|
{/* ── Left column: form fields ─────────────── */}
|
|
<div className="lg:col-span-2 space-y-4">
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-base">Page Settings</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="caption">Caption</Label>
|
|
<Input
|
|
id="caption"
|
|
value={form.caption}
|
|
onChange={(e) => update("caption", e.target.value)}
|
|
disabled={!canEdit}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="orderNum">Order</Label>
|
|
<Input
|
|
id="orderNum"
|
|
type="number"
|
|
value={form.orderNum}
|
|
onChange={(e) => update("orderNum", parseInt(e.target.value, 10) || 0)}
|
|
disabled={!canEdit}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>Headline</Label>
|
|
<Input
|
|
value={form.pageHeadline}
|
|
onChange={(e) => update("pageHeadline", e.target.value)}
|
|
disabled={!canEdit}
|
|
placeholder="Headline image path"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Teaser</Label>
|
|
<Input
|
|
value={form.pageTeaser}
|
|
onChange={(e) => update("pageTeaser", e.target.value)}
|
|
disabled={!canEdit}
|
|
placeholder="Teaser image path"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label>Text 1</Label>
|
|
<Textarea
|
|
value={form.pageText1}
|
|
onChange={(e) => update("pageText1", e.target.value)}
|
|
disabled={!canEdit}
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Text 2</Label>
|
|
<Textarea
|
|
value={form.pageText2}
|
|
onChange={(e) => update("pageText2", e.target.value)}
|
|
disabled={!canEdit}
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label>Details</Label>
|
|
<Textarea
|
|
value={form.pageTextDetails}
|
|
onChange={(e) => update("pageTextDetails", e.target.value)}
|
|
disabled={!canEdit}
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Text Teaser</Label>
|
|
<Textarea
|
|
value={form.pageTextTeaser}
|
|
onChange={(e) => update("pageTextTeaser", e.target.value)}
|
|
disabled={!canEdit}
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>Special</Label>
|
|
<Textarea
|
|
value={form.pageSpecial}
|
|
onChange={(e) => update("pageSpecial", e.target.value)}
|
|
disabled={!canEdit}
|
|
rows={2}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Items */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
<Package className="h-4 w-4" />
|
|
Items ({items.length})
|
|
</CardTitle>
|
|
{canEdit && (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-7 text-xs"
|
|
onClick={() => setAddingItem(true)}
|
|
>
|
|
<Plus className="h-3 w-3 mr-1" />
|
|
Add Item
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{items.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground text-center py-4">No items in this page.</p>
|
|
) : (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="text-xs">ID</TableHead>
|
|
<TableHead className="text-xs">Name</TableHead>
|
|
<TableHead className="text-xs">Item IDs</TableHead>
|
|
<TableHead className="text-xs">Order</TableHead>
|
|
<TableHead className="text-xs">Extra Data</TableHead>
|
|
{canEdit && <TableHead className="text-xs w-20">Actions</TableHead>}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{items.map((item) => (
|
|
<TableRow key={item.id}>
|
|
<TableCell className="text-xs font-mono">{item.id}</TableCell>
|
|
<TableCell className="text-xs font-medium">{item.catalogName}</TableCell>
|
|
<TableCell className="text-xs font-mono text-muted-foreground">
|
|
{item.itemIds}
|
|
</TableCell>
|
|
<TableCell className="text-xs">{item.orderNumber}</TableCell>
|
|
<TableCell className="text-xs text-muted-foreground max-w-32 truncate">
|
|
{item.extradata || "\u2014"}
|
|
</TableCell>
|
|
{canEdit && (
|
|
<TableCell>
|
|
<div className="flex gap-1">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-6 w-6 p-0"
|
|
onClick={() => setEditingItem(item)}
|
|
>
|
|
<Pencil className="h-3 w-3" />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-6 w-6 p-0 text-[var(--admin-error)] hover:text-[var(--admin-error)]"
|
|
onClick={() => {
|
|
if (!confirm(`Delete item "${item.catalogName}"?`)) return;
|
|
run(() => deleteBcItem({ id: item.id }), {
|
|
successMessage: "Item deleted.",
|
|
});
|
|
}}
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
)}
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* ── Right column: status ─────────────────── */}
|
|
<div className="lg:col-span-1">
|
|
<Card className="lg:sticky lg:top-4">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-base">Status</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-3">
|
|
<ToggleRow
|
|
id="tg-enabled"
|
|
label="Enabled"
|
|
description="Active in the BC catalog"
|
|
checked={form.enabled === "1"}
|
|
onChange={(v) => update("enabled", v ? "1" : "0")}
|
|
disabled={!canEdit}
|
|
/>
|
|
<ToggleRow
|
|
id="tg-visible"
|
|
label="Visible"
|
|
description="Shown in BC navigation"
|
|
checked={form.visible === "1"}
|
|
onChange={(v) => update("visible", v ? "1" : "0")}
|
|
disabled={!canEdit}
|
|
/>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="flex items-center gap-4 border-t pt-3 text-xs text-muted-foreground">
|
|
<span>
|
|
Layout: <span className="font-mono">{page.pageLayout}</span>
|
|
</span>
|
|
<span>
|
|
Parent:{" "}
|
|
<span className="font-mono">{page.parentId <= 0 ? "Root" : `#${page.parentId}`}</span>
|
|
</span>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
{canEdit && (
|
|
<div className="space-y-2 border-t pt-3">
|
|
<Button type="submit" disabled={isPending} className="w-full">
|
|
{isPending ? (
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Save className="mr-2 h-4 w-4" />
|
|
)}
|
|
Save & Sync
|
|
</Button>
|
|
<p className="text-center text-[10px] text-muted-foreground">
|
|
Press <kbd className="rounded border px-1">Ctrl+S</kbd> to save
|
|
</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
{/* Edit Item Dialog */}
|
|
{editingItem && (
|
|
<ItemDialog
|
|
item={editingItem}
|
|
mode="edit"
|
|
isPending={isPending}
|
|
onClose={() => setEditingItem(null)}
|
|
onSubmit={(data) => {
|
|
run(() => updateBcItem({ id: editingItem.id, ...data }), {
|
|
successMessage: "Item updated.",
|
|
onSuccess: () => setEditingItem(null),
|
|
});
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Add Item Dialog */}
|
|
{addingItem && (
|
|
<ItemDialog
|
|
item={{
|
|
id: 0,
|
|
pageId: page.id,
|
|
itemIds: "",
|
|
catalogName: "",
|
|
orderNumber: 1,
|
|
extradata: "",
|
|
}}
|
|
mode="add"
|
|
isPending={isPending}
|
|
onClose={() => setAddingItem(false)}
|
|
onSubmit={(data) => {
|
|
run(() => createBcItem({ pageId: page.id, ...data }), {
|
|
successMessage: "Item created.",
|
|
onSuccess: () => setAddingItem(false),
|
|
});
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Toggle row ───────────────────────────────────────────────────────
|
|
|
|
function ToggleRow({
|
|
id,
|
|
label,
|
|
description,
|
|
checked,
|
|
onChange,
|
|
disabled,
|
|
}: {
|
|
id: string;
|
|
label: string;
|
|
description: string;
|
|
checked: boolean;
|
|
onChange: (v: boolean) => void;
|
|
disabled?: boolean;
|
|
}) {
|
|
return (
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<Label htmlFor={id} className="text-sm font-medium cursor-pointer">
|
|
{label}
|
|
</Label>
|
|
<p className="text-[11px] text-muted-foreground">{description}</p>
|
|
</div>
|
|
<Switch id={id} checked={checked} onCheckedChange={onChange} disabled={disabled} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Item Dialog ──────────────────────────────────────────────────────
|
|
|
|
function ItemDialog({
|
|
item,
|
|
mode,
|
|
isPending,
|
|
onClose,
|
|
onSubmit,
|
|
}: {
|
|
item: BcItemData;
|
|
mode: "add" | "edit";
|
|
isPending: boolean;
|
|
onClose: () => void;
|
|
onSubmit: (data: { itemIds: string; catalogName: string; orderNumber: number; extradata: string }) => void;
|
|
}) {
|
|
const [form, setForm] = useState({
|
|
itemIds: item.itemIds,
|
|
catalogName: item.catalogName,
|
|
orderNumber: item.orderNumber,
|
|
extradata: item.extradata,
|
|
});
|
|
|
|
return (
|
|
<Dialog open onOpenChange={(open) => !open && onClose()}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{mode === "add" ? "Add BC Item" : `Edit Item #${item.id}`}</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4 py-2">
|
|
<div className="space-y-2">
|
|
<Label>Catalog Name</Label>
|
|
<Input
|
|
value={form.catalogName}
|
|
onChange={(e) => setForm((f) => ({ ...f, catalogName: e.target.value }))}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Item IDs (semicolon-separated)</Label>
|
|
<Input
|
|
value={form.itemIds}
|
|
onChange={(e) => setForm((f) => ({ ...f, itemIds: e.target.value }))}
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label>Order</Label>
|
|
<Input
|
|
type="number"
|
|
value={form.orderNumber}
|
|
onChange={(e) => setForm((f) => ({ ...f, orderNumber: parseInt(e.target.value, 10) || 0 }))}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Extra Data</Label>
|
|
<Input
|
|
value={form.extradata}
|
|
onChange={(e) => setForm((f) => ({ ...f, extradata: e.target.value }))}
|
|
placeholder="Optional"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={onClose} disabled={isPending}>
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={() => onSubmit(form)} disabled={isPending || !form.catalogName || !form.itemIds}>
|
|
{isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
{mode === "add" ? "Add Item" : "Save"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|