SpreadsheetEditor

<template>
  <SpreadsheetEditor
    :foglio-id="42"
    mode="edit"
    height="700px"
    show-erp-panel
    @save="onSave"
    @change="onChange"
    @error="onError"
  />
</template>

interface ExposedAPI {
  save(): Promise<SpreadsheetSaveEvent>
  exportXlsx(filename?: string): Promise<void>
  refreshErpData(): Promise<void>
  setGlobalFilters(filters: GlobalFilters): void
  getSnapshot(): FortuneSheetSnapshot
  loadSnapshot(snapshot: FortuneSheetSnapshot): void
  readonly state: Ref<FoglioState>
}

<script setup lang="ts">
import { ref } from 'vue'

const editor = ref<InstanceType<typeof SpreadsheetEditor> | null>(null)

async function salvaManuale() {
  if (!editor.value) return
  const event = await editor.value.save()
  console.log(`Salvata rev. ${event.revisione}`)
}

function leggiStato() {
  console.log(editor.value?.state.value.isDirty)
}

async function esporta() {
  await editor.value?.exportXlsx('rendiconto-2026.xlsx')
}
</script>

<template>
  <SpreadsheetEditor ref="editor" :foglio-id="42" />
  <button @click="salvaManuale">Salva</button>
  <button @click="esporta">Esporta xlsx</button>
</template>

onMounted
  ├─ Registra adapter.onChange → emit('change') + markDirty
  └─ Se foglioId !== null → loadFoglio()
       ├─ adapter.initialize(fortuneContainer)
       ├─ spreadsheet.load(idfolio)
       │   ├─ FogliPostgrestService.caricaFoglio → metadati + sorgenti + filtri
       │   ├─ FogliPostgrestService.caricaUltimaVersione → snapshot
       │   ├─ adapter.loadSnapshot(snapshot)
       │   └─ se mode='edit' && permesso !== 'lettura':
       │      ├─ LockService.acquisisciLock
       │      └─ avvia heartbeat (5 min)
       ├─ Aggiorna filtri globali da foglio
       ├─ erp.caricaCatalogo
       └─ emit('ready')

onUnmounted
  ├─ adapter.offChange
  ├─ LockService.rilasciaLock (se owner)
  └─ stop heartbeat

const isReadOnly = computed(() =>
  mode === 'view' || state.permessoEffettivo === 'lettura'
)

<script setup lang="ts">
import { ref } from 'vue'
import { Dialog } from '@pzeta/vue-components'

const dialogVisible = ref(false)
const foglioApertoId = ref<number | null>(null)

function apriFoglio(id: number) {
  foglioApertoId.value = id
  dialogVisible.value = true
}
</script>

<template>
  <Dialog v-model:visible="dialogVisible" :style="{ width: '90vw', height: '85vh' }">
    <SpreadsheetEditor :foglio-id="foglioApertoId" height="100%" />
  </Dialog>
</template>

<template>
  <SpreadsheetEditor
    :foglio-id="dashboardFoglioId"
    mode="view"
    :refresh-interval="30"
    :show-toolbar="false"
    :show-erp-panel="false"
    height="600px"
  />
</template>