Overview

Conditional Styling

Stili condizionali su righe, celle e componenti in base ai dati runtime.

Screenshot reference (riuso metadata styles)

metadata-editor-styles-table: lista stili tabella.
metadata-editor-styles-table-edit-popup: popup edit stile tabella.
metadata-editor-styles-column: lista stili colonna.
metadata-editor-styles-column-edit-popup: popup edit stile colonna.

Metadati stili tabella

I metadati tabella usano la collezione _Metadati_UI_Stili_Tabelles (route metadata _Metadati_UI_Stili_Tabelle).

Campi principali:

must_attribute_name: classe CSS da applicare alla riga.
must_attribute_value: callback/condizione JavaScript che ritorna boolean (true applica la classe, false no).

Comportamento:

le regole vengono valutate a runtime per ogni record;
quando la condizione è vera, la classe definita viene aggiunta alla riga della grid.

Metadati stili colonna

I metadati colonna usano la collezione _Metadati_UI_Stili_Colonnes (route metadata _Metadati_UI_Stili_Colonne).

Campi principali:

musc_attribute_name: nome attributo/classe stile da applicare alla cella.
musc_attribute_value: valore statico dello stile.
musc_attribute_value_callback: callback JS per calcolare il valore dinamicamente in base al record.

Comportamento:

lo stile può essere statico (musc_attribute_value) o dinamico (musc_attribute_value_callback);
la valutazione avviene per cella, quindi permette evidenziazioni puntuali colonna-per-colonna.

Note operative

Preferire classi CSS (must_attribute_name, musc_attribute_name) invece di inline style molto lunghi.
Mantenere callback semplici e deterministici per ridurre impatti performance in griglie grandi.

Iniezione in-code (solo questo componente)

Gli stili condizionali si possono applicare anche in-code nel `.ts` invece che via metadata DB. La patch SQL su _metadati__u_i__stili__tabelle vale per ogni componente sulla route; l'iniezione in-code vale solo per questo componente.

Si fa il push su metaInfo.tableMetadata._Metadati_UI_Stili_Tabelles (array già []). must_attribute_name = classe CSS applicata alla riga; must_attribute_value = callback JavaScript come stringa che ritorna true/false (con record in scope). Stesso wiring fetchInfo$ con guard idempotente.

> Lifecycle: la fetchInfo$.subscribe va in `ngOnInit` con @ViewChild('ds', { static: true }) (NON ngAfterViewInit). La <wuic-list-grid> figlia si iscrive a fetchInfo$ nel suo ngOnInit; il ngOnInit del padre gira prima, quindi la patch dei metadati precede la costruzione di righe/colonne. In ngAfterViewInit (o con @ViewChild non-static) arriverebbe dopo il primo render. Eccezione: datasource nested in dialog/*ngIf (@ViewChild(DataSourceComponent) by-type, non-static) → resta ngAfterViewInit (vedi datasource.md).

Snippet 1ts

@ViewChild('ds', { static: true }) ds!: DataSourceComponent;

ngOnInit() {
  this.ds.fetchInfo$.subscribe(info => {
    const tm = info?.metaInfo?.tableMetadata;
    if (!tm) return;
    if (tm._Metadati_UI_Stili_Tabelles.some(s => s.must_attribute_name === 'row-danger')) return;