openaire-library/landingPages/landing-utils/landing-header/landing-header.component.ts

200 lines
10 KiB
TypeScript

import {Component, Input} from "@angular/core";
import {EnvProperties} from "../../../utils/properties/env-properties";
import {Author} from "../../../utils/result-preview/result-preview";
import {AlertModal} from "../../../utils/modal/alert";
import {OpenaireEntities} from "src/app/openaireLibrary/utils/properties/searchFields";
@Component({
selector: 'landing-header',
template: `
<div class="title-section" [class.uk-margin-small-bottom]="!isSticky" [ngClass]="titleClass">
<div class="uk-margin-small-bottom">
<showTitle [titleName]="title" classNames="uk-margin-remove-bottom"></showTitle>
<div *ngIf="subTitle">
<span class="uk-text-meta uk-text-small" [innerHTML]="subTitle"></span>
</div>
</div>
<div class="uk-margin-bottom uk-text-xsmall uk-text-emphasis uk-flex uk-flex-middle">
<!-- oa -->
<ng-container *ngIf="(openAccessMandatePublications != undefined && openAccessMandatePublications) || (openAccessMandateDatasets != undefined && openAccessMandateDatasets)">
<span class="uk-margin-xsmall-right uk-text-success">
<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 class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
</ng-container>
<!-- types -->
<span *ngIf="entityType" 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>
<span *ngIf="entityType" class="uk-text-capitalize uk-text-bolder" style="text-decoration: underline;">
{{entityType}}
</span>
<span *ngIf="entityType && types && removeUnknown(types, true).length > 0">
<icon name="keyboard_double_arrow_right" [flex]="true" ratio="0.8"></icon>
</span>
<span *ngIf="types && removeUnknown(types, true).length > 0" class="uk-text-italic">
{{removeUnknown(types, true).join(' , ')}}
</span>
<!-- dates -->
<ng-container *ngIf="startDate && !endDate">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span class="uk-margin-xsmall-right">From</span>
<span>{{startDate | date: 'dd MMM yyyy'}}</span>
</ng-container>
<ng-container *ngIf="!startDate && endDate">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span class="uk-margin-xsmall-right">Until</span>
<span>{{endDate | date: 'dd MMM yyyy'}}</span>
</ng-container>
<ng-container *ngIf="startDate && endDate">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<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>
</ng-container>
<ng-container *ngIf="status && status != ''">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span>{{status}}</span>
</ng-container>
<ng-container *ngIf="date">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span>{{date | date: 'dd MMM yyyy': 'UTC'}}</span>
</ng-container>
<ng-container *ngIf="embargoEndDate">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<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>
<!-- languages -->
<ng-container *ngIf="languages && removeUnknown(languages).length > 0">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<ng-container *ngFor="let language of removeUnknown(languages)">
<span>{{language}}</span>
</ng-container>
</ng-container>
<!-- programming languages -->
<ng-container *ngIf="programmingLanguages && programmingLanguages.length > 0">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<ng-container *ngFor="let programmingLanguage of programmingLanguages">
<span>{{programmingLanguage}}</span>
</ng-container>
</ng-container>
<!-- published info -->
<showPublisher [publisher]="publisher" [journal]="journal" [properties]="properties"></showPublisher>
<!-- data provider labels -->
<ng-container *ngIf="compatibility && !(compatibility.info == 'not available' && type == 'service')">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span>
<!-- link not working - dont know why -->
<a *ngIf="compatibility.id"
[queryParams]="{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">
<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="aggregationStatus && aggregationStatus.fulltexts && aggregationStatus.fulltexts > 0">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span>OpenAIRE Text Mining</span>
</ng-container>
<ng-container *ngIf="thematic">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span>Thematic</span>
</ng-container>
</div>
<div *ngIf="authors">
<showAuthors [authorsLimit]="authorLimit" [modal]="modal" [showAll]="showAllAuthors" [authors]="authors" [isSticky]="isSticky"></showAuthors>
</div>
</div>`
})
export class LandingHeaderComponent {
@Input() entityType: string;
@Input() properties: EnvProperties;
@Input() types: string[];
@Input() startDate: number; // project landing
@Input() endDate: number; // project landing
@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;
@Input() title: string;
@Input() subTitle: string;
@Input() authors: Author[];
@Input() authorLimit: number = 7;
@Input() showAllAuthors: boolean = true;
@Input() underCuration: boolean = false;
@Input() modal: AlertModal;
@Input() titleClass: string = null;
@Input() isTitleH1:boolean =true;
@Input() isSticky: boolean = false;
@Input() publisher; // showPublisher component
@Input() journal; // showPublisher component
@Input() languages;
@Input() programmingLanguages;
@Input() compatibility; // data provider landing
@Input() aggregationStatus; // data provider landing
@Input() thematic: boolean; // data provider landing
@Input() type; // data provider landing
public openaireEntities = OpenaireEntities;
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;
}
}