improve UI, show empty results

Author: pigr2

app/app.component.ts

@@ -19,15 +19,22 @@ const storeManager = provideStore({ currentSearch: SearchReducer });
         <h1>{{title}}</h1>
         <div class="row col-md-8">
             <search-box [store]="store"></search-box>
-            <proximity-selector [store]="store"></proximity-selector>
+            <proximity-selector [store]="store" [disabled]="disableSearch"
+                [ngClass]="{ disabled: disableSearch }"></proximity-selector>
+        </div>
+        <div class="row col-md-8 alert alert-danger" *ngIf="disableSearch">
+            <p>Can't use geolocalization with an empty searchbox</p>
         </div>
         <div class="row col-md-8">
             <p>
                 Try to type something in the searchbox, play with the location and with radius: the above state will
                 always be consistent and up to date.
             </p>
-            <p>{{ state | json }}</p>
+            <p class="state">{{ state | json }}</p>
+            <p class="state" *ngIf="disableSearch">{ }</p>
         </div>
+        <h2 *ngIf="!disableSearch">Search results:</h2>
+        <h2 *ngIf="disableSearch || searchResults.length == 0">No results</h2>
         <div class="row col-md-8">
             <div *ngFor="let result of searchResults" class="thumbnail col-sm-6 col-md-4">
                 <div class="caption">
@@ -45,9 +52,9 @@ export class AppComponent implements OnInit {
     title = 'One Source of Truth for Angular 2';
 
     private state: CurrentSearch;
-
     private currentSearch: Observable<CurrentSearch>;
     private searchResults: SearchResult[] = [];
+    private disableSearch = false;
 
     constructor(
         private store: Store<CurrentSearch>,
@@ -61,8 +68,10 @@ export class AppComponent implements OnInit {
         this.currentSearch.subscribe((state: CurrentSearch) => {
             this.state = state;
             if (state && state.name && state.name.length > 0) {
+                this.disableSearch = false;
                 this.youtube.search(state)
             } else {
+                this.disableSearch = true;
                 this.searchResults = [];
             }
         });

app/components/proximity-selector.component.ts

@@ -3,7 +3,7 @@ import {Store} from '@ngrx/store';
 
 @Component({
     selector: 'proximity-selector',
-    inputs: ['store'],
+    inputs: ['store', 'disabled'],
     template: `
     <div class="input-group">
         <label for="useLocation">Use current location</label>
@@ -14,7 +14,7 @@ import {Store} from '@ngrx/store';
     <div class="input-group">
         <label for="locationRadius">Radius</label>
         <input type="range" min="1" max="100" value="50"
-            [disabled]="!active"
+            [disabled]="!active || disabled"
             (change)="onRadius($event)">
     </div>
     `
@@ -31,6 +31,9 @@ export class ProximitySelector {
     @Input()
     store: Store<any>;
 
+    @Input()
+    disabled: boolean;
+
     active = false;
 
     onLocation($event: any) {

index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <link href="app/styles.css" rel="stylesheet">
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>