explore-services/src/app/linking/claimContext/claimContext.component.ts

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="container" >
          <div class="input-field col s12">

          </div>
          <h3>Select Community and Category:</h3>
          <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="communityDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              {{selectedCommunityLabel}}
              <span class="caret"></span>
            </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="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="categoryDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              {{selectedCategoryLabel}}
              <span class="caret"></span>
            </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>
        <!--  <select  [(ngModel)]="selectedCommunity" (ngModelChange)="communityChanged()" >
            <option   [ngValue]="'0'">Community:</option>
            <option *ngIf="communities" [ngValue]="communities.id">{{communities.label}}</option>
          </select>
          <select [(ngModel)]="selectedCategory" (ngModelChange)="categoryChanged()" >
            <option   [ngValue]="'0'">Category:</option>
            <option *ngFor="let category of categories" [ngValue]="category.id">{{category.label}}</option>
          </select>-->
          <h4>Select concepts:</h4>
          <input id="community" type="text" class="validate filter-input" [(ngModel)]=query (keyup)=filter()   >
            <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 class="selections"  *ngIf="selectedList.length > 0">
              <label for="selecteditems">Selected: </label>
                <ul id ="selecteditems" class="nav nav-pills" *ngFor="let item of selectedList" >
                    <li   role="presentation"  (click)="remove(item)">{{item.concept.label}} <span class="badge">X</span>
                    </li>
                </ul>
            </div>
        </div>
        `,
    providers:[ ContextsService ]

})
export class ClaimContextComponent {
   ngOnInit() {
this.getCommunities();

}
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[];

constructor(private _contextService: ContextsService,myElement: ElementRef) {
    this.elementRef = myElement;
}

filter() {
  if (this.query !== ""){
      this.filteredList = this.concepts.filter(function(el){
          return el.label.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
      }.bind(this));
  }else{
      this.filteredList = [];
  }
}

select(item){
    this.query = "";
    this.filteredList = [];
    var index:number =this.selectedList.indexOf(item);
    if (index == -1) {
      var context= { community: this.selectedCommunityId, category: this.selectedCategoryId, concept: item };
      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;
     },
    err => console.error(err)
  );
 }
 getCategories ()  {
   this.categories=[];
   if(this.selectedCommunityId != '0'){
     this._contextService.getCategories(this.selectedCommunityId).subscribe(
       data => {
         this.categories = data.category;
         this.concepts = [];

        },
       err => console.error(err)
     );
   }
  }
  getConcepts ()  {
    if(this.selectedCategoryId != '0'){
      this._contextService.getConcepts(this.selectedCategoryId, "").subscribe(
        data => {
          this.concepts = data.concept;

         },
        err => console.error(err)
      );
    }
   }
communityChanged(communityId:string, communityLabel:string){
  this.selectedCommunityId= communityId;
  this.selectedCommunityLabel= communityLabel;
  this.getCategories();
}
categoryChanged(categoryId:string, categoryLabel:string){
  this.selectedCategoryId = categoryId;
  this.selectedCategoryLabel = categoryLabel;
  this.getConcepts();
}

}