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 id="tm-main" class=" uk-section  uk-margin-small-top tm-middle"   >

      <div uk-grid uk-grid>

       <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">

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

      <div class="page-header">

        <h1>Linking</h1>

      </div>

      <div class="uk-clearfix">

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

            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" icon="info" ratio="1"><path d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg>

            </span> More Information </a>

      </div>

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

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

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>

</span></a>

           <div class="uk-text-bold"><span class="uk-icon">

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" icon="info" ratio="1"><path d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg>

</span> Linking Functionality:</div>

           <p>Through linking functioanilty you are able to create links from research results to projects and/ or communities. You have to select at least one research result and one project or community in order to be able to proceed.</p>

           <p>You can search for reasearch results (publication and/ or research data) to link, in openaire, crossref, and/ or Datacite. </p>

           <p *ngIf="show=='project'"><span class="uk-text-bold">Projects:</span> Search and add projects using keyword search. Limit the search space by specifying project Funder. </p>

           <p *ngIf="show=='context'"><span class="uk-text-bold">Communities:</span> Search and add communities/ concepts by selecting community, category and using keyword search for . Or browse through the categories and add communities. </p>

           <p *ngIf="show=='result'"><span class="uk-text-bold">Research Results:</span> Use search mode, to search and add results through keyword search. Use upload mode, to upload a list of DOIs of results. </p>

           <p *ngIf="show=='claim'"><span class="uk-text-bold">Review Metadata:</span> For selected research results that came from 3rd party repositories (Datacite, Crossreff), you need to set access mode, and type before they are included in openaire information space.

           Please have in mind that if you ignore this step they will have the default values.

           </p>

       </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';" > Review metadata</a></li>

      </ul>

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

        <!--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' && this.results.length > 0 " (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>

 </div>

</div>

</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 research data)

  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("OpenAIRE | Linking");

  }

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

    }

  }

}