D-Net

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

import {Observable}       from 'rxjs/Observable';

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

import {EntitiesSearchService} from '../../utils/entitiesAutoComplete/entitySearch.service';

import {ClaimProject, ClaimResult} from '../claim-utils/claimEntities.class';

import {SearchPublicationsService} from '../../services/searchPublications.service';

import {SearchDatasetsService} from '../../services/searchDatasets.service';

@Component({

    selector: 'linking-generic',

    template: `

    <div class="container uk-margin-top">

      <div class="page-header">

        <div   *ngIf=" bulkMode "   class="uk-float-right uk-badge uk-badge-notification">

            <span class="uk-text-center uk-margin-top">Bulk mode</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' " >

        <ul  *ngIf="    show != 'myclaims' " class="uk-breadcrumb">

          <li *ngIf="linkType == 'project'" [class]="(show == 'project' )?'uk-active':''"><a *ngIf="show != 'project'" (click)="showChangedType('project')" >Project</a><span *ngIf="show == 'project'">Project</span></li>

          <li *ngIf="linkType == 'context'" [class]="(show == 'context' )?'uk-active':''"><a *ngIf="show != 'context'" (click)="showChangedType('context')" >Context</a><span *ngIf="show == 'context'">Context</span></li>

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

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

        </ul>

      <div  *ngIf="  show != 'claim'  && show != 'myclaims' " class="uk-grid" >

        <div  *ngIf=" show=='result' &&  !bulkMode  " class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-2">

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

        </div>

        <div  *ngIf=" show=='project' " class="uk-width-1-1" >

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

        </div>

        <div  *ngIf=" show=='software' "  class="uk-width-1-1">

               <p>TODO software</p>

        </div>

        <div  *ngIf="  show == 'context'" class="uk-width-1-1" >

             <claim-contexts   [selectedList]="contexts"   > </claim-contexts>

        </div>

        <div [class]="( show=='result' &&  !bulkMode)?'uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-2  ':'uk-width-small-1-1 uk-width-medium-1-1 uk-width-large-1-1 uk-margin-top  uk-grid'">

           <div [class]="( show=='result' &&  !bulkMode)?'uk-width-small-1-1 uk-width-medium-1-1 uk-width-large-1-1 ':'uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-2 uk-width-xlarge-1-2 '">

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

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

          </div>

          <div [class]="( show=='result' &&  !bulkMode)?'uk-width-small-1-1 uk-width-medium-1-1 uk-width-large-1-1 ':'uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-2 uk-width-xlarge-1-2 '">

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

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

          </div>

          <div [class]="( show=='result' &&  !bulkMode)?'uk-width-small-1-1 uk-width-medium-1-1 uk-width-large-1-1 ':'uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-2 uk-width-xlarge-1-2'">

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

                 </claim-selected-publications>

          </div>

          <div [class]="( show=='result' &&  !bulkMode)?'uk-width-small-1-1 uk-width-medium-1-1 uk-width-large-1-1 ':'uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-2 uk-width-xlarge-1-2 '">

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

          </div>

        </div>

      </div>

      <div  *ngIf="  show == 'claim'  "  class="uk-width-small-1-1 uk-width-medium-1-1 uk-width-large-1-1 uk-grid">

          <div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-2  uk-width-xlarge-1-2">

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

            </div>

          <div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-2  uk-width-xlarge-1-2">

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

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

           </div>

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

            <div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-2  uk-width-xlarge-1-2">

              <claim-selected-publications    [publications]="publications"    [showAccessRights]=true

                            [linkToResults]="(bulkMode)?false:true" [bulkMode]="bulkMode">

              </claim-selected-publications>

            </div>

            <div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-2  uk-width-xlarge-1-2">

                <claim-selected-datasets     [datasets]="datasets"    [showAccessRights]=true

                              [linkToResults]="(bulkMode)?false:true" [bulkMode]="bulkMode">

                              </claim-selected-datasets>

              </div>

              <div class="uk-width-1-1  ">

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

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

              </div>

        </div>

      <ul *ngIf="show != 'home'"  class="uk-pagination">

          <li class="uk-pagination-previous" (click)="prev()"><a><i class="uk-icon-angle-left"></i> Previous</a></li>

          <li class="uk-pagination-next" *ngIf="show != 'claim'" (click)="next()"><a>Next <i class="uk-icon-angle-right"></i></a></li>

      </ul>

  </div>

</div>

`

})

