D-Net

import {Component, Input,Output, EventEmitter, ViewChild} from '@angular/core';

import {Observable}       from 'rxjs/Observable';

import {ContextsService} from '../../services/contexts.service';

import {ClaimContext} from '../../utils/entities/claimEntities.class';

import { StaticAutoCompleteComponent } from '../../utils/staticAutoComplete.component';

@Component({

    // moduleId: module.id,

    selector: 'claim-contexts',

    template: `

        <div class="panel-body"  *ngIf="!inline">

          <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>

              <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 ">

          <div class=" form-horizontal">

          <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 custom-hidden-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 custom-hidden-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>

            <static-autocomplete [(list)] = concepts  [allowDuplicates]=true [showSelected]=false [placeHolderMessage] = "'Search for Concepts'" title = "Concepts:"  [multipleSelections]=true  (addItem) = "select($event)" > </static-autocomplete>

          </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>

        `

})

export class ClaimContextComponent {

@Input() public inline:boolean = false ; // for claimed started from landing pages

@Input() public showComponent:boolean = true ; // for claimed started from landing pages

@Input() public selectedList = [];

@Input() public selectedCommunityId:string = "0";

@Input() public selectedCategoryId:string ="0";

@Output() cselectedCommunityChange = new EventEmitter();

@Output() selectedCategoryChange = new EventEmitter();

@ViewChild (StaticAutoCompleteComponent) autocomplete : StaticAutoCompleteComponent ;

public query = '';

public filteredList = [];

public communities:string[];

public selectedCommunityLabel:string = "Community:";

public categories:string[];

public selectedCategoryLabel:string ="Category:";

public concepts = [];

public warningMessage = "";

public infoMessage = "";

ngOnInit() {

  this.getCommunities();

}

constructor(private _contextService: ContextsService) {

}

select($event){

    var item = $event.value;

    var context: ClaimContext= { 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);

    }

}

getCommunities ()  {

  this._contextService.getCommunities().subscribe(

    data => {

      this.communities = data.communities;

     },

    err => console.log(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 !== ""){

           var event = {value: ""};

           event.value = this.query;

         }

        },

       err => console.log(err)

     );

   }

  }

  getConcepts ()  {

    if(this.selectedCategoryId != '0'){

      this._contextService.getConcepts(this.selectedCategoryId, "").subscribe(

        data => {

          this.concepts = data;

          this.autocomplete.updateList(this.concepts);

          if (this.query !== ""){

            var event = {value: ""};

            event.value = this.query;

            //  this.filter(event);

           }

         },

        err => console.log(err)

      );

    }else{

      this.concepts=[];

    }

   }

  communityChanged(communityId:string, communityLabel:string){

    this.warningMessage = "";

    this.infoMessage = "";

    if(this.selectedCommunityId != communityId){

      this.selectedCommunityId = communityId;

      this.selectedCommunityLabel = communityLabel;

      this.getCategories();

    }

  }

  categoryChanged(categoryId:string, categoryLabel:string){

    this.warningMessage = "";

    this.infoMessage = "";

    if(this.selectedCategoryId != categoryId){

      this.selectedCategoryId = categoryId;

      this.selectedCategoryLabel = categoryLabel;

      this.getConcepts();

    }

  }

}