Altri Componenti

title: Altri Componenti description: AttivitaBadge, AttivitaConsolidata, AttivitaListItem, AttivitaCalendario, AttivitaKanbanTipo.

AttivitaBadge

Badge compatto con contatori attività per un'entità. Ideale su card, tabelle e liste dove serve mostrare il riepilogo senza caricare la lista completa.

Anteprima live (con IHttpClient mockato)

Props

Prop	Tipo	Default	Descrizione
`entitasorgente`	`string`	—	Richiesto. Tipo entità
`identitasorgente`	`number`	—	Richiesto. ID istanza
`showDetail`	`boolean`	`false`	Mostra label numeriche estese (in_ritardo / oggi / futuro) accanto ai badge colorati

Emits

Evento	Payload	Descrizione
`click`	—	Clic sul badge (utile per aprire una vista lista filtrata)

Comportamento

Carica AttivitaRiepilogo dalla vista v_attivita_riepilogo via repository.getRiepilogoEntita() all'onMounted e mostra tre indicatori colorati:

Rosso — in_ritardo
Arancione — oggi
Grigio — futuro

Auto-refresh (v1.0.0): watcha refreshSignal del context — i contatori si aggiornano automaticamente quando un'attività dell'entità viene pianificata/completata/annullata da qualsiasi altro componente dell'app.

<AttivitaBadge
  entitasorgente="anagrafica"
  :identitasorgente="42"
  show-detail
  @click="router.push(`/anagrafica/42/attivita`)"
/>

AttivitaConsolidata

Vista consolidata multi-entità: aggrega tutte le attività dell'utente corrente da useAttivitaDashboard, raggruppate per tipo o per scadenza, con dialog di completamento/annullamento integrati.

Non riceve entitasorgente / identitasorgente come prop: i dati arrivano dalla dashboard utente (token corrente). Usa AttivitaListaEntita se vuoi le attività di una specifica entità.

Props

Prop	Tipo	Default	Descrizione
`readonly`	`boolean`	`false`	Nasconde i pulsanti di completa/annulla

Emits

Evento	Payload	Descrizione
`attivitaCreata`	`idattivita: number`	Riservato (forwardato dal form interno se presente)
`attivitaCompletata`	`AttivitaView`	Attività appena completata
`attivitaAnnullata`	`AttivitaView`	Attività appena annullata

<AttivitaConsolidata
  :readonly="!hasWriteAccess"
  @attivita-completata="(a) => toast.success(`${a.riepilogo} completata`)"
/>

AttivitaListItem

Singola voce di lista con azioni inline. Componente atomico usato da AttivitaListaEntita, AttivitaConsolidata e AttivitaKanbanTipo per renderizzare ogni attività.

Props

Prop	Tipo	Default	Descrizione
`attivita`	`AttivitaView`	—	Richiesto. Attività da mostrare
`readonly`	`boolean`	`false`	Nasconde i pulsanti azione
`compact`	`boolean`	`false`	Versione compatta (meno padding, font ridotto) — per kanban/sidebar

Emits

Evento	Payload
`click`	`AttivitaView`
`completa`	`AttivitaView`
`annulla`	`AttivitaView`
`modifica`	`AttivitaView`
`ripristina`	`AttivitaView`
`elimina`	`AttivitaView`

AttivitaCalendario

Calendario mensile delle attività. Usa internamente useAttivitaCalendario — fetch del range di date visibile al mount e a ogni month-change.

Non ha props: il fetch usa il token globale del context. La vista è mensile (il viewModeweek/day è esposto da useAttivitaCalendario ma non utilizzato dal wrapper). Per drag-and-drop con aggiornamento ottimistico vedi useAttivitaCalendario.

Emits

Evento	Payload	Descrizione
`attivitaClick`	`AttivitaView`	Clic su un'attività in calendario
`nuovaAttivita`	`data: string`	Clic su una cella vuota — `data` in formato `YYYY-MM-DD`

<AttivitaCalendario
  @attivita-click="(a) => router.push(`/attivita/${a.idattivita}`)"
  @nuova-attivita="(d) => apriFormConDataPrefilled(d)"
/>

AttivitaKanbanTipo

Vista Kanban delle attività raggruppate per tipo. Componente puramente presentational: riceve tipi e attivita come props (nessun fetch interno). Per il wrapper data-aware è il consumer a costruirlo combinando useTipiAttivita + useAttivita o useAttivitaDashboard.

Props

Prop	Tipo	Default	Descrizione
`tipi`	`TipoAttivita[]`	—	Richiesto. Tipi che diventano colonne del kanban
`attivita`	`AttivitaView[]`	—	Richiesto. Attività da distribuire nelle colonne (filtrate per `codtipoattivita`)

Emits

Evento	Payload	Descrizione
`attivitaClick`	`AttivitaView`	Clic sulla card
`completaAttivita`	`AttivitaView`	Apre dialog completamento
`annullaAttivita`	`AttivitaView`	Apre dialog annullamento
`nuovaAttivita`	`idtipoattivita: number`	Pulsante "+" sulla colonna del tipo

<script setup lang="ts">
import { useTipiAttivita, useAttivitaDashboard, AttivitaKanbanTipo } from '@pzeta/vue-attivita'

const { tipi, fetchTipi } = useTipiAttivita()
const { attivita, fetchDashboard } = useAttivitaDashboard()

await Promise.all([fetchTipi(), fetchDashboard()])
</script>

<template>
  <AttivitaKanbanTipo
    :tipi="tipi"
    :attivita="attivita"
    @nuova-attivita="apriFormConTipo"
  />
</template>

AttivitaTimeline

Dialogs Panels