@pzeta/utils

title: Componenti description: Componenti Vue per la visualizzazione e gestione delle attività. Pattern wrapper data-aware + View headless.

Pattern: wrapper + View headless

I componenti compositi sono esposti in due forme complementari:

FormaQuando usarla
Wrapper data-aware (AttivitaListaEntita, AttivitaBadge, ...)Caso più comune: fetch via AttivitaPlugin context, gestione stati interna
View headless (AttivitaListaEntitaView, AttivitaBadgeView, ...)Storybook / preview live, test isolati, datasource non-PostgREST, dati già in cache

Le View ricevono i dati via prop ed emettono eventi — non richiedono AttivitaPlugin. Possono essere usate in qualsiasi app Vue 3.

WrapperView headless
AttivitaListaEntitaAttivitaListaEntitaView
AttivitaBadgeAttivitaBadgeView
AttivitaConsolidataAttivitaConsolidataView
AttivitaCalendarioAttivitaCalendarioView
AttivitaTimelineAttivitaTimelineView
RicorrenzaPanelRicorrenzaPanelView
PartecipantiPanelPartecipantiPanelView
DocumentoPanelDocumentoPanelView
FirmaPanelFirmaPanelView

Sotto-pagine

Altri Componenti

AttivitaForm

AttivitaListaEntita

AttivitaTimeline

Dialogs Panels

View Headless

Preview live con IHttpClient mockato

I componenti AttivitaTimeline, AttivitaListaEntita e AttivitaBadge includono un ::component-preview che usa un IHttpClient mock con dataset in-memory. Il pattern usa PostgrestAttivitaRepository (l'API canonica):

<script setup lang="ts">
import { ref, provide } from 'vue'
import {
  ATTIVITA_CONTEXT_KEY,
  PostgrestAttivitaRepository,
} from '@pzeta/vue-attivita'
import { createMockAttivitaHttp } from '~docutils/mock-attivita'

const repository = new PostgrestAttivitaRepository(createMockAttivitaHttp())

provide(ATTIVITA_CONTEXT_KEY, {
  repository,
  service: repository,    // alias deprecato — mantenuto per backward-compat
  getToken: () => null,
  onEvent: () => {},
  apiBaseUrl: '',
  refreshSignal: ref(0),  // v1.0.0 — vedi installazione/AttivitaContext
})
</script>
Backward-compat: la factory createAttivitaService(http) esiste come alias deprecato di new PostgrestAttivitaRepository(http). Negli esempi nuovi preferisci la forma esplicita; quelli storici nella doc continueranno a funzionare ma andrebbero migrati.

In produzione, sostituisci createMockAttivitaHttp() con createFetchClient(baseUrl, getToken) collegato al backend PostgREST reale, oppure passa direttamente il repository come opzione del plugin (vedi Installazione).

Quando una View ti basta

Esempio di calendario standalone che riceve i dati da un useFetch custom — nessun AttivitaPlugin configurato:

<script setup lang="ts">
import { ref } from 'vue'
import { AttivitaCalendarioView } from '@pzeta/vue-attivita'
import type { AttivitaView } from '@pzeta/vue-attivita'

const attivita = ref<AttivitaView[]>([])

async function onMonthChange({ month, year }: { month: number; year: number }) {
  // fetch dal tuo backend GraphQL/REST/...
  attivita.value = await myCustomFetch(month, year)
}
</script>

<template>
  <AttivitaCalendarioView
    :attivita="attivita"
    :loading="false"
    @month-change="onMonthChange"
    @attivita-click="(a) => console.log(a)"
  />
</template>

Stessa UI, zero accoppiamento al backend PostgREST.

Quick Start

AttivitaForm