Funzionalita Avanzate
Group By
Selettore raggruppamenti multipli con ordine di priorità configurabile. Tradotto nel parametro `order` di PostgREST.
Panoramica
Il selettore Group By permette agli utenti di scegliere uno o più raggruppamenti da applicare alla query, in ordine di priorità. Viene tradotto nel parametro order di PostgREST con concatenazione col1.asc,col2.desc.
Il selettore viene renderizzato solo se la prop groupByFields è presente nella SearchToolbar.
PostgREST applica
order come ordinamento, non come GROUP BY SQL. Per raggruppamenti reali (con aggregazioni) usa una vista materializzata o una stored function lato DB esposta da PostgREST. Il parametro order qui generato è il modo idiomatico di "raggruppare visualmente" i risultati.Anteprima live
Struttura dati
interface GroupByFieldConfig {
column: string // colonna PostgREST usata in `order`
label: string // label human-readable nel dropdown
defaultOrder?: 'asc' | 'desc' // ordinamento predefinito (default: 'asc')
}
interface GroupByEntry {
column: string // colonna selezionata
order: 'asc' | 'desc' // ordinamento corrente
}
GroupByFieldConfig definisce cosa è raggruppabile; GroupByEntry rappresenta una selezione runtime. Lo stato state.groupByFields è GroupByEntry[] — un array che riflette ordine di priorità (primo elemento = primo order).
Configurazione
import type { GroupByFieldConfig } from '@pzeta/vue-ricerca'
const groupByConfig: GroupByFieldConfig[] = [
{ column: 'datacreazione', label: 'Data creazione', defaultOrder: 'desc' },
{ column: 'stato', label: 'Stato', defaultOrder: 'asc' },
{ column: 'categoria', label: 'Categoria', defaultOrder: 'asc' },
]
Utilizzo in SearchToolbar
<SearchToolbar
v-model="filtri"
:fields="fields"
:group-by-fields="groupByConfig"
@apply="onApply"
@update:group-by="onGroupByChange"
/>
Query PostgREST generata
// state.groupByFields = [
// { column: 'datacreazione', order: 'desc' },
// { column: 'categoria', order: 'asc' },
// ]
buildPostgrestQueryFromState(state, { fields, groupByFields: groupByConfig })
// → { order: 'datacreazione.desc,categoria.asc' }
L'ordine dell'array è significativo: il primo elemento ha priorità maggiore. Array vuoto = parametro order omesso.
Via useSearchToolbar
const { groupByFields, setGroupBy } = useSearchToolbar({
fields,
groupByFields: groupByConfig,
initialGroupBy: [{ column: 'datacreazione', order: 'desc' }],
onApply: (state) => {
// state.groupByFields disponibile
},
})
// Aggiorna raggruppamenti (sostituisce l'intero array)
setGroupBy([
{ column: 'stato', order: 'asc' },
{ column: 'datacreazione', order: 'desc' },
])
// Rimuove tutti i raggruppamenti
setGroupBy([])