D-Net

import {Component, Input, OnDestroy, OnInit} from "@angular/core";

import {Annotation, AnnotationService} from "./annotation.service";

import {ResultLandingInfo} from "../../utils/entities/resultLandingInfo";

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

@Component({

  selector: 'b2note',

  template: `

    <div class="sideInfoTitle uk-margin-small-bottom">Annotations</div>

    <div class="b2note">

      <form ngNoForm *ngIf="pid"

            action="https://b2note-dev.bsc.es/widget/"

            method="post"

            target="b2note_iframe"

            class="uk-padding-small uk-padding-remove-vertical">

        <!--URL of the annotated record-->

        <input

            type="hidden"

            name="recordurl_tofeed"

            [value]="url">

        <!--URL of the record contents for downloading-->

        <input

            type="hidden"

            name="subject_tofeed"

            [value]="pid">

        <!--PID of the annotated record-->

        <input

            type="hidden"

            name="pid_tofeed"

            [value]="pid">

        <!--URL of the record contents for downloading-->

        <button class="uk-flex uk-flex-middle"

                (click)="toggleAnnotation($event)"

                type="submit"

                title="Click to annotate this page using B2Note.">

          <img src="assets/common-assets/b2note.png" width="48" height="24">

          <span>add annotation</span>

        </button>

      </form>

      <div *ngIf="!pid">

        <button class="uk-flex uk-flex-middle disabled" title="Annotations are only available for resources with a PID (persistent identifier) like DOI, handle, PMID">

          <img src="assets/common-assets/b2note.png" width="48" height="24">

          <span>add annotation</span>

        </button>

      </div>

      <ul *ngIf="annotations" class="uk-list uk-list-divider">

        <li *ngFor="let annotation of annotations.slice(0, visibleAnnotations)" uk-grid class="uk-flex uk-flex-top uk-margin-remove-left">

          <div [ngClass]="annotation.type" class="uk-width-auto">{{annotation.type}}</div>

          <div [class.uk-width-1-3]="annotation.urls" [class.uk-width-1-6@s]="annotation.urls">{{annotation.text}}</div>

          <ul class="uk-width-expand uk-list uk-margin-remove-top" *ngIf="annotation.urls">

            <li *ngFor="let url of annotation.urls.slice(0, annotation.urlSize)"><a [href]="url" target="_blank">{{url}}</a></li>

            <li *ngIf="annotation.urlSize < annotation.urls.length"><a (click)="annotation.urlSize = annotation.urls.length">+ {{annotation.urls.length - annotation.urlSize}} more</a></li>

          </ul>

        </li>

      </ul>

      <div *ngIf="visibleAnnotations < annotations.length" class="uk-margin-medium-top uk-text-center">

        <button class="uk-button uk-button-primary" (click)="visibleAnnotations = (visibleAnnotations + annotationSize)">Load More</button>

      </div>

    </div>

    <div [class.uk-hidden]="!visible">

      <div class="widget-container" cdkDrag>

        <!--Close button, should be bound to hide the widget-->

        <button type="button" class="close" aria-label="Close" (click)="toggleAnnotation($event)">

          <span aria-hidden="true">×</span>

        </button>

        <!--The glorious iframe with the running app!-->

        <iframe id="b2note_iframe" name="b2note_iframe" class="b2note-iframe">

        </iframe>

      </div>

    </div>`,

  styleUrls: ['annotation.css']

})

export class AnnotationComponent implements OnInit, OnDestroy {

  @Input()

  public landingInfo: ResultLandingInfo = null;

  @Input()

  public id: string = null;

  @Input()

  public properties: EnvProperties;

  public url: string = null;

  public pid: string = null;

  public keywords: string[] = [];

  public visible: boolean = false;

  public annotations: Annotation[] = [];

  public annotationSize: number = 3;

  public visibleAnnotations: number;

  constructor(private annotationService: AnnotationService) {

  }

  ngOnInit(): void {

    this.visibleAnnotations = this.annotationSize;

    if (typeof window !== "undefined") {

      let id = this.id;

      this.url = window.location.href;

      if (this.landingInfo.deletedByInferenceIds) {

        id = this.landingInfo.deletedByInferenceIds[0];

        this.url = this.url.replace(this.id, id);

      }

      if (this.landingInfo.identifiers && this.landingInfo.identifiers.size > 0) {

        if (this.landingInfo.identifiers.get('doi')) {

          this.pid = this.landingInfo.identifiers.get('doi')[0];

        } else {

          const key: string = this.landingInfo.identifiers.keys().next().value;

          if (key) {

            this.pid = this.landingInfo.identifiers.get(key)[0];

          }

        }

      }

      if(this.pid) {

        this.annotationService.getAllAnnotations(this.properties, this.pid).subscribe(annotations => {

          this.annotations = annotations;

          this.annotations.forEach(annotation => {

            annotation.urlSize = 3;

          });

        });

      }

    }

  }

  public getTypeName(): string {

    if (this.landingInfo.resultType === "dataset") {

      return "research data";

    } else if (this.landingInfo.resultType === "other") {

      return "research product";

    } else {

      return this.landingInfo.resultType;

    }

  }

  ngOnDestroy(): void {

  }

  public toggleAnnotation(event) {

    if (this.visible) {

      event.preventDefault();

    }

    this.visible = !this.visible;

  }

}