MaDgIK
/
explore-services
13
0
Fork 0
Code Issues Pull Requests Projects Releases 23 Wiki Activity

clean up old autocomplete files | add loading messagesvn st 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@44776 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2016-12-02 13:30:40 +00:00
parent 125e427554
commit e3294ac0b3
9 changed files with 239 additions and 533 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
portal-2/src/app/claimPages/claim-utils/claimContext.component.ts
View File

@ -2,7 +2,7 @@ import {Component, Input,Output, ElementRef, EventEmitter, ViewChild} from '@ang
import {Observable} from 'rxjs/Observable'; import {Observable} from 'rxjs/Observable';
import {ContextsService} from '../../services/contexts.service'; import {ContextsService} from '../../services/contexts.service';
import {ClaimContext} from '../../utils/entities/claimEntities.class'; import {ClaimContext} from '../../utils/entities/claimEntities.class';
import { StaticAutocomplete2Component } from '../../utils/staticAutoComplete2.component'; import { StaticAutoCompleteComponent } from '../../utils/staticAutoComplete.component';
@Component({ @Component({
selector: 'claim-contexts', selector: 'claim-contexts',
@ -32,7 +32,7 @@ import { StaticAutocomplete2Component } from '../../utils/staticAutoComplete2.co
</ul> </ul>
</div> </div>
<static-autocomplete2 [(list)] = concepts [allowDuplicates]=true [showSelected]=false [placeHolderMessage] = "'Search for Concepts'" title = "Concepts:" [multipleSelections]=true (addItem) = "select($event)"></static-autocomplete2> <static-autocomplete [(list)] = concepts [allowDuplicates]=true [showSelected]=false [placeHolderMessage] = "'Search for Concepts'" title = "Concepts:" [multipleSelections]=true (addItem) = "select($event)" > </static-autocomplete>
</div> </div>
</div> </div>
<div class="panel-body" *ngIf=" inline && showComponent "> <div class="panel-body" *ngIf=" inline && showComponent ">
@ -59,7 +59,8 @@ import { StaticAutocomplete2Component } from '../../utils/staticAutoComplete2.co
</ul> </ul>
</div> </div>
<static-autocomplete2 [(list)] = concepts [allowDuplicates]=true [showSelected]=false [placeHolderMessage] = "'Search for Concepts'" title = "Concepts:" [multipleSelections]=true (addItem) = "select($event)"></static-autocomplete2> <!--static-autocomplete [(keyword)] = query [(filtered)] =filteredList [(selected)] =selectedList [showSelected]=false placeHolderMessage = "Search for contexts" title = "Contexts:" (keywordChange)="filter($event)" type="context"></static-autocomplete--> <static-autocomplete [(list)] = concepts [allowDuplicates]=true [showSelected]=false [placeHolderMessage] = "'Search for Concepts'" title = "Concepts:" [multipleSelections]=true (addItem) = "select($event)" > </static-autocomplete>
</div> </div>
</div> </div>
@ -76,7 +77,7 @@ export class ClaimContextComponent {
@Input() public selectedCategoryId:string ="0"; @Input() public selectedCategoryId:string ="0";
@Output() cselectedCommunityChange = new EventEmitter(); @Output() cselectedCommunityChange = new EventEmitter();
@Output() selectedCategoryChange = new EventEmitter(); @Output() selectedCategoryChange = new EventEmitter();
@ViewChild (StaticAutocomplete2Component) autocomplete : StaticAutocomplete2Component ; @ViewChild (StaticAutoCompleteComponent) autocomplete : StaticAutoCompleteComponent ;
public query = ''; public query = '';
public filteredList = []; public filteredList = [];

6
portal-2/src/app/searchPages/searchUtils/advancedSearchForm.component.ts
View File

@ -38,13 +38,13 @@ import {SearchFields} from '../../utils/properties/searchFields';
<div *ngIf = "fieldIdsMap[selectedField.id].type == 'vocabulary'" class="input-group"> <div *ngIf = "fieldIdsMap[selectedField.id].type == 'vocabulary'" class="input-group">
<static-autocomplete2 [(vocabularyId)] = selectedField.id [(list)] = this.fieldList[selectedField.id] [entityName] = "entityType" [selectedValue]=selectedField.value [showSelected]=true [placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name" [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete2> <static-autocomplete [(vocabularyId)] = selectedField.id [(list)] = this.fieldList[selectedField.id] [entityName] = "entityType" [selectedValue]=selectedField.value [showSelected]=true [placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name" [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete>
</div> </div>
<div *ngIf = "fieldIdsMap[selectedField.id].type == 'refine'" class="input-group"> <div *ngIf = "fieldIdsMap[selectedField.id].type == 'refine'" class="input-group">
<static-autocomplete2 [(list)] = this.fieldList[selectedField.id] [entityName] = "entityType" [fieldName] = fieldIdsMap[selectedField.id].indexField [selectedValue]=selectedField.value [showSelected]=true [placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name" [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete2> <static-autocomplete [(list)] = this.fieldList[selectedField.id] [entityName] = "entityType" [fieldName] = fieldIdsMap[selectedField.id].indexField [selectedValue]=selectedField.value [showSelected]=true [placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name" [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete>
</div> </div>
<div *ngIf = "fieldIdsMap[selectedField.id].type == 'entity'" class="input-group"> <div *ngIf = "fieldIdsMap[selectedField.id].type == 'entity'" class="input-group">
<!--static-autocomplete2 [(list)] = this.fieldList[selectedField.id] [entityName] = "entityType" [fieldName] = fieldIdsMap[selectedField.id].indexField [selectedValue]=selectedField.value [showSelected]=true [placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name" [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete2--> <!--static-autocomplete [(list)] = this.fieldList[selectedField.id] [entityName] = "entityType" [fieldName] = fieldIdsMap[selectedField.id].indexField [selectedValue]=selectedField.value [showSelected]=true [placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name" [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete-->
<entities-autocomplete [entityType]=selectedField.id [selectedValue]=selectedField.value [showSelected]=true <entities-autocomplete [entityType]=selectedField.id [selectedValue]=selectedField.value [showSelected]=true
[placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name" [multipleSelections]=false [placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name" [multipleSelections]=false
(selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)" (selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"

20
portal-2/src/app/services/entitySearch.service.ts
View File

@ -14,7 +14,7 @@ export class EntitiesSearchService {
constructor(private http: Http, public _cache: CacheService) {} constructor(private http: Http, public _cache: CacheService) {}
searchProjectsByFunder(keyword:string, funderId:string):any { searchProjectsByFunder(keyword:string, funderId:string):any {
let url = OpenaireProperties. getSearchAPIURLLast()+"projects?"+((keyword && keyword.length > 0)?("q=" +keyword):"")+"&fq=funderid exact " + '"'+funderId+ '"'+"&size=10&page=0&format=json"; let url = OpenaireProperties. getSearchAPIURLLast()+"projects?"+((keyword && keyword.length > 0)?("q=" +keyword):"")+((funderId && funderId.length > 0 )?"&fq=funderid exact " + '"'+funderId+ '"':"")+"&size=10&page=0&format=json";
return this.http.get(url).toPromise() return this.http.get(url).toPromise()
.then(request => .then(request =>
{ {
@ -91,6 +91,24 @@ private fetch (link,id,oafEntityType,type){
} }
// private search (link,keyword,oafEntityType,type){
// let url = link+"?";
// if(keyword!= null && keyword != '' ) {
// url += "q="+ keyword;
// }
//
// url += "&page=0&size="+10+"&format=json";
// return this.http.get(url)
// .map(res => <any> res.json().results)
// .map(res => <any> this.parse(res,oafEntityType,type));
// // .then(request =>
// // {
// // request = request.json().results;
// // return this.parse(request,oafEntityType,type);
// // });
//
//
// }
private parse(data: any,oafEntityType:string, type:string){ private parse(data: any,oafEntityType:string, type:string){
var array:any =[] var array:any =[]
let length = Array.isArray(data) ? data.length : 1; let length = Array.isArray(data) ? data.length : 1;

7
portal-2/src/app/test/test.component.ts
View File

@ -14,10 +14,10 @@ import {Dates} from '../utils/dates.class';
template: ` template: `
<!--i-frame url="https://google.com" width="30%" height="250"></i-frame--> <!--i-frame url="https://google.com" width="30%" height="250"></i-frame-->
<div style ="width:30%; height:250px;" > <div style ="width:30%; height:250px;" >
<!--static-autocomplete2 [(list)]=lan [(filtered)] =filtered [(selected)] =selected [showSelected]=true placeHolderMessage = "Search for languages" title = "Languages:" [multipleSelections]=false ></static-autocomplete2--> <!--static-autocomplete [(list)]=lan [(filtered)] =filtered [(selected)] =selected [showSelected]=true placeHolderMessage = "Search for languages" title = "Languages:" [multipleSelections]=false ></static-autocomplete-->
<div> <div>
<div style ="width:30%; height:250px;" > <div style ="width:30%; height:250px;" >
<static-autocomplete [(filtered)] =filtered [(selected)] =selected [showSelected]=true placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)" ></static-autocomplete>
<div> <div>
Selected:: Selected::
<span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" > <span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" >
@ -25,8 +25,7 @@ Selected::
</span> </span>
<div style ="width:80%; height:250px;" > <div style ="width:80%; height:250px;" >
<dynamic-autocomplete [showSelected]=true
placeHolderMessage = "Search for Projects" title = "Projects:" ></dynamic-autocomplete>
<div> <div>
<div class="container" > <div class="container" >
<div class="title"> <div class="title">

178
portal-2/src/app/utils/dynamicAutoComplete.component.ts
View File

@ -1,178 +0,0 @@
import {Component, ElementRef, Input, Output, EventEmitter} from '@angular/core';
import {Value} from '../searchPages/searchUtils/searchHelperClasses.class';
import {ClaimResult, ClaimContext, ClaimProject} from './entities/claimEntities.class';
import {Observable} from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import {OpenaireProjectsService} from '../services/openaireProjects.service';
//Usage example
//<dynamic-autocomplete [(filtered)] =filtered [(selected)] =selected placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)"></dynamic-autocomplete>
@Component({
selector: 'dynamic-autocomplete',
styleUrls: ['autoComplete.component.css'],
template: `
<!--div class="bs-docs-grid">
<div class = "row-fluid form-inline auto-complete-box panel panel-default">
<div class="panel-heading">{{title}}</div>
<div class="panel-body"-->
<div class="custom-autocomplete">
<span *ngIf = "showSelected">
<span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" >
<span >{{showItem(item)}} </span>
<span (click)="remove(item)" aria-hidden="true" class=" remove glyphicon glyphicon-remove"></span>
</span>
</span>
<input type="text" class="auto-complete-input validate filter-input input-sm form-control " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=search() >
<div class="suggestions" >
<ul class="list-group" >
<li class="list-group-item" *ngFor=" let item of filtered | async">
<a (click)="select(item)">{{showItem(item)}}</a>
</li>
</ul>
</div>
<div class="messages">
<div *ngIf="warningMessage.length > 0" class="alert alert-warning row-fluid " role="alert">{{warningMessage}}</div>
<div *ngIf="filtered.length == 0 && keyword.length >=3 " class="alert alert-info row-fluid " role="alert">No results Found</div>
</div>
</div>
<!--/div>
</div>
</div-->
`
})
export class DynamicAutocompleteComponent {
@Input() placeHolderMessage = "Search for entries";
@Input() title = "Autocomplete";
@Input() public selected = []; // the entries selected from user
@Input() public keywordlimit = 3; // the minimum length of keyword
@Input() public showSelected = true; // the minimum length of keyword
@Input() public keyword = '';
@Input() public type = 'search' //search, result, context, project
// @Output() keywordChange = new EventEmitter(); // when changed a method for filtering will be called
// @Output() addNew = new EventEmitter(); // when changed a method for filtering will be called
// @Input() public selectedFunderId = "";
@Input() searchTermStream = new Subject<string>();
@Input() filtered: Observable<{}> = this.searchTermStream
.debounceTime(300).distinctUntilChanged()
.switchMap((term: string) => this.service(term));
private warningMessage = "";
private infoMessage = "";
private tries = 0;
constructor(private _projectService: OpenaireProjectsService,myElement: ElementRef) {
// this.elementRef = myElement;
}
service(term) {
console.info("In service: "+ projects);
var projects = this._projectService.searchForProjectsObs(term, "");
console.info("Results: "+ projects);
for( var i = 0 ; i<projects.length ; i++){
}
return projects;
}
search() {
console.info("heeere "+this.keyword );
this.infoMessage = "";
// this.filtered = [];
if(this.keyword == ""){
this.tries = 0;
this.warningMessage = "";
} else if(this.keyword && this.keyword.length < this.keywordlimit){
this.tries++;
if(this.tries == this.keywordlimit -1 ){
this.warningMessage = "Type at least " + this.keywordlimit + " characters";
this.tries = 0;
}
}else{
console.info("doo the search "+this.keyword );
this.tries = 0;
this.warningMessage = "";
this.searchTermStream.next(this.keyword);
}
}
remove(item:any){
var index:number =this.checkIfExists(item,this.selected);
if (index > -1) {
this.selected.splice(index, 1);
}
}
select(item:any){
var index:number =this.checkIfExists(item,this.selected);
if (index > -1) {
this.keyword = "";
// this.filtered.splice(0, this.filtered.length);
return;
}
else{
this.selected.push(item);
this.keyword = "";
// this.filtered.splice(0, this.filtered.length);
}
}
private checkIfExists(item:any,list):number{
console.log("type "+this.type);
if(this.type == "search"){
console.log("Value");
}else if(this.type == "context"){
console.log("context");
for (var _i = 0; _i < list.length; _i++) {
let itemInList = list[_i];
console.log("itemiL "+itemInList.concept.id);
console.log("item "+item.concept.id);
if(item.concept.id == itemInList.concept.id){
return _i;
}
}
}else if(this.type == "project"){
console.log("project");
}else {
console.log("no----");
}
return -1;
}
showItem(item:any):string{
if (item.name){ //search
return item.name;
}else if( item.concept && item.concept.label){ //context
return item.concept.label;
}else if (item.label){ //simple
return item.label;
}
}
// handleClick(event){
// var clickedComponent = event.target;
// var inside = false;
// do {
// if (clickedComponent === this.elementRef.nativeElement) {
// inside = true;
// }
// clickedComponent = clickedComponent.parentNode;
// } while (clickedComponent);
// if(!inside){
// this.filteredList = [];
// }
// }
}

28
portal-2/src/app/utils/entitiesAutoComplete.component.ts
View File

@ -23,7 +23,7 @@ import {EntitiesSearchService} from '../services/entitySearch.service';
</div> </div>
<input *ngIf = "showInput" type="text" class="auto-complete-input validate filter-input input-sm form-control " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=search() > <input *ngIf = "showInput" type="text" class="auto-complete-input validate filter-input input-sm form-control " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=search() >
<div *ngIf = "keyword != null && keyword.length > 0 " class="suggestions" > <div *ngIf = "keyword != null && keyword.length > 0 " class="suggestions" >
<div *ngIf="showLoading" class="alert alert-info row-fluid " role="alert"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></div> <div *ngIf="showLoading" class="alert alert-info row-fluid " role="alert">Loading... <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></div>
<ul class="list-group" > <ul class="list-group" >
<li *ngIf = "filtered.length > 0 " class="list-group-item" > <li *ngIf = "filtered.length > 0 " class="list-group-item" >
Select: Select:
@ -66,6 +66,7 @@ export class EntitiesAutocompleteComponent {
private showLoading:boolean = false; private showLoading:boolean = false;
private searchTermStream = new Subject<string>(); private searchTermStream = new Subject<string>();
filtered: Observable<{}> ; filtered: Observable<{}> ;
private numFilteredResults:number = 0;
@Input() public funderId:string; @Input() public funderId:string;
@Input() public entityType:string ; @Input() public entityType:string ;
@ -76,10 +77,15 @@ export class EntitiesAutocompleteComponent {
} }
ngOnInit () { ngOnInit () {
if(this.entityType == "project" && this.funderId && this.funderId.length > 0){ if(this.entityType == "project" && this.funderId ){
this.filtered = this.searchTermStream this.filtered = this.searchTermStream
.debounceTime(300).distinctUntilChanged() .debounceTime(300).distinctUntilChanged()
.switchMap((term: string) => this._search.searchProjectsByFunder(term, this.funderId)); .switchMap((term: string) => {
var results = this._search.searchProjectsByFunder(term, (this.funderId == "0"?"":this.funderId));
this.showLoading = false;
this.numFilteredResults = results.length;
return results;
});
}else{ }else{
this.filtered = this.searchTermStream this.filtered = this.searchTermStream
@ -87,8 +93,21 @@ export class EntitiesAutocompleteComponent {
.switchMap((term: string) => { .switchMap((term: string) => {
var results = this._search.searchByType(term, this.entityType); var results = this._search.searchByType(term, this.entityType);
this.showLoading = false; this.showLoading = false;
this.numFilteredResults = results.length;
return results; return results;
}); });
// this.filtered =
// this.searchTermStream
// .debounceTime(300).distinctUntilChanged()
// .switchMap((term: string) => {
// var results = this._search.searchByType(term, this.entityType);
// this.showLoading = false;
// return results;
// });
//
// .subscribe(term => this.wikipediaService.search(term).then(items => this.items = items));
// // }
this.getSelectedNameFromGivenId(); this.getSelectedNameFromGivenId();
} }
@ -115,8 +134,10 @@ export class EntitiesAutocompleteComponent {
this.tries = 0; this.tries = 0;
this.warningMessage = ""; this.warningMessage = "";
this.searchTermStream.next(this.keyword); this.searchTermStream.next(this.keyword);
if(this.numFilteredResults ==0){
this.showLoading = true; this.showLoading = true;
} }
}
} }
@ -221,6 +242,7 @@ export class EntitiesAutocompleteComponent {
} while (clickedComponent); } while (clickedComponent);
if(!inside){ if(!inside){
this.keyword = ""; this.keyword = "";
this.numFilteredResults = 0;
this.searchTermStream.next(this.keyword); this.searchTermStream.next(this.keyword);
} }
} }

198
portal-2/src/app/utils/staticAutoComplete.component.ts
View File

@ -1,92 +1,173 @@
import {Component, ElementRef, Input, Output, EventEmitter} from '@angular/core'; import {Component, ElementRef, Input, Output, EventEmitter} from '@angular/core';
import {Value} from '../searchPages/searchUtils/searchHelperClasses.class'; import {Value} from '../searchPages/searchUtils/searchHelperClasses.class';
import {ClaimResult, ClaimContext, ClaimProject} from './entities/claimEntities.class'; import {ISVocabulariesService} from '../services/ISVocabularies.service';
import {RefineFieldResultsService} from '../services/refineFieldResults.service';
//Usage example //Usage example
//<static-autocomplete [(filtered)] =filtered [(selected)] =selected placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)"></static-autocomplete> //<static-autocomplete [(filtered)] =filtered [(selected)] =selected placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)"></static-autocomplete>
@Component({ @Component({
selector: 'static-autocomplete', selector: 'static-autocomplete',
styleUrls: ['autoComplete.component.css'], styleUrls: ['autoComplete.component.css'],
host: {
'(document:click)': 'handleClick($event)',
},
template: ` template: `
<div class="bs-docs-grid"> <div class="custom-autocomplete">
<div class = "row-fluid form-inline auto-complete-box panel panel-default"> <div *ngIf = "showSelected && selectedValue != ''">
<div class="panel-heading">{{title}}</div> <div class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" >
<div class="panel-body">
<span *ngIf = "showSelected">
<span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" >
<span >{{showItem(item)}} </span> <span >{{showItem(item)}} </span>
<span (click)="remove(item)" aria-hidden="true" class=" remove glyphicon glyphicon-remove"></span> <span (click)="remove(item)" aria-hidden="true" title="Remove selection" class=" remove glyphicon glyphicon-remove"></span>
</span> </div>
</span> </div>
<input type="text" class="auto-complete-input validate filter-input input-sm form-control " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=filter() > <input *ngIf = "showInput" type="text" class="auto-complete-input validate filter-input input-sm form-control " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=filter() >
<div class="suggestions" *ngIf="filtered.length > 0"> <div class="suggestions" *ngIf="filtered.length > 0">
<ul class="list-group" > <ul class="list-group" >
<li class="list-group-item" >
Select:
</li>
<li class="list-group-item" *ngFor=" let item of filtered"> <li class="list-group-item" *ngFor=" let item of filtered">
<a (click)="select(item)">{{showItem(item)}}</a> <a (click)="select(item)">{{showItem(item)}}</a>
</li> </li>
</ul> </ul>
</div> </div>
<div *ngIf="warningMessage.length > 0" class="alert alert-warning row-fluid " role="alert">{{warningMessage}}</div> <div class="messages">
<div *ngIf="filtered.length == 0 && keyword.length >=3 " class="alert alert-info row-fluid " role="alert">No results Found</div> <div *ngIf="showLoading" class="alert alert-info row-fluid " role="alert">Loading... <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></div>
</div> <div *ngIf="warningMessage.length > 0" class="alert alert-warning row-fluid " role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>{{warningMessage}}</div>
<div *ngIf="filtered.length == 0 && keyword.length >=3 " class="alert alert-info row-fluid " role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>No results found</div>
</div> </div>
</div> </div>
` `
}) })
export class StaticAutocompleteComponent { export class StaticAutoCompleteComponent {
@Input() placeHolderMessage = "Search for entries"; @Input() placeHolderMessage = "Search for entries";
@Input() title = "Autocomplete"; @Input() title = "Autocomplete";
@Output() keywordChange = new EventEmitter(); // when changed a method for filtering will be called @Output() addItem = new EventEmitter(); // when selected list changes update parent component
@Output() addNew = new EventEmitter(); // when changed a method for filtering will be called @Output() selectedValueChanged = new EventEmitter(); // when changed a method for filtering will be called
@Output() listUpdated = new EventEmitter(); // when changed a method for filtering will be called
@Input() public list = []; // the entries resulted after filtering function @Input() public list = []; // the entries resulted after filtering function
@Input() public filtered = []; // the entries resulted after filtering function @Input() public filtered = []; // the entries resulted after filtering function
@Input() public selected = []; // the entries selected from user @Input() public selected = []; // the entries selected from user
@Input() public keywordlimit = 3; // the minimum length of keyword @Input() public keywordlimit = 3; // the minimum length of keyword
@Input() public showSelected = true; // the minimum length of keyword @Input() public showSelected = true; // the minimum length of keyword
@Input() public multipleSelections:boolean = true; @Input() public multipleSelections:boolean = true;
@Input() public allowDuplicates:boolean = false;
@Input() public selectedValue:string = '';
@Input() public vocabularyId:string ;
@Input() public fieldName:string ;
@Input() public entityName:string ;
@Input() public keyword = ''; @Input() public keyword = '';
@Input() public type = 'search' //search, result, context, project @Input() public type = 'search' //search, result, context, project
private warningMessage = ""; private warningMessage = "";
private infoMessage = ""; private infoMessage = "";
private showLoading:boolean = false;
private tries = 0; private tries = 0;
private showInput = true;
private sub;
private done = false;
constructor ( private _vocabulariesService: ISVocabulariesService,private _refineService: RefineFieldResultsService, private myElement: ElementRef) {
}
ngOnDestroy(){
if(this.sub && this.sub != undefined){
this.sub.unsubscribe();
}
}
ngOnInit () {
if(this.list == undefined || this.list.length == 0){
this.showLoading = true;
if(this.vocabularyId){
this.list = this._vocabulariesService.getVocabularyByType(this.vocabularyId, this.entityName);
this.afterListFetchedActions();
}else if(this.fieldName && this.entityName){
this.list = this._refineService.getRefineFieldResultsByFieldName(this.fieldName,this.entityName);
this.sub = this._refineService.getRefineFieldResultsByFieldName(this.fieldName,this.entityName).subscribe(
data => {
this.list = data;
this.afterListFetchedActions();
},
err => {
console.error(err);
this.warningMessage = "An Error occured..."
}
);
}
}else{
this.afterListFetchedActions();
}
}
public updateList(list){ // used in claim context autocomplete
this.list = list;
this.afterListFetchedActions()
}
private afterListFetchedActions(){
this.showLoading = false;
this.getSelectedNameFromGivenId();
this.listUpdated.emit({
value: this.list
});
if(this.list == null || this.list.length == 0 ){
this.warningMessage = "There are no results";
return;
}
this.done = true;
if(this.keyword != ""){
this.filter();
}
constructor () {
console.info("Type"+this.type);
} }
filter() { filter() {
if(this.done){
this.infoMessage = ""; this.infoMessage = "";
this.filtered = []; this.filtered = [];
if(this.keyword == ""){ if(this.keyword == ""){
var cut = 5;
if(this.list.length < 5){
cut = this.list.length;
}
this.filtered =this.list.slice(0, cut);
this.tries = 0; this.tries = 0;
this.warningMessage = ""; this.warningMessage = "";
} else if(this.keyword && this.keyword.length < this.keywordlimit){ // } else if(this.keyword && this.keyword.length < this.keywordlimit){
this.tries++; // this.tries++;
if(this.tries == this.keywordlimit -1 ){ // if(this.tries == this.keywordlimit -1 ){
this.warningMessage = "Type at least " + this.keywordlimit + " characters"; // this.warningMessage = "Type at least " + this.keywordlimit + " characters";
this.tries = 0; // this.tries = 0;
} // }
}else{ }else{
this.tries = 0; this.tries = 0;
this.warningMessage = ""; this.warningMessage = "";
this.keywordChange.emit({ this.filtered = this.list.filter(function(el){
value: this.keyword return el.label.toLowerCase().indexOf(this.keyword.toLowerCase()) > -1;
}); }.bind(this));
} }
} }
}
remove(item:any){ remove(item:any){
var index:number =this.checkIfExists(item,this.selected); var index:number =this.checkIfExists(item,this.selected);
if (index > -1) { if (index > -1) {
this.selected.splice(index, 1); this.selected.splice(index, 1);
} }
if(!this.multipleSelections && this.selected.length == 0 ){
this.showInput = true;
this.selectedValue = "";
this.selectedValueChanged.emit({
value: this.selectedValue
});
} }
}
select(item:any){ select(item:any){
// console.log("select"+this.selected.length + item.id + " "+ item.label);
if(this.multipleSelections){
var index:number =this.checkIfExists(item,this.selected); var index:number =this.checkIfExists(item,this.selected);
if (index > -1) { if (index > -1 && !this.allowDuplicates) {
this.keyword = ""; this.keyword = "";
this.filtered.splice(0, this.filtered.length); this.filtered.splice(0, this.filtered.length);
return; return;
@ -95,12 +176,28 @@ export class StaticAutocompleteComponent {
this.selected.push(item); this.selected.push(item);
this.keyword = ""; this.keyword = "";
this.filtered.splice(0, this.filtered.length); this.filtered.splice(0, this.filtered.length);
this.addItem.emit({
value: item
});
} }
}else{
this.selected.splice(0, this.selected.length);
this.selected.push(item);
this.filtered.splice(0, this.filtered.length);
this.keyword = "";
this.showInput = false;
this.selectedValue = item.id;
this.selectedValueChanged.emit({
value: this.selectedValue
});
}
console.log("selected"+this.selected.length );
} }
private checkIfExists(item:any,list):number{ private checkIfExists(item:any,list):number{
if(item.concept && item.concept.id ){ if(item.concept && item.concept.id ){
console.log("context");
for (var _i = 0; _i < list.length; _i++) { for (var _i = 0; _i < list.length; _i++) {
let itemInList = list[_i]; let itemInList = list[_i];
@ -130,20 +227,31 @@ export class StaticAutocompleteComponent {
} }
} }
private getSelectedNameFromGivenId(){
if(this.list == null ){
return;
}
for( var i = 0; i < this.list.length; i++){
if(this.list[i].id == this.selectedValue){
this.selectedValue = this.list[i].label;
this.selected.push(this.list[i]);
this.showInput = false;
}
}
}
handleClick(event){
// handleClick(event){ var clickedComponent = event.target;
// var clickedComponent = event.target; var inside = false;
// var inside = false; do {
// do { if (clickedComponent === this.myElement.nativeElement) {
// if (clickedComponent === this.elementRef.nativeElement) { inside = true;
// inside = true; }
// } clickedComponent = clickedComponent.parentNode;
// clickedComponent = clickedComponent.parentNode; } while (clickedComponent);
// } while (clickedComponent); if(!inside){
// if(!inside){ this.filtered.splice(0, this.filtered.length);;
// this.filteredList = []; }
// } }
// }
} }

258
portal-2/src/app/utils/staticAutoComplete2.component.ts
View File

@ -1,258 +0,0 @@
import {Component, ElementRef, Input, Output, EventEmitter} from '@angular/core';
import {Value} from '../searchPages/searchUtils/searchHelperClasses.class';
import {ISVocabulariesService} from '../services/ISVocabularies.service';
import {RefineFieldResultsService} from '../services/refineFieldResults.service';
//Usage example
//<static-autocomplete [(filtered)] =filtered [(selected)] =selected placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)"></static-autocomplete>
@Component({
selector: 'static-autocomplete2',
styleUrls: ['autoComplete.component.css'],
host: {
'(document:click)': 'handleClick($event)',
},
template: `
<div class="custom-autocomplete">
<div *ngIf = "showSelected && selectedValue != ''">
<div class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" >
<span >{{showItem(item)}} </span>
<span (click)="remove(item)" aria-hidden="true" title="Remove selection" class=" remove glyphicon glyphicon-remove"></span>
</div>
</div>
<input *ngIf = "showInput" type="text" class="auto-complete-input validate filter-input input-sm form-control " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=filter() >
<div class="suggestions" *ngIf="filtered.length > 0">
<ul class="list-group" >
<li class="list-group-item" >
Select:
</li>
<li class="list-group-item" *ngFor=" let item of filtered">
<a (click)="select(item)">{{showItem(item)}}</a>
</li>
</ul>
</div>
<div class="messages">
<div *ngIf="warningMessage.length > 0" class="alert alert-warning row-fluid " role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>{{warningMessage}}</div>
<div *ngIf="filtered.length == 0 && keyword.length >=3 " class="alert alert-info row-fluid " role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>No results found</div>
</div>
</div>
`
})
export class StaticAutocomplete2Component {
@Input() placeHolderMessage = "Search for entries";
@Input() title = "Autocomplete";
@Output() addItem = new EventEmitter(); // when selected list changes update parent component
@Output() selectedValueChanged = new EventEmitter(); // when changed a method for filtering will be called
@Output() listUpdated = new EventEmitter(); // when changed a method for filtering will be called
@Input() public list = []; // the entries resulted after filtering function
@Input() public filtered = []; // the entries resulted after filtering function
@Input() public selected = []; // the entries selected from user
@Input() public keywordlimit = 3; // the minimum length of keyword
@Input() public showSelected = true; // the minimum length of keyword
@Input() public multipleSelections:boolean = true;
@Input() public allowDuplicates:boolean = false;
@Input() public selectedValue:string = '';
@Input() public vocabularyId:string ;
@Input() public fieldName:string ;
@Input() public entityName:string ;
@Input() public keyword = '';
@Input() public type = 'search' //search, result, context, project
private warningMessage = "";
private infoMessage = "";
private tries = 0;
private showInput = true;
private sub;
private done = false;
constructor ( private _vocabulariesService: ISVocabulariesService,private _refineService: RefineFieldResultsService, private myElement: ElementRef) {
}
ngOnDestroy(){
if(this.sub && this.sub != undefined){
this.sub.unsubscribe();
}
}
ngOnInit () {
console.log("auto complete init : list length"+this.list.length);
if(this.list == undefined || this.list.length == 0){
if(this.vocabularyId){
this.list = this._vocabulariesService.getVocabularyByType(this.vocabularyId, this.entityName);
this.afterListFetchedActions();
}else if(this.fieldName && this.entityName){
this.list = this._refineService.getRefineFieldResultsByFieldName(this.fieldName,this.entityName);
this.sub = this._refineService.getRefineFieldResultsByFieldName(this.fieldName,this.entityName).subscribe(
data => {
this.list = data;
this.afterListFetchedActions();
},
err => {
console.error(err);
this.warningMessage = "An Error occured..."
}
);
}
}else{
console.log("auto complete init : list length"+this.list.length);
this.afterListFetchedActions();
}
}
public updateList(list){ // used in claim context autocomplete
this.list = list;
this.afterListFetchedActions()
}
private afterListFetchedActions(){
this.getSelectedNameFromGivenId();
this.listUpdated.emit({
value: this.list
});
if(this.list == null || this.list.length == 0 ){
this.warningMessage = "There are no results";
return;
}
this.done = true;
if(this.keyword != ""){
this.filter();
}
}
filter() {
if(this.done){
this.infoMessage = "";
this.filtered = [];
if(this.keyword == ""){
var cut = 5;
if(this.list.length < 5){
cut = this.list.length;
}
this.filtered =this.list.slice(0, cut);
this.tries = 0;
this.warningMessage = "";
// } else if(this.keyword && this.keyword.length < this.keywordlimit){
// this.tries++;
// if(this.tries == this.keywordlimit -1 ){
// this.warningMessage = "Type at least " + this.keywordlimit + " characters";
// this.tries = 0;
// }
}else{
this.tries = 0;
this.warningMessage = "";
this.filtered = this.list.filter(function(el){
return el.label.toLowerCase().indexOf(this.keyword.toLowerCase()) > -1;
}.bind(this));
}
}
}
remove(item:any){
var index:number =this.checkIfExists(item,this.selected);
if (index > -1) {
this.selected.splice(index, 1);
}
if(!this.multipleSelections && this.selected.length == 0 ){
this.showInput = true;
this.selectedValue = "";
this.selectedValueChanged.emit({
value: this.selectedValue
});
}
}
select(item:any){
// console.log("select"+this.selected.length + item.id + " "+ item.label);
if(this.multipleSelections){
var index:number =this.checkIfExists(item,this.selected);
if (index > -1 && !this.allowDuplicates) {
this.keyword = "";
this.filtered.splice(0, this.filtered.length);
return;
}
else{
this.selected.push(item);
this.keyword = "";
this.filtered.splice(0, this.filtered.length);
this.addItem.emit({
value: item
});
}
}else{
this.selected.splice(0, this.selected.length);
this.selected.push(item);
this.filtered.splice(0, this.filtered.length);
this.keyword = "";
this.showInput = false;
this.selectedValue = item.id;
this.selectedValueChanged.emit({
value: this.selectedValue
});
}
console.log("selected"+this.selected.length );
}
private checkIfExists(item:any,list):number{
if(item.concept && item.concept.id ){
for (var _i = 0; _i < list.length; _i++) {
let itemInList = list[_i];
if(item.concept.id == itemInList.concept.id){
return _i;
}
}
}else if(item.id){
for (var _i = 0; _i < list.length; _i++) {
let itemInList = list[_i];
if(item.id == itemInList.id){
return _i;
}
}
}
return -1;
}
showItem(item:any):string{
if (item.name){ //search
return item.name;
}else if( item.concept && item.concept.label){ //context
return item.concept.label;
}else if (item.label){ //simple
return item.label;
}
}
private getSelectedNameFromGivenId(){
if(this.list == null ){
return;
}
for( var i = 0; i < this.list.length; i++){
if(this.list[i].id == this.selectedValue){
this.selectedValue = this.list[i].label;
this.selected.push(this.list[i]);
this.showInput = false;
}
}
}
handleClick(event){
var clickedComponent = event.target;
var inside = false;
do {
if (clickedComponent === this.myElement.nativeElement) {
inside = true;
}
clickedComponent = clickedComponent.parentNode;
} while (clickedComponent);
if(!inside){
this.filtered.splice(0, this.filtered.length);;
}
}
}

12
portal-2/src/app/utils/utils.module.ts
View File

@ -8,10 +8,8 @@ import {pagingFormatterNoLoad} from './pagingFormatterNoLoad.component';
import {ProjectTitleFormatter} from './projectTitleFormatter.component'; import {ProjectTitleFormatter} from './projectTitleFormatter.component';
import {PublicationTitleFormatter} from './publicationTitleFormatter.component'; import {PublicationTitleFormatter} from './publicationTitleFormatter.component';
import {PagingFormatter} from './pagingFormatter.component'; import {PagingFormatter} from './pagingFormatter.component';
import {StaticAutocompleteComponent} from './staticAutoComplete.component'; import {StaticAutoCompleteComponent} from './staticAutoComplete.component';
import {StaticAutocomplete2Component} from './staticAutoComplete2.component';
import {EntitiesAutocompleteComponent} from './entitiesAutoComplete.component'; import {EntitiesAutocompleteComponent} from './entitiesAutoComplete.component';
import {DynamicAutocompleteComponent} from './dynamicAutoComplete.component';
import {ShowDataProvidersComponent} from './showDataProviders.component'; import {ShowDataProvidersComponent} from './showDataProviders.component';
import {ExportCSVComponent} from './exportCSV.component'; import {ExportCSVComponent} from './exportCSV.component';
import {IFrameComponent} from './iframe.component'; import {IFrameComponent} from './iframe.component';
@ -28,9 +26,7 @@ import {ModalLoading} from './modal/loading.component';
ProjectTitleFormatter, ProjectTitleFormatter,
PublicationTitleFormatter, PublicationTitleFormatter,
PagingFormatter, PagingFormatter,
StaticAutocompleteComponent, StaticAutoCompleteComponent,
StaticAutocomplete2Component,
DynamicAutocompleteComponent,
EntitiesAutocompleteComponent, EntitiesAutocompleteComponent,
ShowDataProvidersComponent, ShowDataProvidersComponent,
ExportCSVComponent, ExportCSVComponent,
@ -43,9 +39,7 @@ import {ModalLoading} from './modal/loading.component';
PublicationTitleFormatter, PublicationTitleFormatter,
PagingFormatter, PagingFormatter,
AlertModal, ModalLoading, AlertModal, ModalLoading,
StaticAutocompleteComponent, StaticAutoCompleteComponent,
StaticAutocomplete2Component,
DynamicAutocompleteComponent,
EntitiesAutocompleteComponent, EntitiesAutocompleteComponent,
ShowDataProvidersComponent, ShowDataProvidersComponent,
ExportCSVComponent, ExportCSVComponent,