D-Net

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

 import {Observable}       from 'rxjs/Observable';

// import {ClaimContextComponent} from '../linking/claimContext/claimContext.component';

// import {ClaimSelectedContextsComponent} from '../linking/selected/selectedContexts.component';

import {ClaimInsertComponent} from '../linking/insertClaim/insertClaim.component';

@Component({

    selector: 'inline-claim-context',

    template: `

     <div *ngIf="showComp" class="panel-body well well-lg">

       <div class="row" >

            <claim-contexts   [selectedList]="contexts" (contextsChange)="contextsChange($event)"  inline=true  [showComponent]="showComp" > </claim-contexts>

          <claim-selected-contexts   [contexts]="contexts"

              (showChange)="showChange($event)"  inline=true [hideType]="inlineType"  > </claim-selected-contexts>

       </div>

       <claim-insert (showChange)="showChange($event)" inline=true  [contexts]="contexts" [publications]="publications"  [datasets]="datasets"   showButton=false     ></claim-insert>

       <button     (click)="insert()"  [class]="(enableButton)?'btn btn-xs btn-primary':'btn btn-primary btn-xs disabled'" style="float:right">Finish </button>

       <button     (click)="cancel()"  [class]="(enableButton)?'btn btn-xs btn-default ':'btn btn-xs btn-default disabled'" style="float:left">Cancel </button>

  </div>

`

})

 export class InlineClaimContextComponent {

  constructor (  ) {

   }

  @Input() public inlineEntity:any;

  @Input() public inlineType:string;

  contexts=[];

  publications;

  datasets;

  public show = 'context';

  public showComp:boolean = false;

  public enableButton:boolean=true;

  public keyword: string = "";

  @Output() contextAdded = new EventEmitter();

@ViewChild (ClaimInsertComponent) claimInsert : ClaimInsertComponent ;

  ngOnInit() {

  }

  showChange($event) {

    this.show=$event.value;

    if(this.show == "end"){

      //TODO

      this.contextAdded.emit({

        value: this.contexts

      });

      this.contexts = [];

      this.showComponent();

    }else if(this.show == "error"){

        this.showComponent();

    }

  }

  public toggle(){

     if(!this.showComp){

       this.showComponent();

    }else{

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

    this.publications = [];

    this.publications.push(this.inlineEntity);

    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;

    if (!this.claimInsert.validateInsertions()){

      this.enableButton = true;

    }

  }

  private cancel(){

    this.contexts = [];

    this.hideComponent();

   }

}