Funzionalita Avanzate
Preset
Filtri preconfigurati in pill-bar per attivazione rapida (v2).
Panoramica
I preset sono filtri preconfigurati mostrati come toggle-pill nella SearchToolbar. Permettono agli utenti di attivare rapidamente combinazioni di filtri frequenti (es. "Solo attivi", "Scaduti questa settimana").
La pill-bar viene renderizzata solo se la prop presets è presente nella SearchToolbar. Gli ID preset attivi vengono inclusi in state.activePresets quando il SearchToolbar emette apply.
Anteprima live
Struttura dati
interface PresetFilter {
id: string // ID univoco del preset
label: string // Testo del toggle
icon?: string // Icona PrimeIcons (es. 'pi pi-check-circle')
conditions: Record<string, string> // Condizioni PostgREST: { colonna: 'op.valore' }
defaultActive?: boolean // Attivo di default al mount
}
interface PresetFilterGroup {
id: string
label?: string // Intestazione del gruppo (opzionale)
presets: PresetFilter[]
exclusive?: boolean // true = comportamento radio-button (un solo preset attivo)
}
Configurazione
import type { PresetFilterGroup } from '@pzeta/vue-ricerca'
const presetGroups: PresetFilterGroup[] = [
{
id: 'stato',
label: 'Stato',
exclusive: true,
presets: [
{
id: 'solo-attivi',
label: 'Solo attivi',
icon: 'pi pi-check-circle',
conditions: { attivo: 'is.true' },
defaultActive: true,
},
{
id: 'solo-inattivi',
label: 'Solo inattivi',
icon: 'pi pi-times-circle',
conditions: { attivo: 'is.false' },
},
],
},
{
id: 'scadenza',
presets: [
{
id: 'scaduti',
label: 'Scaduti',
conditions: { datascadenza: 'lt.now()' },
},
],
},
]
Utilizzo in SearchToolbar
<SearchToolbar
v-model="filtri"
:fields="fields"
:presets="presetGroups"
@apply="onApply"
/>
Logica di combinazione
Le condizioni dei preset attivi vengono combinate tramite buildPostgrestQueryFromState:
- Stesso gruppo → OR tra le condizioni dei preset attivi
- Gruppi diversi → AND tra i gruppi
// Gruppo "stato" (exclusive) → solo-attivi attivo
// Gruppo "scadenza" → scaduti attivo
// Risultato: AND(stato.is.true, datascadenza.lt.now())
Preset via useSearchToolbar
const { activePresets, togglePreset, clearPresets, activePresetCount } =
useSearchToolbar({ fields, presets: presetGroups, onApply: (state) => { /* ... */ } })
// Attiva/disattiva
togglePreset('solo-attivi')
// Controlla stato
console.log(activePresets.value.has('solo-attivi')) // true/false
// Deseleziona tutto
clearPresets()