BookMonkey 4 Diff

Files changed (11) hide show

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/app.module.ts +16 -3
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/book-details/book-details.component.html +8 -4
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/book-form/book-form.component.ts +1 -2
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/book-list/book-list.component.html +15 -8
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/book-list/book-list.component.ts +6 -5
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/book-list-item/book-list-item.component.html +3 -2
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/form-messages/form-messages.component.ts +1 -0
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/shared/book-validators.ts +0 -1
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/shared/delay.directive.ts +20 -0
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/shared/isbn.pipe.ts +12 -0
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/shared/zoom.directive.ts +15 -0

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/app.module.ts RENAMED

@@ -1,8 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
 import { DateValueAccessorModule } from 'angular-date-value-accessor';
 import { AppRoutingModule } from './app-routing.module.one-app';
 import { AppComponent } from './app.component';
@@ -16,6 +18,9 @@
 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({
   declarations: [
@@ -29,6 +34,9 @@
     CreateBookComponent,
     FormMessagesComponent,
     EditBookComponent,
   ],
   imports: [
     CommonModule,
@@ -38,8 +46,13 @@
     DateValueAccessorModule
   ],
   providers: [
-    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule { }

 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 { 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: [
     CreateBookComponent,
     FormMessagesComponent,
     EditBookComponent,
+    IsbnPipe,
+    ZoomDirective,
+    DelayDirective
   ],
   imports: [
     CommonModule,
     DateValueAccessorModule
   ],
   providers: [
+    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
+    { provide: LOCALE_ID, useValue: 'de' }
   ],
   bootstrap: [AppComponent]
 })
+export class AppModule {
+  constructor() {
+    registerLocaleData(localeDe);
+  }
+}

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/book-details/book-details.component.html RENAMED

@@ -11,16 +11,20 @@
     </div>
     <div class="four wide column">
       <h4>ISBN</h4>
-      {{ book.isbn }}
     </div>
     <div class="four wide column">
       <h4>Erschienen</h4>
-      {{ book.published }}
     </div>
     <div class="four wide column" *ngIf="book.rating">
       <h4>Rating</h4>
-      <i class="yellow star icon"
-        *ngFor="let r of getRating(book.rating)"></i>
     </div>
   </div>
   <h4>Beschreibung</h4>

     </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>

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/book-form/book-form.component.ts RENAMED

@@ -15,7 +15,6 @@
   bookForm: FormGroup;
   @Input() book?: Book;
   @Input() set editing(isEditing: boolean) {
     const isbnControl = this.bookForm.get('isbn')!;
     if (isEditing) {
@@ -51,7 +50,7 @@
     });
   }
-  ngOnInit(): void { }
   ngOnChanges() {
     if (this.book) {

   bookForm: FormGroup;
   @Input() book?: Book;
   @Input() set editing(isEditing: boolean) {
     const isbnControl = this.bookForm.get('isbn')!;
     if (isEditing) {
     });
   }
+  ngOnInit(): void {}
   ngOnChanges() {
     if (this.book) {

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/book-list/book-list.component.html RENAMED

@@ -1,12 +1,19 @@
 <div class="ui middle aligned selection divided list">
-  <bm-book-list-item class="item"
-    *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>

 <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-4/custom-validation → iteration-5/directives}/book-list/book-list.component.ts RENAMED

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { Book } from '../shared/book';
 import { BookStoreService } from '../shared/book-store.service';
@@ -9,11 +10,11 @@
   styleUrls: ['./book-list.component.css']
 })
 export class BookListComponent implements OnInit {
-  books: Book[] = [];
-  constructor(private bs: BookStoreService) { }
-  ngOnInit(): void {
-    this.bs.getAll().subscribe(res => this.books = res);
   }
 }

 import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
 import { Book } from '../shared/book';
 import { BookStoreService } from '../shared/book-store.service';
   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-4/custom-validation → iteration-5/directives}/book-list-item/book-list-item.component.html RENAMED

@@ -1,7 +1,8 @@
 <ng-container *ngIf="book">
   <img class="ui tiny image"
       *ngIf="book.thumbnails && book.thumbnails[0] && book.thumbnails[0].url"
-      [src]="book.thumbnails[0].url">
   <div class="content">
     <div class="header">{{ book.title }}</div>
     <div *ngIf="book.subtitle" class="description">{{ book.subtitle }}</div>
@@ -10,7 +11,7 @@
         {{ author }}<span *ngIf="!l">, </span>
       </span>
       <br>
-      ISBN {{ book.isbn }}
     </div>
   </div>
 </ng-container>

 <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>
         {{ author }}<span *ngIf="!l">, </span>
       </span>
       <br>
+      ISBN {{ book.isbn | isbn }}
     </div>
   </div>
 </ng-container>

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/form-messages/form-messages.component.ts RENAMED

@@ -11,6 +11,7 @@
   @Input() control?: AbstractControl | null;
   @Input() controlName?: string;
   private allMessages: { [key: string]: { [key: string]: string } } = {
     title: {
       required: 'Ein Buchtitel muss angegeben werden.'

   @Input() control?: AbstractControl | null;
   @Input() controlName?: string;
   private allMessages: { [key: string]: { [key: string]: string } } = {
     title: {
       required: 'Ein Buchtitel muss angegeben werden.'

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/shared/book-validators.ts RENAMED

@@ -17,7 +17,6 @@
     }
   }
   static atLeastOneAuthor(controlArray: AbstractControl): ValidationErrors | null {
     if ((controlArray as FormArray).controls.some((el: AbstractControl) => el.value)) {
       return null;

     }
   }
   static atLeastOneAuthor(controlArray: AbstractControl): ValidationErrors | null {
     if ((controlArray as FormArray).controls.some((el: AbstractControl) => el.value)) {
       return null;

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/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-4/custom-validation → iteration-5/directives}/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-4/custom-validation → iteration-5/directives}/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;
+  }
+}