Vue FogliDiCalcolo

Plugin Vue 3 per fogli di calcolo enterprise basato su Fortune Sheet, con integrazione dati ERP via PostgREST, versioning JSONB, lock pessimistico e ACL per utente.

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.

Questa documentazione si riferisce alla v1.x. Peer dependencies obbligatorie: 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 pessimisticoLockService con 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

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

ScenarioComponente / API
Pagina dedicata all'editor di un foglioSpreadsheetEditor
Pagina lista fogli con apertura/creazioneFogliListView
Workbook nudo (no toolbar, no panel) per casi customFortuneSheetWorkbook
CRUD foglio in script setupuseSpreadsheet
Refresh dati ERP programmaticouseSpreadsheetERP
Salvataggio/ripristino versioniuseSpreadsheetVersioni
Lock manuale (no auto-heartbeat)LockService
Funzione formula ERP customregistrare 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