Componenti Board

KanbanFasiBoard

Componente completo per pipeline fasi con drag-and-drop, metriche, slot dialog per CRUD schede/tag/attività/allegati/commenti.

Panoramica

KanbanFasiBoard è il componente principale per board basate sullo schema fasi. Gestisce autonomamente:

caricamento fasi, schede, campi custom, priorità, tag (useFasiService)
spostamento schede tramite RPC sposta_scheda_fase
riordino colonne tramite RPC riordina_fasi
metriche di avanzamento e stallo per fase (useFasiMetrics)
5 slot per i dialog di scrittura (form scheda, allegati, tag, attività, commenti) — il consumer fornisce i wrapper concreti

Nota architettura: i dialog non sono più hard-coded nel componente. KanbanFasiBoard espone slot scopati (#dialog-form, #dialog-attachment, #dialog-tag, #dialog-activity, #dialog-comment) e il consumer integra i wrapper di @pzeta/vue-kanban/dialogs o componenti custom.

Props

Prop	Tipo	Default	Descrizione
`boardId`	`number \| string`	—	ID numerico o codboard stringa
`currentUserId`	`number`	—	ID utente corrente (richiesto per RPC)
`cardComponent`	`Component`	`ElementCard`	Componente card personalizzato
`readonly`	`boolean`	`false`	Disabilita drag-and-drop e azioni di scrittura
`enableRealtime`	`boolean`	`false`	Attiva connessione NATS per aggiornamenti live
`showConfig`	`boolean`	`false`	Mostra pulsante configurazione fase nell'header
`columnWidth`	`number`	`340`	Larghezza colonne in pixel
`addItemLabel`	`string`	`'Nuova'`	Prefisso del pulsante "aggiungi" per colonna
`showToolbar`	`boolean`	`false`	Mostra toolbar superiore
`showSearch`	`boolean`	`false`	Mostra campo ricerca nella toolbar
`searchFields`	`string[]`	`['titolo','descrizione']`	Campi su cui eseguire la ricerca
`attivitaEntita`	`string`	`'scheda'`	Tipo entità per `@pzeta/attivita`
`getToken`	`() => string \| null`	`() => null`	Provider del token JWT/Bearer per le chiamate autenticate (fetch campi dinamici remote). Esposto anche come slot prop di `#dialog-form` e `#dialog-activity`
`callbacks`	`KanbanCallbacks`	—	Callback per eventi CRUD (alternativa agli emits)

KanbanCallbacks

interface KanbanCallbacks {
  onItemCreated?: (item: Record<string, unknown>) => void
  onItemUpdated?: (item: Record<string, unknown>) => void
  onItemDeleted?: (item: Record<string, unknown>) => void
}

Emits

Evento	Payload	Descrizione
`schedaspostata`	`(idScheda, idFaseOrigine, idFaseDestinazione)`	Scheda spostata con successo
`errorespostamento`	`(idScheda, error)`	Errore durante lo spostamento
`view`	`SchedaKanban`	Clic su "Visualizza" nel menu card
`editScheda`	`SchedaKanban`	Clic su "Modifica" nel menu card
`deleteScheda`	`SchedaKanban`	Scheda eliminata
`addActivity`	`SchedaKanban`	Attività salvata dal `dialog-activity`
`addAttachment`	`SchedaKanban`	Allegato salvato dal `dialog-attachment`
`addComment`	`SchedaKanban`	Commento salvato dal `dialog-comment`
`manageTags`	`SchedaKanban`	Tag salvati dal `dialog-tag`
`itemCreated`	`Record<string, unknown>`	Nuova scheda creata
`itemUpdated`	`Record<string, unknown>`	Scheda aggiornata
`itemDeleted`	`Record<string, unknown>`	Scheda eliminata

Slot

Card

Slot	Props	Descrizione
`item`	`{ item, fase }`	Override completo del rendering card

Dialog (nuovi nel refactoring)

I 5 slot dialog ricevono lo stato di apertura, i dati correlati e callback on-close/on-saved per chiudere/notificare il completamento. Nessuno ha contenuto di default: il consumer deve fornire i wrapper.

Slot	Slot props	Quando attivo
`dialog-form`	`{ visible, boardId, idfase, campi, priorita, item?, getToken, onClose, onSaved }`	Click su "Nuovo" o "Modifica" su una card
`dialog-attachment`	`{ visible, referenceValue, onClose }`	Click "Aggiungi allegato"
`dialog-tag`	`{ visible, idscheda, availableTags, currentTagIds, onClose, onSaved }`	Click "Gestisci tag"
`dialog-activity`	`{ visible, entitasorgente, identitasorgente, getToken, onClose, onSaved }`	Click "Aggiungi attività"
`dialog-comment`	`{ visible, idscheda, idutente, onClose, onSaved }`	Click "Aggiungi commento"

Provide

Il componente fornisce ai discendenti tramite provide:

Inject key	Tipo	Descrizione
`boardCampi`	`Ref<BoardCampoRow[]>`	Array reattivo dei campi dinamici (usato da `ElementCard` per render `dati_extra`)

Comportamento automatico al mount

Carica in parallelo: fasi, schede, campi, priorità, tag, avanzamento, stalli
Comprime automaticamente le fasi con finale: true
Se enableRealtime: true avvia la connessione NATS

Esempi

Setup completo con dialog wrappers

<script setup lang="ts">
import {
  KanbanFasiBoard,
  SchedaFormDialog,
  SchedaTagDialog,
  SchedaCommentDialog
} from '@pzeta/vue-kanban'
import { AttivitaForm } from '@pzeta/attivita'
import { AttachmentDialog } from '@pzeta/vue-attachment'

function getToken() {
  return sessionStorage.getItem('token')
}
</script>

<template>
  <KanbanFasiBoard
    board-id="crm"
    :current-user-id="userId"
    :get-token="getToken"
    :show-search="true"
  >
    <template #dialog-form="{ visible, boardId, idfase, campi, priorita, item, onClose, onSaved }">
      <SchedaFormDialog
        :visible="visible"
        :board-id="boardId"
        :idfase="idfase"
        :campi="campi"
        :priorita="priorita"
        :item="item"
        :get-token="getToken"
        @close="onClose"
        @saved="onSaved"
      />
    </template>

    <template #dialog-tag="{ visible, idscheda, availableTags, currentTagIds, onClose, onSaved }">
      <SchedaTagDialog
        :visible="visible"
        :idscheda="idscheda"
        :available-tags="availableTags"
        :current-tag-ids="currentTagIds"
        @close="onClose"
        @saved="onSaved"
      />
    </template>

    <template #dialog-activity="{ visible, entitasorgente, identitasorgente, onClose, onSaved }">
      <AttivitaForm
        :visible="visible"
        :entitasorgente="entitasorgente"
        :identitasorgente="identitasorgente"
        @update:visible="(v) => !v && onClose()"
        @saved="onSaved"
      />
    </template>

    <template #dialog-attachment="{ visible, referenceValue, onClose }">
      <AttachmentDialog
        :visible="visible"
        reference-table="schedakanban"
        reference-column="idscheda"
        :reference-value="referenceValue"
        @update:visible="(v) => !v && onClose()"
      />
    </template>

    <template #dialog-comment="{ visible, idscheda, idutente, onClose, onSaved }">
      <SchedaCommentDialog
        :visible="visible"
        :idscheda="idscheda"
        :idutente="idutente"
        @close="onClose"
        @saved="onSaved"
      />
    </template>
  </KanbanFasiBoard>
</template>

Card personalizzata via slot

<KanbanFasiBoard board-id="crm" :current-user-id="userId" :get-token="getToken">
  <template #item="{ item, fase }">
    <MyCustomCard :scheda="item" :fase="fase" />
  </template>
</KanbanFasiBoard>

Card personalizzata via prop

<KanbanFasiBoard
  board-id="crm"
  :current-user-id="userId"
  :get-token="getToken"
  :card-component="MyCRMCard"
/>

Board in sola lettura

<KanbanFasiBoard
  board-id="crm"
  :current-user-id="userId"
  :readonly="true"
/>

Migrazione dalla versione precedente

Prima	Adesso
`attivitaBaseUrl="..."`	rimosso — `@pzeta/attivita` è configurato a livello app
`attivitaGetToken="..."`	sostituito da `getToken` unificato (provider singolo per tutta la board)
Dialog hard-coded	sostituiti da 5 slot scopati — il consumer fornisce i wrapper
`addActivity` evento al click	ora viene emesso quando il `dialog-activity` salva (chiama `onSaved`)

KanbanBoard

Componente board generico con drag-and-drop, indipendente dal dominio.

ElementCard

Card predefinita per schede con priorità, tag, scadenza e campi dinamici.