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 {SearchOrganizationsService} from '../services/searchOrganizations.service';

@Component({

    selector: 'deposit',

    template: `

        <div class="container">

            <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}}">open access</a>.

                    One way to do this is to deposit your publications into an

                    <a href="{{openAccessRepo}}">open access repository</a>.

                </p>

                <p>

                    Click the following to find more information:

                    <a href="{{fp7Guidlines}}">FP7 guidelines</a>,

                    <a href="{{h2020Guidlines}}">H2020 guidelines</a>,

                    <a href="{{ercGuidlines}}">ERC guidelines</a> OR

                    <a href="{{helpdesk}}">ask a question</a> to OpenAIRE’s national representative.

                </p>

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

                <form>

                    <div class="input-group">

                        <span class="input-group-addon" id="sizing-addon2">Filter</span>

                        <span>

                            <input type="text" class="form-control" placeholder="Type keywords..." aria-describedby="sizing-addon2"  [(ngModel)]="keyword"  name="keyword" >

                        </span>

                        <span class="input-group-btn">

                            <button (click)="keywordChanged()"  type="submit" class="btn btn-default">SELECT</button>

                        </span>

                    </div>

                    <div>

                          <ul class="list-group" >

                              <li class="list-group-item" *ngIf="status == errorCodes.LOADING">

                                    <div class="alert alert-info" role="alert">

                                          Loading...

                                    </div>

                              </li>

                              <li class="list-group-item" *ngIf="status == errorCodes.NONE">

                                    <div class="alert alert-warning" role="alert">

                                          No organizations found

                                    </div>

                              </li>

                              <li class="list-group-item" *ngIf="status == errorCodes.ERROR">

                                    <div class="alert alert-danger" role="alert">

                                          Sorry! Organizations are not currently available

                                    </div>

                              </li>

                              <li class="list-group-item" *ngFor=" let item of organizations">

                                  <a style="cursor:pointer;" (click)="organizationSelected(item.id)">{{item.name}}</a>

                              </li>

                          </ul>

                    </div>

                </form>

            </div>

        </div>

    `

})

export class DepositComponent {

    public keyword: string='';

    public openAccess: string;

    public openAccessRepo: string;

    public fp7Guidlines: string;

    public h2020Guidlines: string;

    public ercGuidlines: string;

    public helpdesk: string;

    public organizations: {"name": string, "id": string}[] = [];

    @Input() compatibility: string = '';

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

    public status: number;

    public errorCodes:ErrorCodes = new ErrorCodes();

    constructor (private _router: Router,

                 private _searchOrganizationsService: SearchOrganizationsService) {

        console.info("constructor deposit");

        this.openAccess = OpenaireProperties.getOpenAccess();

        this.openAccessRepo = OpenaireProperties.getOpenAccessRepo();

        this.fp7Guidlines = OpenaireProperties.getFP7Guidlines();

        this.h2020Guidlines = OpenaireProperties.getH2020Guidlines();

        this.ercGuidlines = OpenaireProperties.getERCGuidlines();

        this.helpdesk = OpenaireProperties.getHelpdesk();

    }

    keywordChanged() {

        console.info("keywordChanged: "+this.keyword);

        this.status = this.errorCodes.LOADING;

        this.organizations = [];

        this._searchOrganizationsService.searchOrganizationsForDeposit(this.keyword, this.compatibility, 1, 10).subscribe(

            data => {

                this.organizations = data;

                this.status = this.errorCodes.DONE;

                if(this.organizations.length == 0) {

                    this.status = this.errorCodes.NONE;

                }

            },

            err => {

                console.error(err);

                this.status = this.errorCodes.ERROR;

                console.info("error");

            }

        );

    }

    organizationSelected(id: string) {

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

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

        } else if(this.requestFor == "Datasets") {

            console.info("call deposit result for datasets")

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

        }

    }

}