Factuur bijwerken - Eenvoudige stappen

Het bijwerken van een factuur verloopt vrijwel hetzelfde als het aanmaken ervan. Hier volgt een overzicht:

1. Dynamische route aanmaken: Maak een nieuw dynamisch routedeel aan, inclusief het factuur id. Hiermee geef je aan met welke factuur de applicatie werkt;
2. Factuur-id uitlezen: Haal het factuur id op uit de pagina parameters;
3. Specifieke factuur ophalen: Verkrijg de informatie over de geselecteerde factuur uit de database;
4. Database bijwerken: Werk na het aanbrengen van de benodigde wijzigingen de factuurgegevens bij in de database.

Terug naar het project

1. Een dynamische route aanmaken

Op basis van veranderende gegevens kunnen we Dynamische Route Segmenten maken wanneer flexibele routes gewenst zijn. Plaats de naam van een map tussen vierkante haken om een dynamische route te creëren. Gebruik bijvoorbeeld [id], [post] of [slug] wanneer variabele segmenten in de route nodig zijn.

1. Navigeer naar de map /invoices en maak een nieuwe dynamische route genaamd [id] aan;
2. Voeg een nieuwe route toe met de naam 'edit' binnen de map /invoices/[id]. Voeg een page.tsx toe.

Resultaat:

Laten we de Table-component in app/ui/invoices/table.tsx bekijken. We zien dat UpdateInvoice het factuur id ontvangt.

Ga naar de <UpdateInvoice /> (app/ui/invoices/buttons.tsx) component. We zien dat het id wordt gebruikt als onderdeel van de href waarde.

2. Lees het factuurnummer

Voeg de volgende code toe aan app/dashboard/invoices/[id]/edit/page.tsx.

3. Specifieke factuur ophalen

Vervolgens importeren we nieuwe functies genaamd fetchInvoiceById en fetchSellers.

• fetchInvoiceById retourneert gegevens voor een specifieke factuur;
• fetchSellers retourneert verkopers voor de keuzelijst in het formulier met alle verkopers.

We kunnen zowel de factuur als de verkopers efficiënt gelijktijdig ophalen met behulp van Promise.all.

Test het! Open de facturenpagina en klik op de bewerkknop (pictogram van een pen). Dit zou je moeten doorsturen naar het formulier met een vooraf ingevulde factuur.

4. Database bijwerken

Het is noodzakelijk om de id naar de Server Action te sturen om het juiste record in de database bij te werken. Hieronder volgt een effectieve werkwijze:

Gebruik JS bind om de id door te geven aan de Server Action. Dit zorgt ervoor dat alle waarden die naar de Server Action worden gestuurd correct worden gecodeerd.

Vermijd het direct als argument doorgeven van id in de form action zoals hieronder:

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

Vervolgens gaan we verder met de acties en maken we een actie aan voor het bijwerken van de factuur.

Probeer het uit! Na het bewerken van een factuur, dien het formulier in en je wordt doorgestuurd naar de facturenpagina met de bijgewerkte factuur.

In de praktijk