ig-generators-lib

Generatori di tabelle, form e dettagli per i backoffice IG Solutions (Angular 22, componenti standalone).

Componenti

| Selettore | Descrizione | |-----------|-------------| | lib-table-generator | Lista di un'entità: box filtri, toolbar (Nuovo, export Excel, azioni sulla selezione) e griglia dati caricata dalle API | | lib-data-grid | Griglia dati generica, usata dal table-generator ma utilizzabile anche da sola | | lib-form-generator / lib-details-generator | Form e dettaglio generati dalla configurazione dell'entità | | lib-field-parser, lib-select-api, lib-multiselect-api, lib-image-upload, lib-file-upload, lib-image-gallery, lib-delete-dialog | Componenti di supporto |

L'app deve fornire a livello root provideHttpClient() e provideTranslateService(...) con le chiavi form.* e quelle delle entità. Le etichette della griglia (grid.of, grid.perPage, grid.empty, grid.resetColumns, grid.first/previous/next/last, grid.selectAll, grid.selectRow, grid.pagination) sono opzionali: se mancano vengono usati i default in italiano. form.actions (default "Azioni") è l'header della colonna azioni.

Griglia dati (lib-data-grid)

Funzionalità, tutte lato client senza dipendenze esterne:

• ordinamento cliccando sull'header (asc → desc → nessuno), emette sortChange;
• riordino colonne con drag & drop sull'header;
• resize colonne trascinando il bordo destro dell'header;
• persistenza di ordine e larghezze in localStorage (chiave ig-grid:<stateKey>) con pulsante "Ripristina colonne";
• paginazione server-side (pageChange con { page, pageSize }), selettore righe per pagina;
• colonne sticky a sinistra/destra durante lo scroll orizzontale (offset calcolati dalle larghezze);
• selezione con checkbox (selectionChange), stato di caricamento ed elenco vuoto;
• accessibilità: header ordinabili da tastiera, aria-sort, aria-current nel paginatore.

const columns: GridColumn[] = [
  { key: 'name', headerKey: 'users.name', width: 260, sticky: 'left' },
  { key: 'email', header: 'Email' },
  { key: 'company.name', header: 'Azienda', sortable: false },
  { key: 'actions', role: 'actions', header: 'Azioni', width: 120, template: actionsTpl },
];

<lib-data-grid [columns]="columns" [rows]="rows" [total]="total" [loading]="loading"
               [page]="page" [pageSize]="pageSize" [sort]="sort" stateKey="users"
               (sortChange)="onSort($event)" (pageChange)="onPage($event)"></lib-data-grid>

Il tema si personalizza con le CSS custom properties --ig-grid-* (font, colori, raggio, padding, focus ring), definite con fallback neutri in data-grid.component.scss.

Configurazione delle colonne nel table-generator

Ogni voce di config.entities[entity].table accetta, oltre a key, type, columnWidth, customClass, stringKey, customTemplate e labelField:

| Proprietà | Effetto | |-----------|---------| | sortable | default true per chiavi semplici, false per path annidati (function.name) | | sortField | campo inviato in $orderby se diverso da key | | sticky | 'left' o 'right' | | align | 'left', 'center', 'right' | | minWidth | larghezza minima nel resize | | exportable | false per escludere la colonna dall'export Excel |

Input del table-generator legati alla griglia: allowSorting, allowReorder, allowResize, persistColumnState, allowPaging, itemsPerPage, pageSizes, stickyActions (default true), actionColumnWidth, allowSelection, sortSettings ({ field, direction }).

Campo multiselect-api nel form generator

Oltre a endpoint, multiple, params e cache, ogni field di tipo multiselect-api accetta:

| Proprietà | Effetto | |-----------|---------| | labelField | campo usato come etichetta (default name) | | label | funzione (item) => string per etichette composte (es. nome cognome (email)) | | searchParam | se valorizzato la ricerca è lato server: il testo digitato nel filtro viene inviato come ?<searchParam>=<testo>&$top=<searchLimit>; gli elementi preselezionati non presenti nei risultati vengono letti da GET <endpoint>/:id | | searchLimit | numero massimo di risultati per la ricerca lato server (default 20) |

Durante le chiamate il campo mostra uno spinner e il testo form.loading. I testi comuni dei generatori (form.select, form.searchPlaceholder, form.loading, form.noData, form.noResults, form.typeToSearch, form.selectAll, form.unselectAll, grid.*) sono chiavi ngx-translate con fallback in italiano. Il type localstring del field-parser mostra il valore grezzo quando la traduzione <entity>.<valore> manca.

Caricamento dati

RemoteDataSource interroga GET <baseUrl>/<endpoint> con $inlinecount=allpages, $skip, $top, $orderby="<campo> asc|desc" più filtri e baseParams, e legge la risposta { data: [...], count: n }. Un 401 esegue Utils.logout().

Export Excel

Con [allowExcelExport]="true" la toolbar mostra il pulsante Excel: vengono scaricate tutte le righe che soddisfano i filtri correnti (non solo la pagina) e salvate in .xlsx tramite SheetJS (xlsx, peer dependency opzionale caricata dinamicamente). Il hook excelQueryCellInfo(args) riceve { column: { field, headerText }, data, value } e può modificare value.

Build e pubblicazione

npm run build          # ng build ig-generators → dist/ig-generators
npm run publish:lib    # build + npm publish