Added search form in header to navigate routes

Change-Id: I5242fcf2c287ed60293e96a0befc8eaac3a38fdd
diff --git a/src/app/core/header/header.html b/src/app/core/header/header.html
index 0a90822..3a277e0 100644
--- a/src/app/core/header/header.html
+++ b/src/app/core/header/header.html
@@ -33,9 +33,16 @@
     </div>
     <div id="navbar" class="navbar-collapse collapse">
       <minimaliza-menu></minimaliza-menu>
-      <!--<form class="navbar-form navbar-left">-->
-        <!--<input type="text" class="form-control" placeholder="Search data for analysis" style="width: 175px">-->
-      <!--</form>-->
+      <form class="navbar-form navbar-left">
+        <input
+          type="text"
+          class="form-control"
+          placeholder="Search core models"
+          style="width: 275px"
+          ng-model="vm.query"
+          uib-typeahead="state.label for state in vm.states | filter:$viewValue | limitTo:8"
+          typeahead-on-select="vm.routeSelected($item, $model, $label)">
+      </form>
       <ul class="nav navbar-nav navbar-right">
         <!--<li class="dropdown">-->
           <!--<a ui-sref="main.versions">-->
diff --git a/src/app/core/header/header.scss b/src/app/core/header/header.scss
index a1be115..263740c 100644
--- a/src/app/core/header/header.scss
+++ b/src/app/core/header/header.scss
@@ -11,7 +11,7 @@
       position: absolute;
       right: 30px;
       bottom: 0;
-      color: #24262d;
+      color: lighten(#24262d, 40%);
     }
   }
 
diff --git a/src/app/core/header/header.spec.ts b/src/app/core/header/header.spec.ts
index c115a4e..864c5a4 100644
--- a/src/app/core/header/header.spec.ts
+++ b/src/app/core/header/header.spec.ts
@@ -45,12 +45,13 @@
 describe('header component', () => {
   beforeEach(() => {
     angular
-      .module('xosHeader', ['app/core/header/header.html'])
+      .module('xosHeader', ['app/core/header/header.html', 'ui.router'])
       .component('xosHeader', xosHeader)
       .service('SynchronizerStore', MockStore)
       .value('toastr', MockToastr)
       .value('toastrConfig', MockToastrConfig)
-      .value('AuthService', MockAuth);
+      .value('AuthService', MockAuth)
+      .value('NavigationService', {});
     angular.mock.module('xosHeader');
   });
 
diff --git a/src/app/core/header/header.ts b/src/app/core/header/header.ts
index 849767f..2aef872 100644
--- a/src/app/core/header/header.ts
+++ b/src/app/core/header/header.ts
@@ -3,24 +3,33 @@
 import {IWSEvent} from '../../datasources/websocket/global';
 import {IStoreService} from '../../datasources/stores/synchronizer.store';
 import {IXosAuthService} from '../../datasources/rest/auth.rest';
+import {IXosNavigationService, IXosNavigationRoute} from '../services/navigation';
+import {IStateService} from 'angular-ui-router';
+import * as _ from 'lodash';
+import * as $ from 'jquery';
 
 export interface INotification extends IWSEvent {
   viewed?: boolean;
 }
 
 class HeaderController {
-  static $inject = ['$scope', 'AuthService', 'SynchronizerStore', 'toastr', 'toastrConfig'];
+  static $inject = ['$scope', '$state', 'AuthService', 'SynchronizerStore', 'toastr', 'toastrConfig', 'NavigationService'];
   public notifications: INotification[] = [];
   public newNotifications: INotification[] = [];
   public version: string;
   public userEmail: string;
+  public routeSelected: (route: IXosNavigationRoute) => void;
+  public states: IXosNavigationRoute[];
+  public query: string;
 
   constructor(
     private $scope: angular.IScope,
+    private $state: IStateService,
     private authService: IXosAuthService,
     private syncStore: IStoreService,
     private toastr: ng.toastr.IToastrService,
-    private toastrConfig: ng.toastr.IToastrConfig
+    private toastrConfig: ng.toastr.IToastrConfig,
+    private NavigationService: IXosNavigationService
   ) {
     this.version = require('../../../../package.json').version;
     angular.extend(this.toastrConfig, {
@@ -35,6 +44,39 @@
       // tapToDismiss: false
     });
 
+    // TODO set a global event after routes have been loaded
+    window.setTimeout(() => {
+      this.states = this.NavigationService.query().reduce((list, state) => {
+        // if it does not have child (otherwise it is abstract)
+        if (!state.children || state.children.length === 0) {
+          list.push(state);
+        }
+        // else push child
+        if (state.children && state.children.length > 0) {
+          state.children.forEach(c => {
+            list.push(c);
+          });
+        }
+        return list;
+      }, []);
+      console.log(this.states.length);
+      this.states = _.uniqBy(this.states, 'state');
+      console.log(this.states.length);
+    }, 500);
+
+    // listen for keypress
+    $(document).on('keyup', (e) => {
+      if (e.key === 'f') {
+        $('.navbar-form input').focus();
+      }
+    });
+
+    // redirect to selected page
+    this.routeSelected = (item: IXosNavigationRoute) => {
+      this.$state.go(item.state);
+      this.query = null;
+    };
+
     this.userEmail = this.authService.getUser() ? this.authService.getUser().email : '';
 
     this.syncStore.query()