Preview, status e history
ImportPreview
Tabella di anteprima del dry-run con evidenziazione errori per cella e tooltip sul messaggio.
In testa mostra tre Badge riassuntivi:
- Verde — righe valide
- Rosso — righe con errori
- Giallo — righe con warning
Le colonne sono dinamiche (si basano sulle chiavi della prima riga di anteprima). Le celle con errore vengono renderizzate in rosso con un tooltip al passaggio del mouse contenente il messaggio.
In coda viene mostrato l'elenco dei primi 50 errori con riga, colonna e messaggio.
Props
| Prop | Tipo | Descrizione |
|---|---|---|
testResult | TestImportResult | Risultato del dry-run (POST /api/import/test) |
Tipo TestImportResult
interface TestImportResult {
righeValide: number
righeErrore: number
righeWarning: number
errori: ErroreValidazione[]
warnings: WarningValidazione[]
anteprimaRighe: Array<{
riga: number
dati: Record<string, unknown>
stato: 'valido' | 'errore' | 'warning'
errori: ErroreValidazione[]
}>
}
Esempio
<ImportPreview v-if="testResult" :test-result="testResult" />
Stile riga
Il row-class colora l'intera riga in base allo stato:
stato | Background |
|---|---|
errore | bg-red-50 (light) / bg-red-900/20 (dark) |
warning | bg-yellow-50 / bg-yellow-900/20 |
valido | nessuno |
ImportStatusTracker
Visualizzatore di progresso per import asincroni. Mostra un Tag con lo stato corrente, una ProgressBar con la percentuale, contatori importate/scartate, tempo trascorso e tempo stimato.
L'indicatore "Aggiornamento in corso..." è visibile mentre il polling è attivo (pulse blu).
Props
| Prop | Tipo | Descrizione |
|---|---|---|
progresso | ImportProgresso | null | Stato corrente dal polling |
errore | string | null | Errore di rete durante polling |
isPolling | boolean | Polling attivo |
Mappatura stati
Lo stato viene tradotto in label italiano e severity Tag:
progresso.stato | Label | Severity |
|---|---|---|
idle | In attesa | info |
uploading | Upload in corso | info |
uploaded | Caricato | info |
testing | Test in corso | info |
tested | Testato | info |
importing | Importazione in corso | info |
completed | Completato | success |
error | Errore | danger |
Formattazione tempo
Il tempo è formattato in Xs (sotto 1 minuto) o Xm Ys (sopra 1 minuto):
formatTempo(45000) // "45s"
formatTempo(125000) // "2m 5s"
Esempio
<ImportStatusTracker
:progresso="importStatus.progresso.value"
:errore="importStatus.errore.value"
:is-polling="importStatus.isPolling.value"
/>
ImportHistory
Tabella dello storico importazioni. Carica autonomamente i dati da GET /api/import/history (con eventuale filtro risorsa) tramite useImportHistory al mounted.
Colonne:
| Colonna | Sorgente | Note |
|---|---|---|
| Data | dataEsecuzione | Formattato it-IT (toLocaleString) |
| File | nomeFile | Sortable |
| Risorsa | risorsa | Sortable |
| Stato | stato | Tag colorato (success/warn/danger) |
| Risultato | righeImportate + righeScartate | Due Badge |
| Esecutore | esecutore | Username/nome |
Se il numero di righe supera 10, viene attivata la paginazione (rowsPerPageOptions: [10, 25, 50]).
Props
| Prop | Tipo | Descrizione |
|---|---|---|
risorsa | string | Filtra per risorsa specifica (opzionale) |
Stati UI
| Condizione | UI |
|---|---|
loading === true | "Caricamento..." centrato |
errore !== null | Messaggio rosso "Errore nel caricamento dello storico: …" |
items.length === 0 | EmptyState con icona pi-inbox |
| altrimenti | DataTable |
Esempio
<ImportHistory risorsa="anagrafica" />
<!-- senza filtro: tutte le risorse -->
<ImportHistory />
Note
- Il caricamento avviene una sola volta al mount. Per refresh manuale, usare direttamente
useImportHistory().loadHistory(). - La risorsa è letta dalla prop al setup; cambiare la prop non re-triggera il fetch.