Opérations CRUD avec Toolpad Studio
À partir de l'api que vous avez mise en ligne sur Render à l'exercice 6 vous devez créer une interface avec Toolpad Studio qui comportera les fonctionnalités suivantes :
- Dresser la liste des enregistrements dans une grille.
- Permettre d'ajouter un enregistrement dans la base de données.
- Récupérer un enregistrement et donner la possibilité de le modifier.
- Supprimer un enregistrement.
- Rafraîchir la liste après une opétation (automatiquement ou sur un clique de bouton).
Variable d'environnement
- Utilisez une variable d'environnement pour le hostname de votre api.
- Si vous avez implémenter la protection par clé api, ajouter aussi la clé api dans vos variables d'environnement.
Dresser la liste des enregistrements dans une grille.
- Utilisez une dataGrid pour afficher vos données.
- Puisque la requête était paginée, ajoutez sous la grille un sélecteur de page. Vous pouvez récupérer la page affiché et le nombre de page total dans la réponse de la requête.
- À vous de trouver un moyen de créer un tableau qui contiendra les nombres de 1 au nombre total de page que vous pourrez utiler comme données dans le sélecteur.
- Quand on change la valeur du sélecteur, les données de la grille doivent être mise à jour.
Permettre d'ajouter un enregistrement dans la base de données.
- Ajoutez un formulaire avec les champs nécessaires à l'ajout d'un pokemon.
- Un bouton "Ajouter" lancera la requête et ensuite la grille sera mise à jour.
Récupérer un enregistrement et donner la possibilité de le modifier.
- Ajoutez un formulaire avec les champs nécessaires à la modification d'un pokemon.
- Quand un sélectionne un Pokemon dans la liste, les champs correspondants sont remplis avec les valeurs.
- Un bouton "Modifier" lancera la requête et ensuite la grille sera mise à jour.
- La modification doit être lancé uniquement si un pokemon de la liste est sélectionné.
Supprimer un enregistrement.
- Ajoutez un bouton "Supprimer" en haut de la grille.
- Quand on clique sur le bouton, le Pokemon sélectionné est supprimé et la grille est mise à jour.
- Le bouton ne doit être accessible que si un enregistrement est sélectionné dans la liste.
Rafraîchir la liste après une opétation
- Vous pouvez utiliser la fonction
refetch()pour relancer la requête correspondante.
Astuce
La fonction call() retourne une promesse, vous pouvez donc avec then() lancer du code après l'exécution de celle-ci :
Vous pouvez vous inspirer de l'exemple suivant qui se retrouve dans la documentation de Toolpad Studio : https://mui.com/toolpad/studio/examples/basic-crud-app/.
