L'anteprima dati... come fare?

Progetti IO-SDK
#1

Stavo guardando per come fare l’anteprima dati…

  • in ImportForm.svelte
    aggiungere un field.type ‘showPreview’ che mostra la checkbox per mostrare l’anteprima, senza importare effettivamente
  • in Import.svelte
    • se torna state.preview
      torna i dati come per state.data, ma non attiva la subscribe nella onMount e carica un componente simile a ImportData.svelte che visualizza i dati (o delle input per la modifica) e un bottone “Conferma importazione” (o simile)

Ora per effettuare l’importazione effettiva (al click del bottone ‘Conferma importazione’) potremmo avere due opzioni:

  1. in state.preview farsi tornare anche un state.preview.form e utilizzare i dati per rieffettuare la chiamata che porta all’importazione
  • in questo caso bisogna modificare i Connettori per prevedere la preview
  1. prevedere nella onMount di Import.svelte una subscribe per la preview e una funzione save e una action ‘util/storePreview’ da cui poi prelevare i dati per l’importazione e un componente tipo Send.svelte, ma che legge i dati salvati nella storePreview
  • in questo caso non bisogna modificare i Connettori e sarebbero tutti riutilizzabili così come sono

quale pensate sia migliore o c’è una terza via migliore che non ho valutato? :slight_smile:

#2

Anzi essendo una single page si può impostare il flag ‘preview’ e utilizzare lo stesso ‘state.data’ per entrambi i comportamenti… E gestire tutto in Admin senza toccare i Connettori… si dovrebbe poter fare

#3

Infatti ho subito pensato di utilizzare quella porzione e poi inserire un bottone di conferma. Aggiungerei in alternativa a quello che hai proposto l’inserimento di una modale per rendere l’azione un più “interattiva”.
Magari possiamo farlo anche in un altra release.

1 Mi Piace
#4

Ciao Gaetano, se ti va mi puoi fare la review della PR?

Non ho messo le input per le modifiche dei dati in preview.
Il checkbox ‘Mostra anteprima’ è sotto il bottone ‘Importa’, non mi piace molto, ma forse tocca spostare tutte le logiche di ImportForm.svelte in Import.svelte così fa portare il bottone nel componente padre, ma non è un granché nemmeno così

Funziona sia per l’import Url che l’import Custom (essendo le stesse maschere)

Dimmi che ne pensi, se per te va bene, se vuoi puoi aggiungere la modale o altre cose per migliorarlo :slight_smile:

grazie

PS:. ho messo la PR in Draft, una volta che l’hai ricontrollata puoi se vuoi togliere il draft :slight_smile:

#5

Ciao Simone,

guarda va bene. Direi di chiedere a @msciab di “mergiare” la tua modifica e poi dopo creo un’altra PR dove trasformo il componente ImportPreview in una modale.

Domanda perchè non teniamo a prescindere l’anteprima dell’import senza farlo scegliere all’utente una volta pronta la modale?

1 Mi Piace
#6

Ciao Gaetano :slight_smile:
il merge è fatto :slight_smile: se vuoi prova a sperimentare la tua idea

#7

Ciao Simone,

sono riuscito ad implementare il popup appena completo il tutto mando la PR.

1 Mi Piace
#8

PR creata, ho sviluppato un componente intermedio configurabile che permette di utilizzare in alternativa anche l’anteprima che c’era prima oltre alla finestra modale che ho inserito.

Simone puoi dare tu una occhiata?
Grazie.

1 Mi Piace
#9

Chi può provare la PR con la modale dell’anteprima?

la PR è strutturata bene e fa bene il suo lavoro, ma a me presenta il problema che alla seconda importazione consecutiva (ricaricando la pagina) la modale si “inceppa” e non si chiude (genere un errore javascript ‘Scripts may not close windows that were not opened by script.’)

Il problema si verifica a me, ma non a @gdorsi (gli compare il messaggio sugli strumenti di sviluppo, ma la modale si chiude correttamente)… se qualcun altro può provare?

grazie

1 Mi Piace