openaire-library/landingPages/landing-utils/entity-metadata.component.ts

import {Component, Input} from "@angular/core";
import {EnvProperties} from "../../utils/properties/env-properties";
import {properties} from "../../../../environments/environment";
import {OpenaireEntities} from "../../utils/properties/searchFields";
import {Organization, Project} from "../../utils/result-preview/result-preview";
import {RouterHelper} from "../../utils/routerHelper.class";

@Component({
  selector: 'entity-metadata',
  template: `
    <div class="uk-text-xsmall entity-metadata uk-flex-inline uk-flex-wrap uk-text-emphasis">
      <!-- oa -->
      <span class="uk-flex-inline uk-flex-middle uk-flex-wrap"
            *ngIf="(openAccessMandatePublications != undefined && openAccessMandatePublications) || (openAccessMandateDatasets != undefined && openAccessMandateDatasets)">
        <span class="uk-margin-xsmall-right open-access">
          <icon name="open_access" [flex]="true" [ratio]="0.8"></icon>
        </span>
        <span class="uk-text-bolder"
              *ngIf="openAccessMandatePublications != undefined && openAccessMandatePublications && openAccessMandateDatasets != undefined && openAccessMandateDatasets">
          Open Access Mandate for {{openaireEntities.PUBLICATIONS}} and {{openaireEntities.DATASETS}}
        </span>
        <span class="uk-text-bolder"
              *ngIf="openAccessMandatePublications != undefined && openAccessMandatePublications && (openAccessMandateDatasets == undefined || !openAccessMandateDatasets)">
          Open Access Mandate for {{openaireEntities.PUBLICATIONS}}
        </span>
        <span class="uk-text-bolder"
              *ngIf="openAccessMandateDatasets != undefined && openAccessMandateDatasets && (openAccessMandatePublications == undefined || !openAccessMandatePublications)">
          Open Access Mandate for {{openaireEntities.DATASETS}}
        </span>
      </span>
      <!-- types -->
      <span *ngIf="entityType" class="uk-flex-inline uk-flex-middle uk-flex-wrap"
            [class.other-separator]="types && removeUnknown(types, true).length > 0">
        <span class="uk-margin-xsmall-right">
          <icon *ngIf="entityType.toLowerCase() == 'publication'" name="description" type="outlined"
                [flex]="true" [ratio]="0.8"></icon>
          <icon *ngIf="entityType.toLowerCase() == 'research data'" name="database" type="outlined"
                [flex]="true" [ratio]="0.8"></icon>
          <icon *ngIf="entityType.toLowerCase() == 'research software'" name="integration_instructions"
                type="outlined" [flex]="true" [ratio]="0.8"></icon>
          <icon *ngIf="entityType.toLowerCase() == 'other research product'" name="apps" type="outlined"
                [flex]="true" [ratio]="0.8"></icon>
          <icon *ngIf="entityType.toLowerCase() == 'project'" name="assignment_turned_in" type="outlined"
                [flex]="true" [ratio]="0.8"></icon>
          <icon *ngIf="entityType.toLowerCase() == 'data source'" name="note_add" type="outlined"
                [flex]="true" [ratio]="0.8"></icon>
          <icon *ngIf="entityType.toLowerCase() == 'organization'" name="corporate_fare" type="outlined"
                [flex]="true" [ratio]="0.8"></icon>
        </span>
        <u class="uk-text-capitalize uk-text-bolder">{{entityType}}</u>
        <span *ngIf="types && removeUnknown(types, true).length > 0">
          <icon name="keyboard_double_arrow_right" [flex]="true" [ratio]="0.8"></icon>
        </span>
      </span>
      <span *ngIf="types && removeUnknown(types, true).length > 0" class="uk-text-italic">
        {{removeUnknown(types, true).join(' , ')}}
      </span>
      <!-- years -->
      <ng-container *ngIf="year">
        <span>{{year}}</span>
      </ng-container>
      <ng-container *ngIf="startYear && !endYear">
        <span>{{startYear}}</span>
      </ng-container>
      <ng-container *ngIf="!startYear && endYear">
        <span>{{endYear}}</span>
      </ng-container>
      <ng-container *ngIf="startYear && endYear">
        <ng-container>
          <span>{{startYear}} - {{endYear}}</span>
        </ng-container>
      </ng-container>
      <!-- dates -->
      <span *ngIf="startDate && !endDate">
        <span class="uk-margin-xsmall-right">From</span>
        <span>{{startDate | date: 'dd MMM yyyy'}}</span>
      </span>
      <span *ngIf="!startDate && endDate">
        <span class="uk-margin-xsmall-right">Until</span>
        <span>{{endDate | date: 'dd MMM yyyy'}}</span>
      </span>
      <span *ngIf="startDate && endDate">
        <ng-container *ngIf="startDate">
          <span>{{startDate | date: 'dd MMM yyyy'}}</span>
          <span class="uk-margin-xsmall-left">(Started)</span>
        </ng-container>
        <span *ngIf="startDate && endDate" class="uk-margin-xsmall-left uk-margin-xsmall-right">-</span>
        <ng-container *ngIf="endDate">
          <span>{{endDate | date: 'dd MMM yyyy'}}</span>
          <span class="uk-margin-xsmall-left">{{currentDate >= endDate ? '(Ended)' : '(Ending)'}}</span>
        </ng-container>
      </span>
      <ng-container *ngIf="status">
        <span>{{status}}</span>
      </ng-container>
      <ng-container *ngIf="date">
        <span>{{date | date: 'dd MMM yyyy': 'UTC'}}</span>
      </ng-container>
      <ng-container *ngIf="embargoEndDate">
        <span>Embargo end date: {{embargoEndDate | date: 'dd MMM yyyy'}}</span>
      </ng-container>
      <span *ngIf="underCuration">
        <span title="{{buildCurationTooltip()}}" uk-tooltip="pos:bottom-right; delay:10;"
              class="uk-text-primary">Under curation</span>
      </span>
      <!-- countries -->
      <span *ngIf="countries && removeUnknown(countries).length > 0">
        {{removeUnknown(countries).join(', ')}}
      </span>
      <!-- languages -->
      <span *ngIf="languages && removeUnknown(languages).length > 0">
        {{removeUnknown(languages).join(', ')}}
      </span>
      <!-- programming languages -->
      <span *ngIf="programmingLanguages && removeUnknown(programmingLanguages).length > 0"
            class="uk-flex uk-flex-middle uk-flex-wrap">
        {{removeUnknown(programmingLanguages).join(', ')}}
      </span>
      <!-- published info -->
      <showPublisher *ngIf="publisher || journal" [publisher]="publisher" [journal]="journal"
                     [properties]="properties"></showPublisher>
      <!-- data provider labels -->
      <ng-container *ngIf="compatibility && !(compatibility.info == 'not available' && type == 'service')">
        <span uk-tooltip title="Compatibility">
          <a *ngIf="compatibility.id"
             [queryParams]="addEoscPrevInParams({datasourceId: compatibility.id})" routerLinkActive="router-link-active"
             [routerLink]="properties.searchLinkToDataProvider.split('?')[0]">
            {{compatibility.info}}
            <ng-container *ngIf="compatibility.name">{{compatibility.name}}</ng-container>
          </a>
          <span *ngIf="!compatibility.id && compatibility.info">
            <ng-container
                *ngIf="compatibility.info.toLowerCase() != 'not yet registered'">{{compatibility.info}}</ng-container>
            <ng-container *ngIf="compatibility.info.toLowerCase() == 'not yet registered'">
              {{compatibility.info}} <span *ngIf="properties.adminToolsPortalType == 'eosc'">in OpenAIRE</span>
            </ng-container>
          </span>
          <span *ngIf="compatibility.name && !compatibility.id">
            {{compatibility.name}}
          </span>
        </span>
      </ng-container>
      <ng-container *ngIf="compatibilityString">
        <span uk-tooltip title="Compatibility">{{compatibilityString}}</span>
      </ng-container>
      <ng-container
          *ngIf="aggregationStatus && aggregationStatus.fulltexts && aggregationStatus.fulltexts > 0">
        <span>OpenAIRE Text Mining</span>
      </ng-container>
      <ng-container *ngIf="thematic">
        <span>Thematic</span>
      </ng-container>
      <!-- Projects -->
      <span uk-tooltip="Projects" *ngIf="projects && projects.length > 0" [class.truncated]="projects.length > 3">
        {{projectNames.slice(0,3).join(', ')}}
      </span>
      <!-- Organizations -->
      <span uk-tooltip="Partners" *ngIf="organizations && organizations.length > 0" [class.truncated]="organizations.length > 3">
        {{organizationNames.slice(0, 3).join(', ')}}
      </span>
      <!-- Subjects -->
      <span uk-tooltip="Subjects" *ngIf="subjects && subjects.length > 0" [class.truncated]="subjects.length > 3">
        {{subjects.slice(0, 3).join(', ')}}
      </span>
      <ng-container *ngIf="provenanceAction">
        <span>{{provenanceAction}}</span>
      </ng-container>
      <ng-container *ngIf="relationName">
        <span>{{relationName}}</span>
      </ng-container>
    </div>
  `,
  styleUrls: ['entity-metadata.component.less']
})
export class EntityMetadataComponent {
  @Input() entityType: string;
  @Input() types: string[];
  @Input() year: string; // search result
  @Input() startDate: number; // project landing
  @Input() startYear: string; // search result
  @Input() endDate: number; // project landing
  @Input() endYear: string; // search result
  @Input() currentDate: number; // project landing
  @Input() status: string;  // project landing
  @Input() openAccessMandatePublications: boolean // project landing
  @Input() openAccessMandateDatasets: boolean // project landing
  @Input() date: Date;
  @Input() embargoEndDate: Date | string;
  @Input() underCuration: boolean = false;
  @Input() publisher; // showPublisher component
  @Input() journal; // showPublisher component
  @Input() countries;
  @Input() languages;
  @Input() programmingLanguages;
  @Input() compatibilityString: string;
  @Input() compatibility; // data provider landing
  @Input() aggregationStatus; // data provider landing
  @Input() thematic: boolean; // data provider landing
  @Input() type; // data provider landing
  @Input() provenanceAction: string; // search result
  @Input() relationName: string; // search result
  @Input() projects: Project[];
  @Input() organizations: Organization[];
  @Input() subjects: string[];
  @Input() prevPath: string = "";