export class LinkingGenericComponent {

  @Input() bulkMode: boolean = false;

  sourceType:string;

  targetType:string;

  step:number = 1;

  contexts=[];

  projects=[];

  publications=[];

  datasets=[];

  show = "home";

  date='8-6-2016';

  keyword: string = "";

  linkType:string ="project"; // link type (selected in home page) : project, context, software, etc

  /* Parameters for inline linking */

  id:string = null; //entity id

  type:string = null; // entity type (publication or dataset)

  linkTo:string = null; // entity type (project or context)

  entityTypes=["dataset", "publication", "project","context"];

  inlineSearchResult:ClaimResult =null;

  sub:any =null;

  constructor ( private _router: Router,  private route: ActivatedRoute, private entitySearch:EntitiesSearchService, private publicationsSearch:SearchPublicationsService, private datasetsSearch:SearchDatasetsService) {

  }

  ngOnInit() {

    this.sub = this.route.queryParams.subscribe(params => {

       this.id = params['id'];

       this.type = params['type'];

       this.linkTo = params['linkTo'];

       if(this.type!=null && this.linkTo!=null){

         this.type = (this.entityTypes.indexOf(this.type) != -1)? this.type:'publication';

         this.linkTo = (this.entityTypes.indexOf(this.linkTo) != -1 || this.linkTo == "result")? this.linkTo:'project';

         this.show = this.linkTo;

         this.linkType = this.linkTo;

         var isInlineSearchResult:boolean = false;

         if((this.type == "publication" || this.type == "dataset") && (this.linkTo == "publication" || this.linkTo == "dataset")){

           isInlineSearchResult = true;

         }

         if(this.type == "project"){

           this.linkType = "project";

           this.getProjectById(this.id);

         }else if(this.type == "publication"){

            this.getPublicationById(this.id,isInlineSearchResult);

         }else if(this.type == "dataset"){

            this.getDatasetById(this.id,isInlineSearchResult);

         }

       }

   });

  }

  getProjectById(id:string){

       this.sub = this.entitySearch.fetchByType(id,"project").subscribe(

        data => {

          console.log(data);

          var item =data[0];

             var project: ClaimProject = { funderId: item.funderId,funderName: item.funderName, projectId: id, projectName: item.projectName , projectAcronym: item.projectAcronym, startDate: item.startDate, endDate: item.endDate };

            this.projects.push( project);

          },

        err => console.log("An error occured"));

      }

    getPublicationById(id:string, isInlineSearchResult:boolean){

        this.sub = this.publicationsSearch.searchPublicationById(id).subscribe(

          data => {

             var item =data[0];

            var result: ClaimResult = {id: id, type :"publication", source : "openaire", title: item['title'].name, url: item['title'].url, result: item, accessRights:item['title'].accessMode, embargoEndDate: null, date: item.year};

            if(isInlineSearchResult){

              this.inlineSearchResult = result;

            }else{

              this.publications.push( result);

            }

        },

      err => console.log("An error occured"));

      }

    getDatasetById(id:string, isInlineSearchResult:boolean){

        this.sub = this.datasetsSearch.searchDatasetById(id).subscribe(

          data => {

             var item =data[0];

             console.log(item);

             var result: ClaimResult = {id: id, type : "dataset", source : "openaire", title: item['title'].name, url: item['title'].url, result: item, accessRights:item['title'].accessMode, embargoEndDate: null, date: item.year};

             if(isInlineSearchResult){

               this.inlineSearchResult = result;

             }else{

               this.datasets.push( result);

             }

        },

      err => console.log("An error occured"));

  }

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

        if(!this.bulkMode){

          this.show='result';

        }else{

          this.show =  this.linkType;

        }

    }

  }

  goto(term: string) {

     this._router.navigate( ['Search', { keyword: term }] );

  }

   sourceTypeChange($event) {

     this.sourceType=$event.value;

    console.log($event.value);

  }

  targetTypeChange($event) {

    this.targetType=$event.value;

   console.log($event.value);

 }

  publicationsChange($event) {

    this.publications=$event.value;

  }

  datasetsChange($event) {

    this.datasets=$event.value;

  }

  projectsChange($event) {

    this.projects=$event.value;

  }

  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;

    }

  }

}