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:
parent
5b85c7759e
commit
bb12a21fe3
|
@ -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 {Observable} from 'rxjs/Observable';
|
||||||
import { Subject } from 'rxjs/Subject';
|
import { Subject } from 'rxjs/Subject';
|
||||||
|
|
||||||
|
@ -9,42 +9,40 @@ import {Dates} from '../../utils/string-utils.class';
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'advanced-search-form',
|
selector: 'advanced-search-form',
|
||||||
template: `
|
template: `
|
||||||
<form class="">
|
<form class="uk-form">
|
||||||
<div *ngFor="let selectedField of selectedFields; let i = index" class="form-group form-inline">
|
<div *ngFor="let selectedField of selectedFields; let i = index" class="uk-form-row ">
|
||||||
<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">
|
<button type="button" class="uk-button uk-button-danger" *ngIf="selectedFields.length > 1" (click)="removeField(i)">
|
||||||
{{selectedField.operatorId}}
|
<i class="uk-icon-minus"></i>
|
||||||
</button>
|
</button>
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
<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">
|
<li *ngFor="let op of operators">
|
||||||
<a (click)="fieldOperatorChanged(i, op.id, op.id)">{{op.id}}</a>
|
<a (click)="fieldOperatorChanged(i, op.id, op.id)">{{op.id}}</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
</div>
|
||||||
<div class="input-group-btn">
|
|
||||||
<button class="uk-button btn-disabled" type="button">
|
<button class="uk-button uk-button-disabled" type="button">
|
||||||
{{selectedField.name}}
|
{{selectedField.name}}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
<input *ngIf = "fieldIdsMap[selectedField.id].type == 'keyword'" type="text" class="form-control" placeholder="Type keywords..."
|
||||||
<input *ngIf = "fieldIdsMap[selectedField.id].type == 'keyword'" type="text" class="form-control" placeholder="Type keywords..." [(ngModel)]="selectedField.value" name="value[{{i}}]">
|
[(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)>
|
<input *ngIf = "fieldIdsMap[selectedField.id].type == 'year'" type="text" class="form-control" placeholder="Type Year..."
|
||||||
<!-- div *ngIf = "fieldIdsMap[selectedField.id].type == 'year' && !selectedField.valid" class="form-control-feedback">Not a valid year. Insert a date between 1000 - 3000</div-->
|
[(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
|
||||||
<div *ngIf = "fieldIdsMap[selectedField.id].type == 'vocabulary'" class="input-group">
|
[placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name" [multipleSelections]=false
|
||||||
<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>
|
(selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete>
|
||||||
</div>
|
<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>
|
||||||
<div *ngIf = "fieldIdsMap[selectedField.id].type == 'refine'" class="input-group">
|
<entities-autocomplete *ngIf = "fieldIdsMap[selectedField.id].type == 'entity'" [entityType]=selectedField.param [selectedValue]=selectedField.value [showSelected]=true
|
||||||
<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
|
|
||||||
[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)" >
|
||||||
</entities-autocomplete>
|
</entities-autocomplete>
|
||||||
|
|
||||||
</div>
|
|
||||||
<div *ngIf = "fieldIdsMap[selectedField.id].type == 'boolean'" class="input-group">
|
<div *ngIf = "fieldIdsMap[selectedField.id].type == 'boolean'" class="input-group">
|
||||||
<span class="input-group-addon">
|
<span class="input-group-addon">
|
||||||
<input type="radio" [(ngModel)]="selectedField.value" [name]=selectedField.param value="true">Yes<br>
|
<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>
|
<input type="radio" [(ngModel)]="selectedField.value" [name]=selectedField.param value="false">No<br>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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>
|
||||||
<div class="form-group form-inline">
|
<div class="uk-form-row ">
|
||||||
<div class=" input-group">
|
|
||||||
<div class="input-group-btn">
|
<div data-uk-dropdown="{mode:'click'}" aria-haspopup="true" aria-expanded="false" class="uk-button-dropdown">
|
||||||
<button aria-expanded="false" aria-haspopup="true" class="uk-button dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" type="button">
|
<button class="uk-button"> {{fieldIdsMap[newFieldId].name}} <i class="uk-icon-caret-down"></i></button>
|
||||||
{{fieldIdsMap[newFieldId].name}}
|
<div class="uk-dropdown uk-dropdown-bottom" aria-hidden="true" style="top: 30px; left: 0px;" tabindex="">
|
||||||
</button>
|
<ul class="uk-nav uk-nav-dropdown">
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
|
||||||
<li *ngFor="let id of fieldIds">
|
<li *ngFor="let id of fieldIds">
|
||||||
<a (click)="fieldIdsChanged(i, id)">{{fieldIdsMap[id].name}}</a>
|
<a (click)="fieldIdsChanged(i, id)">{{fieldIdsMap[id].name}}</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-success" (click)="addField()">
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button type="button" class="uk-button uk-button-success" (click)="addField()">
|
||||||
<i class="uk-icon-plus"></i>
|
<i class="uk-icon-plus"></i>
|
||||||
</button>
|
</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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<button (click)="queryChanged()" type="submit" class="uk-button">Search</button>
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
`
|
`
|
||||||
|
|
|
@ -10,7 +10,7 @@ import {SearchUtilsClass} from './searchUtils.class';
|
||||||
selector: 'advanced-search-page',
|
selector: 'advanced-search-page',
|
||||||
template: `
|
template: `
|
||||||
|
|
||||||
<div class="container">
|
<div class="uk-margin-top">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>{{pageTitle}}</h1>
|
<h1>{{pageTitle}}</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -10,88 +10,89 @@ import { CacheService } from '../shared/cache.service';
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class ISVocabulariesService {
|
export class ISVocabulariesService {
|
||||||
// private api ="https://beta.services.openaire.eu/provision/mvc/vocabularies/";
|
// 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) {}
|
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);
|
console.log("getVocabulary field: "+ field + " for entity: "+ entity);
|
||||||
var file = "";
|
var file = "";
|
||||||
var vocabulary = "";
|
var vocabulary = "";
|
||||||
if( field == "lang"){
|
if( field == "lang"){
|
||||||
file="languages.json";
|
// file="languages.json";
|
||||||
return this.getVocabularyFromFile(file);
|
// return this.getVocabularyFromFile(file);
|
||||||
// vocabulary = "dnet:languages.json";
|
vocabulary = "dnet:languages.json";
|
||||||
// return this.getVocabularyFromService(vocabulary);
|
return this.getVocabularyFromService(vocabulary);
|
||||||
}else if ( field == "type" && (entity == "publication")){
|
}else if ( field == "type" && (entity == "publication")){
|
||||||
file = "publicationTypes.json";
|
// file = "publicationTypes.json";
|
||||||
return this.getVocabularyFromFile(file);
|
// return this.getVocabularyFromFile(file);
|
||||||
// vocabulary = "dnet:publication_resource.json";
|
vocabulary = "dnet:publication_resource.json";
|
||||||
// return this.getVocabularyFromService(vocabulary);
|
return this.getVocabularyFromService(vocabulary);
|
||||||
|
|
||||||
}else if ( field == "type" && (entity == "dataset")){
|
}else if ( field == "type" && (entity == "dataset")){
|
||||||
file = "dnet:dataCite_resource.json";
|
// file = "dnet:dataCite_resource.json";
|
||||||
return this.getVocabularyFromFile(file);
|
// return this.getVocabularyFromFile(file);
|
||||||
// vocabulary = "dnet:dataCite_resource.json";
|
vocabulary = "dnet:dataCite_resource.json";
|
||||||
// return this.getVocabularyFromService(vocabulary);
|
return this.getVocabularyFromService(vocabulary);
|
||||||
|
|
||||||
}else if( field == "access" && (entity == "publication" || entity == "dataset")){
|
}else if( field == "access" && (entity == "publication" || entity == "dataset")){
|
||||||
file= "accessMode.json";
|
// file= "accessMode.json";
|
||||||
return this.getVocabularyFromFile(file);
|
// return this.getVocabularyFromFile(file);
|
||||||
// vocabulary = "dnet:access_modes.json";
|
vocabulary = "dnet:access_modes.json";
|
||||||
// return this.getVocabularyFromService(vocabulary);
|
return this.getVocabularyFromService(vocabulary);
|
||||||
|
|
||||||
} else if( (field == "datasourcetype") && (entity == "dataprovider")){
|
} else if( (field == "datasourcetype") && (entity == "dataprovider")){
|
||||||
file = "dataProviderType.json";
|
// file = "dataProviderType.json";
|
||||||
return this.getVocabularyFromFile(file);
|
// return this.getVocabularyFromFile(file);
|
||||||
// vocabulary = "dnet:datasource_typologies.json";
|
vocabulary = "dnet:datasource_typologies.json";
|
||||||
// return this.getVocabularyFromService(vocabulary);
|
return this.getVocabularyFromService(vocabulary);
|
||||||
|
|
||||||
} else if( field == "compatibility" && (entity == "dataprovider")){
|
} else if( field == "compatibility" && (entity == "dataprovider")){
|
||||||
file = "dataProviderCompatibility.json";
|
// file = "dataProviderCompatibility.json";
|
||||||
return this.getVocabularyFromFile(file);
|
// return this.getVocabularyFromFile(file);
|
||||||
// vocabulary = "dnet:datasourceCompatibilityLevel.json";
|
vocabulary = "dnet:datasourceCompatibilityLevel.json";
|
||||||
// return this.getVocabularyFromService(vocabulary);
|
return this.getVocabularyFromService(vocabulary);
|
||||||
|
|
||||||
} else if( field == "country" ){
|
} else if( field == "country" ){
|
||||||
file = "countries.json";
|
// file = "countries.json";
|
||||||
return this.getVocabularyFromFile(file);
|
// return this.getVocabularyFromFile(file);
|
||||||
// vocabulary = "dnet:countries.json";
|
vocabulary = "dnet:countries.json";
|
||||||
// return this.getVocabularyFromService(vocabulary);
|
return this.getVocabularyFromService(vocabulary);
|
||||||
|
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
|
|
||||||
}
|
}
|
||||||
getVocabularyFromFile (file:string):AutoCompleteValue[] {
|
// getVocabularyFromFile (file:string):AutoCompleteValue[] {
|
||||||
var lang = JSON.parse(JSON.stringify(require('../utils/vocabularies/'+file)));
|
// var lang = JSON.parse(JSON.stringify(require('../utils/vocabularies/'+file)));
|
||||||
return this.parse(lang["terms"]);
|
// return this.parse(lang["terms"]);
|
||||||
}
|
// }
|
||||||
getVocabularyFromService (vocabularyName:string):any {
|
getVocabularyFromService (vocabularyName:string):any {
|
||||||
let url = this.api + vocabularyName;
|
let url = this.api + vocabularyName;
|
||||||
console.log(url);
|
console.log(url);
|
||||||
// let key = url;
|
let key = url;
|
||||||
// if (this._cache.has(key)) {
|
if (this._cache.has(key)) {
|
||||||
// return Observable.of(this._cache.get(key));
|
return Observable.of(this._cache.get(key));
|
||||||
// }
|
}
|
||||||
return this.http.get(url).toPromise()
|
// return this.http.get(url).toPromise()
|
||||||
.then(request =>
|
// .then(request =>
|
||||||
{
|
// {
|
||||||
request = request.json()['terms'];
|
// request = request.json()['terms'];
|
||||||
var results:AutoCompleteValue[] = this.parse(request);
|
// var results:AutoCompleteValue[] = this.parse(request);
|
||||||
console.log("Get vocabulary : "+ vocabularyName+ " - get " +results.length+ "results");
|
// console.log("Get vocabulary : "+ vocabularyName+ " - get " +results.length+ "results");
|
||||||
return 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);
|
||||||
});
|
});
|
||||||
// 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);
|
|
||||||
// // });
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -14,30 +14,25 @@ import {EntitiesSearchService} from '../services/entitySearch.service';
|
||||||
'(document:click)': 'handleClick($event)',
|
'(document:click)': 'handleClick($event)',
|
||||||
},
|
},
|
||||||
template: `
|
template: `
|
||||||
<div class="custom-autocomplete">
|
<span class="custom-autocomplete">
|
||||||
<div *ngIf = "showSelected && selectedValue != ''">
|
<span *ngIf = "showSelected && selectedValue != ''">
|
||||||
<div class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" >
|
<span class="uk-alert-default" data-uk-alert="" *ngFor="let item of selected" > <span >{{showItem(item)}} </span>
|
||||||
<span >{{showItem(item)}} </span>
|
<span (click)="remove(item)" aria-hidden="true" title="Remove selection" > <i class="uk-icon-remove clickable"></i> </span>
|
||||||
<span (click)="remove(item)" aria-hidden="true" title="Remove selection" ><i class="uk-icon-remove"></i></span>
|
</span>
|
||||||
</div>
|
</span>
|
||||||
</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" >
|
<span *ngIf="showLoading" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span>
|
||||||
<div *ngIf="showLoading" class="alert alert-info row-fluid " role="alert">Loading... <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></div>
|
<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>
|
||||||
<ul class="uk-list" >
|
<div *ngIf = "keyword != null && keyword.length > 0 " class="uk-dropdown" aria-expanded="true" style="display:block" >
|
||||||
<!--li *ngIf = "numFilteredResults > 0 " class="list-group-item" >
|
<ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results" >
|
||||||
Select:
|
<li *ngFor=" let item of filtered | async">
|
||||||
</li-->
|
|
||||||
<li class="list-group-item" *ngFor=" let item of filtered | async">
|
|
||||||
<a (click)="select(item)">{{showItem(item)}}</a>
|
<a (click)="select(item)">{{showItem(item)}}</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
</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">×</span></button>{{warningMessage}}</div>
|
</span>
|
||||||
<!--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">×</span></button>No results found</div-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
`
|
`
|
||||||
|
@ -79,7 +74,6 @@ export class EntitiesAutocompleteComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit () {
|
ngOnInit () {
|
||||||
console.info("init deposit org" +this.entityType +" "+this.depositType);
|
|
||||||
|
|
||||||
if(this.entityType == "project" && this.funderId ){
|
if(this.entityType == "project" && this.funderId ){
|
||||||
this.filtered = this.searchTermStream
|
this.filtered = this.searchTermStream
|
||||||
|
|
|
@ -12,30 +12,23 @@ import {RefineFieldResultsService} from '../services/refineFieldResults.service'
|
||||||
'(document:click)': 'handleClick($event)',
|
'(document:click)': 'handleClick($event)',
|
||||||
},
|
},
|
||||||
template: `
|
template: `
|
||||||
<div class="custom-autocomplete">
|
<span class="custom-autocomplete">
|
||||||
<div *ngIf = "showSelected && selectedValue != ''">
|
<span *ngIf = "showSelected && selectedValue != ''">
|
||||||
<div class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" >
|
<span class="uk-alert-default" data-uk-alert="" *ngFor="let item of selected" > <span >{{showItem(item)}} </span>
|
||||||
<span >{{showItem(item)}} </span>
|
<span (click)="remove(item)" aria-hidden="true" title="Remove selection" > <i class="uk-icon-remove clickable"></i> </span>
|
||||||
<span (click)="remove(item)" aria-hidden="true" title="Remove selection" class=" remove "><i class="uk-icon-remove"></i></span>
|
</span>
|
||||||
</div>
|
</span>
|
||||||
</div>
|
|
||||||
<input *ngIf = "showInput" 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">
|
<span *ngIf="showLoading" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span>
|
||||||
<ul class="uk-list" >
|
<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>
|
||||||
<li class="list-group-item" >
|
<div *ngIf="filtered.length > 0" class="uk-dropdown" aria-expanded="true" style="display:block" >
|
||||||
Select:
|
<ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results" >
|
||||||
</li>
|
<li *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 class="messages">
|
</span>
|
||||||
<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">×</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">×</span></button>No results found</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
`
|
`
|
||||||
})
|
})
|
||||||
|
@ -78,10 +71,21 @@ export class StaticAutoCompleteComponent {
|
||||||
this.showLoading = true;
|
this.showLoading = true;
|
||||||
|
|
||||||
if(this.vocabularyId){
|
if(this.vocabularyId){
|
||||||
this.list = this._vocabulariesService.getVocabularyByType(this.vocabularyId, this.entityName);
|
// 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();
|
this.afterListFetchedActions();
|
||||||
|
|
||||||
|
},
|
||||||
|
err => {
|
||||||
|
console.log(err);
|
||||||
|
this.warningMessage = "An Error occured..."
|
||||||
|
}
|
||||||
|
);
|
||||||
}else if(this.fieldName && this.entityName){
|
}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(
|
this.sub = this._refineService.getRefineFieldResultsByFieldName(this.fieldName,this.entityName).subscribe(
|
||||||
data => {
|
data => {
|
||||||
this.list = data;
|
this.list = data;
|
||||||
|
@ -152,10 +156,14 @@ export class StaticAutoCompleteComponent {
|
||||||
}
|
}
|
||||||
remove(item:any){
|
remove(item:any){
|
||||||
var index:number =this.checkIfExists(item,this.selected);
|
var index:number =this.checkIfExists(item,this.selected);
|
||||||
|
console.info("try to remove: index = "+index + " length: "+this.selected.length);
|
||||||
if (index > -1) {
|
if (index > -1) {
|
||||||
this.selected.splice(index, 1);
|
this.selected.splice(index, 1);
|
||||||
}
|
}
|
||||||
|
console.info("after remove: length: "+this.selected.length);
|
||||||
if(!this.multipleSelections && this.selected.length == 0 ){
|
if(!this.multipleSelections && this.selected.length == 0 ){
|
||||||
|
console.info("no multiselections ");
|
||||||
|
|
||||||
this.showInput = true;
|
this.showInput = true;
|
||||||
this.selectedValue = "";
|
this.selectedValue = "";
|
||||||
this.selectedValueChanged.emit({
|
this.selectedValueChanged.emit({
|
||||||
|
|
|
@ -72,6 +72,28 @@
|
||||||
</script>
|
</script>
|
||||||
<!-- End of Google sitelinks search markup-->
|
<!-- End of Google sitelinks search markup-->
|
||||||
<style>
|
<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;}
|
.custom-hidden-dropdown-menu {position:static !important;}
|
||||||
.searchFilterBoxValues {overflow:auto; max-height:200px; }
|
.searchFilterBoxValues {overflow:auto; max-height:200px; }
|
||||||
.selected-filters-box {margin:5px; background-color:#F8F8F8; }
|
.selected-filters-box {margin:5px; background-color:#F8F8F8; }
|
||||||
|
|
Loading…
Reference in New Issue