Funzionalita Avanzate
Rule Builder
Costruttore di filtri avanzati con struttura ad albero AND/OR (v2).
Panoramica
Il Rule Builder permette agli utenti di costruire filtri arbitrariamente complessi tramite un'interfaccia visuale. Organizza le regole in un AST (RuleGroup) con supporto per gruppi annidati e combinatori AND/OR (max 2 livelli di profondità).
Il Rule Builder viene renderizzato solo se la prop ruleBuilderFields è presente nella SearchToolbar. L'AST corrente viene incluso in state.rules quando il componente emette apply (oppure null se non ci sono regole complete).
Anteprima live
Struttura AST
interface Rule {
id: string // UUID
column: string | null // Colonna selezionata
operator: RuleOperator | null // Operatore selezionato
value: unknown // Valore
valueTo?: unknown // Solo per 'between': valore superiore
}
interface RuleGroup {
id: string
combinator: 'AND' | 'OR'
items: Array<Rule | RuleGroup> // Regole e sotto-gruppi annidati (max 2 livelli)
}
Configurazione dei campi
import type { RuleFieldDefinition } from '@pzeta/vue-ricerca'
const ruleFields: RuleFieldDefinition[] = [
{
column: 'nome',
label: 'Nome',
type: 'text',
},
{
column: 'stato',
label: 'Stato',
type: 'select',
options: [
{ label: 'Attivo', value: 'attivo' },
{ label: 'Inattivo', value: 'inattivo' },
],
},
{
column: 'datacreazione',
label: 'Data creazione',
type: 'date',
},
{
column: 'prezzo',
label: 'Prezzo',
type: 'number',
},
{
column: 'attivo',
label: 'Attivo',
type: 'boolean',
},
]
Utilizzo in SearchToolbar
<SearchToolbar
v-model="filtri"
:fields="fields"
:rule-builder-fields="ruleFields"
:rule-builder-expanded="false"
rule-builder-empty-label="Aggiungi una regola..."
@apply="onApply"
@update:rules="onRulesChange"
/>
Operatori disponibili per tipo
| Tipo | Operatori |
|---|---|
text | contiene, non contiene, uguale a, inizia con, termina con |
number | uguale a, diverso da, >, >=, <, <= |
date | uguale a, <, >, tra |
boolean | è vero, è falso |
select | è in, non è in |
Via useSearchToolbar
const {
rules, addRule, removeRule, updateRule,
addGroup, removeGroup, setCombinator,
moveRuleUp, moveRuleDown, hasRules, ruleCount,
} = useSearchToolbar({ fields, ruleBuilderFields: ruleFields, onApply: (state) => { /* ... */ } })
// Aggiunge regola al gruppo radice
addRule()
// Aggiunge sotto-gruppo
addGroup()
// Aggiorna una regola
updateRule(ruleId, { column: 'nome', operator: 'ilike', value: 'mario' })
// Cambia combinatore
setCombinator(groupId, 'OR')
Type guards
import { isRule, isRuleGroup } from '@pzeta/vue-ricerca'
for (const item of rules.value.items) {
if (isRule(item)) {
console.log('regola:', item.column, item.operator, item.value)
} else if (isRuleGroup(item)) {
console.log('sotto-gruppo con', item.items.length, 'items')
}
}