feat: split settings management pages
This commit is contained in:
251
modules/settings/components/RoleManagementClient.tsx
Normal file
251
modules/settings/components/RoleManagementClient.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
"use client";
|
||||
|
||||
import { FormEvent, useState } from "react";
|
||||
import { Pencil, Plus, Power } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Dialog } from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import type { ApiResult } from "@/modules/core/server/api";
|
||||
import type { Permission, RoleDefinition } from "@/modules/core/types";
|
||||
|
||||
type PermissionDefinition = {
|
||||
id: Permission;
|
||||
label: string;
|
||||
category: string;
|
||||
description: string;
|
||||
};
|
||||
|
||||
type RoleManagementClientProps = {
|
||||
permissions: PermissionDefinition[];
|
||||
};
|
||||
|
||||
export function RoleManagementClient({ permissions }: RoleManagementClientProps): React.ReactElement {
|
||||
const router = useRouter();
|
||||
const [message, setMessage] = useState("");
|
||||
const [isPending, setIsPending] = useState(false);
|
||||
|
||||
async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
|
||||
event.preventDefault();
|
||||
setMessage("");
|
||||
setIsPending(true);
|
||||
const formData = new FormData(event.currentTarget);
|
||||
const response = await fetch("/api/settings/roles", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
label: String(formData.get("label") ?? ""),
|
||||
key: String(formData.get("key") ?? ""),
|
||||
description: String(formData.get("description") ?? ""),
|
||||
permissions: formData.getAll("permissions").map(String),
|
||||
}),
|
||||
});
|
||||
const result = (await response.json()) as ApiResult<{ role: RoleDefinition }>;
|
||||
setIsPending(false);
|
||||
|
||||
if (!result.success) {
|
||||
setMessage(result.reason);
|
||||
return;
|
||||
}
|
||||
|
||||
setMessage(result.reason);
|
||||
event.currentTarget.reset();
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>新增角色</CardTitle>
|
||||
<CardDescription>角色由系统注册权限点组合而成。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form className="grid gap-4" onSubmit={handleSubmit}>
|
||||
<div className="grid gap-3 md:grid-cols-3">
|
||||
<Input name="label" placeholder="角色名称" required />
|
||||
<Input name="key" placeholder="角色标识，可留空" />
|
||||
<Input name="description" placeholder="角色说明" />
|
||||
</div>
|
||||
<div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{permissions.map((permission) => (
|
||||
<label className="flex items-start gap-2 rounded-md border p-3 text-sm" key={permission.id}>
|
||||
<input className="mt-1" name="permissions" type="checkbox" value={permission.id} />
|
||||
<span>
|
||||
<span className="block font-medium">{permission.label}</span>
|
||||
<span className="block text-xs text-muted-foreground">{permission.id}</span>
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<Button className="w-fit" disabled={isPending} type="submit">
|
||||
<Plus className="size-4" aria-hidden="true" />
|
||||
新增角色
|
||||
</Button>
|
||||
</form>
|
||||
{message ? (
|
||||
<p className="mt-3 rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
|
||||
{message}
|
||||
</p>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
type RoleRowActionsProps = {
|
||||
permissions: PermissionDefinition[];
|
||||
role: RoleDefinition;
|
||||
};
|
||||
|
||||
export function RoleRowActions({ permissions, role }: RoleRowActionsProps): React.ReactElement {
|
||||
const router = useRouter();
|
||||
const [isEditOpen, setIsEditOpen] = useState(false);
|
||||
const [message, setMessage] = useState("");
|
||||
const [isPending, setIsPending] = useState(false);
|
||||
|
||||
async function updateRole(payload: Record<string, string | boolean | string[]>): Promise<void> {
|
||||
setMessage("");
|
||||
setIsPending(true);
|
||||
const response = await fetch(`/api/settings/roles/${role.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
const result = (await response.json()) as ApiResult<{ role: RoleDefinition }>;
|
||||
setIsPending(false);
|
||||
|
||||
if (!result.success) {
|
||||
setMessage(result.reason);
|
||||
return;
|
||||
}
|
||||
|
||||
setMessage(result.reason);
|
||||
setIsEditOpen(false);
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
async function disableRole(): Promise<void> {
|
||||
setMessage("");
|
||||
setIsPending(true);
|
||||
const response = await fetch(`/api/settings/roles/${role.id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
const result = (await response.json()) as ApiResult<{ role: RoleDefinition }>;
|
||||
setIsPending(false);
|
||||
|
||||
if (!result.success) {
|
||||
setMessage(result.reason);
|
||||
return;
|
||||
}
|
||||
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
|
||||
event.preventDefault();
|
||||
const formData = new FormData(event.currentTarget);
|
||||
await updateRole({
|
||||
label: String(formData.get("label") ?? ""),
|
||||
key: String(formData.get("key") ?? ""),
|
||||
description: String(formData.get("description") ?? ""),
|
||||
isEnabled: String(formData.get("isEnabled") ?? "") === "true",
|
||||
permissions: formData.getAll("permissions").map(String),
|
||||
});
|
||||
}
|
||||
|
||||
if (role.isSystem) {
|
||||
return <span className="block text-right text-xs text-muted-foreground">内置只读</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button onClick={() => setIsEditOpen(true)} size="sm" type="button" variant="outline">
|
||||
<Pencil className="size-4" aria-hidden="true" />
|
||||
编辑
|
||||
</Button>
|
||||
{role.isEnabled ? (
|
||||
<Button disabled={isPending} onClick={() => void disableRole()} size="sm" type="button" variant="destructive">
|
||||
<Power className="size-4" aria-hidden="true" />
|
||||
停用
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
disabled={isPending}
|
||||
onClick={() => void updateRole({ isEnabled: true })}
|
||||
size="sm"
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
<Power className="size-4" aria-hidden="true" />
|
||||
启用
|
||||
</Button>
|
||||
)}
|
||||
<Dialog
|
||||
description="编辑自定义角色的名称、说明、状态和权限点。"
|
||||
onClose={() => setIsEditOpen(false)}
|
||||
open={isEditOpen}
|
||||
title="编辑角色"
|
||||
>
|
||||
<form className="grid gap-4" onSubmit={handleSubmit}>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<label className="grid gap-2 text-sm">
|
||||
<span className="font-medium">角色名称</span>
|
||||
<Input defaultValue={role.label} name="label" required />
|
||||
</label>
|
||||
<label className="grid gap-2 text-sm">
|
||||
<span className="font-medium">角色标识</span>
|
||||
<Input defaultValue={role.key} name="key" required />
|
||||
</label>
|
||||
</div>
|
||||
<label className="grid gap-2 text-sm">
|
||||
<span className="font-medium">角色说明</span>
|
||||
<Input defaultValue={role.description} name="description" />
|
||||
</label>
|
||||
<label className="grid gap-2 text-sm">
|
||||
<span className="font-medium">状态</span>
|
||||
<select
|
||||
className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
|
||||
defaultValue={String(role.isEnabled)}
|
||||
name="isEnabled"
|
||||
>
|
||||
<option value="true">启用</option>
|
||||
<option value="false">停用</option>
|
||||
</select>
|
||||
</label>
|
||||
<div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{permissions.map((permission) => (
|
||||
<label className="flex items-start gap-2 rounded-md border p-3 text-sm" key={permission.id}>
|
||||
<input
|
||||
className="mt-1"
|
||||
defaultChecked={role.permissions.includes(permission.id)}
|
||||
name="permissions"
|
||||
type="checkbox"
|
||||
value={permission.id}
|
||||
/>
|
||||
<span>
|
||||
<span className="block font-medium">{permission.label}</span>
|
||||
<span className="block text-xs text-muted-foreground">{permission.id}</span>
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
{message ? (
|
||||
<p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
|
||||
{message}
|
||||
</p>
|
||||
) : null}
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button onClick={() => setIsEditOpen(false)} type="button" variant="outline">
|
||||
取消
|
||||
</Button>
|
||||
<Button disabled={isPending} type="submit">
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user