BookMonkey 4 Diff

Files changed (11) hide show

tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/template-driven-forms}/app-routing.module.ts +10 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/template-driven-forms}/app.component.html +1 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/template-driven-forms}/app.module.ts +12 -2
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/template-driven-forms}/book-form/book-form.component.html +85 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/template-driven-forms}/book-form/book-form.component.ts +30 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/template-driven-forms}/create-book/create-book.component.html +3 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/template-driven-forms}/create-book/create-book.component.ts +29 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/template-driven-forms}/form-messages/form-messages.component.html +4 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/template-driven-forms}/form-messages/form-messages.component.ts +52 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/template-driven-forms}/shared/book-factory.ts +16 -0
tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/template-driven-forms}/shared/book-store.service.ts +10 -0

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

@@ -4,6 +4,7 @@
 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 +23,15 @@
   {
     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';
 export const routes: Routes = [
   {
   {
     path: 'books/:isbn',
     component: BookDetailsComponent
+  },
+  {
+    path: 'admin',
+    redirectTo: 'admin/create',
+    pathMatch: 'full'
+  },
+  {
+    path: 'admin/create',
+    component: CreateBookComponent
   }
 ];

tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/template-driven-forms}/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/template-driven-forms}/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,9 @@
 import { BookDetailsComponent } from './book-details/book-details.component';
 import { SearchComponent } from './search/search.component';
 import { TokenInterceptor } from './shared/token.interceptor';
 @NgModule({
   declarations: [
@@ -18,12 +23,17 @@
     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 { FormsModule } 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';
 @NgModule({
   declarations: [
     BookListComponent,
     BookListItemComponent,
     BookDetailsComponent,
+    SearchComponent,
+    BookFormComponent,
+    CreateBookComponent,
+    FormMessagesComponent
   ],
   imports: [
     CommonModule,
     HttpClientModule,
+    AppRoutingModule,
+    FormsModule,
+    DateValueAccessorModule
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }

tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/template-driven-forms}/book-form/book-form.component.html RENAMED

	@@ -0,0 +1,85 @@

+<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.control"
+    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.control"
+    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.control"
+    controlName="published">
+  </bm-form-messages>
+  <label>Autor</label>
+  <input
+    name="authors"
+    [(ngModel)]="book.authors[0]"
+    required
+    #authorInput="ngModel">
+  <bm-form-messages
+    [control]="authorInput.control"
+    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)]="$any(book).thumbnails[0].url"
+        placeholder="URL">
+    </div>
+    <div class="field">
+      <input
+        name="title"
+        [(ngModel)]="$any(book).thumbnails[0].title"
+        placeholder="Titel">
+    </div>
+  </div>
+  <button class="ui button" type="submit"
+    [disabled]="bookForm.invalid">
+    Speichern
+  </button>
+</form>

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

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

+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 }) form?: NgForm;
+  submitForm() {
+    this.submitBook.emit(this.book);
+    this.book = BookFactory.empty();
+    this.form?.reset();
+  }
+  ngOnInit(): void {
+  }
+}

tmp/src/app/book-monkey/{iteration-3/interceptors → iteration-4/template-driven-forms}/create-book/create-book.component.html RENAMED

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

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

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

	@@ -0,0 +1,52 @@

+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.',
+      minlength: 'Die ISBN muss mindestens 10 Zeichen haben.',
+      maxlength: 'Die ISBN darf höchstens 13 Zeichen haben.'
+    },
+    published: {
+      required: 'Es muss ein Erscheinungsdatum angegeben werden.'
+    },
+    authors: {
+      required: '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/template-driven-forms}/shared/book-factory.ts RENAMED

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

 import { BookRaw } from './book-raw';
 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,

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

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

     );
   }
+  create(book: Book): Observable<any> {
+    return this.http.post(
+      `${this.api}/book`,
+      book,
+      { responseType: 'text' }
+    ).pipe(
+      catchError(this.errorHandler)
+    );
+  }
   remove(isbn: string): Observable<any> {
     return this.http.delete(
       `${this.api}/book/${isbn}`,