Componenti Board

EnhancedKanbanBoard

Board Kanban high-level facade con caricamento dati da backend, gestione CRUD schede, slot dialog e adapter item personalizzabile.

Panoramica

EnhancedKanbanBoard è la facade high-level per board generiche basate su useBoardService. Carica autonomamente metadati, colonne ed elementi dal backend tramite PostgRESTDataSource, espone la stessa architettura a slot di KanbanFasiBoard e supporta un ItemAdapter per normalizzare item con shape arbitraria.

Differenze rispetto a KanbanFasiBoard:

Usa useBoardService + schema generico board (non schema fasi)
Accetta boardIdOrCode (ID numerico o codice stringa)
Supporta override completo con items passati esternamente (senza backend)
itemAdapter personalizzabile per naming italiano/inglese/RPC
sortOptions configurabili inline
Toolbar con ricerca e ordinamento integrati

Per board basate su pipeline con fasi, metriche e stallo preferire KanbanFasiBoard.

Anteprima live

Il preview usa KanbanBoard + ElementCard con dati mock per mostrare l'output visivo. In produzione EnhancedKanbanBoard carica colonne ed elementi dal backend tramite boardIdOrCode.

Props

Prop	Tipo	Default	Descrizione
`boardIdOrCode`	`number \| string`	—	ID numerico o codboard stringa (carica metadati e colonne)
`cardComponent`	`Component`	`ElementCard`	Componente card personalizzato
`addItemLabel`	`string`	`'Nuova'`	Etichetta del pulsante aggiungi nelle colonne
`searchFields`	`string[]`	`['titolo','descrizione']`	Campi su cui eseguire la ricerca fulltext
`sortOptions`	`Array<{ field, label }>`	data/scadenza/titolo	Opzioni di ordinamento nella toolbar
`items`	`Record<string, unknown>[]`	`undefined`	Elementi esterni (se assente vengono caricati dal backend)
`callbacks`	`KanbanCallbacks`	—	Callback CRUD alternativi agli emits
`showToolbar`	`boolean`	`true`	Mostra toolbar con ricerca e ordinamento
`showSearch`	`boolean`	`true`	Mostra campo di ricerca nella toolbar
`columnWidth`	`number`	`340`	Larghezza colonne in pixel
`attivitaEntita`	`string`	`'scheda'`	Tipo entità esposto nel slot `#dialog-activity`
`getToken`	`() => string \| null`	`() => null`	Provider JWT/Bearer per chiamate autenticate; passato come slot prop a `#dialog-form` e `#dialog-activity`
`getCurrentUserId`	`() => number`	`() => 0`	Provider ID utente corrente per RPC e commenti
`itemAdapter`	`ItemAdapter`	`defaultPostgRESTItemAdapter`	Normalizza item raw → `NormalizedItem`; sovrascrivere per backend con naming diverso

KanbanCallbacks

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

SortOption

interface SortOption {
  field: string | ((item: Record<string, unknown>) => string | number | Date | null | undefined)
  label: string
}

Emits

Evento	Payload	Descrizione
`itemCreated`	`Record<string, unknown>`	Nuova scheda creata
`itemUpdated`	`Record<string, unknown>`	Scheda aggiornata
`itemDeleted`	`Record<string, unknown>`	Scheda eliminata
`itemMoved`	`(itemId, sourceId, targetId, newIndex)`	Scheda spostata tra colonne
`itemsLoaded`	`Record<string, unknown>[]`	Elementi caricati dal backend
`addItem`	`KanbanColumnId`	Click su "aggiungi" in una colonna
`view`	`Record<string, unknown>`	Click su "Visualizza" nel menu card
`editItem`	`Record<string, unknown>`	Click su "Modifica" nel menu card
`deleteItem`	`Record<string, unknown>`	Click su "Elimina" nel menu card
`addedActivity`	`Record<string, unknown>`	Attività salvata da `#dialog-activity`
`editedActivity`	`Record<string, unknown>`	Attività modificata
`deletedActivity`	`Record<string, unknown>`	Attività eliminata
`addAttachment`	`Record<string, unknown>`	Allegato salvato da `#dialog-attachment`
`addComment`	`Record<string, unknown>`	Commento salvato da `#dialog-comment`
`manageTags`	`Record<string, unknown>`	Tag aggiornati da `#dialog-tag`

