Load viewer on search results click

Refs #283
This commit is contained in:
Will Abson
2016-06-27 17:03:09 +01:00
parent 0bb77bbdad
commit a7d450c583
4 changed files with 49 additions and 10 deletions

View File

@@ -1,4 +1,8 @@
<div> <div class="search-results-container">
<h1>Search results</h1> <h1>Search results</h1>
<alfresco-search></alfresco-search> <alfresco-search (preview)="onFileClicked($event)"></alfresco-search>
</div> </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>

View File

@@ -16,7 +16,9 @@
*/ */
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { AlfrescoContentService } from 'ng2-alfresco-core';
import { ALFRESCO_SEARCH_DIRECTIVES } from 'ng2-alfresco-search'; import { ALFRESCO_SEARCH_DIRECTIVES } from 'ng2-alfresco-search';
import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';
declare let __moduleName: string; declare let __moduleName: string;
@@ -25,17 +27,34 @@ declare let __moduleName: string;
selector: 'search-component', selector: 'search-component',
templateUrl: './search.component.html', templateUrl: './search.component.html',
styles: [` styles: [`
:host div { :host div.search-results-container {
padding: 0 20px; padding: 0 20px 20px 20px;
} }
:host h1 { :host h1 {
font-size: 22px; font-size: 22px;
} }
:host tbody tr {
cursor: pointer;
}
`], `],
directives: [ ALFRESCO_SEARCH_DIRECTIVES ] directives: [ ALFRESCO_SEARCH_DIRECTIVES, VIEWERCOMPONENT ]
}) })
export class SearchComponent { 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;
}
} }
} }

View File

@@ -19,7 +19,7 @@
</thead> </thead>
<tbody> <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><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.name}}</td>
<td attr.data-automation-id=file_{{result.entry.name}}_{{result.entry.modifiedByUser.displayName}}> <td attr.data-automation-id=file_{{result.entry.name}}_{{result.entry.modifiedByUser.displayName}}>

View File

@@ -15,7 +15,7 @@
* limitations under the License. * 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 { RouteParams } from '@angular/router-deprecated';
import { AlfrescoSearchService } from './../services/alfresco-search.service'; import { AlfrescoSearchService } from './../services/alfresco-search.service';
import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.service'; import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.service';
@@ -38,6 +38,9 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
@Input() @Input()
searchTerm: string = ''; searchTerm: string = '';
@Output()
preview: EventEmitter<any> = new EventEmitter();
results: any; results: any;
errorMessage; 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
});
}
}
}
} }