Overview

Tree

Archetype per rappresentazioni gerarchiche di dati.

Screenshot reference (manuale utente)

manual__tree__01.png: esempio rendering route tree con nodi padre/figlio espandibili.

Quando usarlo

Classificazioni ad albero
Strutture padre/figlio
Navigazione nodi espandibili

Note operative

Configurazione tramite archetypes.tree
Supporta campi parent/label/icon/leaf

md_props_bag: archetypes.tree

Snippet 1JSON

{
  "archetypes": {
    "tree": {
      "advancedFilter": false,
      "parentField": "parent_id",
      "labelField": "name",
      "iconField": "icon",

advancedFilter: quando true mostra la wuic-filter-bar per l'archetype tree (a livello data-repeater).
parentField: campo relazione padre/figlio.
labelField: campo testo label nodo.
iconField: campo icona nodo.
leafField: campo booleano foglia.
labelFunction: callback JS label dinamica.
itemTemplateString: template custom rendering nodo.

Contesto Template (`itemTemplateString`)

Nel template custom sono disponibili questi input:

record: alias del record nodo corrente.
rowData: alias del record nodo corrente.
metaInfo: metadati tabella/colonne della datasource.
datasource: riferimento al componente datasource associato.

Contesto runtime usato dal framework:

Snippet 2ts

inputs: { record: item, rowData: item, metaInfo: metaInfo, datasource: datasource }

Eventi e subscriptions (host)

Eventi disponibili su wuic-tree-list:

onTreeDataBound: emesso quando l'albero viene popolato dal datasource.
onTreeNodeExpand: emesso prima del caricamento lazy dei figli.
onTreeNodeExpanded: emesso dopo il caricamento lazy figli.
onTreeNodeSelect: relay p-tree onNodeSelect.
onTreeNodeUnselect: relay p-tree onNodeUnselect.
onTreeNodeCollapse: relay p-tree onNodeCollapse.

Esempio subscribe:

Snippet 3ts

@ViewChild(TreeListComponent) tree?: TreeListComponent;
private readonly subs = new Subscription();

ngAfterViewInit(): void {
  if (!this.tree) return;
  this.subs.add(this.tree.onTreeDataBound.subscribe((e) => console.log(e)));
  this.subs.add(this.tree.onTreeNodeExpand.subscribe((e) => console.log(e)));

Import e mount (componente Angular)

Importa TreeListComponent da 'wuic-framework-lib' e montalo col DataSource del framework:

Snippet 4ts

import { DataSourceComponent, TreeListComponent } from 'wuic-framework-lib';

@Component({
  selector: 'app-esempio',
  imports: [DataSourceComponent, TreeListComponent],
  template: `
    <wuic-data-source #ds [hardcodedRoute]="'<route>'" [autoload]="true"></wuic-data-source>

Nomi ESATTI (barrel wuic-framework-lib): classe TreeListComponent, selector <wuic-tree-list>. Importa quella classe, non altri nomi inventati (es. un prefisso Lazy dove non c'è, o viceversa) → altrimenti il build dà has no exported member.

Config metadata-driven: il tag accetta SOLO gli input standard [hardcodedRoute], [hardcodedDatasource], [autoload], [hideToolbar]. La configurazione specifica (qui: la gerarchia (campo parent)) NON è un input HTML ([groupField], [type], ecc. danno NG8002 not a known property) → va nei metadata (md_props_bag/archetipo) o in-code via metaInfo.