D-Net

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

import {Observable}       from 'rxjs/Observable';

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

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

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

declare var UIkit:any;

@Component({

    // moduleId: module.id,

    selector: 'claim-contexts-search-form',

    template: `

          <div class="uk-form uk-animation  uk-panel uk-panel-box uk-panel-box-default " >

              <div>Search for Communities:</div>

              <table>

              <tr>

              <td >

                <select  class="custom-select-mini"  name="select_funder"  >

                  <option  value="0" (click)="communityChanged('0','Community:')">Select Community:</option>

                  <option  *ngIf="communities"  (click)="communityChanged(communities.id, communities.label)"  [value]="communities.id" >{{communities.label}}</option>

                </select>

                </td>

                <td *ngIf="selectedCommunityId != 0 && categories.length > 0"><select  class="custom-select-mini"   name="select_funder"  >

                  <option  value="0" (click)="categoryChanged('0','Category:')">Select Category:</option>

                  <option  *ngFor="let category of categories"  (click)="categoryChanged(category.id, category.label)"  [value]="category.id" >{{category.label}}</option>

                </select>

                </td><td  >

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

                </td></tr>

              </table>

              <div *ngIf="loading" class="uk-alert uk-alert-info" role="alert">Loading...</div>

              <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" role="alert">{{warningMessage}}</div>

              <div *ngIf="infoMessage.length > 0" class="uk-alert uk-alert-info" role="alert">{{infoMessage}}</div>

          </div>

        `

})

export class ClaimContextSearchFormComponent {

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

public showComponent:boolean = true ; // for claimed started from landing pages

@Input() public selectedList = [];

public selectedCommunityId:string = "0";

public selectedCategoryId:string ="0";

@Output() contextSelected = 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 = "";

public loading:boolean = false;

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

        }

     }

    // var UIkit:any;

    if (!found) {

      this.contextSelected.emit({

        value: true

      });

      this.selectedList.push(context);

          UIkit.notify({

              message : 'A context is selected.',

              status  : 'info',

              timeout : 1000,

              pos     : 'top-center'

          });

    }else{

      UIkit.notify({

          message : 'The context is already on your list.',

          status  : 'warning',

          timeout : 1000,

          pos     : 'top-center'

      });

    }

}

getCommunities ()  {

  this.loading = true;

  this._contextService.getCommunities().subscribe(

    data => {

      this.communities = data.communities;

      this.loading = false;

     },

    err => {

      console.log(err);

      this.loading = false;

    }

  );

 }

 getCategories ()  {

   console.log(" Getting Categories... ");

   this.loading = true;

   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;

         }

         this.loading = false;

        },

       err => {

         console.log(err);

         this.loading = false;

       }

     );

   }

  }

  getConcepts ()  {

    this.loading = true;

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

           }

           this.loading = false;

         },

        err => {

          console.log(err);

          this.loading = false;

        }

      );

    }else{

      this.concepts=[];

      this.loading = false;

    }

   }

  communityChanged(communityId:string, communityLabel:string){

    console.log(communityId +"  "+communityLabel);

    console.log(this.selectedCommunityId +"  ");

    this.warningMessage = "";

    this.infoMessage = "";

    if(this.selectedCommunityId != communityId){

      console.log( "  here");

      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();

    }

  }

}