fix for displaying countries in results landings, fix for journal init in dataProviders landing, redesign mobile view for dataProviders landing

This commit is contained in:
Alex Martzios 2023-03-01 16:49:42 +02:00
parent 2edeb788e3
commit 8096c20e2d
6 changed files with 601 additions and 317 deletions

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,326 +268,37 @@
</div> </div>
<div id="landing-sections" class="uk-text-small"> <div id="landing-sections" class="uk-text-small">
<div id="summary" class="landing-section landing-section-height-auto"> <ng-container>
<div class="uk-card uk-card-default card-tab uk-grid uk-margin-remove-left uk-margin-medium-top uk-margin-medium-bottom"> <ng-container *ngTemplateOutlet="summary_content"></ng-container>
<div *ngIf="!(hasPrimaryInfo || (!aggregationStatusIsInitialized || hasAggregationStatusInfo)) && !hasSecondaryInfo" </ng-container>
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">
No summary information available
</div>
</div>
<div *ngIf="hasPrimaryInfo || (!aggregationStatusIsInitialized || hasAggregationStatusInfo)"
class="uk-width-expand uk-padding uk-inline">
<!-- Description -->
<div *ngIf="dataProviderInfo.description" class="uk-margin-medium-bottom">
<div class="uk-text-justify">
<div class="uk-text-meta uk-margin-small-bottom">Description</div>
<div class="multi-line-ellipsis lines-10">
<div #descriptionDiv class="uk-margin-small-bottom"
[innerHtml]="dataProviderInfo.description"></div>
</div>
<div *ngIf="showViewMoreButton" class="uk-flex uk-flex-right">
<a (click)="openDescriptionModal();" class="view-more-less-link">
View more
</a>
</div>
</div>
</div>
<ul *ngIf="hasJournalInfo" class="uk-list uk-margin-medium-bottom uk-margin-remove-top">
<showPublisher [journal]="dataProviderInfo.journal" [properties]="properties"></showPublisher>
</ul>
<div *ngIf="hasAggregationStatusInfo || dataProviderInfo.fundedContent"
class="uk-margin-medium-bottom uk-animation-fade uk-animation-fast">
<span *ngIf="dataProviderInfo.aggregationStatus?.fulltexts && dataProviderInfo.aggregationStatus?.fulltexts != -1"
class="uk-margin-right uk-display-inline-block">
<div class="uk-text-meta uk-margin-small-bottom">Collected full-texts</div>
{{dataProviderInfo.aggregationStatus.fulltexts | number}}
</span>
<span *ngIf="dataProviderInfo.fundedContent && dataProviderInfo.fundedContent > 0"
class="uk-display-inline-block">
<div class="uk-text-meta uk-margin-small-bottom">Results with funding information</div>
{{dataProviderInfo.fundedContent | number}}
</span>
</div>
<div *ngIf="!aggregationStatusIsInitialized || !dataProviderInfo.fundedContent"
class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
<div *ngIf="dataProviderInfo.countries != undefined && dataProviderInfo.countries.length > 0"
class="uk-margin-medium-bottom">
<div class="uk-text-meta uk-margin-small-bottom">Countries</div>
{{dataProviderInfo.countries.join(", ")}}
</div>
<div *ngIf="dataProviderInfo.jurisdiction" class="uk-margin-medium-bottom">
<div class="uk-text-meta uk-margin-small-bottom">Jurisdiction</div>
{{dataProviderInfo.jurisdiction}}
</div>
<div *ngIf="dataProviderInfo.contentpolicy" class="uk-margin-medium-bottom">
<div class="uk-text-meta uk-margin-small-bottom">Content policy</div>
{{dataProviderInfo.contentpolicy}}
</div>
<!-- Subjects -->
<div *ngIf="dataProviderInfo.subjects && dataProviderInfo.subjects.length > 0"
class="uk-margin-medium-bottom uk-margin-bottom">
<div class="uk-height-max-medium uk-overflow-auto">
<div class="uk-text-meta uk-margin-small-bottom">Subjects </div>
<span>{{dataProviderInfo.subjects.slice(0, lessBtnSubjects ? dataProviderInfo.subjects.length : thresholdSubjects).join(", ")}}</span>
<span *ngIf="dataProviderInfo.subjects.length > thresholdSubjects && !lessBtnSubjects"> ... </span>
</div>
<div *ngIf="dataProviderInfo.subjects.length > thresholdSubjects && !lessBtnSubjects"
class="uk-width-1-1 uk-text-right">
<a (click)="viewAllSubjectsClick();" class="view-more-less-link">
View all {{dataProviderInfo.subjects.length | number}} subjects
</a>
</div>
<div *ngIf="viewAllSubjects && lessBtnSubjects" class="uk-width-1-1 uk-text-right">
<a (click)="viewAllSubjects = !viewAllSubjects; lessBtnSubjects=false;" class="view-more-less-link">View less subjects</a>
</div>
</div>
</div>
<div *ngIf="hasSecondaryInfo"
[class]="'uk-inline uk-padding uk-padding-remove-horizontal ' + (hasPrimaryInfo?'uk-width-1-3@m': 'uk-width-expand')">
<div class="uk-padding uk-padding-remove-vertical uk-height-1-1">
<div *ngIf="dataProviderInfo.oaiPmhURL || dataProviderInfo.provenance?.size > 0"
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>
<a target="_blank" href="{{dataProviderInfo.oaiPmhURL}}" class="custom-external">
{{dataProviderInfo.oaiPmhURL}}
</a>
</div>
<div *ngIf="dataProviderInfo.provenance?.size > 0" class="uk-display-inline-block">
<div class="uk-text-meta uk-margin-small-bottom">Detailed information @ </div>
<span *ngFor="let provenance of getKeys(dataProviderInfo.provenance); let i=index">
<a *ngIf="dataProviderInfo.provenance.get(provenance).url.length == 1" class="custom-external uk-link-text"
target="_blank" href="{{dataProviderInfo.provenance.get(provenance).url}}">
{{provenance}}
</a>
<ng-container *ngIf="dataProviderInfo.provenance.get(provenance).url.length > 1">
<span class="custom-external">{{provenance}}</span>
<ng-container *ngFor="let url of dataProviderInfo.provenance.get(provenance).url; let i=index">
[<a target="_blank" href="{{url}}">{{i}}</a>]
</ng-container>
</ng-container>
<span *ngIf="i < dataProviderInfo.provenance.size-1">, </span>
</span>
</div>
</div>
<div *ngIf="dataProviderInfo.organizations && dataProviderInfo.organizations.length > 0"
class="uk-margin-medium-bottom">
<div 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>
<div *ngIf="dataProviderInfo.organizations.length > thresholdOrganizations && !lessBtnOrganizations"
class="uk-width-1-1 uk-text-right">
<a (click)="viewAllOrganizationsClick();" class="view-more-less-link">
View all {{dataProviderInfo.organizations.length | number}} organizations
</a>
</div>
<div *ngIf="viewAllOrganizations && lessBtnOrganizations" class="uk-width-1-1 uk-text-right">
<a (click)="viewAllOrganizations = !viewAllOrganizations; lessBtnOrganizations=false;" class="view-more-less-link">View less organizations</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Projects-->
<ng-container *ngIf="fetchProjects.searchUtils.totalResults > 0"> <ng-container *ngIf="fetchProjects.searchUtils.totalResults > 0">
<div id="projects" class="landing-section uk-padding uk-padding-remove-horizontal"> <ng-container *ngTemplateOutlet="projects_content"></ng-container>
<search-tab [fetch]="fetchProjects" resultType="project"
[params]="getParamsForSearchLink()"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedProjects"
[properties]="properties">
</search-tab>
</div>
</ng-container> </ng-container>
<!-- Datasources -->
<ng-container *ngIf="fetchDataproviders.searchUtils.totalResults > 0"> <ng-container *ngIf="fetchDataproviders.searchUtils.totalResults > 0">
<div id="datasources" class="landing-section uk-padding uk-padding-remove-horizontal"> <ng-container *ngTemplateOutlet="dataproviders_content"></ng-container>
<search-tab [fetch]="fetchDataproviders" resultType="dataprovider"
[params]="getParamsForSearchLink()"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedDataProviders"
[properties]="properties">
</search-tab>
</div>
</ng-container> </ng-container>
<!--Publications-->
<ng-container *ngIf="fetchPublications.searchUtils.totalResults > 0"> <ng-container *ngIf="fetchPublications.searchUtils.totalResults > 0">
<div id="publications" class="landing-section uk-padding uk-padding-remove-horizontal"> <ng-container *ngTemplateOutlet="publications_content"></ng-container>
<search-tab [fetch]="fetchPublications" resultType="publication"
[params]="getParamsForSearchLink('publications')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
[properties]="properties">
</search-tab>
</div>
</ng-container> </ng-container>
<!--Research Data-->
<ng-container *ngIf="fetchDatasets.searchUtils.totalResults > 0"> <ng-container *ngIf="fetchDatasets.searchUtils.totalResults > 0">
<div id="datasets" class="landing-section uk-padding uk-padding-remove-horizontal"> <ng-container *ngTemplateOutlet="datasets_content"></ng-container>
<search-tab [fetch]="fetchDatasets" resultType="dataset"
[params]="getParamsForSearchLink('datasets')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
[properties]="properties">
</search-tab>
</div>
</ng-container> </ng-container>
<!--Software-->
<ng-container *ngIf="fetchSoftware.searchUtils.totalResults > 0"> <ng-container *ngIf="fetchSoftware.searchUtils.totalResults > 0">
<div id="software" class="landing-section uk-padding uk-padding-remove-horizontal"> <ng-container *ngTemplateOutlet="software_content"></ng-container>
<search-tab [fetch]="fetchSoftware" resultType="software"
[params]="getParamsForSearchLink('software')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
[properties]="properties">
</search-tab>
</div>
</ng-container> </ng-container>
<!--Other-->
<ng-container *ngIf="fetchOrps.searchUtils.totalResults > 0"> <ng-container *ngIf="fetchOrps.searchUtils.totalResults > 0">
<div id="other" class="landing-section uk-padding uk-padding-remove-horizontal"> <ng-container *ngTemplateOutlet="other_content"></ng-container>
<search-tab [fetch]="fetchOrps" resultType="other"
[params]="getParamsForSearchLink('other')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
[properties]="properties">
</search-tab>
</div>
</ng-container> </ng-container>
<!--Related Datasources-->
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0 <ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"> || fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
<div id="relatedDatasources" class="landing-section uk-padding uk-padding-remove-horizontal"> <ng-container *ngTemplateOutlet="relatedDatasources_content"></ng-container>
<relatedDatasourcesTab
[dataproviderId]="datasourceId"
[results]="dataProviderInfo.relatedDatasources"
[loading]="loadingRelatedDatasources"
[fetchResults]="fetchAggregatorsResults"
[collectedFromName]="dataProviderInfo.title.name"
[properties]=properties
[modal]="relatedDatasourcesModal">
</relatedDatasourcesTab>
</div>
</ng-container> </ng-container>
<!-- Metrics -->
<ng-container *ngIf="dataProviderInfo && hasMetrics"> <ng-container *ngIf="dataProviderInfo && hasMetrics">
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal"> <ng-container *ngTemplateOutlet="metricsContent"></ng-container>
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
<li class="uk-padding-remove">
<a href="#">Overview</a>
</li>
<li *ngIf="totalDownloads ||totalViews">
<a href="#" (click)="clickedUsageMetrics()">Usage</a>
</li>
</ul>
<ul class="uk-switcher uk-margin-large-top">
<!-- overview -->
<li>
<div *ngIf="totalDownloads || totalViews">
<div class="uk-grid-divider" uk-grid>
<div>
<div class="uk-text-center uk-margin-small-bottom">
<img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</div>
<span class="uk-text-uppercase uk-text-xsmall">Usage by</span>
<span class="uk-display-block uk-text-bolder">UsageCounts</span>
</div>
<div>
<table class="uk-table uk-table-small">
<tbody>
<tr *ngIf="totalDownloads">
<td class="uk-padding-remove-top">
<icon name="download" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td>
<td class="uk-padding-remove-top">
Downloads
</td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"
[attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{totalDownloads | number}}">
{{formatNumber(totalDownloads)}}
</td>
</tr>
<tr *ngIf="totalViews">
<td class="uk-padding-remove-bottom">
<icon name="visibility" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td>
<td class="uk-padding-remove-bottom">
Views
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"
[attr.uk-tooltip]="totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{totalViews | number}}">
{{formatNumber(totalViews)}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</li>
<!-- usage -->
<li>
<div class="uk-flex uk-flex-center uk-flex-middle">
<div class="uk-margin-large-right">
<div *ngIf="totalDownloads" class="uk-text-center uk-margin-medium-bottom">
<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>
<div class="uk-text-bold">Downloads</div>
</div>
<div *ngIf="totalViews" class="uk-text-center uk-margin-medium-bottom">
<div class="uk-text-background uk-text-bold number metrics-number"
[attr.uk-tooltip]="totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{totalViews | number}}">{{formatNumber(totalViews)}}</div>
<div class="uk-text-bold">Views</div>
</div>
</div>
<ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
<div *ngIf="metricsClicked && downloadsFrameUrl && totalDownloads" class="uk-margin-large-right">
<i-frame [height]="300" [url]="downloadsFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame>
</div>
<div *ngIf="metricsClicked && viewsFrameUrl && totalViews" class="uk-margin-large-right">
<i-frame [height]="300" [url]="viewsFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1">
</i-frame>
</div>
</ng-container>
</div>
<div class="uk-text-center uk-margin-large-top">
<span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</div>
</li>
</ul>
</div>
</ng-container> </ng-container>
<!--Statistics-->
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0 <ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"> || fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
<ng-container *ngTemplateOutlet="statistics_content"></ng-container>
<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> </ng-container>
</div> </div>
<div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div> <div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
@ -600,6 +313,187 @@
</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" <feedback *ngIf="dataProviderInfo && properties.reCaptchaSiteKey" [dataProviderInfo]="dataProviderInfo"
[properties]="properties" [entityType]="getTypeName()" [fields]="feedbackFields" [properties]="properties" [entityType]="getTypeName()" [fields]="feedbackFields"
[(showForm)]="showFeedback"></feedback> [(showForm)]="showFeedback"></feedback>
@ -640,3 +534,333 @@
<modal-alert *ngIf="dataProviderInfo && dataProviderInfo.subjects" #subjectsModal> <modal-alert *ngIf="dataProviderInfo && dataProviderInfo.subjects" #subjectsModal>
<span>{{dataProviderInfo.subjects.join(", ")}}</span> <span>{{dataProviderInfo.subjects.join(", ")}}</span>
</modal-alert> </modal-alert>
<ng-template #summary_content>
<div id="summary" class="landing-section landing-section-height-auto">
<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"
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">
No summary information available
</div>
</div>
<div *ngIf="hasPrimaryInfo || (!aggregationStatusIsInitialized || hasAggregationStatusInfo)"
class="uk-width-expand uk-inline" [ngClass]="isMobile ? 'uk-padding-remove' : 'uk-padding'">
<!-- Description -->
<div *ngIf="dataProviderInfo.description && (!viewAllMobile || viewAllMobile == 'description')" class="uk-margin-medium-bottom">
<div class="uk-text-justify">
<div *ngIf="viewAllMobile != 'description'" class="uk-text-meta uk-margin-small-bottom">Description</div>
<div [ngClass]="viewAllMobile == 'description' ? '' : 'multi-line-ellipsis lines-10'">
<div #descriptionDiv class="uk-margin-small-bottom"
[innerHtml]="dataProviderInfo.description"></div>
</div>
<div *ngIf="showViewMoreButton && viewAllMobile != 'description'" class="uk-flex uk-flex-right">
<a (click)="viewAllDescriptionClicked();" class="view-more-less-link">
View more
</a>
</div>
</div>
</div>
<!-- <ul *ngIf="hasJournalInfo" class="uk-list uk-margin-medium-bottom uk-margin-remove-top">
<showPublisher [journal]="dataProviderInfo.journal" [properties]="properties"></showPublisher>
</ul> -->
<ng-container *ngIf="!viewAllMobile">
<div *ngIf="hasAggregationStatusInfo || (dataProviderInfo.fundedContent && dataProviderInfo.fundedContent > 0)"
class="uk-margin-medium-bottom uk-animation-fade uk-animation-fast">
<span *ngIf="dataProviderInfo.aggregationStatus?.fulltexts && dataProviderInfo.aggregationStatus?.fulltexts != -1"
class="uk-margin-right uk-display-inline-block">
<div class="uk-text-meta uk-margin-small-bottom">Collected full-texts</div>
{{dataProviderInfo.aggregationStatus.fulltexts | number}}
</span>
<span *ngIf="dataProviderInfo.fundedContent && dataProviderInfo.fundedContent > 0"
class="uk-display-inline-block">
<div class="uk-text-meta uk-margin-small-bottom">Results with funding information</div>
{{dataProviderInfo.fundedContent | number}}
</span>
</div>
<div *ngIf="!aggregationStatusIsInitialized || !dataProviderInfo.fundedContent"
class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
<div *ngIf="dataProviderInfo.countries != undefined && dataProviderInfo.countries.length > 0"
class="uk-margin-medium-bottom">
<div class="uk-text-meta uk-margin-small-bottom">Countries</div>
{{dataProviderInfo.countries.join(", ")}}
</div>
<div *ngIf="dataProviderInfo.jurisdiction" class="uk-margin-medium-bottom">
<div class="uk-text-meta uk-margin-small-bottom">Jurisdiction</div>
{{dataProviderInfo.jurisdiction}}
</div>
<div *ngIf="dataProviderInfo.contentpolicy" class="uk-margin-medium-bottom">
<div class="uk-text-meta uk-margin-small-bottom">Content policy</div>
{{dataProviderInfo.contentpolicy}}
</div>
</ng-container>
<!-- Subjects -->
<div *ngIf="dataProviderInfo.subjects && dataProviderInfo.subjects.length > 0 && (!viewAllMobile || viewAllMobile == 'subjects')"
class="uk-margin-medium-bottom uk-margin-bottom">
<div class="uk-height-max-medium uk-overflow-auto">
<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 *ngIf="dataProviderInfo.subjects.length > thresholdSubjects && !lessBtnSubjects"> ... </span>
</ng-container>
<ng-container *ngIf="viewAllMobile == 'subjects'">
<span>{{dataProviderInfo.subjects.join(", ")}}</span>
</ng-container>
</div>
<div *ngIf="dataProviderInfo.subjects.length > thresholdSubjects && !lessBtnSubjects && viewAllMobile != 'subjects'"
class="uk-width-1-1 uk-text-right">
<a (click)="viewAllSubjectsClick();" class="view-more-less-link">
View all {{dataProviderInfo.subjects.length | number}} subjects
</a>
</div>
<div *ngIf="viewAllSubjects && lessBtnSubjects" class="uk-width-1-1 uk-text-right">
<a (click)="viewAllSubjects = !viewAllSubjects; lessBtnSubjects=false;" class="view-more-less-link">View less subjects</a>
</div>
</div>
</div>
<div *ngIf="hasSecondaryInfo"
[class]="'uk-inline uk-padding-remove-horizontal ' + (hasPrimaryInfo?'uk-width-1-3@m': 'uk-width-expand')" [ngClass]="isMobile ? '' : 'uk-padding'">
<div class="uk-height-1-1" [ngClass]="isMobile ? '' : 'uk-padding uk-padding-remove-vertical'">
<div *ngIf="(dataProviderInfo.oaiPmhURL || dataProviderInfo.provenance?.size > 0) && !viewAllMobile"
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>
<a target="_blank" href="{{dataProviderInfo.oaiPmhURL}}" class="custom-external">
{{dataProviderInfo.oaiPmhURL}}
</a>
</div>
<div *ngIf="dataProviderInfo.provenance?.size > 0" class="uk-display-inline-block">
<div class="uk-text-meta uk-margin-small-bottom">Detailed information @ </div>
<span *ngFor="let provenance of getKeys(dataProviderInfo.provenance); let i=index">
<a *ngIf="dataProviderInfo.provenance.get(provenance).url.length == 1" class="custom-external uk-link-text"
target="_blank" href="{{dataProviderInfo.provenance.get(provenance).url}}">
{{provenance}}
</a>
<ng-container *ngIf="dataProviderInfo.provenance.get(provenance).url.length > 1">
<span class="custom-external">{{provenance}}</span>
<ng-container *ngFor="let url of dataProviderInfo.provenance.get(provenance).url; let i=index">
[<a target="_blank" href="{{url}}">{{i}}</a>]
</ng-container>
</ng-container>
<span *ngIf="i < dataProviderInfo.provenance.size-1">, </span>
</span>
</div>
</div>
<div *ngIf="dataProviderInfo.organizations && dataProviderInfo.organizations.length > 0 && (!viewAllMobile || viewAllMobile == 'organizations')"
class="uk-margin-medium-bottom">
<div *ngIf="viewAllMobile != 'organizations'" class="uk-text-meta uk-margin-small-bottom">{{openaireEntities.ORGANIZATIONS}}</div>
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: (lessBtnOrganizations || viewAllMobile == 'organizations') ? dataProviderInfo.organizations.length : thresholdOrganizations }"></ng-container>
<div *ngIf="dataProviderInfo.organizations.length > thresholdOrganizations && !lessBtnOrganizations && viewAllMobile != 'organizations'"
class="uk-width-1-1 uk-text-right">
<a (click)="viewAllOrganizationsClick();" class="view-more-less-link">
View all {{dataProviderInfo.organizations.length | number}} organizations
</a>
</div>
<div *ngIf="viewAllOrganizations && lessBtnOrganizations" class="uk-width-1-1 uk-text-right">
<a (click)="viewAllOrganizations = !viewAllOrganizations; lessBtnOrganizations=false;" class="view-more-less-link">View less organizations</a>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template #projects_content>
<div id="projects" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchProjects" resultType="project"
[params]="getParamsForSearchLink()"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedProjects"
[properties]="properties">
</search-tab>
</div>
</ng-template>
<ng-template #dataproviders_content>
<div id="datasources" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchDataproviders" resultType="dataprovider"
[params]="getParamsForSearchLink()"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedDataProviders"
[properties]="properties">
</search-tab>
</div>
</ng-template>
<ng-template #publications_content>
<div id="publications" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchPublications" resultType="publication"
[params]="getParamsForSearchLink('publications')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
[properties]="properties">
</search-tab>
</div>
</ng-template>
<ng-template #datasets_content>
<div id="datasets" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchDatasets" resultType="dataset"
[params]="getParamsForSearchLink('datasets')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
[properties]="properties">
</search-tab>
</div>
</ng-template>
<ng-template #software_content>
<div id="software" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchSoftware" resultType="software"
[params]="getParamsForSearchLink('software')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
[properties]="properties">
</search-tab>
</div>
</ng-template>
<ng-template #other_content>
<div id="other" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchOrps" resultType="other"
[params]="getParamsForSearchLink('other')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
[properties]="properties">
</search-tab>
</div>
</ng-template>
<ng-template #relatedDatasources_content>
<div id="relatedDatasources" class="landing-section uk-padding uk-padding-remove-horizontal">
<relatedDatasourcesTab
[dataproviderId]="datasourceId"
[results]="dataProviderInfo.relatedDatasources"
[loading]="loadingRelatedDatasources"
[fetchResults]="fetchAggregatorsResults"
[collectedFromName]="dataProviderInfo.title.name"
[properties]=properties
[modal]="relatedDatasourcesModal">
</relatedDatasourcesTab>
</div>
</ng-template>
<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">
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
<li class="uk-padding-remove">
<a href="#">Overview</a>
</li>
<li *ngIf="totalDownloads ||totalViews">
<a href="#" (click)="clickedUsageMetrics()">Usage</a>
</li>
</ul>
<ul class="uk-switcher uk-margin-large-top">
<!-- overview -->
<li>
<div *ngIf="totalDownloads || totalViews">
<div class="uk-grid-divider" uk-grid>
<div>
<div class="uk-text-center uk-margin-small-bottom">
<img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</div>
<span class="uk-text-uppercase uk-text-xsmall">Usage by</span>
<span class="uk-display-block uk-text-bolder">UsageCounts</span>
</div>
<div>
<table class="uk-table uk-table-small">
<tbody>
<tr *ngIf="totalDownloads">
<td class="uk-padding-remove-top">
<icon name="download" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td>
<td class="uk-padding-remove-top">
Downloads
</td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"
[attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{totalDownloads | number}}">
{{formatNumber(totalDownloads)}}
</td>
</tr>
<tr *ngIf="totalViews">
<td class="uk-padding-remove-bottom">
<icon name="visibility" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td>
<td class="uk-padding-remove-bottom">
Views
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"
[attr.uk-tooltip]="totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{totalViews | number}}">
{{formatNumber(totalViews)}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</li>
<!-- usage -->
<li *ngIf="totalDownloads || totalViews">
<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 *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'"
title="{{totalDownloads | number}}">{{formatNumber(totalDownloads)}}</div>
<div class="uk-text-bold">Downloads</div>
</div>
<div *ngIf="totalViews" class="uk-text-center uk-margin-medium-bottom">
<div class="uk-text-background uk-text-bold number metrics-number"
[attr.uk-tooltip]="totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{totalViews | number}}">{{formatNumber(totalViews)}}</div>
<div class="uk-text-bold">Views</div>
</div>
</div>
<ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
<div *ngIf="metricsClicked && downloadsFrameUrl && totalDownloads" class="uk-margin-large-right">
<i-frame [height]="300" [url]="downloadsFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame>
</div>
<div *ngIf="metricsClicked && viewsFrameUrl && totalViews" class="uk-margin-large-right">
<i-frame [height]="300" [url]="viewsFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1">
</i-frame>
</div>
</ng-container>
</div>
<div class="uk-text-center uk-margin-large-top">
<span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</div>
</li>
</ul>
</div>
</ng-template>
<fs-modal *ngIf="dataProviderInfo" #addThisFsModal classTitle="uk-tile-default uk-border-bottom" classBody="uk-flex uk-flex-center uk-flex-middle">
<addThis></addThis>
</fs-modal>

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) {
@ -717,7 +739,13 @@ export class DataProviderComponent {
if(this.dataProviderInfo.organizations.length <= this.thresholdOrganizations*2) { if(this.dataProviderInfo.organizations.length <= this.thresholdOrganizations*2) {
this.lessBtnOrganizations = true; this.lessBtnOrganizations = true;
} else { } else {
this.openOrganizationsModal(); if(this.isMobile) {
this.summaryFsModal.title += " - Organizations";
this.summaryFsModal.back = true;
this.viewAllMobile = "organizations";
} else {
this.openOrganizationsModal();
}
} }
} }
@ -733,7 +761,13 @@ export class DataProviderComponent {
if(this.dataProviderInfo.subjects.length <= this.thresholdSubjects*2) { if(this.dataProviderInfo.subjects.length <= this.thresholdSubjects*2) {
this.lessBtnSubjects = true; this.lessBtnSubjects = true;
} else { } else {
this.openSubjectsModal(); if(this.isMobile) {
this.summaryFsModal.title += " - Subjects";
this.summaryFsModal.back = true;
this.viewAllMobile = "subjects";
} else {
this.openSubjectsModal();
}
} }
} }
@ -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>";

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,

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;

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);
} }

View File

@ -1024,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>
@ -1131,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>