Revision 44421
Added by Argiro Kokogiannaki over 7 years ago
| staticAutoComplete2.component.ts | ||
|---|---|---|
| 41 | 41 |
export class StaticAutocomplete2Component {
|
| 42 | 42 |
@Input() placeHolderMessage = "Search for entries"; |
| 43 | 43 |
@Input() title = "Autocomplete"; |
| 44 |
@Output() addItem = new EventEmitter(); // when selected list changes update parent component |
|
| 44 | 45 |
@Output() selectedValueChanged = new EventEmitter(); // when changed a method for filtering will be called |
| 45 | 46 |
@Output() listUpdated = new EventEmitter(); // when changed a method for filtering will be called |
| 46 | 47 |
@Input() public list = []; // the entries resulted after filtering function |
| ... | ... | |
| 49 | 50 |
@Input() public keywordlimit = 3; // the minimum length of keyword |
| 50 | 51 |
@Input() public showSelected = true; // the minimum length of keyword |
| 51 | 52 |
@Input() public multipleSelections:boolean = true; |
| 53 |
@Input() public allowDuplicates:boolean = false; |
|
| 52 | 54 |
@Input() public selectedValue:string = ''; |
| 53 | 55 |
@Input() public vocabularyId:string ; |
| 54 | 56 |
@Input() public fieldName:string ; |
| ... | ... | |
| 71 | 73 |
} |
| 72 | 74 |
} |
| 73 | 75 |
ngOnInit () {
|
| 76 |
console.log("auto complete init : list length"+this.list.length);
|
|
| 77 |
|
|
| 74 | 78 |
if(this.list == undefined || this.list.length == 0){
|
| 79 |
|
|
| 75 | 80 |
if(this.vocabularyId){
|
| 76 | 81 |
this.list = this._vocabulariesService.getVocabularyByType(this.vocabularyId, this.entityName); |
| 77 | 82 |
this.afterListFetchedActions(); |
| ... | ... | |
| 90 | 95 |
); |
| 91 | 96 |
} |
| 92 | 97 |
}else{
|
| 98 |
console.log("auto complete init : list length"+this.list.length);
|
|
| 99 |
|
|
| 93 | 100 |
this.afterListFetchedActions(); |
| 94 | 101 |
} |
| 95 | 102 |
|
| 96 | 103 |
} |
| 104 |
public updateList(list){ // used in claim context autocomplete
|
|
| 105 |
this.list = list; |
|
| 106 |
this.afterListFetchedActions() |
|
| 107 |
} |
|
| 97 | 108 |
private afterListFetchedActions(){
|
| 98 | 109 |
this.getSelectedNameFromGivenId(); |
| 99 | 110 |
this.listUpdated.emit({
|
| 100 | 111 |
value: this.list |
| 101 | 112 |
}); |
| 102 | 113 |
if(this.list == null || this.list.length == 0 ){
|
| 103 |
this.warningMessage = "There are no results" |
|
| 104 |
return |
|
| 114 |
this.warningMessage = "There are no results";
|
|
| 115 |
return;
|
|
| 105 | 116 |
} |
| 106 | 117 |
this.done = true; |
| 107 | 118 |
if(this.keyword != ""){
|
| 108 | 119 |
this.filter(); |
| 109 | 120 |
} |
| 121 |
|
|
| 110 | 122 |
} |
| 111 | 123 |
filter() {
|
| 112 | 124 |
if(this.done){
|
| ... | ... | |
| 147 | 159 |
this.selectedValueChanged.emit({
|
| 148 | 160 |
value: this.selectedValue |
| 149 | 161 |
}); |
| 162 |
|
|
| 163 |
|
|
| 150 | 164 |
} |
| 151 | 165 |
} |
| 152 | 166 |
select(item:any){
|
| 167 |
// console.log("select"+this.selected.length + item.id + " "+ item.label);
|
|
| 168 |
|
|
| 153 | 169 |
if(this.multipleSelections){
|
| 154 | 170 |
var index:number =this.checkIfExists(item,this.selected); |
| 155 |
if (index > -1) {
|
|
| 171 |
if (index > -1 && !this.allowDuplicates) {
|
|
| 156 | 172 |
this.keyword = ""; |
| 157 | 173 |
this.filtered.splice(0, this.filtered.length); |
| 158 | 174 |
return; |
| ... | ... | |
| 161 | 177 |
this.selected.push(item); |
| 162 | 178 |
this.keyword = ""; |
| 163 | 179 |
this.filtered.splice(0, this.filtered.length); |
| 180 |
this.addItem.emit({
|
|
| 181 |
value: item |
|
| 182 |
}); |
|
| 164 | 183 |
} |
| 165 | 184 |
}else{
|
| 166 | 185 |
this.selected.splice(0, this.selected.length); |
| ... | ... | |
| 174 | 193 |
}); |
| 175 | 194 |
|
| 176 | 195 |
} |
| 196 |
console.log("selected"+this.selected.length );
|
|
| 197 |
|
|
| 177 | 198 |
} |
| 178 | 199 |
private checkIfExists(item:any,list):number{
|
| 179 | 200 |
|
Also available in: Unified diff
Publication page & project PAge: add claim result inline, fix claim context - use autocomplete component, in home page add keyword to the url when user searches for a term