Component KvPicker

KV Picker

Quattro componenti picker per opzioni chiave-valore, in due varianti:

Variante	Caricamento	Factory	Componente
URL single	GET /api/{ctx}/properties/{lookupName}	kvSinglePicker(data, title?, opts?)	KvSinglePickerComponent
URL multi	stessa chiamata, selezione multipla	kvMultiPicker(data, title?, opts?)	KvMultiPickerComponent
Signal single	Signal<KVOption[]> già in memoria	kvSignalSinglePicker(data, title?, opts?)	KvSignalSinglePickerComponent
Signal multi	stessa signal, selezione multipla	kvSignalMultiPicker(data, title?, opts?)	KvSignalMultiPickerComponent

Tutti includono un campo filtro testo che ricerca su value e label in modalità "contiene" (case-insensitive).

---

Utilizzo — factory function (pattern consigliato)

Le factory costruiscono il LookupDialogConfig completo con il tipo corretto su data — nessun satisfies necessario.

import {
  kvSinglePicker, kvMultiPicker,
  kvSignalSinglePicker, kvSignalMultiPicker,
} from '@gpa-gruppo-progetti-avanzati-srl/ng-core-ui';

// URL-based: TypeScript valida { lookupName, labelColumn, ... }
readonly tipoConfig      = kvSinglePicker({ lookupName: 'tipo-contratto', labelColumn: 'Tipo' }, 'Seleziona tipo');
readonly categorieConfig = kvMultiPicker({ lookupName: 'categoria', confirmLabel: 'Applica' }, 'Categorie');

// Signal-based: TypeScript valida { options, labelColumn, ... }
readonly statiConfig     = kvSignalSinglePicker({ options: this.stati }, 'Seleziona stato');
readonly coloriConfig    = kvSignalMultiPicker({ options: signal(COLORI), valueColumn: 'Codice' }, 'Colori');

Uso nel layout della form:

{
  field: ft.tipo,
  label: 'Tipo contratto',
  component: LookupFieldComponent,
  inputs: { dialogConfig: this.tipoConfig },
}

Terzo parametro — opts

readonly tipoConfig = kvSinglePicker(
  { lookupName: 'tipo-contratto' },
  'Seleziona tipo',
  { width: '900px', maxWidth: '95vw' },   // opzionale
);

---

Interfacce di configurazione

URL-based — KvPickerBaseConfig

Campo	Tipo	Obbligatorio	Descrizione
lookupName	string	✓	Chiave del lookup → GET /api/{coreContext}/properties/{lookupName}
labelColumn	string	—	Header colonna descrizione (default: 'Descrizione')
valueColumn	string	—	Header colonna codice/id, mostrata a sinistra. Se assente, non compare
cancelLabel	string	—	Etichetta bottone Annulla (default: 'Annulla')

KvSinglePickerConfig estende KvPickerBaseConfig senza campi aggiuntivi. KvMultiPickerConfig aggiunge confirmLabel?: string (default: 'Conferma').

Signal-based — KvSignalPickerBaseConfig

Campo	Tipo	Obbligatorio	Descrizione
options	Signal<KVOption[]>	✓	Signal con le opzioni da mostrare
labelColumn	string	—	Header colonna descrizione (default: 'Descrizione')
valueColumn	string	—	Header colonna codice/id, mostrata a sinistra. Se assente, non compare
cancelLabel	string	—	Etichetta bottone Annulla (default: 'Annulla')

KvSignalSinglePickerConfig estende KvSignalPickerBaseConfig senza campi aggiuntivi. KvSignalMultiPickerConfig aggiunge confirmLabel?: string (default: 'Conferma').

---

Risultato restituito (LookupResult)

// Selezione singola
{ id: 'CODICE_VALORE', label: 'Descrizione leggibile' }

// Selezione multipla
{ id: ['VAL1', 'VAL2'], label: 'Descrizione 1, Descrizione 2' }

---

Note tecniche

• URL-based: URL costruita con buildApiPath('/api', coreContext, 'properties', lookupName). Usa createInMemoryLoader (cache in-memory, risposta T[] o { body: T[] } GPA). Il filtro richiama refresh(true) al cambio testo.
• Ordinamento per order: i picker URL-based ordinano i record per il campo KVProperty.order (ascending) in modo automatico. Il click su una colonna sovrascrive il default.
• Signal-based: nessuna HTTP call. Il filtro è un computed reattivo — nessun refresh() necessario.
• Tutti iniettano MAT_DIALOG_DATA (fornito da LookupPickerDialogComponent) e MatDialogRef.

---

Vedi anche

• → FormShell — sistema di form con LookupFieldComponent
• → DataTable — datatable con selezione righe
• → Configurazione ambiente — coreContext in environment.properties