D-Net

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

import {Observable}       from 'rxjs/Observable';

import { Router} from '@angular/router';

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

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

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

declare var UIkit:any;

import {Session} from '../../login/utils/helper.class';

import {ErrorCodes} from '../../login/utils/guardHelper.class';

@Component({

    // moduleId: module.id,

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

    template: `

          <div class=" uk-animation  uk-padding-small uk-panel  uk-background-muted " >

              <div>Search for Communities</div>

              <table class="uk-width-1-1 uk-table uk-table-responsive" ><tr>

              <tr>

              <td >

                <select [(ngModel)]="selectedCommunityId"    (ngModelChange)="communityChanged()"  class=" "  name="select_funder"  >

                  <option  value="0"  >Select Community:</option>

                  <option *ngFor="let community of communities"     [value]="community.id" >{{community.label}}</option>

                </select>

                </td>

                <td *ngIf="selectedCommunityId != '0' && categories.length > 0">

                <select  [(ngModel)]="selectedCategoryId"    (ngModelChange)="categoryChanged()" class=" "   name="select_funder"  >

                  <option  value="0"  >Select Category:</option>

                  <option  *ngFor="let category of categories"    [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-primary" role="alert">Loading communities information...</div>

              <div *ngIf="error" class="uk-alert uk-alert-warning" role="alert">An error occured while loading communities...</div>

              <div>Or <a  uk-toggle="target: #browse; animation:  uk-animation-fade"> Browse </a> through categories </div>

              <div id="browse" class="uk-card uk-card-default uk-card-body uk-margin-small" hidden>

                  <a uk-toggle="target: #browse; animation:  uk-animation-fade" class="uk-float-right"><span class="uk-icon">

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>

</span></a>

                  <div *ngIf="selectedCommunityId =='0'"  class="uk-alert uk-alert-warning" >Please select community first...</div>

                  <ul  *ngIf="selectedCommunityId !='0'" class="uk-list ">

                    <li>

                     <span (click)="displaySubcategory(selectedCommunityId)"  >

                        <span *ngIf="!conceptsClassDisplay[selectedCommunityId]"   class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="triangle-down" ratio="1"><polygon points="5 7 15 7 10 12"></polygon></svg></span>

                        <span *ngIf="conceptsClassDisplay[selectedCommunityId]"   class="uk-icon">

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="triangle-up" ratio="1"><polygon points="5 13 10 8 15 13"></polygon></svg></span>{{selectedCommunityLabel}}

                      </span>

                      <a *ngIf="!isSelected(selectedCommunityId)"  (click)="addNewContext(selectedCommunityLabel,null,{'id':selectedCommunityId, 'label':selectedCommunityLabel})" class="uk-button-default uk-align-right"  class="uk-icon-button uk-icon">

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="1"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg> </a>

                      <ul *ngIf="conceptsClassDisplay[selectedCommunityId]" class="uk-animation-fade" >

                      <li *ngFor="let category of categories" >

                        <span (click)="browseConcepts(category.id)"  >

                        <span *ngIf="!conceptsClassDisplay[category.id]"   class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="triangle-down" ratio="1"><polygon points="5 7 15 7 10 12"></polygon></svg></span>

                        <span *ngIf="conceptsClassDisplay[category.id]"   class="uk-icon">

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="triangle-up" ratio="1"><polygon points="5 13 10 8 15 13"></polygon></svg></span>

                        {{category.label}}</span><a *ngIf="!isSelected(category.id)"  (click)="addNewContext(selectedCommunityLabel,category.label,{'id':category.id, 'label':category.label})" class="uk-button-default uk-align-right"  class="uk-icon-button" >

                        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="1"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg></a>

                        <div *ngIf="conceptsCategoryLoading[category.id]" class="uk-alert uk-alert-primary" role="alert">Loading category information...</div>

                        <ul *ngIf="conceptsClass[category.id] && conceptsClassDisplay[category.id]" class="uk-list  uk-animation-fade"  id="ul_{{category.id}}"  >

                          <li *ngFor="let concept1 of conceptsClass[category.id]" >

                            <span   (click)="displaySubcategory(concept1.id)" >

                              <span *ngIf="!conceptsClassDisplay[concept1.id] && concept1.concept"   class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="triangle-down" ratio="1"><polygon points="5 7 15 7 10 12"></polygon></svg></span>

                              <span *ngIf="conceptsClassDisplay[concept1.id]  && concept1.concept"   class="uk-icon">

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="triangle-up" ratio="1"><polygon points="5 13 10 8 15 13"></polygon></svg></span>

                              {{concept1.label}}

                             </span>

                            <a  *ngIf="!isSelected(concept1.id)" (click)="addNewContext(selectedCommunityLabel,category.label,concept1)" class="uk-button-default uk-align-right"  class="uk-icon-button"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="1"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg></a>

                              <ul  *ngIf="concept1.concept &&  conceptsClassDisplay[concept1.id] "  class="uk-animation-fade" >

                                <li *ngFor="let concept2 of concept1.concept"><span   (click)="displaySubcategory(concept2.id)" >

                                <span *ngIf="!conceptsClassDisplay[concept2.id]  && concept2.concept"   class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="triangle-down" ratio="1"><polygon points="5 7 15 7 10 12"></polygon></svg></span>

                                <span *ngIf="conceptsClassDisplay[concept2.id]  && concept2.concept"   class="uk-icon">

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="triangle-up" ratio="1"><polygon points="5 13 10 8 15 13"></polygon></svg></span>

                                {{concept2.label}}</span>

                                  <a  *ngIf="!isSelected(concept2.id)" (click)="addNewContext(selectedCommunityLabel,category.label,concept2)" class="uk-button-default uk-align-right"  class="uk-icon-button"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="1"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg></a>

                                  <ul  *ngIf="concept2.concept &&  conceptsClassDisplay[concept2.id] " class="uk-animation-fade" >

                                    <li *ngFor="let concept3 of concept2.concept">{{concept3.label}}

                                      <a  *ngIf="!isSelected(concept3.id)" (click)="addNewContext(selectedCommunityLabel,category.label,concept3)" class="uk-button-default uk-align-right"  class="uk-icon-button"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="1"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg></a>

                                    </li>

                                  </ul>

                                </li>

                              </ul>

                          </li>

                        </ul>

                    </li>

                  </ul>

                </ul>

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

//The following need to be kept in case we have to save the current state

@Input() public projects;

@Input() public results;

@Input() public inlineEntity;

public selectedCommunityId:string = "0";

public selectedCategoryId:string ="0";

// @Output() contextSelected = new EventEmitter();

@ViewChild (StaticAutoCompleteComponent) autocomplete : StaticAutoCompleteComponent ;

public query = '';

public filteredList = [];

public communities:any;

public selectedCommunityLabel:string = "Community:";

public categories:any;

public selectedCategoryLabel:string ="Category:";

public concepts = [];

public conceptsClass = [];

public conceptsClassDisplay = [];

public conceptsCategoryLoading = [];

public warningMessage = "";

public infoMessage = "";

public loading:boolean = false;

public error:boolean = false;

ngOnInit() {

  this.getCommunities();

}

constructor(private _contextService: ContextsService,private router: Router) {

}

select($event){

    var item = $event.value;

    this.addNewContext( this.selectedCommunityLabel, this.selectedCategoryLabel, item);

  }

isSelected(id):boolean{

  for (var _i = 0; _i < this.selectedList.length; _i++) {

      let item = this.selectedList[_i];

      if(item.concept.id == id){

             return true;

            // this.warningMessage = "Concept already in selected list";

      }

   }

   return false;

}

  addNewContext(community,category,concept){

    var context: ClaimContext= { community: community, category: category, concept: concept };

    var found:boolean = false;

    this.warningMessage = "";

    if (!this.isSelected(context.concept.id)) {

      this.selectedList.push(context);

          UIkit.notification({

              message : 'A new concept is selected.',

              status  : 'info',

              timeout : 1000,

              pos     : 'top-center'

          });

    }else{

      UIkit.notification({

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

          status  : 'warning',

          timeout : 1000,

          pos     : 'top-center'

      });

    }

}

getCommunities ()  {

  if(!Session.isValidAndRemove()){

    this.saveStateAndRedirectLogin();

  }else{

    this.loading = true;

    var token=Session.getUserJwt();

    this._contextService.getCommunities().subscribe(

      data => {

        this.communities = data.communities;

        this.loading = false;

       },

      err => {

        console.log(err);

        this.loading = false;

        this.error = true;

      }

    );

  }

 }

 getCategories ()  {

   this.loading = true;

   this.categories=[];

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

     if(!Session.isValidAndRemove()){

       this.saveStateAndRedirectLogin();

     }else{

       var token=Session.getUserJwt();

       this._contextService.getCategories(this.selectedCommunityId).subscribe(

         data => {

           this.categories = (Array.isArray(data.category))? data.category:[data.category];

           this.concepts = [];

           this.addCommunityInConcepts();

           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'){

      if(!Session.isValidAndRemove()){

        this.saveStateAndRedirectLogin();

      }else{

        this.concepts = [];

        var token=Session.getUserJwt();

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

          data => {

            this.concepts =data;

            this.addCommunityInConcepts();

            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;

    }

   }

   displaySubcategory(id)  {

     if(this.conceptsClassDisplay[id] != null){

       this.conceptsClassDisplay[id] = !this.conceptsClassDisplay[id];

     }else{

       this.conceptsClassDisplay[id] = true;

     }

   }

   browseConcepts (categoryId)  {

       if(!Session.isValidAndRemove()){

         this.saveStateAndRedirectLogin();

       }else{

         if(this.conceptsClass[categoryId] != null){

           this.conceptsClassDisplay[categoryId] = !this.conceptsClassDisplay[categoryId];

           return;

         }else{

           this.conceptsClassDisplay[categoryId] = true;

         }

         this.conceptsClass[categoryId] = [];

         var token=Session.getUserJwt();

         this.conceptsCategoryLoading[categoryId] = true;

         this._contextService.getConcepts(categoryId, "",false).subscribe(

           data => {

            var concepts = (Array.isArray(data))? data:[data];

             for(var i=0;i<concepts.length; i++){

               console.log("Data"+concepts[i]);

               if(concepts[i].id.split("::").length==3){

                 this.conceptsClass[categoryId].push(concepts[i]);

               }

             }

             console.log(this.conceptsClass[categoryId]);

             this.conceptsCategoryLoading[categoryId] = false;

            },

           err => {

             console.log(err);

             this.conceptsCategoryLoading[categoryId] = false;

           }

         );

       }

    }

  communityChanged(){

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

    this.warningMessage = "";

    this.infoMessage = "";

    for(var i = 0; i< this.communities.length; i++){

      if(this.communities[i].id==this.selectedCommunityId){

        this.selectedCommunityLabel = this.communities[i].label;

        break;

      }

    }

    this.selectedCategoryId = "0";

    this.selectedCategoryLabel="Select Category:";

      this.getCategories();

  }

  categoryChanged(){

    this.warningMessage = "";

    this.infoMessage = "";

    for(var i = 0; i< this.categories.length; i++){

      if(this.categories[i].id==this.selectedCategoryId){

        this.selectedCategoryLabel = this.categories[i].label;

        break;

      }

    }

      this.getConcepts();

  }

addCommunityInConcepts(){

   this.concepts.push({"id":this.selectedCommunityId, "label":this.selectedCommunityLabel});

  this.autocomplete.updateList(this.concepts);

}

saveStateAndRedirectLogin(){

  if(this.projects != null){

   localStorage.setItem("projects", JSON.stringify(this.projects));

 }

 localStorage.setItem("contexts", JSON.stringify(this.selectedList));

 if(this.results != null){

   localStorage.setItem("results", JSON.stringify(this.results));

 }

 if(this.inlineEntity != null){

   localStorage.setItem("inlineEntity", JSON.stringify(this.inlineEntity));

 }

  this.router.navigate(['/user-info'], { queryParams: { "errorCode": ErrorCodes.NOT_VALID, "redirectUrl":  this.router.url } });

}

}