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()
diff --git a/src/app/core/index.ts b/src/app/core/index.ts
index a9aa9a6..e1a830e 100644
--- a/src/app/core/index.ts
+++ b/src/app/core/index.ts
@@ -17,7 +17,11 @@
export const xosCore = 'xosCore';
angular
- .module('xosCore', ['ui.router', 'toastr'])
+ .module('xosCore', [
+ 'ui.router',
+ 'toastr',
+ 'ui.bootstrap.typeahead'
+ ])
.config(routesConfig)
.provider('RuntimeStates', RuntimeStates)
.service('NavigationService', NavigationService)