Revision 44740
Added by Argiro Kokogiannaki over 7 years ago
| entitiesAutoComplete.component.ts | ||
|---|---|---|
| 47 | 47 |
@Output() addItem = new EventEmitter(); // when selected list changes update parent component |
| 48 | 48 |
@Output() selectedValueChanged = new EventEmitter(); // when changed a method for filtering will be called |
| 49 | 49 |
@Input() public list = []; // the entries resulted after filtering function |
| 50 |
|
|
| 51 | 50 |
@Input() public selected = []; // the entries selected from user |
| 52 | 51 |
@Input() public keywordlimit = 3; // the minimum length of keyword |
| 53 | 52 |
@Input() public showSelected = true; // the minimum length of keyword |
| 54 | 53 |
@Input() public multipleSelections:boolean = true; |
| 55 | 54 |
@Input() public allowDuplicates:boolean = false; |
| 56 | 55 |
@Input() public selectedValue:string = ''; |
| 56 |
@Input() public keyword = ''; |
|
| 57 | 57 |
|
| 58 |
|
|
| 59 |
@Input() public keyword = ''; |
|
| 60 |
@Input() public type = 'search' //search, result, context, project |
|
| 61 | 58 |
private warningMessage = ""; |
| 62 | 59 |
private infoMessage = ""; |
| 63 | 60 |
|
| ... | ... | |
| 68 | 65 |
|
| 69 | 66 |
private searchTermStream = new Subject<string>(); |
| 70 | 67 |
filtered: Observable<{}> ;
|
| 71 |
// = this.searchTermStream |
|
| 72 |
// .debounceTime(300).distinctUntilChanged() |
|
| 73 |
// .switchMap((term: string) => this._search.searchProjectsByFunder(term, this.funderId)); |
|
| 74 | 68 |
|
| 75 |
@Input() public funderId:string ="0";
|
|
| 76 |
@Input() public entityName:string ;
|
|
| 69 |
@Input() public funderId:string; |
|
| 70 |
@Input() public entityType:string ;
|
|
| 77 | 71 |
|
| 78 | 72 |
constructor (private _search:EntitiesSearchService, private myElement: ElementRef) {
|
| 79 |
// if(this.entityName == "project" ){
|
|
| 80 |
// this.filtered = this.searchTermStream |
|
| 81 |
// .debounceTime(300).distinctUntilChanged() |
|
| 82 |
// .switchMap((term: string) => this._search.searchProjectsByFunder(term, this.funderId)); |
|
| 83 |
// } |
|
| 84 | 73 |
|
| 74 |
|
|
| 85 | 75 |
} |
| 76 |
|
|
| 86 | 77 |
ngOnInit () {
|
| 87 |
if(this.entityName == "project" ){
|
|
| 78 |
if(this.entityType == "project" && this.funderId && this.funderId.length > 0){
|
|
| 88 | 79 |
this.filtered = this.searchTermStream |
| 89 | 80 |
.debounceTime(300).distinctUntilChanged() |
| 90 | 81 |
.switchMap((term: string) => this._search.searchProjectsByFunder(term, this.funderId)); |
| 82 |
}else{
|
|
| 83 |
|
|
| 84 |
this.filtered = this.searchTermStream |
|
| 85 |
.debounceTime(300).distinctUntilChanged() |
|
| 86 |
.switchMap((term: string) => |
|
| 87 |
this._search.searchByType(term, this.entityType)); |
|
| 88 |
this.getSelectedNameFromGivenId(); |
|
| 91 | 89 |
} |
| 92 | 90 |
|
| 93 | 91 |
} |
| 94 | 92 |
ngOnDestroy(){
|
| 95 |
|
|
| 93 |
if(this.sub && this.sub != undefined){
|
|
| 94 |
this.sub.unsubscribe(); |
|
| 95 |
} |
|
| 96 | 96 |
} |
| 97 | 97 |
|
| 98 | 98 |
search() {
|
| ... | ... | |
| 107 | 107 |
this.tries = 0; |
| 108 | 108 |
} |
| 109 | 109 |
}else{
|
| 110 |
console.info("doo the search "+this.keyword );
|
|
| 110 |
|
|
| 111 | 111 |
this.tries = 0; |
| 112 | 112 |
this.warningMessage = ""; |
| 113 | 113 |
this.searchTermStream.next(this.keyword); |
| ... | ... | |
| 159 | 159 |
}); |
| 160 | 160 |
|
| 161 | 161 |
} |
| 162 |
console.log("selected"+this.selected.length );
|
|
| 163 | 162 |
|
| 164 | 163 |
} |
| 165 | 164 |
private checkIfExists(item:any,list):number{
|
| ... | ... | |
| 195 | 194 |
|
| 196 | 195 |
} |
| 197 | 196 |
private getSelectedNameFromGivenId(){
|
| 198 |
if(this.list == null ){
|
|
| 199 |
return; |
|
| 200 |
} |
|
| 201 |
for( var i = 0; i < this.list.length; i++){
|
|
| 202 |
if(this.list[i].id == this.selectedValue){
|
|
| 203 |
this.selectedValue = this.list[i].label; |
|
| 204 |
this.selected.push(this.list[i]); |
|
| 197 |
if(this.selectedValue && this.selectedValue.length > 0 ){
|
|
| 198 |
|
|
| 199 |
|
|
| 200 |
this.sub = this._search.fetchByType(this.selectedValue,this.entityType).subscribe( |
|
| 201 |
data => {
|
|
| 202 |
this.selected.push( data[0]); |
|
| 205 | 203 |
this.showInput = false; |
| 206 |
}
|
|
| 207 |
}
|
|
| 204 |
},
|
|
| 205 |
err => console.error("An error occured"));
|
|
| 208 | 206 |
} |
| 207 |
} |
|
| 209 | 208 |
|
| 210 | 209 |
handleClick(event){
|
| 211 | 210 |
var clickedComponent = event.target; |
Also available in: Unified diff
enable autocomplete component for searching entities| use it in advnced search of data and pubs