Aller au contenu

Les autres actions

Maintenant que tu sais faire de beaux formulaires, tu peux ajouter les différentes actions pour chaque film du tableau.


Colonne et icons

Tu dois :

  • ajouter une colonne Actions au tableau.
  • ajouter des boutons icons. Pour ça, tu peux utiliser bootstrap icons
Info

Pour installer les icons Bootstrap :
- Faire npm i bootstrap-icons
- Ajouter @import "bootstrap-icons/font/bootstrap-icons.css"; dans le fichier styles.scss
- Utiliser l'icon que tu veux avec la balise <i></i>. Par exemple : <i class="bi bi-trash-fill"></i>


Liens entre les boutons et les appels au back

Comme pour le formulaire de création, fais en sorte d'appeler le service qui contient tes appels au back au clic sur le bouton.

Par exemple pour la suppression d'un film :

<button type="button" class="btn btn-danger deleteButton" (click)="deleteMovie(movie.id)"><i class="bi bi-trash"></i></button>
deleteMovie(id: number): Observable<void> { 
    return this.httpClient.delete<void>(`${this.url}/${id}`);
}
private destroyRef = inject(DestroyRef)    
deleteMovie(id: number): void {
    this.moviesService.deleteMovie(id).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => 
        this.movies = this.movies.filter(film => film.id !== id)
    );
}

Info

subscribe() au delete te permet ici de mettre à jour ta liste de films this.movies, une fois que tu en as supprimé un.
Attention, tu ne peux donc plus utiliser le | async dans le HTML de ton composant. Tu dois créer une variable puis subscribe pour récupérer ta liste au début.

movies: Movie[];
ngOnInit(): void {
    this.moviesService.getMovies().subscribe(movies => this.movies = movies);
}
Pense aussi à supprimer la div du | async coté HTML et utilise notre nouvelle variable movies

🙋‍♀️ Checkpoint time 🙋‍

Appelle-nous pour qu'on valide cette partie !!️

À toi de jouer pour la création du bouton update ! 👾

Voici les grandes étapes à faire :
- un bouton qui redirige vers un formulaire au click
- un formulaire qui appelle le back pour pré-remplir les champs avec les données existantes
- le bouton submit du formulaire qui appelle le back pour updater le film

🙋‍♀️ Checkpoint time 🙋‍

Appelle-nous pour qu'on valide cette partie !!️

Maintentant tu peux faire la page admin :) !