feat: phase 4 - frontend groups UI, permission-matrix, usePermission hook, field-level permissions tab, authStore permissions

2026-07-15 23:27:11 +02:00
parent beaca24480
commit bb6466b53d
7 changed files with 1055 additions and 30 deletions
@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useRoles, useCreateRole, useUpdateRole, useDeleteRole, usePermissions } from '@/api/hooks';
-import type { PermissionItem } from '@/api/hooks';
+import type { PermissionItem, FieldDefinition } from '@/api/hooks';
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
 import { Card } from '@/components/ui/Card';
@@ -16,6 +16,7 @@ interface Role {
  id: string;
  name: string;
  permissions: Record<string, any>;
+  denied_permissions?: string[];
  field_permissions?: Record<string, any>;
 }

@@ -52,6 +53,13 @@ function getGrantedPermissionKeys(permissions: Record<string, any>): string[] {
  return [];
 }

+function toggleDeniedPermission(denied: string[], permKey: string): string[] {
+  if (denied.includes(permKey)) {
+    return denied.filter((k) => k !== permKey);
+  }
+  return [...denied, permKey];
+}
+
 export function SettingsRolesPage() {
  const { t } = useTranslation();
  const toast = useToast();
@@ -64,8 +72,10 @@ export function SettingsRolesPage() {
  const [createOpen, setCreateOpen] = useState(false);
  const [newRoleName, setNewRoleName] = useState('');
  const [newRolePermissions, setNewRolePermissions] = useState<Record<string, any>>({});
+  const [newRoleDenied, setNewRoleDenied] = useState<string[]>([]);
  const [editingRole, setEditingRole] = useState<Role | null>(null);
  const [confirmDelete, setConfirmDelete] = useState<Role | null>(null);
+  const [editTab, setEditTab] = useState<'permissions' | 'denied' | 'fields'>('permissions');

  const roles: Role[] = data?.items ?? [];

@@ -92,6 +102,21 @@ export function SettingsRolesPage() {
    return groups;
  }, [allPermissions]);

+  const fieldDefinitions: FieldDefinition[] = useMemo(() => {
+    return permissionsData?.field_definitions ?? [];
+  }, [permissionsData]);
+
+  const groupedFieldDefinitions = useMemo(() => {
+    const groups: Record<string, FieldDefinition[]> = {};
+    for (const fd of fieldDefinitions) {
+      if (!groups[fd.module]) {
+        groups[fd.module] = [];
+      }
+      groups[fd.module].push(fd);
+    }
+    return groups;
+  }, [fieldDefinitions]);
+
  const handleCreateRole = async () => {
    if (!newRoleName.trim()) {
      toast.error(t('validation.required'));
@@ -101,11 +126,13 @@ export function SettingsRolesPage() {
      await createRoleMutation.mutateAsync({
        name: newRoleName.trim(),
        permissions: newRolePermissions,
+        denied_permissions: newRoleDenied,
        field_permissions: {},
-      });
+      } as any);
      toast.success(t('settings.roleCreated'));
      setNewRoleName('');
      setNewRolePermissions({});
+      setNewRoleDenied([]);
      setCreateOpen(false);
    } catch (err: any) {
      toast.error(err.message || t('common.error'));
@@ -123,6 +150,34 @@ export function SettingsRolesPage() {
    }
  };

+  const handleToggleDenied = (permKey: string, target: 'new' | 'edit') => {
+    if (target === 'new') {
+      setNewRoleDenied((prev) => toggleDeniedPermission(prev, permKey));
+    } else if (editingRole) {
+      setEditingRole({
+        ...editingRole,
+        denied_permissions: toggleDeniedPermission(editingRole.denied_permissions || [], permKey),
+      });
+    }
+  };
+
+  const handleFieldPermChange = (module: string, field: string, value: 'hidden' | 'readonly' | 'read' | 'default') => {
+    if (!editingRole) return;
+    const fieldPerms = { ...(editingRole.field_permissions || {}) };
+    if (!fieldPerms[module]) {
+      fieldPerms[module] = {};
+    }
+    if (value === 'default') {
+      delete fieldPerms[module][field];
+      if (Object.keys(fieldPerms[module]).length === 0) {
+        delete fieldPerms[module];
+      }
+    } else {
+      fieldPerms[module][field] = value;
+    }
+    setEditingRole({ ...editingRole, field_permissions: fieldPerms });
+  };
+
  const handleSaveRole = async () => {
    if (!editingRole) return;
    try {
@@ -131,8 +186,9 @@ export function SettingsRolesPage() {
        data: {
          name: editingRole.name,
          permissions: editingRole.permissions,
+          denied_permissions: editingRole.denied_permissions || [],
          field_permissions: editingRole.field_permissions || {},
-        },
+        } as any,
      });
      toast.success(t('settings.roleUpdated'));
      setEditingRole(null);
@@ -171,10 +227,9 @@ export function SettingsRolesPage() {
        <h1 className="text-2xl font-bold text-secondary-900 mb-6">{t('settings.roles')}</h1>
        <EmptyState
          title={t('common.error')}
+          description={error?.message || t('common.error')}
          action={<Button onClick={() => refetch()}>{t('common.reset')}</Button>}
-        >
-          <p className="text-sm text-secondary-500">{error?.message || t('common.error')}</p>
-        </EmptyState>
+        />
      </div>
    );
  }
