D-Net

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

import {Observable}       from 'rxjs/Observable';

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

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

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

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

@Component({

    selector: 'deposit',

    template: `

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

            <div class="page-header" >

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

            </div>

            <div>

                <p>

                    <i>

                        Are you a grant recipient from the following: H2020; FP7 with SC39; or ERC?

                    </i>

                    Then you are required to publish in

                    <a href="{{openAccess}}" target="_blank">open access (<i class="custom-external"></i>)</a>.

                    One way to do this is to deposit your {{requestFor}} into an

                    <a href="{{openAccessRepo}}" target="_blank">open access repository (<i class="custom-external"></i>)</a>.

                </p>

                <p>

                    Click the following to find more information:

                    <a href="{{fp7Guidlines}}" target="_blank">FP7 guidelines (<i class="custom-external"></i>)</a>,

                    <a href="{{h2020Guidlines}}" target="_blank">H2020 guidelines (<i class="custom-external"></i>)</a>,

                    <a href="{{ercGuidlines}}" target="_blank">ERC guidelines (<i class="custom-external"></i>)</a> OR

                    <a href="{{helpdesk}}" target="_blank">ask a question (<i class="custom-external"></i>)</a> to OpenAIRE’s national representative.

                </p>

                <h3>Locate content provider via your institution</h3>

                <form class= "uk-grid">

                    <div class="uk-width-1-2 ">

                    <entities-autocomplete fieldId="organization" (click)="warningMessage = ''" [entityType]="'organization'" [depositType]=compatibility   [selectedValue]=selectedId [showSelected]=true

                      [placeHolderMessage] = "'Search for Organizations'" [title] = "'Organizations'"  [multipleSelections]=false

                      (selectedValueChanged)="valueChanged($event)">

                    </entities-autocomplete>

                    </div>

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

                        Locate

                    </button>

                    <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning uk-animation-fade" role="alert">{{warningMessage}}</div>

                </form>

            </div>

        </div>

    `

})

export class DepositComponent {

    @Input() keyword: string='';

    public openAccess: string;

    public openAccessRepo: string;

    public fp7Guidlines: string;

    public h2020Guidlines: string;

    public ercGuidlines: string;

    public helpdesk: string;

    @Input() compatibility: string = '';

    @Input() requestFor: string = "Publications";

    public status: number;

    public errorCodes:ErrorCodes = new ErrorCodes();

    public selectedId: string = "";

    public warningMessage: string = "";

    piwiksub:any;

    constructor (private _router: Router, private _meta: Meta, private _piwikService:PiwikService) {

        this.openAccess = OpenaireProperties.getOpenAccess();

        this.openAccessRepo = OpenaireProperties.getOpenAccessRepo();

        this.fp7Guidlines = OpenaireProperties.getFP7Guidlines();

        this.h2020Guidlines = OpenaireProperties.getH2020Guidlines();

        this.ercGuidlines = OpenaireProperties.getERCGuidlines();

        this.helpdesk = OpenaireProperties.getHelpdesk();

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

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

    }

    ngOnDestroy() {

      if(this.piwiksub){

  this.piwiksub.unsubscribe();

}

    }

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

    }

    organizationSelected(id: string) {

        console.info("organization selected");

        if(id && id.length > 0){

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

                this._router.navigate( ['participate/deposit-publications-result'], { queryParams: { "organizationId": id } } );

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

                this._router.navigate( ['participate/deposit-datasets-result'], { queryParams: { "organizationId": id } } );

            }

        } else {

            this.warningMessage = "No organization selected";

        }

    }

    valueChanged($event){

      this.selectedId = $event.value;

    }

}