title: Vue Attivita description: Libreria Vue 3 per gestione attività e follow-up — pianificazione, completamento, ricorrenze, partecipanti, documenti, firma. Backend PostgREST di default, pluggable via Repository pattern.

Cos'è @pzeta/vue-attivita

@pzeta/vue-attivita è una libreria di componenti Vue 3 per la gestione di attività e follow-up associate a entità di business (anagrafiche, contratti, schede kanban, lead). Copre l'intero ciclo di vita dell'attività: pianificazione, modifica, completamento con concatenamenti suggeriti, annullamento, ricorrenza, partecipanti riunione, upload documento, richiesta firma digitale.

Versione corrente: 1.0.0 — peer deps vue@^3.5, @pzeta/vue-components@^1.4.0, @pzeta/vue-form@^2.3.0, @pzeta/vue-i18n@^1.0.2.

Backend di riferimento: PostgREST (schema attivita con RPC pianifica_attivita, completa_attivita, annulla_attivita). Il backend è sostituibile via Repository pattern.

Funzionalità principali

• Componenti in due forme:
  • Wrapper data-aware (AttivitaListaEntita, AttivitaBadge, AttivitaForm, ...): fetch automatico via context plugin
  • View headless (AttivitaListaEntitaView, AttivitaBadgeView, ...): puramente presentazionali, dati via prop
• Ciclo di vita completo: pianifica → completa (con concatenamenti) / annulla / ripristina / elimina
• Ricorrenze: serie giornaliere, settimanali, mensili con trigger su completamento o data fissa
• Tipologie: telefonata, email, riunione, upload documento, richiesta firma digitale, generica
• Concatenamenti: regole suggerisci/attiva per pianificare attività successive automaticamente
• Partecipanti riunione: invito M:N con stati invitato/accettato/rifiutato
• Eventi cross-app: attivita:created, attivita:completata, attivita:annullata, attivita:scadenza-imminente
• Auto-refresh viste data-aware (v1.0.0): signal refreshSignal nel context — tutte le 6 viste di dominio (AttivitaBadge, AttivitaListaEntita, AttivitaConsolidata, AttivitaKanbanTipo, AttivitaCalendario, AttivitaTimeline) si aggiornano automaticamente dopo ogni CRUD, anche se montate in alberi diversi
• Repository pattern: interfaccia IAttivitaRepository, implementazione PostgREST canonica, mock per test

Architettura

@pzeta/vue-attivita
├── components/             # Wrapper data-aware (AttivitaListaEntita, AttivitaForm, ...)
│   ├── attivita/           # Lista, badge, calendario, kanban, panel
│   │   └── *View.vue       # View headless (props in, eventi out)
│   ├── tipi/               # Admin tipi attività + concatenamenti
│   ├── AttivitaForm.vue    # Dialog principale form
│   └── AttivitaTimeline.vue
├── composables/            # useAttivita, useAttivitaForm, useAttivitaDashboard, ...
├── domain/
│   └── IAttivitaRepository # Contratto di dominio
├── infrastructure/
│   └── PostgrestAttivitaRepository # Implementazione PostgREST canonica
├── http/                   # Factory createFetchClient
├── plugin.ts               # AttivitaPlugin + ATTIVITA_CONTEXT_KEY
└── types/                  # AttivitaView, AttivitaFilters, Ricorrenza, ...

Repository pattern

useAttivita / Wrapper components
         │
         ▼
  IAttivitaRepository ◄──────── contratto di dominio
         ▲
         │
   ┌─────┴────────────────┬─────────────────┐
   │                      │                 │
PostgrestAttivitaRepository  Mock repository  Custom (es. GraphQL)
(default)                    (test)

Il context iniettato dal plugin espone repository: IAttivitaRepository ai componenti e composables. L'opzione repository del plugin permette di sostituire il backend (mock, store locale, REST custom) senza toccare la UI.

Componenti principali

Componenti aggiuntivi senza View headless: AttivitaForm (dialog), AttivitaListItem, AttivitaKanbanTipo, CompletaDialog, AnnullaDialog, TipoAttivitaList/Form (admin), ConcatenamentoForm/GestioneDialog (admin).

Sotto-pagine

Quick start

// main.ts
import { createApp } from 'vue'
import { AttivitaPlugin } from '@pzeta/vue-attivita'
import '@pzeta/vue-attivita/style'

const app = createApp(App)

app.use(AttivitaPlugin, {
  baseUrl: import.meta.env.VITE_ATTIVITA_API_URL,
  getToken: () => sessionStorage.getItem('jwt'),
  onEvent: (name, payload) => eventBus.emit(name, payload),
})

app.mount('#app')

<!-- in qualsiasi vista -->
<template>
  <div class="flex items-center gap-2">
    <span>Cliente Rossi</span>
    <AttivitaBadge entitasorgente="anagrafica" :identitasorgente="42" />
  </div>

  <AttivitaListaEntita
    entitasorgente="anagrafica"
    :identitasorgente="42"
    :utente-options="utenti"
  />
</template>

Quando usare cosa