Restore navigation to search page in demo-shell

- Remove deprecated router component
- searchChanges and new searchSubmit component outputs work as you would expect
- Update tests

Refs #737

demo-shell-ng2/app/components/search/search-bar.component.html

@@ -1,5 +1,5 @@
 <alfresco-search-control *ngIf="isLoggedIn()" [searchTerm]="searchTerm" [autocomplete]="false"
-    (searchChange)="searchTermChange($event);" (expand)="onExpandToggle($event);" (preview)="onFileClicked($event)"></alfresco-search-control>
+    (searchSubmit)="onSearchSubmit($event);" (searchChange)="onSearchTermChange($event);" (expand)="onExpandToggle($event);" (preview)="onFileClicked($event)"></alfresco-search-control>
 
 <alfresco-viewer [(showViewer)]="fileShowed"
                  [fileNodeId]="fileNodeId"

demo-shell-ng2/app/components/search/search-bar.component.ts

@@ -16,6 +16,7 @@
  */
 
 import { Component, EventEmitter, Output } from '@angular/core';
+import { Router } from '@angular/router';
 import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
 
 declare let __moduleName: string;
@@ -34,13 +35,25 @@ export class SearchBarComponent {
     @Output()
     expand = new EventEmitter();
 
-    constructor(public auth: AlfrescoAuthenticationService) {
+    constructor(public router: Router,
+                public auth: AlfrescoAuthenticationService) {
     }
 
     isLoggedIn(): boolean {
         return this.auth.isLoggedIn();
     }
 
+    /**
+     * Called when the user submits the search, e.g. hits enter or clicks submit
+     *
+     * @param event Parameters relating to the search
+     */
+    onSearchSubmit(event) {
+        this.router.navigate(['/search', {
+            q: event.value
+        }]);
+    }
+
     onFileClicked(event) {
         if (event.value.entry.isFile) {
             this.fileNodeId = event.value.entry.id;
@@ -48,8 +61,7 @@ export class SearchBarComponent {
         }
     }
 
-    searchTermChange(event) {
-        console.log('Search term changed', event);
+    onSearchTermChange(event) {
         this.searchTerm = event.value;
     }
 

ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts

@@ -118,5 +118,39 @@ describe('AlfrescoSearchControlComponent', () => {
             expect(element.querySelectorAll('label.mdl-button--icon').length).toBe(0);
         });
     });
+
+    describe('search submit', () => {
+
+        it('should fire a search when a term has been entered', () => {
+            spyOn(component.searchSubmit, 'emit');
+            alfrescoSearchControlComponentFixture.detectChanges();
+            let formEl = element.querySelector('form');
+            component.searchTerm = 'searchTerm1';
+            component.searchControl.updateValue('searchTerm1');
+            alfrescoSearchControlComponentFixture.detectChanges();
+            formEl.dispatchEvent(new Event('submit'));
+
+            alfrescoSearchControlComponentFixture.detectChanges();
+
+            expect(component.searchSubmit.emit).toHaveBeenCalledWith({
+                'value': 'searchTerm1'
+            });
+        });
+
+        it('should not fire a search when no term has been entered', () => {
+            spyOn(component.searchSubmit, 'emit');
+            alfrescoSearchControlComponentFixture.detectChanges();
+            let inputEl = element.querySelector('input[type="text"]');
+            let formEl = element.querySelector('form');
+            inputEl.value = '';
+            formEl.dispatchEvent(new Event('submit'));
+
+            alfrescoSearchControlComponentFixture.detectChanges();
+
+            expect(component.searchSubmit.emit).not.toHaveBeenCalled();
+        });
+
+    });
+
 });
 */

ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts

