Vue FogliDiCalcolo
Cos'è @pzeta/vue-foglidicalcolo
@pzeta/vue-foglidicalcolo è una libreria Vue 3 per gestire fogli di calcolo interattivi enterprise con dati provenienti dal sistema ERP. L'editor è basato su @fortune-sheet/core (canvas rendering, formule, formattazione condizionale), arricchito con servizi PZeta per fetch dati PostgREST, versioning, lock e condivisione.
vue@^3.4, @pzeta/vue-components@^1.3.22, @fortune-sheet/core@^1.0.4.Funzionalità principali
- Editor spreadsheet completo (
SpreadsheetEditor) — canvas Fortune Sheet con toolbar, pannelli ERP/versioni/ACL integrati - Integrazione ERP — funzioni formula custom (
ERP.FATTURATO,ERP.ORDINI, ...) che leggono da sorgenti PostgREST tipizzate - Versioning — salvataggio snapshot JSONB + storico revisioni con ripristino selettivo
- Lock pessimistico —
LockServicecon heartbeat automatico per prevenire modifiche concorrenti - ACL — condivisione fogli con permessi lettura/scrittura per utente (
useFogliAcl) - Lista fogli (
FogliListView) — ricerca full-text, filtri per tipo, paginazione - Theme — supporto chiaro/scuro via
useTheme
Architettura
@pzeta/vue-foglidicalcolo
├── adapters/ # FortuneSheetAdapter — integrazione @fortune-sheet/core
├── components/
│ ├── fogli/ # FogliListView · FogliCreateDialog · FogliFilters · FogliListItem · FogliShareDialog
│ └── spreadsheet/ # SpreadsheetEditor · FortuneSheetWorkbook · SpreadsheetToolbar
│ # SpreadsheetErpPanel · SpreadsheetVersioniPanel · SpreadsheetAclDialog
│ # SpreadsheetLockIndicator
├── composables/ # useSpreadsheet · useFogliList · useSpreadsheetERP · useSpreadsheetVersioni
│ # useFogliAcl · usePzetaFogliOptions · useGlobalFilters · useTheme
├── services/ # FogliPostgrestService · LockService · ErpDataService
├── erp-functions/ # Funzioni formula ERP (ERP.FATTURATO, ERP.ORDINI, ...)
├── types/ # FoglioDiCalcolo · FoglioVersione · FoglioAcl · ErpDataSource · LockInfo
└── plugin.ts # PzetaFogliDiCalcolo (Vue plugin) + PZETA_FOGLI_OPTIONS
Modello di dominio
interface FoglioDiCalcolo {
id: number
nome: string
tipo: string
owner: string
dataCreazione: string
dataModifica: string
}
interface FoglioVersione {
id: number
idFoglio: number
snapshot: FortuneSheetSnapshot // JSONB
autore: string
data: string
note?: string
}
interface ErpDataSource {
codice: string
query: string // PostgREST query
parametri?: Record<string, unknown>
refreshIntervalMs?: number
}
Sotto-pagine
Componenti
Componenti Vue per editor fogli di calcolo, lista fogli, pannelli laterali e dialog di gestione.
Composables
Composables Vue 3 per gestire stato foglio, lista, sorgenti ERP, versioni, ACL, filtri globali e tema.
Services & Adapters
Service layer PostgREST/REST, lock RPC, fetch sorgenti ERP, adapter Fortune Sheet e funzioni ERP-native.
Quick start
// main.ts
import { createApp } from 'vue'
import { PzetaFogliDiCalcolo } from '@pzeta/vue-foglidicalcolo'
import '@pzeta/vue-foglidicalcolo/dist/index.css'
createApp(App)
.use(PzetaFogliDiCalcolo, {
postgrestUrl: 'https://api.example.com/rest',
})
.mount('#app')
<!-- Editor completo, con auto-load del foglio -->
<template>
<SpreadsheetEditor
:foglio-id="42"
mode="edit"
height="600px"
@save="onSave"
@change="onChange"
@error="onError"
/>
</template>
<!-- Lista fogli con ricerca/filtri -->
<template>
<FogliListView
@open="(id) => router.push(`/fogli/${id}`)"
@create="onCreate"
/>
</template>
Quando usare cosa
| Scenario | Componente / API |
|---|---|
| Pagina dedicata all'editor di un foglio | SpreadsheetEditor |
| Pagina lista fogli con apertura/creazione | FogliListView |
| Workbook nudo (no toolbar, no panel) per casi custom | FortuneSheetWorkbook |
| CRUD foglio in script setup | useSpreadsheet |
| Refresh dati ERP programmatico | useSpreadsheetERP |
| Salvataggio/ripristino versioni | useSpreadsheetVersioni |
| Lock manuale (no auto-heartbeat) | LockService |
| Funzione formula ERP custom | registrare in erp-functions/index.ts |
Stack tecnico
- Vue 3 Composition API (
>=3.4) @fortune-sheet/core^1.0.4 — engine spreadsheet canvas-based@pzeta/vue-components^1.3.22 — UI base (Dialog, Toolbar, Form)- Tailwind CSS 4 — styling utility-first
- PostgREST — backend dati ERP (via
@pzeta/postgrest) - Vite library mode + vite-plugin-dts — build
createAxiosAdapter
Factory per l'AttachmentAdapter axios di default. Supporta storagePath, basePath custom e mapper per backend con schema legacy.
Architettura
Layering di @pzeta/vue-foglidicalcolo — adapter Fortune Sheet, composables, services PostgREST, lock e ACL. Pattern Adapter per disaccoppiare il workbook engine.