BookMonkey 4 Diff

Files changed (25) hide show

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/admin-routing.module.ts +28 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/admin.module.ts +26 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/book-form/book-form.component.html +75 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/book-form/book-form.component.ts +124 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/create-book/create-book.component.html +3 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/create-book/create-book.component.ts +29 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/edit-book/edit-book.component.html +8 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/edit-book/edit-book.component.ts +37 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/form-messages/form-messages.component.html +4 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/form-messages/form-messages.component.ts +51 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/shared/book-exists-validator.service.ts +25 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/shared/book-validators.ts +30 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/app-routing.module.ts +0 -25
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/app.module.ts +5 -25
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/book-details/book-details.component.html +48 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/book-details/book-details.component.ts +37 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/book-list/book-list.component.html +19 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/book-list/book-list.component.ts +20 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/book-list-item/book-list-item.component.html +17 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/book-list-item/book-list-item.component.ts +15 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/books-routing.module.ts +23 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/books.module.ts +26 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/shared/delay.directive.ts +20 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/shared/isbn.pipe.ts +12 -0
tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/shared/zoom.directive.ts +15 -0

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/admin-routing.module.ts RENAMED

	@@ -0,0 +1,28 @@

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { EditBookComponent } from './edit-book/edit-book.component';
+import { CreateBookComponent } from './create-book/create-book.component';
+const routes: Routes = [
+  {
+    path: 'admin',
+    redirectTo: 'admin/create',
+    pathMatch: 'full'
+  },
+  {
+    path: 'admin/create',
+    component: CreateBookComponent
+  },
+  {
+    path: 'admin/edit/:isbn',
+    component: EditBookComponent
+  }
+];
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: []
+})
+export class AdminRoutingModule { }

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/admin.module.ts RENAMED

	@@ -0,0 +1,26 @@

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { DateValueAccessorModule } from 'angular-date-value-accessor';
+import { AdminRoutingModule } from './admin-routing.module';
+import { BookFormComponent } from './book-form/book-form.component';
+import { CreateBookComponent } from './create-book/create-book.component';
+import { FormMessagesComponent } from './form-messages/form-messages.component';
+import { EditBookComponent } from './edit-book/edit-book.component';
+@NgModule({
+  imports: [
+    CommonModule,
+    AdminRoutingModule,
+    ReactiveFormsModule,
+    DateValueAccessorModule
+  ],
+  declarations: [
+    BookFormComponent,
+    CreateBookComponent,
+    EditBookComponent,
+    FormMessagesComponent
+  ]
+})
+export class AdminModule { }

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/book-form/book-form.component.html RENAMED

	@@ -0,0 +1,75 @@

+<form class="ui form"
+  [formGroup]="bookForm"
+  (ngSubmit)="submitForm()">
+  <label>Buchtitel</label>
+  <input formControlName="title">
+  <bm-form-messages
+    [control]="bookForm.get('title')"
+    controlName="title">
+  </bm-form-messages>
+  <label>Untertitel</label>
+  <input formControlName="subtitle">
+  <label>ISBN</label>
+  <input formControlName="isbn">
+  <bm-form-messages
+    [control]="bookForm.get('isbn')"
+    controlName="isbn">
+  </bm-form-messages>
+  <label>Erscheinungsdatum</label>
+  <input type="date"
+    useValueAsDate
+    formControlName="published">
+  <bm-form-messages
+    [control]="bookForm.get('published')"
+    controlName="published">
+  </bm-form-messages>
+  <label>Autoren</label>
+  <button type="button" class="ui mini button"
+    (click)="addAuthorControl()">
+    + Autor
+  </button>
+  <div class="fields" formArrayName="authors">
+    <div class="sixteen wide field"
+      *ngFor="let c of authors.controls; index as i">
+      <input placeholder="Autor"
+        [formControlName]="i">
+    </div>
+  </div>
+  <bm-form-messages
+    [control]="bookForm.get('authors')"
+    controlName="authors">
+  </bm-form-messages>
+  <label>Beschreibung</label>
+  <textarea formControlName="description"></textarea>
+  <label>Bilder</label>
+  <button type="button" class="ui mini button"
+    (click)="addThumbnailControl()">
+    + Bild
+  </button>
+  <div formArrayName="thumbnails">
+    <div class="fields"
+      *ngFor="let c of thumbnails.controls; index as i"
+      [formGroupName]="i">
+      <div class="nine wide field">
+        <input placeholder="URL"
+          formControlName="url">
+      </div>
+      <div class="seven wide field">
+        <input placeholder="Titel"
+          formControlName="title">
+      </div>
+    </div>
+  </div>
+  <button class="ui button" type="submit"
+    [disabled]="bookForm.invalid">
+    Speichern
+  </button>
+</form>

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/book-form/book-form.component.ts RENAMED

	@@ -0,0 +1,124 @@

