explore-services/src/app/claimPages/inlineClaimProject/inlineClaimProject.component.ts

import {Component, Input, ViewChild, Output, EventEmitter} from '@angular/core';
import {JSONP_PROVIDERS}  from '@angular/http';
import {Observable}       from 'rxjs/Observable';
import { RouteParams, RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
import {ClaimProjectsComponent} from '../linking/claimProject/claimProject.component';
import {ClaimSelectedComponent} from '../linking/selected/selected.component';
import {ClaimInsertComponent} from '../linking/insertClaim/insertClaim.component';

@Component({
    selector: 'inline-claim-project',
     directives: [ROUTER_DIRECTIVES, ClaimProjectsComponent, ClaimSelectedComponent, ClaimInsertComponent],
    template: `


     <div *ngIf="showComp" class="panel-body well well-lg">
      <h6>Search for Projects:</h6>
      <div class="row" >
            <claim-projects   [selectedProjects]="projects" (projectsChange)="projectsChange($event)"  inline="true" > </claim-projects>

          <claim-selected   [projects]="projects"
              (projectsChange)="projectsChange($event)"
              (showChange)="showChange($event)"  [inlineEntity]="inlineEntity" inline="true" [inlineType]="inlineType"   > </claim-selected>
       </div>
       <claim-insert (showChange)="showChange($event)" inline="true"  [projects]="projects" [publications]="publications"  [datasets]="datasets"   showButtton="false" ></claim-insert>
       <button     (click)="insert()"  [class]="(enableButton)?'btn btn-primary':'btn btn-primary disabled'" style="float:right">Finish </button>
       <button     (click)="cancel()"  [class]="(enableButton)?'btn ':'btn disabled'" style="float:left">Cancel </button>
      <!--  <div  *ngIf="  show == 'claim'"  >
        <claim-selected   [projects]="projects" [inlineEntity]="inlineEntity" inline="true"  [inlineType]="inlineType"    > </claim-selected>
        <claim-insert (showChange)="showChange($event)" inline="true"  [projects]="projects" [publications]="publications"  [datasets]="datasets"   showButtton="false" ></claim-insert>
      </div>
    <nav>
        <ul class="pager">
          <li *ngIf="show != 'context'" class="previous" (click)="prev()"><a ><span aria-hidden="true">&larr;</span> Previous</a></li>
          <li class="next" *ngIf="show != 'claim'" (click)="next()" ><a >Next <span aria-hidden="true">&rarr;</span></a></li>
        </ul>
      </nav>
-->
  </div>

<!--  <h3>Find Context</h3>

 <div *ngIf="show=='context'"   >


       <claim-projects   [selectedList]="contexts" (contextsChange)="contextsChange($event)"  > </claim-contexts>

  <h3>Link   to</h3>
      <claim-selected   [contexts]="contexts"
          (contextsChange)="contextsChange($event)"
          (showChange)="showChange($event)"  [inlineEntity]="inlineEntity" inline="true" [inlineType]="inlineType"   > </claim-selected>



    <button    (click)="claim()"  class="btn btn-primary" style="float:right">Finish</button>

</div>
<div *ngIf="show=='claim'"   >
  <claim-insert showAccessRights="true"  [contexts]="contexts" [publications]="publications"  [datasets]="datasets"    ></claim-insert>
</div>-->

`

})
 export class InlineClaimProjectComponent {
  constructor ( private _router: Router  ) {

   }

  @Input() public inlineEntity:any;
  @Input() public inlineType:string;


  projects=[];
  publications;
  datasets;
  private show = 'project';
  private showComp:boolean = false;
  private enableButton:boolean=true;
  keyword: string = "";

  @Output() projectAdded = new EventEmitter();

@ViewChild (ClaimInsertComponent) claimInsert : ClaimInsertComponent ;
  ngOnInit() {

  }
  next(){
      if(this.inlineType === 'dataset'){
          this.datasets = [];
          this.datasets.push(this.inlineEntity[0]);
      }else if(this.inlineType === 'publication'){
          this.publications = [];
          this.publications.push(this.inlineEntity[0]);
          console.info(" result: :targetId: " +this.publications[0].id + "targetType :"+ this.publications[0].type+" targetCollectedFrom:"+ this.publications[0].source+ "targetAccessRights :"+this.publications[0].accessRights+ " targetEmbargoEndDate:"+this.publications[0].embargoEndDate);
      }
    if( this.show == 'context'){
        this.show='claim';
    }
  }
  prev(){
    if(this.show == 'claim'){
        this.show =  'context';
    }
  }


 projectsChange($event) {
   this.projects=$event.value;
   console.log($event.value);
  }

  showChange($event) {
    this.show=$event.value;
    if(this.show == "end"){
      //TODO
      this.projectAdded.emit({
        value: this.projects
      });
      this.projects = [];
      this.hideComponent();

    }else if(this.show == "error"){
        this.showComponent();
    }
  }
  public toggle(){
    console.info("TOOGLE pr ");
    if(!this.showComp){
      console.info("TOOGLE show ");
      this.showComponent();
    }else{
      console.info("TOOGLE hide ");
      this.hideComponent();
    }
  }
  private showComponent(){
    this.showComp=true;
    this.enableButton = true;

  }
  private hideComponent(){
    this.showComp=false;
  }
  private insert(){
    this.claimInsert.publications = [];
    this.claimInsert.publications.push(this.inlineEntity[0]);
    this.publications = [];
    this.publications.push(this.inlineEntity[0]);
    console.info(" result: :targetId: " +this.publications[0].id + "targetType :"+ this.publications[0].type+" targetCollectedFrom:"+ this.publications[0].source+ "targetAccessRights :"+this.publications[0].accessRights+ " targetEmbargoEndDate:"+this.publications[0].embargoEndDate);
    this.enableButton = false;
    this.claimInsert.insert();

  }
  private cancel(){
    this.projects = [];

    this.hideComponent();
   }
}