explore-services/src/app/claimPages/linking/claimResult/claimDataset/claimDataset.component.ts

import {Component, Input, Output, EventEmitter} 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 {pagingFormatterNoLoad} from '../../../../common/pagingFormatterNoLoad.component';
import {PublicationTitleFormatter} from '../../../../common/publicationTitleFormatter.component';
import {SearchDataciteService} from '../../../../services/searchDatacite.service';


@Component({
    selector: 'claim-dataset',
    directives: [...ROUTER_DIRECTIVES,pagingFormatterNoLoad, PublicationTitleFormatter],
    template: `
    <!--
    <h3>Selected Results:</h3>
    <div >
       <p *ngFor=" let item of selectedDatasets "> <publication-title [title]="item.result.title" [url]="'http://dx.doi.org/'+item.result.doi" > </publication-title> {{item.result.doi}} --{{item.result.publisher}}<button type="button" class="close" (click)="remove(item)" aria-label="Close"> <span aria-hidden="true">&times;</span></button> </p>
    </div>
    -->
  <!--  <div class="panel">
      <div class="">
        <form>
          <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">Dataset</span>
            <input  class=" form-control" #term   [(ngModel)]="keyword"/>
            <span class="input-group-btn">
              <button (click)="searchDatacite(term.value,10,1)"  type="submit" class="btn btn-default">Search</button>
            </span>
          </div>
        </form>
    </div>
  </div>-->
  <div *ngIf="warningMessage.length > 0" class="alert alert-warning" role="alert">{{warningMessage}}</div>
  <div *ngIf="infoMessage.length > 0" class="alert alert-info" role="alert">{{infoMessage}}</div>

    <div class="panel ">
      <div class="">

        <ul class="nav nav-tabs">
           <li class="active"><a data-toggle="tab" href="#datacite">Datacite ({{(dataciteResultsNum==null)?'0':dataciteResultsNum}})</a></li>
           <li><a data-toggle="tab" href="#openaire">Openaire  ({{(openaireResultsNum==null)?'0':openaireResultsNum}})</a></li>
        </ul>
        <div class="tab-content">
           <div id="datacite" class="tab-pane fade in active">
              <div class = "panel-body">
                 <div *ngIf="dataciteResultsNum != null && dataciteResultsNum > 0">
                    <p > {{dataciteResultsNum   }} Total Results </p>
                    <paging-no-load [currentPage]="page" [totalResults]="dataciteResultsNum" [navigateTo]="navigateTo" [term]="keyword" [size]="size"  (pageChange)="pageChange($event)"> </paging-no-load>
                 </div>
                 <div *ngIf="dataciteResultsNum == null || dataciteResultsNum == 0" class="alert alert-info" role="alert">No results found</div>
                 <div >
                  <!--  <p *ngFor=" let item of dataciteResults ">
                    <publication-title [title]="item.title" [url]="'http://dx.doi.org/'+item.doi" > </publication-title>
                     <button (click)="add(item, item.doi,'dataset','datacite',item.title,'http://dx.doi.org/'+item.doi)"   type="button" class="btn btn-default">Select</button>
                     </p>
-->
                     <ul *ngIf="dataciteResults.length > 0 "  class="list-group">
                        <li *ngFor=" let item of dataciteResults "  [class]="(isSelected(item.doi))?'list-group-item panel-footer':'list-group-item'" >
                         <span >
                          <a *ngIf="item.doi" target="_blank" href="{{'http://dx.doi.org/'+item.doi}}" >{{item.title}}</a>
                          <span *ngIf="!item.doi" >{{item.title}}</span>
                        </span>
                         <span  *ngIf="!isSelected(item.doi)" (click)="add(item, item.doi,'dataset','datacite',item.title,'http://dx.doi.org/'+item.doi)" aria-hidden="true" class= " btn glyphicon glyphicon-plus"></span>
                       </li>
                   </ul>

                 </div>
              </div>
            </div>
            <div id="openaire" class="tab-pane fade">
              <div class = "panel-body">
                <div class = "alert alert-info " >  Under Development....
              </div>
               <div *ngIf="openaireResultsNum == null || openaireResultsNum == 0" class="alert alert-info" role="alert">No results found</div>
            </div>
        </div>
      </div>
    </div>

    `,
    providers:[JSONP_PROVIDERS, SearchDataciteService]
})
export class ClaimDatasetComponent {
  constructor (private _searchDataciteService: SearchDataciteService,
  private _routeParams: RouteParams) {
    var myDate = new Date();
    this.todayDate = myDate.getFullYear()+ "-" +(myDate.getMonth() + 1) + "-" + myDate.getDate() ;
    this.nextDate =  (myDate.getFullYear()+100)+ "-" +(myDate.getMonth() + 1) + "-" + myDate.getDate() ;

  }
  ngOnInit() {
    if(this.keyword !=null && this.keyword.length > 0){
     this.searchDatacite(this.keyword,this.size,this.page);
   }
}

  private page : number = 1;
  private size:number = 10;
  private navigateTo: string = "Search";
  private source: string = "datacite";
  private type : string = "dataset";
  @Input() public select:boolean = true ;
  @Input() public keyword:string = '';
  @Input() public selectedDatasets = [] ;
  @Output() datasetsChange = new EventEmitter();

  dataciteResults=[];
  dataciteResultsNum : Observable<number> = null;
  openaireResults=[];
  openaireResultsNum : Observable<number> = null ;

  public warningMessage = "";
  public infoMessage = "";

  private todayDate = '';
   private nextDate = '';
   public search(term: string, size : number, page : number){
     this.searchDatacite(term,10,1);
     //TODO add openaire search
   }
    private searchDatacite (term: string, size : number, page : number) {
      this.getDataciteResults(term,size,page);
      this.warningMessage = "";
      this.infoMessage = "";

     }

   getDataciteResults (term: string, size : number, page : number)  {
       this._searchDataciteService.searchDataciteResults(term, size, page).subscribe(
        data => {
          this.dataciteResults = data.docs;
          this.page=page;
          this.dataciteResultsNum = data.numFound;
        },
        err => console.error(err)
      );
      }

   add(item, itemId,itemType,itemSource,itemTitle, itemUrl){
     var result ;
      if(itemSource == 'datacite'){
        result = {id: itemId, type :itemType, source : itemSource, title: itemTitle,url: itemUrl, result: item, accessRights: 'OPEN', embargoEndDate: this.nextDate};
      }else if (itemSource == 'openaire'){

      }
      var found:boolean = this.isSelected( result.id);
      this.warningMessage = "";
       if (!found) {
        this.selectedDatasets.push(result);
        this.datasetsChange.emit({
           value: this.selectedDatasets
         });
      }else{
        this.warningMessage = "Dataset already in selected list";
      }

   }


   pageChange($event) {
     this.page=$event.value;
     this.dataciteResults=[];
     this.searchDatacite(this.keyword,10,this.page);
     this.warningMessage = "";
     this.infoMessage = "";

   }
   isSelected(id:string){

     var found:boolean = false;
     this.warningMessage = "";
     for (var _i = 0; _i < this.selectedDatasets.length; _i++) {
         let item = this.selectedDatasets[_i];
         if(item.id == id){
               found=true;
               break;
          }
      }
      return found;
   }
}