MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improvements for autocomplete

This commit is contained in:
argirok 2022-06-10 12:43:21 +03:00
parent cd839447a4
commit 9caf036b12
3 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
searchPages/searchUtils/advancedSearchForm.component.html
View File

@ -58,7 +58,8 @@
[placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name" [placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name"
[multipleSelections]=false [multipleSelections]=false
(selectedValueChanged)="valueChanged($event,i)" (selectedValueChanged)="valueChanged($event,i)"
(listUpdated)="listUpdated($event,selectedField.id)"></static-autocomplete> (listUpdated)="listUpdated($event,selectedField.id)"
[id]="'autocomplete-'+i"></static-autocomplete>
</td> </td>
<td *ngIf=" selectedField.id && selectedField.type == 'refine'" class="uk-width-1-3"> <td *ngIf=" selectedField.id && selectedField.type == 'refine'" class="uk-width-1-3">
<static-autocomplete [properties]=properties [list]=this.fieldList[selectedField.id] <static-autocomplete [properties]=properties [list]=this.fieldList[selectedField.id]
@ -67,7 +68,8 @@
[placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name" [placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name"
[multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)" [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)"
(listUpdated)="listUpdated($event,selectedField.id)" (listUpdated)="listUpdated($event,selectedField.id)"
(updateValueLabel)="updatedValueLabel($event, i)"></static-autocomplete> (updateValueLabel)="updatedValueLabel($event, i)"
[id]="'autocomplete-'+i"></static-autocomplete>
</td> </td>
<td *ngIf="selectedField.type == 'entity'"> <td *ngIf="selectedField.type == 'entity'">
<entities-autocomplete [properties]=properties [fieldId]=selectedField.id [entityType]=selectedField.param <entities-autocomplete [properties]=properties [fieldId]=selectedField.id [entityType]=selectedField.param
@ -75,7 +77,8 @@
[placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name" [placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name"
[multipleSelections]=false [multipleSelections]=false
(selectedValueChanged)="valueChanged($event,i)" (selectedValueChanged)="valueChanged($event,i)"
(updateValueLabel)="updatedValueLabel($event, i)"> (updateValueLabel)="updatedValueLabel($event, i)"
[id]="'autocomplete-'+i">
</entities-autocomplete> </entities-autocomplete>
</td> </td>

8
utils/entitiesAutoComplete/entitiesAutoComplete.component.ts
View File

@ -18,7 +18,7 @@ import {AutoCompleteValue} from "../../searchPages/searchUtils/searchHelperClass
}, },
template: ` template: `
<div class="custom-autocomplete"> <div class="custom-autocomplete" [id]=id >
<div *ngIf = "showSelected && selectedValue != ''"> <div *ngIf = "showSelected && selectedValue != ''">
<div class="uk-alert uk-alert-default uk-flex uk-flex-middle uk-padding-small uk-margin-remove" data-uk-alert="" *ngFor="let item of selected" [title]="showItem(item)" > <div class="uk-alert uk-alert-default uk-flex uk-flex-middle uk-padding-small uk-margin-remove" data-uk-alert="" *ngFor="let item of selected" [title]="showItem(item)" >
<div class="uk-width-expand uk-margin-small-right" >{{showItem(item)}} </div> <div class="uk-width-expand uk-margin-small-right" >{{showItem(item)}} </div>
@ -30,10 +30,11 @@ import {AutoCompleteValue} from "../../searchPages/searchUtils/searchHelperClass
<input *ngIf = "showInput" type="text" class="auto-complete-input validate filter-input input-sm form-control uk-input " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=search() (blur)="keyword = ''" > <input *ngIf = "showInput" type="text" class="auto-complete-input validate filter-input input-sm form-control uk-input " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=search() (blur)="keyword = ''" >
<!--span [style.display]="showLoading ? 'inline' : 'none'" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span> <!--span [style.display]="showLoading ? 'inline' : 'none'" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span>
<span *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" data-uk-alert=""> {{warningMessage}} <a href="" class="uk-alert-close uk-close"></a></span--> <span *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" data-uk-alert=""> {{warningMessage}} <a href="" class="uk-alert-close uk-close"></a></span-->
<div *ngIf="focus && showInput" class="uk-dropdown" aria-expanded="true" style="display:block" > <div *ngIf="focus && showInput" class="options uk-dropdown uk-open" #optionBox
uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
<ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results" > <ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results" >
<li> <li>
<span *ngIf="!_search.ready" class="uk-padding-small"> Loading..... </span> <span *ngIf="!_search.ready && warningMessage.length ==0" class="uk-padding-small"> Loading..... </span>
<span *ngIf="warningMessage.length > 0" class="uk-padding-small uk-text-warning">{{warningMessage}}</span> <span *ngIf="warningMessage.length > 0" class="uk-padding-small uk-text-warning">{{warningMessage}}</span>
<!--<span *ngIf="results > 0" > {{results | number}} results found:</span>--> <!--<span *ngIf="results > 0" > {{results | number}} results found:</span>-->
<!--span *ngIf="results == 0 && !showLoading" class="uk-alert uk-alert-primary" data-uk-alert=""> No results found</span--> <!--span *ngIf="results == 0 && !showLoading" class="uk-alert uk-alert-primary" data-uk-alert=""> No results found</span-->
@ -67,6 +68,7 @@ export class EntitiesAutocompleteComponent {
@Input() public keyword = ''; @Input() public keyword = '';
@Input() public fieldId:string ; @Input() public fieldId:string ;
@Input() public properties:EnvProperties ; @Input() public properties:EnvProperties ;
@Input() id;
public currentFieldId: string ; public currentFieldId: string ;
public currentFunderId: string ; public currentFunderId: string ;
public warningMessage = ""; public warningMessage = "";

19
utils/staticAutoComplete/staticAutoComplete.component.ts
View File

@ -12,7 +12,7 @@ import{EnvProperties} from '../../utils/properties/env-properties';
'(document:click)': 'handleClick($event)', '(document:click)': 'handleClick($event)',
}, },
template: ` template: `
<div class="custom-autocomplete uk-width-1-1"> <div class="custom-autocomplete uk-width-1-1" [id]=id >
<div *ngIf = "showSelected && selectedValue != ''"> <div *ngIf = "showSelected && selectedValue != ''">
<div class="uk-alert uk-alert-default uk-flex uk-flex-middle uk-padding-small uk-margin-remove" data-uk-alert="" *ngFor="let item of selected" [title]="showItem(item)"> <div class="uk-alert uk-alert-default uk-flex uk-flex-middle uk-padding-small uk-margin-remove" data-uk-alert="" *ngFor="let item of selected" [title]="showItem(item)">
<div class="uk-width-expand uk-margin-small-right" >{{showItem(item)}} </div> <div class="uk-width-expand uk-margin-small-right" >{{showItem(item)}} </div>
@ -24,12 +24,14 @@ import{EnvProperties} from '../../utils/properties/env-properties';
<input *ngIf = "showInput " type="text" class="auto-complete-input validate filter-input input-sm form-control uk-input" [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=filter() (blur)="keyword = ''" > <input *ngIf = "showInput " type="text" class="auto-complete-input validate filter-input input-sm form-control uk-input" [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=filter() (blur)="keyword = ''" >
<!--span [style.display]="showLoading ? 'inline' : 'none'" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span> <!--span [style.display]="showLoading ? 'inline' : 'none'" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span>
<span *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" data-uk-alert=""> {{warningMessage}} <a href="" class="uk-alert-close uk-close"></a></span--> <span *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" data-uk-alert=""> {{warningMessage}} <a href="" class="uk-alert-close uk-close"></a></span-->
<div *ngIf="focus && showInput" class="uk-dropdown" aria-expanded="true" style="display:block" > <div *ngIf="focus && showInput" class="options uk-dropdown uk-open" #optionBox
uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id" >
<ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results" > <ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results" >
<li> <li>
<span [style.display]="showLoading ? 'inline' : 'none'" class="uk-padding-small"> <i class="uk-icon-spinner"></i> Loading... </span> <span [style.display]="showLoading ? 'inline' : 'none'" class="uk-padding-small uk-text-center"> <i class="uk-icon-spinner"></i> Loading... </span>
<!--<span *ngIf="filtered.length > 0" > {{results | number}} results found:</span>--> <!--<span *ngIf="filtered.length > 0" > {{results | number}} results found:</span>-->
<span *ngIf="filtered.length == 0 && !showLoading" class=" uk-padding-small" > No results found</span> <span *ngIf="filtered.length == 0 && !showLoading && warningMessage.length == 0" class=" uk-padding-small" > No results found</span>
<span *ngIf="warningMessage.length > 0" class="uk-padding-small uk-text-warning">{{warningMessage}}</span>
</li> </li>
<li *ngFor=" let item of filtered"> <li *ngFor=" let item of filtered">
<a (click)="select(item)" [title]="showItem(item)" style="text-overflow: ellipsis; ">{{showItem(item)}}</a> <a (click)="select(item)" [title]="showItem(item)" style="text-overflow: ellipsis; ">{{showItem(item)}}</a>
@ -62,6 +64,7 @@ export class StaticAutoCompleteComponent implements OnChanges{
@Input() properties:EnvProperties; @Input() properties:EnvProperties;
@Input() public keyword = ''; @Input() public keyword = '';
@Input() public type = 'search' //search, result, context, project @Input() public type = 'search' //search, result, context, project
@Input() id;
public warningMessage = ""; public warningMessage = "";
public infoMessage = ""; public infoMessage = "";
public showLoading:boolean = false; public showLoading:boolean = false;
@ -105,7 +108,7 @@ export class StaticAutoCompleteComponent implements OnChanges{
this.afterListFetchedActions(); this.afterListFetchedActions();
} else { } else {
this.handleError("Error getting vocabulary with id: "+this.vocabularyId+" for "+this.entityName); this.handleError("Error getting vocabulary with id: "+this.vocabularyId+" for "+this.entityName);
this.warningMessage = "An Error occurred..." this.warningMessage = "Error, couldn't fetch results...";
this.showLoading = false; this.showLoading = false;
this.afterListFetchedActions(); this.afterListFetchedActions();
} }
@ -121,7 +124,7 @@ export class StaticAutoCompleteComponent implements OnChanges{
err => { err => {
//console.log(err); //console.log(err);
this.handleError("Error getting results for refine field: "+this.fieldName+" for "+this.entityName, err); this.handleError("Error getting results for refine field: "+this.fieldName+" for "+this.entityName, err);
this.warningMessage = "An Error occured..." this.warningMessage = "Error, couldn't fetch results...";
this.showLoading = false; this.showLoading = false;
this.afterListFetchedActions(); this.afterListFetchedActions();
} }
@ -146,7 +149,6 @@ export class StaticAutoCompleteComponent implements OnChanges{
value: this.list value: this.list
}); });
if(this.list == null || this.list.length == 0 ){ if(this.list == null || this.list.length == 0 ){
this.warningMessage = "No results available";
return; return;
} }
this.done = true; this.done = true;
@ -278,6 +280,9 @@ export class StaticAutoCompleteComponent implements OnChanges{
return (str.length > size)?str.substr(0,size)+'...':str; return (str.length > size)?str.substr(0,size)+'...':str;
} }
private getSelectedNameFromGivenId(){ private getSelectedNameFromGivenId(){
if(!this.selectedValue){
return;
}
if(this.list == null || this.list.length == 0 ){ if(this.list == null || this.list.length == 0 ){
this.selected.push({label: this.selectedValue, id: this.selectedValue}); this.selected.push({label: this.selectedValue, id: this.selectedValue});
this.showInput = false; this.showInput = false;