Skip to content
Snippets Groups Projects
Commit 46cad21a authored by Laurine's avatar Laurine
Browse files

add action buttons

parent 9f0296cc
No related branches found
No related tags found
1 merge request!5Feature/movies
Show whitespace changes
Inline Side-by-side
resources/docs/docs/gestion-film/actions.md
+ 59
− 0
View file @ 46cad21a
# Les autres actions
Maintenant que tu sais faire des beaux formulaires, tu peux ajouter les différentes actions pour chaque film du tableau
## Colonne et icons
Tu dois :
- ajouter une colonne au tableau.
- ajouter des boutons icons. Pour ça, tu peux utiliser [bootstrap icons](https://icons.getbootstrap.com/){:target="_blank"}
> Pour installer les icons bootstrap fais :
> - `npm i bootstrap-icons`
> - Ajouter `@import "bootstrap-icons/font/bootstrap-icons.css"; dans le fichier `styles.scss`
> - Utilise 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 click sur le bouton
Par exemple pour la suppression d'un film:
HTML :
```
<button type="button" class="btn btn-danger deleteButton" (click)="deleteMovie(movie.id)"><i class="bi bi-trash"></i></button>
```
Service TS :
```
deleteMovie(id: number): Observable<any> {
return this.http.delete(`${this.url}/movies/${id}`).pipe(timeout(10000));
}
```
TS du composant:
```
deleteFilm(id: number) {
this.filmService.deleteMovie(id).subscribe(succes => {
this.movies = this.movies.filter(film => film.id !== id)
});
}
```
> susbcribe() au delete te permet ici de mettre a jour ta liste de film `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 subscribes pour utiliser ta liste au debut
> ```
> movies: Movie[];
> ngOnInit() {
> this.filmService.getMovies().subscribe(movies => this.movies = movies);
> }
> ```
***A toi de jouer pour la création du bouton update ! 👾***
> Tu dois à grandes étapes :
>
> - un bouton qui redirige vers un formulaire au click
> - un fomulaire qui appel 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
> <h1> 🙋‍♀️ Checkpoint time 🙋‍♂️
> Appelle nous pour qu'on valide cette partie !!️</h1>
> Le bouton `photo` pour ajouter une photo au film est totalement optionelle ! Mais si ça te tente, on sera ravie de t'aider !!
resources/docs/docs/gestion-film/composant-routing.md
+ 8
− 8
View file @ 46cad21a
......@@ -9,22 +9,22 @@ Cette section se passe en deux grandes parties comme pour la page *Avis* !
## Crétion du composant
***A toi de jouer en utilisant Angular CLI via ton terminal***
La commande est la même que celle utilisée pour générer le `HomeComponent` ou le `ReviewComponent`; il faudra juste lui donner le nom *films* pour que le composant généré s'appelle `MoviesComponent`.
***A toi de jouer ! 👾 Utilise le Angular CLI via ton terminal***
La commande est la même que celle utilisée pour générer le `HomeComponent` ou le `ReviewComponent`. Il faut juste lui donner le nom *movies* pour que le composant généré s'appelle `MoviesComponent`.
>Maintenant que nous avons généré `MoviesComponent`, tout est prêt pour ajouter de la navigation vers cette page !
On veut rajouter un onglet *Gestion des films* dans notre navbar et que lorsque l'on clique dessus, le `MoviesComponent` s'affiche.
On veut ajouter un onglet *Gestion des films* dans notre navbar et que lorsque l'on clique dessus, le `MoviesComponent` s'affiche.
## Ajout de la route
On veut rajouter une route aux deux routes existantes : */movies* pour afficher le `MoviesComponent`.
On veut ajouter une route aux deux routes existantes : */movies* pour afficher le `MoviesComponent`.
***A toi de jouer en ajoutant une Route dans la constante route de `app.routes.ts`***
***A toi de jouer ! 👾 Ajoute une `Route` dans la constante route de `app.routes.ts`***
On veut rajouter dans la navbar un lien qui permet de rediriger vers */movies*
On veut ajouter dans la navbar un lien qui permet de rediriger vers */movies*
***A toi de jouer en ajoutant une balise a dans le `navbar.component.htmls` avec un routerLink vers */movies* ***
***A toi de jouer ! 👾 Ajoute une balise `<a></a>` dans le `navbar.component.htmls` avec un routerLink vers `/movies`***
## Implémenter le composant `MoviesComponent`
......
resources/docs/docs/gestion-film/create-film.md
+ 25
− 20
View file @ 46cad21a
# Ajouter un film
On va ajouter un bouton qui redirige vers un formulaire d'ajout de films.
Tu peux tester sur [le site](https://allocine.takima.dev/list-films){:target="_blank"} comment ca doit fonctionner en cliquant sur *Nouveau film*.
On veut ajouter un bouton qui redirige vers un formulaire d'ajout de films.
Tu peux tester en cliquant sur *Nouveau film* sur [le site](https://allocine.takima.dev/list-films){:target="_blank"} !
## Création du composant
***A toi de jouer en utilisant Angular CLI via ton terminal***
La commande est la même que celle utilisée pour générer le `HomeComponent`; il faudra juste lui donner le nom *add-movie* pour que le composant généré s'appelle `AddMovieComponent`.
***A toi de jouer ! 👾 Utilise Angular CLI via ton terminal***
La commande est la même que celle utilisée pour générer le `HomeComponent`; il faut juste lui donner le nom *add-movie* pour que le composant généré s'appelle `AddMovieComponent`.
## Nouvelle page = nouvelle route
On veut rajouter une route à celles existantes : */add-movie* pour afficher le `AddMovieComponent`.
On veut ajouter une route à celles existantes : */add-movie* pour afficher le `AddMovieComponent`.
***A toi de jouer en ajoutant une Route dans la constante route de `app.routes.ts`***
***A toi de jouer ! 👾 Ajoute une `Route` dans la constante route de `app.routes.ts`***
## Le bouton
Pour ajouter un bouton on utilise la balise `button` et on écrit entre les balises ce qu'on veut afficher dans le bouton : *Nouveau film*.
Pour ajouter un bouton on utilise la balise `<button></button>` et on écrit entre les balises ce qu'on veut afficher dans le bouton : *Nouveau film*.
Normalement, il ne sera pas très beau.
> On te laisse la [documentation](https://getbootstrap.com/docs/5.0/components/buttons/)pour voir comment customiser ton bouton avec Bootstrap.
> Tu as la [doc](https://getbootstrap.com/docs/5.0/components/buttons/) pour voir comment customiser ton bouton avec Bootstrap.
Mais surtout, il ne se passe rien si je clique dessus !
Mais surtout, il ne se passe rien si je clique dessus ! 😬
> Comme pour la balise `a` du `NavbarComponent`, on utilise le `routerLink`.
> Comme pour la balise `<a></a>` du `NavbarComponent`, on utilise le `routerLink`.
***C'est tout bon ! Cliquer sur *Nouveau film* me redirige bien ! ***
***C'est tout bon ! Cliquer sur `Nouveau film` me redirige bien !***
## Implémentation du `AddMovieComponent`
Tout d'abord, on va ajouter notre titre entre des balises `h1`.
Ensuite, on a 4 champs de formulaires composés d'un `label` et d'un `input`.
### Les formulaires
Tout d'abord, on ajoute notre titre entre des balises `<h1></h1>`.
Ensuite, on a 4 champs de formulaire composés d'un `<label>` et d'un `<input>`.
On va va donc créer une variable *movie* de type `Movie` avec ces 4 champs initialisés dans le `add-movie.component.ts` :
On crée une variable *movie* de type `Movie` avec ces 4 champs initialisés dans le `add-movie.component.ts`, les autres champs sont mis à `null` :
```ts
movie = {
title = '';
......@@ -58,15 +59,19 @@ On te montre quoi ajouter pour le premier champ *titre* dans `add-movie.componen
>Il existe un type *date* dans la balise `input`
Finalement le bouton !
Visuellement on peut reprendre celui qu'on a déjà crée toute à l'heure.
Attention, il n'a pas le même comportement ! On va supprimer la partie `routerLink` et à la place on veut une fonction au click.
### Le bouton de soumission du formulaire
Maintenant, il faut recréer un bouton pour faire la soumission du formulaire.
Tu peux t'inspirer de celui déjà crée tout à l'heure.
Attention, celui-ci n'a pas le même comportement ! On n'a pas besoin de la partie `routerLink` et on veut une fonction au click sur le boutton.
```html
<button class="btn btn-warning" (click)=addMovie()>Ajouter</button>
```
> `(click)` permet de detecter à chaque fois qu'on click sur le bouton
>`addMovie()` est une fonction du ts qui est appelée à chaque click.
Il faut alors définir la fonction `addMovie` sinon notre code ne compilera pas. On veut que la méthode fasse un appel POST au back en lui donnant le nouveau film à ajouter. On doit donc passer par le `MovieService`. Au retour du back, on navigue vers la page précédente si l'ajout s'est bien effectué.
Il faut alors définir la fonction `addMovie` sinon notre code ne compilera pas. On veut que la méthode fasse un appel POST au back en lui donnant le nouveau film à ajouter. On doit donc passer par le `MovieService`.
Au retour du back, on navigue vers la page précédente si l'ajout s'est bien effectué.
```ts
addMovie(): void {
......@@ -76,7 +81,7 @@ Il faut alors définir la fonction `addMovie` sinon notre code ne compilera pas.
}
```
Mais ca ne compile pas, car dans notre `MovieService` il n'y a pas de méthode addMovie ! Hop, on la crée :
Mais... Ca ne compile pas... Car dans notre `MovieService` il n'y a pas de méthode addMovie ! Hop, on la crée :
```ts
addMovie(movie: Movie): Observable<Movie> {
return this.httpClient.post<Movie>(movie);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment