Mise à Jour de l'Élément

Mettre à jour une facture - Étapes simples

Lors de la mise à jour d'une facture, le processus est assez similaire à la création d'une. Voici un aperçu :

1. Créer une route dynamique : Créez un nouveau segment de route dynamique, incluant l'id de la facture. De cette façon, nous indiquons à l'application avec quelle facture nous travaillons ;
2. Lire l'id de la facture : Récupérez l'id de la facture à partir des paramètres de la page ;
3. Récupérer la facture spécifique : Obtenez les informations sur la facture choisie à partir de la base de données ;
4. Mettre à jour la base de données : Après avoir effectué les modifications nécessaires, mettez à jour les données de la facture dans la base de données.

Retour au projet

1. Créer une Route Dynamique

Basé sur des données changeantes, nous pouvons créer des Segments de Route Dynamiques lorsque nous voulons des routes flexibles. Enveloppez le nom d'un dossier entre crochets pour créer une route dynamique. Par exemple, utilisez [id], [post], ou [slug] lorsque nous voulons des segments variables dans la route.

1. Naviguez vers le 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 page.tsx.

Résultat:

Examinons le composant Table dans app/ui/invoices/table.tsx. Nous pouvons observer que UpdateInvoice reçoit l'id de la facture.

Allez au composant <UpdateInvoice /> (app/ui/invoices/buttons.tsx). Nous voyons que nous utilisons l'id comme partie de la valeur href.

2. Lire l'identifiant de la facture

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

3. Récupérer une Facture Spécifique

Ensuite, nous importons de nouvelles fonctions appelées fetchInvoiceById et fetchSellers.

• fetchInvoiceById renvoie les données pour une facture spécifique;
• fetchSellers renvoie les vendeurs pour le menu déroulant du formulaire affichant tous les vendeurs.

Nous pouvons récupérer efficacement à la fois la facture et les vendeurs simultanément en utilisant Promise.all.

Testons-le ! Nous pouvons ouvrir la page des factures et cliquer sur le bouton d'édition (symbole du stylo). Cela devrait nous rediriger vers le formulaire avec une facture préremplie.

4. Mettre à jour la base de données

Nous devons envoyer l'id à l'Action Serveur pour mettre à jour le bon enregistrement dans la base de données. Voici comment vous pouvez le faire efficacement :

Utilisez bind de JS pour passer l'id à l'Action Serveur. Cela garantit que toutes les valeurs envoyées à l'Action Serveur sont correctement encodées.

Évitez de passer l'id comme argument directement dans l'action du formulaire comme ceci :

Ensuite, nous allons procéder avec les actions et créer une action pour mettre à jour la facture.

Essayez-le ! Après avoir modifié une facture, soumettez le formulaire, et vous devriez être redirigé vers la page des factures avec la facture mise à jour.

En Pratique