535 lines
16 KiB
TypeScript
535 lines
16 KiB
TypeScript
"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>
|
|
);
|
|
}
|