@@ -45,6 +45,9 @@ export class AlfrescoSearchControlComponent {
     @Output()
     searchChange = new EventEmitter();
 
+    @Output()
+    searchSubmit = new EventEmitter();
+
     @Output()
     preview = new EventEmitter();
 
@@ -74,6 +77,10 @@ export class AlfrescoSearchControlComponent {
             (value: string) => {
                 this.autocompleteSearchTerm = value;
                 this.searchValid = this.searchControl.valid;
+                this.searchChange.emit({
+                    value: value,
+                    valid: this.searchValid
+                });
             }
         );
 
@@ -98,11 +105,8 @@ export class AlfrescoSearchControlComponent {
      * @param event Submit event that was fired
      */
     onSearch(event): void {
-        if (event) {
-            event.preventDefault();
-        }
         if (this.searchControl.valid) {
-            this.searchChange.emit({
+            this.searchSubmit.emit({
                 value: this.searchTerm
             });
             this.searchInput.nativeElement.blur();

ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts

@@ -15,11 +15,11 @@
  * limitations under the License.
  */
 
-/*
-import { PLATFORM_PIPES } from '@angular/core';
+import { PLATFORM_PIPES, ReflectiveInjector } from '@angular/core';
 import { it, describe, expect, inject, beforeEachProviders, beforeEach } from '@angular/core/testing';
 import { TestComponentBuilder } from '@angular/compiler/testing';
-import { RouteParams } from '@angular/router-deprecated';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs/Rx';
 import { AlfrescoSearchComponent } from './alfresco-search.component';
 import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.service';
 import { TranslationMock } from './../assets/translation.service.mock';
@@ -103,12 +103,20 @@ describe('AlfrescoSearchComponent', () => {
     });
 
     it('should take the provided search term from query param provided via RouteParams', () => {
-        let search = new AlfrescoSearchComponent(null, null, null, new RouteParams({q: 'exampleTerm692'}));
+        let injector = ReflectiveInjector.resolveAndCreate([
+            { provide: ActivatedRoute, useValue: { params: Observable.from([{ q: 'exampleTerm692' }]) } }
+        ]);
+        let search = new AlfrescoSearchComponent(null, null, null, injector.get(ActivatedRoute));
+        search.ngOnInit();
         expect(search.searchTerm).toBe('exampleTerm692');
     });
 
     it('should have a null search term if no query param provided via RouteParams', () => {
-        let search = new AlfrescoSearchComponent(null, null, null, new RouteParams({}));
+        let injector = ReflectiveInjector.resolveAndCreate([
+            { provide: ActivatedRoute, useValue: { params: Observable.from([{}]) } }
+        ]);
+        let search = new AlfrescoSearchComponent(null, null, null, injector.get(ActivatedRoute));
+        search.ngOnInit();
         expect(search.searchTerm).toBeNull();
     });
 
@@ -191,4 +199,3 @@ describe('AlfrescoSearchComponent', () => {
     });
 
 });
-*/

ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, Output, OnChanges, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Component, EventEmitter, Input, Output, Optional, OnChanges, SimpleChanges, OnInit } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
 import { AlfrescoSearchService } from './../services/alfresco-search.service';
 import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.service';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
@@ -46,12 +46,12 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
 
     errorMessage;
 
-    route: any[] = [];
+    queryParamName = 'q';
 
     constructor(private alfrescoSearchService: AlfrescoSearchService,
                 private translate: AlfrescoTranslationService,
                 private _alfrescoThumbnailService: AlfrescoThumbnailService,
-                private activatedRoute: ActivatedRoute) {
+                @Optional() private route: ActivatedRoute) {
 
         if (translate !== null) {
             translate.addTranslationFolder('node_modules/ng2-alfresco-search/dist/src');
@@ -61,15 +61,19 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
     }
 
     ngOnInit(): void {
-        this.activatedRoute.params.subscribe(params => {
-            this.searchTerm = params['q'];
+        if (this.route) {
+            this.route.params.forEach((params: Params) => {
+                this.searchTerm = params.hasOwnProperty(this.queryParamName) ? params[this.queryParamName] : null;
+                this.displaySearchResults(this.searchTerm);
+            });
+        } else {
             this.displaySearchResults(this.searchTerm);
-        });
+        }
     }
 
-    ngOnChanges(changes): void {
-        if (changes.searchTerm) {
-            this.displaySearchResults(changes.searchTerm.currentValue);
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['searchTerm']) {
+            this.displaySearchResults(changes['searchTerm'].currentValue);
         }
     }