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

import { Meta} from '../../../angular2-meta';

declare var UIkit:any;

@Component({

    selector: 'linking-generic',

    template: `

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

      <div class="page-header">

        <h1>Linking</h1>

      </div>

      <ul class="uk-breadcrumb">

          <li  [class]="(show=='project')?'uk-active':''" ><a (click)="show='project';"> Select Projects <span  >({{projects.length}})</span></a></li>

          <li  [class]="(show=='context')?'uk-active':''" ><a (click)="show='context';"> Select Communities <span >({{contexts.length}})</span></a></li>

          <li [class]="(show=='result')?'uk-active':''" ><a  (click)="show='result';"> Select Research Results <span >({{results.length}})</span></a></li>

          <li [class]="(show=='claim')?'uk-active':''" (click)="canProceedToMetadata();"><a [class]="(results.length == 0)?'uk-disabled':''"  (click)="show='claim';" > Complete metadata</a></li>

      </ul>

      <start-over [results]="results" [contexts]="contexts" [projects]="projects" ></start-over>

              <div class="uk-clearfix">

                  <a  class="uk-float-right" uk-toggle="target: #linkingInfo; animation:  uk-animation-fade"><span uk-icon="icon: info"></span> What is linking about? </a>

              </div>

              <div id="linkingInfo" class="uk-card uk-card-default uk-card-body uk-margin-small" hidden>

                  <a uk-toggle="target: #uploadInfo; animation:  uk-animation-fade" class="uk-float-right"><span uk-icon="icon: close"></span></a>

                   <div class="uk-text-bold"><span uk-icon="icon: info"></span> Linking Functioanlity:</div>

                   <p>TODO: Put some useful information here... </p>

               </div>

        <!--ul class="uk-pagination uk-margin-remove-bottom">

            <li  *ngIf="show != 'result' " (click)="prev()"><a><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li>

            <li *ngIf="show != 'claim' " (click)="next()"  class="uk-margin-auto-left"><a>Next <span class="uk-margin-small-left" uk-pagination-next></span></a></li>

            <li  *ngIf="show == 'claim' " (click)="next()"  class="uk-margin-auto-left">

            <claim-insert   [contexts]="contexts" [results]="results"  [projects]="projects" [show] = "show"

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

            </li>

        </ul-->

        <!-- link with Projects & Contexts -->

                <!--div class="uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-grid">

                   <div class="uk-width-1-1@s uk-width-1-2@m uk-width-1-2@l uk-width-1-2@xl "-->

                   <!--ul class=" uk-tab " uk-tab="connect: #tabs; animation: uk-animation-fade">

                           <li>

                              <a>Projects ({{projects.length}})</a>

                          </li>

                          <li>

                             <a>Communities ({{contexts.length}})</a>

                         </li>

                    </ul>

                    <ul id="tabs" class="uk-switcher uk-margin-left uk-width-1-1">

                      <li-->

                           <claim-selected-projects  *ngIf="show=='project'" title="link Projects" [projects]="projects" [show]="show" [linkType]=linkType

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

                     <!--/li>

                      <li-->

                          <claim-selected-contexts *ngIf="show=='context'"  title="link Communities" [contexts]="contexts"  [projects]="projects"  [results]="results" [inlineEntity] = "inlineResult" [show]="show" [linkType]=linkType

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

                      <!--/li-->

                  <!--/div>

                  <div class="uk-width-1-1@s uk-width-1-2@m uk-width-1-2@l uk-width-1-2@xl "-->

              <!--/ul>

                  <!--/div-->

                <!--/div-->

        <!--hr-->

        <!-- Research Results -->

        <div *ngIf="show=='result' || show=='claim'" class="uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l">

               <claim-selected-results   title= "Selected Research Results" [results]="results"  [bulkMode]="bulkMode" [showSearch]="show=='claim'|| bulkMode? false: true"  [showAccessRights]="show=='claim' || bulkMode? true: false">

               </claim-selected-results>

        </div>

        <ul class="uk-pagination">

            <!--li  *ngIf="show != 'result' " (click)="prev()"><a><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li-->

            <li *ngIf="show != 'claim' " (click)="canProceedToMetadata()"  class="uk-margin-auto-left"><a> Review Metadata <span class="uk-margin-small-left" uk-pagination-next></span></a></li>

            <li  *ngIf="show == 'claim' " (click)="next()"  class="uk-margin-auto-left">

            <claim-insert   [contexts]="contexts" [results]="results"  [projects]="projects" [show] = "show"

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

            </li>

        </ul>

 </div>

`

})

export class LinkingGenericComponent {

  @Input() bulkMode: boolean = false;

  sourceType:string;

  targetType:string;

  step:number = 1;

  contexts=[];

  projects=[];

   results = [];

  show = "project";

  date='8-6-2016';

  keyword: string = "";

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

  /* url 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 or result)

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

  inlineResult:ClaimResult =null;

  sub:any =null;

  constructor ( private _router: Router,  private route: ActivatedRoute, private entitySearch:EntitiesSearchService,

    private publicationsSearch:SearchPublicationsService, private datasetsSearch:SearchDatasetsService, private _meta: Meta) {

      this._meta.setTitle("Linking | OpenAIRE");

  }

  ngOnInit() {

      if( typeof localStorage !== 'undefined') {

        if(localStorage.getItem("projects")){

          this.projects  = JSON.parse(localStorage.getItem("projects"));

        }

        if(localStorage.getItem("contexts")){

          this.contexts  = JSON.parse(localStorage.getItem("contexts"));

        }

        if(localStorage.getItem("results")){

          this.results  = JSON.parse(localStorage.getItem("results"));

        }

        localStorage.removeItem("projects");

        localStorage.removeItem("contexts");

        localStorage.removeItem("results");

    }

  }

  next(){

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

        this.show='claim';

    }

  }

  prev(){

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

      this.show='result';

    }

  }

  resultsChange($event) {

    this.results=$event.value;

  }

  projectsChange($event) {

    this.projects=$event.value;

  }

  linkTypeChange($event) {

    this.linkType =$event.value;

    this.show="result";

    if(this.bulkMode){

      this.show="claim";

    }

  }

  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;

    }

  }

  canProceedToMetadata(){

    if(this.results.length == 0){

      UIkit.notification({

          message : 'No research results selected!<br>Please select research results to link with projects and/ or ommunities.',

          status  : 'warning',

          timeout : 1000,

          pos     : 'top-center'

      });

    }else{

      this.show = 'claim';

    }

  }

}