FogliListView
Quick start
<template>
<FogliListView
:page-size="20"
filter="all"
view-mode="grid"
@open="apriFoglio"
@create="apriFoglio"
/>
</template>
<script setup lang="ts">
function apriFoglio(payload: { idfolio: number }) {
router.push(`/fogli/${payload.idfolio}`)
}
</script>
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
showTemplates | boolean | true | Mostra/nasconde il filtro "Templates" |
pageSize | number | 20 | Numero di righe per pagina |
filter | 'all' | 'mine' | 'shared' | 'templates' | 'all' | Filtro iniziale applicato |
viewMode | 'grid' | 'list' | 'grid' | Modalità visualizzazione iniziale (toggleabile dall'utente) |
Eventi
| Evento | Payload | Quando |
|---|---|---|
open | { idfolio: number } | Click su foglio (apertura editor) |
create | { idfolio: number } | Creazione/duplicazione completata (ID del nuovo foglio) |
error | SpreadsheetErrorEvent | Errore in rinomina/duplica/elimina |
Filtri disponibili
filter | Comportamento |
|---|---|
'all' | Tutti i fogli accessibili (proprietari + condivisi + pubblici) |
'mine' | Solo fogli con permesso_effettivo === 'proprietario' |
'shared' | Solo fogli condivisi (permesso_effettivo !== 'proprietario') |
'templates' | Solo fogli con istemplate === true |
L'utente può cambiare il filtro a runtime via FogliFilters interno.
Ricerca full-text
Il textbox di ricerca dentro FogliFilters triggera una query PostgREST verso la vista dedicata v_foglidicalcolo_ricerca:
GET /v_foglidicalcolo_ricerca?tsv_search=plfts(italian).{q}
plfts = phrase_to_tsquery. La ricerca è debounced 300ms e resetta page a 0.
Operazioni supportate
Dalla riga lista (menu contestuale di FogliListItem):
| Azione | Implementazione |
|---|---|
| Apri | emit('open', { idfolio }) |
| Rinomina | useFogliList.rinomina(id, nuovoNome) |
| Duplica | useFogliList.duplica(id) → emit create |
| Elimina | Conferma + useFogliList.elimina(id) (irreversibile) |
| Condividi | Apre FogliShareDialog per gestire ACL |
L'eliminazione richiede conferma esplicita via confirm.require di @pzeta/vue-components.
Creazione nuovo foglio
Pulsante "Nuovo foglio" → FogliCreateDialog:
interface CreateFoglioRequest {
nome: string
descrizione?: string
istemplate?: boolean
ispubblico?: boolean
filtriglobali?: GlobalFilters
sorgentierp?: DataSourceConfig[]
}
A creazione riuscita → emit create con idfolio del nuovo foglio.
Visualizzazione
Due modalità switchabili dall'utente (toolbar interna):
| Mode | Layout |
|---|---|
'grid' | Cards in griglia responsive |
'list' | Righe compatte tabellari |
Entrambe usano FogliListItem con diverso template.
Stato vuoto
Se la query non ritorna risultati, viene mostrato un empty state con call-to-action "Crea il primo foglio" o "Modifica i filtri".
Pattern: lista in dialog
Per integrare la lista come selettore di foglio in un workflow:
<script setup lang="ts">
import { Dialog } from '@pzeta/vue-components'
const open = ref(false)
const selezionato = ref<number | null>(null)
function onScelta(payload: { idfolio: number }) {
selezionato.value = payload.idfolio
open.value = false
}
</script>
<template>
<Dialog v-model:visible="open" header="Seleziona foglio" style="width: 80vw">
<FogliListView filter="mine" view-mode="list" @open="onScelta" />
</Dialog>
</template>
Pattern: solo template
<FogliListView filter="templates" :show-templates="false" @open="apriTemplate" />
Composable correlato
FogliListView usa internamente useFogliList. Se hai bisogno di una UI custom (es. layout completamente diverso), usa direttamente il composable.
Tipi correlati
FoglioDiCalcolo— entità listaFoglioFilters— filtri reattiviuseFogliList