From 964111a3b6387436aeff4772b29e99b16ba2a2e1 Mon Sep 17 00:00:00 2001
From: Will Abson <will.abson@alfresco.com>
Date: Mon, 24 Oct 2016 09:54:10 +0100
Subject: [PATCH] Initial tabbable search results implementation

Refs #371
---
 ...lfresco-search-autocomplete.component.html |  4 +--
 .../alfresco-search-autocomplete.component.ts | 32 +++++++++++++++++++
 .../alfresco-search-control.component.html    |  2 +-
 .../alfresco-search-control.component.ts      |  8 +++++
 .../components/alfresco-search.component.html |  2 +-
 5 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html
index 66fcf83db3..bbb1b5ea82 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html
@@ -1,7 +1,7 @@
 <table data-automation-id="autocomplete_results" *ngIf="results && results.length && searchTerm"
        class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
-    <tbody>
-    <tr id="result_row_{{idx}}" *ngFor="let result of results; let idx = index" (click)="onItemClick(result, $event)"
+    <tbody (focusout)="onFocusOut()">
+    <tr id="result_row_{{idx}}" *ngFor="let result of results; let idx = index" tabindex="0" (blur)="onRowBlur(result)" (focus)="onRowFocus(result)" (click)="onItemClick(result, $event)" (keyup.enter)="onRowEnter(result, $event)"
         attr.data-automation-id="autocomplete_result_for_{{result.entry.name}}">
         <td class="img-td"><img src="{{getMimeTypeIcon(result)}}" alt="{{getMimeTypeKey(result)|translate}}"/></td>
         <td>
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts
index 31f046b96e..a5bccf9a55 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts
@@ -43,6 +43,9 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges {
     @Output()
     preview: EventEmitter<any> = new EventEmitter();
 
+    @Output()
+    blurEmitter: EventEmitter<any> = new EventEmitter();
+
     @Output()
     resultsEmitter = new EventEmitter();
 
@@ -129,4 +132,33 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges {
         }
     }
 
+    onRowBlur(node): void {
+        window.setTimeout(() => {
+            let focusedEl = document.activeElement;
+            if (focusedEl && focusedEl.id && focusedEl.id.indexOf('result_row_') === 0) {
+                return;
+            }
+            this.blurEmitter.emit(node);
+        }, 100);
+        console.log('row blur', node);
+    }
+
+    onRowFocus(node): void {
+        console.log('row focus', node);
+    }
+
+    onRowEnter(node): void {
+        if (node && node.entry) {
+            if (node.entry.isFile) {
+                this.preview.emit({
+                    value: node
+                });
+            }
+        }
+    }
+
+    onFocusOut(): void {
+        console.log('onfocusout');
+    }
+
 }
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
index 868063b0f5..b175a5926c 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
@@ -24,4 +24,4 @@
 </form>
 <alfresco-search-autocomplete *ngIf="autocompleteEnabled"
                               [searchTerm]="autocompleteSearchTerm" [ngClass]="{active: searchActive, valid: searchValid}"
-                              (preview)="onFileClicked($event)"></alfresco-search-autocomplete>
+                              (preview)="onFileClicked($event)" (blurEmitter)="onAutoCompleteBlur($event)"></alfresco-search-autocomplete>
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
index 3c44af48f9..d51e198219 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
@@ -138,6 +138,10 @@ export class AlfrescoSearchControlComponent implements OnInit {
 
     onBlur(): void {
         window.setTimeout(() => {
+            let focusedEl = document.activeElement;
+            if (focusedEl && focusedEl.id && focusedEl.id.indexOf('result_row_') === 0) {
+                return;
+            }
             this.searchActive = false;
         }, 200);
         if (this.expandable && (this.searchControl.value === '' || this.searchControl.value === undefined)) {
@@ -155,4 +159,8 @@ export class AlfrescoSearchControlComponent implements OnInit {
         this.searchActive = true;
     }
 
+    onAutoCompleteBlur(): void {
+        this.searchActive = false;
+    }
+
 }
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
index 224ab2ec98..75cfea1fb4 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
@@ -16,7 +16,7 @@
     </thead>
     <tbody>
 
-    <tr  id="result_row_{{idx}}" *ngFor="let result of results; let idx = index" (click)="onItemClick(result, $event)">
+    <tr  id="result_row_{{idx}}" tabindex="0" *ngFor="let result of results; let idx = index" (click)="onItemClick(result, $event)" (keyup.enter)="onItemClick(result, $event)">
         <td class="col-mimetype-icon"><img src="{{getMimeTypeIcon(result)}}" alt="{{getMimeTypeKey(result)|translate}}" /></td>
         <td id="result_name_{{idx}}" class="mdl-data-table__cell--non-numeric col-display-name"
             attr.data-automation-id=file_{{result.entry.name}} >{{result.entry.name}}</td>