MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'explore-redesign' of code-repo.d4science.org:MaDgIK/openaire-library into explore-redesign

This commit is contained in:
Konstantinos Triantafyllou 2023-03-02 16:18:39 +02:00
parent 187c22eb9d 8096c20e2d
commit 00081e2d1b
18 changed files with 1244 additions and 630 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
claims/claim-utils/claimHelper.class.ts
View File

@ -168,7 +168,7 @@ export class ShowOptions {
this.basketShowSources = false; this.basketShowSources = false;
} }
showLinkTo() { showLinkTo() {
console.log(this.linkTo, "showLinkTo") // console.log(this.linkTo, "showLinkTo")
this.show = this.linkTo; this.show = this.linkTo;
this.basketswitchToLinkTo(); this.basketswitchToLinkTo();
HelperFunctions.scroll(); HelperFunctions.scroll();

1
claims/directLinking/directLinking.component.ts
View File

@ -152,6 +152,7 @@ export class DirectLinkingComponent {
entity.type = "project"; entity.type = "project";
entity.title = project.projectName; entity.title = project.projectName;
entity.project = new ClaimProject(); entity.project = new ClaimProject();
entity.project.url = properties.searchLinkToProject + entity.id;
entity.project.acronym = project.projectAcronym; entity.project.acronym = project.projectAcronym;
entity.project.code = project.code; entity.project.code = project.code;
entity.project.endDate = project.endDate; entity.project.endDate = project.endDate;

13
claims/linking/linkingGeneric.component.html
View File

@ -30,9 +30,16 @@
<breadcrumbs *ngIf="!inlineEntity" [breadcrumbs]="breadcrumbs"></breadcrumbs> <breadcrumbs *ngIf="!inlineEntity" [breadcrumbs]="breadcrumbs"></breadcrumbs>
<!-- [routerLink]="properties.searchLinkToResult.split('?')[0]"--> <!-- [routerLink]="properties.searchLinkToResult.split('?')[0]"-->
<!-- [queryParams]="routerHelper.createQueryParam('id', inlineEntity.id)"--> <!-- [queryParams]="routerHelper.createQueryParam('id', inlineEntity.id)"-->
<a *ngIf="inlineEntity" <a *ngIf="inlineEntity && inlineEntity.result"
[routerLink]="inlineEntity.result.url.split('?')[0]" [routerLink]="inlineEntity.result?.url.split('?')[0]"
[queryParams]="routerHelper.createQueryParam(inlineEntity.result.url.split('?')[1].split('=')[0], inlineEntity.id)" [queryParams]="routerHelper.createQueryParam(inlineEntity.result?.url.split('?')[1].split('=')[0], inlineEntity.id)"
class="uk-button uk-button-link uk-text-transform-none uk-flex uk-flex-middle">
<icon name="west" [flex]="true"></icon>
<span class="uk-margin-small-left">Back to {{getEntityName(inlineEntity.type, false)}}</span>
</a>
<a *ngIf="inlineEntity && inlineEntity.project"
[routerLink]="inlineEntity.project?.url?.split('?')[0]"
[queryParams]="routerHelper.createQueryParam(inlineEntity.project?.url.split('?')[1].split('=')[0], inlineEntity.id)"
class="uk-button uk-button-link uk-text-transform-none uk-flex uk-flex-middle"> class="uk-button uk-button-link uk-text-transform-none uk-flex uk-flex-middle">
<icon name="west" [flex]="true"></icon> <icon name="west" [flex]="true"></icon>
<span class="uk-margin-small-left">Back to {{getEntityName(inlineEntity.type, false)}}</span> <span class="uk-margin-small-left">Back to {{getEntityName(inlineEntity.type, false)}}</span>

2
claims/linking/selected/ClaimEntityTitle.component.ts
View File

@ -7,7 +7,7 @@ import {StringUtils} from "../../../utils/string-utils.class";
template: template:
` `
<div class="uk-grid uk-flex uk-flex-middle"> <div class="uk-grid uk-flex uk-flex-middle">
<span *ngIf="showIcon" > <span *ngIf="showIcon" class="uk-flex">
<span *ngIf=" entity.result" class="material-icons uk-text-small uk-text-meta" >insert_drive_file <span *ngIf=" entity.result" class="material-icons uk-text-small uk-text-meta" >insert_drive_file
</span> </span>
<span *ngIf=" entity.project" <span *ngIf=" entity.project"

470
landingPages/dataProvider/dataProvider.component.html
View File

@ -1,5 +1,6 @@
<div class="landing uk-section uk-padding-remove tm-middle"> <!-- Desktop view -->
<div class="tm-main"> <div class="uk-visible@m landing uk-section uk-padding-remove tm-middle">
<div *ngIf="!isMobile" class="tm-main">
<div class="dataprovider"> <div class="dataprovider">
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid> <div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
@ -120,7 +121,8 @@
[entityType]="getTypeName()" [entityType]="getTypeName()"
[compatibility]="dataProviderInfo.compatibility" [compatibility]="dataProviderInfo.compatibility"
[aggregationStatus]="dataProviderInfo.aggregationStatus" [aggregationStatus]="dataProviderInfo.aggregationStatus"
[thematic]="dataProviderInfo.thematic" [type]="type"> [thematic]="dataProviderInfo.thematic" [type]="type"
[journal]="dataProviderInfo.journal">
</landing-header> </landing-header>
<!-- Labels --> <!-- Labels -->
@ -266,8 +268,276 @@
</div> </div>
<div id="landing-sections" class="uk-text-small"> <div id="landing-sections" class="uk-text-small">
<ng-container>
<ng-container *ngTemplateOutlet="summary_content"></ng-container>
</ng-container>
<ng-container *ngIf="fetchProjects.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="projects_content"></ng-container>
</ng-container>
<ng-container *ngIf="fetchDataproviders.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="dataproviders_content"></ng-container>
</ng-container>
<ng-container *ngIf="fetchPublications.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="publications_content"></ng-container>
</ng-container>
<ng-container *ngIf="fetchDatasets.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="datasets_content"></ng-container>
</ng-container>
<ng-container *ngIf="fetchSoftware.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="software_content"></ng-container>
</ng-container>
<ng-container *ngIf="fetchOrps.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="other_content"></ng-container>
</ng-container>
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
<ng-container *ngTemplateOutlet="relatedDatasources_content"></ng-container>
</ng-container>
<ng-container *ngIf="dataProviderInfo && hasMetrics">
<ng-container *ngTemplateOutlet="metricsContent"></ng-container>
</ng-container>
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
<ng-container *ngTemplateOutlet="statistics_content"></ng-container>
</ng-container>
</div>
<div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>
</ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile view -->
<div *ngIf="isMobile" class="uk-hidden@m uk-position-relative landing">
<ng-container *ngIf="dataProviderInfo">
<div *ngIf="mobileContent == 'info'" class="uk-container uk-section">
<landing-header [properties]="properties" [title]="dataProviderInfo.title.name"
[subTitle]="(dataProviderInfo.officialName
&& dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null"
[types]="dataProviderInfo.type ? [dataProviderInfo.type] : null"
[entityType]="getTypeName()"
[compatibility]="dataProviderInfo.compatibility"
[aggregationStatus]="dataProviderInfo.aggregationStatus"
[thematic]="dataProviderInfo.thematic" [type]="type"
[journal]="dataProviderInfo.journal">
</landing-header>
<div *ngIf="dataProviderInfo.title && dataProviderInfo.title.url"
class="uk-text-small uk-margin-small-top">
<span class="uk-text-meta">Web page: </span>
<a [href]="dataProviderInfo.title.url" target="_blank"
class="uk-button uk-button-text uk-text-lowercase uk-text-normal custom-external">
{{dataProviderInfo.title.url}}
</a>
</div>
<div *ngIf="dataProviderInfo.identifiers && dataProviderInfo.identifiers.size > 0" class="uk-margin-small-top uk-text-small">
<showIdentifiers [identifiers]="dataProviderInfo.identifiers" [showViewAll]="true"></showIdentifiers>
</div>
<div class="uk-section uk-margin-top uk-text-large uk-text-empashis uk-text-bold">
<hr>
<ng-container>
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(summaryFsModal, 'Summary'); onSelectActiveTab('summary')">
<span>Summary</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="fetchProjects.searchUtils.totalResults > 0">
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(projectsFsModal, openaireEntities.PROJECTS); onSelectActiveTab('projects')">
<span>{{openaireEntities.PROJECTS}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="fetchDataproviders.searchUtils.totalResults > 0">
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(dataprovidersFsModal, openaireEntities.DATASOURCES); onSelectActiveTab('datasources')">
<span>{{openaireEntities.DATASOURCES}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="fetchPublications.searchUtils.totalResults > 0">
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(publicationsFsModal, openaireEntities.PUBLICATIONS); onSelectActiveTab('publications')">
<span>{{openaireEntities.PUBLICATIONS}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="fetchDatasets.searchUtils.totalResults > 0">
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(datasetsFsModal, openaireEntities.DATASETS); onSelectActiveTab('datasets')">
<span>{{openaireEntities.DATASETS}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="fetchSoftware.searchUtils.totalResults > 0">
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(softwareFsModal, openaireEntities.SOFTWARE); onSelectActiveTab('software')">
<span>{{openaireEntities.SOFTWARE}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="fetchOrps.searchUtils.totalResults > 0">
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(otherFsModal, openaireEntities.OTHER); onSelectActiveTab('other')">
<span>{{openaireEntities.OTHER}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(relatedDatasourcesFsModal, 'Related '+openaireEntities.DATASOURCES); onSelectActiveTab('relatedDatasources')">
<span>Related {{openaireEntities.DATASOURCES}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(statisticsFsModal, 'Statistics'); onSelectActiveTab('statistics')">
<span>Statistics</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
</div>
</div>
<div *ngIf="mobileContent == 'metrics'" class="uk-container uk-section">
<ng-container *ngTemplateOutlet="metricsContent"></ng-container>
</div>
<div *ngIf="mobileContent == 'actions'" class="uk-container uk-section">
<ng-container>
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
(click)="openFsModal(addThisFsModal, 'Share this '+openaireEntities.DATASOURCE+' in your social networks')">
<icon [flex]="true" name="share" visuallyHidden="share"></icon>
<span class="uk-margin-small-left">Share</span>
</div>
<hr class="uk-margin-remove">
</ng-container>
</div>
<div class="landing-action-bar-mobile uk-background-default">
<div class="uk-container uk-flex-middle uk-grid uk-text-xsmall uk-text-meta" [ngClass]="hasMetrics ? 'uk-child-width-1-3' : 'uk-child-width-1-2'">
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'">
<icon name="note_add" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''"></icon>
<span>{{openaireEntities.DATASOURCE}}</span>
</a>
</div>
<div *ngIf="dataProviderInfo && hasMetrics">
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'metrics'">
<icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon>
<span>Metrics</span>
</a>
</div>
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'actions'">
<icon name="pending" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
<span>Actions</span>
</a>
</div>
</div>
</div>
<fs-modal #summaryFsModal classTitle="uk-tile-default uk-border-bottom" (cancelEmitter)="cancelSummaryClicked()">
<ng-container *ngTemplateOutlet="summary_content"></ng-container>
</fs-modal>
<fs-modal #projectsFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="fetchProjects.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="projects_content"></ng-container>
</fs-modal>
<fs-modal #dataprovidersFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="fetchDataproviders.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="dataproviders_content"></ng-container>
</fs-modal>
<fs-modal #publicationsFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="fetchPublications.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="publications_content"></ng-container>
</fs-modal>
<fs-modal #datasetsFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="fetchDatasets.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="datasets_content"></ng-container>
</fs-modal>
<fs-modal #softwareFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="fetchSoftware.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="software_content"></ng-container>
</fs-modal>
<fs-modal #otherFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="fetchOrps.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="other_content"></ng-container>
</fs-modal>
<fs-modal #relatedDatasourcesFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
<ng-container *ngTemplateOutlet="relatedDatasources_content"></ng-container>
</fs-modal>
<fs-modal #statisticsFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
<ng-container *ngTemplateOutlet="statistics_content"></ng-container>
</fs-modal>
</ng-container>
</div>
<feedback *ngIf="dataProviderInfo && properties.reCaptchaSiteKey" [dataProviderInfo]="dataProviderInfo"
[properties]="properties" [entityType]="getTypeName()" [fields]="feedbackFields"
[(showForm)]="showFeedback"></feedback>
<modal-alert *ngIf="dataProviderInfo" #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
<addThis></addThis>
</modal-alert>
<modal-alert *ngIf="dataProviderInfo && dataProviderInfo.organizations" #organizationsModal>
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: dataProviderInfo.organizations.length}"></ng-container>
</modal-alert>
<modal-alert *ngIf="dataProviderInfo?.description" #descriptionModal
[large]="true">
<div [innerHTML]="dataProviderInfo.description"></div>
</modal-alert>
<ng-template #organizations_template let-threshold="threshold">
<span *ngFor="let organization of dataProviderInfo.organizations.slice(0, threshold); let i=index" class="uk-text-small"
[attr.uk-tooltip]="organization.acronym && organization.name ? 'pos:right; delay:10' : 'cls: uk-invisible'"
[title]="organization.name">
<a *ngIf="organization.id" class="uk-link-text"
[queryParams]="{organizationId: organization.id}" routerLinkActive="router-link-active"
[routerLink]="properties.searchLinkToOrganization.split('?')[0]">
{{(organization.acronym) ? organization.acronym : ''}}
{{(!organization.acronym && organization.name) ? organization.name : ''}}
</a>
<span *ngIf="!organization.id">
<span *ngIf="organization.acronym">{{organization.acronym}}</span>
<span *ngIf="!organization.acronym && organization.name">{{organization.name}}</span>
<span *ngIf="(i < dataProviderInfo.organizations.length-1)">,</span>
</span>
<span *ngIf="(i < dataProviderInfo.organizations.length-1)">, </span>
</span>
<span *ngIf="dataProviderInfo.organizations.length > threshold"> ... </span>
</ng-template>
<modal-alert *ngIf="dataProviderInfo && dataProviderInfo.subjects" #subjectsModal>
<span>{{dataProviderInfo.subjects.join(", ")}}</span>
</modal-alert>
<ng-template #summary_content>
<div id="summary" class="landing-section landing-section-height-auto"> <div id="summary" class="landing-section landing-section-height-auto">
<div class="uk-card uk-card-default card-tab uk-grid uk-margin-remove-left uk-margin-medium-top uk-margin-medium-bottom"> <div class="uk-grid uk-margin-remove-left uk-margin-medium-top uk-margin-medium-bottom" [ngClass]="isMobile ? '' : 'uk-card uk-card-default card-tab'">
<div *ngIf="!(hasPrimaryInfo || (!aggregationStatusIsInitialized || hasAggregationStatusInfo)) && !hasSecondaryInfo" <div *ngIf="!(hasPrimaryInfo || (!aggregationStatusIsInitialized || hasAggregationStatusInfo)) && !hasSecondaryInfo"
class="uk-width-expand uk-height-small uk-flex uk-flex-center uk-flex-middle"> class="uk-width-expand uk-height-small uk-flex uk-flex-center uk-flex-middle">
<div class="uk-animation-fade uk-text-meta uk-text-large"> <div class="uk-animation-fade uk-text-meta uk-text-large">
@ -275,28 +545,29 @@
</div> </div>
</div> </div>
<div *ngIf="hasPrimaryInfo || (!aggregationStatusIsInitialized || hasAggregationStatusInfo)" <div *ngIf="hasPrimaryInfo || (!aggregationStatusIsInitialized || hasAggregationStatusInfo)"
class="uk-width-expand uk-padding uk-inline"> class="uk-width-expand uk-inline" [ngClass]="isMobile ? 'uk-padding-remove' : 'uk-padding'">
<!-- Description --> <!-- Description -->
<div *ngIf="dataProviderInfo.description" class="uk-margin-medium-bottom"> <div *ngIf="dataProviderInfo.description && (!viewAllMobile || viewAllMobile == 'description')" class="uk-margin-medium-bottom">
<div class="uk-text-justify"> <div class="uk-text-justify">
<div class="uk-text-meta uk-margin-small-bottom">Description</div> <div *ngIf="viewAllMobile != 'description'" class="uk-text-meta uk-margin-small-bottom">Description</div>
<div class="multi-line-ellipsis lines-10"> <div [ngClass]="viewAllMobile == 'description' ? '' : 'multi-line-ellipsis lines-10'">
<div #descriptionDiv class="uk-margin-small-bottom" <div #descriptionDiv class="uk-margin-small-bottom"
[innerHtml]="dataProviderInfo.description"></div> [innerHtml]="dataProviderInfo.description"></div>
</div> </div>
<div *ngIf="showViewMoreButton" class="uk-flex uk-flex-right"> <div *ngIf="showViewMoreButton && viewAllMobile != 'description'" class="uk-flex uk-flex-right">
<a (click)="openDescriptionModal();" class="view-more-less-link"> <a (click)="viewAllDescriptionClicked();" class="view-more-less-link">
View more View more
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<ul *ngIf="hasJournalInfo" class="uk-list uk-margin-medium-bottom uk-margin-remove-top"> <!-- <ul *ngIf="hasJournalInfo" class="uk-list uk-margin-medium-bottom uk-margin-remove-top">
<showPublisher [journal]="dataProviderInfo.journal" [properties]="properties"></showPublisher> <showPublisher [journal]="dataProviderInfo.journal" [properties]="properties"></showPublisher>
</ul> </ul> -->
<div *ngIf="hasAggregationStatusInfo || dataProviderInfo.fundedContent" <ng-container *ngIf="!viewAllMobile">
<div *ngIf="hasAggregationStatusInfo || (dataProviderInfo.fundedContent && dataProviderInfo.fundedContent > 0)"
class="uk-margin-medium-bottom uk-animation-fade uk-animation-fast"> class="uk-margin-medium-bottom uk-animation-fade uk-animation-fast">
<span *ngIf="dataProviderInfo.aggregationStatus?.fulltexts && dataProviderInfo.aggregationStatus?.fulltexts != -1" <span *ngIf="dataProviderInfo.aggregationStatus?.fulltexts && dataProviderInfo.aggregationStatus?.fulltexts != -1"
class="uk-margin-right uk-display-inline-block"> class="uk-margin-right uk-display-inline-block">
@ -329,16 +600,22 @@
<div class="uk-text-meta uk-margin-small-bottom">Content policy</div> <div class="uk-text-meta uk-margin-small-bottom">Content policy</div>
{{dataProviderInfo.contentpolicy}} {{dataProviderInfo.contentpolicy}}
</div> </div>
</ng-container>
<!-- Subjects --> <!-- Subjects -->
<div *ngIf="dataProviderInfo.subjects && dataProviderInfo.subjects.length > 0" <div *ngIf="dataProviderInfo.subjects && dataProviderInfo.subjects.length > 0 && (!viewAllMobile || viewAllMobile == 'subjects')"
class="uk-margin-medium-bottom uk-margin-bottom"> class="uk-margin-medium-bottom uk-margin-bottom">
<div class="uk-height-max-medium uk-overflow-auto"> <div class="uk-height-max-medium uk-overflow-auto">
<div class="uk-text-meta uk-margin-small-bottom">Subjects </div> <div *ngIf="viewAllMobile != 'subjects'" class="uk-text-meta uk-margin-small-bottom">Subjects </div>
<ng-container *ngIf="!viewAllMobile">
<span>{{dataProviderInfo.subjects.slice(0, lessBtnSubjects ? dataProviderInfo.subjects.length : thresholdSubjects).join(", ")}}</span> <span>{{dataProviderInfo.subjects.slice(0, lessBtnSubjects ? dataProviderInfo.subjects.length : thresholdSubjects).join(", ")}}</span>
<span *ngIf="dataProviderInfo.subjects.length > thresholdSubjects && !lessBtnSubjects"> ... </span> <span *ngIf="dataProviderInfo.subjects.length > thresholdSubjects && !lessBtnSubjects"> ... </span>
</ng-container>
<ng-container *ngIf="viewAllMobile == 'subjects'">
<span>{{dataProviderInfo.subjects.join(", ")}}</span>
</ng-container>
</div> </div>
<div *ngIf="dataProviderInfo.subjects.length > thresholdSubjects && !lessBtnSubjects" <div *ngIf="dataProviderInfo.subjects.length > thresholdSubjects && !lessBtnSubjects && viewAllMobile != 'subjects'"
class="uk-width-1-1 uk-text-right"> class="uk-width-1-1 uk-text-right">
<a (click)="viewAllSubjectsClick();" class="view-more-less-link"> <a (click)="viewAllSubjectsClick();" class="view-more-less-link">
View all {{dataProviderInfo.subjects.length | number}} subjects View all {{dataProviderInfo.subjects.length | number}} subjects
@ -348,12 +625,11 @@
<a (click)="viewAllSubjects = !viewAllSubjects; lessBtnSubjects=false;" class="view-more-less-link">View less subjects</a> <a (click)="viewAllSubjects = !viewAllSubjects; lessBtnSubjects=false;" class="view-more-less-link">View less subjects</a>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="hasSecondaryInfo" <div *ngIf="hasSecondaryInfo"
[class]="'uk-inline uk-padding uk-padding-remove-horizontal ' + (hasPrimaryInfo?'uk-width-1-3@m': 'uk-width-expand')"> [class]="'uk-inline uk-padding-remove-horizontal ' + (hasPrimaryInfo?'uk-width-1-3@m': 'uk-width-expand')" [ngClass]="isMobile ? '' : 'uk-padding'">
<div class="uk-padding uk-padding-remove-vertical uk-height-1-1"> <div class="uk-height-1-1" [ngClass]="isMobile ? '' : 'uk-padding uk-padding-remove-vertical'">
<div *ngIf="dataProviderInfo.oaiPmhURL || dataProviderInfo.provenance?.size > 0" <div *ngIf="(dataProviderInfo.oaiPmhURL || dataProviderInfo.provenance?.size > 0) && !viewAllMobile"
class="uk-margin-medium-bottom"> class="uk-margin-medium-bottom">
<div *ngIf="dataProviderInfo.oaiPmhURL" class="uk-margin-medium-bottom"> <div *ngIf="dataProviderInfo.oaiPmhURL" class="uk-margin-medium-bottom">
<div class="uk-text-meta uk-margin-small-bottom">OAI-PMH</div> <div class="uk-text-meta uk-margin-small-bottom">OAI-PMH</div>
@ -378,12 +654,12 @@
</span> </span>
</div> </div>
</div> </div>
<div *ngIf="dataProviderInfo.organizations && dataProviderInfo.organizations.length > 0" <div *ngIf="dataProviderInfo.organizations && dataProviderInfo.organizations.length > 0 && (!viewAllMobile || viewAllMobile == 'organizations')"
class="uk-margin-medium-bottom"> class="uk-margin-medium-bottom">
<div class="uk-text-meta uk-margin-small-bottom">{{openaireEntities.ORGANIZATIONS}}</div> <div *ngIf="viewAllMobile != 'organizations'" class="uk-text-meta uk-margin-small-bottom">{{openaireEntities.ORGANIZATIONS}}</div>
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: lessBtnOrganizations ? dataProviderInfo.organizations.length : thresholdOrganizations }"></ng-container> <ng-container *ngTemplateOutlet="organizations_template; context: { threshold: (lessBtnOrganizations || viewAllMobile == 'organizations') ? dataProviderInfo.organizations.length : thresholdOrganizations }"></ng-container>
<div *ngIf="dataProviderInfo.organizations.length > thresholdOrganizations && !lessBtnOrganizations" <div *ngIf="dataProviderInfo.organizations.length > thresholdOrganizations && !lessBtnOrganizations && viewAllMobile != 'organizations'"
class="uk-width-1-1 uk-text-right"> class="uk-width-1-1 uk-text-right">
<a (click)="viewAllOrganizationsClick();" class="view-more-less-link"> <a (click)="viewAllOrganizationsClick();" class="view-more-less-link">
View all {{dataProviderInfo.organizations.length | number}} organizations View all {{dataProviderInfo.organizations.length | number}} organizations
@ -397,9 +673,9 @@
</div> </div>
</div> </div>
</div> </div>
</ng-template>
<!-- Projects--> <ng-template #projects_content>
<ng-container *ngIf="fetchProjects.searchUtils.totalResults > 0">
<div id="projects" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="projects" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchProjects" resultType="project" <search-tab [fetch]="fetchProjects" resultType="project"
[params]="getParamsForSearchLink()" [params]="getParamsForSearchLink()"
@ -407,9 +683,9 @@
[properties]="properties"> [properties]="properties">
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-template>
<!-- Datasources -->
<ng-container *ngIf="fetchDataproviders.searchUtils.totalResults > 0"> <ng-template #dataproviders_content>
<div id="datasources" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="datasources" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchDataproviders" resultType="dataprovider" <search-tab [fetch]="fetchDataproviders" resultType="dataprovider"
[params]="getParamsForSearchLink()" [params]="getParamsForSearchLink()"
@ -417,9 +693,9 @@
[properties]="properties"> [properties]="properties">
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-template>
<!--Publications-->
<ng-container *ngIf="fetchPublications.searchUtils.totalResults > 0"> <ng-template #publications_content>
<div id="publications" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="publications" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchPublications" resultType="publication" <search-tab [fetch]="fetchPublications" resultType="publication"
[params]="getParamsForSearchLink('publications')" [params]="getParamsForSearchLink('publications')"
@ -427,9 +703,9 @@
[properties]="properties"> [properties]="properties">
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-template>
<!--Research Data-->
<ng-container *ngIf="fetchDatasets.searchUtils.totalResults > 0"> <ng-template #datasets_content>
<div id="datasets" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="datasets" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchDatasets" resultType="dataset" <search-tab [fetch]="fetchDatasets" resultType="dataset"
[params]="getParamsForSearchLink('datasets')" [params]="getParamsForSearchLink('datasets')"
@ -437,9 +713,9 @@
[properties]="properties"> [properties]="properties">
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-template>
<!--Software-->
<ng-container *ngIf="fetchSoftware.searchUtils.totalResults > 0"> <ng-template #software_content>
<div id="software" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="software" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchSoftware" resultType="software" <search-tab [fetch]="fetchSoftware" resultType="software"
[params]="getParamsForSearchLink('software')" [params]="getParamsForSearchLink('software')"
@ -447,9 +723,9 @@
[properties]="properties"> [properties]="properties">
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-template>
<!--Other-->
<ng-container *ngIf="fetchOrps.searchUtils.totalResults > 0"> <ng-template #other_content>
<div id="other" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="other" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchOrps" resultType="other" <search-tab [fetch]="fetchOrps" resultType="other"
[params]="getParamsForSearchLink('other')" [params]="getParamsForSearchLink('other')"
@ -457,10 +733,9 @@
[properties]="properties"> [properties]="properties">
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-template>
<!--Related Datasources-->
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0 <ng-template #relatedDatasources_content>
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
<div id="relatedDatasources" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="relatedDatasources" class="landing-section uk-padding uk-padding-remove-horizontal">
<relatedDatasourcesTab <relatedDatasourcesTab
[dataproviderId]="datasourceId" [dataproviderId]="datasourceId"
@ -472,9 +747,26 @@
[modal]="relatedDatasourcesModal"> [modal]="relatedDatasourcesModal">
</relatedDatasourcesTab> </relatedDatasourcesTab>
</div> </div>
</ng-container> </ng-template>
<!-- Metrics -->
<ng-container *ngIf="dataProviderInfo && hasMetrics"> <ng-template #statistics_content>
<div id="statistics" class="landing-section uk-padding uk-padding-remove-horizontal">
<div class="uk-text-meta uk-text-large uk-text-uppercase uk-margin-medium-bottom">Statistics</div>
<errorMessages [status]="[fetchPublications.searchUtils.status, fetchDatasets.searchUtils.status,
fetchSoftware.searchUtils.status, fetchOrps.searchUtils.status]"
[type]="'statistics'" tab_error_class=true></errorMessages>
<div *ngIf="statsClicked &&
(fetchPublications.searchUtils.status == errorCodes.DONE || fetchDatasets.searchUtils.status == errorCodes.DONE
|| fetchSoftware.searchUtils.status == errorCodes.DONE || fetchOrps.searchUtils.status == errorCodes.DONE)">
<statisticsTab [fetchPublications]="fetchPublications" [fetchDatasets]="fetchDatasets"
[fetchSoftware]="fetchSoftware" [fetchOther]="fetchOrps"
[datasourceId]="datasourceId">
</statisticsTab>
</div>
</div>
</ng-template>
<ng-template #metricsContent>
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal">
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher> <ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
<li class="uk-padding-remove"> <li class="uk-padding-remove">
@ -532,10 +824,10 @@
</div> </div>
</li> </li>
<!-- usage --> <!-- usage -->
<li> <li *ngIf="totalDownloads || totalViews">
<div class="uk-flex uk-flex-center uk-flex-middle"> <div class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="isMobile">
<div class="uk-margin-large-right"> <div class="uk-margin-large-right uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="!isMobile">
<div *ngIf="totalDownloads" class="uk-text-center uk-margin-medium-bottom"> <div *ngIf="totalDownloads" class="uk-text-center uk-margin-medium-bottom" [class.uk-margin-medium-right]="isMobile">
<div class="uk-text-background uk-text-bold number metrics-number" <div class="uk-text-background uk-text-bold number metrics-number"
[attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{totalDownloads | number}}">{{formatNumber(totalDownloads)}}</div> title="{{totalDownloads | number}}">{{formatNumber(totalDownloads)}}</div>
@ -567,76 +859,8 @@
</li> </li>
</ul> </ul>
</div> </div>
</ng-container>
<!--Statistics-->
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
<div id="statistics" class="landing-section uk-padding uk-padding-remove-horizontal">
<div class="uk-text-meta uk-text-large uk-text-uppercase uk-margin-medium-bottom">Statistics</div>
<errorMessages [status]="[fetchPublications.searchUtils.status, fetchDatasets.searchUtils.status,
fetchSoftware.searchUtils.status, fetchOrps.searchUtils.status]"
[type]="'statistics'" tab_error_class=true></errorMessages>
<div *ngIf="statsClicked &&
(fetchPublications.searchUtils.status == errorCodes.DONE || fetchDatasets.searchUtils.status == errorCodes.DONE
|| fetchSoftware.searchUtils.status == errorCodes.DONE || fetchOrps.searchUtils.status == errorCodes.DONE)">
<statisticsTab [fetchPublications]="fetchPublications" [fetchDatasets]="fetchDatasets"
[fetchSoftware]="fetchSoftware" [fetchOther]="fetchOrps"
[datasourceId]="datasourceId">
</statisticsTab>
</div>
</div>
</ng-container>
</div>
<div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>
</ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<feedback *ngIf="dataProviderInfo && properties.reCaptchaSiteKey" [dataProviderInfo]="dataProviderInfo"
[properties]="properties" [entityType]="getTypeName()" [fields]="feedbackFields"
[(showForm)]="showFeedback"></feedback>
<modal-alert *ngIf="dataProviderInfo" #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
<addThis></addThis>
</modal-alert>
<modal-alert *ngIf="dataProviderInfo && dataProviderInfo.organizations" #organizationsModal>
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: dataProviderInfo.organizations.length}"></ng-container>
</modal-alert>
<modal-alert *ngIf="dataProviderInfo?.description" #descriptionModal
[large]="true">
<div [innerHTML]="dataProviderInfo.description"></div>
</modal-alert>
<ng-template #organizations_template let-threshold="threshold">
<span *ngFor="let organization of dataProviderInfo.organizations.slice(0, threshold); let i=index" class="uk-text-small"
[attr.uk-tooltip]="organization.acronym && organization.name ? 'pos:right; delay:10' : 'cls: uk-invisible'"
[title]="organization.name">
<a *ngIf="organization.id" class="uk-link-text"
[queryParams]="{organizationId: organization.id}" routerLinkActive="router-link-active"
[routerLink]="properties.searchLinkToOrganization.split('?')[0]">
{{(organization.acronym) ? organization.acronym : ''}}
{{(!organization.acronym && organization.name) ? organization.name : ''}}
</a>
<span *ngIf="!organization.id">
<span *ngIf="organization.acronym">{{organization.acronym}}</span>
<span *ngIf="!organization.acronym && organization.name">{{organization.name}}</span>
<span *ngIf="(i < dataProviderInfo.organizations.length-1)">,</span>
</span>
<span *ngIf="(i < dataProviderInfo.organizations.length-1)">, </span>
</span>
<span *ngIf="dataProviderInfo.organizations.length > threshold"> ... </span>
</ng-template> </ng-template>
<modal-alert *ngIf="dataProviderInfo && dataProviderInfo.subjects" #subjectsModal> <fs-modal *ngIf="dataProviderInfo" #addThisFsModal classTitle="uk-tile-default uk-border-bottom" classBody="uk-flex uk-flex-center uk-flex-middle">
<span>{{dataProviderInfo.subjects.join(", ")}}</span> <addThis></addThis>
</modal-alert> </fs-modal>

64
landingPages/dataProvider/dataProvider.component.ts
View File

@ -30,6 +30,8 @@ import {TabComponent} from "../../utils/tabs/tab.component";
import {OpenaireEntities} from "../../utils/properties/searchFields"; import {OpenaireEntities} from "../../utils/properties/searchFields";
import {MetricsService} from '../../services/metrics.service'; import {MetricsService} from '../../services/metrics.service';
import {NumberUtils} from '../../utils/number-utils.class'; import {NumberUtils} from '../../utils/number-utils.class';
import {LayoutService} from '../../dashboard/sharedComponents/sidebar/layout.service';
import {FullScreenModalComponent} from '../../utils/modal/full-screen-modal/full-screen-modal.component';
declare var ResizeObserver; declare var ResizeObserver;
@ -72,7 +74,8 @@ export class DataProviderComponent {
// @ViewChild('statisticsModal') statisticsModal; // @ViewChild('statisticsModal') statisticsModal;
// @ViewChild('relatedDatasourcesModal') relatedDatasourcesModal; // @ViewChild('relatedDatasourcesModal') relatedDatasourcesModal;
@ViewChild('addThisModal') addThisModal @ViewChild('addThisModal') addThisModal;
@ViewChild('addThisFsModal') addThisFsModal: FullScreenModalComponent;
// Variables for publications, research data, projects, datasources, related datasources tabs // Variables for publications, research data, projects, datasources, related datasources tabs
public fetchPublications: FetchResearchResults; public fetchPublications: FetchResearchResults;
@ -147,6 +150,21 @@ export class DataProviderComponent {
properties: EnvProperties = properties; properties: EnvProperties = properties;
public openaireEntities = OpenaireEntities; public openaireEntities = OpenaireEntities;
public isMobile: boolean = false;
public mobileContent: "info" | "metrics" | "actions" = "info";
public tabMobile: string = "";
public viewAllMobile: string = "";
// Full screen modals for small screens (mobile)
@ViewChild('summaryFsModal') summaryFsModal: FullScreenModalComponent;
@ViewChild('projectsFsModal') projectsFsModal: FullScreenModalComponent;
@ViewChild('dataprovidersFsModal') dataprovidersFsModal: FullScreenModalComponent;
@ViewChild('publicationsFsModal') publicationsFsModal: FullScreenModalComponent;
@ViewChild('datasetsFsModal') datasetsFsModal: FullScreenModalComponent;
@ViewChild('softwareFsModal') softwareFsModal: FullScreenModalComponent;
@ViewChild('otherFsModal') otherFsModal: FullScreenModalComponent;
@ViewChild('relatedDatasourcesFsModal') relatedDatasourcesFsModal: FullScreenModalComponent;
@ViewChild('statisticsFsModal') statisticsFsModal: FullScreenModalComponent;
constructor(private _dataproviderService: DataProviderService, constructor(private _dataproviderService: DataProviderService,
private _piwikService: PiwikService, private _piwikService: PiwikService,
private route: ActivatedRoute, private route: ActivatedRoute,
@ -161,7 +179,8 @@ export class DataProviderComponent {
private _location: Location, private _location: Location,
private indexInfoService: IndexInfoService, private indexInfoService: IndexInfoService,
private metricsService: MetricsService, private metricsService: MetricsService,
private cdr: ChangeDetectorRef) { private cdr: ChangeDetectorRef,
private layoutService: LayoutService) {
this.fetchPublications = new FetchResearchResults(this._searchResearchResultsService); this.fetchPublications = new FetchResearchResults(this._searchResearchResultsService);
this.fetchDatasets = new FetchResearchResults(this._searchResearchResultsService); this.fetchDatasets = new FetchResearchResults(this._searchResearchResultsService);
this.fetchSoftware = new FetchResearchResults(this._searchResearchResultsService); this.fetchSoftware = new FetchResearchResults(this._searchResearchResultsService);
@ -172,6 +191,9 @@ export class DataProviderComponent {
} }
ngOnInit() { ngOnInit() {
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
}));
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
this.subscriptions.push(this.indexInfoService.getLastIndexDate(this.properties).subscribe(lastIndexUpdate => { this.subscriptions.push(this.indexInfoService.getLastIndexDate(this.properties).subscribe(lastIndexUpdate => {
if (lastIndexUpdate) { if (lastIndexUpdate) {
@ -716,10 +738,16 @@ export class DataProviderComponent {
this.viewAllOrganizations = true; this.viewAllOrganizations = true;
if(this.dataProviderInfo.organizations.length <= this.thresholdOrganizations*2) { if(this.dataProviderInfo.organizations.length <= this.thresholdOrganizations*2) {
this.lessBtnOrganizations = true; this.lessBtnOrganizations = true;
} else {
if(this.isMobile) {
this.summaryFsModal.title += " - Organizations";
this.summaryFsModal.back = true;
this.viewAllMobile = "organizations";
} else { } else {
this.openOrganizationsModal(); this.openOrganizationsModal();
} }
} }
}
public openOrganizationsModal() { public openOrganizationsModal() {
this.organizationsModal.cancelButton = false; this.organizationsModal.cancelButton = false;
@ -732,10 +760,16 @@ export class DataProviderComponent {
this.viewAllSubjects = true; this.viewAllSubjects = true;
if(this.dataProviderInfo.subjects.length <= this.thresholdSubjects*2) { if(this.dataProviderInfo.subjects.length <= this.thresholdSubjects*2) {
this.lessBtnSubjects = true; this.lessBtnSubjects = true;
} else {
if(this.isMobile) {
this.summaryFsModal.title += " - Subjects";
this.summaryFsModal.back = true;
this.viewAllMobile = "subjects";
} else { } else {
this.openSubjectsModal(); this.openSubjectsModal();
} }
} }
}
public openSubjectsModal() { public openSubjectsModal() {
this.subjectsModal.cancelButton = false; this.subjectsModal.cancelButton = false;
@ -797,7 +831,6 @@ export class DataProviderComponent {
// ((!!this.dataProviderInfo.aggregationStatus.fulltexts && parseInt(this.dataProviderInfo.aggregationStatus.fulltexts) != -1) // ((!!this.dataProviderInfo.aggregationStatus.fulltexts && parseInt(this.dataProviderInfo.aggregationStatus.fulltexts) != -1)
// || (!!this.dataProviderInfo.aggregationStatus.fundedContent && parseInt(this.dataProviderInfo.aggregationStatus.fundedContent) != -1) // || (!!this.dataProviderInfo.aggregationStatus.fundedContent && parseInt(this.dataProviderInfo.aggregationStatus.fundedContent) != -1)
// || !!this.dataProviderInfo.aggregationStatus.lastUpdateDate)); // || !!this.dataProviderInfo.aggregationStatus.lastUpdateDate));
return (!!this.dataProviderInfo.aggregationStatus && return (!!this.dataProviderInfo.aggregationStatus &&
((!!this.dataProviderInfo.aggregationStatus.fulltexts && parseInt(this.dataProviderInfo.aggregationStatus.fulltexts) != -1))); ((!!this.dataProviderInfo.aggregationStatus.fulltexts && parseInt(this.dataProviderInfo.aggregationStatus.fulltexts) != -1)));
} }
@ -839,6 +872,16 @@ export class DataProviderComponent {
return StringUtils.getEntityName(this.type, false); return StringUtils.getEntityName(this.type, false);
} }
public viewAllDescriptionClicked() {
if(this.isMobile) {
this.summaryFsModal.title += " - Description";
this.summaryFsModal.back = true;
this.viewAllMobile = "description";
} else {
this.openDescriptionModal();
}
}
public openDescriptionModal() { public openDescriptionModal() {
this.descriptionModal.alertFooter = false; this.descriptionModal.alertFooter = false;
this.descriptionModal.alertTitle = "Description"; this.descriptionModal.alertTitle = "Description";
@ -856,6 +899,21 @@ export class DataProviderComponent {
return formatted.number + formatted.size; return formatted.number + formatted.size;
} }
public cancelSummaryClicked() {
this.summaryFsModal.title = "Summary";
this.summaryFsModal.back = false;
this.lessBtnOrganizations = false;
this.viewAllMobile = "";
}
public openFsModal(fsModal: FullScreenModalComponent, title: string) {
fsModal.title = title;
fsModal.okButton = false;
fsModal.stayOpenInBack = true;
fsModal.open();
this.tabMobile = title;
}
public getMetricsTooltip(value: string) { public getMetricsTooltip(value: string) {
if (value == 'downloads') { if (value == 'downloads') {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Downloads provided by <strong>UsageCounts</strong></div>"; return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Downloads provided by <strong>UsageCounts</strong></div>";

4
landingPages/dataProvider/dataProvider.module.ts
View File

@ -34,6 +34,7 @@ import {IconsService} from "../../utils/icons/icons.service";
import {graph} from "../../utils/icons/icons"; import {graph} from "../../utils/icons/icons";
import {LoadingModalModule} from "../../utils/modal/loadingModal.module"; import {LoadingModalModule} from "../../utils/modal/loadingModal.module";
import {ResultLandingUtilsModule} from "../landing-utils/resultLandingUtils.module"; import {ResultLandingUtilsModule} from "../landing-utils/resultLandingUtils.module";
import {FullScreenModalModule} from '../../utils/modal/full-screen-modal/full-screen-modal.module';
@NgModule({ @NgModule({
imports: imports:
@ -42,7 +43,8 @@ import {ResultLandingUtilsModule} from "../landing-utils/resultLandingUtils.modu
DataProvidersServiceModule, ProjectsServiceModule, SearchResearchResultsServiceModule, DataProvidersServiceModule, ProjectsServiceModule, SearchResearchResultsServiceModule,
PagingModule, Schema2jsonldModule, SEOServiceModule, ShowPublisherModule, HelperModule, PagingModule, Schema2jsonldModule, SEOServiceModule, ShowPublisherModule, HelperModule,
LandingHeaderModule, AlertModalModule, NoLoadPaging, FeedbackModule, LandingHeaderModule, AlertModalModule, NoLoadPaging, FeedbackModule,
TabsModule, SearchTabModule, LoadingModule, IconsModule, LoadingModalModule, ResultLandingUtilsModule TabsModule, SearchTabModule, LoadingModule, IconsModule, LoadingModalModule, ResultLandingUtilsModule,
FullScreenModalModule
], ],
declarations: declarations:
[StatisticsTabComponent, [StatisticsTabComponent,

4
landingPages/dataProvider/dataProvider.service.ts
View File

@ -360,9 +360,9 @@ export class DataProviderService {
this.dataProviderInfo.journal['lissn'] = data[6]['lissn']; this.dataProviderInfo.journal['lissn'] = data[6]['lissn'];
this.dataProviderInfo.journal['eissn'] = data[6]['eissn']; this.dataProviderInfo.journal['eissn'] = data[6]['eissn'];
}else{ }else {
this.dataProviderInfo.journal = null; this.dataProviderInfo.journal = null;
this.dataProviderInfo.journal = {"journal": "", "issn": "", "lissn": "", "eissn": ""}; // this.dataProviderInfo.journal = {"journal": "", "issn": "", "lissn": "", "eissn": ""};
} }
return this.dataProviderInfo; return this.dataProviderInfo;

3
landingPages/landing-utils/landing-header/landing-header.component.ts
View File

@ -25,12 +25,13 @@ import {AlertModal} from "../../../utils/modal/alert";
</div> </div>
<div *ngIf="authors"> <div *ngIf="authors">
<showAuthors [authorsLimit]="authorLimit" [modal]="modal" [showAll]="showAllAuthors" [authors]="authors" <showAuthors [authorsLimit]="authorLimit" [modal]="modal" [showAll]="showAllAuthors" [authors]="authors"
[isSticky]="isSticky"></showAuthors> [isSticky]="isSticky" [isMobile]="isMobile"></showAuthors>
</div> </div>
</div> </div>
` `
}) })
export class LandingHeaderComponent { export class LandingHeaderComponent {
@Input() isMobile: boolean = false;
@Input() entityType: string; @Input() entityType: string;
@Input() properties: EnvProperties; @Input() properties: EnvProperties;
@Input() types: string[]; @Input() types: string[];

2
landingPages/landing-utils/parsingFunctions.class.ts
View File

@ -786,7 +786,7 @@ export class ParsingFunctions {
countries.push(_countries.classname); countries.push(_countries.classname);
} }
} else { } else {
for (let i = 0; i < countries.length; i++) { for (let i = 0; i < _countries.length; i++) {
if (_countries[i].classname != "Undetermined" && _countries[i].classname) { if (_countries[i].classname != "Undetermined" && _countries[i].classname) {
countries.push(_countries[i].classname); countries.push(_countries[i].classname);
} }

15
landingPages/landing-utils/showIdentifiers.component.ts
View File

@ -47,14 +47,21 @@ import {properties} from "../../../../environments/environment";
<a (click)="openIdentifiersModal()" class="view-more-less-link">View all</a> <a (click)="openIdentifiersModal()" class="view-more-less-link">View all</a>
</div> </div>
<modal-alert #identifiersModal> <modal-alert *ngIf="!isMobile" #identifiersModal>
<div class="uk-text-small"> <div class="uk-text-small">
<ng-container *ngTemplateOutlet="identifiers_template; context: { modal: true}"></ng-container> <ng-container *ngTemplateOutlet="identifiers_template; context: { modal: true}"></ng-container>
</div> </div>
</modal-alert> </modal-alert>
<fs-modal *ngIf="isMobile" #identifiersModal>
<div class="uk-text-small">
<ng-container *ngTemplateOutlet="identifiers_template; context: { modal: true}"></ng-container>
</div>
</fs-modal>
` `
}) })
export class ShowIdentifiersComponent implements AfterViewInit { export class ShowIdentifiersComponent implements AfterViewInit {
@Input() isMobile: boolean = false;
@Input() identifiers: Map<string, string[]>; @Input() identifiers: Map<string, string[]>;
@Input() showViewAll: boolean = false; @Input() showViewAll: boolean = false;
large: Map<string, boolean> = new Map<string, boolean>(); large: Map<string, boolean> = new Map<string, boolean>();
@ -121,9 +128,15 @@ export class ShowIdentifiersComponent implements AfterViewInit {
} }
public openIdentifiersModal() { public openIdentifiersModal() {
if(this.isMobile) {
this.identifiersModal.okButton = false;
this.identifiersModal.title = "Persistent Identifiers";
this.identifiersModal.open();
} else {
this.identifiersModal.cancelButton = false; this.identifiersModal.cancelButton = false;
this.identifiersModal.okButton = false; this.identifiersModal.okButton = false;
this.identifiersModal.alertTitle = "Persistent Identifiers"; this.identifiersModal.alertTitle = "Persistent Identifiers";
this.identifiersModal.open(); this.identifiersModal.open();
} }
}
} }

543
landingPages/project/project.component.html
View File

@ -1,5 +1,6 @@
<div class="landing uk-section uk-padding-remove tm-middle"> <!-- Desktop view -->
<div class="tm-main"> <div class=" uk-visible@m landing uk-section uk-padding-remove tm-middle">
<div *ngIf="!isMobile" class="tm-main">
<div class="project"> <div class="project">
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid> <div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
@ -138,8 +139,10 @@
<span class="uk-margin-xsmall-left">Deposit</span> <span class="uk-margin-xsmall-left">Deposit</span>
</a> </a>
<a (click)="openEmbedResultsModal()" <a (click)="openEmbedResultsModal()"
[title]="'Embed the related '+openaireEntities.RESULTS+' of this '+openaireEntities.PROJECT+' in your website'"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"> class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="code_off" visuallyHidden="code"></icon> <icon flex="true" ratio="0.8" name="code" visuallyHidden="code"></icon>
<span class="uk-margin-xsmall-left">Embed</span> <span class="uk-margin-xsmall-left">Embed</span>
</a> </a>
<a (click)="openDownloadReportModal()" <a (click)="openDownloadReportModal()"
@ -196,7 +199,7 @@
[attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'"> [attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'">
<a class="uk-link-text uk-text-bold uk-text-uppercase" (click)="openEmbedResultsModal()"> <a class="uk-link-text uk-text-bold uk-text-uppercase" (click)="openEmbedResultsModal()">
<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal"> <span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
<icon name="code_off" visuallyHidden="code"></icon> <icon name="code" visuallyHidden="code"></icon>
</span> </span>
</a> </a>
</div> </div>
@ -393,7 +396,7 @@
<my-tab *ngIf="fetchOrps.searchUtils.totalResults > 0" <my-tab *ngIf="fetchOrps.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.OTHER" [tabNumber]="fetchOrps.searchUtils.totalResults" [tabTitle]="openaireEntities.OTHER" [tabNumber]="fetchOrps.searchUtils.totalResults"
[tabId]="'other'"></my-tab> [tabId]="'other'"></my-tab>
<my-tab [tabTitle]="'Dmps'" [tabNumber]="fetchDmps.searchUtils.totalResults > 0 ? fetchDmps.searchUtils.totalResults : ''" [tabId]="'dmps'"></my-tab> <my-tab [tabTitle]="'DMPs'" [tabNumber]="fetchDmps.searchUtils.totalResults > 0 ? fetchDmps.searchUtils.totalResults : ''" [tabId]="'dmps'"></my-tab>
<my-tab *ngIf="projectInfo && hasMetrics" <my-tab *ngIf="projectInfo && hasMetrics"
[tabTitle]="'Metrics'" [tabId]="'metrics'"> [tabTitle]="'Metrics'" [tabId]="'metrics'">
</my-tab> </my-tab>
@ -405,41 +408,330 @@
</div> </div>
<div id="landing-sections" class="uk-text-small"> <div id="landing-sections" class="uk-text-small">
<ng-container>
<ng-container *ngTemplateOutlet="summary_content"></ng-container>
</ng-container>
<ng-container *ngIf="fetchPublications.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="publications_content"></ng-container>
</ng-container>
<ng-container *ngIf="fetchDatasets.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="datasets_content"></ng-container>
</ng-container>
<ng-container *ngIf="fetchSoftware.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="software_content"></ng-container>
</ng-container>
<ng-container *ngIf="fetchOrps.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="other_content"></ng-container>
</ng-container>
<ng-container>
<ng-container *ngTemplateOutlet="dmps_content"></ng-container>
</ng-container>
<ng-container *ngIf="projectInfo && hasMetrics">
<ng-container *ngTemplateOutlet="metricsContent"></ng-container>
</ng-container>
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
<ng-container *ngTemplateOutlet="statistics_content"></ng-container>
</ng-container>
</div>
<div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>
</ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile view -->
<div *ngIf="isMobile" class="uk-hidden@m uk-position-relative landing">
<ng-container *ngIf="projectInfo">
<div *ngIf="mobileContent == 'info'" class="uk-container uk-section">
<landing-header [properties]="properties" [title]="projectName"
[subTitle]="projectInfo.acronym ? projectInfo.title : ''"
[entityType]="'project'"
[startDate]="projectInfo.startDate" [endDate]="projectInfo.endDate"
[currentDate]="projectInfo.currentDate" [status]="projectInfo.status"
[openAccessMandatePublications]="projectInfo.openAccessMandatePublications"
[openAccessMandateDatasets]="projectInfo.openAccessMandateDatasets">
</landing-header>
<div class="uk-section uk-margin-top uk-text-large uk-text-empashis uk-text-bold">
<hr>
<ng-container>
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(summaryFsModal, 'Summary'); onSelectActiveTab('summary')">
<span>Summary</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="fetchPublications.searchUtils.totalResults > 0">
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(publicationsFsModal, openaireEntities.PUBLICATIONS); onSelectActiveTab('publications')">
<span>{{openaireEntities.PUBLICATIONS}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="fetchDatasets.searchUtils.totalResults > 0">
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(datasetsFsModal, openaireEntities.DATASETS); onSelectActiveTab('datasets')">
<span>{{openaireEntities.DATASETS}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="fetchSoftware.searchUtils.totalResults > 0">
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(softwareFsModal, openaireEntities.SOFTWARE); onSelectActiveTab('software')">
<span>{{openaireEntities.SOFTWARE}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="fetchOrps.searchUtils.totalResults > 0">
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(otherFsModal, openaireEntities.OTHER); onSelectActiveTab('other')">
<span>{{openaireEntities.OTHER}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container>
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(dmpsFsModal, 'DMPs'); onSelectActiveTab('dmps')">
<span>DMPs</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(statisticsFsModal, 'Statistics'); onSelectActiveTab('statistics')">
<span>Statistics</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
</div>
</div>
<div *ngIf="mobileContent == 'metrics'" class="uk-container uk-section">
<ng-container *ngTemplateOutlet="metricsContent"></ng-container>
</div>
<div *ngIf="mobileContent == 'actions'" class="uk-container uk-section">
<ng-container>
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
(click)="openFsModal(addThisFsModal, 'Share this '+openaireEntities.PROJECT+' in your social networks')">
<icon [flex]="true" name="share" visuallyHidden="share"></icon>
<span class="uk-margin-small-left">Share</span>
</div>
<hr class="uk-margin-remove">
</ng-container>
<ng-container *ngIf="isRouteAvailable('participate/deposit/learn-how')">
<a class="uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
routerLinkActive="router-link-active" routerLink="/participate/deposit/learn-how">
<icon [flex]="true" name="upload" visuallyHidden="upload"></icon>
<span class="uk-margin-small-left">
Deposit
</span>
</a>
<hr class="uk-margin-remove">
</ng-container>
<ng-container>
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
(click)="openFsModal(embedResultsFsModal, 'Embed results')">
<icon [flex]="true" name="code" visuallyHidden="code"></icon>
<span class="uk-margin-small-left">Embed</span>
</div>
<hr class="uk-margin-remove">
</ng-container>
<ng-container>
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
(click)="openFsModal(downloadReportFsModal, 'Download report')">
<icon [flex]="true" name="download" visuallyHidden="download"></icon>
<span class="uk-margin-small-left">Download</span>
</div>
<hr class="uk-margin-remove">
</ng-container>
<ng-container *ngIf="isRouteAvailable('participate/direct-claim')">
<a class="uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[projectId, 'project','result'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
<icon [flex]="true" name="link_to" visuallyHidden="link"></icon>
<span class="uk-margin-small-left">
Link to
</span>
</a>
<hr class="uk-margin-remove">
</ng-container>
</div>
<div class="landing-action-bar-mobile uk-background-default">
<div class="uk-container uk-flex-middle uk-grid uk-text-xsmall uk-text-meta" [ngClass]="hasMetrics ? 'uk-child-width-1-3' : 'uk-child-width-1-2'">
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'">
<icon name="assignment_turned_in" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''"></icon>
<span>{{openaireEntities.PROJECT}}</span>
</a>
</div>
<div *ngIf="projectInfo && hasMetrics">
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'metrics'">
<icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon>
<span>Metrics</span>
</a>
</div>
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'actions'">
<icon name="pending" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
<span>Actions</span>
</a>
</div>
</div>
</div>
<fs-modal #summaryFsModal classTitle="uk-tile-default uk-border-bottom" (cancelEmitter)="cancelSummaryClicked()">
<ng-container *ngTemplateOutlet="summary_content"></ng-container>
</fs-modal>
<fs-modal #publicationsFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="fetchPublications.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="publications_content"></ng-container>
</fs-modal>
<fs-modal #datasetsFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="fetchDatasets.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="datasets_content"></ng-container>
</fs-modal>
<fs-modal #softwareFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="fetchSoftware.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="software_content"></ng-container>
</fs-modal>
<fs-modal #otherFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="fetchOrps.searchUtils.totalResults > 0">
<ng-container *ngTemplateOutlet="other_content"></ng-container>
</fs-modal>
<fs-modal #dmpsFsModal classTitle="uk-tile-default uk-border-bottom">
<ng-container *ngTemplateOutlet="dmps_content"></ng-container>
</fs-modal>
<fs-modal #statisticsFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
<ng-container *ngTemplateOutlet="statistics_content"></ng-container>
</fs-modal>
</ng-container>
</div>
<feedback *ngIf="projectInfo && properties.reCaptchaSiteKey" [projectInfo]="projectInfo"
[properties]="properties" [entityType]="'project'" [title]="projectName" [fields]="feedbackFields"
[(showForm)]="showFeedback"></feedback>
<modal-loading></modal-loading>
<modal-alert #AlertModalCsvError></modal-alert>
<modal-alert *ngIf="projectInfo" #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
<addThis></addThis>
</modal-alert>
<modal-alert *ngIf="projectInfo" #embedResultsModal large="true">
<ng-container *ngTemplateOutlet="embed_content"></ng-container>
</modal-alert>
<modal-alert *ngIf="projectInfo" #downloadReportModal>
<ng-container *ngTemplateOutlet="download_content"></ng-container>
</modal-alert>
<ng-template #download_research_results_box
let-type="type" let-fileName_type="fileName_type" let-csvParams="csvParams">
<ul class="uk-list uk-margin-remove-bottom">
<li>
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
(click)="downloadHtmlFile(type, 'funder-'+fileName_type+'-report')">
<icon name="download" flex="true" class="uk-margin-small-right"></icon>
Download {{projectInfo.funding.funderShortName}} report (HTML)
</div>
</li>
<li class="uk-margin-small-top">
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
(click)="downloadCsvFile(downloadURLAPI+csvParams, 'funder-'+fileName_type+'-report')">
<icon name="download" flex="true" class="uk-margin-small-right"></icon>
Download {{projectInfo.funding.funderShortName}} report (CSV)
</div>
</li>
</ul>
</ng-template>
<modal-alert *ngIf="projectInfo && projectInfo.organizations" #organizationsModal>
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: projectInfo.organizations.length}"></ng-container>
</modal-alert>
<modal-alert *ngIf="projectInfo?.description" #descriptionModal
[large]="true">
<div [innerHTML]="projectInfo.description"></div>
</modal-alert>
<ng-template #organizations_template let-threshold="threshold">
<span *ngFor="let organization of projectInfo.organizations.slice(0, threshold); let i=index" class="uk-text-small"
[attr.uk-tooltip]="organization.acronym && organization.name ? 'pos:right; delay:10' : 'cls: uk-invisible'"
[title]="organization.name">
<a *ngIf="organization.id" class="uk-link-text"
[queryParams]="{organizationId: organization.id}" routerLinkActive="router-link-active"
[routerLink]="properties.searchLinkToOrganization.split('?')[0]">
{{(organization.acronym) ? organization.acronym : ''}}
{{(!organization.acronym && organization.name) ? organization.name : ''}}
</a>
<span *ngIf="!organization.id">
<span *ngIf="organization.acronym">{{organization.acronym}}</span>
<span *ngIf="!organization.acronym && organization.name">{{organization.name}}</span>
</span>
<span *ngIf="(i < projectInfo.organizations.length-1)">, </span>
</span>
<span *ngIf="projectInfo.organizations.length > threshold"> ... </span>
</ng-template>
<ng-template #summary_content>
<div id="summary" class="landing-section landing-section-height-auto"> <div id="summary" class="landing-section landing-section-height-auto">
<div class="uk-card uk-card-default card-tab uk-margin-medium-top uk-margin-medium-bottom"> <div class="uk-margin-medium-top uk-margin-medium-bottom" [ngClass]="isMobile ? '' : 'uk-card uk-card-default card-tab'">
<div class="uk-card-body"> <div [ngClass]="isMobile ? '' : 'uk-card-body'">
<div class="uk-grid uk-grid-divider" uk-grid> <div class="uk-grid uk-grid-divider" uk-grid>
<div *ngIf="!hasPrimaryInfo && !hasSecondaryInfo" class="uk-width-expand uk-height-small uk-flex uk-flex-center uk-flex-middle"> <div *ngIf="!hasPrimaryInfo && !hasSecondaryInfo" class="uk-width-expand uk-height-small uk-flex uk-flex-center uk-flex-middle">
<div class="uk-animation-fade uk-text-meta uk-text-large"> <div class="uk-animation-fade uk-text-meta uk-text-large">
No summary information available No summary information available
</div> </div>
</div> </div>
<div *ngIf="hasPrimaryInfo" class="uk-width-expand"> <div *ngIf="hasPrimaryInfo && viewAllMobile != 'organizations'" class="uk-width-expand">
<!-- Description --> <!-- Description -->
<div *ngIf="projectInfo.description" class="uk-margin-medium-bottom"> <div *ngIf="projectInfo.description && (!viewAllMobile || viewAllMobile == 'description')" class="uk-margin-medium-bottom">
<div class="uk-text-justify "> <div class="uk-text-justify">
<div class="uk-text-meta uk-margin-small-bottom">Description</div> <div *ngIf="viewAllMobile != 'description'" class="uk-text-meta uk-margin-small-bottom">Description</div>
<div class="multi-line-ellipsis lines-10"> <div [ngClass]="viewAllMobile == 'description' ? '' : 'multi-line-ellipsis lines-10'">
<div #descriptionDiv class="uk-margin-small-bottom" <div #descriptionDiv class="uk-margin-small-bottom"
[innerHtml]="projectInfo.description"></div> [innerHtml]="projectInfo.description"></div>
</div> </div>
<div *ngIf="showViewMoreButton" class="uk-flex uk-flex-right"> <div *ngIf="showViewMoreButton && viewAllMobile != 'description'" class="uk-flex uk-flex-right">
<a (click)="openDescriptionModal();" class="view-more-less-link"> <a (click)="viewAllDescriptionClicked();" class="view-more-less-link">
View more View more
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="hasSecondaryInfo" [class.uk-width-1-3@m]="hasPrimaryInfo" class="uk-width-1-1"> <div *ngIf="hasSecondaryInfo && viewAllMobile != 'description'" [class.uk-width-1-3@m]="hasPrimaryInfo" class="uk-width-1-1">
<div class="uk-height-1-1"> <div class="uk-height-1-1">
<!-- Organizations --> <!-- Organizations -->
<div class="uk-text-meta uk-margin-small-bottom">Partners</div> <div *ngIf="viewAllMobile != 'organizations'" class="uk-text-meta uk-margin-small-bottom">Partners</div>
<div class="uk-margin-medium-bottom"> <div class="uk-margin-medium-bottom">
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: lessBtnOrganizations ? projectInfo.organizations.length : thresholdOrganizations }"></ng-container> <ng-container *ngTemplateOutlet="organizations_template; context: { threshold: lessBtnOrganizations ? projectInfo.organizations.length : thresholdOrganizations }"></ng-container>
<div *ngIf="projectInfo.organizations.length > thresholdOrganizations && !lessBtnOrganizations" <div *ngIf="projectInfo.organizations.length > thresholdOrganizations && !lessBtnOrganizations"
class="uk-text-center"> class="uk-text-center">
<a (click)="viewAllOrganizationsClick();" class="view-more-less-link"> <a (click)="viewAllOrganizationsClick();" class="view-more-less-link uk-visible@m">
View all
</a>
<a (click)="viewAllOrganizationsMobileClicked()" class="view-more-less-link uk-hidden@m">
View all View all
</a> </a>
</div> </div>
@ -453,8 +745,9 @@
</div> </div>
</div> </div>
</div> </div>
</ng-template>
<ng-container *ngIf="fetchPublications.searchUtils.totalResults > 0"> <ng-template #publications_content>
<div id="publications" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="publications" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchPublications" resultType="publication" <search-tab [fetch]="fetchPublications" resultType="publication"
[params]="getParamsForSearchLink('publications')" [params]="getParamsForSearchLink('publications')"
@ -462,9 +755,9 @@
[properties]="properties"> [properties]="properties">
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-template>
<ng-container *ngIf="fetchDatasets.searchUtils.totalResults > 0"> <ng-template #datasets_content>
<div id="datasets" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="datasets" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchDatasets" resultType="dataset" <search-tab [fetch]="fetchDatasets" resultType="dataset"
[params]="getParamsForSearchLink('datasets')" [params]="getParamsForSearchLink('datasets')"
@ -472,8 +765,9 @@
[properties]="properties"> [properties]="properties">
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-template>
<ng-container *ngIf="fetchSoftware.searchUtils.totalResults > 0">
<ng-template #software_content>
<div id="software" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="software" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchSoftware" resultType="software" <search-tab [fetch]="fetchSoftware" resultType="software"
[params]="getParamsForSearchLink('software')" [params]="getParamsForSearchLink('software')"
@ -481,8 +775,9 @@
[properties]="properties"> [properties]="properties">
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-template>
<ng-container *ngIf="fetchOrps.searchUtils.totalResults > 0">
<ng-template #other_content>
<div id="other" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="other" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchOrps" resultType="other" <search-tab [fetch]="fetchOrps" resultType="other"
[params]="getParamsForSearchLink('other')" [params]="getParamsForSearchLink('other')"
@ -490,8 +785,9 @@
[properties]="properties"> [properties]="properties">
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-template>
<ng-container>
<ng-template #dmps_content>
<div id="dmps" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="dmps" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchDmps" customTitle="Data Management Plans" <search-tab [fetch]="fetchDmps" customTitle="Data Management Plans"
[properties]="properties" resultType="DMPs"> [properties]="properties" resultType="DMPs">
@ -510,8 +806,51 @@
</div> </div>
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-template>
<ng-container *ngIf="projectInfo && hasMetrics">
<ng-template #statistics_content>
<div id="statistics" class="landing-section uk-padding uk-padding-remove-horizontal">
<div class="uk-text-meta uk-text-large uk-text-uppercase uk-margin-medium-bottom">Statistics</div>
<errorMessages [status]="[fetchPublications.searchUtils.status, fetchDatasets.searchUtils.status,
fetchSoftware.searchUtils.status, fetchOrps.searchUtils.status]"
[type]="'statistics'" tab_error_class=true></errorMessages>
<div
*ngIf="statsClicked &&
(fetchPublications.searchUtils.status == errorCodes.DONE || fetchDatasets.searchUtils.status == errorCodes.DONE
|| fetchSoftware.searchUtils.status == errorCodes.DONE || fetchOrps.searchUtils.status == errorCodes.DONE)"
class="uk-grid uk-child-width-1-1 uk-child-width-1-2@m">
<div class="uk-padding uk-padding-remove-top">
<div class="uk-card uk-card-default uk-card-body">
<div *ngIf="!properties.useNewStatistisTool" class="uk-text-center uk-text-large">Produced
{{openaireEntities.RESULTS}} per year
</div>
<i-frame [url]=chartScientificResultsUrl
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"></i-frame>
</div>
</div>
<div class="uk-padding uk-padding-remove-top">
<div class="uk-card uk-card-default uk-card-body">
<div *ngIf="!properties.useNewStatistisTool" class="uk-text-center uk-text-large">Access mode of
{{openaireEntities.RESULTS}}
</div>
<i-frame [url]=chartAccessModeUrl
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"></i-frame>
</div>
</div>
<div class="uk-padding uk-padding-remove-top">
<div class="uk-card uk-card-default uk-card-body">
<div *ngIf="!properties.useNewStatistisTool" class="uk-text-center uk-text-large">
{{openaireEntities.RESULTS}} per datasource
</div>
<i-frame [url]=chartDatasourcesUrl
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"></i-frame>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template #metricsContent>
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal">
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher> <ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
<li class="uk-padding-remove"> <li class="uk-padding-remove">
@ -569,10 +908,10 @@
</div> </div>
</li> </li>
<!-- usage --> <!-- usage -->
<li> <li *ngIf="totalDownloads || totalViews">
<div class="uk-flex uk-flex-center uk-flex-middle"> <div class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="isMobile">
<div class="uk-margin-large-right"> <div class="uk-margin-large-right uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="!isMobile">
<div *ngIf="totalDownloads" class="uk-text-center uk-margin-medium-bottom"> <div *ngIf="totalDownloads" class="uk-text-center uk-margin-medium-bottom" [class.uk-margin-medium-right]="isMobile">
<div class="uk-text-background uk-text-bold number metrics-number" [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" <div class="uk-text-background uk-text-bold number metrics-number" [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{totalDownloads | number}}">{{formatNumber(totalDownloads)}}</div> title="{{totalDownloads | number}}">{{formatNumber(totalDownloads)}}</div>
<div class="uk-text-bold">Downloads</div> <div class="uk-text-bold">Downloads</div>
@ -602,79 +941,23 @@
</li> </li>
</ul> </ul>
</div> </div>
</ng-container> </ng-template>
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
<div id="statistics" class="landing-section uk-padding uk-padding-remove-horizontal">
<div class="uk-text-meta uk-text-large uk-text-uppercase uk-margin-medium-bottom">Statistics</div>
<errorMessages [status]="[fetchPublications.searchUtils.status, fetchDatasets.searchUtils.status,
fetchSoftware.searchUtils.status, fetchOrps.searchUtils.status]"
[type]="'statistics'" tab_error_class=true></errorMessages>
<div
*ngIf="statsClicked &&
(fetchPublications.searchUtils.status == errorCodes.DONE || fetchDatasets.searchUtils.status == errorCodes.DONE
|| fetchSoftware.searchUtils.status == errorCodes.DONE || fetchOrps.searchUtils.status == errorCodes.DONE)"
class="uk-grid uk-child-width-1-1 uk-child-width-1-2@m">
<div class="uk-padding uk-padding-remove-top">
<div class="uk-card uk-card-default uk-card-body">
<div *ngIf="!properties.useNewStatistisTool" class="uk-text-center uk-text-large">Produced
{{openaireEntities.RESULTS}} per year
</div>
<i-frame [url]=chartScientificResultsUrl
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"></i-frame>
</div>
</div>
<div class="uk-padding uk-padding-remove-top">
<div class="uk-card uk-card-default uk-card-body">
<div *ngIf="!properties.useNewStatistisTool" class="uk-text-center uk-text-large">Access mode of
{{openaireEntities.RESULTS}}
</div>
<i-frame [url]=chartAccessModeUrl
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"></i-frame>
</div>
</div>
<div class="uk-padding uk-padding-remove-top">
<div class="uk-card uk-card-default uk-card-body">
<div *ngIf="!properties.useNewStatistisTool" class="uk-text-center uk-text-large">
{{openaireEntities.RESULTS}} per datasource
</div>
<i-frame [url]=chartDatasourcesUrl
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"></i-frame>
</div>
</div>
</div>
</div>
</ng-container>
</div>
<div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div> <fs-modal *ngIf="projectInfo" #addThisFsModal classTitle="uk-tile-default uk-border-bottom" classBody="uk-flex uk-flex-center uk-flex-middle">
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>
</ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<feedback *ngIf="projectInfo && properties.reCaptchaSiteKey" [projectInfo]="projectInfo"
[properties]="properties" [entityType]="'project'" [title]="projectName" [fields]="feedbackFields"
[(showForm)]="showFeedback"></feedback>
<modal-loading></modal-loading>
<modal-alert #AlertModalCsvError></modal-alert>
<modal-alert *ngIf="projectInfo" #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
<addThis></addThis> <addThis></addThis>
</modal-alert> </fs-modal>
<modal-alert *ngIf="projectInfo" #embedResultsModal large="true"> <fs-modal *ngIf="projectInfo" #embedResultsFsModal classTitle="uk-tile-default uk-border-bottom" classBody="uk-flex uk-flex-center uk-flex-middle">
<div class="uk-padding-small uk-margin-small-left uk-margin-small-right"> <ng-container *ngTemplateOutlet="embed_content"></ng-container>
<div class="uk-padding-small uk-padding-remove-vertical"> </fs-modal>
<fs-modal *ngIf="projectInfo" #downloadReportFsModal classTitle="uk-tile-default uk-border-bottom" classBody="uk-flex uk-flex-center uk-flex-middle">
<ng-container *ngTemplateOutlet="download_content"></ng-container>
</fs-modal>
<ng-template #embed_content>
<div [ngClass]="isMobile ? 'uk-width-1-1' : 'uk-padding-small uk-margin-small-left uk-margin-small-right'">
<div [ngClass]="isMobile ? '' : 'uk-padding-small uk-padding-remove-vertical'">
<div input type="select" placeholder="Select content type to embed" inputClass="flat x-small" <div input type="select" placeholder="Select content type to embed" inputClass="flat x-small"
[options]="resultTypesForEmbedding" [(value)]="embed_research_results_type"></div> [options]="resultTypesForEmbedding" [(value)]="embed_research_results_type"></div>
<div *ngIf="embed_research_results_type" class="clipboard-wrapper box-content uk-grid uk-margin-auto uk-margin-small-top "> <div *ngIf="embed_research_results_type" class="clipboard-wrapper box-content uk-grid uk-margin-auto uk-margin-small-top ">
@ -693,11 +976,11 @@
</div> </div>
</div> </div>
</div> </div>
</modal-alert> </ng-template>
<modal-alert *ngIf="projectInfo" #downloadReportModal> <ng-template #download_content>
<div class="uk-padding-small uk-margin-small-left uk-margin-small-right"> <div [ngClass]="isMobile ? 'uk-width-1-1' : 'uk-padding-small uk-margin-small-left uk-margin-small-right'">
<div class="uk-padding-small uk-padding-remove-vertical"> <div [ngClass]="isMobile ? '' : 'uk-padding-small uk-padding-remove-vertical'">
<div input type="select" placeholder="Select content type report to download" inputClass="flat x-small" <div input type="select" placeholder="Select content type report to download" inputClass="flat x-small"
[options]="resultTypesForDownloading" [(value)]="download_research_results_type" (click)="buildResultTypesForDownloading()"></div> [options]="resultTypesForDownloading" [(value)]="download_research_results_type" (click)="buildResultTypesForDownloading()"></div>
<div *ngIf="download_research_results_type" class="uk-animation-slide-top-small uk-margin-medium-top"> <div *ngIf="download_research_results_type" class="uk-animation-slide-top-small uk-margin-medium-top">
@ -718,52 +1001,4 @@
</div> </div>
</div> </div>
</div> </div>
</modal-alert>
<ng-template #download_research_results_box
let-type="type" let-fileName_type="fileName_type" let-csvParams="csvParams">
<ul class="uk-list uk-margin-remove-bottom">
<li>
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
(click)="downloadHtmlFile(type, 'funder-'+fileName_type+'-report')">
<icon name="download" flex="true" class="uk-margin-small-right"></icon>
Download {{projectInfo.funding.funderShortName}} report (HTML)
</div>
</li>
<li class="uk-margin-small-top">
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
(click)="downloadCsvFile(downloadURLAPI+csvParams, 'funder-'+fileName_type+'-report')">
<icon name="download" flex="true" class="uk-margin-small-right"></icon>
Download {{projectInfo.funding.funderShortName}} report (CSV)
</div>
</li>
</ul>
</ng-template>
<modal-alert *ngIf="projectInfo && projectInfo.organizations" #organizationsModal>
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: projectInfo.organizations.length}"></ng-container>
</modal-alert>
<modal-alert *ngIf="projectInfo?.description" #descriptionModal
[large]="true">
<div [innerHTML]="projectInfo.description"></div>
</modal-alert>
<ng-template #organizations_template let-threshold="threshold">
<span *ngFor="let organization of projectInfo.organizations.slice(0, threshold); let i=index" class="uk-text-small"
[attr.uk-tooltip]="organization.acronym && organization.name ? 'pos:right; delay:10' : 'cls: uk-invisible'"
[title]="organization.name">
<a *ngIf="organization.id" class="uk-link-text"
[queryParams]="{organizationId: organization.id}" routerLinkActive="router-link-active"
[routerLink]="properties.searchLinkToOrganization.split('?')[0]">
{{(organization.acronym) ? organization.acronym : ''}}
{{(!organization.acronym && organization.name) ? organization.name : ''}}
</a>
<span *ngIf="!organization.id">
<span *ngIf="organization.acronym">{{organization.acronym}}</span>
<span *ngIf="!organization.acronym && organization.name">{{organization.name}}</span>
</span>
<span *ngIf="(i < projectInfo.organizations.length-1)">, </span>
</span>
<span *ngIf="projectInfo.organizations.length > threshold"> ... </span>
</ng-template> </ng-template>

61
landingPages/project/project.component.ts
View File

@ -31,6 +31,8 @@ import {Option} from "../../sharedComponents/input/input.component";
import {OpenaireEntities} from "../../utils/properties/searchFields"; import {OpenaireEntities} from "../../utils/properties/searchFields";
import {MetricsService} from '../../services/metrics.service'; import {MetricsService} from '../../services/metrics.service';
import {NumberUtils} from '../../utils/number-utils.class'; import {NumberUtils} from '../../utils/number-utils.class';
import {LayoutService} from '../../dashboard/sharedComponents/sidebar/layout.service';
import {FullScreenModalComponent} from '../../utils/modal/full-screen-modal/full-screen-modal.component';
declare var ResizeObserver; declare var ResizeObserver;
@ -85,8 +87,11 @@ export class ProjectComponent {
// @ViewChild('statisticsModal') statisticsModal; // @ViewChild('statisticsModal') statisticsModal;
// @ViewChild('linkProjectModal') linkProjectModal; // @ViewChild('linkProjectModal') linkProjectModal;
@ViewChild('embedResultsModal') embedResultsModal; @ViewChild('embedResultsModal') embedResultsModal;
@ViewChild('embedResultsFsModal') embedResultsFsModal: FullScreenModalComponent;
@ViewChild('downloadReportModal') downloadReportModal; @ViewChild('downloadReportModal') downloadReportModal;
@ViewChild('addThisModal') addThisModal @ViewChild('downloadReportFsModal') downloadReportFsModal: FullScreenModalComponent;
@ViewChild('addThisModal') addThisModal;
@ViewChild('addThisFsModal') addThisFsModal: FullScreenModalComponent;
// Request results for publications, research data and software only the one time (first time tab is clicked) // Request results for publications, research data and software only the one time (first time tab is clicked)
private reloadPublications: boolean = true; private reloadPublications: boolean = true;
@ -166,6 +171,19 @@ export class ProjectComponent {
properties: EnvProperties; properties: EnvProperties;
public openaireEntities = OpenaireEntities; public openaireEntities = OpenaireEntities;
public isMobile: boolean = false;
public mobileContent: "info" | "metrics" | "actions" = "info";
public tabMobile: string = "";
public viewAllMobile: string = "";
// Full screen modals for small screens (mobile)
@ViewChild('summaryFsModal') summaryFsModal: FullScreenModalComponent;
@ViewChild('publicationsFsModal') publicationsFsModal: FullScreenModalComponent;
@ViewChild('datasetsFsModal') datasetsFsModal: FullScreenModalComponent;
@ViewChild('softwareFsModal') softwareFsModal: FullScreenModalComponent;
@ViewChild('otherFsModal') otherFsModal: FullScreenModalComponent;
@ViewChild('dmpsFsModal') dmpsFsModal: FullScreenModalComponent;
@ViewChild('statisticsFsModal') statisticsFsModal: FullScreenModalComponent;
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private _router: Router, private _router: Router,
private _location: Location, private _location: Location,
@ -180,10 +198,13 @@ export class ProjectComponent {
private htmlService: HtmlProjectReportService, private htmlService: HtmlProjectReportService,
private indexInfoService: IndexInfoService, private indexInfoService: IndexInfoService,
private metricsService: MetricsService, private metricsService: MetricsService,
private cdr: ChangeDetectorRef) {} private cdr: ChangeDetectorRef,
private layoutService: LayoutService) {}
ngOnInit() { ngOnInit() {
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
}));
this.properties = properties; this.properties = properties;
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
this.subscriptions.push(this.indexInfoService.getLastIndexDate(this.properties).subscribe(lastIndexUpdate => { this.subscriptions.push(this.indexInfoService.getLastIndexDate(this.properties).subscribe(lastIndexUpdate => {
@ -196,8 +217,6 @@ export class ProjectComponent {
this.getPageContents(); this.getPageContents();
this.updateUrl(this.properties.domain + this.properties.baseLink + this._router.url); this.updateUrl(this.properties.domain + this.properties.baseLink + this._router.url);
this.seoService.createLinkForCanonicalURL(this.properties.domain +this.properties.baseLink + this._router.url); this.seoService.createLinkForCanonicalURL(this.properties.domain +this.properties.baseLink + this._router.url);
this.subscriptions.push(this.route.queryParams.subscribe(params => { this.subscriptions.push(this.route.queryParams.subscribe(params => {
this.stickyHeader = false; this.stickyHeader = false;
this.metricsClicked = false; this.metricsClicked = false;
@ -585,6 +604,13 @@ export class ProjectComponent {
} }
} }
public viewAllOrganizationsMobileClicked() {
this.summaryFsModal.title += " - Partners";
this.summaryFsModal.back = true;
this.lessBtnOrganizations = true;
this.viewAllMobile = "organizations";
}
public openOrganizationsModal() { public openOrganizationsModal() {
this.organizationsModal.cancelButton = false; this.organizationsModal.cancelButton = false;
this.organizationsModal.okButton = false; this.organizationsModal.okButton = false;
@ -973,6 +999,16 @@ export class ProjectComponent {
]; ];
} }
public viewAllDescriptionClicked() {
if(this.isMobile) {
this.summaryFsModal.title += " - Description";
this.summaryFsModal.back = true;
this.viewAllMobile = "description";
} else {
this.openDescriptionModal();
}
}
public openDescriptionModal() { public openDescriptionModal() {
this.descriptionModal.alertFooter = false; this.descriptionModal.alertFooter = false;
this.descriptionModal.alertTitle = "Description"; this.descriptionModal.alertTitle = "Description";
@ -990,6 +1026,21 @@ export class ProjectComponent {
return formatted.number + formatted.size; return formatted.number + formatted.size;
} }
public cancelSummaryClicked() {
this.summaryFsModal.title = "Summary";
this.summaryFsModal.back = false;
this.lessBtnOrganizations = false;
this.viewAllMobile = "";
}
public openFsModal(fsModal: FullScreenModalComponent, title: string) {
fsModal.title = title;
fsModal.okButton = false;
fsModal.stayOpenInBack = true;
fsModal.open();
this.tabMobile = title;
}
public getMetricsTooltip(value: string) { public getMetricsTooltip(value: string) {
if (value == 'downloads') { if (value == 'downloads') {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Downloads provided by <strong>UsageCounts</strong></div>"; return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Downloads provided by <strong>UsageCounts</strong></div>";

4
landingPages/project/project.module.ts
View File

@ -32,6 +32,7 @@ import {IconsModule} from "../../utils/icons/icons.module";
import {InputModule} from "../../sharedComponents/input/input.module"; import {InputModule} from "../../sharedComponents/input/input.module";
import {IconsService} from "../../utils/icons/icons.service"; import {IconsService} from "../../utils/icons/icons.service";
import {graph, link, link_to, open_access} from "../../utils/icons/icons"; import {graph, link, link_to, open_access} from "../../utils/icons/icons";
import {FullScreenModalModule} from '../../utils/modal/full-screen-modal/full-screen-modal.module';
@NgModule({ @NgModule({
imports: [ imports: [
@ -41,7 +42,8 @@ import {graph, link, link_to, open_access} from "../../utils/icons/icons";
SearchResearchResultsServiceModule, ProjectServiceModule, SearchResearchResultsServiceModule, ProjectServiceModule,
Schema2jsonldModule, SEOServiceModule, HelperModule, Schema2jsonldModule, SEOServiceModule, HelperModule,
LandingHeaderModule, MatSelectModule, FeedbackModule, AltMetricsModule, LandingHeaderModule, MatSelectModule, FeedbackModule, AltMetricsModule,
TabsModule, SearchTabModule, LoadingModule, IconsModule, InputModule TabsModule, SearchTabModule, LoadingModule, IconsModule, InputModule,
FullScreenModalModule
], ],
declarations: [ declarations: [
ProjectComponent ProjectComponent

13
landingPages/result/resultLanding.component.html
View File

@ -472,12 +472,13 @@
[entityType]="getTypeName()" [types]="resultLandingInfo.types" [entityType]="getTypeName()" [types]="resultLandingInfo.types"
[date]="resultLandingInfo.dateofacceptance" [embargoEndDate]="resultLandingInfo.embargoEndDate" [date]="resultLandingInfo.dateofacceptance" [embargoEndDate]="resultLandingInfo.embargoEndDate"
[publisher]="resultLandingInfo.publisher" [journal]="resultLandingInfo.journal" [publisher]="resultLandingInfo.publisher" [journal]="resultLandingInfo.journal"
[languages]="resultLandingInfo.languages" [programmingLanguages]="resultLandingInfo.programmingLanguages"> [languages]="resultLandingInfo.languages" [programmingLanguages]="resultLandingInfo.programmingLanguages"
[isMobile]="true">
</landing-header> </landing-header>
<div class="uk-text-small"> <div class="uk-text-small">
<!-- Identifiers --> <!-- Identifiers -->
<div *ngIf="resultLandingInfo.identifiers && resultLandingInfo.identifiers.size > 0" class="uk-margin-small-top"> <div *ngIf="resultLandingInfo.identifiers && resultLandingInfo.identifiers.size > 0" class="uk-margin-small-top">
<showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers> <showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true" [isMobile]="true"></showIdentifiers>
</div> </div>
<!-- SDGs --> <!-- SDGs -->
<div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && !viewAllMobile" class="uk-margin-small-top"> <div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && !viewAllMobile" class="uk-margin-small-top">
@ -849,7 +850,7 @@
[otherSubjects]="resultLandingInfo.otherSubjects" [otherSubjects]="resultLandingInfo.otherSubjects"
[classifiedSubjects]="resultLandingInfo.classifiedSubjects" [classifiedSubjects]="resultLandingInfo.classifiedSubjects"
[eoscSubjects]="resultLandingInfo.eoscSubjects" [eoscSubjects]="resultLandingInfo.eoscSubjects"
[isMobile]="isMobile" [isMobile]="isMobile">
[viewAllSubjects]="viewAllMobile=='subjects'" [viewAllSubjects]="viewAllMobile=='subjects'"
[viewAllClassifiedSubjects]="viewAllMobile=='classifiedSubjects'" [viewAllClassifiedSubjects]="viewAllMobile=='classifiedSubjects'"
(viewAllClicked)="viewAllSubjectsMobileClicked($event)"> (viewAllClicked)="viewAllSubjectsMobileClicked($event)">
@ -1023,7 +1024,7 @@
Citations Citations
</td> </td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"> <td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.citations | number}} {{formatNumber(resultLandingInfo.measure.citations)}}
</td> </td>
</tr> </tr>
<tr> <tr>
@ -1130,7 +1131,7 @@
Citations Citations
</td> </td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"> <td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.citations}} {{formatNumber(resultLandingInfo.measure.citations)}}
</td> </td>
</tr> </tr>
<tr> <tr>
@ -1192,7 +1193,7 @@
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)"> <li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)">
<div class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="isMobile"> <div class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="isMobile">
<div class="uk-margin-large-right uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="!isMobile"> <div class="uk-margin-large-right uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="!isMobile">
<div *ngIf="resultLandingInfo.measure.downloads" class="uk-text-center uk-margin-medium-bottom"> <div *ngIf="resultLandingInfo.measure.downloads" class="uk-text-center uk-margin-medium-bottom" [class.uk-margin-medium-right]="isMobile">
<div class="uk-text-background uk-text-bold number metrics-number" <div class="uk-text-background uk-text-bold number metrics-number"
[attr.uk-tooltip]="resultLandingInfo.measure.downloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" [attr.uk-tooltip]="resultLandingInfo.measure.downloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{resultLandingInfo.measure.downloads | number}}">{{formatNumber(resultLandingInfo.measure.downloads)}}</div> title="{{resultLandingInfo.measure.downloads | number}}">{{formatNumber(resultLandingInfo.measure.downloads)}}</div>

17
utils/authors/showAuthors.component.ts
View File

@ -88,18 +88,27 @@ import {properties} from "../../../../environments/environment";
</div> </div>
</div> </div>
<modal-alert #authorsModal> <modal-alert *ngIf="!isMobile" #authorsModal>
<div class="uk-text-small uk-text-emphasis uk-grid uk-grid-column-collapse uk-grid-row-small" uk-grid> <div class="uk-text-small uk-text-emphasis uk-grid uk-grid-column-collapse uk-grid-row-small" uk-grid>
<ng-container *ngFor="let author of authors; let i=index"> <ng-container *ngFor="let author of authors; let i=index">
<ng-container *ngTemplateOutlet="author_template; context: { author: author, i:i}"></ng-container> <ng-container *ngTemplateOutlet="author_template; context: { author: author, i:i}"></ng-container>
</ng-container> </ng-container>
</div> </div>
</modal-alert> </modal-alert>
<fs-modal *ngIf="isMobile" #authorsModal>
<div class="uk-text-small uk-text-emphasis uk-grid uk-grid-column-collapse uk-grid-row-small" uk-grid>
<ng-container *ngFor="let author of authors; let i=index">
<ng-container *ngTemplateOutlet="author_template; context: { author: author, i:i}"></ng-container>
</ng-container>
</div>
</fs-modal>
` `
}) })
export class ShowAuthorsComponent { export class ShowAuthorsComponent {
@Input() isMobile: boolean = false;
@Input() authors: Author[]; @Input() authors: Author[];
@Input() isSticky: boolean = false; @Input() isSticky: boolean = false;
@Input() authorsLimit: number = 7; @Input() authorsLimit: number = 7;
@ -137,11 +146,17 @@ export class ShowAuthorsComponent {
} }
public openAuthorsModal() { public openAuthorsModal() {
if (this.isMobile) {
this.authorsModal.okButton = false;
this.authorsModal.title = "Authors";
this.authorsModal.open();
} else {
this.authorsModal.cancelButton = false; this.authorsModal.cancelButton = false;
this.authorsModal.okButton = false; this.authorsModal.okButton = false;
this.authorsModal.alertTitle = "Authors"; this.authorsModal.alertTitle = "Authors";
this.authorsModal.open(); this.authorsModal.open();
} }
}
copyToClipboard(element: HTMLInputElement) { copyToClipboard(element: HTMLInputElement) {
element.select(); element.select();

3
utils/authors/showAuthors.module.ts
View File

@ -5,10 +5,11 @@ import {RouterModule} from '@angular/router';
import {ShowAuthorsComponent} from './showAuthors.component'; import {ShowAuthorsComponent} from './showAuthors.component';
import {AlertModalModule} from "../modal/alertModal.module"; import {AlertModalModule} from "../modal/alertModal.module";
import {FullScreenModalModule} from "../modal/full-screen-modal/full-screen-modal.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, RouterModule, AlertModalModule CommonModule, FormsModule, RouterModule, AlertModalModule, FullScreenModalModule
], ],
declarations: [ declarations: [
ShowAuthorsComponent ShowAuthorsComponent

5
utils/entity-actions/entity-actions.component.ts
View File

@ -38,8 +38,10 @@ import {EnvProperties} from "../properties/env-properties";
<span class="uk-margin-xsmall-left">Deposit</span> <span class="uk-margin-xsmall-left">Deposit</span>
</a> </a>
<a *ngIf="embed" (click)="openEmbedResultsModal()" <a *ngIf="embed" (click)="openEmbedResultsModal()"
[title]="'Embed the related '+openaireEntities.RESULTS+' of this '+getTypeName()+' in your website'"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"> class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="code_off" visuallyHidden="code"></icon> <icon flex="true" ratio="0.8" name="code" visuallyHidden="code"></icon>
<span class="uk-margin-xsmall-left">Embed</span> <span class="uk-margin-xsmall-left">Embed</span>
</a> </a>
<ng-content></ng-content> <ng-content></ng-content>
@ -92,6 +94,7 @@ export class EntityActionsComponent implements OnInit {
@ViewChild('downloadReportModal') downloadReportModal; @ViewChild('downloadReportModal') downloadReportModal;
@ViewChild('addThisModal') addThisModal; @ViewChild('addThisModal') addThisModal;
properties: EnvProperties = properties; properties: EnvProperties = properties;
openaireEntities = OpenaireEntities;
/* Embed */ /* Embed */