Trois nouveaux composants d'administration sgcHTML : Presence, RolesPermissions et UserManagement | Blog eSeGeCe

Trois nouveaux composants d'administration sgcHTML : Presence, RolesPermissions et UserManagement

· Composants

Dernier article de cette série sur les 25 nouveaux composants de sgcHTML. Nous terminons avec les trois composants dont tout panneau d'administration finit par avoir besoin : qui est en ligne en ce moment, qui est autorisé à faire quoi, et la table où vous gérez réellement les comptes. Tous les trois poussent des mises à jour en direct sur le même canal WebSocket que vos écrans de chat et de progression des tâches utilisent déjà, ce lot s'intègre donc directement aux composants des articles précédents.

Presence — une liste de présence en direct

TsgcHTMLComponent_Presence génère soit une pile d'avatars superposés, soit une liste nom-et-statut, plafonnée par MaxVisible avec une pastille de débordement « +N ». AddUser ajoute ou met à jour une entrée de la liste, SetUserStatus met à jour uniquement le point de statut, et GetUserFragmentHTML pousse ce seul changement à chaque client connecté.

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 — une matrice d'attribution, pas un formulaire plein de cases à cocher

TsgcHTMLComponent_RolesPermissions dispose les rôles en colonnes et les permissions en lignes (groupées par catégorie), avec une case à cocher à chaque intersection. AddRole et AddPermission construisent les deux axes, SetGrant coche les cellules initiales, et chaque bascule côté client arrive côté serveur sous forme de charge utile JSON que votre gestionnaire doit autoriser avant de l'appliquer avec 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 — la table des comptes elle-même

TsgcHTMLComponent_UserManagement est la table dans laquelle ces rôles sont attribués : avatar, badge de statut, badges de rôle, dernière connexion, champ de recherche, et un menu déroulant d'actions par ligne (modifier, désactiver/activer, réinitialiser le mot de passe, et, si vous l'activez, emprunter l'identité et supprimer). AddUser ajoute une ligne et retourne un TsgcHTMLUser à remplir ; ProcessUserAction gère ce que le menu déroulant d'une ligne renvoie, là encore uniquement après votre propre vérification d'autorisation.

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');

Remarquez le schéma qui se répète dans RolesPermissions comme dans UserManagement : le composant se contente toujours de générer l'interface et d'émettre un événement. Rien ne change d'état tant que votre propre code côté serveur n'a pas décidé que l'utilisateur agissant est autorisé à effectuer ce changement, puis appelé explicitement ProcessGrantChanged ou ProcessUserAction. Le composant n'autorise jamais rien pour vous, c'est voulu.

Fin de la série

Vingt-cinq composants répartis sur cinq articles : 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), et les trois composants d'administration d'aujourd'hui. La matrice complète des fonctionnalités répertorie désormais 83 composants répartis en neuf familles, et chacun d'entre eux est documenté avec un guide de démarrage rapide en Delphi, C++Builder et .NET sur sa propre page : Presence, RolesPermissions et UserManagement inclus.

Des questions, un retour ou besoin d'aide pour une migration ? Contactez-nous — vous recevrez une réponse des personnes qui ont écrit le code.