Load viewer on search results click

Refs #283

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

@@ -1,4 +1,8 @@
-<div>
+<div class="search-results-container">
     <h1>Search results</h1>
-    <alfresco-search></alfresco-search>
-</div>
+    <alfresco-search (preview)="onFileClicked($event)"></alfresco-search>
+</div>
+
+<alfresco-viewer [(showViewer)]="previewActive" [urlFile]="previewContentUrl" [fileName]="previewName" [mimeType]="previewMimeType" [overlayMode]="true">
+    <div class="mdl-spinner mdl-js-spinner is-active"></div>
+</alfresco-viewer>

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

@@ -16,7 +16,9 @@
  */
 
 import { Component } from '@angular/core';
+import { AlfrescoContentService } from 'ng2-alfresco-core';
 import { ALFRESCO_SEARCH_DIRECTIVES } from 'ng2-alfresco-search';
+import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';
 
 declare let __moduleName: string;
 
@@ -25,17 +27,34 @@ declare let __moduleName: string;
     selector: 'search-component',
     templateUrl: './search.component.html',
     styles: [`
-        :host div {
-            padding: 0 20px;
+        :host div.search-results-container {
+            padding: 0 20px 20px 20px;
         }
         :host h1 {
             font-size: 22px;
         }
+        :host tbody tr {
+            cursor: pointer;
+        }
     `],
-    directives: [ ALFRESCO_SEARCH_DIRECTIVES ]
+    directives: [ ALFRESCO_SEARCH_DIRECTIVES, VIEWERCOMPONENT ]
 })
 export class SearchComponent {
-    constructor() {
-        console.log('SearchComponent constructor');
+
+    previewContentUrl: string;
+    previewName: string;
+    previewMimeType: string;
+    previewActive: boolean = false;
+
+    constructor(public contentService: AlfrescoContentService) {
+    }
+
+    onFileClicked(event) {
+        if (event.value.entry.isFile) {
+            this.previewName = event.value.entry.name;
+            this.previewMimeType = event.value.entry.content.mimeType;
+            this.previewContentUrl = this.contentService.getContentUrl(event.value);
+            this.previewActive = true;
+        }
     }
 }

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

@@ -19,7 +19,7 @@
     </thead>
     <tbody>
 
-    <tr *ngFor="let result of results; let idx = index">
+    <tr *ngFor="let result of results; let idx = index" (click)="onItemClick(result, $event)">
         <td><img src="{{getMimeTypeIcon(result)}}" /></td>
         <td attr.data-automation-id=file_{{result.entry.name}} >{{result.entry.name}}</td>
         <td attr.data-automation-id=file_{{result.entry.name}}_{{result.entry.modifiedByUser.displayName}}>

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, Optional, OnChanges, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, Output, Optional, OnChanges, OnInit } from '@angular/core';
 import { RouteParams } from '@angular/router-deprecated';
 import { AlfrescoSearchService } from './../services/alfresco-search.service';
 import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.service';
@@ -38,6 +38,9 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
     @Input()
     searchTerm: string = '';
 
+    @Output()
+    preview: EventEmitter<any> = new EventEmitter();
+
     results: any;
 
     errorMessage;
@@ -100,4 +103,17 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
         }
     }
 
+    onItemClick(node, event?: Event): void {
+        if (event) {
+            event.preventDefault();
+        }
+        if (node && node.entry) {
+            if (node.entry.isFile) {
+                this.preview.emit({
+                    value: node
+                });
+            }
+        }
+    }
+
 }