D-Net

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

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

import {Title, Meta}                from '@angular/platform-browser';

import {Observable}                 from 'rxjs/Observable';

import {ErrorCodes}                 from '../utils/properties/errorCodes';

import{EnvProperties} from '../utils/properties/env-properties';

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

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

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

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

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

@Component({

    selector: 'deposit-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="uk-article-title custom-article-title">

                Deposit {{requestFor}}

            </div-->

            <helper position="top"></helper>

            <div class="uk-grid  helper-grid">

              <helper position="left" styleName=" uk-width-1-5 uk-padding-left"></helper>

              <div class="uk-width-expand">

                <div *ngIf="status == errorCodes.LOADING || (status == errorCodes.LOADING && fetchDataproviders.searchUtils.status == errorCodes.LOADING)"

                      class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><img class="loading-gif  uk-align-center" >

                </div>

                <!--div *ngIf="status != errorCodes.LOADING" class="uk-margin-bottom  uk-margin-top">

                  <h3>See if your institution has a repository </h3>

                  <form class= "uk-grid">

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

                      <entities-autocomplete [(properties)]=properties fieldId="organization" (click)="warningMessage = ''" [entityType]="'organization'"

                        [depositType]=compatibility  [showSelected]=true [placeHolderMessage] = "'Organization name'"

                        [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 *ngIf="fetchDataproviders.searchUtils.totalResults > 0">

                    <h2 *ngIf="organization" class="organization">

                        <a *ngIf="organization['url']!=''" href="{{organization.url}}" target="_blank">

                            <span><i class="custom-external"></i>{{organization['name']}}</span>

                        </a>

                        <span *ngIf="organization['url']==''">{{organization['name']}}</span>

                    </h2>

                </div>

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

                    <p class="uk-text-meta">Please use the information below and contact your repository to deposit your <span class="uk-text-lowercase">{{requestFor}}</span>.</p>

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

                    <div class = "uk-text-right" *ngIf = "fetchDataproviders.searchUtils.totalResults > 10">

    					<!--a [href] = "linkToSearchDataproviders">

    						View all {{fetchDataproviders.searchUtils.totalResults | number}} results <span class="uk-icon">

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

    </span>

    					</a-->

                        <a  [queryParams]="routerHelper.createQueryParams(['organizationId', 'og'], [organizationId, 'and'])"

                            routerLinkActive="router-link-active" [routerLink]="linkToSearchDataproviders" class="uk-button uk-button-text">

                            View all {{fetchDataproviders.searchUtils.totalResults | number}} results

                        </a>

    				</div>

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

                                    [(status)]= "fetchDataproviders.searchUtils.status"

                                    type="dataprovider" urlParam="datasourceId" [showOrganizations] = false

                                    [custom_class]="'other-results'" [(properties)] =properties>

                    </search-result>

                </div>

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

                            || status == errorCodes.NOT_FOUND || status == errorCodes.ERROR || status == errorCodes.NOT_AVAILABLE" class = "alert alert-warning">

                    <div *ngIf="organization">

                        <span *ngIf="fetchDataproviders.searchUtils.status == errorCodes.ERROR">

                            An error occured.

                        </span>

                        No content providers found for institution:

                        <a *ngIf="organization['url']!=''" target="_blank" href="{{organization.url}}">

                            <span>{{organization['name']}} (<i class="custom-external"></i>)</span>

                        </a>

                        <span *ngIf="organization['url']==''">{{organization['name']}}</span>

                        .

                    </div>

                    <div *ngIf="status == errorCodes.NOT_FOUND && organizationId != ''">

                        No organization with ID: {{organizationId}} found.

                    </div>

                    <div *ngIf="status == errorCodes.ERROR && organizationId != ''">

                        An error occured.

                    </div>

                    <span *ngIf="status == errorCodes.NOT_AVAILABLE && organizationId != ''">

                        Service temprorarily unavailable. Please try again later.

                    </span>

                    <div *ngIf="organizationId == ''">

                        No ID for organization.

                    </div>

                    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>

              </div>

              <helper position="right" styleName=" uk-width-1-5"></helper>

            </div>

            <button class=" uk-button uk-button-primary uk-margin-small-top"  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>

            <helper position="bottom"></helper>

        </div>

        </div>

      </div>

    </div>

    `

})

export class DepositResultComponent {

  @Input() compatibility: string = '';

  @Input() piwikSiteId = null;

  // Type of entity: Publication or Research Data

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

  public organization: {"name": string, "url": string};

  public organizationId: string = "";

  // Id of the new selected organization to be searched

  public selectedId: string = "";

  public status: number;

  public warningMessage: string = "";

  public fetchDataproviders : FetchDataproviders;

  public linkToSearchDataproviders: string = "";

  // url of Zenodo

  public zenodo: string;

  public routerHelper:RouterHelper = new RouterHelper();

  public errorCodes:ErrorCodes = new ErrorCodes();

  sub: any; piwiksub: any;

  properties:EnvProperties;

  constructor ( private _router: Router,

                private  route: ActivatedRoute,

                private _searchDataprovidersService: SearchDataprovidersService,

                private _organizationService: OrganizationService,

                private _meta: Meta,

                private _title: Title,

                private _piwikService:PiwikService) {

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

      this.status = this.errorCodes.LOADING;

      var description = "Deposit "+this.requestFor;

      var title = "Openaire, repositories, open access, content provider, compatibility, organization, deposit "+ this.requestFor;

      this.updateTitle(title);

      this.updateDescription(description);

    }

    ngOnInit() {

      this.route.data

        .subscribe((data: { envSpecific: EnvProperties }) => {

           this.properties = data.envSpecific;

           this.zenodo = this.properties.zenodo;

           this.updateUrl(data.envSpecific.baseLink+this._router.url);

           if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){

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

           }

        });

        console.info('depositResult init');

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

            this.organizationId = params['organizationId'];

            console.info("Id is :"+this.organizationId);

            if(this.organizationId){

                this.getOrganizationInfo();

            }

            this.selectedId = "";

        });

    }

    ngDoCheck() {

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

            this.organizationId = "";

            this.status = this.errorCodes.ERROR;

        }

    }

    ngOnDestroy() {

      this.sub.unsubscribe();

      if(this.piwiksub){

        this.piwiksub.unsubscribe();

      }

    }

    private searchDataproviders() {

        // if(this.organization != undefined) {

        //     this.fetchDataproviders.getResults(this.organization.name, false, 1, 10);

        // } else if(this.organizationId != undefined) {

            this.fetchDataproviders.getResultsForDeposit( this.organizationId,this.requestFor, 1, 10, this.properties);

        //}

        this.linkToSearchDataproviders = this.properties.searchLinkToDataProviders;

    }

    private getOrganizationInfo ()  {

        console.info("inside getOrganizationInfo of component");

        this._organizationService.getOrganizationInfo(this.organizationId,this.properties).subscribe(

            data => {

                if(data == null) {

                  this.status = this.errorCodes.NOT_FOUND;

                } else {

                  this.organization = data.title;

                  this.status = this.errorCodes.DONE;

                  this.searchDataproviders();

                }

            },

            err => {

                //console.log(err)

                if(err.status == '404') {

                  this.status = this.errorCodes.NOT_FOUND;

                  console.info("not found");

                } else if(err.status == '500') {

                  this.status = this.errorCodes.ERROR;

                  console.info("error");

                } else {

                  this.status = this.errorCodes.NOT_AVAILABLE;

                  console.info("not available");

                }

            }

        );

    }

    public goToDeposit() {

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

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

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

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

        }

    }

    public valueChanged($event){

      this.selectedId = $event.value;

    }

    public organizationSelected(id: string) {

        console.info("organization selected");

        if(id && id.length > 0 && id != this.organizationId){

            this.organization = null;

            this.status = this.errorCodes.LOADING;

            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 new organization selected";

        }

    }

    private updateDescription(description:string) {

        this._meta.updateTag({content:description},"name='description'");

        this._meta.updateTag({content:description},"property='og:description'");

    }

    private updateTitle(title:string){

      var _prefix ="OpenAIRE | ";

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

      this._title.setTitle(_title);

      this._meta.updateTag({content:_title},"property='og:title'");

    }

    private updateUrl(url:string){

      this._meta.updateTag({content:url},"property='og:url'");

    }

}