+import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import { FormBuilder, FormGroup, FormArray, Validators, AbstractControl } from '@angular/forms';
+import { Book, Thumbnail } from '../../shared/book';
+import { BookValidators } from '../shared/book-validators';
+import { BookExistsValidatorService } from '../shared/book-exists-validator.service';
+@Component({
+  selector: 'bm-book-form',
+  templateUrl: './book-form.component.html',
+  styleUrls: ['./book-form.component.css']
+})
+export class BookFormComponent implements OnInit, OnChanges {
+  bookForm: FormGroup;
+  @Input() book?: Book;
+  @Input() set editing(isEditing: boolean) {
+    const isbnControl = this.bookForm.get('isbn')!;
+    if (isEditing) {
+      isbnControl.clearAsyncValidators();
+      isbnControl.disable();
+    } else {
+      isbnControl.setAsyncValidators(control => this.bookExistsValidator.validate(control));
+      isbnControl.enable();
+    }
+  };
+  @Output() submitBook = new EventEmitter<Book>();
+  constructor(
+    private fb: FormBuilder,
+    private bookExistsValidator: BookExistsValidatorService
+  ) {
+    this.bookForm = this.fb.group({
+      title: ['', Validators.required],
+      subtitle: [''],
+      isbn: ['',
+        [
+          Validators.required,
+          BookValidators.isbnFormat
+        ],
+        (control: AbstractControl) => this.bookExistsValidator.validate(control)
+      ],
+      description: [''],
+      authors: this.buildAuthorsArray(['']),
+      thumbnails: this.buildThumbnailsArray([
+        { title: '', url: '' }
+      ]),
+      published: [new Date(), [Validators.required]]
+    });
+  }
+  ngOnInit(): void {}
+  ngOnChanges() {
+    if (this.book) {
+      this.setFormValues(this.book);
+    }
+  }
+  private setFormValues(book: Book) {
+    this.bookForm.patchValue(book);
+    this.bookForm.setControl(
+      'authors',
+      this.buildAuthorsArray(book.authors)
+    );
+    if (book.thumbnails) {
+      this.bookForm.setControl(
+        'thumbnails',
+        this.buildThumbnailsArray(book.thumbnails)
+      );
+    };
+  }
+  private buildAuthorsArray(values: string[]): FormArray {
+    return this.fb.array(values, BookValidators.atLeastOneAuthor);
+  }
+  private buildThumbnailsArray(values: Thumbnail[]): FormArray {
+    return this.fb.array(
+      values.map(t => this.fb.group(t))
+    );
+  }
+  get authors(): FormArray {
+    return this.bookForm.get('authors') as FormArray;
+  }
+  get thumbnails(): FormArray {
+    return this.bookForm.get('thumbnails') as FormArray;
+  }
+  addAuthorControl() {
+    this.authors.push(this.fb.control(''));
+  }
+  addThumbnailControl() {
+    this.thumbnails.push(
+      this.fb.group({ url: '', title: '' })
+    );
+  }
+  submitForm() {
+    const formValue = this.bookForm.value;
+    const authors = formValue.authors
+              .filter((author: string) => author);
+    const thumbnails = formValue.thumbnails
+              .filter((thumbnail: Thumbnail) => thumbnail.url);
+    const isbn = this.book ? this.book.isbn : formValue.isbn;
+    const newBook: Book = {
+      ...formValue,
+      isbn,
+      authors,
+      thumbnails
+    };
+    this.submitBook.emit(newBook);
+    this.bookForm.reset();
+  }
+}

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/create-book/create-book.component.html RENAMED

	@@ -0,0 +1,3 @@


1	+ <h1>Buch hinzufügen</h1>
2	+
3	+ <bm-book-form (submitBook)="createBook($event)"></bm-book-form>

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/create-book/create-book.component.ts RENAMED

	@@ -0,0 +1,29 @@

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Book } from '../../shared/book';
+import { BookStoreService } from '../../shared/book-store.service';
+@Component({
+  selector: 'bm-create-book',
+  templateUrl: './create-book.component.html',
+  styleUrls: ['./create-book.component.css']
+})
+export class CreateBookComponent implements OnInit {
+  constructor(
+    private bs: BookStoreService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) { }
+  ngOnInit(): void {
+  }
+  createBook(book: Book) {
+    this.bs.create(book).subscribe(() => {
+      this.router.navigate(['../..', 'books'], { relativeTo: this.route });
+    });
+  }
+}

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/edit-book/edit-book.component.html RENAMED

	@@ -0,0 +1,8 @@

+<h1>Buch bearbeiten</h1>
+<bm-book-form
+  *ngIf="book"
+  (submitBook)="updateBook($event)"
+  [book]="book"
+  [editing]="true"
+  ></bm-book-form>

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/edit-book/edit-book.component.ts RENAMED

	@@ -0,0 +1,37 @@

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { map, switchMap } from 'rxjs/operators';
+import { Book } from '../../shared/book';
+import { BookStoreService } from '../../shared/book-store.service';
+@Component({
+  selector: 'bm-edit-book',
+  templateUrl: './edit-book.component.html',
+  styleUrls: ['./edit-book.component.css']
+})
+export class EditBookComponent implements OnInit {
+  book?: Book;
+  constructor(
+    private bs: BookStoreService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) { }
+  ngOnInit(): void {
+    this.route.paramMap.pipe(
+      map(params => params.get('isbn') || ''),
+      switchMap(isbn => this.bs.getSingle(isbn))
+    )
+    .subscribe(book => this.book = book);
+  }
+  updateBook(book: Book) {
+    this.bs.update(book).subscribe(() => {
+      this.router.navigate(['../../..', 'books', book.isbn], { relativeTo: this.route });
+    });
+  }
+}

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/form-messages/form-messages.component.html RENAMED

	@@ -0,0 +1,4 @@

+<div class="ui negative message"
+  *ngFor="let msg of errorsForControl()">
+  {{ msg }}
+</div>

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/form-messages/form-messages.component.ts RENAMED

	@@ -0,0 +1,51 @@

+import { Component, OnInit, Input } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+@Component({
+  selector: 'bm-form-messages',
+  templateUrl: './form-messages.component.html',
+  styleUrls: ['./form-messages.component.css']
+})
+export class FormMessagesComponent implements OnInit {
+  @Input() control?: AbstractControl | null;
+  @Input() controlName?: string;
+  private allMessages: { [key: string]: { [key: string]: string } } = {
+    title: {
+      required: 'Ein Buchtitel muss angegeben werden.'
+    },
+    isbn: {
+      required: 'Es muss eine ISBN angegeben werden.',
+      isbnFormat: 'Die ISBN muss aus 10 oder 13 Zeichen bestehen.',
+      isbnExists: 'Die ISBN existiert bereits.'
+    },
+    published: {
+      required: 'Es muss ein Erscheinungsdatum angegeben werden.'
+    },
+    authors: {
+      atLeastOneAuthor: 'Es muss ein Autor angegeben werden.'
+    }
+  };
+  constructor() { }
+  ngOnInit(): void {
+  }
+  errorsForControl(): string[] {
+    type allMessagesKey = keyof FormMessagesComponent['allMessages'];
+    const messages = this.allMessages[this.controlName as keyof allMessagesKey];
+    if (
+      !this.control ||
+      !this.control.errors ||
+      !messages ||
+      !this.control.dirty
+    ) { return []; }
+    return Object.keys(this.control.errors)
+      .map(err => messages[err]);
+  }
+}

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/shared/book-exists-validator.service.ts RENAMED

	@@ -0,0 +1,25 @@

