BookMonkey 3 Diff

Files changed (12) hide show

tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/app.module.ts +9 -2
tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/book-details/book-details.component.html +9 -1
tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/book-details/book-details.component.ts +11 -2
tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/book-list/book-list.component.html +6 -0
tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/book-list/book-list.component.ts +1 -1
tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/home/home.component.html +3 -0
tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/search/search.component.html +17 -0
tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/search/search.component.ts +32 -0
tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/shared/book-factory.ts +11 -0
tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/shared/book-raw.ts +15 -0
tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/shared/book-store.service.ts +49 -34
tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/shared/token-interceptor.ts +20 -0

tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/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';
@@ -7,6 +8,8 @@
 import { BookListComponent } from './book-list/book-list.component';
 import { BookListItemComponent } from './book-list-item/book-list-item.component';
 import { BookDetailsComponent } from './book-details/book-details.component';
 @NgModule({
   declarations: [
@@ -14,13 +17,17 @@
     HomeComponent,
     BookListComponent,
     BookListItemComponent,
-    BookDetailsComponent
   ],
   imports: [
     CommonModule,
     AppRoutingModule
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module.one-app';
 import { AppComponent } from './app.component';
 import { BookListComponent } from './book-list/book-list.component';
 import { BookListItemComponent } from './book-list-item/book-list-item.component';
 import { BookDetailsComponent } from './book-details/book-details.component';
+import { SearchComponent } from './search/search.component';
+import { TokenInterceptor } from './shared/token-interceptor';
 @NgModule({
   declarations: [
     HomeComponent,
     BookListComponent,
     BookListItemComponent,
+    BookDetailsComponent,
+    SearchComponent
   ],
   imports: [
     CommonModule,
+    HttpClientModule,
     AppRoutingModule
   ],
+  providers: [
+    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/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/interceptors}/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,15 +14,24 @@
   constructor(
     private bs: BookStoreService,
     private route: ActivatedRoute
   ) { }
   ngOnInit() {
     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() {
     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 (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/interceptors}/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/interceptors}/book-list/book-list.component.ts RENAMED

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

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

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

@@ -4,3 +4,6 @@
   Buchliste ansehen
   <i class="right arrow icon"></i>
 </a>

   Buchliste ansehen
   <i class="right arrow icon"></i>
 </a>
+            +
+<h2>Suche</h2>
+<bm-search></bm-search>

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

	@@ -0,0 +1,17 @@

+<div class="ui search" [class.loading]="isLoading">
+  <div class="ui icon input">
+    <input type="text" class="prompt"
+      (keyup)="keyUp$.next($event.target.value)">
+    <i class="search icon"></i>
+  </div>
+            +
+  <div class="results transition visible"
+    *ngIf="foundBooks.length">
+    <a class="result"
+      *ngFor="let book of foundBooks"
+      [routerLink]="['..', 'books', book.isbn]">
+      {{ book.title }}
+      <p class="description">{{ book.subtitle }}</p>
+    </a>
+  </div>
+</div>

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

	@@ -0,0 +1,32 @@

+import { Component, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, tap, switchMap, filter } from 'rxjs/operators';
+            +
+import { Book } from '../shared/book';
+import { BookStoreService } from '../shared/book-store.service';
+            +
+@Component({
+  selector: 'bm-search',
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.css']
+})
+export class SearchComponent implements OnInit {
+            +
+  keyUp$ = new Subject<string>();
+  isLoading = false;
+  foundBooks: Book[] = [];
+            +
+  constructor(private bs: BookStoreService) { }
+            +
+  ngOnInit() {
+    this.keyUp$.pipe(
+      filter(term => term.length >= 3),
+      debounceTime(500),
+      distinctUntilChanged(),
+      tap(() => this.isLoading = true),
+      switchMap(searchTerm => this.bs.getAllSearch(searchTerm)),
+      tap(() => this.isLoading = false)
+    )
+    .subscribe(books => this.foundBooks = books);
+  }
+}

tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/shared/book-factory.ts RENAMED

	@@ -0,0 +1,11 @@

+import { Book } from './book';
+import { BookRaw } from './book-raw';
+            +
+export class BookFactory {
+  static fromRaw(b: BookRaw): Book {
+    return {
+      ...b,
+      published: new Date(b.published)
+    };
+  }
+}

tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/shared/book-raw.ts RENAMED

	@@ -0,0 +1,15 @@

+export interface BookRaw {
+  isbn: string;
+  title: string;
+  authors: string[];
+  published: string;
+  subtitle?: string;
+  rating?: number;
+  thumbnails?: ThumbnailRaw[];
+  description?: string;
+}
+            +
+export interface ThumbnailRaw {
+  url: string;
+  title?: string;
+}

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

@@ -1,49 +1,64 @@
 import { Injectable } from '@angular/core';
 import { Book } from './book';
 @Injectable({
   providedIn: 'root'
 })
 export class BookStoreService {
-  books: Book[];
-  constructor() {
-    this.books = [
-      {
-        isbn: '9783864906466',
-        title: 'Angular',
-        authors: ['Ferdinand Malcher', 'Johannes Hoppe', 'Danny Koppenhagen'],
-        published: new Date(2019, 4, 30),
-        subtitle: 'Grundlagen, fortgeschrittene Themen und Best Practices - mit NativeScript und NgRx',
-        rating: 5,
-        thumbnails: [{
-          url: 'https://ng-buch.de/buch1.jpg',
-          title: 'Buchcover'
-        }],
-        description: 'Die Autoren führen Sie mit einem anspruchsvollen Beispielprojekt durch die Welt von Angular...'
-      },
-      {
-        isbn: '9783864903274',
-        title: 'React',
-        authors: ['Oliver Zeigermann', 'Nils Hartmann'],
-        published: new Date(2016, 6, 17),
-        subtitle: 'Die praktische Einführung in React, React Router und Redux',
-        rating: 3,
-        thumbnails: [{
-          url: 'https://ng-buch.de/buch2.jpg',
-          title: 'Buchcover'
-        }],
-        description: 'React ist ein JavaScript-Framework zur Entwicklung von Benutzeroberflächen...'
-      }
-    ];
   }
-  getAll(): Book[] {
-    return this.books;
   }
-  getSingle(isbn: string): Book {
-    return this.books.find(book => book.isbn === isbn);
   }
 }

 import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { throwError, Observable } from 'rxjs';
+import { retry, map, catchError } from 'rxjs/operators';
 import { Book } from './book';
+import { BookRaw } from './book-raw';
+import { BookFactory } from './book-factory';
 @Injectable({
   providedIn: 'root'
 })
 export class BookStoreService {
+  private api = 'https://api3.angular-buch.com/secure';
+  constructor(private http: HttpClient) {}
+            +
+  getAll(): Observable<Book[]> {
+    return this.http.get<BookRaw[]>(`${this.api}/books`)
+      .pipe(
+        retry(3),
+        map(booksRaw =>
+          booksRaw.map(b => BookFactory.fromRaw(b)),
+        ),
+        catchError(this.errorHandler)
+      );
+  }
+            +
+  getSingle(isbn: string): Observable<Book> {
+    return this.http.get<BookRaw>(
+      `${this.api}/book/${isbn}`
+    ).pipe(
+      retry(3),
+      map(b => BookFactory.fromRaw(b)),
+      catchError(this.errorHandler)
+    );
+  }
+            +
+  remove(isbn: string): Observable<any> {
+    return this.http.delete(
+      `${this.api}/book/${isbn}`,
+      { responseType: 'text' }
+    ).pipe(
+      catchError(this.errorHandler)
+    );
   }
+  getAllSearch(searchTerm: string): Observable<Book[]> {
+    return this.http.get<BookRaw[]>(
+      `${this.api}/books/search/${searchTerm}`
+    ).pipe(
+      retry(3),
+      map(booksRaw =>
+        booksRaw.map(b => BookFactory.fromRaw(b)),
+      ),
+      catchError(this.errorHandler)
+    );
   }
+  private errorHandler(error: HttpErrorResponse): Observable<any> {
+    console.error('Fehler aufgetreten!');
+    return throwError(error);
   }
 }

tmp/src/app/book-monkey/{iteration-2/routing → iteration-3/interceptors}/shared/token-interceptor.ts RENAMED

	@@ -0,0 +1,20 @@

+import { Injectable } from '@angular/core';
+import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent } from '@angular/common/http';
+import { Observable } from 'rxjs';
+            +
+@Injectable()
+export class TokenInterceptor implements HttpInterceptor {
+  private authToken = '1234567890';
+            +
+  intercept(
+    request: HttpRequest<any>,
+    next: HttpHandler
+  ): Observable<HttpEvent<any>> {
+    const newRequest = request.clone({
+      setHeaders: {
+        Authorization: `Bearer ${this.authToken}`
+      }
+    });
+    return next.handle(newRequest);
+  }
+}