explore-services/src/app/linking/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>
    <p><i>Fetches from Datacite </i></p>
    <form>
      <input #term   [(ngModel)]="keyword"/>
      <button (click)="searchDatacite(term.value,10,1)"  type="submit" class="btn btn-default">Search</button>
    </form>
    <ul class="nav nav-tabs">
       <li class="active"><a data-toggle="tab" href="#datacite">Datacite ({{resultsNum}})</a></li>
       <li><a data-toggle="tab" href="#openaire">Openaire</a></li>
    </ul>
    <div class="tab-content">
       <div id="datacite" class="tab-pane fade in active">
          <div>
             <div *ngIf="resultsNum != null && resultsNum > 0">
                <p > {{resultsNum   }} Total Results </p>
                <paging-no-load [currentPage]="page" [totalResults]="resultsNum" [navigateTo]="navigateTo" [term]="keyword" [size]="size"  (pageChange)="pageChange($event)"> </paging-no-load>
             </div>
             <div >
                <p *ngFor=" let item of results "> <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>
             </div>
          </div>
        </div>
        <div id="openaire" class="tab-pane fade">
           <h3>Menu 1</h3>
           <p>Some content in menu 1.</p>
        </div>

    </div>
    `,
    providers:[JSONP_PROVIDERS, SearchDataciteService]
})
export class ClaimDatasetComponent {
  constructor (private _searchDataciteService: SearchDataciteService,
  private _routeParams: RouteParams) {}
  ngOnInit() {
    if(this.keyword !=null && this.keyword.length > 0){
     this.searchDatacite(this.keyword,this.size,this.page);
   }
}

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

  results=[];
  resultsNum : Observable<number> ;

    searchDatacite (term: string, size : number, page : number) {
      this.getDataciteResults(term,size,page);
      console.info('searchDatacite in searchDatacite file');
     }

   getDataciteResults (term: string, size : number, page : number)  {
      console.info("In getDataciteResults (start) "+term);
      this._searchDataciteService.searchDataciteResults(term, size, page).subscribe(
        data => {
          this.results = data.docs;
          this.page=page;
          this.resultsNum = data.numFound;
        },
        err => console.error(err)
      );
      console.info("In getDataciteResults (end) "+term);
     }

   add(item, itemId,itemType,itemSource,itemTitle, itemUrl){
        var result ={id: itemId, type : itemType, source : itemSource, title: itemTitle, url: itemUrl, result: item};
        this.selectedDatasets.push(result);
        var index:number =this.results.indexOf(item);
         if (index > -1) {
            this.results.splice(index, 1);
        }
        this.datasetsChange.emit({
           value: this.selectedDatasets
        });
   }
   remove(item){
        var index:number =this.selectedDatasets.indexOf(item);
         if (index > -1) {
            this.selectedDatasets.splice(index, 1);
            this.datasetsChange.emit({
              value: this.selectedDatasets
            });
        }

   }
   pageChange($event) {
     this.page=$event.value;
     this.results=[];
     this.searchDatacite(this.keyword,10,this.page);
   }
}