+import { Injectable } from '@angular/core';
+import { AsyncValidator, ValidationErrors, AbstractControl } from '@angular/forms';
+import { Observable, of } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+import { BookStoreService } from '../../shared/book-store.service';
+@Injectable({
+  providedIn: 'root'
+})
+export class BookExistsValidatorService implements AsyncValidator {
+  constructor(private bs: BookStoreService) { }
+  validate(
+    control: AbstractControl
+  ): Observable<ValidationErrors | null> {
+    return this.bs.check(control.value).pipe(
+      map(exists => (exists === false) ? null : {
+          isbnExists: { valid: false }
+      }),
+      catchError(() => of(null))
+    );
+  }
+}

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/admin/shared/book-validators.ts RENAMED

	@@ -0,0 +1,30 @@

+import { FormArray, ValidationErrors, AbstractControl } from '@angular/forms';
+export class BookValidators {
+  static isbnFormat(control: AbstractControl): ValidationErrors | null {
+    if (!control.value) { return null; }
+    const numbers = control.value.replace(/-/g, '');
+    const isbnPattern = /(^\d{10}$)|(^\d{13}$)/;
+    if (isbnPattern.test(numbers)) {
+      return null;
+    } else {
+      return {
+        isbnFormat: { valid: false }
+      };
+    }
+  }
+  static atLeastOneAuthor(controlArray: AbstractControl): ValidationErrors | null {
+    if ((controlArray as FormArray).controls.some((el: AbstractControl) => el.value)) {
+      return null;
+    } else {
+      return {
+        atLeastOneAuthor: { valid: false }
+      };
+    }
+  }
+}

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/app-routing.module.ts RENAMED

@@ -2,10 +2,6 @@
 import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './home/home.component';