@@ -271,6 +326,27 @@ export function SettingsRolesPage() {
              ))}
            </div>
          </div>
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 mb-2">
+              {t('settings.deniedPermissions', 'Verweigerte Berechtigungen')}
+            </label>
+            <div className="space-y-2 max-h-32 overflow-y-auto border border-secondary-200 rounded-md p-3">
+              {allPermissions.length === 0 && (
+                <p className="text-sm text-secondary-500">{t('settings.noPermissions')}</p>
+              )}
+              {allPermissions.map((perm) => (
+                <label key={`denied-${perm.key}`} className="flex items-center gap-2 p-2 rounded-md hover:bg-secondary-50 cursor-pointer min-h-touch">
+                  <input
+                    type="checkbox"
+                    checked={newRoleDenied.includes(perm.key)}
+                    onChange={() => handleToggleDenied(perm.key, 'new')}
+                    className="w-4 h-4 rounded border-danger-300 text-danger-600 focus:ring-danger-500"
+                  />
+                  <span className="text-sm text-secondary-900">{perm.label}</span>
+                </label>
+              ))}
+            </div>
+          </div>
          <div className="flex justify-end gap-3">
            <Button variant="secondary" onClick={() => setCreateOpen(false)}>{t('common.cancel')}</Button>
            <Button