  properties: EnvProperties = properties;
  public openaireEntities = OpenaireEntities;
  public routerHelper: RouterHelper = new RouterHelper();

  public removeUnknown(array: string[], type: boolean = false): string[] {
    if (type) {
      return this.removeDuplicates(array).filter(value => value.toLowerCase() !== 'unknown');
    } else {
      return array.filter(value => value.toLowerCase() !== 'unknown');
    }
  }
  
  public removeDuplicates(array: string[]): string[] {
    return array.filter(value => value.toLowerCase() !== this.entityType);
  }
  
  public buildCurationTooltip(): string {
    let tooltipContent: string = "<div class='uk-padding-small'>";
    
    tooltipContent += "<h5>Record in preview</h5>";
    tooltipContent += "<p>Bibliographic record accepted by the system, but not yet processed by <br> OpenAIRE tools for information quality improvement and de-duplication</p>";
    
    tooltipContent += "</div>";
    return tooltipContent;
  }
  
  get projectNames(): string[] {
    if (this.projects && this.projects.length > 0) {
      return this.projects.map(project => {
        let value = project.funderShortname ? project.funderShortname : project.funderName;
        if (project.acronym || project.title) {
          value = value + ' | ' + (project.acronym ? project.acronym :
            (project.title.length > 25 ? (project.title.slice(0, 25) + '...'): project.title));
        }
        if(project.code) {
          value = value + ' (' + project.code + ')';
        }
        return value;
      });
    }
    return [];
  }
  
  get organizationNames(): string[] {
    if (this.organizations && this.organizations.length > 0) {
      return this.organizations.map(organization => organization.name);
    }
    return [];
  }

  public addEoscPrevInParams(obj) {
    if(properties.adminToolsPortalType == "eosc" && this.prevPath) {
      return this.routerHelper.addQueryParam("pv", this.prevPath, obj);
    }
    return obj;
  }
}