explore-services/src/app/linking/linking.component.ts

import {Component, Input} 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 {ClaimContextComponent} from './claimContext/claimContext.component';
import {ClaimPublicationComponent} from './claimPublication/claimPublication.component';
import {ClaimDatasetComponent} from './claimDataset/claimDataset.component';
import {ClaimSelectedComponent} from './selected/selected.component';
import {ClaimInsertComponent} from './insertClaim/insertClaim.component';
import {ClaimProjectsComponent} from './claimProject/claimProject.component';

@Component({
    selector: 'linking',
    directives: [ROUTER_DIRECTIVES, ClaimContextComponent, ClaimPublicationComponent, ClaimSelectedComponent, ClaimInsertComponent,ClaimDatasetComponent, ClaimProjectsComponent],
    template: `
    <h1>Linking...</h1>
    <div  *ngIf="  show != 'claim'" class="row" >
      <div class="col-sm-6">
      <div  *ngIf=" show=='result' " >
        <form>
          <input [(ngModel)]="keyword"/>
          <button (click)="search()"  type="submit" class="btn btn-default">Search</button>
          <div class="resultType">
            <input #publication name="searchType" type="radio"  [checked]="searchType === 'publication'" value="publication" (click)="searchType = publication.value" />Publication
            <input #dataset name="searchType"  [checked]="searchType === 'dataset'" type="radio"  value="dataset" (click)="searchType = dataset.value" />Dataset
          </div>
         </form>
      </div>
      <div *ngIf=" show=='publication' ">
            <claim-publication [keyword]="keyword" [selectedPublications]="publications" (publicationsCahnge)="publicationsChange($event)"  > </claim-publication>
      </div>
      <div  *ngIf=" show=='dataset' " >
              <claim-dataset  [keyword]="keyword"  [selectedDatasets]="datasets" (datasetsCahnge)="datasetsChange($event)"  > </claim-dataset>
      </div>
      <div  *ngIf=" show=='project' " >
              <claim-projects     [selectedProjects]="projects" (projectsChange)="projectsChange($event)"  > </claim-projects>
      </div>

        <div  *ngIf="  show == 'context'" >
           <claim-contexts   [selectedList]="contexts" (contextsChange)="contextsChange($event)"  > </claim-contexts>
        </div>
      <!--  <div  *ngIf="  show == 'claim'" >
           <claim-insert   [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects"  ></claim-insert>
        </div>-->
      </div>
      <div class="col-sm-6">
        <claim-selected   [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects"   > </claim-selected>
    </div>
    </div>
    <div  *ngIf="  show == 'claim'"  >
      <claim-selected   [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects" [showAccessRights]="'true'" > </claim-selected>
      <claim-insert   [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects"></claim-insert>
    </div>

  <button class="btn btn-primary" *ngIf="show != 'project'"  (click)="prev()">Prev</button>
  <button  class="btn btn-primary"  *ngIf="show != 'claim'" (click)="next()">Next</button>



`

})
//[(ngModel)]="date"
export class LinkingComponent {
  constructor ( private _router: Router  ) {
   }
  sourceType:string;
  targetType:string;
  step:number = 1;
  contexts=[];
  projects=[];
  publications=[];
  datasets=[];
  show = "project";
  searchType="publication";
  date='8-6-2016';
  keyword: string = "";
   ngOnInit() {

  }
  next(){

    if((this.show == 'project' )){
        this.show='result';
    }else if((this.show == 'result' && this.keyword == '')||(this.show == 'dataset' || this.show == 'publication')){
        this.show='context';
    }else if(this.show == 'result' ){
      if(this.searchType == 'publication' ){
          this.show="publication";
      }else{
          this.show="dataset";
      }
    }else if(this.show == 'context'){
        this.show='claim';
    }
  }
  prev(){
    if(this.show == 'result'){
       this.show='project';
   }else if(this.show == 'context'){
        this.show='result';
    }else if(this.show == 'dataset' || this.show == 'publication'){
        this.show='result';
    } else if(this.show == 'claim'){
        this.show='context';
    }
  }
  goto(term: string) {
     this._router.navigate( ['Search', { keyword: term }] );
  }

  search() {
      if(this.searchType == 'publication' ){
          this.show="publication";
      }else{
          this.show="dataset";
      }

  }

   sourceTypeChange($event) {
     this.sourceType=$event.value;
    console.log($event.value);
  }
  targetTypeChange($event) {
    this.targetType=$event.value;
   console.log($event.value);
 }
 contextsChange($event) {
   this.contexts=$event.value;
  console.log($event.value);
}
publicationsChange($event) {
  this.publications=$event.value;
}
datasetsChange($event) {
  this.datasets=$event.value;
}
projectsChange($event) {
  this.projects=$event.value;
}
}