Fin section 16 : RxJS
This commit is contained in:
parent
108c2b17a7
commit
f4a6d2dfeb
@ -55,4 +55,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 *ngIf="!pokemon" class="center">Aucun pokémon à afficher !</h4>
|
||||
<h4 *ngIf="!pokemon" class="center">
|
||||
<app-loader></app-loader>
|
||||
</h4>
|
||||
|
@ -1,5 +1,6 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<app-search-pokemon></app-search-pokemon>
|
||||
<div
|
||||
*ngFor="let pokemon of pokemonList"
|
||||
class="col m4 s6"
|
||||
|
13
src/app/pokemon/loader/loader.component.html
Normal file
13
src/app/pokemon/loader/loader.component.html
Normal 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>
|
8
src/app/pokemon/loader/loader.component.ts
Normal file
8
src/app/pokemon/loader/loader.component.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-loader',
|
||||
templateUrl: './loader.component.html',
|
||||
styles: [],
|
||||
})
|
||||
export class LoaderComponent {}
|
@ -125,4 +125,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<h3 *ngIf="!pokemon" class="center">Aucun pokémon à éditer...</h3>
|
||||
<h3 *ngIf="!pokemon" class="center">
|
||||
<app-loader></app-loader>
|
||||
</h3>
|
||||
|
@ -11,6 +11,8 @@ import { FormsModule } from '@angular/forms';
|
||||
import { PokemonFormComponent } from './pokemon-form/pokemon-form.component';
|
||||
import { EditPokemonComponent } from './edit-pokemon/edit-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 = [
|
||||
{ path: 'edit/pokemon/:id', component: EditPokemonComponent },
|
||||
@ -28,6 +30,8 @@ const pokemonRoutes: Routes = [
|
||||
PokemonFormComponent,
|
||||
EditPokemonComponent,
|
||||
AddPokemonComponent,
|
||||
SearchPokemonComponent,
|
||||
LoaderComponent,
|
||||
],
|
||||
imports: [CommonModule, FormsModule, RouterModule.forChild(pokemonRoutes)],
|
||||
providers: [PokemonService],
|
||||
|
@ -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> {
|
||||
const httpOptions = {
|
||||
headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
|
||||
|
25
src/app/pokemon/search-pokemon/search-pokemon.component.html
Normal file
25
src/app/pokemon/search-pokemon/search-pokemon.component.html
Normal 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>
|
40
src/app/pokemon/search-pokemon/search-pokemon.component.ts
Normal file
40
src/app/pokemon/search-pokemon/search-pokemon.component.ts
Normal 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);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user