inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Refs #173
This commit is contained in:
Will Abson
2016-06-09 18:30:56 +01:00
parent fc939a4c98
commit e67d043a54
6 changed files with 41 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html
View File

@@ -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>

22
ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts
View File

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

4
ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
View File

@@ -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>

23
ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
View File

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