MaDgIK
/
explore-services
13
0
Fork 0
Code Issues Pull Requests Projects Releases 19 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 {ContextsService} from '../../services/contexts.service';
import {ClaimContext} from '../../utils/entities/claimEntities.class';
import { StaticAutocomplete2Component } from '../../utils/staticAutoComplete2.component';
import { StaticAutoCompleteComponent } from '../../utils/staticAutoComplete.component';
@Component({
selector: 'claim-contexts',
@ -32,7 +32,7 @@ import { StaticAutocomplete2Component } from '../../utils/staticAutoComplete2.co
</ul>
</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 class="panel-body" *ngIf=" inline && showComponent ">
@ -59,7 +59,8 @@ import { StaticAutocomplete2Component } from '../../utils/staticAutoComplete2.co
</ul>
</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>
@ -76,7 +77,7 @@ export class ClaimContextComponent {
@Input() public selectedCategoryId:string ="0";
@Output() cselectedCommunityChange = new EventEmitter();
@Output() selectedCategoryChange = new EventEmitter();
@ViewChild (StaticAutocomplete2Component) autocomplete : StaticAutocomplete2Component ;
@ViewChild (StaticAutoCompleteComponent) autocomplete : StaticAutoCompleteComponent ;
public query = '';
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">
<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 *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 *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
[placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name" [multipleSelections]=false
(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) {}
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()
.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){
var array:any =[]
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: `
<!--i-frame url="https://google.com" width="30%" height="250"></i-frame-->
<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 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>
Selected::
<span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" >
@ -25,8 +25,7 @@ Selected::
</span>
<div style ="width:80%; height:250px;" >
<dynamic-autocomplete [showSelected]=true
placeHolderMessage = "Search for Projects" title = "Projects:" ></dynamic-autocomplete>
<div>
<div class="container" >
<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 = [];
// }
// }
}

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

@ -23,7 +23,7 @@ import {EntitiesSearchService} from '../services/entitySearch.service';
</div>
<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="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" >
<li *ngIf = "filtered.length > 0 " class="list-group-item" >
Select:
@ -66,6 +66,7 @@ export class EntitiesAutocompleteComponent {
private showLoading:boolean = false;
private searchTermStream = new Subject<string>();
filtered: Observable<{}> ;
private numFilteredResults:number = 0;
@Input() public funderId:string;
@Input() public entityType:string ;
@ -76,10 +77,15 @@ export class EntitiesAutocompleteComponent {
}
ngOnInit () {
if(this.entityType == "project" && this.funderId && this.funderId.length > 0){
if(this.entityType == "project" && this.funderId ){
this.filtered = this.searchTermStream
.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{
this.filtered = this.searchTermStream
@ -87,8 +93,21 @@ export class EntitiesAutocompleteComponent {
.switchMap((term: string) => {
var results = this._search.searchByType(term, this.entityType);
this.showLoading = false;
this.numFilteredResults = results.length;
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();
}
@ -115,7 +134,9 @@ export class EntitiesAutocompleteComponent {
this.tries = 0;
this.warningMessage = "";
this.searchTermStream.next(this.keyword);
this.showLoading = true;
if(this.numFilteredResults ==0){
this.showLoading = true;
}
}
}
@ -221,6 +242,7 @@ export class EntitiesAutocompleteComponent {
} while (clickedComponent);
if(!inside){
this.keyword = "";
this.numFilteredResults = 0;
this.searchTermStream.next(this.keyword);
}
}

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

@ -1,79 +1,150 @@
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 {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-autocomplete',
styleUrls: ['autoComplete.component.css'],
host: {
'(document:click)': 'handleClick($event)',
},
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">
<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)=filter() >
<div class="suggestions" *ngIf="filtered.length > 0">
<ul class="list-group" >
<li class="list-group-item" *ngFor=" let item of filtered">
<a (click)="select(item)">{{showItem(item)}}</a>
</li>
</ul>
</div>
<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 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="showLoading" class="alert alert-info row-fluid " role="alert">Loading... <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></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() title = "Autocomplete";
@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
@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 showLoading:boolean = false;
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() {
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";
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;
}
}else{
this.tries = 0;
this.warningMessage = "";
this.keywordChange.emit({
value: this.keyword
});
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){
@ -81,26 +152,52 @@ export class StaticAutocompleteComponent {
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 );
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{
if(item.concept && item.concept.id ){
console.log("context");
for (var _i = 0; _i < list.length; _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){
// var clickedComponent = event.target;
// var inside = false;
// do {
// if (clickedComponent === this.elementRef.nativeElement) {
// inside = true;
// }
// clickedComponent = clickedComponent.parentNode;
// } while (clickedComponent);
// if(!inside){
// this.filteredList = [];
// }
// }
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);;
}
}
}

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);;
}
}
}

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