Fin section 16 : RxJS

This commit is contained in:
Lucien Cartier-Tilet 2023-02-27 15:01:42 +01:00
parent 108c2b17a7
commit f4a6d2dfeb
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
9 changed files with 107 additions and 2 deletions

View File

@ -55,4 +55,6 @@
</div> </div>
</div> </div>
</div> </div>
<h4 *ngIf="!pokemon" class="center">Aucun pokémon à afficher !</h4> <h4 *ngIf="!pokemon" class="center">
<app-loader></app-loader>
</h4>

View File

@ -1,5 +1,6 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<app-search-pokemon></app-search-pokemon>
<div <div
*ngFor="let pokemon of pokemonList" *ngFor="let pokemon of pokemonList"
class="col m4 s6" class="col m4 s6"

View File

@ -0,0 +1,13 @@
<div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>

View File

@ -0,0 +1,8 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-loader',
templateUrl: './loader.component.html',
styles: [],
})
export class LoaderComponent {}

View File

@ -125,4 +125,6 @@
</div> </div>
</div> </div>
</form> </form>
<h3 *ngIf="!pokemon" class="center">Aucun pokémon à éditer...</h3> <h3 *ngIf="!pokemon" class="center">
<app-loader></app-loader>
</h3>

View File

@ -11,6 +11,8 @@ import { FormsModule } from '@angular/forms';
import { PokemonFormComponent } from './pokemon-form/pokemon-form.component'; import { PokemonFormComponent } from './pokemon-form/pokemon-form.component';
import { EditPokemonComponent } from './edit-pokemon/edit-pokemon.component'; import { EditPokemonComponent } from './edit-pokemon/edit-pokemon.component';
import { AddPokemonComponent } from './add-pokemon/add-pokemon.component'; import { AddPokemonComponent } from './add-pokemon/add-pokemon.component';
import { SearchPokemonComponent } from './search-pokemon/search-pokemon.component';
import { LoaderComponent } from './loader/loader.component';
const pokemonRoutes: Routes = [ const pokemonRoutes: Routes = [
{ path: 'edit/pokemon/:id', component: EditPokemonComponent }, { path: 'edit/pokemon/:id', component: EditPokemonComponent },
@ -28,6 +30,8 @@ const pokemonRoutes: Routes = [
PokemonFormComponent, PokemonFormComponent,
EditPokemonComponent, EditPokemonComponent,
AddPokemonComponent, AddPokemonComponent,
SearchPokemonComponent,
LoaderComponent,
], ],
imports: [CommonModule, FormsModule, RouterModule.forChild(pokemonRoutes)], imports: [CommonModule, FormsModule, RouterModule.forChild(pokemonRoutes)],
providers: [PokemonService], providers: [PokemonService],

View File

@ -35,6 +35,16 @@ export class PokemonService {
); );
} }
searchPokemonList(term: string): Observable<Pokemon[]> {
if (term.length <= 1) {
return of([]);
}
return this.http.get<Pokemon[]>(`api/pokemons?name=${term}`).pipe(
tap((pokemon) => this.log(pokemon)),
catchError((error) => this.handleError(error, []))
);
}
updatePokemon(pokemon: Pokemon): Observable<null> { updatePokemon(pokemon: Pokemon): Observable<null> {
const httpOptions = { const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' }), headers: new HttpHeaders({ 'Content-Type': 'application/json' }),

View File

@ -0,0 +1,25 @@
<div class="row">
<div class="col s12 m6 offset-m3">
<div class="card">
<div class="card-content">
<div class="input-field">
<input
#searchBox
type="text"
(keyup)="search(searchBox.value)"
placeholder="Rechercher un Pokémon"
/>
<div class="collection">
<a
*ngFor="let pokemon of pokemons$ | async"
(click)="goToDetail(pokemon)"
class="collection-item"
>
{{ pokemon.name }}
</a>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,40 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {
debounceTime,
distinctUntilChanged,
Observable,
Subject,
switchMap,
} from 'rxjs';
import { Pokemon } from '../pokemon';
import { PokemonService } from '../pokemon.service';
@Component({
selector: 'app-search-pokemon',
templateUrl: './search-pokemon.component.html',
styles: [],
})
export class SearchPokemonComponent implements OnInit {
searchTerms = new Subject<string>();
pokemons$: Observable<Pokemon[]>;
constructor(private router: Router, private pokemonService: PokemonService) {}
ngOnInit(): void {
this.pokemons$ = this.searchTerms.pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap((term) => this.pokemonService.searchPokemonList(term))
);
}
search(term: string) {
this.searchTerms.next(term);
}
goToDetail(pokemon: Pokemon) {
const link = ['/pokemon', pokemon.id];
this.router.navigate(link);
}
}