feat(housekeeping): cut over administration to ase
This commit is contained in:
Simo committed
1 parent
c9e35cf602
commit
2b8f73a91d
457 files changed
+589
-55936
No files matched your search
@@ -1,273 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
import { updateItemsBase } from "@/actions/items-base";
|
||||
import Link from "@/components/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useServerAction } from "@/hooks/use-server-action";
|
||||
|
||||
export type ItemsBaseEditValues = {
|
||||
id: number;
|
||||
spriteId: number;
|
||||
publicName: string;
|
||||
itemName: string;
|
||||
type: string;
|
||||
width: number;
|
||||
length: number;
|
||||
stackHeight: string;
|
||||
allowStack: number;
|
||||
allowSit: number;
|
||||
allowLay: number;
|
||||
allowWalk: number;
|
||||
allowGift: number;
|
||||
allowTrade: number;
|
||||
allowRecycle: number;
|
||||
allowMarketplaceSell: number;
|
||||
allowInventoryStack: number;
|
||||
interactionType: string;
|
||||
interactionModesCount: number;
|
||||
vendingIds: string;
|
||||
multiheight: string;
|
||||
customparams: string;
|
||||
};
|
||||
|
||||
const ALLOW_FLAGS: Array<{ key: keyof ItemsBaseEditValues; label: string }> = [
|
||||
{ key: "allowStack", label: "Stack" },
|
||||
{ key: "allowSit", label: "Sit" },
|
||||
{ key: "allowLay", label: "Lay" },
|
||||
{ key: "allowWalk", label: "Walk" },
|
||||
{ key: "allowGift", label: "Gift" },
|
||||
{ key: "allowTrade", label: "Trade" },
|
||||
{ key: "allowRecycle", label: "Recycle" },
|
||||
{ key: "allowMarketplaceSell", label: "Marketplace" },
|
||||
{ key: "allowInventoryStack", label: "Inv. stack" },
|
||||
];
|
||||
|
||||
export function ItemsBaseEditForm({
|
||||
initial,
|
||||
canEdit,
|
||||
}: {
|
||||
initial: ItemsBaseEditValues;
|
||||
canEdit: boolean;
|
||||
}) {
|
||||
const t = useTranslations("pages.admin.items");
|
||||
const router = useRouter();
|
||||
const { run, isPending } = useServerAction();
|
||||
const [form, setForm] = useState(initial);
|
||||
|
||||
function setField<K extends keyof ItemsBaseEditValues>(
|
||||
key: K,
|
||||
value: ItemsBaseEditValues[K],
|
||||
) {
|
||||
setForm((prev) => ({ ...prev, [key]: value }));
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
if (!canEdit || isPending) return;
|
||||
const { id, ...fields } = form;
|
||||
run(() => updateItemsBase({ id, fields }), {
|
||||
successMessage: t("saved"),
|
||||
onSuccess: () => router.refresh(),
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground m-0 font-mono">
|
||||
#{form.id}
|
||||
</p>
|
||||
<h2 className="text-xl font-bold m-0">
|
||||
{form.publicName || form.itemName || t("untitled")}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" asChild>
|
||||
<Link href="/admin/items">{t("back")}</Link>
|
||||
</Button>
|
||||
{canEdit ? (
|
||||
<Button onClick={handleSave} disabled={isPending}>
|
||||
{t("save")}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm">{t("sectionIdentity")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div>
|
||||
<Label htmlFor="publicName">{t("publicName")}</Label>
|
||||
<Input
|
||||
id="publicName"
|
||||
value={form.publicName}
|
||||
disabled={!canEdit}
|
||||
onChange={(e) => setField("publicName", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="itemName">{t("itemName")}</Label>
|
||||
<Input
|
||||
id="itemName"
|
||||
value={form.itemName}
|
||||
disabled={!canEdit}
|
||||
className="font-mono"
|
||||
onChange={(e) => setField("itemName", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<Label htmlFor="type">{t("type")}</Label>
|
||||
<Input
|
||||
id="type"
|
||||
value={form.type}
|
||||
disabled={!canEdit}
|
||||
maxLength={3}
|
||||
onChange={(e) => setField("type", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="spriteId">{t("spriteId")}</Label>
|
||||
<Input
|
||||
id="spriteId"
|
||||
type="number"
|
||||
value={form.spriteId}
|
||||
disabled={!canEdit}
|
||||
onChange={(e) => setField("spriteId", Number(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm">{t("sectionDims")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div>
|
||||
<Label htmlFor="width">{t("width")}</Label>
|
||||
<Input
|
||||
id="width"
|
||||
type="number"
|
||||
value={form.width}
|
||||
disabled={!canEdit}
|
||||
onChange={(e) => setField("width", Number(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="length">{t("length")}</Label>
|
||||
<Input
|
||||
id="length"
|
||||
type="number"
|
||||
value={form.length}
|
||||
disabled={!canEdit}
|
||||
onChange={(e) => setField("length", Number(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="stackHeight">{t("stackHeight")}</Label>
|
||||
<Input
|
||||
id="stackHeight"
|
||||
value={form.stackHeight}
|
||||
disabled={!canEdit}
|
||||
onChange={(e) => setField("stackHeight", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="interactionType">{t("interactionType")}</Label>
|
||||
<Input
|
||||
id="interactionType"
|
||||
value={form.interactionType}
|
||||
disabled={!canEdit}
|
||||
onChange={(e) => setField("interactionType", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="interactionModesCount">
|
||||
{t("interactionModes")}
|
||||
</Label>
|
||||
<Input
|
||||
id="interactionModesCount"
|
||||
type="number"
|
||||
value={form.interactionModesCount}
|
||||
disabled={!canEdit}
|
||||
onChange={(e) =>
|
||||
setField("interactionModesCount", Number(e.target.value))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm">{t("sectionFlags")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||||
{ALLOW_FLAGS.map(({ key, label }) => (
|
||||
<label
|
||||
key={key}
|
||||
className="flex items-center gap-2 text-sm rounded-md border px-2 py-1.5"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={Number(form[key]) === 1}
|
||||
disabled={!canEdit}
|
||||
onChange={(e) => setField(key, e.target.checked ? 1 : 0)}
|
||||
/>
|
||||
{label}
|
||||
</label>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm">{t("sectionExtra")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div>
|
||||
<Label htmlFor="vendingIds">{t("vendingIds")}</Label>
|
||||
<Input
|
||||
id="vendingIds"
|
||||
value={form.vendingIds}
|
||||
disabled={!canEdit}
|
||||
onChange={(e) => setField("vendingIds", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="multiheight">{t("multiheight")}</Label>
|
||||
<Input
|
||||
id="multiheight"
|
||||
value={form.multiheight}
|
||||
disabled={!canEdit}
|
||||
onChange={(e) => setField("multiheight", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="customparams">{t("customparams")}</Label>
|
||||
<Input
|
||||
id="customparams"
|
||||
value={form.customparams}
|
||||
disabled={!canEdit}
|
||||
onChange={(e) => setField("customparams", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
import { eq } from "drizzle-orm";
|
||||
import { Package } from "lucide-react";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { AdminPageShell } from "@/components/admin/admin-page-shell";
|
||||
import { db, ItemsBase } from "@/lib/db";
|
||||
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
|
||||
import { ItemsBaseEditForm } from "./items-base-edit-form";
|
||||
|
||||
export default async function ItemsBaseDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { session, permissions } = await getAdminContext();
|
||||
if (!canAccess(permissions, PERMS.CATALOG_VIEW, session.user.rank)) {
|
||||
redirect("/admin");
|
||||
}
|
||||
|
||||
const t = await getTranslations("pages.admin.items");
|
||||
const { id: rawId } = await params;
|
||||
const id = Number(rawId);
|
||||
if (!Number.isFinite(id) || id <= 0) notFound();
|
||||
|
||||
const [item] = await db
|
||||
.select()
|
||||
.from(ItemsBase)
|
||||
.where(eq(ItemsBase.id, id))
|
||||
.limit(1);
|
||||
if (!item) notFound();
|
||||
|
||||
const canEdit = canAccess(permissions, PERMS.CATALOG_EDIT, session.user.rank);
|
||||
|
||||
return (
|
||||
<AdminPageShell
|
||||
icon={Package}
|
||||
title={t("editTitle", { name: item.publicName || item.itemName })}
|
||||
subtitle={t("editSubtitle", { id: item.id })}
|
||||
>
|
||||
<ItemsBaseEditForm
|
||||
canEdit={canEdit}
|
||||
initial={{
|
||||
id: item.id,
|
||||
spriteId: item.spriteId,
|
||||
publicName: item.publicName,
|
||||
itemName: item.itemName,
|
||||
type: item.type,
|
||||
width: item.width,
|
||||
length: item.length,
|
||||
stackHeight: String(item.stackHeight),
|
||||
allowStack: item.allowStack,
|
||||
allowSit: item.allowSit,
|
||||
allowLay: item.allowLay,
|
||||
allowWalk: item.allowWalk,
|
||||
allowGift: item.allowGift,
|
||||
allowTrade: item.allowTrade,
|
||||
allowRecycle: item.allowRecycle,
|
||||
allowMarketplaceSell: item.allowMarketplaceSell,
|
||||
allowInventoryStack: item.allowInventoryStack,
|
||||
interactionType: item.interactionType,
|
||||
interactionModesCount: item.interactionModesCount,
|
||||
vendingIds: item.vendingIds,
|
||||
multiheight: item.multiheight,
|
||||
customparams: item.customparams,
|
||||
}}
|
||||
/>
|
||||
</AdminPageShell>
|
||||
);
|
||||
}
|
||||
@@ -1,118 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Eye, Package, Pencil } from "lucide-react";
|
||||
import { DataTable } from "@/components/admin/data-table";
|
||||
import Link from "@/components/link";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import type { DataTableColumn, PaginatedResult } from "@/types/common";
|
||||
|
||||
export interface ItemsBaseRow {
|
||||
id: number;
|
||||
spriteId: number;
|
||||
publicName: string;
|
||||
itemName: string;
|
||||
type: string;
|
||||
interactionType: string;
|
||||
width: number;
|
||||
length: number;
|
||||
}
|
||||
|
||||
function getColumns(canEdit: boolean): DataTableColumn<ItemsBaseRow>[] {
|
||||
return [
|
||||
{ key: "id", label: "ID", sortable: true },
|
||||
{
|
||||
key: "publicName",
|
||||
label: "Name",
|
||||
sortable: true,
|
||||
render: (_, row) => (
|
||||
<Link
|
||||
href={`/admin/items/${row.id}`}
|
||||
className="hover:opacity-80 flex items-center gap-2 min-w-0"
|
||||
>
|
||||
<Package className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<div className="min-w-0">
|
||||
<span className="font-medium block truncate">
|
||||
{row.publicName || "—"}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground font-mono truncate block">
|
||||
{row.itemName}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "spriteId",
|
||||
label: "Sprite",
|
||||
sortable: true,
|
||||
render: (v) => <span className="tabular-nums text-sm">{String(v)}</span>,
|
||||
},
|
||||
{
|
||||
key: "type",
|
||||
label: "Type",
|
||||
sortable: true,
|
||||
filterKey: "filter_type",
|
||||
filterOptions: [
|
||||
{ label: "Floor (s)", value: "s" },
|
||||
{ label: "Wall (i)", value: "i" },
|
||||
{ label: "Effect (e)", value: "e" },
|
||||
{ label: "Badge (b)", value: "b" },
|
||||
{ label: "Robot (r)", value: "r" },
|
||||
],
|
||||
render: (v) => <Badge variant="outline">{String(v)}</Badge>,
|
||||
},
|
||||
{
|
||||
key: "interactionType",
|
||||
label: "Interaction",
|
||||
sortable: true,
|
||||
render: (v) => (
|
||||
<span className="text-xs font-mono text-muted-foreground">
|
||||
{String(v || "default")}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "width",
|
||||
label: "Size",
|
||||
render: (_, row) => (
|
||||
<span className="tabular-nums text-sm">
|
||||
{row.width}×{row.length}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "actions",
|
||||
label: "",
|
||||
render: (_, row) => (
|
||||
<div className="flex gap-1 justify-end">
|
||||
<Button variant="ghost" size="icon" asChild>
|
||||
<Link href={`/admin/items/${row.id}`} aria-label="View">
|
||||
{canEdit ? (
|
||||
<Pencil className="h-4 w-4" />
|
||||
) : (
|
||||
<Eye className="h-4 w-4" />
|
||||
)}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function ItemsTable({
|
||||
data,
|
||||
canEdit,
|
||||
}: {
|
||||
data: PaginatedResult<ItemsBaseRow>;
|
||||
canEdit: boolean;
|
||||
}) {
|
||||
return (
|
||||
<DataTable
|
||||
columns={getColumns(canEdit)}
|
||||
data={data}
|
||||
searchPlaceholder="Search name, classname or ID…"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,99 +0,0 @@
|
||||
import { and, count, desc, eq, like, or } from "drizzle-orm";
|
||||
import { Package } from "lucide-react";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { AdminPageShell } from "@/components/admin/admin-page-shell";
|
||||
import { fetchAdminList } from "@/lib/admin-list";
|
||||
import { db, ItemsBase } from "@/lib/db";
|
||||
import { canAccess, PERMS } from "@/lib/permissions";
|
||||
import { type ItemsBaseRow, ItemsTable } from "./items-table";
|
||||
|
||||
export default async function ItemsBasePage({
|
||||
params: paramsPromise,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ locale: string }>;
|
||||
searchParams: Promise<Record<string, string>>;
|
||||
}) {
|
||||
const result = await fetchAdminList<ItemsBaseRow>(
|
||||
{
|
||||
permission: PERMS.CATALOG_VIEW,
|
||||
fetch: async ({ search, page, perPage, rawParams }) => {
|
||||
const conditions = [];
|
||||
if (search) {
|
||||
const ors = [
|
||||
like(ItemsBase.itemName, `%${search}%`),
|
||||
like(ItemsBase.publicName, `%${search}%`),
|
||||
];
|
||||
const asId = Number(search);
|
||||
if (Number.isFinite(asId) && asId > 0) {
|
||||
ors.push(eq(ItemsBase.id, asId));
|
||||
}
|
||||
conditions.push(or(...ors));
|
||||
}
|
||||
if (rawParams.filter_type) {
|
||||
conditions.push(eq(ItemsBase.type, rawParams.filter_type));
|
||||
}
|
||||
const where = conditions.length > 0 ? and(...conditions) : undefined;
|
||||
const [rows, totals] = await Promise.all([
|
||||
db
|
||||
.select({
|
||||
id: ItemsBase.id,
|
||||
spriteId: ItemsBase.spriteId,
|
||||
publicName: ItemsBase.publicName,
|
||||
itemName: ItemsBase.itemName,
|
||||
type: ItemsBase.type,
|
||||
interactionType: ItemsBase.interactionType,
|
||||
width: ItemsBase.width,
|
||||
length: ItemsBase.length,
|
||||
})
|
||||
.from(ItemsBase)
|
||||
.where(where)
|
||||
.orderBy(desc(ItemsBase.id))
|
||||
.limit(perPage)
|
||||
.offset((page - 1) * perPage),
|
||||
db.select({ total: count() }).from(ItemsBase).where(where),
|
||||
]);
|
||||
return {
|
||||
rows: rows.map((r) => ({
|
||||
id: r.id,
|
||||
spriteId: r.spriteId,
|
||||
publicName: r.publicName || "",
|
||||
itemName: r.itemName || "",
|
||||
type: r.type || "s",
|
||||
interactionType: r.interactionType || "default",
|
||||
width: r.width,
|
||||
length: r.length,
|
||||
})),
|
||||
total: totals[0]?.total ?? 0,
|
||||
};
|
||||
},
|
||||
},
|
||||
paramsPromise,
|
||||
searchParams,
|
||||
);
|
||||
|
||||
const t = await getTranslations("pages.admin.items");
|
||||
const canEdit = canAccess(
|
||||
result.permissions,
|
||||
PERMS.CATALOG_EDIT,
|
||||
result.rank,
|
||||
);
|
||||
|
||||
return (
|
||||
<AdminPageShell icon={Package} title={t("title")} subtitle={t("subtitle")}>
|
||||
<p className="text-muted-foreground m-0">
|
||||
{t("total", { count: result.total })}
|
||||
</p>
|
||||
<ItemsTable
|
||||
data={{
|
||||
rows: result.rows,
|
||||
total: result.total,
|
||||
page: result.page,
|
||||
perPage: result.perPage,
|
||||
lastPage: result.lastPage,
|
||||
}}
|
||||
canEdit={canEdit}
|
||||
/>
|
||||
</AdminPageShell>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user