POST-,PUT-,DELETE-requests implementation

Author: Demiara

src/app/heroes/heroes.component.html

@@ -1,10 +1,29 @@
 <h3>Heroes</h3>
+<div>
+    <label
+        >Hero name:
+        <input #heroName />
+    </label>
+    <button (click)="add(heroName.value); heroName.value = ''">
+        add
+    </button>
+    <button (click)="search(heroName.value)">
+        search
+    </button>
+</div>
 
 <ul class="heroes">
     <li *ngFor="let hero of heroes">
         <a (click)="edit(hero)">
             <span class="badge">{{ hero.id || -1 }}</span>
             <span *ngIf="hero !== editHero">{{ hero.name }}</span>
+            <input
+                *ngIf="hero === editHero"
+                [(ngModel)]="hero.name"
+                (blur)="update()"
+                (keyup.enter)="update()"
+            />
         </a>
+        <button class="delete" title="delete hero" (click)="delete(hero)">x</button>
     </li>
 </ul>

src/app/heroes/heroes.component.ts

@@ -22,7 +22,41 @@ export class HeroesComponent implements OnInit {
         this.heroesService.getHeroes().subscribe(heroes => (this.heroes = heroes));
     }
 
+    public add(name: string): void {
+        this.editHero = undefined;
+        name = name.trim();
+        if (!name) {
+            return;
+        }
+        const newHero: Hero = { name } as Hero;
+        this.heroesService.addHero(newHero).subscribe(hero => this.heroes.push(hero));
+    }
+
+    public delete(hero: Hero): void {
+        this.heroes = this.heroes.filter(h => h !== hero);
+        this.heroesService.deleteHero(hero.id).subscribe();
+    }
+
     public edit(hero: Hero): void {
         this.editHero = hero;
     }
+
+    public search(searchTerm: string): void {
+        this.editHero = undefined;
+        if (searchTerm) {
+            this.heroesService.searchHeroes(searchTerm).subscribe(heroes => (this.heroes = heroes));
+        }
+    }
+
+    public update(): void {
+        if (this.editHero) {
+            this.heroesService.updateHero(this.editHero).subscribe(hero => {
+                const ix = hero ? this.heroes.findIndex(h => h.id === hero.id) : -1;
+                if (ix > -1) {
+                    this.heroes[ix] = hero;
+                }
+            });
+            this.editHero = undefined;
+        }
+    }
 }

src/app/heroes/heroes.service.ts

@@ -1,7 +1,7 @@
 import { catchError } from 'rxjs/operators';
-import { Hero } from './hero';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { HandleError, HttpErrorHandler } from '../http-error-handler.service';
+import { Hero } from './hero';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
@@ -21,9 +21,35 @@ export class HeroesService {
         this.handleError = httpErrorHandler.createHandleError('HeroesService');
     }
 
+    public addHero(hero: Hero): Observable<Hero> {
+        return this.http
+            .post<Hero>(this.heroesUrl, hero, httpOptions)
+            .pipe(catchError(this.handleError('addHero', hero)));
+    }
+
+    public deleteHero(id: number): Observable<{}> {
+        const url = `${this.heroesUrl}/${id}`;
+        return this.http.delete(url, httpOptions).pipe(catchError(this.handleError('deleteHero')));
+    }
+
     public getHeroes(): Observable<Hero[]> {
         return this.http
             .get<Hero[]>(this.heroesUrl)
             .pipe(catchError(this.handleError('getHeroes', [])));
     }
+
+    public searchHeroes(term: string): Observable<Hero[]> {
+        term = term.trim();
+        const options = term ? { params: new HttpParams().set('name', term) } : {};
+        return this.http
+            .get<Hero[]>(this.heroesUrl, options)
+            .pipe(catchError(this.handleError<Hero[]>('searchHeroes', [])));
+    }
+
+    public updateHero(hero: Hero): Observable<Hero> {
+        httpOptions.headers = httpOptions.headers.set('Authorization', 'my-new-auth-token');
+        return this.http
+            .put<Hero>(this.heroesUrl, hero, httpOptions)
+            .pipe(catchError(this.handleError('updateHero', hero)));
+    }
 }