Composables
Cosa contengono
I composables in @pzeta/mfe-contracts/composables astraggono pattern ricorrenti nelle viste dei microfrontend:
- accesso al
MFEContextiniettato dalla shell, - CRUD generico (load/create/update/delete) con stato
items+loading+error, - UI CRUD (dialog visibile, editing item, save, delete con conferma),
- form di dettaglio con dirty/loading/save guard,
- gestione stato dialog con error tracking,
- toast errori automatico da una
Ref<string | null>.
Sono headless: non importano @pzeta/vue-components e non hanno dipendenze da UI library specifiche. Le interazioni con toast/confirm/UI avvengono via callback iniettate dal MFE chiamante.
Composables disponibili
| Composable | Scopo |
|---|---|
useMfeContext | Accesso tipizzato al MFEContext (throw se non disponibile) |
useCrudResource | Risorsa CRUD generica: items/loading/error + load/create/update/delete |
useCrudView | UI CRUD su una risorsa: dialog state + handleCreate/handleEdit/handleSave/handleDelete |
useDetailForm | Form dettaglio: loading/isFormDirty/canSave + saving wrapper + markDirty/markClean/reset |
useDialog | Stato dialog: visible/loading/error/hasError + open/close/setLoading/setError/reset |
useErrorToast | Watcher su una Ref<string | null> che chiama un callback toast |
Quando usare cosa
| Scenario | Composable |
|---|---|
Recuperare http, eventBus, theme, getUser() dalla shell | useMfeContext |
| Lista CRUD generica (es. tabella ruoli/permessi/tag) | useCrudResource |
| Lista CRUD + dialog di creazione/modifica + delete con conferma | useCrudView (manuale) o useCrudViewFromResource (con bridge automatico) |
| Pagina di dettaglio con save abilitato solo se dirty | useDetailForm |
Dialog di conferma con loading + messaggio di errore inline | useDialog |
| Mostrare automaticamente un toast quando una ref di errore cambia | useErrorToast |
Pattern composto: lista CRUD completa
import { useToast, useConfirm } from 'primevue'
import {
useMfeContext,
useCrudResource,
useCrudViewFromResource,
useErrorToast,
} from '@pzeta/mfe-contracts/composables'
interface Tag { id: string; nome: string; colore: string }
interface CreateTagRequest { nome: string; colore: string }
const ctx = useMfeContext()
const toast = useToast()
const confirm = useConfirm()
// 1. Risorsa CRUD
const resource = useCrudResource<Tag, CreateTagRequest>({
resourceName: 'tag',
loadItems: async () => (await ctx.http.get<Tag[]>('/api/tags')).data,
createItem: async (p) => (await ctx.http.post<Tag>('/api/tags', p)).data,
updateItem: async (id, p) => (await ctx.http.put<Tag>(`/api/tags/${id}`, p)).data,
deleteItem: async (id) => { await ctx.http.delete(`/api/tags/${id}`) },
})
// 2. UI CRUD ponteggiata sulla risorsa
const view = useCrudViewFromResource(resource, {
singularName: 'tag',
getDisplayName: (t) => t.nome,
showErrorToast: (msg) => toast.add({ severity: 'error', detail: msg, life: 5000 }),
showDeleteConfirm: (message, header, onAccept) =>
confirm.require({ message, header, accept: onAccept }),
})
// 3. Toast automatico su resource.error
useErrorToast(resource.error, (msg) =>
toast.add({ severity: 'error', detail: msg, life: 5000 }),
)
// 4. Carica iniziale
await resource.load()
Sotto-pagine
useCrudResource
Risorsa CRUD generica con stato items/loading/error e operazioni load/create/update/delete tipizzate.
useCrudView
Gestione UI CRUD (dialog + editing + delete con conferma) sopra una lista reattiva. Include useCrudViewFromResource per il bridge automatico.
useDetailForm
Gestione stato form di dettaglio. Dirty tracking, loading guard, canSave, wrapper saving e reset.
useDialog
[object Object]
useErrorToast
Watcher su Ref<string | null> che chiama una callback toast quando l'errore cambia. Cleanup automatico via setup scope Vue.
useMfeContext
Composable per accedere al MFEContext iniettato dalla shell. Throw se il contesto non è disponibile.