Fixes #4 and fixes #5

Enter key now performs the search across all screens;
Fixed “No results” text on Character and Series screens

Author: GaProgMan

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

@@ -2,7 +2,7 @@ <h1>Book Search</h1>
 
 <div class="row">
     <div class="col-xs-12">
-        <input [value]="searchString" (input)="searchString = $event.target.value"/>
+        <input [value]="searchString" (input)="searchString = $event.target.value" (keyup.enter)="getDwBook()"/>
         <button (click)="getDwBook()">Search</button>
     </div>
 </div>
@@ -11,7 +11,7 @@ <h1>Book Search</h1>
     <p>Searching, please wait</p>
 </div>
 
-<div class="table-responsive" *ngIf="!loading && books">
+<div class="table-responsive" *ngIf="!loading && success && books">
     <table class='table'>
         <thead>
             <tr>
@@ -32,4 +32,10 @@ <h1>Book Search</h1>
             </tr>
         </tbody>
     </table>
+</div>
+
+<div class="row" *ngIf="!loading && !success">
+    <div class="col-xs-12">
+        No results found
+    </div>
 </div>

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

@@ -12,6 +12,7 @@ export class BooksComponent {
         this.http = http;
 
         this.loading = false;
+        this.success = true;
         this.baseApiUrl =  'http://dwcheckapi.azurewebsites.net/Books/Search?searchString=';
         this.books = null;
         this.registerFunctions();
@@ -43,6 +44,7 @@ export class BooksComponent {
                                 element.bookCoverImageUrl));
                     });
                 }
+                this.success = resultJson.success;
                 this.loading = false;
             });
         }

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

@@ -2,16 +2,16 @@ <h1>Character Search</h1>
 
 <div class="row">
     <div class="col-xs-12">
-        <input [value]="searchString" (input)="searchString = $event.target.value"/>
+        <input [value]="searchString" (input)="searchString = $event.target.value" (keyup.enter)="getDwCharacter()"/>
         <button (click)="getDwCharacter()">Search</button>
     </div>
 </div>
 
-<div class="loader" *ngIf="!success">
-    <p>Could not find any results</p>
+<div class="loader" *ngIf="loading">
+    <p>Searching, please wait</p>
 </div>
 
-<div class="table-responsive" *ngIf="success">
+<div class="table-responsive" *ngIf="!loading && success && characters">
     <table class='table' *ngIf="characters">
         <thead>
             <tr>
@@ -26,4 +26,10 @@ <h1>Character Search</h1>
             </tr>
         </tbody>
     </table>
+</div>
+
+<div class="row" *ngIf="!loading && !success">
+    <div class="col-xs-12">
+        No results found
+    </div>
 </div>

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

@@ -20,8 +20,8 @@ export class CharacterComponent {
     private http: Http;
 
     // public bound vars
-    success: boolean;
     loading: boolean;
+    success: boolean;
     baseApiUrl: string;
     searchString = '';
     characters: ICharacter[];
@@ -31,17 +31,18 @@ export class CharacterComponent {
 
     private registerFunctions() {
         this.getDwCharacter = () => {
-            this.success = false;
             var route = `${this.baseApiUrl}${this.searchString}`;
+            this.loading = true;
             this.http.get(route).subscribe((result) => {
                 var resultJson = result.json() as IResultJson;
                 if(resultJson.success) {
-                    this.success = true;
                     this.characters = new Array<ICharacter>();
                     result.json().result.forEach(element => {
                         this.characters.push(new Character(element.characterName, element.books));
                     });
                 }
+                this.success = resultJson.success;
+                this.loading = false;
             });
         }
     }

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

@@ -1,14 +1,16 @@
 <h1>Series Search</h1>
 <div class="row">
     <div class="col-xs-12">
-        <input [value]="searchString" (input)="searchString = $event.target.value" />
+        <input [value]="searchString" (input)="searchString = $event.target.value" (keyup.enter)="getDwSeries()"/>
         <button (click)="getDwSeries()">Search</button>
     </div>
 </div>
-<div class="loader" *ngIf="!success">
-    <p>Could not find any results</p>
+
+<div class="loader" *ngIf="loading">
+    <p>Searching, please wait</p>
 </div>
-<div class="table-responsive" *ngIf="success">
+
+<div class="table-responsive" *ngIf="!loading && success && series">
     <table class='table' *ngIf="series">
         <thead>
             <tr>
@@ -23,4 +25,10 @@
             </tr>
         </tbody>
     </table>
+</div>
+
+<div class="row" *ngIf="!loading && !success">
+    <div class="col-xs-12">
+        No results found
+    </div>
 </div>

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

@@ -13,7 +13,7 @@ export class SeriesComponent {
 
         this.success = true;
         this.loading = false;
-        this.baseApiUrl =  'http://dwcheckapi.azurewebsites.net/series/search?searchString';
+        this.baseApiUrl =  'http://dwcheckapi.azurewebsites.net/series/search?searchString=';
         this.registerFunctions();
     }
     // private vars
@@ -31,17 +31,18 @@ export class SeriesComponent {
 
     private registerFunctions() {
         this.getDwSeries = () => {
-            this.success = false;
             var route = `${this.baseApiUrl}${this.searchString}`;
+            this.loading = true;
             this.http.get(route).subscribe((result) => {
                 var resultJson = result.json() as IResultJson;
                 if(resultJson.success) {
-                    this.success = true;
                     this.series = new Array<ISeries>();
                     result.json().result.forEach(element => {
                         this.series.push(new Series(element.seriesName, element.bookNames));
                     });
                 }
+                this.success = resultJson.success;
+                this.loading = false;
             });
         }
     }