D-Net

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

import {Observable}       from 'rxjs/Observable';

import {OpenaireProperties, ErrorCodes} from '../../utils/properties/openaireProperties';

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

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

import { FetchDataproviders } from '../../utils/fetchEntitiesClasses/fetchDataproviders.class';

import { SearchDataprovidersService } from '../../services/searchDataproviders.service';

import {OrganizationService} from '../../services/organization.service';

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

import {RouterHelper} from '../../utils/routerHelper.class';

import {PiwikService} from '../../utils/piwik/piwik.service';

@Component({

    selector: 'deposit-by-subject-result',

    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" >

                <h2>Deposit {{requestFor}}</h2>

            </div>

                        <div class="uk-width-1-1  uk-margin uk-padding uk-panel  uk-background-muted">

                          <form class= "uk-margin uk-text-center uk-margin-top">

                              <input type="text"  [(ngModel)]="newSubject"  class=" uk-input uk-width-1-2" name="subject" placeholder="Search for classifications..."   />

                              <button class=" uk-button uk-button-default"  type="submit" (click)="searchDataproviders()" >

                                  Search

                              </button>

                          </form>

                          <div *ngIf="subject.length > 0" class=" uk-text-center ">

                              <span>Keywords: {{subject}}<span><a class="uk-icon-button" (click) = "subject = ''"><span aria-hidden="true" class=" clickable "><span class="clickable 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></span></a></span>

                            </span>

                          </div>

                        </div>

            <div *ngIf="fetchDataproviders.searchUtils.status == errorCodes.LOADING"

                  class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><img src="./assets/loading.gif" class="uk-align-center" alt="Loading">

            </div>

            <div *ngIf="fetchDataproviders.searchUtils.totalResults > 0">

                <p>Please use the information/contacts shown below to deposit your {{requestFor}}.</p>

                <!--showDataProviders [dataProviders]=dataProviders></showDataProviders-->

                <div *ngIf="fetchDataproviders.searchUtils.totalResults" class="">

                    <paging-no-load [currentPage]="page" [totalResults]="fetchDataproviders.searchUtils.totalResults"    size=10  (pageChange)="pageChange($event)"> </paging-no-load>

                 </div>

                 <div class="" *ngIf="fetchDataproviders.results  && fetchDataproviders.searchUtils.totalResults > 0">

                       {{fetchDataproviders.searchUtils.totalResults}} content providers, page {{fetchDataproviders.searchUtils.page}} of {{(totalPages())}}

                 </div>

                <search-result  [(results)]="fetchDataproviders.results"

                                type="dataprovider" urlParam="datasourceId" [showSubjects]=true

                                [custom_class]="'other-results'">

                </search-result>

            </div>

            <div *ngIf="fetchDataproviders.searchUtils.status == errorCodes.NONE && subject != ''" class = "uk-alert uk-alert-primary">

                No content providers found with classification "{{subject}}".

            </div>

            <div *ngIf="fetchDataproviders.searchUtils.status == errorCodes.ERROR && subject != ''" class = "uk-alert uk-alert-danger">

                An error occured.

            </div>

            <div *ngIf="(fetchDataproviders.searchUtils.totalResults == 0 && fetchDataproviders.searchUtils.status == errorCodes.DONE)

                        || fetchDataproviders.searchUtils.status == errorCodes.NONE || fetchDataproviders.searchUtils.status == errorCodes.ERROR" class = "uk-alert  ">

                You can still deposit your {{requestFor}} in

                <a href="{{zenodo}}" target="_blank">OpenAIRE's Zenodo catch-all repository (<i class="custom-external"></i>)</a>

                hosted by CERN.

            </div>

            <button class=" uk-button uk-button-default"  type="submit" (click)="goToDeposit()">

                <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-left" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span> Back

            </button>

        </div>

        </div>

      </div>

    </div>

    `

})

export class DepositBySubjectResultComponent {

    public status: number;

    public errorCodes:ErrorCodes = new ErrorCodes();

    sub: any;

    subDataproviders: any;

    piwiksub: any;

    public fetchDataproviders : FetchDataproviders;

    public routerHelper:RouterHelper = new RouterHelper();

     public linkToSearchDataproviders = "";

    public zenodo: string;

    public page: number = 1;

    @Input() compatibility: string = '';

    @Input() requestFor: string = "Research Data";

    @Input() subject: string = "";

    public newSubject: string= "";

    constructor (private _router: Router,

        private  route: ActivatedRoute,

        private _searchDataprovidersService: SearchDataprovidersService,  private _meta: Meta, private _piwikService:PiwikService) {

            this.zenodo = OpenaireProperties.getZenodoURL();

            this.fetchDataproviders = new FetchDataproviders(this._searchDataprovidersService);

            this.status = this.errorCodes.LOADING;

            this.updateTitle("Deposit "+this.requestFor);

            this.updateDescription("Openaire,  repositories, open access,  content provider, compatibility, organization, deposit "+ this.requestFor);

            this.updateUrl(OpenaireProperties.getBaseLink()+this._router.url);

            if(OpenaireProperties.isPiwikTrackEnabled() && (typeof document !== 'undefined')){

              this.piwiksub = this._piwikService.trackView("Deposit "+this.requestFor).subscribe();

            }

        }

        updateDescription(description:string){

          this._meta.updateMeta("description", description);

          this._meta.updateProperty("og:description", description);

        }

        updateTitle(title:string){

          var _prefix ="OpenAIRE | ";

          var _title = _prefix + ((title.length> 50 ) ?title.substring(0,50):title);

          this._meta.setTitle(_title );

          this._meta.updateProperty("og:title",_title);

        }

        updateUrl(url:string){

          this._meta.updateProperty("og:url", url);

        }

    ngOnInit() {

        console.info('depositResult init');

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

            this.subject = params['q'];

            this.newSubject = this.subject;

            this.searchDataproviders();

        });

    }

    totalPages(): number {

        let totalPages:any = this.fetchDataproviders.searchUtils.totalResults/(this.fetchDataproviders.searchUtils.size);

        if(!(Number.isInteger(totalPages))) {

            totalPages = (parseInt(totalPages, 10) + 1);

        }

        return totalPages;

    }

    // ngDoCheck() {

    //     if(this.organizationId == "" || this.organizationId == undefined) {

    //         this.organizationId = "";

    //         this.status = this.errorCodes.ERROR;

    //     }

    // }

    ngOnDestroy() {

      this.sub.unsubscribe();

      if(this.subDataproviders != undefined) {

          this.subDataproviders.unsubscribe();

      }

      if(this.piwiksub){

  this.piwiksub.unsubscribe();

}

    }

    public searchDataproviders() {

        this.subject = this.newSubject;

        this.fetchDataproviders.getResultsBySubjectsForDeposit( (this.subject =="")?"*":this.subject, this.requestFor, this.page, 10);

        this.linkToSearchDataproviders = OpenaireProperties.getLinkToSearchDataProviders();

    }

    goToDeposit() {

        if(this.requestFor == "Publications") {

            this._router.navigate( ['participate/deposit-publications'] );

        } else if(this.requestFor == "Research Data") {

            this._router.navigate( ['participate/deposit-datasets'] );

        }

    }

    pageChange($event) {

      this.page = +$event.value;

      this.searchDataproviders();

     }

}