@pzeta/utils
Getting Started

Quick Start

title: Quick Start description: Esempio completo — lista attività per un'entità CRM.

Caso d'uso tipico — attività di un'anagrafica

Il pattern più comune: mostrare le attività associate a un'entità specifica (cliente, contratto, scheda kanban).

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

// L'entità sorgente identifica il "tipo" di oggetto a cui appartengono le attività
// L'ID identifica l'istanza specifica
const ENTITA = 'anagrafica'
const idAnagrafica = 42
</script>

<template>
  <AttivitaListaEntita
    entitasorgente="anagrafica"
    :identitasorgente="42"
    :utente-options="utentiDisponibili"
    @attivita-created="onCreated"
    @attivita-completed="onCompleted"
  />
</template>

AttivitaListaEntita gestisce autonomamente: caricamento attività, form pianificazione, completamento, annullamento, concatenamenti suggeriti.

Dashboard personale

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

const { attivita, contatori, loading, fetchDashboard, groupByScadenza } = useAttivitaDashboard()

onMounted(fetchDashboard)

const gruppi = computed(() => groupByScadenza())
</script>

<template>
  <div v-if="!loading">
    <div class="text-red-500">In ritardo: {{ contatori?.in_ritardo }}</div>
    <div class="text-orange-500">Oggi: {{ contatori?.oggi }}</div>
    <div class="text-green-500">Future: {{ contatori?.futuro }}</div>
  </div>
</template>

Form standalone

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

const visible = ref(false)

function onSaved(idattivita: number) {
  visible.value = false
  // Reload entità/lista
}
</script>

<template>
  <Button label="Pianifica attività" @click="visible = true" />

  <AttivitaForm
    entitasorgente="contratto"
    :identitasorgente="idContratto"
    :visible="visible"
    :utente-options="utenti"
    @update:visible="visible = $event"
    @saved="onSaved"
    @cancel="visible = false"
  />
</template>

Per mostrare un badge con il conteggio attività su una card o tabella:

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

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

Installazione