@@ -284,7 +360,7 @@ export function SettingsRolesPage() {
        </div>
      </Modal>

-      <Modal open={!!editingRole} onClose={() => setEditingRole(null)} title={t('settings.roles') + ' — ' + (editingRole?.name || '')}>
+      <Modal open={!!editingRole} onClose={() => setEditingRole(null)} title={t('settings.roles') + ' — ' + (editingRole?.name || '')} size="xl">
        {editingRole && (
          <div className="space-y-4" data-testid="edit-role-form">
            <Input
@@ -292,32 +368,133 @@ export function SettingsRolesPage() {
              value={editingRole.name}
              onChange={(e) => setEditingRole({ ...editingRole, name: e.target.value })}
            />
-            <div>
-              <label className="block text-sm font-medium text-secondary-700 mb-2">{t('settings.permissions')}</label>
-              <div className="space-y-2">
-                {allPermissions.length === 0 && (
-                  <p className="text-sm text-secondary-500">{t('settings.noPermissions')}</p>
-                )}
-                {Object.entries(groupedPermissions).map(([category, perms]) => (
-                  <div key={category} className="mb-3">
-                    <p className="text-xs font-semibold text-secondary-500 uppercase mb-1">
-                      {category === 'system' ? t('settings.systemPermissions') : t('settings.pluginPermissions')}
-                    </p>
-                    {perms.map((perm) => (
-                      <label key={perm.key} className="flex items-center gap-2 p-2 rounded-md hover:bg-secondary-50 cursor-pointer min-h-touch">
-                        <input
-                          type="checkbox"
-                          checked={isPermissionGranted(editingRole.permissions, perm.key)}
-                          onChange={() => handleTogglePermission(perm.key, 'edit')}
-                          className="w-4 h-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
-                        />
-                        <span className="text-sm text-secondary-900">{perm.label}</span>
-                      </label>
+            {/* Tab Navigation */}
+            <div className="flex gap-2 border-b border-secondary-200 pb-2">
+              <button
+                className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${editTab === 'permissions' ? 'bg-primary-100 text-primary-700' : 'text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900'}`}
+                onClick={() => setEditTab('permissions')}
+                data-testid="role-tab-permissions"
+              >
+                {t('settings.permissions')}
+              </button>
+              <button
+                className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${editTab === 'denied' ? 'bg-primary-100 text-primary-700' : 'text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900'}`}
+                onClick={() => setEditTab('denied')}
+                data-testid="role-tab-denied"
+              >
+                {t('settings.deniedPermissions', 'Verweigert')}
+              </button>
+              <button
+                className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${editTab === 'fields' ? 'bg-primary-100 text-primary-700' : 'text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900'}`}
+                onClick={() => setEditTab('fields')}
+                data-testid="role-tab-fields"
+              >
+                {t('settings.fieldPermissions', 'Feld-Berechtigungen')}
+              </button>
+            </div>
+
+            {/* Permissions Tab */}
+            {editTab === 'permissions' && (
+              <div>
+                <label className="block text-sm font-medium text-secondary-700 mb-2">{t('settings.permissions')}</label>
+                <div className="space-y-2 max-h-64 overflow-y-auto border border-secondary-200 rounded-md p-3">
+                  {allPermissions.length === 0 && (
+                    <p className="text-sm text-secondary-500">{t('settings.noPermissions')}</p>
+                  )}
+                  {Object.entries(groupedPermissions).map(([category, perms]) => (
+                    <div key={category} className="mb-3">
+                      <p className="text-xs font-semibold text-secondary-500 uppercase mb-1">
+                        {category === 'system' ? t('settings.systemPermissions') : t('settings.pluginPermissions')}
+                      </p>
+                      {perms.map((perm) => (
+                        <label key={perm.key} className="flex items-center gap-2 p-2 rounded-md hover:bg-secondary-50 cursor-pointer min-h-touch">
+                          <input
+                            type="checkbox"
+                            checked={isPermissionGranted(editingRole.permissions, perm.key)}
+                            onChange={() => handleTogglePermission(perm.key, 'edit')}
+                            className="w-4 h-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
+                          />
+                          <span className="text-sm text-secondary-900">{perm.label}</span>
+                        </label>
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Denied Permissions Tab */}
+            {editTab === 'denied' && (
+              <div>
+                <label className="block text-sm font-medium text-secondary-700 mb-2">
+                  {t('settings.deniedPermissions', 'Verweigerte Berechtigungen')}
+                </label>
+                <p className="text-xs text-secondary-500 mb-2">
+                  {t('settings.deniedPermissionsHint', 'Diese Berechtigungen werden explizit verweigert.')}
+                </p>
+                <div className="space-y-2 max-h-64 overflow-y-auto border border-secondary-200 rounded-md p-3">
+                  {allPermissions.length === 0 && (
+                    <p className="text-sm text-secondary-500">{t('settings.noPermissions')}</p>
+                  )}
+                  {allPermissions.map((perm) => (
+                    <label key={`denied-edit-${perm.key}`} className="flex items-center gap-2 p-2 rounded-md hover:bg-secondary-50 cursor-pointer min-h-touch">
+                      <input
+                        type="checkbox"
+                        checked={(editingRole.denied_permissions || []).includes(perm.key)}
+                        onChange={() => handleToggleDenied(perm.key, 'edit')}
+                        className="w-4 h-4 rounded border-danger-300 text-danger-600 focus:ring-danger-500"
+                      />
+                      <span className="text-sm text-secondary-900">{perm.label}</span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Field Permissions Tab */}
+            {editTab === 'fields' && (
+              <div>
+                <label className="block text-sm font-medium text-secondary-700 mb-2">
+                  {t('settings.fieldPermissions', 'Feld-Berechtigungen')}
+                </label>
+                {fieldDefinitions.length === 0 ? (
+                  <p className="text-sm text-secondary-500">
+                    {t('settings.noFieldDefinitions', 'Keine Feld-Definitionen verfügbar')}
+                  </p>
+                ) : (
+                  <div className="space-y-3 max-h-64 overflow-y-auto border border-secondary-200 rounded-md p-3">
+                    {Object.entries(groupedFieldDefinitions).map(([moduleName, fields]) => (
+                      <div key={moduleName} className="mb-3">
+                        <p className="text-xs font-semibold text-secondary-500 uppercase mb-1">{moduleName}</p>
+                        {fields.map((fd) => {
+                          const currentVal = (editingRole.field_permissions || {})[moduleName]?.[fd.field] || 'default';
+                          return (
+                            <div key={`${moduleName}-${fd.field}`} className="flex items-center justify-between p-2 rounded-md hover:bg-secondary-50">
+                              <div className="flex-1">
+                                <span className="text-sm text-secondary-900">{fd.label}</span>
+                                <span className="text-xs text-secondary-400 ml-2">({fd.sensitivity})</span>
+                              </div>
+                              <select
+                                value={currentVal}
+                                onChange={(e) => handleFieldPermChange(moduleName, fd.field, e.target.value as any)}
+                                className="text-sm rounded-md border border-secondary-300 px-2 py-1 focus:ring-primary-500 focus:border-primary-500"
+                                data-testid={`field-perm-${moduleName}-${fd.field}`}
+                              >
+                                <option value="default">{t('settings.fieldDefault', 'Standard')}</option>
+                                <option value="read">{t('settings.fieldRead', 'Lesen')}</option>
+                                <option value="readonly">{t('settings.fieldReadonly', 'Nur-Lesen')}</option>
+                                <option value="hidden">{t('settings.fieldHidden', 'Versteckt')}</option>
+                              </select>
+                            </div>
+                          );
+                        })}
+                      </div>
                    ))}
                  </div>
-                ))}
+                )}
              </div>
-            </div>
+            )}
+
            <div className="flex justify-end gap-3">
              <Button variant="secondary" onClick={() => setEditingRole(null)}>{t('common.cancel')}</Button>
              <Button