252 lines
8.8 KiB
TypeScript
252 lines
8.8 KiB
TypeScript
"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>
|
|
);
|
|
}
|