-import { BookListComponent } from './book-list/book-list.component';
-import { BookDetailsComponent } from './book-details/book-details.component';
-import { CreateBookComponent } from './create-book/create-book.component';
-import { EditBookComponent } from './edit-book/edit-book.component';
 export const routes: Routes = [
   {
@@ -16,27 +12,6 @@
   {
     path: 'home',
     component: HomeComponent
-  },
-  {
-    path: 'books',
-    component: BookListComponent
-  },
-  {
-    path: 'books/:isbn',
-    component: BookDetailsComponent
-  },
-  {
-    path: 'admin',
-    redirectTo: 'admin/create',
-    pathMatch: 'full'
-  },
-  {
-    path: 'admin/create',
-    component: CreateBookComponent
-  },
-  {
-    path: 'admin/edit/:isbn',
-    component: EditBookComponent
   }
 ];

 import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 export const routes: Routes = [
   {
   {
     path: 'home',
     component: HomeComponent
   }
 ];

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/app.module.ts RENAMED

@@ -1,49 +1,29 @@
 import { CommonModule } from '@angular/common';
 import { NgModule, LOCALE_ID } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { ReactiveFormsModule } from '@angular/forms';
-import { DateValueAccessorModule } from 'angular-date-value-accessor';
 import localeDe from '@angular/common/locales/de';
 import { registerLocaleData } from '@angular/common';
 import { AppRoutingModule } from './app-routing.module.one-app';
 import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.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';
-import { BookFormComponent } from './book-form/book-form.component';
-import { CreateBookComponent } from './create-book/create-book.component';
-import { FormMessagesComponent } from './form-messages/form-messages.component';
-import { EditBookComponent } from './edit-book/edit-book.component';
-import { IsbnPipe } from './shared/isbn.pipe';
-import { ZoomDirective } from './shared/zoom.directive';
-import { DelayDirective } from './shared/delay.directive';
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
-    BookListComponent,
-    BookListItemComponent,
-    BookDetailsComponent,
-    SearchComponent,
-    BookFormComponent,
-    CreateBookComponent,
-    FormMessagesComponent,
-    EditBookComponent,
-    IsbnPipe,
-    ZoomDirective,
-    DelayDirective
   ],
   imports: [
     CommonModule,
     HttpClientModule,
     AppRoutingModule,
-    ReactiveFormsModule,
-    DateValueAccessorModule
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },

 import { CommonModule } from '@angular/common';
 import { NgModule, LOCALE_ID } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import localeDe from '@angular/common/locales/de';
 import { registerLocaleData } from '@angular/common';
 import { AppRoutingModule } from './app-routing.module.one-app';
 import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
 import { SearchComponent } from './search/search.component';
 import { TokenInterceptor } from './shared/token.interceptor';
+import { BooksModule } from './books/books.module';
+import { AdminModule } from './admin/admin.module';
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
+    SearchComponent
   ],
   imports: [
     CommonModule,
     HttpClientModule,
     AppRoutingModule,
+    BooksModule,
+    AdminModule
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/book-details/book-details.component.html RENAMED

	@@ -0,0 +1,48 @@

+<div *ngIf="book; else loading">
+  <h1>{{ book.title }}</h1>
+  <h3 *ngIf="book.subtitle">{{ book.subtitle }}</h3>
+  <div class="ui divider"></div>
+  <div class="ui grid">
+    <div class="four wide column">
+      <h4>Autoren</h4>
+      <ng-container *ngFor="let author of book.authors">
+        {{ author }}<br>
+      </ng-container>
+    </div>
+    <div class="four wide column">
+      <h4>ISBN</h4>
+      {{ book.isbn | isbn }}
+    </div>
+    <div class="four wide column">
+      <h4>Erschienen</h4>
+      {{ book.published | date:'longDate' }}
+    </div>
+    <div class="four wide column" *ngIf="book.rating">
+      <h4>Rating</h4>
+      <ng-container
+        *ngFor="let r of getRating(book.rating);
+                index as i">
+        <i class="yellow star icon"
+          *bmDelay="500 + i * 200"></i>
+      </ng-container>
+    </div>
+  </div>
+  <h4>Beschreibung</h4>
+  <p>{{ book.description }}</p>
+  <div class="ui small images">
+    <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>
+  <a class="ui tiny yellow labeled icon button"
+    [routerLink]="['../../admin/edit', book.isbn]">
+    <i class="write icon"></i> Buch bearbeiten
+  </a>
+</div>
+<ng-template #loading>
+  <div class="ui active centered inline loader"></div>
+</ng-template>

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/book-details/book-details.component.ts RENAMED

	@@ -0,0 +1,37 @@

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Book } from '../../shared/book';
+import { BookStoreService } from '../../shared/book-store.service';
+@Component({
+  selector: 'bm-book-details',
+  templateUrl: './book-details.component.html',
+  styleUrls: ['./book-details.component.css']
+})
+export class BookDetailsComponent implements OnInit {
+  book?: Book;
+  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-5/directives → iteration-6/modules}/books/book-list/book-list.component.html RENAMED

	@@ -0,0 +1,19 @@

+<div class="ui middle aligned selection divided list">
+  <ng-container *ngIf="books$ | async as books; else loading">
+    <bm-book-list-item class="item"
+      *ngFor="let b of books"
+      [book]="b"
+      [routerLink]="b.isbn"></bm-book-list-item>
+    <p *ngIf="!books.length">Es wurden noch keine Bücher eingetragen.</p>
+  </ng-container>
+  <ng-template #loading>
+    <div class="ui active dimmer">
+      <div class="ui large text loader">Daten werden geladen...</div>
+    </div>
+  </ng-template>
+</div>

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/book-list/book-list.component.ts RENAMED

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

