Merge pull request #12 from GaProgMan/net-core-2-0

Fixes #3 - Added Series Profile page

Author: GaProgMan

Angular2/ClientApp/app/app.module.shared.ts

@@ -11,6 +11,7 @@ import { BooksComponent } from './components/books/books.component';
 import { CharacterComponent} from "./components/characters/characters.component";
 import { SeriesComponent } from "./components/series/series.component";
 import { BookProfileComponent } from "./components/bookProfile/bookProfile.component";
+import { SeriesProfileComponent} from "./components/seriesProfile/seriesProfile.component";
 
 @NgModule({
     declarations: [
@@ -20,7 +21,8 @@ import { BookProfileComponent } from "./components/bookProfile/bookProfile.compo
         BooksComponent,
         CharacterComponent,
         SeriesComponent,
-        BookProfileComponent
+        BookProfileComponent,
+        SeriesProfileComponent
     ],
     imports: [
         CommonModule,
@@ -33,6 +35,7 @@ import { BookProfileComponent } from "./components/bookProfile/bookProfile.compo
             { path: 'characters', component: CharacterComponent },
             { path: 'series', component: SeriesComponent },
             { path: 'bookProfile/:id' , component: BookProfileComponent },
+            { path: 'seriesProfile/:id', component: SeriesProfileComponent },
             { path: '**', redirectTo: 'about' }
         ])
     ]

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

@@ -20,7 +20,11 @@ <h1>Series Search</h1>
         </thead>
         <tbody>
         <tr *ngFor="let ser of series">
-            <td colspan="2">{{ ser.seriesName }}</td>
+            <td colspan="2">
+                <a [routerLink]="['/seriesProfile', ser.seriesId]">
+                    {{ ser.seriesName }}
+                </a>
+            </td>
             <td>{{ ser.booksAsString() }}</td>
         </tr>
         </tbody>

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

@@ -38,7 +38,7 @@ export class SeriesComponent {
                 if(resultJson.success) {
                     this.series = [];
                     result.json().result.forEach((series:ApiSeries) => {
-                        this.series.push(new Series(series.seriesName, series.bookNames));
+                        this.series.push(new Series(series.seriesId, series.seriesName, series.bookNames));
                     });
                 }
                 this.success = resultJson.success;
@@ -48,7 +48,8 @@ export class SeriesComponent {
     }
 }
 
-interface ApiSeries{
+interface ApiSeries {
+    seriesId: number;
     seriesName: string;
     bookNames: string[];
 }

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

@@ -0,0 +1,23 @@
+<div class="loader" *ngIf="loading">
+    <p>Searching, please wait</p>
+</div>
+
+<div *ngIf="!loading && success && books">
+    <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.bookCoverImageUrl}}" class="img-responsive"/>
+            </div>
+            <div class="col-xs-9">
+                <p>{{ book.bookDescription }}</p>
+            </div>
+        </div>
+        <hr />
+    </div>
+    
+    <hr />
+</div>

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

@@ -0,0 +1,55 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ActivatedRoute } from "@angular/router";
+import { Http } from '@angular/http';
+import { ResultJson } from "../../models/ResultJson";
+import { BookBaseViewModel } from "../../models/Book";
+
+@Component({
+    selector: 'seriesProfile',
+    templateUrl: './seriesProfile.component.html'
+})
+
+export class SeriesProfileComponent implements OnInit, OnDestroy {
+    constructor(private route: ActivatedRoute, public http: Http) {
+    }
+
+    loading = false;
+    success = true;
+    baseApiUrl = 'http://dwcheckapi.azurewebsites.net/Books/Series';
+    seriesId: number;
+    books: BookBaseViewModel[];
+    
+    
+    private subscription: any;
+
+    ngOnInit() {
+        this.subscription = this.route.params.subscribe(params => {
+            this.seriesId = +params['id']; // the + here converts a string to a number
+
+            var route = `${this.baseApiUrl}/${this.seriesId}`;
+
+            this.http.get(route).subscribe((result) => {
+                var resultJson = result.json() as ResultJson;
+                debugger;
+                if (resultJson.success) {
+                    this.books = [];
+                    result.json().result.forEach((serverBook: ApiBookBaseViewModel) => {
+                        this.books.push(new BookBaseViewModel(serverBook.bookDescription, serverBook.bookCoverImageUrl));
+                    });
+                }
+                this.success = resultJson.success;
+                this.loading = false;
+            });
+        });
+    }
+
+
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+}
+
+interface ApiBookBaseViewModel {
+    bookCoverImageUrl: string;
+    bookDescription: string;
+}

Angular2/ClientApp/app/models/Book.ts

@@ -1,13 +1,23 @@
-export class Book {
+export class BookBaseViewModel {
+    constructor(bookDescription: string, bookCoverImageUrl: string){
+        this.bookDescription = bookDescription;
+        this.bookCoverImageUrl = bookCoverImageUrl;
+    }
+
+    bookDescription: string;
+    bookCoverImageUrl: string;
+}
+
+export class Book extends BookBaseViewModel {
     constructor(bookOrdinal: number, bookName: string, bookIsbn10: string,
                 bookIsbn13: string,  bookDescription: string, bookCoverImageUrl: string,
-                characters: string[], series: string[]){
+                characters: string[], series: string[]) {
+        super(bookDescription, bookCoverImageUrl);
+        
         this.bookOrdinal = bookOrdinal;
         this.bookName = bookName;
         this.bookIsbn10 = bookIsbn10;
         this.bookIsbn13 = bookIsbn13;
-        this.bookDescription = bookDescription;
-        this.bookCoverImageUrl = bookCoverImageUrl;
         this.characters = characters;
         this.series = series;
 

Angular2/ClientApp/app/models/Series.ts

@@ -1,10 +1,12 @@
 export class Series {
-    constructor(seriesName: string, books: string[]){
+    constructor(seriesId: number,  seriesName: string, books: string[]) {
+        this.seriesId = seriesId;
         this.seriesName = seriesName;
         this.books = books;
 
         this.registerFunctions();
     }
+    seriesId: number;
     seriesName: string;
     books: string[];
     booksAsString: () => string;