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 new file mode 100644 index 0000000000..d629822ec9 --- /dev/null +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html @@ -0,0 +1,8 @@ + + + + + + +
{{result.entry.name}}
+

{{ 'SEARCH.RESULTS.ERROR' | translate:{errorMessage: errorMessage} }}

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 new file mode 100644 index 0000000000..38a6585e2d --- /dev/null +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts @@ -0,0 +1,104 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component, ElementRef, Input, OnChanges, Renderer } from 'angular2/core'; +import { AlfrescoService } from './../services/alfresco.service'; + +import { AlfrescoPipeTranslate, AlfrescoTranslationService } from 'ng2-alfresco-core/dist/ng2-alfresco-core'; + +declare let __moduleName: string; + +@Component({ + moduleId: __moduleName, + selector: 'alfresco-search-autocomplete', + styles: [ + `:host { + position: absolute; + z-index: 1; + display: none; + color: #555; + } + :host table { + width: 300px; + } + :host .mdl-data-table tbody tr { + height: 32px; + } + :host .mdl-data-table td { + height: 32px; + padding: 8px; + text-align: left; + }` + ], + templateUrl: './alfresco-search-autocomplete.component.html', + providers: [AlfrescoService], + pipes: [AlfrescoPipeTranslate] +}) +export class AlfrescoSearchAutocompleteComponent implements OnChanges { + + @Input() + searchTerm: string = ''; + + results: any; + + errorMessage; + + route: any[] = []; + + constructor( + private _alfrescoService: AlfrescoService, + private translate: AlfrescoTranslationService, + private el: ElementRef, + private renderer: Renderer + ) { + console.log('Autocomplete constructor'); + translate.addTranslationFolder('node_modules/ng2-alfresco-search'); + this.results = null; + } + + ngOnChanges(changes) { + console.log('Autocomplete changes'); + if (this.searchTerm.length >= 3) { + this.displaySearchResults(this.searchTerm); + this.renderer.setElementStyle(this.el.nativeElement, 'display', 'block'); + } else { + this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none'); + } + } + + /** + * Loads and displays search results + * @param searchTerm Search query entered by user + */ + displaySearchResults(searchTerm) { + if (searchTerm !== null) { + this._alfrescoService + .getLiveSearchResults(searchTerm) + .subscribe( + results => { + this.results = results.list.entries + this.errorMessage = null; + }, + error => { + this.results = null; + this.errorMessage = error; + } + ); + } + } + +} 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 d5591ae7a8..6358a8838e 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 @@ -9,3 +9,4 @@ + 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 470f6bd44c..7187ec42e9 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 @@ -17,10 +17,11 @@ import { Control, Validators } from 'angular2/common'; import { Component, Input, Output, EventEmitter, AfterViewInit } from 'angular2/core'; -import { AlfrescoService } from './../services/alfresco.service'; import { AlfrescoPipeTranslate, AlfrescoTranslationService } from 'ng2-alfresco-core/dist/ng2-alfresco-core'; +import { AlfrescoSearchAutocompleteComponent } from './alfresco-search-autocomplete.component'; + declare let __moduleName: string; declare var componentHandler: any; @@ -30,7 +31,7 @@ declare var componentHandler: any; styles: [ ], templateUrl: './alfresco-search-control.component.html', - providers: [AlfrescoService], + directives: [AlfrescoSearchAutocompleteComponent], pipes: [AlfrescoPipeTranslate] }) export class AlfrescoSearchControlComponent implements AfterViewInit { @@ -52,6 +53,9 @@ export class AlfrescoSearchControlComponent implements AfterViewInit { searchControl: Control; + @Input() + autocompleteSearchTerm = ''; + constructor(private translate: AlfrescoTranslationService) { this.searchControl = new Control( @@ -59,6 +63,12 @@ export class AlfrescoSearchControlComponent implements AfterViewInit { Validators.compose([Validators.required, Validators.minLength(3)]) ); + this.searchControl.valueChanges.debounceTime(400).distinctUntilChanged().subscribe( + (value: string) => { + this.autocompleteSearchTerm = value; + } + ); + translate.addTranslationFolder('node_modules/ng2-alfresco-search'); }