BookMonkey 4 Diff

Files changed (16) hide show

tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/app-routing.module.ts +15 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/app.component.html +1 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/app.module.ts +14 -2
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/book-details/book-details.component.html +4 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/book-form/book-form.component.html +75 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/book-form/book-form.component.ts +125 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/create-book/create-book.component.html +3 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/create-book/create-book.component.ts +29 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/edit-book/edit-book.component.html +8 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/edit-book/edit-book.component.ts +37 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/form-messages/form-messages.component.html +4 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/form-messages/form-messages.component.ts +51 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/shared/book-exists-validator.service.ts +25 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/shared/book-factory.ts +1 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/shared/book-store.service.ts +28 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/shared/book-validators.ts +31 -0

tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/app-routing.module.ts RENAMED

@@ -4,6 +4,8 @@
 import { HomeComponent } from './home/home.component';
 import { BookListComponent } from './book-list/book-list.component';
 import { BookDetailsComponent } from './book-details/book-details.component';
 export const routes: Routes = [
   {
@@ -22,6 +24,19 @@
   {
     path: 'books/:isbn',
     component: BookDetailsComponent
   }
 ];

 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 = [
   {
   {
     path: 'books/:isbn',
     component: BookDetailsComponent
+  },
+  {
+    path: 'admin',
+    redirectTo: 'admin/create',
+    pathMatch: 'full'
+  },
+  {
+    path: 'admin/create',
+    component: CreateBookComponent
+  },
+  {
+    path: 'admin/edit/:isbn',
+    component: EditBookComponent
   }
 ];

tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/app.component.html RENAMED

@@ -1,5 +1,6 @@
 <div class="ui menu">
   <a routerLink="home"  routerLinkActive="active" class="item">Home</a>
   <a routerLink="books" routerLinkActive="active" class="item">Bücher</a>
 </div>
 <router-outlet></router-outlet>

 <div class="ui menu">
   <a routerLink="home"  routerLinkActive="active" class="item">Home</a>
   <a routerLink="books" routerLinkActive="active" class="item">Bücher</a>
+  <a routerLink="admin" routerLinkActive="active" class="item">Administration</a>
 </div>
 <router-outlet></router-outlet>

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

@@ -1,6 +1,8 @@
 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';
@@ -10,6 +12,10 @@
 import { BookDetailsComponent } from './book-details/book-details.component';
 import { SearchComponent } from './search/search.component';
 import { TokenInterceptor } from './shared/token.interceptor';
 @NgModule({
   declarations: [
@@ -18,12 +24,18 @@
     BookListComponent,
     BookListItemComponent,
     BookDetailsComponent,
-    SearchComponent
   ],
   imports: [
     CommonModule,
     HttpClientModule,
-    AppRoutingModule
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }

 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';
 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';
 @NgModule({
   declarations: [
     BookListComponent,
     BookListItemComponent,
     BookDetailsComponent,
+    SearchComponent,
+    BookFormComponent,
+    CreateBookComponent,
+    FormMessagesComponent,
+    EditBookComponent,
   ],
   imports: [
     CommonModule,
     HttpClientModule,
+    AppRoutingModule,
+    ReactiveFormsModule,
+    DateValueAccessorModule
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }

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

@@ -33,6 +33,10 @@
           (click)="removeBook()">
     <i class="remove icon"></i> Buch löschen
   </button>
 </div>
 <ng-template #loading>

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

tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/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-3/interceptors → iteration-4/custom-validation}/book-form/book-form.component.ts RENAMED

	@@ -0,0 +1,125 @@

+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-3/interceptors → iteration-4/custom-validation}/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-3/interceptors → iteration-4/custom-validation}/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-3/interceptors → iteration-4/custom-validation}/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-3/interceptors → iteration-4/custom-validation}/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-3/interceptors → iteration-4/custom-validation}/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-3/interceptors → iteration-4/custom-validation}/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-3/interceptors → iteration-4/custom-validation}/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 './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-3/interceptors → iteration-4/custom-validation}/shared/book-factory.ts RENAMED

@@ -2,6 +2,7 @@
 import { BookRaw } from './book-raw';
 export class BookFactory {
   static fromRaw(b: BookRaw): Book {
     return {
       ...b,

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

tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/custom-validation}/shared/book-store.service.ts RENAMED

@@ -36,6 +36,26 @@
     );
   }
   remove(isbn: string): Observable<any> {
     return this.http.delete(
       `${this.api}/book/${isbn}`,
@@ -56,6 +76,14 @@
       catchError(this.errorHandler)
     );
   }
   private errorHandler(error: HttpErrorResponse): Observable<any> {
     console.error('Fehler aufgetreten!');

     );
   }
+  create(book: Book): Observable<any> {
+    return this.http.post(
+      `${this.api}/book`,
+      book,
+      { responseType: 'text' }
+    ).pipe(
+      catchError(this.errorHandler)
+    );
+  }
+  update(book: Book): Observable<any> {
+    return this.http.put(
+      `${this.api}/book/${book.isbn}`,
+      book,
+      { responseType: 'text' }
+    ).pipe(
+      catchError(this.errorHandler)
+    );
+  }
   remove(isbn: string): Observable<any> {
     return this.http.delete(
       `${this.api}/book/${isbn}`,
       catchError(this.errorHandler)
     );
   }
+  check(isbn: string): Observable<boolean> {
+    return this.http.get<boolean>(
+      `${this.api}/book/${isbn}/check`
+    ).pipe(
+      catchError(this.errorHandler)
+    );
+  }
   private errorHandler(error: HttpErrorResponse): Observable<any> {
     console.error('Fehler aufgetreten!');

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

	@@ -0,0 +1,31 @@

+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 }
+      };
+    }
+  }
+}