275 lines
9.9 KiB
TypeScript
275 lines
9.9 KiB
TypeScript
import {Component, Input,Output, ElementRef, EventEmitter} from '@angular/core';
|
|
import {JSONP_PROVIDERS} from '@angular/http';
|
|
import {Observable} from 'rxjs/Observable';
|
|
import { RouteParams, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
|
|
import {ContextsService} from '../../../services/contexts.service';
|
|
|
|
|
|
@Component({
|
|
selector: 'claim-contexts',
|
|
template: `
|
|
<div class="panel-body" >
|
|
|
|
<div class="input-group" *ngIf="inline === 'false'">
|
|
<div class=" input-group-btn">
|
|
<button class="btn btn-success dropdown-toggle" type="button" id="communityDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{selectedCommunityLabel}}
|
|
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="communityDropDown">
|
|
<li (click)="communityChanged('0','Community:')"><a >Community:</a></li>
|
|
<li *ngIf="communities" (click)="communityChanged(communities.id, communities.label)" ><a >{{communities.label}}</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="input-group-btn ">
|
|
<button class="btn btn-success dropdown-toggle" type="button" id="categoryDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{selectedCategoryLabel}}
|
|
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="categoryDropDown">
|
|
<li (click)="categoryChanged('0','Category:')"><a >Category:</a></li>
|
|
<li *ngFor="let category of categories" (click)="categoryChanged(category.id, category.label)" ><a >{{category.label}}</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<input id="community" type="text" class="validate filter-input form-control" placeholder="Search for contexts" [(ngModel)]=query (keyup)=filter() >
|
|
</div>
|
|
<div class=" form-horizontal" *ngIf="inline === 'true' && showComponent=='true'">
|
|
<div class=" form-group ">
|
|
<button class="btn btn-xs btn-success dropdown-toggle" type="button" id="communityDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{selectedCommunityLabel}}
|
|
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="communityDropDown">
|
|
<li (click)="communityChanged('0','Community:')"><a >Community:</a></li>
|
|
<li *ngIf="communities" (click)="communityChanged(communities.id, communities.label)" ><a >{{communities.label}}</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="form-group ">
|
|
<button class="btn btn-xs btn-success dropdown-toggle" type="button" id="categoryDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{selectedCategoryLabel}}
|
|
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="categoryDropDown">
|
|
<li (click)="categoryChanged('0','Category:')"><a >Category:</a></li>
|
|
<li *ngFor="let category of categories" (click)="categoryChanged(category.id, category.label)" ><a >{{category.label}}</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="form-group">
|
|
<input id="community" type="text" class="validate filter-input input-sm form-control" placeholder="Search for contexts" [(ngModel)]=query (keyup)=filter() >
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--<div class="input-group">
|
|
<div class=" input-group-btn">
|
|
<button class="btn btn-success dropdown-toggle" type="button" id="communityDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{selectedCommunityLabel}}
|
|
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="communityDropDown">
|
|
<li (click)="communityChanged('0','Community:')"><a >Community:</a></li>
|
|
<li *ngIf="communities" (click)="communityChanged(communities.id, communities.label)" ><a >{{communities.label}}</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="input-group-btn ">
|
|
<button class="btn btn-success dropdown-toggle" type="button" id="categoryDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{selectedCategoryLabel}}
|
|
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="categoryDropDown">
|
|
<li (click)="categoryChanged('0','Category:')"><a >Category:</a></li>
|
|
<li *ngFor="let category of categories" (click)="categoryChanged(category.id, category.label)" ><a >{{category.label}}</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<input id="community" type="text" class="validate filter-input form-control" placeholder="Search for contexts" [(ngModel)]=query (keyup)=filter() >
|
|
</div>-->
|
|
|
|
|
|
|
|
<div class="suggestions" *ngIf="filteredList.length > 0">
|
|
<ul class="list-group" >
|
|
<li class="list-group-item" *ngFor=" let item of filteredList">
|
|
<a (click)="select(item)">{{item.label}}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="warningMessage.length > 0" class="alert alert-warning" role="alert">{{warningMessage}}</div>
|
|
<div *ngIf="infoMessage.length > 0" class="alert alert-info" role="alert">{{infoMessage}}</div>
|
|
`,
|
|
providers:[ ContextsService ]
|
|
|
|
})
|
|
export class ClaimContextComponent {
|
|
ngOnInit() {
|
|
this.getCommunities();
|
|
|
|
}
|
|
@Input() public inline= 'false' ; // for claimed started from landing pages
|
|
@Input() public showComponent= 'true' ; // for claimed started from landing pages
|
|
|
|
public query = '';
|
|
public filteredList = [];
|
|
@Input() public selectedList ;
|
|
public elementRef;
|
|
@Output() contextsChange = new EventEmitter();
|
|
|
|
public communities:string[];
|
|
@Input() public selectedCommunityId:string = "0";
|
|
selectedCommunityLabel:string = "Community:";
|
|
@Output() cselectedCommunityChange = new EventEmitter();
|
|
|
|
public categories:string[];
|
|
@Input() public selectedCategoryId:string ="0";
|
|
selectedCategoryLabel:string ="Category:";
|
|
@Output() selectedCategoryChange = new EventEmitter();
|
|
public concepts:string[];
|
|
public warningMessage = "";
|
|
public infoMessage = "";
|
|
|
|
constructor(private _contextService: ContextsService,myElement: ElementRef) {
|
|
this.elementRef = myElement;
|
|
}
|
|
|
|
filter() {
|
|
this.warningMessage = "";
|
|
this.infoMessage = "";
|
|
if(this.selectedCommunityId == "0"){
|
|
this.warningMessage = "Please select Community";
|
|
}else if (this.query !== ""){
|
|
this.warningMessage = "";
|
|
this.infoMessage = "";
|
|
if(this.selectedCategoryId == "0"){
|
|
this.warningMessage = "Specify category for more concepts";
|
|
}
|
|
this.filteredList = this.concepts.filter(function(el){
|
|
return el.label.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
|
|
}.bind(this));
|
|
if(this.filteredList.length == 0 ){
|
|
this.infoMessage = "No results found";
|
|
}
|
|
}else{
|
|
this.filteredList = [];
|
|
}
|
|
}
|
|
|
|
select(item){
|
|
this.query = "";
|
|
this.filteredList = [];
|
|
var context= { community: this.selectedCommunityLabel, category: this.selectedCategoryLabel, concept: item };
|
|
var found:boolean = false;
|
|
this.warningMessage = "";
|
|
for (var _i = 0; _i < this.selectedList.length; _i++) {
|
|
let item = this.selectedList[_i];
|
|
if(item.concept.id == context.concept.id){
|
|
found=true;
|
|
this.warningMessage = "Concept already in selected list";
|
|
}
|
|
}
|
|
if (!found) {
|
|
this.selectedList.push(context);
|
|
this.contextsChange.emit({
|
|
value: this.selectedList
|
|
});
|
|
}
|
|
// var index:number =this.selectedList.indexOf(context);
|
|
// if (index == -1) {
|
|
// this.selectedList.push(context);
|
|
// this.contextsChange.emit({
|
|
// value: this.selectedList
|
|
// });
|
|
// }
|
|
|
|
}
|
|
// remove(item){
|
|
// var index:number =this.selectedList.indexOf(item);
|
|
// if (index > -1) {
|
|
// this.selectedList.splice(index, 1);
|
|
// }
|
|
// this.contextsChange.emit({
|
|
// value: this.selectedList
|
|
// });
|
|
// }
|
|
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 = [];
|
|
}
|
|
}
|
|
getCommunities () {
|
|
this._contextService.getCommunities().subscribe(
|
|
data => {
|
|
this.communities = data.communities;
|
|
// var concept= ["{id: this.communities['id'], label: this.communities['label'] }"];
|
|
// this.filteredList.push(concept);
|
|
// this.concepts.push(concept);
|
|
},
|
|
err => console.error(err)
|
|
);
|
|
}
|
|
getCategories () {
|
|
this.categories=[];
|
|
if(this.selectedCommunityId != '0'){
|
|
this._contextService.getCategories(this.selectedCommunityId).subscribe(
|
|
data => {
|
|
this.categories = data.category;
|
|
this.concepts = [];
|
|
this.filteredList = [];
|
|
if (this.query !== ""){
|
|
this.filter();
|
|
}
|
|
|
|
},
|
|
err => console.error(err)
|
|
);
|
|
}
|
|
}
|
|
getConcepts () {
|
|
if(this.selectedCategoryId != '0'){
|
|
this._contextService.getConcepts(this.selectedCategoryId, "").subscribe(
|
|
data => {
|
|
this.concepts = data.concept;
|
|
if (this.query !== ""){
|
|
this.filter();
|
|
}
|
|
},
|
|
err => console.error(err)
|
|
);
|
|
}else{
|
|
this.concepts=[];
|
|
}
|
|
}
|
|
communityChanged(communityId:string, communityLabel:string){
|
|
this.warningMessage = "";
|
|
this.infoMessage = "";
|
|
this.selectedCommunityId= communityId;
|
|
this.selectedCommunityLabel= communityLabel;
|
|
this.getCategories();
|
|
|
|
}
|
|
categoryChanged(categoryId:string, categoryLabel:string){
|
|
this.warningMessage = "";
|
|
this.infoMessage = "";
|
|
this.selectedCategoryId = categoryId;
|
|
this.selectedCategoryLabel = categoryLabel;
|
|
this.getConcepts();
|
|
|
|
}
|
|
|
|
}
|