D-Net

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

import {JSONP_PROVIDERS}  from '@angular/http';

import {Observable}       from 'rxjs/Observable';

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

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

import {ClaimResultComponent} from './claimResult/claimResult.component';

import {ClaimSelectedProjectsComponent} from './selected/selectedProjects.component';

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

import {ClaimSelectedResultsComponent} from './selected/selectedResults.component';

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

import {ClaimProjectsComponent} from './claimProject/claimProject.component';

import {BulkClaimComponent} from './bulkClaim/bulkClaim.component';

import {LinkingHomeComponent} from './linkingHome.component';

@Component({

    selector: 'linking-generic',

    //providers: [MdRadioDispatcher],

    directives: [...ROUTER_DIRECTIVES, ClaimContextComponent, ClaimSelectedProjectsComponent, ClaimSelectedContextsComponent,

      ClaimSelectedResultsComponent, ClaimInsertComponent, ClaimProjectsComponent, LinkingHomeComponent, ClaimResultComponent, BulkClaimComponent],

    template: `

    <div class="container">

      <div class="page-header">

        <div   *ngIf=" bulkMode "  class="pull-right"><span class="badge"><h5>Bulk mode</h5></span></div>

        <h1>Link research resutls</h1>

      </div>

      <linking-home *ngIf="  show == 'home' " [bulkMode]="bulkMode" (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  *ngIf="!bulkMode " [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  *ngIf="!bulkMode " [class]="(show == 'claim')?'active':''"><span *ngIf="show == 'claim'">Link</span><a *ngIf="show != 'claim'" (click)="showChangedType('claim')">Link</a> </li>

          <li  *ngIf="bulkMode  " [class]="(show == 'claim' )?'active':''"><span *ngIf="show == 'claim'">Upload & Link</span><a *ngIf="show != 'claim'" (click)="showChangedType('claim')">Upload & Link</a> </li>

        </ol>

      <div  *ngIf="  show != 'claim'  && show != 'myclaims' " class="row" >

        <div class="col-sm-6">

          <div  *ngIf=" show=='result' &&  !bulkMode  " >

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

          </div>

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

               <claim-projects     [selectedProjects]="projects"  > </claim-projects>

        </div>

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

               <p>TODO software</p>

        </div>

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

             <claim-contexts   [selectedList]="contexts"   > </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]="contexts"  [show]="show"

             (showChange)="showChange($event)"  > </claim-selected-contexts>

           <claim-selected-projects    [projects]="projects" [show]="show"

             (showChange)="showChange($event)"  > </claim-selected-projects>

             <claim-selected-results    [datasets]="datasets" [publications]="publications"   [show]="show"

               (showChange)="showChange($event)"  [linkToResults]="(bulkMode)?false:true" > </claim-selected-results>

      </div>

      </div>

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

         <claim-selected   [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects"   [show]="show"

         (showChange)="showChange($event)"  (publicationsChange)="publicationsChange($event)" [showAccessRights]="'true'" [bulkMode]="bulkMode"

          [linkToResults]="(bulkMode)?false:true" > </claim-selected>

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

             (showChange)="showChange($event)"  > </claim-selected-contexts>

           <claim-selected-projects    [projects]="projects" [show]="show"

             (showChange)="showChange($event)"  > </claim-selected-projects>

            <!-- Bulk Mode Results  (publicationsChange)="publicationsChanged($event)" -->

            <bulk-claim *ngIf=" bulkMode " [publications]="publications" > </bulk-claim>

            <claim-selected-results    [datasets]="datasets" [publications]="publications"   [show]="show"

               (showChange)="showChange($event)"  [linkToResults]="(bulkMode)?false:true" [showAccessRights]=true [bulkMode]="bulkMode" >

               </claim-selected-results>

        <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 LinkingGenericComponent {

  constructor ( private _router: Router) {

   }

  @Input() bulkMode: boolean = false;

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

        if(!this.bulkMode){

          this.show='result';

        }else{

          this.show='claim';

        }

    }else if((this.show == 'result' && this.keyword == '')||(this.show == 'dataset' || this.show == 'publication')){

        this.show='claim';

    }

  }

  prev(){

    if(this.show == 'result'){

        this.show =  this.linkType;

   }else if(this.show == 'context' || this.show == 'project' || this.show == 'software' ){

        this.show='home';

     } else if(this.show == 'claim'){

        // this.show='result';

        if(!this.bulkMode){

          this.show='result';

        }else{

          this.show =  this.linkType;

        }

    }

  }

  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;

    }

  }

}