+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Book } from '../../shared/book';
+import { BookStoreService } from '../../shared/book-store.service';
+@Component({
+  selector: 'bm-book-list',
+  templateUrl: './book-list.component.html',
+  styleUrls: ['./book-list.component.css']
+})
+export class BookListComponent implements OnInit {
+  books$: Observable<Book[]>;
+  constructor(private bs: BookStoreService) {
+    this.books$ = this.bs.getAll();
+  }
+  ngOnInit(): void {}
+}

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/book-list-item/book-list-item.component.html RENAMED

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

+<ng-container *ngIf="book">
+  <img class="ui tiny image"
+      *ngIf="book.thumbnails && book.thumbnails[0] && book.thumbnails[0].url"
+      [src]="book.thumbnails[0].url"
+      bmZoom>
+  <div class="content">
+    <div class="header">{{ book.title }}</div>
+    <div *ngIf="book.subtitle" class="description">{{ book.subtitle }}</div>
+    <div class="metadata">
+      <span *ngFor="let author of book.authors; last as l">
+        {{ author }}<span *ngIf="!l">, </span>
+      </span>
+      <br>
+      ISBN {{ book.isbn | isbn }}
+    </div>
+  </div>
+</ng-container>

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/book-list-item/book-list-item.component.ts RENAMED

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

+import { Component, OnInit, Input } from '@angular/core';
+import { Book } from '../../shared/book';
+@Component({
+  selector: 'bm-book-list-item',
+  templateUrl: './book-list-item.component.html',
+  styleUrls: ['./book-list-item.component.css']
+})
+export class BookListItemComponent implements OnInit {
+  @Input() book?: Book;
+  ngOnInit(): void {
+  }
+}

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/books-routing.module.ts RENAMED

	@@ -0,0 +1,23 @@

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { BookListComponent } from './book-list/book-list.component';
+import { BookDetailsComponent } from './book-details/book-details.component';
+const routes: Routes = [
+  {
+    path: 'books',
+    component: BookListComponent
+  },
+  {
+    path: 'books/:isbn',
+    component: BookDetailsComponent
+  }
+];
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: []
+})
+export class BooksRoutingModule { }

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/books.module.ts RENAMED

	@@ -0,0 +1,26 @@

+import { DelayDirective } from './shared/delay.directive';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BooksRoutingModule } from './books-routing.module';
+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 { IsbnPipe } from './shared/isbn.pipe';
+import { ZoomDirective } from './shared/zoom.directive';
+@NgModule({
+  imports: [
+    CommonModule,
+    BooksRoutingModule
+  ],
+  declarations: [
+    BookListComponent,
+    BookListItemComponent,
+    BookDetailsComponent,
+    IsbnPipe,
+    ZoomDirective,
+    DelayDirective
+  ]
+})
+export class BooksModule { }

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/shared/delay.directive.ts RENAMED

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

+import { Directive, OnInit, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+@Directive({
+  selector: '[bmDelay]'
+})
+export class DelayDirective implements OnInit {
+  @Input() bmDelay: number = 100;
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private viewContainerRef: ViewContainerRef
+  ) { }
+  ngOnInit(): void {
+    setTimeout(() => {
+      this.viewContainerRef.createEmbeddedView(this.templateRef);
+    }, this.bmDelay);
+  }
+}

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/shared/isbn.pipe.ts RENAMED

	@@ -0,0 +1,12 @@

+import { Pipe, PipeTransform } from '@angular/core';
+@Pipe({
+  name: 'isbn'
+})
+export class IsbnPipe implements PipeTransform {
+  transform(value: string | null): string {
+    if (!value) { return ''; }
+    return `${value.substr(0, 3)}-${value.substr(3)}`;
+  }
+}

tmp/src/app/book-monkey/{iteration-5/directives → iteration-6/modules}/books/shared/zoom.directive.ts RENAMED

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

+import { Directive, HostBinding, HostListener } from '@angular/core';
+@Directive({
+  selector: '[bmZoom]'
+})
+export class ZoomDirective {
+  @HostBinding('class.small') isZoomed: boolean = false;
+  @HostListener('mouseenter') onMouseEnter() {
+    this.isZoomed = true;
+  }
+  @HostListener('mouseleave') onMouseLeave() {
+    this.isZoomed = false;
+  }
+}