BookMonkey 3 Diff

Files changed (11) hide show

tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/app-routing.module.ts +5 -0
tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/app.module.ts +5 -3
tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/book-details/book-details.component.html +4 -0
tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/book-form/book-form.component.html +42 -50
tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/book-form/book-form.component.ts +95 -13
tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/create-book/create-book.component.html +2 -2
tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/create-book/create-book.component.ts +1 -0
tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/edit-book/edit-book.component.html +8 -0
tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/edit-book/edit-book.component.ts +37 -0
tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/shared/book-factory.ts +0 -15
tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/shared/book-store.service.ts +10 -0

tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/app-routing.module.ts RENAMED

@@ -5,6 +5,7 @@
 import { BookListComponent } from './book-list/book-list.component';
 import { BookDetailsComponent } from './book-details/book-details.component';
 import { CreateBookComponent } from './create-book/create-book.component';
 export const routes: Routes = [
   {
@@ -32,6 +33,10 @@
   {
     path: 'admin/create',
     component: CreateBookComponent
   }
 ];

 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: 'admin/create',
     component: CreateBookComponent
+  },
+  {
+    path: 'admin/edit/:isbn',
+    component: EditBookComponent
   }
 ];

tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/app.module.ts RENAMED

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { FormsModule } from '@angular/forms';
 import { DateValueAccessorModule } from 'angular-date-value-accessor';
 import { AppRoutingModule } from './app-routing.module.one-app';
@@ -15,6 +15,7 @@
 import { BookFormComponent } from './book-form/book-form.component';
 import { CreateBookComponent } from './create-book/create-book.component';
 import { FormMessagesComponent } from './form-messages/form-messages.component';
 @NgModule({
   declarations: [
@@ -26,13 +27,14 @@
     SearchComponent,
     BookFormComponent,
     CreateBookComponent,
-    FormMessagesComponent
   ],
   imports: [
     CommonModule,
     HttpClientModule,
     AppRoutingModule,
-    FormsModule,
     DateValueAccessorModule
   ],
   providers: [

 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 { 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: [
     SearchComponent,
     BookFormComponent,
     CreateBookComponent,
+    FormMessagesComponent,
+    EditBookComponent,
   ],
   imports: [
     CommonModule,
     HttpClientModule,
     AppRoutingModule,
+    ReactiveFormsModule,
     DateValueAccessorModule
   ],
   providers: [

tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/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-4/{template-driven-forms → reactive-forms}/book-form/book-form.component.html RENAMED

@@ -1,78 +1,70 @@
 <form class="ui form"
-      (ngSubmit)="submitForm()"
-      #bookForm="ngForm">
   <label>Buchtitel</label>
-  <input
-    name="title"
-    [(ngModel)]="book.title"
-    required
-    #titleInput="ngModel">
   <bm-form-messages
-    [control]="titleInput"
     controlName="title">
   </bm-form-messages>
   <label>Untertitel</label>
-  <input
-    name="subtitle"
-    [(ngModel)]="book.subtitle">
   <label>ISBN</label>
-  <input
-    name="isbn"
-    [(ngModel)]="book.isbn"
-    required
-    minlength="10"
-    maxlength="13"
-    #isbnInput="ngModel">
   <bm-form-messages
-    [control]="isbnInput"
     controlName="isbn">
   </bm-form-messages>
   <label>Erscheinungsdatum</label>
-  <input
-    type="date"
-    name="published"
-    [(ngModel)]="book.published"
     useValueAsDate
-    required
-    #dateInput="ngModel">
   <bm-form-messages
-    [control]="dateInput"
     controlName="published">
   </bm-form-messages>
-  <label>Autor</label>
-  <input
-    name="authors"
-    [(ngModel)]="book.authors[0]"
-    required
-    #authorInput="ngModel">
   <bm-form-messages
-    [control]="authorInput"
     controlName="authors">
   </bm-form-messages>
   <label>Beschreibung</label>
-  <textarea
-    name="description"
-    [(ngModel)]="book.description"></textarea>
-            -
-  <label>Bild</label>
-  <div class="two fields">
-    <div class="field">
-      <input
-        name="url"
-        [(ngModel)]="book.thumbnails[0].url"
-        placeholder="URL">
-    </div>
-    <div class="field">
-      <input
-        name="title"
-        [(ngModel)]="book.thumbnails[0].title"
-        placeholder="Titel">
     </div>
   </div>

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

tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/book-form/book-form.component.ts RENAMED

@@ -1,29 +1,111 @@
-import { Component, ViewChild, OnInit, Output, EventEmitter } from '@angular/core';
-import { NgForm } from '@angular/forms';
-import { Book } from '../shared/book';
-import { BookFactory } from '../shared/book-factory';
 @Component({
   selector: 'bm-book-form',
   templateUrl: './book-form.component.html',
   styleUrls: ['./book-form.component.css']
 })
-export class BookFormComponent implements OnInit {
-  book = BookFactory.empty();
   @Output() submitBook = new EventEmitter<Book>();
-  @ViewChild('bookForm', { static: true }) bookForm: NgForm;
-  submitForm() {
-    this.submitBook.emit(this.book);
-    this.book = BookFactory.empty();
-    this.bookForm.reset();
   }
-  ngOnInit() {
   }
 }

+import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
+import { Book, Thumbnail } from '../shared/book';
 @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() editing = false;
   @Output() submitBook = new EventEmitter<Book>();
+  constructor(private fb: FormBuilder) { }
+  ngOnInit() {
+    this.initForm();
   }
+  ngOnChanges() {
+    this.initForm();
+    this.setFormValues(this.book);
+  }
+            +
+  private setFormValues(book: Book) {
+    this.bookForm.patchValue(book);
+            +
+    this.bookForm.setControl(
+      'authors',
+      this.buildAuthorsArray(book.authors)
+    );
+            +
+    this.bookForm.setControl(
+      'thumbnails',
+      this.buildThumbnailsArray(book.thumbnails)
+    );
+  }
+            +
+  private initForm() {
+    if (this.bookForm) { return; }
+            +
+    this.bookForm = this.fb.group({
+      title: ['', Validators.required],
+      subtitle: [''],
+      isbn: [{ value: '', disabled: this.editing }, [
+        Validators.required,
+        Validators.minLength(10),
+        Validators.maxLength(13)
+      ]],
+      description: [''],
+      authors: this.buildAuthorsArray(['']),
+      thumbnails: this.buildThumbnailsArray([
+        { title: '', url: '' }
+      ]),
+      published: []
+    });
+  }
+            +
+  private buildAuthorsArray(values: string[]): FormArray {
+    return this.fb.array(values, Validators.required);
+  }
+            +
+  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 => author);
+    const thumbnails = formValue.thumbnails
+              .filter(thumbnail => thumbnail.url);
+            +
+    const isbn = this.editing ? 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-4/{template-driven-forms → reactive-forms}/create-book/create-book.component.html RENAMED

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

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

tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/create-book/create-book.component.ts RENAMED

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Book } from '../shared/book';
 import { BookStoreService } from '../shared/book-store.service';

 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';

tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/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-4/{template-driven-forms → reactive-forms}/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() {
+    this.route.paramMap.pipe(
+      map(params => params.get('isbn')),
+      switchMap((isbn: string) => 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-4/{template-driven-forms → reactive-forms}/shared/book-factory.ts RENAMED

@@ -3,21 +3,6 @@
 export class BookFactory {
-  static empty(): Book {
-    return {
-      isbn: '',
-      title: '',
-      authors: [''],
-      published: new Date(),
-      subtitle: '',
-      rating: 0,
-      thumbnails: [
-        { url: '', title: '' }
-      ],
-      description: ''
-    };
-  }
-            -
   static fromRaw(b: BookRaw): Book {
     return {
       ...b,

 export class BookFactory {
   static fromRaw(b: BookRaw): Book {
     return {
       ...b,

tmp/src/app/book-monkey/iteration-4/{template-driven-forms → reactive-forms}/shared/book-store.service.ts RENAMED

@@ -46,6 +46,16 @@
     );
   }
   remove(isbn: string): Observable<any> {
     return this.http.delete(
       `${this.api}/book/${isbn}`,

     );
   }
+  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}`,