feat(rbac): add roles and permissions
This commit is contained in:
Schubert Ferenc
parent
86a32a942c
commit
694b7bd09a
37 changed files with 2682 additions and 218 deletions
535
frontend/athena/app/roles/page.tsx
Normal file
535
frontend/athena/app/roles/page.tsx
Normal file
|
|
@ -0,0 +1,535 @@
|
|||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import type { FormEvent } from "react";
|
||||
import { Edit, Eye, Shield, Trash2 } from "lucide-react";
|
||||
|
||||
import ConfirmDialog from "@/components/common/ConfirmDialog";
|
||||
import DataTable, { type DataTableColumn } from "@/components/common/DataTable";
|
||||
import SearchInput from "@/components/common/SearchInput";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { api } from "@/lib/api";
|
||||
import { hasPermission } from "@/lib/permissions";
|
||||
import type { CurrentUser, Permission, Role, RolePayload } from "@/types/rbac";
|
||||
|
||||
const pageSize = 10;
|
||||
|
||||
function getErrorMessage(error: unknown) {
|
||||
if (typeof error === "object" && error !== null && "response" in error) {
|
||||
const response = (error as { response?: { data?: { detail?: string } } }).response;
|
||||
return response?.data?.detail ?? "Aktion konnte nicht abgeschlossen werden";
|
||||
}
|
||||
|
||||
return "Aktion konnte nicht abgeschlossen werden";
|
||||
}
|
||||
|
||||
function formatDate(value: string) {
|
||||
return new Intl.DateTimeFormat("de-DE", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
}).format(new Date(value));
|
||||
}
|
||||
|
||||
function getSortableValue(role: Role, key: string) {
|
||||
const value = role[key as keyof Role];
|
||||
return typeof value === "string" ? value.toLowerCase() : value;
|
||||
}
|
||||
|
||||
export default function RolesPage() {
|
||||
const [roles, setRoles] = useState<Role[]>([]);
|
||||
const [permissions, setPermissions] = useState<Permission[]>([]);
|
||||
const [currentUser, setCurrentUser] = useState<CurrentUser | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [formError, setFormError] = useState("");
|
||||
const [deleteError, setDeleteError] = useState("");
|
||||
const [pending, setPending] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const [sortKey, setSortKey] = useState("name");
|
||||
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
|
||||
const [page, setPage] = useState(1);
|
||||
const [selectedRole, setSelectedRole] = useState<Role | null>(null);
|
||||
const [detailsRole, setDetailsRole] = useState<Role | null>(null);
|
||||
const [deleteRole, setDeleteRole] = useState<Role | null>(null);
|
||||
const [formOpen, setFormOpen] = useState(false);
|
||||
|
||||
const loadRoles = useCallback(async () => {
|
||||
try {
|
||||
const [rolesResponse, permissionsResponse, meResponse] = await Promise.all([
|
||||
api.get<Role[]>("/roles"),
|
||||
api.get<Permission[]>("/permissions"),
|
||||
api.get<CurrentUser>("/me"),
|
||||
]);
|
||||
setRoles(rolesResponse.data);
|
||||
setPermissions(permissionsResponse.data);
|
||||
setCurrentUser(meResponse.data);
|
||||
} catch (err) {
|
||||
setError(getErrorMessage(err));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
queueMicrotask(() => {
|
||||
void loadRoles();
|
||||
});
|
||||
}, [loadRoles]);
|
||||
|
||||
const filteredRoles = useMemo(() => {
|
||||
const term = search.trim().toLowerCase();
|
||||
|
||||
return roles
|
||||
.filter((role) => {
|
||||
if (!term) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return [
|
||||
role.name,
|
||||
role.display_name,
|
||||
role.description,
|
||||
].some((value) => value.toLowerCase().includes(term));
|
||||
})
|
||||
.sort((first, second) => {
|
||||
const firstValue = getSortableValue(first, sortKey);
|
||||
const secondValue = getSortableValue(second, sortKey);
|
||||
|
||||
if (firstValue === secondValue) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const result = firstValue > secondValue ? 1 : -1;
|
||||
return sortDirection === "asc" ? result : -result;
|
||||
});
|
||||
}, [roles, search, sortDirection, sortKey]);
|
||||
|
||||
const pageCount = Math.max(1, Math.ceil(filteredRoles.length / pageSize));
|
||||
const currentPage = Math.min(page, pageCount);
|
||||
const pageRoles = filteredRoles.slice(
|
||||
(currentPage - 1) * pageSize,
|
||||
currentPage * pageSize,
|
||||
);
|
||||
|
||||
const columns: DataTableColumn<Role>[] = [
|
||||
{
|
||||
key: "display_name",
|
||||
label: "Rolle",
|
||||
sortable: true,
|
||||
render: (role) => (
|
||||
<div>
|
||||
<p className="font-medium text-slate-950">{role.display_name}</p>
|
||||
<p className="text-xs text-slate-500">{role.name}</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "description",
|
||||
label: "Beschreibung",
|
||||
sortable: true,
|
||||
render: (role) => role.description || "-",
|
||||
},
|
||||
{
|
||||
key: "is_system",
|
||||
label: "Typ",
|
||||
sortable: true,
|
||||
render: (role) => (
|
||||
<span className="inline-flex h-6 items-center rounded-full bg-slate-100 px-2 text-xs font-medium text-slate-700">
|
||||
{role.is_system ? "Systemrolle" : "Individuell"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "permissions",
|
||||
label: "Berechtigungen",
|
||||
render: (role) => `${role.permissions.length}`,
|
||||
},
|
||||
{
|
||||
key: "created_at",
|
||||
label: "Erstellt",
|
||||
sortable: true,
|
||||
render: (role) => formatDate(role.created_at),
|
||||
},
|
||||
{
|
||||
key: "actions",
|
||||
label: "Aktionen",
|
||||
className: "px-4 py-3 text-right",
|
||||
render: (role) => (
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="ghost" size="icon-sm" onClick={() => setDetailsRole(role)} title="Details">
|
||||
<Eye size={16} />
|
||||
</Button>
|
||||
{hasPermission(currentUser, "roles.update") && (
|
||||
<Button type="button" variant="ghost" size="icon-sm" onClick={() => openEditDialog(role)} title="Bearbeiten">
|
||||
<Edit size={16} />
|
||||
</Button>
|
||||
)}
|
||||
{hasPermission(currentUser, "roles.delete") && !role.is_system && (
|
||||
<Button type="button" variant="destructive" size="icon-sm" onClick={() => setDeleteRole(role)} title="Löschen">
|
||||
<Trash2 size={16} />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
function handleSort(key: string) {
|
||||
if (sortKey === key) {
|
||||
setSortDirection((current) => (current === "asc" ? "desc" : "asc"));
|
||||
return;
|
||||
}
|
||||
|
||||
setSortKey(key);
|
||||
setSortDirection("asc");
|
||||
}
|
||||
|
||||
function openCreateDialog() {
|
||||
setSelectedRole(null);
|
||||
setFormError("");
|
||||
setFormOpen(true);
|
||||
}
|
||||
|
||||
function openEditDialog(role: Role) {
|
||||
setSelectedRole(role);
|
||||
setFormError("");
|
||||
setFormOpen(true);
|
||||
}
|
||||
|
||||
async function saveRole(payload: RolePayload) {
|
||||
setPending(true);
|
||||
setFormError("");
|
||||
|
||||
try {
|
||||
if (selectedRole) {
|
||||
const response = await api.put<Role>(`/roles/${selectedRole.id}`, payload);
|
||||
setRoles((current) => current.map((role) => (
|
||||
role.id === selectedRole.id ? response.data : role
|
||||
)));
|
||||
} else {
|
||||
const response = await api.post<Role>("/roles", payload);
|
||||
setRoles((current) => [response.data, ...current]);
|
||||
}
|
||||
|
||||
setFormOpen(false);
|
||||
} catch (err) {
|
||||
setFormError(getErrorMessage(err));
|
||||
} finally {
|
||||
setPending(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDelete() {
|
||||
if (!deleteRole) {
|
||||
return;
|
||||
}
|
||||
|
||||
setPending(true);
|
||||
setDeleteError("");
|
||||
|
||||
try {
|
||||
await api.delete(`/roles/${deleteRole.id}`);
|
||||
setRoles((current) => current.filter((role) => role.id !== deleteRole.id));
|
||||
setDeleteRole(null);
|
||||
} catch (err) {
|
||||
setDeleteError(getErrorMessage(err));
|
||||
} finally {
|
||||
setPending(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-slate-950">Rollen & Rechte</h1>
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
{filteredRoles.length} von {roles.length} Rollen
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{hasPermission(currentUser, "roles.create") && (
|
||||
<Button type="button" onClick={openCreateDialog}>
|
||||
<Shield size={16} />
|
||||
Neue Rolle
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border bg-white p-4">
|
||||
<SearchInput
|
||||
value={search}
|
||||
onChange={(value) => {
|
||||
setSearch(value);
|
||||
setPage(1);
|
||||
}}
|
||||
placeholder="Rollen suchen"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={pageRoles}
|
||||
rowKey={(role) => role.id}
|
||||
sortKey={sortKey}
|
||||
sortDirection={sortDirection}
|
||||
loading={loading}
|
||||
error={error}
|
||||
emptyTitle="Keine Rollen gefunden"
|
||||
emptyDescription="Passe Suche oder Filter an oder erstelle eine neue Rolle."
|
||||
onSort={handleSort}
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between text-sm text-slate-600">
|
||||
<span>
|
||||
Seite {currentPage} von {pageCount}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={currentPage === 1}
|
||||
onClick={() => setPage((current) => Math.max(1, current - 1))}
|
||||
>
|
||||
Zurück
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={currentPage === pageCount}
|
||||
onClick={() => setPage((current) => Math.min(pageCount, current + 1))}
|
||||
>
|
||||
Weiter
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RoleFormDialog
|
||||
key={selectedRole?.id ?? "new"}
|
||||
open={formOpen}
|
||||
role={selectedRole}
|
||||
permissions={permissions}
|
||||
pending={pending}
|
||||
serverError={formError}
|
||||
onOpenChange={setFormOpen}
|
||||
onSubmit={saveRole}
|
||||
/>
|
||||
|
||||
<RoleDetailDialog
|
||||
role={detailsRole}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setDetailsRole(null);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<ConfirmDialog
|
||||
open={Boolean(deleteRole)}
|
||||
title="Rolle löschen"
|
||||
description="Möchten Sie diese Rolle wirklich löschen?"
|
||||
pending={pending}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setDeleteRole(null);
|
||||
setDeleteError("");
|
||||
}
|
||||
}}
|
||||
onConfirm={confirmDelete}
|
||||
>
|
||||
{deleteRole && (
|
||||
<dl className="grid gap-2 text-sm">
|
||||
<div className="flex justify-between gap-4">
|
||||
<dt className="text-slate-500">Name</dt>
|
||||
<dd className="font-medium">{deleteRole.display_name}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4">
|
||||
<dt className="text-slate-500">Systemrolle</dt>
|
||||
<dd className="font-medium">{deleteRole.is_system ? "Ja" : "Nein"}</dd>
|
||||
</div>
|
||||
{deleteError && <p className="text-red-600">{deleteError}</p>}
|
||||
</dl>
|
||||
)}
|
||||
</ConfirmDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RoleFormDialog({
|
||||
open,
|
||||
role,
|
||||
permissions,
|
||||
pending,
|
||||
serverError,
|
||||
onOpenChange,
|
||||
onSubmit,
|
||||
}: {
|
||||
open: boolean;
|
||||
role: Role | null;
|
||||
permissions: Permission[];
|
||||
pending: boolean;
|
||||
serverError?: string;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSubmit: (payload: RolePayload) => Promise<void>;
|
||||
}) {
|
||||
const initialPermissionIds = role?.permissions.map((permission) => permission.id) ?? [];
|
||||
const [name, setName] = useState(role?.name ?? "");
|
||||
const [displayName, setDisplayName] = useState(role?.display_name ?? "");
|
||||
const [description, setDescription] = useState(role?.description ?? "");
|
||||
const [permissionIds, setPermissionIds] = useState<number[]>(initialPermissionIds);
|
||||
|
||||
if (!open) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const groupedPermissions = permissions.reduce<Record<string, Permission[]>>((groups, permission) => {
|
||||
groups[permission.module] = groups[permission.module] ?? [];
|
||||
groups[permission.module].push(permission);
|
||||
return groups;
|
||||
}, {});
|
||||
|
||||
const valid = name.trim().length >= 3 && displayName.trim().length >= 2;
|
||||
|
||||
function togglePermission(permissionId: number) {
|
||||
setPermissionIds((current) => (
|
||||
current.includes(permissionId)
|
||||
? current.filter((id) => id !== permissionId)
|
||||
: [...current, permissionId]
|
||||
));
|
||||
}
|
||||
|
||||
async function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
await onSubmit({
|
||||
name,
|
||||
display_name: displayName,
|
||||
description,
|
||||
permission_ids: permissionIds,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-3xl">
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{role ? "Rolle bearbeiten" : "Rolle erstellen"}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Rollenstammdaten und Berechtigungen verwalten.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Technischer Name</Label>
|
||||
<Input value={name} onChange={(event) => setName(event.target.value)} disabled={role?.is_system} />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Anzeigename</Label>
|
||||
<Input value={displayName} onChange={(event) => setDisplayName(event.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-1.5 sm:col-span-2">
|
||||
<Label>Beschreibung</Label>
|
||||
<Input value={description} onChange={(event) => setDescription(event.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-h-80 overflow-auto rounded-lg border">
|
||||
{Object.entries(groupedPermissions).map(([module, modulePermissions]) => (
|
||||
<div key={module} className="border-b p-4 last:border-b-0">
|
||||
<h3 className="mb-3 text-sm font-semibold capitalize text-slate-900">{module}</h3>
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
{modulePermissions.map((permission) => (
|
||||
<label key={permission.id} className="flex items-start gap-2 rounded border p-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={permissionIds.includes(permission.id)}
|
||||
onChange={() => togglePermission(permission.id)}
|
||||
/>
|
||||
<span>
|
||||
<span className="block font-medium">{permission.display_name}</span>
|
||||
<span className="block text-xs text-slate-500">{permission.name}</span>
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{serverError && <p className="text-sm text-red-600">{serverError}</p>}
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" disabled={pending} onClick={() => onOpenChange(false)}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button type="submit" disabled={!valid || pending}>
|
||||
{pending ? "Speichern..." : "Speichern"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function RoleDetailDialog({
|
||||
role,
|
||||
onOpenChange,
|
||||
}: {
|
||||
role: Role | null;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<Dialog open={Boolean(role)} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-2xl">
|
||||
{role && (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{role.display_name}</DialogTitle>
|
||||
<DialogDescription>{role.description || role.name}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="grid gap-3 text-sm sm:grid-cols-2">
|
||||
<div>
|
||||
<p className="text-slate-500">Technischer Name</p>
|
||||
<p className="font-medium">{role.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-slate-500">Typ</p>
|
||||
<p className="font-medium">{role.is_system ? "Systemrolle" : "Individuell"}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-2 text-sm font-medium">Berechtigungen</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{role.permissions.map((permission) => (
|
||||
<span key={permission.id} className="rounded-full bg-slate-100 px-2 py-1 text-xs text-slate-700">
|
||||
{permission.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue