Moved bookName and bookOrdinal fields to base view model

Author: GaProgMan

Angular2/ClientApp/app/components/seriesProfile/seriesProfile.component.html

@@ -4,15 +4,14 @@
 
 <div *ngIf="!loading && success && hasBooks">
     <div class="row" *ngFor="let book of books">
-        <div class="col-xs-12">
-            <h1>{{ book.bookName }}</h1>
-        </div>
-    
         <div class="row">
             <div class="col-xs-3">
                 <img src="{{ book.imageTag() }}" class="img-responsive"/>
             </div>
             <div class="col-xs-9">
+                <h2>
+                    <a [routerLink]="['/bookProfile', book.bookOrdinal]">{{ book.bookName }}</a>
+                </h2>
                 <p>{{ book.bookDescription }}</p>
             </div>
         </div>

Angular2/ClientApp/app/components/seriesProfile/seriesProfile.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute } from "@angular/router";
 import { Http } from '@angular/http';
 import { ResultJson } from "../../models/ResultJson";
 import { BookBaseViewModel } from "../../models/Book";
-import {ImageViewModel} from "../../models/Image";
+import { ImageViewModel } from "../../models/Image";
 
 @Component({
     selector: 'seriesProfile',
@@ -21,7 +21,6 @@ export class SeriesProfileComponent implements OnInit, OnDestroy {
     hasBooks = false;
     books: BookBaseViewModel[];
 
-    
     private subscription: any;
 
     ngOnInit() {
@@ -36,10 +35,9 @@ export class SeriesProfileComponent implements OnInit, OnDestroy {
                     this.books = [];
                     result.json().result.forEach((serverBook: ApiBookBaseViewModel) => {
                         let newData = new BookBaseViewModel(serverBook.bookId,
-                            serverBook.bookDescription);
-                        newData.coverData = new ImageViewModel(
-                            serverBook.bookCoverImage, serverBook.bookImageIsBase64String
-                        );
+                            serverBook.bookDescription, serverBook.bookName,
+                            serverBook.bookOrdinal);
+                        this.getBookImageData(newData);
                         this.books.push(newData);
                     });
                 }
@@ -51,15 +49,29 @@ export class SeriesProfileComponent implements OnInit, OnDestroy {
         });
     }
 
-
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
+
+    private getBookImageData = (book: BookBaseViewModel) => {
+        let route = `http://dwcheckapi.azurewebsites.net/Books/GetBookCover/${book.bookId}`;
+        this.http.get(route).subscribe((result) => {
+            let resultJson = result.json() as ResultJson;
+            if (resultJson.success) {
+                let serverData = result.json().result;
+                book.coverData = new ImageViewModel(
+                    serverData.bookCoverImage, serverData.bookImageIsBase64String
+                );
+            }
+        });
+    }
 
 }
 
 interface ApiBookBaseViewModel {
     bookId: number;
+    bookOrdinal: number;
+    bookName: string;
     bookCoverImage: string;
     bookImageIsBase64String: boolean;
     bookDescription: string;

Angular2/ClientApp/app/models/Book.ts

@@ -1,13 +1,17 @@
 import { ImageViewModel } from "./Image";
 
 export class BookBaseViewModel {
-    constructor(bookId: number, bookDescription: string) {
+    constructor(bookId: number, bookDescription: string, bookName: string, bookOrdinal: number) {
         this.bookId = bookId;
         this.bookDescription = bookDescription;
+        this.bookName = bookName;
+        this.bookOrdinal = bookOrdinal;
     }
 
     bookId: number;
     bookDescription: string;
+    bookOrdinal: number;
+    bookName: string;
     coverData: ImageViewModel;
 
     imageTag = (): string => {
@@ -23,11 +27,8 @@ export class Book extends BookBaseViewModel {
     constructor(bookId: number, bookOrdinal: number, bookName: string, bookIsbn10: string,
                 bookIsbn13: string,  bookDescription: string, characters: string[],
                 series: string[]) {
+        super(bookId, bookDescription, bookName, bookOrdinal);
 
-        super(bookId, bookDescription);
-        
-        this.bookOrdinal = bookOrdinal;
-        this.bookName = bookName;
         this.bookIsbn10 = bookIsbn10;
         this.bookIsbn13 = bookIsbn13;
         this.characters = characters;