Preview search-as-you-type results in the viewer

Refs #173

demo-shell-ng2/app/app.component.html

@@ -7,9 +7,8 @@
             <!-- Add spacer, to align navigation to the right -->
             <div class="mdl-layout-spacer"></div>
 
-            <!-- Search box -->
-            <alfresco-search-control *ngIf="isLoggedIn()" [searchTerm]="searchTerm"
-            (searchChange)="searchTermChange($event);" [autocomplete]="false"></alfresco-search-control>
+            <!-- Search bar -->
+            <search-bar></search-bar>
 
             <!-- Navigation. We hide it in small screens. -->
             <nav class="mdl-navigation mdl-layout--large-screen-only">

demo-shell-ng2/app/app.component.ts

@@ -29,7 +29,7 @@ import {
 import { UploadButtonComponent } from 'ng2-alfresco-upload/dist/ng2-alfresco-upload';
 import { DataTableDemoComponent } from './components/datatable/datatable-demo.component';
 import { SearchComponent } from './components/search/search.component';
-import { ALFRESCO_SEARCH_DIRECTIVES } from 'ng2-alfresco-search/dist/ng2-alfresco-search';
+import { SearchBarComponent } from './components/search/search-bar.component';
 import { LoginDemoComponent } from './components/login/login-demo.component';
 import { TasksDemoComponent } from './components/tasks/tasks-demo.component';
 
@@ -39,7 +39,7 @@ declare var document: any;
     selector: 'alfresco-app',
     templateUrl: 'app/app.component.html',
     styleUrls: ['app/app.component.css'],
-    directives: [ALFRESCO_SEARCH_DIRECTIVES, ROUTER_DIRECTIVES, AuthRouterOutlet, MDL],
+    directives: [SearchBarComponent, ROUTER_DIRECTIVES, AuthRouterOutlet, MDL],
     pipes: [AlfrescoPipeTranslate]
 })
 @RouteConfig([
@@ -90,15 +90,4 @@ export class AppComponent {
         // todo: workaround for drawer closing
         document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
     }
-
-    /**
-     * Called when a new search term is submitted
-     *
-     * @param params Parameters relating to the search
-     */
-    searchTermChange(params) {
-        this.router.navigate(['Search', {
-            q: params.value
-        }]);
-    }
 }

ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html

@@ -1,7 +1,7 @@
 <table *ngIf="results && results.length && searchTerm" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
     <tbody>
     <tr *ngFor="#result of results; #idx = index">
-        <td>{{result.entry.name}}</td>
+        <td><a href="#" (click)="onItemClick(result, $event)">{{result.entry.name}}</a></td>
     </tr>
     </tbody>
 </table>

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, ElementRef, Input, OnChanges, Renderer } from 'angular2/core';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, Renderer } from 'angular2/core';
 import { AlfrescoService } from './../services/alfresco.service';
 
 import { AlfrescoPipeTranslate, AlfrescoTranslationService } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
@@ -32,6 +32,10 @@ declare let __moduleName: string;
             display: none;
             color: #555;
         }
+        :host a {
+            color: #555;
+            text-decoration: none;
+        }
         :host table {
             width: 300px;
         }
@@ -65,7 +69,8 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
     @Input()
     ngClass: any;
 
-    route: any[] = [];
+    @Output()
+    preview: EventEmitter<any> = new EventEmitter();
 
     constructor(
         private _alfrescoService: AlfrescoService,
@@ -104,4 +109,17 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
         }
     }
 
+    onItemClick(node, event?: Event) {
+        if (event) {
+            event.preventDefault();
+        }
+        if (node && node.entry) {
+            if (node.entry.isFile) {
+                this.preview.emit({
+                    value: node
+                });
+            }
+        }
+    }
+
 }

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

@@ -5,9 +5,9 @@
         </label>
         <div [class]="getTextFieldHolderClassName()">
             <input class="mdl-textfield__input" [type]="inputType" [autocomplete]="getAutoComplete()"
-                   id="searchControl" [ngFormControl]="searchControl" [(ngModel)]="searchTerm" (focus)="onFocus()" (blur)="onBlur()">
+                   id="searchControl" [ngFormControl]="searchControl" [(ngModel)]="searchTerm" (focus)="onFocus($event)" (blur)="onBlur($event)">
             <label class="mdl-textfield__label" for="searchControl">{{'SEARCH.CONTROL.LABEL' | translate}}</label>
         </div>
     </div>
 </form>
-<alfresco-search-autocomplete [searchTerm]="autocompleteSearchTerm" [ngClass]="{active: searchActive, valid: searchValid}"></alfresco-search-autocomplete>
+<alfresco-search-autocomplete [searchTerm]="autocompleteSearchTerm" [ngClass]="{active: searchActive, valid: searchValid}" (preview)="onFileClicked($event)"></alfresco-search-autocomplete>

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

@@ -51,6 +51,9 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
     @Output()
     searchChange = new EventEmitter();
 
+    @Output()
+    preview = new EventEmitter();
+
     searchControl: Control;
 
     @Input()
@@ -111,18 +114,20 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
         }
     }
 
-    onFocus(event) {
-        if (event) {
-            event.preventDefault();
-        }
+    onFileClicked(event) {
+        this.preview.emit({
+            value: event.value
+        });
+    }
+
+    onFocus() {
         this.searchActive = true;
     }
 
-    onBlur(event) {
-        if (event) {
-            event.preventDefault();
-        }
-        this.searchActive = false;
+    onBlur() {
+        window.setTimeout(() => {
+            this.searchActive = false;
+        }, 100);
     }
 
 }