Dialogs Panels

title: Dialogs e Panels description: CompletaDialog, AnnullaDialog, RicorrenzaPanel, PartecipantiPanel, DocumentoPanel, FirmaPanel — wrapper data-aware con repository.

Pattern: i dialog CompletaDialog e AnnullaDialog sono costruiti su DynamicFormDialog di @pzeta/vue-form. I panel RicorrenzaPanel / PartecipantiPanel / DocumentoPanel / FirmaPanel sono wrapper data-aware che fetchano/persistono via repository — non v-model su uno stato del parent. Per varianti senza data-fetching usa le View headless *PanelView documentate in View headless.

CompletaDialog

Dialog per completare un'attività con campo risultato opzionale (textarea).

Anteprima live

Props

Prop	Tipo	Default	Descrizione
`visible`	`boolean`	—	Richiesto. `v-model:visible`
`attivita`	`AttivitaView`	—	Richiesto. Attività da completare (header mostra `riepilogo` + `nometipo` + icona)
`submitting`	`boolean`	`false`	Loading state esterno (es. mentre il parent attende `repository.completaAttivita`)

Emits

Evento	Payload	Descrizione
`update:visible`	`boolean`	Cambio visibilità
`completata`	`[idattivita: number, risultato: string]`	Conferma utente — il parent chiama poi `repository.completaAttivita` o `useAttivita.completaAttivita`

<CompletaDialog
  :visible="showCompleta"
  :attivita="attivitaSelezionata"
  :submitting="completando"
  @update:visible="showCompleta = $event"
  @completata="async (idattivita, risultato) => {
    completando = true
    try {
      await completaAttivita({ p_idattivita: idattivita, p_risultato: risultato })
      showCompleta = false
    } finally {
      completando = false
    }
  }"
/>

Il dialog non chiama il backend: emette solo completata con i dati. La persistenza è responsabilità del parent (tipicamente via useAttivita.completaAttivita). Questo permette di gestire feedback/rollback/eventi al di fuori del dialog.

AnnullaDialog

Dialog per annullare un'attività con campo motivo obbligatorio (validation: 'required', validateOnMount).

Anteprima live

Props / Emits

Stessa struttura di CompletaDialog:

Prop	Tipo	Default
`visible`	`boolean`	—
`attivita`	`AttivitaView`	—
`submitting`	`boolean`	`false`

Evento	Payload
`update:visible`	`boolean`
`annullata`	`[idattivita: number, motivo: string]`

<AnnullaDialog
  :visible="showAnnulla"
  :attivita="attivitaSelezionata"
  @annullata="async (idattivita, motivo) =>
    annullaAttivita({ p_idattivita: idattivita, p_motivo: motivo })
  "
/>

RicorrenzaPanel

Wrapper data-aware del pannello ricorrenza. Usa useRicorrenza per fetchare la ricorrenza esistente al mount, salva/aggiorna via repository.createRicorrenza/updateRicorrenza, disattiva via repository.disattivaRicorrenza. Delega rendering a RicorrenzaPanelView.

Anteprima live

Props

Prop	Tipo	Default	Descrizione
`idattivita`	`number`	—	Richiesto. Attività template a cui legare la ricorrenza
`idricorrenza`	`number \| null`	`null`	ID ricorrenza esistente (se nota dal parent) — necessaria per `disattivaRicorrenza`
`readonly`	`boolean`	`false`	Disabilita modifiche

Emits

Evento	Payload	Descrizione
`saved`	`Ricorrenza`	Ricorrenza creata o aggiornata
`disattivata`	—	Ricorrenza disattivata (o reset locale se `idricorrenza` non era valorizzata)

Campi configurabili nel form: tiporicorrenza (giornaliera/settimanale/mensile), intervallo, datafine, triggercreazione (completamento/data_fissa), giorni_anticipo.

Per uno stato v-model controllato dal parent (es. wizard di creazione attività dove la ricorrenza non esiste ancora a backend), usa la View headlessRicorrenzaPanelView con v-model:form + v-model:abilitata.

PartecipantiPanel

Wrapper data-aware per gestire i partecipanti a una riunione. Carica repository.getPartecipanti(idattivita) al mount, aggiorna stato invito via repository.updateStatoInvito, aggiunge via repository.addPartecipante.

Anteprima live

Props

Prop	Tipo	Default	Descrizione
`idattivita`	`number`	—	Richiesto. Attività riunione
`utenteOptions`	`UtenteOption[]`	`[]`	Utenti selezionabili per l'invito
`readonly`	`boolean`	`false`	Disabilita modifiche

Emits

Evento	Payload
`partecipanteAggiunto`	`idutente: number`
`statoAggiornato`	`[idattivita: number, idutente: number, stato: 'invitato' \| 'accettato' \| 'rifiutato']`

DocumentoPanel

Wrapper per upload documento via useDocumento. Chiama POST {apiBaseUrl}/api/attivita/{idattivita}/upload-documento (endpoint Fastify, non PostgREST).

Anteprima live

Props

Prop	Tipo	Default	Descrizione
`idattivita`	`number`	—	Richiesto. Attività di tipo `azione === 'upload_documento'`
`iddocumento`	`number \| null`	—	Richiesto. ID documento già allegato (`null` → mostra FileUpload)

Il panel non emette eventi: gestisce internamente il loading/error tramite la View. Per intercettare l'esito dell'upload usa useDocumento direttamente o ascolta l'evento del repository.

Prop	Tipo	Default	Descrizione
`idattivita`	`number`	—	Richiesto. Attività di tipo `azione === 'richiesta_firma'`
`iddocumento`	`number \| null`	—	Richiesto. Documento da firmare (`null` → richiesta firma senza allegato pre-caricato)

Altri Componenti

View Headless