Use vocabularies from APIs | apply uikit changes to advanced form

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@45022 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2016-12-21 16:34:35 +00:00
parent 5b85c7759e
commit bb12a21fe3
6 changed files with 177 additions and 154 deletions

View File

@ -1,4 +1,4 @@
import {Component, Input, Output, EventEmitter} from '@angular/core';
import {Component, Input, Output, EventEmitter, ElementRef} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
@ -9,42 +9,40 @@ import {Dates} from '../../utils/string-utils.class';
@Component({
selector: 'advanced-search-form',
template: `
<form class="">
<div *ngFor="let selectedField of selectedFields; let i = index" class="form-group form-inline">
<div *ngIf = "i != 0" class="input-group">
<button type="button" id="dropdownMenu1" data-toggle="dropdown" class="uk-button dropdown-toggle" aria-haspopup="true" aria-expanded="true">
{{selectedField.operatorId}}
<form class="uk-form">
<div *ngFor="let selectedField of selectedFields; let i = index" class="uk-form-row ">
<button type="button" class="uk-button uk-button-danger" *ngIf="selectedFields.length > 1" (click)="removeField(i)">
<i class="uk-icon-minus"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li *ngFor="let op of operators">
<a (click)="fieldOperatorChanged(i, op.id, op.id)">{{op.id}}</a>
</li>
</ul>
</div>
<div class="input-group">
<div class="input-group-btn">
<button class="uk-button btn-disabled" type="button">
<div *ngIf = "i != 0" data-uk-dropdown="{mode:'click'}" aria-haspopup="true" aria-expanded="false" class="uk-button-dropdown">
<button class="uk-button">{{selectedField.operatorId}} <i class="uk-icon-caret-down"></i></button>
<div class="uk-dropdown uk-dropdown-bottom" aria-hidden="true" style="top: 30px; left: 0px;" tabindex="">
<ul class="uk-nav uk-nav-dropdown">
<li *ngFor="let op of operators">
<a (click)="fieldOperatorChanged(i, op.id, op.id)">{{op.id}}</a>
</li>
</ul>
</div>
</div>
<button class="uk-button uk-button-disabled" type="button">
{{selectedField.name}}
</button>
</div>
<input *ngIf = "fieldIdsMap[selectedField.id].type == 'keyword'" type="text" class="form-control" placeholder="Type keywords..." [(ngModel)]="selectedField.value" name="value[{{i}}]">
<input *ngIf = "fieldIdsMap[selectedField.id].type == 'year'" type="text" class="form-control" placeholder="Type Year..." [(ngModel)]="selectedField.value" name="value[{{i}}]" (keyup)=validateDate(i,selectedField.value)>
<!-- div *ngIf = "fieldIdsMap[selectedField.id].type == 'year' && !selectedField.valid" class="form-control-feedback">Not a valid year. Insert a date between 1000 - 3000</div-->
<div *ngIf = "fieldIdsMap[selectedField.id].type == 'vocabulary'" class="input-group">
<static-autocomplete [(vocabularyId)] = selectedField.param [(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-autocomplete [(list)] = this.fieldList[selectedField.id] [entityName] = "entityType" [fieldName] = [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)"></static-autocomplete>
</div>
<div *ngIf = "fieldIdsMap[selectedField.id].type == 'entity'" class="input-group">
<entities-autocomplete [entityType]=selectedField.param [selectedValue]=selectedField.value [showSelected]=true
<input *ngIf = "fieldIdsMap[selectedField.id].type == 'keyword'" type="text" class="form-control" placeholder="Type keywords..."
[(ngModel)]="selectedField.value" name="value[{{i}}]">
<input *ngIf = "fieldIdsMap[selectedField.id].type == 'year'" type="text" class="form-control" placeholder="Type Year..."
[(ngModel)]="selectedField.value" name="value[{{i}}]" (keyup)=validateDate(i,selectedField.value)>
<static-autocomplete *ngIf = "fieldIdsMap[selectedField.id].type == 'vocabulary'" [(vocabularyId)] = selectedField.param
[(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>
<static-autocomplete *ngIf = "fieldIdsMap[selectedField.id].type == 'refine'" [(list)] = this.fieldList[selectedField.id] [entityName] = "entityType" [fieldName] = [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)"></static-autocomplete>
<entities-autocomplete *ngIf = "fieldIdsMap[selectedField.id].type == 'entity'" [entityType]=selectedField.param [selectedValue]=selectedField.value [showSelected]=true
[placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name" [multipleSelections]=false
(selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)" >
</entities-autocomplete>
</entities-autocomplete>
</div>
<div *ngIf = "fieldIdsMap[selectedField.id].type == 'boolean'" class="input-group">
<span class="input-group-addon">
<input type="radio" [(ngModel)]="selectedField.value" [name]=selectedField.param value="true">Yes<br>
@ -53,33 +51,33 @@ import {Dates} from '../../utils/string-utils.class';
<input type="radio" [(ngModel)]="selectedField.value" [name]=selectedField.param value="false">No<br>
</span>
</div>
</div>
<button type="button" class="btn btn-danger" *ngIf="selectedFields.length > 1" (click)="removeField(i)">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
<div class="form-group form-inline">
<div class=" input-group">
<div class="input-group-btn">
<button aria-expanded="false" aria-haspopup="true" class="uk-button dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" type="button">
{{fieldIdsMap[newFieldId].name}}
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li *ngFor="let id of fieldIds">
<a (click)="fieldIdsChanged(i, id)">{{fieldIdsMap[id].name}}</a>
</li>
</ul>
</div>
<button type="button" class="btn btn-success" (click)="addField()">
<div class="uk-form-row ">
<div data-uk-dropdown="{mode:'click'}" aria-haspopup="true" aria-expanded="false" class="uk-button-dropdown">
<button class="uk-button"> {{fieldIdsMap[newFieldId].name}} <i class="uk-icon-caret-down"></i></button>
<div class="uk-dropdown uk-dropdown-bottom" aria-hidden="true" style="top: 30px; left: 0px;" tabindex="">
<ul class="uk-nav uk-nav-dropdown">
<li *ngFor="let id of fieldIds">
<a (click)="fieldIdsChanged(i, id)">{{fieldIdsMap[id].name}}</a>
</li>
</ul>
</div>
</div>
<button type="button" class="uk-button uk-button-success" (click)="addField()">
<i class="uk-icon-plus"></i>
</button>
</div>
</div>
<div class="uk-form-row uk-text-right">
<button (click)="queryChanged()" type="submit" class="uk-button uk-button-primary">Search</button>
</div>
<button (click)="queryChanged()" type="submit" class="uk-button">Search</button>
</form>
`

View File

@ -10,7 +10,7 @@ import {SearchUtilsClass} from './searchUtils.class';
selector: 'advanced-search-page',
template: `
<div class="container">
<div class="uk-margin-top">
<div class="page-header">
<h1>{{pageTitle}}</h1>
</div>

View File

@ -10,88 +10,89 @@ import { CacheService } from '../shared/cache.service';
@Injectable()
export class ISVocabulariesService {
// private api ="https://beta.services.openaire.eu/provision/mvc/vocabularies/";
private api = "http://api.openaire.eu/vocabularies/"
// private api = "http://api.openaire.eu/vocabularies/"
private api = "http://dev.openaire.research-infrastructures.eu/vocabularies/";
constructor(private http: Http, public _cache: CacheService) {}
getVocabularyByType(field:string,entity:string):AutoCompleteValue[]{
getVocabularyByType(field:string,entity:string):any{
console.log("getVocabulary field: "+ field + " for entity: "+ entity);
var file = "";
var vocabulary = "";
if( field == "lang"){
file="languages.json";
return this.getVocabularyFromFile(file);
// vocabulary = "dnet:languages.json";
// return this.getVocabularyFromService(vocabulary);
// file="languages.json";
// return this.getVocabularyFromFile(file);
vocabulary = "dnet:languages.json";
return this.getVocabularyFromService(vocabulary);
}else if ( field == "type" && (entity == "publication")){
file = "publicationTypes.json";
return this.getVocabularyFromFile(file);
// vocabulary = "dnet:publication_resource.json";
// return this.getVocabularyFromService(vocabulary);
// file = "publicationTypes.json";
// return this.getVocabularyFromFile(file);
vocabulary = "dnet:publication_resource.json";
return this.getVocabularyFromService(vocabulary);
}else if ( field == "type" && (entity == "dataset")){
file = "dnet:dataCite_resource.json";
return this.getVocabularyFromFile(file);
// vocabulary = "dnet:dataCite_resource.json";
// return this.getVocabularyFromService(vocabulary);
// file = "dnet:dataCite_resource.json";
// return this.getVocabularyFromFile(file);
vocabulary = "dnet:dataCite_resource.json";
return this.getVocabularyFromService(vocabulary);
}else if( field == "access" && (entity == "publication" || entity == "dataset")){
file= "accessMode.json";
return this.getVocabularyFromFile(file);
// vocabulary = "dnet:access_modes.json";
// return this.getVocabularyFromService(vocabulary);
// file= "accessMode.json";
// return this.getVocabularyFromFile(file);
vocabulary = "dnet:access_modes.json";
return this.getVocabularyFromService(vocabulary);
} else if( (field == "datasourcetype") && (entity == "dataprovider")){
file = "dataProviderType.json";
return this.getVocabularyFromFile(file);
// vocabulary = "dnet:datasource_typologies.json";
// return this.getVocabularyFromService(vocabulary);
// file = "dataProviderType.json";
// return this.getVocabularyFromFile(file);
vocabulary = "dnet:datasource_typologies.json";
return this.getVocabularyFromService(vocabulary);
} else if( field == "compatibility" && (entity == "dataprovider")){
file = "dataProviderCompatibility.json";
return this.getVocabularyFromFile(file);
// vocabulary = "dnet:datasourceCompatibilityLevel.json";
// return this.getVocabularyFromService(vocabulary);
// file = "dataProviderCompatibility.json";
// return this.getVocabularyFromFile(file);
vocabulary = "dnet:datasourceCompatibilityLevel.json";
return this.getVocabularyFromService(vocabulary);
} else if( field == "country" ){
file = "countries.json";
return this.getVocabularyFromFile(file);
// vocabulary = "dnet:countries.json";
// return this.getVocabularyFromService(vocabulary);
// file = "countries.json";
// return this.getVocabularyFromFile(file);
vocabulary = "dnet:countries.json";
return this.getVocabularyFromService(vocabulary);
}
return null;
}
getVocabularyFromFile (file:string):AutoCompleteValue[] {
var lang = JSON.parse(JSON.stringify(require('../utils/vocabularies/'+file)));
return this.parse(lang["terms"]);
}
// getVocabularyFromFile (file:string):AutoCompleteValue[] {
// var lang = JSON.parse(JSON.stringify(require('../utils/vocabularies/'+file)));
// return this.parse(lang["terms"]);
// }
getVocabularyFromService (vocabularyName:string):any {
let url = this.api + vocabularyName;
console.log(url);
// let key = url;
// if (this._cache.has(key)) {
// return Observable.of(this._cache.get(key));
// }
return this.http.get(url).toPromise()
.then(request =>
{
request = request.json()['terms'];
var results:AutoCompleteValue[] = this.parse(request);
console.log("Get vocabulary : "+ vocabularyName+ " - get " +results.length+ "results");
return results;
});
// return this.http.get(url)
// .do(res => console.log(res))
// .map(res => <any> res.json())
// .map(res => res['terms'])
// .do(res => console.log(res))
// .map(res => this.parse(res))
// .do(res => console.log(res))
// .catch(this.handleError);
// // .do(res => {
// // this._cache.set(key, res);
// // });
let key = url;
if (this._cache.has(key)) {
return Observable.of(this._cache.get(key));
}
// return this.http.get(url).toPromise()
// .then(request =>
// {
// request = request.json()['terms'];
// var results:AutoCompleteValue[] = this.parse(request);
// console.log("Get vocabulary : "+ vocabularyName+ " - get " +results.length+ "results");
// return results;
// });
return this.http.get(url)
.do(res => console.log(res))
.map(res => <any> res.json())
.map(res => res['terms'])
.do(res => console.log(res))
.map(res => this.parse(res))
.do(res => console.log(res))
.catch(this.handleError)
.do(res => {
this._cache.set(key, res);
});
}

View File

@ -14,30 +14,25 @@ import {EntitiesSearchService} from '../services/entitySearch.service';
'(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" ><i class="uk-icon-remove"></i></span>
</div>
</div>
<span class="custom-autocomplete">
<span *ngIf = "showSelected && selectedValue != ''">
<span class="uk-alert-default" data-uk-alert="" *ngFor="let item of selected" > <span >{{showItem(item)}} </span>
<span (click)="remove(item)" aria-hidden="true" title="Remove selection" > <i class="uk-icon-remove clickable"></i> </span>
</span>
</span>
<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">Loading... <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></div>
<ul class="uk-list" >
<!--li *ngIf = "numFilteredResults > 0 " class="list-group-item" >
Select:
</li-->
<li class="list-group-item" *ngFor=" let item of filtered | async">
<span *ngIf="showLoading" 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>
<div *ngIf = "keyword != null && keyword.length > 0 " class="uk-dropdown" aria-expanded="true" style="display:block" >
<ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results" >
<li *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"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>{{warningMessage}}</div>
<!--div *ngIf="numFilteredResults == 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>
</span>
`
@ -79,7 +74,6 @@ export class EntitiesAutocompleteComponent {
}
ngOnInit () {
console.info("init deposit org" +this.entityType +" "+this.depositType);
if(this.entityType == "project" && this.funderId ){
this.filtered = this.searchTermStream

View File

@ -12,30 +12,23 @@ import {RefineFieldResultsService} from '../services/refineFieldResults.service'
'(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 "><i class="uk-icon-remove"></i></span>
<span class="custom-autocomplete">
<span *ngIf = "showSelected && selectedValue != ''">
<span class="uk-alert-default" data-uk-alert="" *ngFor="let item of selected" > <span >{{showItem(item)}} </span>
<span (click)="remove(item)" aria-hidden="true" title="Remove selection" > <i class="uk-icon-remove clickable"></i> </span>
</span>
</span>
<input *ngIf = "showInput" type="text" class="auto-complete-input validate filter-input input-sm form-control " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=filter() >
<span *ngIf="showLoading" 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>
<div *ngIf="filtered.length > 0" class="uk-dropdown" aria-expanded="true" style="display:block" >
<ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results" >
<li *ngFor=" let item of filtered">
<a (click)="select(item)">{{showItem(item)}}</a>
</li>
</ul>
</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="uk-list" >
<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>
</span>
`
})
@ -78,10 +71,21 @@ export class StaticAutoCompleteComponent {
this.showLoading = true;
if(this.vocabularyId){
this.list = this._vocabulariesService.getVocabularyByType(this.vocabularyId, this.entityName);
this.afterListFetchedActions();
// this.list = this._vocabulariesService.getVocabularyByType(this.vocabularyId, this.entityName);
// this.afterListFetchedActions();
this.sub = this._vocabulariesService.getVocabularyByType(this.vocabularyId, this.entityName).subscribe(
data => {
this.list = data;
this.afterListFetchedActions();
},
err => {
console.log(err);
this.warningMessage = "An Error occured..."
}
);
}else if(this.fieldName && this.entityName){
this.list = this._refineService.getRefineFieldResultsByFieldName(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;
@ -152,10 +156,14 @@ export class StaticAutoCompleteComponent {
}
remove(item:any){
var index:number =this.checkIfExists(item,this.selected);
console.info("try to remove: index = "+index + " length: "+this.selected.length);
if (index > -1) {
this.selected.splice(index, 1);
}
console.info("after remove: length: "+this.selected.length);
if(!this.multipleSelections && this.selected.length == 0 ){
console.info("no multiselections ");
this.showInput = true;
this.selectedValue = "";
this.selectedValueChanged.emit({

View File

@ -72,6 +72,28 @@
</script>
<!-- End of Google sitelinks search markup-->
<style>
.custom-autocomplete .uk-nav-autocomplete > li > a:hover {
background: #00a8e6 none repeat scroll 0 0;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.05) inset;
color: #FFF;
outline: medium none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.custom-autocomplete .uk-nav-navbar > li > a {
color: #444;
}
.uk-alert-default {
background: #fff none repeat scroll 0 0;
border: 1px solid #ddd;
border-radius: 4px;
color: #444;
height: 30px;
max-width: 100%;
padding: 4px 6px;
}
.custom-hidden-dropdown-menu {position:static !important;}
.searchFilterBoxValues {overflow:auto; max-height:200px; }
.selected-filters-box {margin:5px; background-color:#F8F8F8; }