Tre nuovi componenti di amministrazione sgcHTML: Presence, RolesPermissions e UserManagement | eSeGeCe Blog

Tre nuovi componenti di amministrazione sgcHTML: Presence, RolesPermissions e UserManagement

· Componenti

Ultimo articolo di questa serie sui 25 nuovi componenti di sgcHTML. Chiudiamo con i tre che ogni pannello di amministrazione prima o poi richiede: chi è online in questo momento, chi è autorizzato a fare cosa, e la tabella con cui si gestiscono davvero gli account. Tutti e tre inviano aggiornamenti live sullo stesso canale WebSocket già usato dalle schermate di chat e di avanzamento dei job, quindi questo gruppo si affianca perfettamente ai componenti degli articoli precedenti.

Presence — un elenco live di chi è online

TsgcHTMLComponent_Presence genera uno stack di avatar sovrapposti oppure un elenco nome-e-stato, limitato da MaxVisible con un chip di overflow "+N". AddUser inserisce o aggiorna una voce nell'elenco, SetUserStatus aggiorna solo il pallino di stato, e GetUserFragmentHTML invia quella singola modifica a ogni client connesso.

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 — una matrice di assegnazione, non un form pieno di checkbox

TsgcHTMLComponent_RolesPermissions dispone i ruoli come colonne e i permessi come righe (raggruppati per categoria), con una checkbox a ogni intersezione. AddRole e AddPermission costruiscono i due assi, SetGrant spunta le celle iniziali, e ogni toggle lato client arriva sul server come payload JSON che il tuo handler deve autorizzare prima di applicarlo con 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 tabella degli account

TsgcHTMLComponent_UserManagement è la tabella in cui vengono assegnati quei ruoli: avatar, badge di stato, badge dei ruoli, ultimo accesso, casella di ricerca e un menu a tendina di azioni per riga (modifica, disabilita/abilita, reimposta password e, se abilitato, impersona ed elimina). AddUser aggiunge una riga e restituisce un TsgcHTMLUser da compilare; ProcessUserAction gestisce qualunque cosa invii il menu a tendina di una riga, anche in questo caso solo dopo il tuo controllo di autorizzazione.

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

Nota lo schema che si ripete sia in RolesPermissions sia in UserManagement: il componente si limita sempre a generare l'interfaccia ed emettere un evento. Nessuno stato cambia finché il tuo codice server-side non decide che l'utente che agisce è autorizzato a effettuare quella modifica, e chiama esplicitamente ProcessGrantChanged o ProcessUserAction. Il componente non autorizza mai nulla al posto tuo, per progetto.

Ecco la serie

Venticinque componenti in cinque articoli: 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), e i tre componenti di amministrazione di oggi. La matrice completa delle funzionalità ora elenca 83 componenti in nove famiglie, e ognuno di essi è documentato con una QuickStart in Delphi, C++Builder e .NET nella propria pagina: Presence, RolesPermissions e UserManagement incluse.

Domande, feedback o serve aiuto con la migrazione? Contattaci — riceverai una risposta dalle persone che hanno scritto il codice.