Merge pull request #289 from Alfresco/dev-wabson-283

Load viewer on search results click

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>
+    <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.spec.ts

@@ -109,4 +109,35 @@ describe('AlfrescoSearchComponent', () => {
 
     });
 
+    describe('search result actions', () => {
+
+        it('should emit preview when file item clicked',
+            inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+                return tcb
+                    .overrideProviders(AlfrescoSearchComponent, [
+                        { provide: AlfrescoSearchService, useClass: SearchServiceMock }
+                    ])
+                    .createAsync(AlfrescoSearchComponent)
+                    .then((fixture) => {
+                        let componentInstance = fixture.componentInstance;
+                        componentInstance.results = [{
+                            entry: {
+                                id: '123',
+                                name: 'MyDoc',
+                                content: {
+                                    mimetype: 'text/plain'
+                                },
+                                isFile: true
+                            }
+                        }];
+                        fixture.detectChanges(componentInstance.results[0]);
+                        componentInstance.preview.subscribe(e => {
+                            expect(e.value).toBe(componentInstance.results[0]);
+                        });
+                        componentInstance.onItemClick();
+
+                    });
+            }));
+    });
+
 });

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
+                });
+            }
+        }
+    }
+
 }

ng2-components/ng2-alfresco-search/src/services/alfresco-search.service.ts

@@ -59,7 +59,6 @@ export class AlfrescoSearchService {
     public getLiveSearchResults(term: string): Observable<any> {
         return Observable.fromPromise(this.getSearchNodesPromise(term))
             .map(res => <any> res)
-            .do(data => console.log('Search data', data)) // eyeball results in the console
             .catch(this.handleError);
     }