Mettre à jour une facture - Étapes simples

La mise à jour d'une facture suit un processus très similaire à sa création. Voici les étapes :

1. Créer une route dynamique : Créer un nouveau segment de route dynamique, incluant l'id de la facture. Cela permet d’indiquer à l’application sur quelle facture intervenir ;
2. Lire l’id de la facture : Récupérer l’id de la facture à partir des paramètres de la page ;
3. Récupérer la facture spécifique : Obtenir les informations de la facture sélectionnée depuis la base de données ;
4. Mettre à jour la base de données : Après avoir effectué les modifications nécessaires, mettre à jour les données de la facture dans la base de données.

Retour au projet

1. Créer une route dynamique

En fonction des données changeantes, il est possible de créer des segments de route dynamiques pour obtenir des routes flexibles. Entourez le nom d’un dossier avec des crochets pour créer une route dynamique. Par exemple, utilisez [id], [post] ou [slug] lorsque des segments variables sont nécessaires dans la route.

1. Accédez au dossier /invoices et créez une nouvelle route dynamique nommée [id] ;
2. Ajoutez une nouvelle route appelée 'edit' à l’intérieur du dossier /invoices/[id]. Incluez un fichier page.tsx.

Résultat :

Examinons le composant Table dans app/ui/invoices/table.tsx. On peut observer que UpdateInvoice reçoit l’id de la facture.

Accédez au composant <UpdateInvoice /> (app/ui/invoices/buttons.tsx). On constate que l’id est utilisé comme partie de la valeur href.

2. Lire l'identifiant de la facture

Insérer le code suivant dans app/dashboard/invoices/[id]/edit/page.tsx.

3. Récupérer une facture spécifique

Ensuite, importer les nouvelles fonctions appelées fetchInvoiceById et fetchSellers.

• fetchInvoiceById retourne les données d'une facture spécifique ;
• fetchSellers retourne les vendeurs pour la liste déroulante du formulaire affichant tous les vendeurs.

Il est possible de récupérer efficacement la facture et les vendeurs simultanément en utilisant Promise.all.

Testons-le ! Ouvrir la page des factures et cliquer sur le bouton d'édition (symbole du stylo). Cela doit rediriger vers le formulaire avec la facture pré-remplie.

4. Mise à jour de la base de données

Il est nécessaire d'envoyer l'id à l'Action Serveur afin de mettre à jour l'enregistrement correct dans la base de données. Voici comment procéder efficacement :

Utilisation de la méthode JS bind pour transmettre l'id à l'Action Serveur. Cela garantit que toutes les valeurs envoyées à l'Action Serveur sont correctement encodées.

Éviter de passer l'id directement comme argument dans l'action du formulaire de cette manière :

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

Ensuite, les actions seront poursuivies et une action sera créée pour la mise à jour de la facture.

À tester : après modification d'une facture, soumettre le formulaire pour être redirigé vers la page des factures avec la facture mise à jour.

En pratique