Aggiornare una Fattura - Passaggi Semplici

Quando si aggiorna una fattura, il processo è molto simile a quello di creazione. Ecco una panoramica:

1. Creare una Rotta Dinamica: Crea un nuovo segmento di rotta dinamica, includendo l'id della fattura. In questo modo, si indica all'app su quale fattura si sta lavorando;
2. Leggere l'id della Fattura: Recupera l'id della fattura dai parametri della pagina;
3. Recuperare la Fattura Specifica: Ottieni le informazioni relative alla fattura selezionata dal database;
4. Aggiornare il Database: Dopo aver apportato le modifiche necessarie, aggiorna i dati della fattura nel database.

Torna al Progetto

1. Creare una Rotta Dinamica

In base ai dati che cambiano, è possibile creare Segmenti di Rotta Dinamici quando sono necessarie rotte flessibili. Per creare una rotta dinamica, racchiudere il nome di una cartella tra parentesi quadre. Ad esempio, utilizzare [id], [post] o [slug] quando si desiderano segmenti variabili nella rotta.

1. Navigare nella cartella /invoices e creare una nuova rotta dinamica chiamata [id];
2. Aggiungere una nuova rotta chiamata 'edit' all'interno della cartella /invoices/[id]. Includere un file page.tsx.

Risultato:

Analizziamo il componente Table in app/ui/invoices/table.tsx. Possiamo osservare che UpdateInvoice riceve l'id della fattura.

Accedere al componente <UpdateInvoice /> (app/ui/invoices/buttons.tsx). Si nota che l'id viene utilizzato come parte del valore href.

2. Leggere l'id della Fattura

Inserire il seguente codice in app/dashboard/invoices/[id]/edit/page.tsx.

3. Recuperare una Fattura Specifica

Successivamente, importiamo nuove funzioni chiamate fetchInvoiceById e fetchSellers.

• fetchInvoiceById restituisce i dati di una fattura specifica;
• fetchSellers restituisce i venditori per il menu a discesa del modulo che mostra tutti i venditori.

È possibile recuperare in modo efficiente sia la fattura che i venditori simultaneamente utilizzando Promise.all.

Testiamolo! È possibile aprire la pagina delle fatture e cliccare sul pulsante di modifica (simbolo della penna). Questo dovrebbe reindirizzare al modulo con la fattura già compilata.

4. Aggiornamento del Database

È necessario inviare l'id all'Azione Server per aggiornare il record corretto nel database. Ecco come procedere in modo efficace:

Utilizzare bind di JS per passare l'id all'Azione Server. Questo garantisce che tutti i valori inviati all'Azione Server siano codificati correttamente.

Evitare di passare l'id come argomento direttamente nell'azione del form come segue:

// This won't work 
<form action={updateInvoice(id)}> 

Successivamente, si procederà con le azioni e si creerà un'azione per aggiornare la fattura.

Provalo! Dopo aver modificato una fattura, invia il modulo e dovresti essere reindirizzato alla pagina delle fatture con la fattura aggiornata.

In pratica