D-Net

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

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

import {HelperFunctions} from '../HelperFunctions.class';

import {RouterHelper} from "../routerHelper.class";

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

import {isPlatformBrowser} from "@angular/common";

@Component({

  selector: 'showAuthors',

  template: `

    <div *ngIf="authors != undefined" class="uk-height-max-small uk-overflow-auto">

      <!--div *ngIf="showAll && numberOfAuthors > authorsLimit">

        <a (click)="numberOfAuthors = authorsLimit;">View less authors</a>

      </div-->

      <span *ngFor="let author of authors.slice(0,numberOfAuthors) let i=index">

          <i *ngIf="!author.orcid || (properties.environment == 'production') || !testBrowser">{{author.fullName}}</i

          ><a *ngIf="author.orcid && (properties.environment != 'production') && testBrowser"

              class="cursor-default"> <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}

        <i>{{author.fullName}}</i></a

      ><div *ngIf="author.orcid && (properties.environment != 'production')"

            class=" default-dropdown uk-margin-remove-top uk-padding-medium"

            uk-dropdown="pos: bottom-left; mode:click" style="min-width: 70px !important;">

            <b class="uk-margin-top">{{author.fullName}}</b>

            <div>

              <div class="uk-text-muted uk-margin-small-bottom uk-margin-small-top">ORCID</div>

              <span><input #element class="uk-padding-small uk-disabled" name="code"

                           [value]="author.orcid"></span>{{" "}}

              <span>

                <button

                    [class]="'uk-icon-clipboard uk-button uk-button-primary uk-button-small orcid_clipboard_btn_auhtor_'+i"

                    (click)="copyToClipboard(element)" title="Copy to clipboard">

                  Copy

                </button>

                {{" "}}

                <a class="uk-button uk-button-primary uk-button-small" title="Visit author in Orcid"

                   [href]="properties.orcidURL+author.orcid" target="_blank">

                  Visit

                </a>

              </span>

            </div>

            <hr>

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

              Search <b>{{author.fullName}}</b> by <b>ORCID</b> in OpenAIRE's

            </div>

            <div class="uk-text-center uk-margin-small uk-margin-large-left uk-margin-large-right">

              <a class="uk-button uk-button-small portal-button uk-padding uk-padding-remove-top uk-padding-remove-bottom uk-width-1-1"

                 [queryParams]="routerHelper.createQueryParams(['orcid','oc'],[quote(author['orcid']),'and'])"

                 routerLinkActive="router-link-active" routerLink="/search/advanced/publications">

                  Publications

              </a>

            </div>

            <div class="uk-text-center uk-margin-small uk-margin-large-left uk-margin-large-right">

              <a class="uk-button uk-button-small portal-button uk-padding uk-padding-remove-top uk-padding-remove-bottom uk-width-1-1"

                 [queryParams]="routerHelper.createQueryParams(['orcid','oc'],[quote(author['orcid']),'and'])"

                 routerLinkActive="router-link-active" routerLink="/search/advanced/datasets">

                  Research Data

              </a>

            </div>

            <div class="uk-text-center uk-margin-small uk-margin-large-left uk-margin-large-right">

              <a class="uk-button uk-button-small portal-button uk-padding uk-padding-remove-top uk-padding-remove-bottom uk-width-1-1"

                 [queryParams]="routerHelper.createQueryParams(['orcid','oc'],[quote(author['orcid']),'and'])"

                 routerLinkActive="router-link-active" routerLink="/search/advanced/software">

                  Software

              </a>

            </div>

            <div class="uk-text-center uk-margin-small uk-margin-large-left uk-margin-large-right">

              <a class="uk-button uk-button-small portal-button uk-padding uk-padding-remove-top uk-padding-remove-bottom uk-width-1-1"

                 [queryParams]="routerHelper.createQueryParams(['orcid','oc'],[quote(author['orcid']),'and'])"

                 routerLinkActive="router-link-active" routerLink="/search/advanced/other">

                  Other Research Products

              </a>

            </div>

          </div

          ><span>;{{" "}}</span>

        </span>

      <span *ngIf="numberOfAuthors == authorsLimit && authors.length > authorsLimit">	... </span>

      <span *ngIf="showAll && numberOfAuthors == authorsLimit && authors.length > authorsLimit">

          <a (click)="numberOfAuthors = authors.length;">

            view all {{authors.length | number}} authors

          </a>

        </span>

      <!--span *ngIf="showAll && numberOfAuthors > authorsLimit">

        <a (click)="numberOfAuthors = authorsLimit; scroll()">View less authors</a>

      </span-->

    </div>

    <div *ngIf="authors != undefined && showAll && numberOfAuthors > authorsLimit" class="uk-width-1-1 uk-text-right">

      <!--scroll()-->

      <a (click)="numberOfAuthors = authorsLimit;">View less authors</a>

    </div>

  `

})

export class ShowAuthorsComponent {

  @Input() authors: {"fullName": string, "orcid": string}[];

  @Input() authorsLimit: number = 30;

  @Input() showAll: boolean = true;

  public numberOfAuthors: number;

  public properties:EnvProperties;

  public routerHelper:RouterHelper = new RouterHelper();

  testBrowser: boolean;

  constructor (private route: ActivatedRoute, @Inject(PLATFORM_ID) private platformId: string) {

    this.testBrowser = isPlatformBrowser(platformId);

  }

  ngOnInit() {

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

      this.properties = data.envSpecific;

    });

    this.numberOfAuthors = this.authorsLimit;

  }

  copyToClipboard(element: HTMLInputElement){

    element.select();

    if(typeof document !== 'undefined') {

      document.execCommand('copy');

    }

  }

  public  quote(params: string):string {

    return '"'+params+'"';

  }

  public scroll() {

    HelperFunctions.scroll();

  }

}