BookMonkey 4 Diff

Files changed (6) hide show

tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/http}/app.module.ts RENAMED

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module.one-app';
 import { AppComponent } from './app.component';
@@ -18,6 +19,7 @@
   ],
   imports: [
     CommonModule,
     AppRoutingModule
   ],
   providers: [],

 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module.one-app';
 import { AppComponent } from './app.component';
   ],
   imports: [
     CommonModule,
+    HttpClientModule,
     AppRoutingModule
   ],
   providers: [],

tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/http}/book-details/book-details.component.html RENAMED

@@ -1,4 +1,4 @@
-<div *ngIf="book">
   <h1>{{ book.title }}</h1>
   <h3 *ngIf="book.subtitle">{{ book.subtitle }}</h3>
   <div class="ui divider"></div>
@@ -29,4 +29,12 @@
     <img *ngFor="let thumbnail of book.thumbnails"
       [src]="thumbnail.url">
   </div>
 </div>

+<div *ngIf="book; else loading">
   <h1>{{ book.title }}</h1>
   <h3 *ngIf="book.subtitle">{{ book.subtitle }}</h3>
   <div class="ui divider"></div>
     <img *ngFor="let thumbnail of book.thumbnails"
       [src]="thumbnail.url">
   </div>
+  <button class="ui tiny red labeled icon button"
+          (click)="removeBook()">
+    <i class="remove icon"></i> Buch löschen
+  </button>
 </div>
+<ng-template #loading>
+  <div class="ui active centered inline loader"></div>
+</ng-template>

tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/http}/book-details/book-details.component.ts RENAMED

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { Book } from '../shared/book';
 import { BookStoreService } from '../shared/book-store.service';
@@ -14,16 +14,24 @@
   constructor(
     private bs: BookStoreService,
     private route: ActivatedRoute
   ) { }
   ngOnInit(): void {
     const params = this.route.snapshot.paramMap;
-    this.book = this.bs.getSingle(params.get('isbn') || '');
   }
   getRating(num: number) {
     return new Array(num);
   }
 }

 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Book } from '../shared/book';
 import { BookStoreService } from '../shared/book-store.service';
   constructor(
     private bs: BookStoreService,
+    private router: Router,
     private route: ActivatedRoute
   ) { }
   ngOnInit(): void {
     const params = this.route.snapshot.paramMap;
+    this.bs.getSingle(params.get('isbn') || '')
+      .subscribe(b => this.book = b);
   }
   getRating(num: number) {
     return new Array(num);
   }
+  removeBook() {
+    if (this.book && confirm('Buch wirklich löschen?')) {
+      this.bs.remove(this.book.isbn)
+        .subscribe(res => this.router.navigate(['../'], { relativeTo: this.route }));
+    }
+  }
 }

tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/http}/book-list/book-list.component.html RENAMED

@@ -3,4 +3,10 @@
     *ngFor="let b of books"
     [book]="b"
     [routerLink]="b.isbn"></bm-book-list-item>
 </div>

     *ngFor="let b of books"
     [book]="b"
     [routerLink]="b.isbn"></bm-book-list-item>
+  <div *ngIf="!books" class="ui active dimmer">
+    <div class="ui large text loader">Daten werden geladen...</div>
+  </div>
+  <p *ngIf="books && !books.length">Es wurden noch keine Bücher eingetragen.</p>
 </div>

tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/http}/book-list/book-list.component.ts RENAMED

@@ -14,6 +14,6 @@
   constructor(private bs: BookStoreService) { }
   ngOnInit(): void {
-    this.books = this.bs.getAll();
   }
 }

   constructor(private bs: BookStoreService) { }
   ngOnInit(): void {
+    this.bs.getAll().subscribe(res => this.books = res);
   }
 }

tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/http}/shared/book-store.service.ts RENAMED

@@ -1,4 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Book } from './book';
@@ -6,44 +8,24 @@
   providedIn: 'root'
 })
 export class BookStoreService {
-  books: Book[];
-  constructor() {
-    this.books = [
-      {
-        isbn: '9783864907791',
-        title: 'Angular',
-        authors: ['Ferdinand Malcher', 'Johannes Hoppe', 'Danny Koppenhagen'],
-        published: new Date(2020, 8, 1),
-        subtitle: 'Grundlagen, fortgeschrittene Themen und Best Practices',
-        rating: 5,
-        thumbnails: [{
-          url: 'https://ng-buch.de/angular-cover.jpg',
-          title: 'Buchcover'
-        }],
-        description: 'Lernen Sie Angular mit diesem Praxisbuch!'
-      },
-      {
-        isbn: '9783864905520',
-        title: 'React',
-        authors: ['Oliver Zeigermann', 'Nils Hartmann'],
-        published: new Date(2019, 11, 12),
-        subtitle: 'Grundlagen, fortgeschrittene Techniken und Praxistipps',
-        rating: 3,
-        thumbnails: [{
-          url: 'https://ng-buch.de/react-cover.jpg',
-          title: 'Buchcover'
-        }],
-        description: 'Das bewährte und umfassende Praxisbuch zu React.'
-      }
-    ];
   }
-  getAll(): Book[] {
-    return this.books;
   }
-  getSingle(isbn: string): Book | undefined {
-    return this.books.find(book => book.isbn === isbn);
   }
 }

 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
 import { Book } from './book';
   providedIn: 'root'
 })
 export class BookStoreService {
+  private api = 'https://api4.angular-buch.com';
+  constructor(private http: HttpClient) {}
+  getAll(): Observable<Book[]> {
+    return this.http.get<any[]>(`${this.api}/books`);
   }
+  getSingle(isbn: string): Observable<Book> {
+    return this.http.get<any>(
+      `${this.api}/book/${isbn}`
+    );
   }
+  remove(isbn: string): Observable<any> {
+    return this.http.delete(
+      `${this.api}/book/${isbn}`,
+      { responseType: 'text' }
+    );
   }
 }