explore-services/src/app/claimPages/bulkClaim/bulkLinking.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 {ClaimsComponent} from '../claims/claims.component';


@Component({
    selector: 'linking',
    directives: [ROUTER_DIRECTIVES ],
    template: `
    <div class="container">
      <div class="page-header">
        <h1>Bulk Claim Linking</h1>
      </div>
      <linking-home *ngIf="  show == 'home' "  (linkTypeChange)="linkTypeChange($event)"  ></linking-home>
      <div  *ngIf="  show != 'home' &&  show != 'myclaims' " >
        <ol  *ngIf="    show != 'myclaims' " class="breadcrumb">
          <li *ngIf="linkType == 'project'" [class]="(show == 'project' )?'active':''"><a *ngIf="show != 'project'" (click)="showChangedType('project')" >Project</a><span *ngIf="show == 'project'">Project</span></li>
          <li *ngIf="linkType == 'context'" [class]="(show == 'context' )?'active':''"><a *ngIf="show != 'context'" (click)="showChangedType('context')" >Context</a><span *ngIf="show == 'context'">Context</span></li>
          <li *ngIf="linkType == 'software'" [class]="(show == 'software' )?'active':''"><a *ngIf="show != 'software'"  (click)="showChangedType('software')" >Software</a><span *ngIf="show == 'software'">Software</span> </li>
          <li [class]="(show == 'result' || show == 'publication' || show == 'dataset')?'active':''"><a *ngIf="show != 'result' && show != 'publication' && show != 'dataset'" (click)="showChangedType('result')" >Research Result</a><span *ngIf="show == 'result' || show == 'publication' || show == 'dataset'">Research Result</span></li>
          <li   [class]="(show == 'claim' )?'active':''"><span *ngIf="show == 'claim'">Link</span><a *ngIf="show != 'claim'" (click)="showChangedType('claim')">Link</a> </li>
        </ol>

      <div  *ngIf="  show != 'claim'  && show != 'myclaims'" class="row" >
        <div class="col-sm-6">

          <div  *ngIf=" show=='result' " >
              <claim-result    [selectedDatasets]="datasets" [selectedPublications]="publications" (datasetsChange)="datasetsChange($event)" (publicationsChange)="publicationsChange($event)"   > </claim-result>
          </div>

        <div  *ngIf=" show=='project' " >
               <claim-projects     [selectedProjects]="projects"  (projectsChange)="projectsChange($event)" > </claim-projects>
        </div>
        <div  *ngIf=" show=='software' " >
               <p>TODO software</p>
        </div>
          <div  *ngIf="  show == 'context'" >
             <claim-contexts   [selectedList]="contexts" (contextsChange)="contextsChange($event)"  > </claim-contexts>
          </div>
        </div>
        <div class="col-sm-6">
          <claim-selected   [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects" [show]="show"
           (projectsChange)="projectsChange($event)"  (contextsChange)="contextsChange($event)"  (datasetsChange)="datasetsChange($event)"
           (publicationsChange)="publicationsChange($event)"  (showChange)="showChange($event)"  > </claim-selected>
      </div>
      </div>
      <div  *ngIf="  show == 'claim'"  >
        <claim-selected   [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects"   [show]="show" (showChange)="showChange($event)" [showAccessRights]="'true'" > </claim-selected>
        <claim-insert   [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects" [show] = "show" (showChange)="showChange($event)"></claim-insert>
      </div>
      <nav>
        <ul *ngIf="show != 'home'" class="pager">
          <li 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>
</div>


`

})
//[(ngModel)]="date"
export class LinkingComponent {
  constructor ( private _router: Router  ) {
   }
  sourceType:string;
  targetType:string;
  step:number = 1;
  contexts=[];
  projects=[];
  publications=[];
  datasets=[];
  show = "home";
  searchType="publication"; //publication or dataset
  date='8-6-2016';
  keyword: string = "";
  linkType:string ="project"; // link type (selected in home page) : project, context, software, etc
   ngOnInit() {

  }
  next(){

    if((this.show == 'project' || this.show == 'context' || this.show == 'software')){
        this.show='result';
    }else if((this.show == 'result' && this.keyword == '')||(this.show == 'dataset' || this.show == 'publication')){
        this.show='claim';
    // }else if(this.show == 'result' ){
    //   if(this.searchType == 'publication' ){
    //       this.show="publication";
    //   }else{
    //       this.show="dataset";
    //   }
    }
  }
  prev(){
    if(this.show == 'result'){
        this.show =  this.linkType;
      // if(this.linkType == 'project'){
      //    this.show='project';
      // }else if(this.linkType == 'context'){
      //    this.show='context';
      // }else if(this.linkType == 'software'){
      //    this.show='software';
      // }else{
      //   this.show='home';
      //
      // }
   }else if(this.show == 'context' || this.show == 'project' || this.show == 'software' ){
        this.show='home';
    // }else if(this.show == 'dataset' || this.show == 'publication'){
    //     this.show='result';
    } else if(this.show == 'claim'){
        this.show='result';
    }
  }
  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;
  }
  typeChanged(type:string) {
    this.searchType = type;
  }
  linkTypeChange($event) {
    this.linkType =$event.value;
    this.show=$event.value;

  }
  showChange($event) {
    this.show=$event.value;
    this.showChangedType($event.value);


  }
  showChangedType(type:string) {
    this.show=type;
     if(this.show == 'project' || this.show == 'context' || this.show == 'software'){
        this.linkType = this.show;
    }


  }
}