Slot

Slot	Descrizione
`toolbar-start`	Contenuto aggiuntivo a sinistra nella toolbar
`toolbar-end`	Contenuto aggiuntivo a destra nella toolbar

Dialog

Identici agli slot di KanbanFasiBoard. Senza slot i pulsanti azione sulle card non aprono dialog.

Slot	Slot props	Quando attivo
`dialog-form`	`{ visible, boardId, idfase, campi, priorita, item?, getToken, onClose, onSaved }`	Click su "Nuovo" o "Modifica"
`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 "Commenta"

Utilizzo base

<script setup lang="ts">
import { EnhancedKanbanBoard } from '@pzeta/vue-kanban'

const currentUserId = 42

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

<template>
  <EnhancedKanbanBoard
    board-id-or-code="progetti"
    :get-token="getToken"
    :get-current-user-id="() => currentUserId"
    :show-toolbar="true"
    :show-search="true"
    @item-created="item => console.log('creato', item)"
    @item-moved="(id, src, dst) => console.log('spostato', id, src, '→', dst)"
  />
</template>

Con slot dialog (`@pzeta/vue-kanban/dialogs`)

<script setup lang="ts">
import { EnhancedKanbanBoard } from '@pzeta/vue-kanban'
import {
  DefaultFormDialog,
  DefaultTagDialog,
  DefaultCommentDialog,
  DefaultAttachmentDialog,
  DefaultActivityDialog,
} from '@pzeta/vue-kanban/dialogs'

const currentUserId = 42
</script>

<template>
  <EnhancedKanbanBoard
    board-id-or-code="progetti"
    :get-token="() => sessionStorage.getItem('access_token')"
    :get-current-user-id="() => currentUserId"
  >
    <template #dialog-form="p">
      <DefaultFormDialog v-bind="p" />
    </template>
    <template #dialog-tag="p">
      <DefaultTagDialog v-bind="p" />
    </template>
    <template #dialog-comment="p">
      <DefaultCommentDialog v-bind="p" />
    </template>
    <template #dialog-attachment="p">
      <DefaultAttachmentDialog v-bind="p" />
    </template>
    <template #dialog-activity="p">
      <DefaultActivityDialog v-bind="p" />
    </template>
  </EnhancedKanbanBoard>
</template>

Con ItemAdapter personalizzato

import type { ItemAdapter, NormalizedItem } from '@pzeta/vue-kanban'

const myAdapter: ItemAdapter = (raw): NormalizedItem => ({
  id: raw.ticket_id as number,
  columnId: raw.status_code as string,
  title: raw.subject as string,
  description: raw.body as string,
  priority: raw.severity ? { name: raw.severity as string, color: '#ef4444' } : undefined,
  tags: [],
  raw,
})

<EnhancedKanbanBoard
  board-id-or-code="support"
  :item-adapter="myAdapter"
/>

Note

Il backend deve esporre la board via PostgREST sotto lo schema board. Per schema fasi usare KanbanFasiBoard.
Quando items è fornito via prop il caricamento dal backend viene saltato, ma i metadati (colonne, priorità, tag) vengono sempre caricati da boardIdOrCode.
defaultPostgRESTItemAdapter gestisce naming italiano (titolo, priorita, etichette) e inglese (title, priority, tags) e campo RPC flat (priorita_nome, priorita_colore).

Componenti Board

Componenti per la visualizzazione della board Kanban.

KanbanBoard

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