AttivitaTimeline

title: AttivitaTimeline description: Vista timeline delle attività di un'entità in ordine cronologico.

Panoramica

AttivitaTimeline mostra le attività di un'entità in formato timeline verticale, ordinata per data scadenza. A differenza di AttivitaListaEntita, è pensata per visualizzazioni compact in sidebar o panel, senza le funzionalità di scrittura.

Anteprima live (con IHttpClient mockato)

Il preview usa un IHttpClient mock con dataset in-memory: attività su anagrafica#42 (1 in ritardo, 1 oggi, 2 future, 1 completata).

Props

Prop	Tipo	Default	Descrizione
`entitasorgente`	`string`	—	Richiesto. Tipo entità
`identitasorgente`	`number`	—	Richiesto. ID istanza entità

Emits

Evento	Payload	Descrizione
`attivitaClick`	`AttivitaView`	Clic su un elemento della timeline

Non esistono props limit né showCompleted: la timeline carica tutte le attività dell'entità (in qualsiasi stato), ordinate per datascadenza.desc. Se serve filtrare/limitare, usa la View headlessAttivitaTimelineView passando dati pre-filtrati.

Utilizzo

<!-- Sidebar di un'anagrafica -->
<div class="w-64 border-l p-4">
  <h3 class="text-sm font-semibold mb-3">Attività recenti</h3>
  <AttivitaTimeline
    entitasorgente="anagrafica"
    :identitasorgente="idAnagrafica"
    @attivita-click="(a) => router.push(`/attivita/${a.idattivita}`)"
  />
</div>

Comportamento

Fetch onMounted: carica repository.getAttivitaPerEntita(entitasorgente, identitasorgente, { order: 'datascadenza.desc' }) al primo mount.
Auto-refresh dopo CRUD (v1.0.0): watcha refreshSignal del context — ogni operazione di scrittura su attività (anche da altri componenti dell'app) triggera il reload. Vedi useAttivitaContext.refreshSignal.
Cambi prop entitasorgente/identitasorgente non triggerano reload: per propagare cambi di entità, usa :key="\${entita}-${id}`"` sul componente per forzare il remount.
Per la gestione completa (CRUD + dialog) usare AttivitaListaEntita.

Variante View headless

Se i dati sono già in memoria o serve controllo su filtri/ordinamento, importa direttamente AttivitaTimelineView. Riceve attivita, loading, error come prop ed emette attivitaClick:

<script setup lang="ts">
import { computed } from 'vue'
import { AttivitaTimelineView } from '@pzeta/vue-attivita'

const props = defineProps<{ tutte: AttivitaView[] }>()

// filtra/limita lato consumer
const recenti = computed(() => props.tutte.slice(0, 5))
</script>

<template>
  <AttivitaTimelineView :attivita="recenti" :loading="false" />
</template>

AttivitaListaEntita

Altri Componenti