Drie nieuwe sgcHTML-beheercomponenten: Presence, RolesPermissions en UserManagement

Laatste post in deze reeks over de 25 nieuwe sgcHTML-componenten. We sluiten af met de drie componenten die elk beheerpaneel vroeg of laat nodig heeft: wie er nu online is, wie wat mag doen, en de tabel waarin je de accounts daadwerkelijk beheert. Alle drie sturen ze live updates via hetzelfde WebSocket-kanaal dat je chat- en voortgangsschermen al gebruiken, dus deze set sluit naadloos aan bij de componenten uit de eerdere posts.

Presence — een live overzicht van wie online is

TsgcHTMLComponent_Presence toont een overlappende avatarstapel of een naam-en-statuslijst, begrensd door MaxVisible met een "+N"-overflowchip. AddUser voegt een overzichtsitem toe of werkt het bij, SetUserStatus werkt alleen de statusstip bij, en GetUserFragmentHTML stuurt die ene wijziging naar elke verbonden 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;

// Push a status change to every connected client, no full re-render:
oPresence.SetUserStatus('u2', psOnline);
TsgcHTMX_Engine_Server.BroadcastFragment(oPresence.GetUserFragmentHTML('u2'));

RolesPermissions — een rechten-matrix, geen formulier vol selectievakjes

TsgcHTMLComponent_RolesPermissions zet rollen als kolommen en rechten als rijen neer (gegroepeerd per categorie), met een selectievakje op elk kruispunt. AddRole en AddPermission bouwen de twee assen op, SetGrant vinkt de initiële cellen aan, en elke wijziging aan clientzijde komt server-side binnen als een JSON-payload die jouw handler moet autoriseren voordat deze wordt toegepast met ProcessGrantChanged.

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;

// Server-side handler for a checkbox toggle received over WebSockets.
// ALWAYS verify the acting user is authorized before applying the change:
oMatrix.ProcessGrantChanged('editor', 'users.delete', True);

UserManagement — de accounttabel zelf

TsgcHTMLComponent_UserManagement is de tabel waarin die rollen worden toegekend: avatar, statusbadge, rolbadges, laatste login, zoekvak en een acties-dropdown per rij (bewerken, uitschakelen/inschakelen, wachtwoord resetten en, indien je dit inschakelt, impersoneren en verwijderen). AddUser voegt een rij toe en retourneert een TsgcHTMLUser om in te vullen; ProcessUserAction verwerkt wat de dropdown van een rij ook terugstuurt, opnieuw pas na je eigen autorisatiecontrole.

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;

// Server-side handler for an action received over WebSockets.
// ALWAYS verify the acting user is authorized before applying it:
oUsers.ProcessUserAction('userDisable', 'u2');

Let op het patroon dat zich herhaalt bij zowel RolesPermissions als UserManagement: de component rendert altijd alleen de UI en genereert een event. Er verandert pas iets aan de status wanneer jouw eigen server-side code beslist dat de handelende gebruiker die wijziging mag doorvoeren, en vervolgens expliciet ProcessGrantChanged of ProcessUserAction aanroept. De component autoriseert bewust nooit iets voor jou.

Dat was de reeks

Vijfentwintig componenten verdeeld over vijf posts: 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), en de drie beheercomponenten van vandaag. De volledige featurematrix telt nu 83 componenten verdeeld over negen families, en elk daarvan is gedocumenteerd met een QuickStart in Delphi, C++Builder en .NET op zijn eigen pagina: Presence, RolesPermissions en UserManagement inbegrepen.

Vragen, feedback of hulp nodig bij migratie? Neem contact op — je krijgt antwoord van de mensen die de code hebben geschreven.