Data

TimelineWorkflow

Timeline verticale di eventi di workflow, generica e disaccoppiata dal sistema attività, con marker colorati per tipo evento e slot personalizzabili per marker e contenuto.

Import

import { TimelineWorkflow } from '@pzeta/vue-components'

Esempio Base

Lista di eventi grezzi con una mappa di stile per ogni tipoevento (colore del marker e label leggibile) e un resolver per trasformare l'id autore in un nominativo.

Props

Prop	Tipo	Default	Descrizione
`eventi`	`WorkflowEvent[]`	(required)	Eventi da visualizzare; ordinati cronologicamente per `datacreazione` in base a `sortDirection`
`tipiEventoConfig`	`Record<string, WorkflowEventStyle>`	`{}`	Mappa `tipoevento` → stile (icona, colore del marker, label leggibile)
`locale`	`string`	`'it-IT'`	Locale `Intl.DateTimeFormat` per la formattazione di data/ora
`dateFormatOptions`	`Intl.DateTimeFormatOptions`	`{ day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }`	Opzioni `Intl.DateTimeFormat` per la formattazione della data
`authorResolver`	`(id: number \| null \| undefined) => string`	`undefined`	Funzione per risolvere l'id autore in un nominativo leggibile; se assente l'autore viene mostrato come `#{id}` (o nascosto se `null`/`undefined`)
`sortDirection`	`'asc' \| 'desc'`	`'desc'`	Direzione di ordinamento per `datacreazione`
`selectable`	`boolean`	`false`	Rende le righe cliccabili ed emette l'evento `select`
`emptyText`	`string`	`'Nessun evento da mostrare'`	Testo mostrato quando non ci sono eventi

WorkflowEvent

Proprietà	Tipo	Descrizione
`tipoevento`	`string`	Codice tecnico del tipo evento; usato come chiave in `tipiEventoConfig`
`descrizione`	`string`	Testo descrittivo dell'evento
`datacreazione`	`string`	Data/ora ISO dell'evento; usata per ordinamento e formattazione
`idutenteautore`	`number \| null \| undefined`	Id dell'autore; risolto via `authorResolver`
`[key]`	`unknown`	Qualsiasi altro campo: accessibile dagli slot `#marker` e `#content`

WorkflowEventStyle

Proprietà	Tipo	Descrizione
`icon`	`string`	Classe icona (es. font-icon) mostrata dentro al marker
`color`	`WorkflowEventColor`	Colore del marker/connettore; default `'primary'` se non specificato
`label`	`string`	Etichetta leggibile che sostituisce il codice `tipoevento`

WorkflowEventColor

Valori ammessi per WorkflowEventStyle.color:

'primary' (blu) · 'success' (verde) · 'warn' (ambra) · 'danger' (rosso) · 'info' (azzurro) · 'neutral' (grigio)

Slots

Slot	Props	Descrizione
`marker`	`{ event: WorkflowEvent, index: number }`	Contenuto del marker circolare; di default mostra l'icona definita in `tipiEventoConfig`
`content`	`{ event: WorkflowEvent, index: number }`	Override completo del contenuto dell'evento (label, data, descrizione, autore)
`empty`	-	Override del messaggio mostrato quando non ci sono eventi

Emits

Evento	Payload	Descrizione
`select`	`{ evento: WorkflowEvent, index: number }`	Emesso al click su una riga; viene emesso solo se `selectable` è `true`

Esempi

Ordinamento decrescente (default)

Con sortDirection="desc" (default) gli eventi più recenti compaiono in cima alla timeline.

Marker con icona personalizzata

Lo slot #marker consente di rendere un'icona o un contenuto arbitrario dentro al cerchio colorato. Il colore del cerchio resta governato da tipiEventoConfig.

Contenuto custom e righe selezionabili

Con selectable la riga emette select; lo slot #content rende un layout completamente personalizzato sfruttando anche i campi liberi dell'evento.

Stato vuoto

Quando eventi è una lista vuota viene mostrato emptyText (oppure lo slot #empty).

Note Comportamento

Gli eventi vengono ordinati in modo reattivo per datacreazione: desc (default) mostra prima i più recenti, asc i più vecchi
Il colore del marker deriva da tipiEventoConfig[tipoevento].color; se il tipo non è mappato o non ha colore, viene usato primary
La label mostrata è tipiEventoConfig[tipoevento].label; in mancanza viene mostrato il codice tecnico tipoevento
L'autore viene risolto via authorResolver; senza resolver un id valido diventa #{id}, mentre null/undefined non produce alcuna riga autore
Le date non valide (datacreazione non parsabile) vengono mostrate così come sono, senza formattazione
L'evento select viene emesso solo quando selectable è true
Il componente è disaccoppiato dal sistema attività (@pzeta/vue-attivita): accetta qualsiasi lista di eventi grezzi

TypeScript

import type {
  TimelineWorkflowProps,
  TimelineWorkflowEmits,
  TimelineWorkflowSelectPayload,
  WorkflowEvent,
  WorkflowEventStyle,
  WorkflowEventColor,
} from '@pzeta/vue-components'

const tipiEventoConfig: Record<string, WorkflowEventStyle> = {
  creata: { color: 'info', label: 'Creata' },
  errore: { color: 'danger', label: 'Errore', icon: 'pi pi-times' },
}

const onSelect = (payload: TimelineWorkflowSelectPayload) => {
  console.log('evento selezionato', payload.evento.tipoevento, payload.index)
}

Quando usarlo

Cronologia di un workflow/processo applicativo (creazione → conferma → completamento)
Storico stati di un'entità (ordine, pratica, valutazione) con marker colorati per tipo evento
Audit trail leggibile con risoluzione dell'autore di ogni evento

Per casi diversi:

Timeline generica non legata a un workflow di eventi → Timeline
Griglia settimanale risorsa × giorno (planner, turni) → WeekScheduler

Timeline

Visualizza una sequenza di eventi in layout verticale, orizzontale o alternato, con marcatori stilizzabili e supporto alla selezione.

Tree

Visualizzazione gerarchica interattiva con supporto per selezione (single, multiple, checkbox), filtro testuale e espansione/collasso dei nodi.