Drei neue sgcHTML-Admin-Komponenten: Presence, RolesPermissions und UserManagement

Letzter Beitrag dieser Serie über die 25 neuen sgcHTML-Komponenten. Zum Abschluss kommen die drei, die früher oder später jedes Admin-Panel braucht: wer gerade online ist, wer was tun darf, und die Tabelle, in der die Konten tatsächlich verwaltet werden. Alle drei senden Live-Updates über denselben WebSocket-Kanal, den Ihre Chat- und Job-Progress-Ansichten bereits nutzen, sodass sich dieses Paket nahtlos in die Komponenten der vorherigen Beiträge einfügt.

Presence — eine Live-Übersicht der Online-Nutzer

TsgcHTMLComponent_Presence rendert wahlweise einen überlappenden Avatar-Stapel oder eine Liste mit Name und Status, begrenzt durch MaxVisible mit einem „+N“-Overflow-Chip. AddUser fügt einen Eintrag in die Liste ein oder aktualisiert ihn, SetUserStatus aktualisiert nur den Status-Punkt, und GetUserFragmentHTML überträgt genau diese eine Änderung an jeden verbundenen Client.

uses
  sgcHTML_Component_Presence;

var
  oPresence: TsgcHTMLComponent_Presence;
begin
  oPresence := TsgcHTMLComponent_Presence.Create(nil);
  try
    oPresence.PresenceID := 'roster';
    oPresence.Layout := plAvatars;
    oPresence.MaxVisible := 5;
    oPresence.Title := 'Online';

    oPresence.AddUser('u1', 'Ana Torres', psOnline);
    oPresence.AddUser('u2', 'Marc Bell', psAway, '', 'Back at 3pm');
    oPresence.AddUser('u3', 'Kenji Ito', psBusy);

    WebModule.Response := oPresence.HTML;   // avatar stack + scoped CSS
  finally
    oPresence.Free;
  end;
end;

// Statusänderung an jeden verbundenen Client senden, ohne vollständiges Neu-Rendering:
oPresence.SetUserStatus('u2', psOnline);
TsgcHTMX_Engine_Server.BroadcastFragment(oPresence.GetUserFragmentHTML('u2'));

RolesPermissions — eine Berechtigungsmatrix statt eines Formulars voller Kontrollkästchen

TsgcHTMLComponent_RolesPermissions ordnet Rollen als Spalten und Berechtigungen als Zeilen an (nach Kategorie gruppiert), mit einem Kontrollkästchen an jedem Schnittpunkt. AddRole und AddPermission bauen die beiden Achsen auf, SetGrant aktiviert die anfänglichen Zellen, und jeder clientseitige Toggle kommt serverseitig als JSON-Payload an, den Ihr Handler autorisieren muss, bevor er ihn mit ProcessGrantChanged anwendet.

uses
  sgcHTML_Enums, sgcHTML_Component_RolesPermissions;

var
  oMatrix: TsgcHTMLComponent_RolesPermissions;
begin
  oMatrix := TsgcHTMLComponent_RolesPermissions.Create(nil);
  try
    oMatrix.MatrixID := 'acl';
    oMatrix.StickyHeader := True;

    oMatrix.AddRole('admin', 'Administrator').Color := hcDanger;
    oMatrix.AddRole('editor', 'Editor');
    oMatrix.AddRole('viewer', 'Viewer');

    oMatrix.AddPermission('users.edit', 'Edit users', 'Users');
    oMatrix.AddPermission('users.delete', 'Delete users', 'Users');
    oMatrix.AddPermission('billing.view', 'View invoices', 'Billing');

    oMatrix.SetGrant('admin', 'users.edit', True);
    oMatrix.SetGrant('admin', 'users.delete', True);
    oMatrix.SetGrant('editor', 'users.edit', True);

    WebModule.Response := oMatrix.HTML;   // matrix table + inline script
  finally
    oMatrix.Free;
  end;
end;

// Serverseitiger Handler für einen über WebSockets empfangenen Checkbox-Toggle.
// Prüfen Sie IMMER, ob der handelnde Benutzer berechtigt ist, bevor Sie die Änderung anwenden:
oMatrix.ProcessGrantChanged('editor', 'users.delete', True);

UserManagement — die eigentliche Kontentabelle

TsgcHTMLComponent_UserManagement ist die Tabelle, in der diese Rollen zugewiesen werden: Avatar, Status-Badge, Rollen-Badges, letzte Anmeldung, Suchfeld und ein Aktionen-Dropdown pro Zeile (Bearbeiten, Deaktivieren/Aktivieren, Passwort zurücksetzen sowie, sofern aktiviert, Identität annehmen und Löschen). AddUser fügt eine Zeile hinzu und gibt einen TsgcHTMLUser zum Ausfüllen zurück; ProcessUserAction verarbeitet, was auch immer das Dropdown einer Zeile zurücksendet, wiederum erst nach Ihrer eigenen Berechtigungsprüfung.

uses
  sgcHTML_Component_UserManagement;

var
  oUsers: TsgcHTMLComponent_UserManagement;
  oUser: TsgcHTMLUser;
begin
  oUsers := TsgcHTMLComponent_UserManagement.Create(nil);
  try
    oUsers.TableID := 'users';
    oUsers.AllowImpersonate := True;
    oUsers.AllowDelete := True;

    oUser := oUsers.AddUser('u1', 'ana.torres', 'ana@example.com');
    oUser.DisplayName := 'Ana Torres';
    oUser.Roles := 'admin,editor';
    oUser.Status := usActive;
    oUser.LastLogin := '2026-07-15 09:12';

    oUsers.AddUser('u2', 'marc.bell', 'marc@example.com').Status := usInvited;

    WebModule.Response := oUsers.HTML;   // toolbar + table + inline script
  finally
    oUsers.Free;
  end;
end;

// Serverseitiger Handler für eine über WebSockets empfangene Aktion.
// Prüfen Sie IMMER, ob der handelnde Benutzer berechtigt ist, bevor Sie sie anwenden:
oUsers.ProcessUserAction('userDisable', 'u2');

Beachten Sie das Muster, das sich sowohl bei RolesPermissions als auch bei UserManagement wiederholt: Die Komponente rendert ausschließlich die Benutzeroberfläche und löst ein Ereignis aus. Am Zustand ändert sich nichts, bis Ihr eigener serverseitiger Code entscheidet, dass der handelnde Benutzer diese Änderung vornehmen darf, und dann explizit ProcessGrantChanged oder ProcessUserAction aufruft. Die Komponente autorisiert absichtlich niemals etwas für Sie.

Das war die Serie

Fünfundzwanzig Komponenten in fünf Beiträgen: structured data (TreeGrid, PivotTable, ActivityFeed, Splitter), charts and codes (Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode, Barcode), form inputs (MultiSelect, ColorPicker, Slider, TimePicker, SignaturePad, Transfer), feedback and layout (Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress, LogViewer) und die drei heutigen Admin-Komponenten. Die vollständige Feature-Matrix listet inzwischen 83 Komponenten in neun Familien, und jede einzelne ist mit einem QuickStart in Delphi, C++Builder und .NET auf ihrer eigenen Seite dokumentiert, darunter Presence, RolesPermissions und UserManagement.

Fragen, Feedback oder Hilfe bei der Migration? Kontaktieren Sie uns — Sie erhalten eine Antwort von den Leuten, die den Code geschrieben haben.