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

[Library & common-assets | new-theme]: 

1. landing-utils.css: Deleted .landing-background-default-color (replaced in html with uk-background-default).
2. resultLanding.component.html & project.component.html & organization.component.html & dataProvider.component.html: Updates and fixes for redesign.
   a. #graph_and_feedback outside margins and checks (invisible when no info).
   b. [Bug fix] margin-top of center column fixed (uk-sticky-placeholder was adding space).
   c. [Bug fix] Show again right sidebar when screen becomes medium+.
   d. [Bug fix] Added grid in labels.
3. resultLanding.component.ts & project.component.ts & organization.component.ts & dataProvider.component.ts: Added ResizeObserver and updated how graph_offset is calculated | Added graph_height field to set margin-top of center column.
4. project.component.ts: In getFileNameType() use OpenaireEntities.
5. organization.component.ts:
   a. In contentTypes field added type file names from OpenaireEntities
   b. Added field contentFileName.
   c. Added field shouldSticky and observer for "bottom" to stop sticky title & tabs when bottom is in viewport.
6. dataProvider.component.ts: Added field "provenanceUrls" and method "getProvenanceUrls()" to flatten all urls from dataProviderInfo.provenance.
This commit is contained in:
Konstantina Galouni 2022-05-05 20:54:01 +03:00
parent 39a54e060a
commit 8b94b7f98a
8 changed files with 1169 additions and 1039 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,11 +8,11 @@
</div> </div>
</div> </div>
<div *ngIf="dataProviderInfo" class="dataprovider"> <div class="dataprovider">
<div *ngIf="!showFeedback" class="uk-grid"> <div *ngIf="!showFeedback" class="uk-grid">
<!-- left box - actions --> <!-- left box - actions -->
<div class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color"> <div *ngIf="dataProviderInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color">
<div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky" <div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset"> uk-sticky="bottom: true" [attr.offset]="offset">
<div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between"> <div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
@ -43,18 +43,18 @@
</div> </div>
<!-- center box--> <!-- center box-->
<div *ngIf="dataProviderInfo" class="uk-width-expand uk-padding-remove uk-margin-large-left uk-margin-large-right landing-background-default-color"> <div class="uk-width-expand uk-padding-remove uk-background-default">
<ng-template #graph_and_feedback_template> <ng-template #graph_and_feedback_template>
<div class="uk-flex uk-margin-small-top uk-margin-small-bottom"> <div class="uk-flex uk-margin-small-top uk-margin-small-bottom">
<!-- Last Index Info--> <!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2 graph"> <div class="uk-width-2-3@m uk-width-1-2 graph">
<icon name="graph" customClass="uk-text-primary"></icon> <icon name="graph" customClass="uk-text-primary"></icon>
<span class="uk-margin-small-left uk-text-baseline"> <span class="uk-margin-small-left uk-text-baseline">
<span class="uk-text-meta">Powered by </span><a href="https://graph.openaire.eu" target="_blank">OpenAIRE Research Graph</a> <span class="uk-text-meta">Powered by </span><a href="https://graph.openaire.eu" target="_blank">OpenAIRE Research Graph</a>
</span> </span>
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta"> <span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta">
. Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span> </span>
</div> </div>
<!--Feedback--> <!--Feedback-->
<div *ngIf="properties.reCaptchaSiteKey" class="uk-width-expand uk-text-right"> <div *ngIf="properties.reCaptchaSiteKey" class="uk-width-expand uk-text-right">
@ -64,327 +64,331 @@
</div> </div>
</ng-template> </ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-text-xsmall uk-visible@m" <div #graph_and_feedback id="graph_and_feedback" class="uk-padding uk-padding-remove-vertical uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset"> uk-sticky="bottom: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container> <ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div> </div>
<div class="uk-margin-medium-top"> <div class="uk-margin-large-left uk-margin-large-right">
<!-- schema.org-->
<schema2jsonld [data]=dataProviderInfo
[URL]="properties.domain+ properties.baseLink +properties.searchLinkToDataProvider +datasourceId"
type="datasource"
[otherURL]="(dataProviderInfo.openDoarId)?(properties.openDoarURL+dataProviderInfo.openDoarId):((dataProviderInfo.r3DataId)?properties.r3DataURL+dataProviderInfo.r3DataId:null)"></schema2jsonld>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<landing-header [properties]="properties" [title]="dataProviderInfo.title.name" <ng-container *ngIf="dataProviderInfo">
[subTitle]="(dataProviderInfo.officialName <div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
&& dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null" <!-- schema.org-->
[types]="dataProviderInfo.type ? [dataProviderInfo.type] : null"> <schema2jsonld [data]=dataProviderInfo
</landing-header> [URL]="properties.domain+ properties.baseLink +properties.searchLinkToDataProvider +datasourceId"
type="datasource"
[otherURL]="(dataProviderInfo.provenance)?provenanceUrls:null"></schema2jsonld>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<!-- Web Page --> <landing-header [properties]="properties" [title]="dataProviderInfo.title.name"
<div *ngIf="dataProviderInfo.title && dataProviderInfo.title.url" [subTitle]="(dataProviderInfo.officialName
class="uk-margin-bottom uk-text-small"> && dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null"
<span class="uk-text-meta">Web page: </span> [types]="dataProviderInfo.type ? [dataProviderInfo.type] : null">
<a [href]="dataProviderInfo.title.url" target="_blank" </landing-header>
class="uk-button uk-button-text uk-text-lowercase uk-text-normal custom-external">
{{dataProviderInfo.title.url}}
</a>
</div>
<!-- Labels --> <!-- Web Page -->
<div class="uk-margin-bottom"> <div *ngIf="dataProviderInfo.title && dataProviderInfo.title.url"
<ng-container *ngIf="dataProviderInfo.compatibility"> class="uk-margin-bottom uk-text-small">
<span class="uk-label uk-text-truncate" title="Compatibility"> <span class="uk-text-meta">Web page: </span>
<a *ngIf="dataProviderInfo.compatibility.id" <a [href]="dataProviderInfo.title.url" target="_blank"
[queryParams]="{datasourceId: dataProviderInfo.compatibility.id}" routerLinkActive="router-link-active" class="uk-button uk-button-text uk-text-lowercase uk-text-normal custom-external">
[routerLink]="properties.searchLinkToDataProvider.split('?')[0]"> {{dataProviderInfo.title.url}}
{{dataProviderInfo.compatibility.info}}
<ng-container *ngIf="dataProviderInfo.compatibility.name">{{dataProviderInfo.compatibility.name}}</ng-container>
</a> </a>
<span *ngIf="!dataProviderInfo.compatibility.id">
{{dataProviderInfo.compatibility.info}}
</span>
<span *ngIf="dataProviderInfo.compatibility.name && !dataProviderInfo.compatibility.id">
{{dataProviderInfo.compatibility.name}}
</span>
</span>&#160;
</ng-container>
<ng-container *ngIf="dataProviderInfo.aggregationStatus && dataProviderInfo.aggregationStatus.fulltexts && dataProviderInfo.aggregationStatus.fulltexts > 0"
class="uk-label uk-text-truncate">
<span>OpenAIRE Text Mining</span>&#160;
</ng-container>
<ng-container *ngIf="dataProviderInfo.countries && removeUnknown(dataProviderInfo.countries).length > 0">
<ng-container *ngFor="let country of removeUnknown(dataProviderInfo.countries)">
<span class="uk-label custom-label label-country" title="Country">{{country}}</span>&#160;
</ng-container>
</ng-container>
</div>
</div>
<div id="main-tabs-div"
[attr.uk-sticky]="shouldSticky ? 'bottom: true; media: @m': null" [attr.offset]="offset"
cls-active="active">
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<showTitle *ngIf="stickyHeader" [titleName]="dataProviderInfo.title.name" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>
<my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [offsetForSticky]="offset" [(isSticky)]="stickyHeader">
<my-tab [tabTitle]="'Summary'" [tabId]="'summary'" [active]="true"></my-tab>
<my-tab *ngIf="fetchProjects.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.PROJECTS" [tabNumber]="fetchProjects.searchUtils.totalResults"
[tabId]="'projects'">
</my-tab>
<my-tab *ngIf="fetchDataproviders.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.DATASOURCES" [tabNumber]="fetchDataproviders.searchUtils.totalResults"
[tabId]="'datasources'">
</my-tab>
<my-tab *ngIf="fetchPublications.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.PUBLICATIONS" [tabNumber]="fetchPublications.searchUtils.totalResults"
[tabId]="'publications'">
</my-tab>
<my-tab *ngIf="fetchDatasets.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.DATASETS" [tabNumber]="fetchDatasets.searchUtils.totalResults"
[tabId]="'datasets'">
</my-tab>
<my-tab *ngIf="fetchSoftware.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.SOFTWARE" [tabNumber]="fetchSoftware.searchUtils.totalResults"
[tabId]="'software'">
</my-tab>
<my-tab *ngIf="fetchOrps.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.OTHER" [tabNumber]="fetchOrps.searchUtils.totalResults"
[tabId]="'other'">
</my-tab>
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
[tabTitle]="'Related '+openaireEntities.DATASOURCES" [tabId]="'relatedDatasources'">
</my-tab>
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
[tabTitle]="'Statistics'" customClass="statistics" [tabId]="'statistics'" [active]="false">
</my-tab>
</my-tabs>
</div>
</div>
<div id="landing-sections" class="uk-text-small">
<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 *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>
<div *ngIf="hasPrimaryInfo || (!aggregationStatusIsInitialized || hasAggregationStatusInfo)"
class="uk-width-expand uk-padding uk-inline">
<!-- Description -->
<div *ngIf="dataProviderInfo.description && dataProviderInfo.description.length > 0"
class="uk-margin-medium-bottom">
<div class="uk-text-justify ">
<div class="uk-text-meta uk-margin-small-bottom">Description</div>
<div class=" uk-height-max-medium uk-overflow-auto">
<div *ngFor="let description of dataProviderInfo.description" class="uk-margin-small-bottom "
[innerHtml]="description"></div>
</div>
</div> <!-- Labels -->
</div> <div class="uk-margin-bottom uk-margin-remove-left uk-grid uk-grid-small uk-flex-middle" uk-grid>
<ng-container *ngIf="dataProviderInfo.compatibility">
<ul *ngIf="hasJournalInfo" class="uk-list uk-margin-medium-bottom uk-margin-remove-top"> <span class="uk-label uk-text-truncate" title="Compatibility">
<showPublisher [journal]="dataProviderInfo.journal" [properties]="properties"></showPublisher> <a *ngIf="dataProviderInfo.compatibility.id"
</ul> [queryParams]="{datasourceId: dataProviderInfo.compatibility.id}" routerLinkActive="router-link-active"
[routerLink]="properties.searchLinkToDataProvider.split('?')[0]">
<div *ngIf="hasAggregationStatusInfo || dataProviderInfo.fundedContent" {{dataProviderInfo.compatibility.info}}
class="uk-margin-medium-bottom uk-animation-fade uk-animation-fast"> <ng-container *ngIf="dataProviderInfo.compatibility.name">{{dataProviderInfo.compatibility.name}}</ng-container>
<span *ngIf="dataProviderInfo.aggregationStatus?.fulltexts && dataProviderInfo.aggregationStatus?.fulltexts != -1"
class="uk-margin-right">
<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>
<!-- 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();">
View all {{dataProviderInfo.subjects.length | number}} subjects
</a> </a>
</div> <span *ngIf="!dataProviderInfo.compatibility.id">
<div *ngIf="viewAllSubjects && lessBtnSubjects" class="uk-width-1-1 uk-text-right"> {{dataProviderInfo.compatibility.info}}
<a (click)="viewAllSubjects = !viewAllSubjects; lessBtnSubjects=false;">View less subjects</a> </span>
</div> <span *ngIf="dataProviderInfo.compatibility.name && !dataProviderInfo.compatibility.id">
</div> {{dataProviderInfo.compatibility.name}}
</span>
</span>&#160;
</ng-container>
<ng-container *ngIf="dataProviderInfo.aggregationStatus && dataProviderInfo.aggregationStatus.fulltexts && dataProviderInfo.aggregationStatus.fulltexts > 0">
<span class="uk-label uk-text-truncate">OpenAIRE Text Mining</span>&#160;
</ng-container>
<ng-container *ngIf="dataProviderInfo.countries && removeUnknown(dataProviderInfo.countries).length > 0">
<ng-container *ngFor="let country of removeUnknown(dataProviderInfo.countries)">
<span class="uk-label label-country" title="Country">{{country}}</span>&#160;
</ng-container>
</ng-container>
</div> </div>
<div *ngIf="hasSecondaryInfo" </div>
[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 id="main-tabs-div"
<div *ngIf="dataProviderInfo.oaiPmhURL || dataProviderInfo.provenance?.size > 0" [attr.uk-sticky]="shouldSticky ? 'bottom: true; media: @m': null" [attr.offset]="offset"
class="uk-margin-medium-bottom"> cls-active="active">
<div *ngIf="dataProviderInfo.oaiPmhURL" class="uk-margin-medium-bottom"> <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<div class="uk-text-meta uk-margin-small-bottom">OAI-PMH</div> <showTitle *ngIf="stickyHeader" [titleName]="dataProviderInfo.title.name" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>
<a target="_blank" href="{{dataProviderInfo.oaiPmhURL}}" class="custom-external"> <my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [offsetForSticky]="offset" [(isSticky)]="stickyHeader">
{{dataProviderInfo.oaiPmhURL}} <my-tab [tabTitle]="'Summary'" [tabId]="'summary'" [active]="true"></my-tab>
</a> <my-tab *ngIf="fetchProjects.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.PROJECTS" [tabNumber]="fetchProjects.searchUtils.totalResults"
[tabId]="'projects'">
</my-tab>
<my-tab *ngIf="fetchDataproviders.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.DATASOURCES" [tabNumber]="fetchDataproviders.searchUtils.totalResults"
[tabId]="'datasources'">
</my-tab>
<my-tab *ngIf="fetchPublications.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.PUBLICATIONS" [tabNumber]="fetchPublications.searchUtils.totalResults"
[tabId]="'publications'">
</my-tab>
<my-tab *ngIf="fetchDatasets.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.DATASETS" [tabNumber]="fetchDatasets.searchUtils.totalResults"
[tabId]="'datasets'">
</my-tab>
<my-tab *ngIf="fetchSoftware.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.SOFTWARE" [tabNumber]="fetchSoftware.searchUtils.totalResults"
[tabId]="'software'">
</my-tab>
<my-tab *ngIf="fetchOrps.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.OTHER" [tabNumber]="fetchOrps.searchUtils.totalResults"
[tabId]="'other'">
</my-tab>
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
[tabTitle]="'Related '+openaireEntities.DATASOURCES" [tabId]="'relatedDatasources'">
</my-tab>
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
[tabTitle]="'Statistics'" customClass="statistics" [tabId]="'statistics'" [active]="false">
</my-tab>
</my-tabs>
</div>
</div>
<div id="landing-sections" class="uk-text-small">
<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 *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="dataProviderInfo.provenance?.size > 0" class="uk-display-inline-block"> </div>
<div class="uk-text-meta uk-margin-small-bottom">Detailed information @ </div> <div *ngIf="hasPrimaryInfo || (!aggregationStatusIsInitialized || hasAggregationStatusInfo)"
<span *ngFor="let provenance of getKeys(dataProviderInfo.provenance); let i=index"> class="uk-width-expand uk-padding uk-inline">
<a *ngIf="dataProviderInfo.provenance.get(provenance).url.length == 1" class="custom-external uk-link-text" <!-- Description -->
target="_blank" href="{{dataProviderInfo.provenance.get(provenance).url}}"> <div *ngIf="dataProviderInfo.description && dataProviderInfo.description.length > 0"
{{provenance}} class="uk-margin-medium-bottom">
</a> <div class="uk-text-justify ">
<ng-container *ngIf="dataProviderInfo.provenance.get(provenance).url.length > 1"> <div class="uk-text-meta uk-margin-small-bottom">Description</div>
<span class="custom-external">{{provenance}}</span> <div class=" uk-height-max-medium uk-overflow-auto">
<ng-container *ngFor="let url of dataProviderInfo.provenance.get(provenance).url; let i=index"> <div *ngFor="let description of dataProviderInfo.description" class="uk-margin-small-bottom "
[<a target="_blank" href="{{url}}">{{i}}</a>] [innerHtml]="description"></div>
</ng-container> </div>
</ng-container>
<span *ngIf="i < dataProviderInfo.provenance.size-1">, </span> </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> </span>
</div> </div>
</div> <div *ngIf="!aggregationStatusIsInitialized || !dataProviderInfo.fundedContent"
<div *ngIf="dataProviderInfo.organizations && dataProviderInfo.organizations.length > 0" class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert">
class="uk-margin-medium-bottom"> <span class="loading-gif uk-align-center"></span>
<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();">
View all {{dataProviderInfo.organizations.length | number}} organizations
</a>
</div> </div>
<div *ngIf="viewAllOrganizations && lessBtnOrganizations" class="uk-width-1-1 uk-text-right">
<a (click)="viewAllOrganizations = !viewAllOrganizations; lessBtnOrganizations=false;">View less organizations</a> <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>
<!-- 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();">
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;">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();">
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;">View less organizations</a>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<!-- Projects--> <!-- 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"> <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()"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedProjects" [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedProjects"
[properties]="properties"> [properties]="properties">
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-container>
<!-- Content Providers --> <!-- Content Providers -->
<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"> <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()"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedDataProviders" [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedDataProviders"
[properties]="properties"> [properties]="properties">
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-container>
<!--Publications--> <!--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"> <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')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults" [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
[properties]="properties"> [properties]="properties">
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-container>
<!--Research Data--> <!--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"> <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')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults" [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
[properties]="properties"> [properties]="properties">
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-container>
<!--Software--> <!--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"> <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')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults" [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
[properties]="properties"> [properties]="properties">
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-container>
<!--Other--> <!--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"> <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')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults" [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
[properties]="properties"> [properties]="properties">
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-container>
<!--Related Content Providers--> <!--Related Content Providers-->
<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"> <div id="relatedDatasources" class="landing-section uk-padding uk-padding-remove-horizontal">
<relatedDatasourcesTab <relatedDatasourcesTab
[dataproviderId]="datasourceId" [dataproviderId]="datasourceId"
[results]="dataProviderInfo.relatedDatasources" [results]="dataProviderInfo.relatedDatasources"
[loading]="loadingRelatedDatasources" [loading]="loadingRelatedDatasources"
[fetchResults]="fetchAggregatorsResults" [fetchResults]="fetchAggregatorsResults"
[collectedFromName]="dataProviderInfo.title.name" [collectedFromName]="dataProviderInfo.title.name"
[properties]=properties [properties]=properties
[modal]="relatedDatasourcesModal"> [modal]="relatedDatasourcesModal">
</relatedDatasourcesTab> </relatedDatasourcesTab>
</div> </div>
</ng-container> </ng-container>
<!--Statistics--> <!--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)">
<div id="statistics" class="landing-section uk-padding uk-padding-remove-horizontal"> <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> <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, <errorMessages [status]="[fetchPublications.searchUtils.status, fetchDatasets.searchUtils.status,
fetchSoftware.searchUtils.status, fetchOrps.searchUtils.status]" fetchSoftware.searchUtils.status, fetchOrps.searchUtils.status]"
[type]="'statistics'" tab_error_class=true></errorMessages> [type]="'statistics'" tab_error_class=true></errorMessages>
<div *ngIf="statsClicked && <div *ngIf="statsClicked &&
(fetchPublications.searchUtils.status == errorCodes.DONE || fetchDatasets.searchUtils.status == errorCodes.DONE (fetchPublications.searchUtils.status == errorCodes.DONE || fetchDatasets.searchUtils.status == errorCodes.DONE
|| fetchSoftware.searchUtils.status == errorCodes.DONE || fetchOrps.searchUtils.status == errorCodes.DONE)"> || fetchSoftware.searchUtils.status == errorCodes.DONE || fetchOrps.searchUtils.status == errorCodes.DONE)">
<statisticsTab [fetchPublications]="fetchPublications" [fetchDatasets]="fetchDatasets" <statisticsTab [fetchPublications]="fetchPublications" [fetchDatasets]="fetchDatasets"
[fetchSoftware]="fetchSoftware" [fetchOther]="fetchOrps" [fetchSoftware]="fetchSoftware" [fetchOther]="fetchOrps"
[datasourceId]="datasourceId"> [datasourceId]="datasourceId">
</statisticsTab> </statisticsTab>
</div> </div>
</div>
</ng-container>
</div> </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> </ng-container>
</div> </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>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,4 +1,4 @@
import {ChangeDetectorRef, Component, Input, ViewChild} from '@angular/core'; import {ChangeDetectorRef, Component, HostListener, Input, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser'; import {Meta, Title} from '@angular/platform-browser';
@ -29,6 +29,7 @@ import {Subscriber} from "rxjs";
import {TabComponent} from "../../utils/tabs/tab.component"; import {TabComponent} from "../../utils/tabs/tab.component";
import {OpenaireEntities} from "../../utils/properties/searchFields"; import {OpenaireEntities} from "../../utils/properties/searchFields";
declare var ResizeObserver;
@Component({ @Component({
selector: 'dataprovider', selector: 'dataprovider',
@ -41,6 +42,7 @@ export class DataProviderComponent {
@Input() communityId = null; @Input() communityId = null;
public dataProviderInfo: DataProviderInfo; public dataProviderInfo: DataProviderInfo;
public datasourceId: string; public datasourceId: string;
public provenanceUrls: string[] = null;
// Message variables // Message variables
public warningMessage = ""; public warningMessage = "";
@ -122,10 +124,10 @@ export class DataProviderComponent {
public offset: number; public offset: number;
public stickyHeader: boolean = false; public stickyHeader: boolean = false;
public graph_offset: number = 0; public graph_offset: number = 0;
public graph_height: number = 0;
@ViewChild("graph_and_feedback") graph_and_feedback; @ViewChild("graph_and_feedback") graph_and_feedback;
public shouldSticky: boolean = true; public shouldSticky: boolean = true;
private observer: IntersectionObserver;
subscriptions = []; subscriptions = [];
properties: EnvProperties = properties; properties: EnvProperties = properties;
@ -143,7 +145,8 @@ export class DataProviderComponent {
private seoService: SEOService, private seoService: SEOService,
private helper: HelperService, private helper: HelperService,
private _location: Location, private _location: Location,
private indexInfoService: IndexInfoService) { private indexInfoService: IndexInfoService,
private cdr: ChangeDetectorRef) {
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);
@ -190,29 +193,50 @@ export class DataProviderComponent {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
let bottom = document.getElementById('bottom'); let bottom = document.getElementById('bottom');
if(bottom) { if(bottom) {
this.observer = new IntersectionObserver(entries => { let observer = new IntersectionObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
this.shouldSticky = !entry.isIntersecting; this.shouldSticky = !entry.isIntersecting;
}) })
}); });
this.observer.observe(bottom); this.subscriptions.push(observer);
observer.observe(bottom);
}
if(this.graph_and_feedback) {
this.observeGraphAndFeedback();
} }
} }
} }
ngAfterContentChecked() { ngAfterContentChecked() {
if(this.graph_and_feedback && window) { if(this.graph_and_feedback && window) {
this.graph_offset = this.calcGraphOffset(); this.graph_offset = this.calcGraphOffset(this.graph_and_feedback.nativeElement);
} }
} }
calcGraphOffset() {
return window.innerHeight-this.graph_and_feedback.nativeElement.offsetHeight; public observeGraphAndFeedback() {
let resizeObs = new ResizeObserver(entries => {
entries.forEach(entry => {
setTimeout(() => {
// console.log(entry);
this.graph_offset = this.calcGraphOffset(entry.target);
this.cdr.detectChanges();
});
})
});
this.subscriptions.push(resizeObs);
resizeObs.observe(this.graph_and_feedback.nativeElement);
}
calcGraphOffset(element) {
this.graph_height = element.offsetHeight;
return window.innerHeight-this.graph_height;
} }
public initializeValues() { public initializeValues() {
this._numberOfTabs = 0; this._numberOfTabs = 0;
this.tabsAreInitialized = false; this.tabsAreInitialized = false;
this.dataProviderInfo = null; this.dataProviderInfo = null;
this.provenanceUrls = null;
this.aggregationStatusIsInitialized = false; this.aggregationStatusIsInitialized = false;
this.fetchProjects.searchUtils.status = this.errorCodes.LOADING; this.fetchProjects.searchUtils.status = this.errorCodes.LOADING;
this.fetchProjects.searchUtils.totalResults = 0; this.fetchProjects.searchUtils.totalResults = 0;
@ -246,6 +270,8 @@ export class DataProviderComponent {
this.subscriptions.forEach(subscription => { this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) { if (subscription instanceof Subscriber) {
subscription.unsubscribe(); subscription.unsubscribe();
} else if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
subscription.disconnect();
} }
}); });
this.fetchDatasets.clearSubscriptions(); this.fetchDatasets.clearSubscriptions();
@ -254,10 +280,6 @@ export class DataProviderComponent {
this.fetchPublications.clearSubscriptions(); this.fetchPublications.clearSubscriptions();
this.fetchDataproviders.clearSubscriptions(); this.fetchDataproviders.clearSubscriptions();
this.fetchProjects.clearSubscriptions(); this.fetchProjects.clearSubscriptions();
if(this.observer) {
this.observer.disconnect();
}
} }
private getDataProviderInfo(id: string) { private getDataProviderInfo(id: string) {
@ -266,6 +288,7 @@ export class DataProviderComponent {
this.showLoading = true; this.showLoading = true;
this.dataProviderInfo = null; this.dataProviderInfo = null;
this.provenanceUrls = null;
this.showTabs = false; this.showTabs = false;
if (this.datasourceId == null || this.datasourceId == '') { if (this.datasourceId == null || this.datasourceId == '') {
@ -275,6 +298,7 @@ export class DataProviderComponent {
this.subscriptions.push(this._dataproviderService.getDataproviderInfo(this.datasourceId, this.properties).subscribe( this.subscriptions.push(this._dataproviderService.getDataproviderInfo(this.datasourceId, this.properties).subscribe(
data => { data => {
this.dataProviderInfo = data; this.dataProviderInfo = data;
this.getProvenanceUrls();
this.seoService.createLinkForCanonicalURL(this.properties.domain +this.properties.baseLink + this._router.url); this.seoService.createLinkForCanonicalURL(this.properties.domain +this.properties.baseLink + this._router.url);
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
this.getDataProviderAggregationStatus(this.dataProviderInfo.originalId); this.getDataProviderAggregationStatus(this.dataProviderInfo.originalId);
@ -756,4 +780,8 @@ export class DataProviderComponent {
public getKeys( map) { public getKeys( map) {
return Array.from(map.keys()); return Array.from(map.keys());
} }
public getProvenanceUrls() {
this.provenanceUrls = Array.from(this.dataProviderInfo.provenance.values()).map(res => res['url']).reduce((acc, val) => acc.concat(val), []);
}
} }

294
landingPages/organization/organization.component.html
View File

@ -3,10 +3,10 @@
<!-- TODO: Error messages --> <!-- TODO: Error messages -->
<div></div> <div></div>
<div *ngIf="organizationInfo" class="organization"> <div class="organization">
<div *ngIf="!showFeedback" class="uk-grid" uk-grid> <div *ngIf="!showFeedback" class="uk-grid" uk-grid>
<!-- left column --> <!-- left column -->
<div class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color"> <div *ngIf="organizationInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color">
<div class="uk-flex uk-flex-column uk-flex-right landing-sidebar-height uk-sticky" <div class="uk-flex uk-flex-column uk-flex-right landing-sidebar-height uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset"> uk-sticky="bottom: true" [attr.offset]="offset">
<div class="uk-margin-large-bottom uk-align-center"> <div class="uk-margin-large-bottom uk-align-center">
@ -36,19 +36,19 @@
</div> </div>
</div> </div>
<!-- center/right column --> <!-- center/right column -->
<div *ngIf="organizationInfo" class="uk-width-expand uk-padding-remove uk-margin-large-left uk-margin-large-right landing-background-default-color"> <div class="uk-width-expand uk-padding-remove uk-background-default">
<!-- Graph and feedback --> <!-- Graph and feedback -->
<ng-template #graph_and_feedback_template> <ng-template #graph_and_feedback_template>
<div class="uk-flex uk-margin-small-top uk-margin-small-bottom"> <div class="uk-flex uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!organizationInfo">
<!-- Last Index Info--> <!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2 graph"> <div class="uk-width-2-3@m uk-width-1-2 graph">
<icon name="graph" customClass="uk-text-primary"></icon> <icon name="graph" customClass="uk-text-primary"></icon>
<span class="uk-margin-small-left uk-text-baseline"> <span class="uk-margin-small-left uk-text-baseline">
<span class="uk-text-meta">Powered by </span><a href="https://graph.openaire.eu" target="_blank">OpenAIRE Research Graph</a> <span class="uk-text-meta">Powered by </span><a href="https://graph.openaire.eu" target="_blank">OpenAIRE Research Graph</a>
</span> </span>
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta"> <span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta">
. Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span> </span>
</div> </div>
<!--Feedback--> <!--Feedback-->
<div *ngIf="properties.reCaptchaSiteKey" class="uk-width-expand uk-text-right"> <div *ngIf="properties.reCaptchaSiteKey" class="uk-width-expand uk-text-right">
@ -57,133 +57,139 @@
</div> </div>
</div> </div>
</ng-template> </ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-text-xsmall uk-visible@m" uk-sticky="bottom: true;" [attr.offset]="graph_offset"> <div #graph_and_feedback id="graph_and_feedback" class="uk-padding uk-padding-remove-vertical uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container> <ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div> </div>
<!-- Main content -->
<div class="uk-margin-medium-top"> <div class="uk-margin-large-left uk-margin-large-right">
<!-- Schema --> <ng-container *ngIf="organizationInfo">
<schema2jsonld *ngIf="organizationInfo" [data]=organizationInfo <!-- Main content -->
[URL]="properties.domain + properties.baseLink+this.properties.searchLinkToOrganization+organizationInfo.relcanId" <div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
type="organization"> <!-- Schema -->
</schema2jsonld> <schema2jsonld *ngIf="organizationInfo" [data]=organizationInfo
<!-- Helper --> [URL]="properties.domain + properties.baseLink+this.properties.searchLinkToOrganization+organizationInfo.relcanId"
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" type="organization">
[texts]="pageContents['top']"></helper> </schema2jsonld>
<!-- Versions --> <!-- Helper -->
<span *ngIf="organizationInfo.deletedByInferenceIds" class="uk-text-primary uk-flex uk-flex-middle"> <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
<icon flex="true" ratio="0.8" name="auto_awesome_motion"></icon> [texts]="pageContents['top']"></helper>
<a (click)="openDeletedByInference()" class="uk-text-primary uk-text-small uk-margin-small-left"> <!-- Versions -->
View all {{organizationInfo.deletedByInferenceIds.length}} versions <span *ngIf="organizationInfo.deletedByInferenceIds" class="uk-text-primary uk-flex uk-flex-middle">
</a> <icon flex="true" ratio="0.8" name="auto_awesome_motion"></icon>
</span> <a (click)="openDeletedByInference()" class="uk-text-primary uk-text-small uk-margin-small-left">
<!-- Landing header --> View all {{organizationInfo.deletedByInferenceIds.length}} versions
<landing-header [properties]="properties" [title]="organizationInfo.title.name" </a>
[subTitle]="(organizationInfo.name </span>
&& organizationInfo.title.name !== organizationInfo.name)?organizationInfo.name:null" <!-- Landing header -->
[entityType]="'organization'"> <landing-header [properties]="properties" [title]="organizationInfo.title.name"
</landing-header> [subTitle]="(organizationInfo.name
<!-- Basic info --> && organizationInfo.title.name !== organizationInfo.name)?organizationInfo.name:null"
<div class="uk-text-small"> [entityType]="'organization'">
<!-- Web Page --> </landing-header>
<div *ngIf="organizationInfo.title && organizationInfo.title.url" class="uk-margin-small-bottom"> <!-- Basic info -->
<span class="uk-text-meta">Web page: </span> <div class="uk-text-small">
<a [href]="organizationInfo.title.url" target="_blank" class="uk-button uk-button-text uk-text-lowercase uk-text-normal custom-external"> <!-- Web Page -->
{{organizationInfo.title.url}} <div *ngIf="organizationInfo.title && organizationInfo.title.url" class="uk-margin-small-bottom uk-display-inline-block">
</a> <span class="uk-text-meta">Web page: </span>
</div> <a [href]="organizationInfo.title.url" target="_blank" class="uk-button uk-button-text uk-text-lowercase uk-text-normal custom-external">
<!-- Country --> {{organizationInfo.title.url}}
<div *ngIf="organizationInfo.country && !organizationInfo.country.toLowerCase().includes('unknown')"> </a>
<span class="uk-text-meta">Country: </span>{{organizationInfo.country}} </div>
</div> <!-- Country -->
</div> <div *ngIf="organizationInfo.country && !organizationInfo.country.toLowerCase().includes('unknown')">
</div> <span class="uk-text-meta">Country: </span>{{organizationInfo.country}}
<!-- Tabs section --> </div>
<div id="main-tabs-div" uk-sticky="bottom: true; media: @m" [attr.offset]="offset" cls-active="active"> </div>
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom"> </div>
<showTitle *ngIf="stickyHeader" [titleName]="organizationInfo.title.name" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle> <!-- Tabs section -->
<my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [offsetForSticky]="offset" [(isSticky)]="stickyHeader"> <div id="main-tabs-div" uk-sticky="bottom: true; media: @m" [attr.offset]="offset" cls-active="active">
<my-tab [active]="true" [tabTitle]="'Funding / ' +openaireEntities.PROJECTS" [tabId]="'projects'" <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
[tabNumber]="fetchProjects.searchUtils.totalResults > 0 ? fetchProjects.searchUtils.totalResults : ''"> <showTitle *ngIf="stickyHeader" [titleName]="organizationInfo.title.name" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>
</my-tab> <my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [offsetForSticky]="offset" [(isSticky)]="stickyHeader">
<my-tab *ngIf="fetchDataproviders && fetchDataproviders.searchUtils.totalResults > 0" <my-tab [active]="true" [tabTitle]="'Funding / ' +openaireEntities.PROJECTS" [tabId]="'projects'"
[tabTitle]="openaireEntities.DATASOURCES" [tabId]="'dataProviders'" [tabNumber]="fetchProjects.searchUtils.totalResults > 0 ? fetchProjects.searchUtils.totalResults : ''">
[tabNumber]="fetchDataproviders.searchUtils.totalResults"> </my-tab>
</my-tab> <my-tab *ngIf="fetchDataproviders && fetchDataproviders.searchUtils.totalResults > 0"
<my-tab *ngIf="fetchPublications && fetchPublications.searchUtils.totalResults > 0" [tabTitle]="openaireEntities.DATASOURCES" [tabId]="'dataProviders'"
[tabNumber]="fetchPublications.searchUtils.totalResults" [tabNumber]="fetchDataproviders.searchUtils.totalResults">
[tabTitle]="openaireEntities.PUBLICATIONS" [tabId]="'publications'"> </my-tab>
</my-tab> <my-tab *ngIf="fetchPublications && fetchPublications.searchUtils.totalResults > 0"
<my-tab *ngIf="fetchDatasets && fetchDatasets.searchUtils.totalResults > 0" [tabNumber]="fetchPublications.searchUtils.totalResults"
[tabNumber]="fetchDatasets.searchUtils.totalResults" [tabTitle]="openaireEntities.PUBLICATIONS" [tabId]="'publications'">
[tabTitle]="openaireEntities.DATASETS" [tabId]="'datasets'"> </my-tab>
</my-tab> <my-tab *ngIf="fetchDatasets && fetchDatasets.searchUtils.totalResults > 0"
<my-tab *ngIf="fetchSoftware && fetchSoftware.searchUtils.totalResults > 0" [tabNumber]="fetchDatasets.searchUtils.totalResults"
[tabNumber]="fetchSoftware.searchUtils.totalResults" [tabTitle]="openaireEntities.DATASETS" [tabId]="'datasets'">
[tabTitle]="openaireEntities.SOFTWARE" [tabId]="'software'"> </my-tab>
</my-tab> <my-tab *ngIf="fetchSoftware && fetchSoftware.searchUtils.totalResults > 0"
<my-tab *ngIf="fetchOrps && fetchOrps.searchUtils.totalResults > 0" [tabNumber]="fetchSoftware.searchUtils.totalResults"
[tabNumber]="fetchOrps.searchUtils.totalResults" [tabTitle]="openaireEntities.SOFTWARE" [tabId]="'software'">
[tabTitle]="openaireEntities.OTHER" [tabId]="'other'"> </my-tab>
</my-tab> <my-tab *ngIf="fetchOrps && fetchOrps.searchUtils.totalResults > 0"
</my-tabs> [tabNumber]="fetchOrps.searchUtils.totalResults"
</div> [tabTitle]="openaireEntities.OTHER" [tabId]="'other'">
</div> </my-tab>
<!-- Tabs content section --> </my-tabs>
<div id="landing-sections" class="uk-text-small"> </div>
<div id="projects" class="landing-section landing-section-height-auto uk-padding uk-padding-remove-horizontal"> </div>
<projectsInModal [fetchProjects]="fetchProjects" <!-- Tabs content section -->
[organizationId]="organizationId" [properties]=properties> <div id="landing-sections" class="uk-text-small">
</projectsInModal> <div id="projects" class="landing-section landing-section-height-auto uk-padding uk-padding-remove-horizontal">
</div> <projectsInModal [fetchProjects]="fetchProjects"
<div *ngIf="fetchDataproviders && fetchDataproviders.searchUtils.totalResults > 0" [organizationId]="organizationId" [properties]=properties>
id="dataProviders" class="landing-section uk-padding uk-padding-remove-horizontal"> </projectsInModal>
<search-tab [fetch]="fetchDataproviders" resultType="dataprovider" </div>
[params]="getParamsForSearchLink()" <div *ngIf="fetchDataproviders && fetchDataproviders.searchUtils.totalResults > 0"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedDataProviders" id="dataProviders" class="landing-section uk-padding uk-padding-remove-horizontal">
[properties]="properties"> <search-tab [fetch]="fetchDataproviders" resultType="dataprovider"
</search-tab> [params]="getParamsForSearchLink()"
</div> [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedDataProviders"
<div *ngIf="fetchPublications && fetchPublications.searchUtils.totalResults > 0" [properties]="properties">
id="publications" class="landing-section uk-padding uk-padding-remove-horizontal"> </search-tab>
<search-tab [fetch]="fetchPublications" resultType="publication" </div>
[params]="getParamsForSearchLink('publications')" <div *ngIf="fetchPublications && fetchPublications.searchUtils.totalResults > 0"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults" id="publications" class="landing-section uk-padding uk-padding-remove-horizontal">
[properties]="properties"> <search-tab [fetch]="fetchPublications" resultType="publication"
</search-tab> [params]="getParamsForSearchLink('publications')"
</div> [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
<div *ngIf="fetchDatasets && fetchDatasets.searchUtils.totalResults > 0" [properties]="properties">
id="datasets" class="landing-section uk-padding uk-padding-remove-horizontal"> </search-tab>
<search-tab [fetch]="fetchDatasets" resultType="dataset" </div>
[params]="getParamsForSearchLink('datasets')" <div *ngIf="fetchDatasets && fetchDatasets.searchUtils.totalResults > 0"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults" id="datasets" class="landing-section uk-padding uk-padding-remove-horizontal">
[properties]="properties"> <search-tab [fetch]="fetchDatasets" resultType="dataset"
</search-tab> [params]="getParamsForSearchLink('datasets')"
</div> [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
<div *ngIf="fetchSoftware && fetchSoftware.searchUtils.totalResults > 0" [properties]="properties">
id="software" class="landing-section uk-padding uk-padding-remove-horizontal"> </search-tab>
<search-tab [fetch]="fetchSoftware" resultType="software" </div>
[params]="getParamsForSearchLink('software')" <div *ngIf="fetchSoftware && fetchSoftware.searchUtils.totalResults > 0"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults" id="software" class="landing-section uk-padding uk-padding-remove-horizontal">
[properties]="properties"> <search-tab [fetch]="fetchSoftware" resultType="software"
</search-tab> [params]="getParamsForSearchLink('software')"
</div> [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
<div *ngIf="fetchOrps && fetchOrps.searchUtils.totalResults > 0" [properties]="properties">
id="other" class="landing-section uk-padding uk-padding-remove-horizontal"> </search-tab>
<search-tab [fetch]="fetchOrps" resultType="other" </div>
[params]="getParamsForSearchLink('other')" <div *ngIf="fetchOrps && fetchOrps.searchUtils.totalResults > 0"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults" id="other" class="landing-section uk-padding uk-padding-remove-horizontal">
[properties]="properties"> <search-tab [fetch]="fetchOrps" resultType="other"
</search-tab> [params]="getParamsForSearchLink('other')"
</div> [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
</div> [properties]="properties">
<div class="uk-text-xsmall uk-hidden@m"> </search-tab>
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container> </div>
</div> </div>
<!-- Helper --> <div class="uk-text-xsmall uk-hidden@m">
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0" <ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
[texts]="pageContents['bottom']"> </div>
</helper> <!-- Helper -->
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']">
</helper>
</ng-container>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -206,11 +212,11 @@
</organizationsDeletedByInference> </organizationsDeletedByInference>
</modal-alert> </modal-alert>
<!-- Share --> <!-- Share -->
<modal-alert #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle"> <modal-alert *ngIf="organizationInfo" #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
<addThis></addThis> <addThis></addThis>
</modal-alert> </modal-alert>
<!-- Download --> <!-- Download -->
<modal-alert #downloadReportsModal large="true"> <modal-alert *ngIf="organizationInfo" #downloadReportsModal large="true">
<div class="uk-padding-small uk-margin-small-left uk-margin-small-right"> <div class="uk-padding-small uk-margin-small-left uk-margin-small-right">
<div class="uk-padding-small uk-padding-remove-vertical"> <div class="uk-padding-small uk-padding-remove-vertical">
<div class="uk-grid uk-grid-divider uk-child-width-1-2@m" uk-grid uk-height-match=".subtitle"> <div class="uk-grid uk-grid-divider uk-child-width-1-2@m" uk-grid uk-height-match=".subtitle">
@ -223,7 +229,7 @@
title="No report available"> title="No report available">
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal" <div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
[class]="total > 0 ? '' : 'uk-disabled uk-text-muted'" [class]="total > 0 ? '' : 'uk-disabled uk-text-muted'"
(click)="downloadFile(getCSVAffiliated('results'), 'results' + '-report')"> (click)="downloadFile(getCSVAffiliated('results'), openaireEntities.RESULTS_FILE + '-report')">
<icon name="download" flex="true" class="uk-margin-small-right"></icon> <icon name="download" flex="true" class="uk-margin-small-right"></icon>
all {{openaireEntities.RESULTS}} (CSV) all {{openaireEntities.RESULTS}} (CSV)
</div> </div>
@ -232,7 +238,7 @@
title="No report available"> title="No report available">
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal" <div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
[class]="fetchPublications.searchUtils.totalResults > 0 ? '' : 'uk-disabled uk-text-muted'" [class]="fetchPublications.searchUtils.totalResults > 0 ? '' : 'uk-disabled uk-text-muted'"
(click)="downloadFile(getCSVAffiliated('publications'), 'publications' + '-report')"> (click)="downloadFile(getCSVAffiliated('publications'), openaireEntities.PUBLICATIONS_FILE + '-report')">
<icon name="download" flex="true" class="uk-margin-small-right"></icon> <icon name="download" flex="true" class="uk-margin-small-right"></icon>
{{openaireEntities.PUBLICATIONS}} (CSV) {{openaireEntities.PUBLICATIONS}} (CSV)
</div> </div>
@ -241,7 +247,7 @@
title="No report available"> title="No report available">
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal" <div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
[class]="fetchDatasets.searchUtils.totalResults > 0 ? '' : 'uk-disabled uk-text-muted'" [class]="fetchDatasets.searchUtils.totalResults > 0 ? '' : 'uk-disabled uk-text-muted'"
(click)="downloadFile(getCSVAffiliated('datasets'), 'datasets' + '-report')"> (click)="downloadFile(getCSVAffiliated('datasets'), openaireEntities.DATASETS_FILE + '-report')">
<icon name="download" flex="true" class="uk-margin-small-right"></icon> <icon name="download" flex="true" class="uk-margin-small-right"></icon>
{{openaireEntities.DATASETS}} (CSV) {{openaireEntities.DATASETS}} (CSV)
</div> </div>
@ -250,7 +256,7 @@
title="No report available"> title="No report available">
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal" <div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
[class]="fetchSoftware.searchUtils.totalResults > 0 ? '' : 'uk-disabled uk-text-muted'" [class]="fetchSoftware.searchUtils.totalResults > 0 ? '' : 'uk-disabled uk-text-muted'"
(click)="downloadFile(getCSVAffiliated('software'), 'software' + '-report')"> (click)="downloadFile(getCSVAffiliated('software'), openaireEntities.SOFTWARE_FILE + '-report')">
<icon name="download" flex="true" class="uk-margin-small-right"></icon> <icon name="download" flex="true" class="uk-margin-small-right"></icon>
{{openaireEntities.SOFTWARE}} (CSV) {{openaireEntities.SOFTWARE}} (CSV)
</div> </div>
@ -259,7 +265,7 @@
title="No report available"> title="No report available">
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal" <div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
[class]="fetchOrps.searchUtils.totalResults > 0 ? '' : 'uk-disabled uk-text-muted'" [class]="fetchOrps.searchUtils.totalResults > 0 ? '' : 'uk-disabled uk-text-muted'"
(click)="downloadFile(getCSVAffiliated('other'), 'other' + '-report')"> (click)="downloadFile(getCSVAffiliated('other'), openaireEntities.OTHER_FILE + '-report')">
<icon name="download" flex="true" class="uk-margin-small-right"></icon> <icon name="download" flex="true" class="uk-margin-small-right"></icon>
{{openaireEntities.OTHER}} (CSV) {{openaireEntities.OTHER}} (CSV)
</div> </div>
@ -280,14 +286,14 @@
<ul class="uk-list uk-margin-remove-bottom"> <ul class="uk-list uk-margin-remove-bottom">
<li> <li>
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal" <div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
(click)="downloadFile(getFunderProjects(), funder.name + '-projects-report')"> (click)="downloadFile(getFunderProjects(), funder.name + '-'+openaireEntities.PROJECTS_FILE+'-report')">
<icon name="download" flex="true" class="uk-margin-small-right"></icon> <icon name="download" flex="true" class="uk-margin-small-right"></icon>
{{openaireEntities.PROJECTS}} (CSV) {{openaireEntities.PROJECTS}} (CSV)
</div> </div>
</li> </li>
<li *ngFor="let contentType of contentTypes"> <li *ngFor="let contentType of contentTypes">
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal" <div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
(click)="confirmOpenApplyAll(contentType[0])"> (click)="confirmOpenApplyAll(contentType[0], contentType[2])">
<icon name="download" flex="true" class="uk-margin-small-right"></icon> <icon name="download" flex="true" class="uk-margin-small-right"></icon>
{{contentType[1]}} (CSV) {{contentType[1]}} (CSV)
</div> </div>

82
landingPages/organization/organization.component.ts
View File

@ -1,4 +1,4 @@
import {Component, ElementRef, Input, ViewChild} from '@angular/core'; import {ChangeDetectorRef, Component, ElementRef, Input, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser'; import {Meta, Title} from '@angular/platform-browser';
import {OrganizationService} from '../../services/organization.service'; import {OrganizationService} from '../../services/organization.service';
@ -27,6 +27,8 @@ import {properties} from "../../../../environments/environment";
import {OpenaireEntities} from '../../utils/properties/searchFields'; import {OpenaireEntities} from '../../utils/properties/searchFields';
import {Option} from '../../sharedComponents/input/input.component'; import {Option} from '../../sharedComponents/input/input.component';
declare var ResizeObserver;
@Component({ @Component({
selector: 'organization', selector: 'organization',
templateUrl: 'organization.component.html', templateUrl: 'organization.component.html',
@ -84,13 +86,14 @@ export class OrganizationComponent {
public divContents = null; public divContents = null;
// Helper variables to specify funder in downloadPublicationsFile function // Helper variables to specify funder in downloadPublicationsFile function
public contentTypes: [string, string][] = [ public contentTypes: [string, string, string][] = [
['results', 'all ' + OpenaireEntities.RESULTS], ['results', 'all ' + OpenaireEntities.RESULTS, OpenaireEntities.RESULTS_FILE],
['publications', OpenaireEntities.PUBLICATIONS], ['publications', OpenaireEntities.PUBLICATIONS, OpenaireEntities.PUBLICATIONS_FILE],
['datasets', OpenaireEntities.DATASETS], ['datasets', OpenaireEntities.DATASETS, OpenaireEntities.DATASETS_FILE],
['software', OpenaireEntities.SOFTWARE], ['software', OpenaireEntities.SOFTWARE, OpenaireEntities.SOFTWARE_FILE],
['other', OpenaireEntities.OTHER], ['other', OpenaireEntities.OTHER, OpenaireEntities.OTHER_FILE],
]; ];
public contentFileName: string = '';
public funderContentType: string = ''; public funderContentType: string = '';
public funder: any = ""; public funder: any = "";
private funderId: string; private funderId: string;
@ -101,7 +104,10 @@ export class OrganizationComponent {
public offset: number; public offset: number;
public stickyHeader: boolean = false; public stickyHeader: boolean = false;
public graph_offset: number = 0; public graph_offset: number = 0;
@ViewChild("graph_and_feedback") graph_and_feedback; public graph_height: number = 0;
@ViewChild("graph_and_feedback") graph_and_feedback;
public shouldSticky: boolean = true;
subscriptions = []; subscriptions = [];
innerReportSubscriptions = []; innerReportSubscriptions = [];
@ -131,7 +137,8 @@ export class OrganizationComponent {
private helper: HelperService, private helper: HelperService,
private seoService: SEOService, private seoService: SEOService,
private _location: Location, private _location: Location,
private indexInfoService: IndexInfoService) { private indexInfoService: IndexInfoService,
private cdr: ChangeDetectorRef) {
this.fetchProjects = new FetchProjects(this._searchProjectsService); this.fetchProjects = new FetchProjects(this._searchProjectsService);
this.fetchDataproviders = new FetchDataproviders(this._searchDataprovidersService); this.fetchDataproviders = new FetchDataproviders(this._searchDataprovidersService);
this.fetchPublications = new FetchResearchResults(this._searchResearchResultsService); this.fetchPublications = new FetchResearchResults(this._searchResearchResultsService);
@ -179,16 +186,50 @@ export class OrganizationComponent {
//this.csvAffiliatedPublications = this.downloadURLAPI + "?format=csv&type=publications&fq=(((oaftype exact result) and (resulttypeid exact publication)) and (relorganizationid exact \"" + this.organizationId + "\"))"; //this.csvAffiliatedPublications = this.downloadURLAPI + "?format=csv&type=publications&fq=(((oaftype exact result) and (resulttypeid exact publication)) and (relorganizationid exact \"" + this.organizationId + "\"))";
this.csvProjectParamsHead = 'format=csv&type=projects&fq=((funder exact "'; this.csvProjectParamsHead = 'format=csv&type=projects&fq=((funder exact "';
//this.csvPublicationParamsHead = 'format=csv-special&type=publications&page=0&query=((((oaftype exact result) and (resulttypeid exact publication)) and (funderid exact '; //this.csvPublicationParamsHead = 'format=csv-special&type=publications&page=0&query=((((oaftype exact result) and (resulttypeid exact publication)) and (funderid exact ';
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
} }
ngAfterContentChecked() { ngAfterViewInit() {
if(this.graph_and_feedback && window) { if (typeof document !== 'undefined') {
this.graph_offset = this.calcGraphOffset(); this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
let bottom = document.getElementById('bottom');
if(bottom) {
let observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
this.shouldSticky = !entry.isIntersecting;
})
});
this.subscriptions.push(observer);
observer.observe(bottom);
}
if(this.graph_and_feedback) {
this.observeGraphAndFeedback();
}
} }
} }
calcGraphOffset() {
return window.innerHeight-this.graph_and_feedback.nativeElement.offsetHeight; ngAfterContentChecked() {
if(this.graph_and_feedback && window) {
this.graph_offset = this.calcGraphOffset(this.graph_and_feedback.nativeElement);
}
}
public observeGraphAndFeedback() {
let resizeObs = new ResizeObserver(entries => {
entries.forEach(entry => {
setTimeout(() => {
// console.log(entry);
this.graph_offset = this.calcGraphOffset(entry.target);
this.cdr.detectChanges();
});
})
});
this.subscriptions.push(resizeObs);
resizeObs.observe(this.graph_and_feedback.nativeElement);
}
calcGraphOffset(element) {
this.graph_height = element.offsetHeight;
return window.innerHeight-this.graph_height;
} }
private getPageContents() { private getPageContents() {
@ -211,6 +252,8 @@ export class OrganizationComponent {
this.subscriptions.forEach(subscription => { this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) { if (subscription instanceof Subscriber) {
subscription.unsubscribe(); subscription.unsubscribe();
} else if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
subscription.disconnect();
} }
}); });
this.innerReportSubscriptions.forEach(subscription => { this.innerReportSubscriptions.forEach(subscription => {
@ -419,7 +462,7 @@ export class OrganizationComponent {
let title: boolean = false; let title: boolean = false;
let title_index: number = 0; let title_index: number = 0;
let filename: string = 'funder-project-' + this.funderContentType + '-report'; let filename: string = 'funder-project-' + this.contentFileName + '-report';
this.subscriptions.push(this._searchProjectsService.getProjectsForOrganizations(this.organizationId, ' and (funder exact "' + this.encodeURI(this.funderId) + '" ) ', 1, this.funderCount, [], this.properties).subscribe( this.subscriptions.push(this._searchProjectsService.getProjectsForOrganizations(this.organizationId, ' and (funder exact "' + this.encodeURI(this.funderId) + '" ) ', 1, this.funderCount, [], this.properties).subscribe(
data => { data => {
@ -570,7 +613,7 @@ export class OrganizationComponent {
} }
} }
public confirmOpenApplyAll(contentType: string) { public confirmOpenApplyAll(contentType: string, contentFileName: string) {
this.alertApplyAll.cancelButton = true; this.alertApplyAll.cancelButton = true;
this.alertApplyAll.okButton = true; this.alertApplyAll.okButton = true;
this.alertApplyAll.alertTitle = "CSV FILE"; this.alertApplyAll.alertTitle = "CSV FILE";
@ -581,6 +624,7 @@ export class OrganizationComponent {
this.funderId = this.funder.id; this.funderId = this.funder.id;
this.funderCount = this.funder.number; this.funderCount = this.funder.number;
this.funderContentType = contentType; this.funderContentType = contentType;
this.contentFileName = contentFileName;
} }
public confirmCloseApplyAll() { public confirmCloseApplyAll() {
@ -627,10 +671,6 @@ export class OrganizationComponent {
return this.downloadURLAPI + '?' + this.csvProjectParamsHead + encodeURI(this.funder.id) + this.csvParamsTail; return this.downloadURLAPI + '?' + this.csvProjectParamsHead + encodeURI(this.funder.id) + this.csvParamsTail;
} }
open(value: any) {
console.log(value);
}
openDownloadReportsModal() { openDownloadReportsModal() {
this.funder = this.fetchProjects.funders[0]; this.funder = this.fetchProjects.funders[0];
this.downloadReportsModal.cancelButton = false; this.downloadReportsModal.cancelButton = false;

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

@ -8,11 +8,11 @@
</div> </div>
</div> </div>
<div *ngIf="projectInfo" class="project"> <div class="project">
<div *ngIf="!showFeedback" class="uk-grid"> <div *ngIf="!showFeedback" class="uk-grid">
<!-- left box - actions --> <!-- left box - actions -->
<div class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color"> <div *ngIf="projectInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color">
<div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky" <div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset"> uk-sticky="bottom: true" [attr.offset]="offset">
<div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between"> <div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
@ -82,18 +82,18 @@
</div> </div>
<!-- center box--> <!-- center box-->
<div *ngIf="projectInfo" class="uk-width-expand uk-padding-remove uk-margin-large-left uk-margin-large-right landing-background-default-color"> <div class="uk-width-expand uk-padding-remove uk-background-default">
<ng-template #graph_and_feedback_template> <ng-template #graph_and_feedback_template>
<div class="uk-flex uk-margin-small-top uk-margin-small-bottom"> <div class="uk-flex uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!projectInfo">
<!-- Last Index Info--> <!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2 graph"> <div class="uk-width-2-3@m uk-width-1-2 graph">
<icon name="graph" customClass="uk-text-primary"></icon> <icon name="graph" customClass="uk-text-primary"></icon>
<span class="uk-margin-small-left uk-text-baseline"> <span class="uk-margin-small-left uk-text-baseline">
<span class="uk-text-meta">Powered by </span><a href="https://graph.openaire.eu" target="_blank">OpenAIRE Research Graph</a> <span class="uk-text-meta">Powered by </span><a href="https://graph.openaire.eu" target="_blank">OpenAIRE Research Graph</a>
</span> </span>
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta"> <span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta">
. Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span> </span>
</div> </div>
<!--Feedback--> <!--Feedback-->
<div *ngIf="properties.reCaptchaSiteKey" class="uk-width-expand uk-text-right"> <div *ngIf="properties.reCaptchaSiteKey" class="uk-width-expand uk-text-right">
@ -103,312 +103,316 @@
</div> </div>
</ng-template> </ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-text-xsmall uk-visible@m" <div #graph_and_feedback id="graph_and_feedback" class="uk-padding uk-padding-remove-vertical uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset"> uk-sticky="bottom: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container> <ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div> </div>
<div class="uk-margin-medium-top"> <div class="uk-margin-large-left uk-margin-large-right">
<!-- schema.org--> <ng-container *ngIf="projectInfo">
<schema2jsonld [data]=projectInfo <div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
[URL]="properties.domain+properties.baseLink+properties.searchLinkToProject+projectId" <!-- schema.org-->
type="project"></schema2jsonld> <schema2jsonld [data]=projectInfo
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" [URL]="properties.domain+properties.baseLink+properties.searchLinkToProject+projectId"
[texts]="pageContents['top']"></helper> type="project"></schema2jsonld>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<landing-header [properties]="properties" [title]="projectName" <landing-header [properties]="properties" [title]="projectName"
[subTitle]="projectInfo.acronym ? projectInfo.title : ''" [subTitle]="projectInfo.acronym ? projectInfo.title : ''"
[entityType]="'project'" [entityType]="'project'"
[startDate]="projectInfo.startDate" [startDate]="projectInfo.startDate"
[endDate]="projectInfo.endDate" [endDate]="projectInfo.endDate"
[status]="projectInfo.status"> [status]="projectInfo.status">
</landing-header> </landing-header>
<!-- Labels --> <!-- Labels -->
<div class="uk-margin-bottom"> <div class="uk-margin-bottom uk-margin-remove-left uk-grid uk-grid-small uk-flex-middle" uk-grid>
<ng-container *ngIf="projectInfo.openAccessMandatePublications != undefined && projectInfo.openAccessMandatePublications && projectInfo.openAccessMandateDatasets != undefined && projectInfo.openAccessMandateDatasets"> <ng-container *ngIf="projectInfo.openAccessMandatePublications != undefined && projectInfo.openAccessMandatePublications && projectInfo.openAccessMandateDatasets != undefined && projectInfo.openAccessMandateDatasets">
<span class="uk-label uk-label-success uk-text-truncate" <span class="uk-label uk-label-success uk-text-truncate"
title="Open Access mandate for {{openaireEntities.PUBLICATIONS}} and {{openaireEntities.DATASETS}}"> title="Open Access mandate for {{openaireEntities.PUBLICATIONS}} and {{openaireEntities.DATASETS}}">
Open Access mandate for {{openaireEntities.PUBLICATIONS}} and {{openaireEntities.DATASETS}} Open Access mandate for {{openaireEntities.PUBLICATIONS}} and {{openaireEntities.DATASETS}}
</span>&#160; </span>&#160;
</ng-container> </ng-container>
<ng-container *ngIf="projectInfo.openAccessMandatePublications != undefined && projectInfo.openAccessMandatePublications && (projectInfo.openAccessMandateDatasets == undefined || !projectInfo.openAccessMandateDatasets)"> <ng-container *ngIf="projectInfo.openAccessMandatePublications != undefined && projectInfo.openAccessMandatePublications && (projectInfo.openAccessMandateDatasets == undefined || !projectInfo.openAccessMandateDatasets)">
<span class="uk-label uk-label-success uk-text-truncate" title="Open Access mandate for {{openaireEntities.PUBLICATIONS}}"> <span class="uk-label uk-label-success uk-text-truncate" title="Open Access mandate for {{openaireEntities.PUBLICATIONS}}">
Open Access mandate for {{openaireEntities.PUBLICATIONS}} Open Access mandate for {{openaireEntities.PUBLICATIONS}}
</span>&#160; </span>&#160;
</ng-container> </ng-container>
<ng-container *ngIf="projectInfo.openAccessMandateDatasets != undefined && projectInfo.openAccessMandateDatasets && (projectInfo.openAccessMandatePublications == undefined || !projectInfo.openAccessMandatePublications)"> <ng-container *ngIf="projectInfo.openAccessMandateDatasets != undefined && projectInfo.openAccessMandateDatasets && (projectInfo.openAccessMandatePublications == undefined || !projectInfo.openAccessMandatePublications)">
<span class="uk-label uk-label-success uk-text-truncate" title="Open Access mandate for {{openaireEntities.DATASETS}}"> <span class="uk-label uk-label-success uk-text-truncate" title="Open Access mandate for {{openaireEntities.DATASETS}}">
Open Access mandate for {{openaireEntities.DATASETS}} Open Access mandate for {{openaireEntities.DATASETS}}
</span>&#160; </span>&#160;
</ng-container> </ng-container>
<ng-container *ngIf="projectInfo.funding && projectInfo.funding.funderName"> <ng-container *ngIf="projectInfo.funding && projectInfo.funding.funderName">
<span class="uk-label custom-label label-funder" title="Funder"> <span class="uk-label custom-label label-funder" title="Funder">
{{projectInfo.funding.funderName}} {{projectInfo.funding.funderName}}
</span>&#160; </span>&#160;
</ng-container> </ng-container>
<ng-container *ngIf="projectInfo.specialClause39"> <ng-container *ngIf="projectInfo.specialClause39">
<span class="uk-label custom-label label-sc39" title="Special Clause 39"> <span class="uk-label custom-label label-sc39" title="Special Clause 39">
Special Clause 39 Special Clause 39
</span>&#160; </span>&#160;
</ng-container> </ng-container>
</div>
<div class="uk-text-small">
<div *ngIf="projectInfo.funding" class="uk-margin-bottom">
<div class="uk-margin-small-bottom">
<span *ngIf="projectInfo.funding.funderName" class="uk-margin-right">
<span class="uk-text-meta">Funder: </span>
<span class="uk-text-bold">{{projectInfo.funding.funderName}}</span>
</span>
<span *ngIf="projectInfo.funding.code" class="uk-margin-right uk-display-inline-block">
<span class="uk-text-meta">Project code: </span>
{{projectInfo.funding.code}}
</span>
<span *ngIf="projectInfo.funding.callIdentifier" class="uk-display-inline-block">
<span class="uk-text-meta">Call for proposal: </span>
{{projectInfo.funding.callIdentifier}}
</span>
</div> </div>
<div> <div class="uk-text-small">
<span *ngIf="projectInfo.funding.fundingStream" class="uk-margin-right"> <div *ngIf="projectInfo.funding" class="uk-margin-bottom">
<span class="uk-text-meta">Funded under: </span> <div class="uk-margin-small-bottom">
{{projectInfo.funding.fundingStream}} <span *ngIf="projectInfo.funding.funderName" class="uk-margin-right">
</span> <span class="uk-text-meta">Funder: </span>
<span *ngIf="projectInfo.funding.budget" class="uk-margin-right uk-display-inline-block"> <span class="uk-text-bold">{{projectInfo.funding.funderName}}</span>
<span class="uk-text-meta">Overall Budget: </span> </span>
{{projectInfo.funding.budget | number}} <span *ngIf="projectInfo.funding.code" class="uk-margin-right uk-display-inline-block">
<span *ngIf="projectInfo.funding.currency">{{projectInfo.funding.currency}}</span> <span class="uk-text-meta">Project code: </span>
</span> {{projectInfo.funding.code}}
<span *ngIf="projectInfo.funding.contribution" class="uk-display-inline-block"> </span>
<span class="uk-text-meta">Funder Contribution: </span> <span *ngIf="projectInfo.funding.callIdentifier" class="uk-display-inline-block">
{{projectInfo.funding.contribution | number}} <span class="uk-text-meta">Call for proposal: </span>
<span *ngIf="projectInfo.funding.currency">{{projectInfo.funding.currency}}</span> {{projectInfo.funding.callIdentifier}}
</span> </span>
</div> </div>
</div> <div>
<div *ngIf="projectInfo.status" class="uk-margin-right"> <span *ngIf="projectInfo.funding.fundingStream" class="uk-margin-right">
<span> <span class="uk-text-meta">Funded under: </span>
<span class="uk-text-meta">Status: </span> {{projectInfo.funding.fundingStream}}
<span class="uk-text-secondary">{{projectInfo.status}}</span> </span>
</span> <span *ngIf="projectInfo.funding.budget" class="uk-margin-right uk-display-inline-block">
</div> <span class="uk-text-meta">Overall Budget: </span>
<div *ngIf="projectInfo.startDate || projectInfo.endDate" class="uk-width-large uk-margin-bottom"> {{projectInfo.funding.budget | number}}
<progress *ngIf="projectInfo.startDate && projectInfo.endDate" <span *ngIf="projectInfo.funding.currency">{{projectInfo.funding.currency}}</span>
class="uk-progress uk-box-shadow-inner uk-margin-small-top uk-margin-small-bottom" </span>
[value]="(projectInfo.currentDate > projectInfo.startDate ? projectInfo.currentDate-projectInfo.startDate : 0)" <span *ngIf="projectInfo.funding.contribution" class="uk-display-inline-block">
[max]="projectInfo.endDate-projectInfo.startDate"> <span class="uk-text-meta">Funder Contribution: </span>
</progress> {{projectInfo.funding.contribution | number}}
<div class="uk-grid"> <span *ngIf="projectInfo.funding.currency">{{projectInfo.funding.currency}}</span>
<span *ngIf="projectInfo.startDate" class="uk-width-1-2 uk-text-meta"> </span>
{{projectInfo.startDate | date: 'dd MMM yyyy'}} (Started) </div>
</span>
<span *ngIf="projectInfo.endDate"
[class]="'uk-text-meta uk-width-1-2 ' + (projectInfo.startDate ? 'uk-text-right' : '')">
{{projectInfo.endDate | date: 'dd MMM yyyy'}}
<ng-container *ngIf="projectInfo.currentDate >= projectInfo.endDate">(Ended)</ng-container>
<ng-container *ngIf="projectInfo.currentDate < projectInfo.endDate">(Ending)</ng-container>
</span>
</div>
</div>
<div *ngIf="projectInfo.urlInfo" class="uk-margin-bottom">
<a target="_blank" href="{{projectInfo.url}}" class="uk-button-text custom-external">
{{projectInfo.urlInfo}}
</a>
</div>
<div *ngIf="(projectInfo.openAccessMandatePublications != undefined && !projectInfo.openAccessMandatePublications)
|| (projectInfo.openAccessMandateDatasets != undefined && !projectInfo.openAccessMandateDatasets)">
<div>Open Access mandate</div>
<div>
<span
*ngIf="projectInfo.openAccessMandatePublications != undefined && !projectInfo.openAccessMandatePublications"
class="uk-margin-right">
<span class="uk-text-meta">{{openaireEntities.PUBLICATIONS}}: </span>
<span>No</span>
</span>
<span
*ngIf="projectInfo.openAccessMandateDatasets != undefined && !projectInfo.openAccessMandateDatasets">
<span class="uk-text-meta">{{openaireEntities.DATASETS}}: </span>
<span>No</span>
</span>
</div>
</div>
</div>
</div>
<div id="main-tabs-div"
[attr.uk-sticky]="shouldSticky ? 'bottom: true; media: @m': null" [attr.offset]="offset"
cls-active="active">
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<showTitle *ngIf="stickyHeader" [titleName]="projectName" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>
<my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [offsetForSticky]="offset" [(isSticky)]="stickyHeader">
<my-tab tabTitle="Summary" [tabId]="'summary'" [active]="true"></my-tab>
<my-tab *ngIf="fetchPublications.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.PUBLICATIONS" [tabNumber]="fetchPublications.searchUtils.totalResults"
[tabId]="'publications'"></my-tab>
<my-tab *ngIf="fetchDatasets.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.DATASETS" [tabNumber]="fetchDatasets.searchUtils.totalResults"
[tabId]="'datasets'"></my-tab>
<my-tab *ngIf="fetchSoftware.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.SOFTWARE" [tabNumber]="fetchSoftware.searchUtils.totalResults"
[tabId]="'software'"></my-tab>
<my-tab *ngIf="fetchOrps.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.OTHER" [tabNumber]="fetchOrps.searchUtils.totalResults"
[tabId]="'other'"></my-tab>
<my-tab [tabTitle]="'Dmps'" [tabNumber]="fetchDmps.searchUtils.totalResults > 0 ? fetchDmps.searchUtils.totalResults : ''" [tabId]="'dmps'"></my-tab>
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
[tabTitle]="'Statistics'" customClass="statistics" [tabId]="'statistics'" [active]="false"></my-tab>
</my-tabs>
</div>
</div>
<div id="landing-sections" class="uk-text-small">
<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 *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">
No summary information available
</div> </div>
</div> <div *ngIf="projectInfo.status" class="uk-margin-right">
<div *ngIf="hasPrimaryInfo" class="uk-width-expand uk-padding uk-inline"> <span>
<!-- Description --> <span class="uk-text-meta">Status: </span>
<div *ngIf="projectInfo.description && projectInfo.description.length > 0" <span class="uk-text-secondary">{{projectInfo.status}}</span>
class="uk-margin-medium-bottom"> </span>
<div class="uk-text-justify "> </div>
<div class="uk-text-meta uk-margin-small-bottom">Description</div> <div *ngIf="projectInfo.startDate || projectInfo.endDate" class="uk-width-large uk-margin-bottom">
<div class=" uk-height-max-medium uk-overflow-auto"> <progress *ngIf="projectInfo.startDate && projectInfo.endDate"
<div *ngFor="let description of projectInfo.description" class="uk-margin-small-bottom " class="uk-progress uk-box-shadow-inner uk-margin-small-top uk-margin-small-bottom"
[innerHtml]="description"></div> [value]="(projectInfo.currentDate > projectInfo.startDate ? projectInfo.currentDate-projectInfo.startDate : 0)"
</div> [max]="projectInfo.endDate-projectInfo.startDate">
</progress>
<div class="uk-grid">
<span *ngIf="projectInfo.startDate" class="uk-width-1-2 uk-text-meta">
{{projectInfo.startDate | date: 'dd MMM yyyy'}} (Started)
</span>
<span *ngIf="projectInfo.endDate"
[class]="'uk-text-meta uk-width-1-2 ' + (projectInfo.startDate ? 'uk-text-right' : '')">
{{projectInfo.endDate | date: 'dd MMM yyyy'}}
<ng-container *ngIf="projectInfo.currentDate >= projectInfo.endDate">(Ended)</ng-container>
<ng-container *ngIf="projectInfo.currentDate < projectInfo.endDate">(Ending)</ng-container>
</span>
</div>
</div>
<div *ngIf="projectInfo.urlInfo" class="uk-margin-bottom">
<a target="_blank" href="{{projectInfo.url}}" class="uk-button uk-button-text custom-external uk-text-capitalize uk-text-normal">
{{projectInfo.urlInfo}}
</a>
</div>
<div *ngIf="(projectInfo.openAccessMandatePublications != undefined && !projectInfo.openAccessMandatePublications)
|| (projectInfo.openAccessMandateDatasets != undefined && !projectInfo.openAccessMandateDatasets)">
<div>Open Access mandate</div>
<div>
<span
*ngIf="projectInfo.openAccessMandatePublications != undefined && !projectInfo.openAccessMandatePublications"
class="uk-margin-right">
<span class="uk-text-meta">{{openaireEntities.PUBLICATIONS}}: </span>
<span>No</span>
</span>
<span
*ngIf="projectInfo.openAccessMandateDatasets != undefined && !projectInfo.openAccessMandateDatasets">
<span class="uk-text-meta">{{openaireEntities.DATASETS}}: </span>
<span>No</span>
</span>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="hasSecondaryInfo" </div>
[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" [class.separator-in-tab]="hasPrimaryInfo"> <div id="main-tabs-div"
<!-- Organizations --> [attr.uk-sticky]="shouldSticky ? 'bottom: true; media: @m': null" [attr.offset]="offset"
<div class="uk-text-meta uk-margin-small-bottom">Partners</div> cls-active="active">
<div class="uk-margin-medium-bottom"> <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: lessBtnOrganizations ? projectInfo.organizations.length : thresholdOrganizations }"></ng-container> <showTitle *ngIf="stickyHeader" [titleName]="projectName" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>
<div *ngIf="projectInfo.organizations.length > thresholdOrganizations && !lessBtnOrganizations" <my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [offsetForSticky]="offset" [(isSticky)]="stickyHeader">
class="uk-text-center"> <my-tab tabTitle="Summary" [tabId]="'summary'" [active]="true"></my-tab>
<a (click)="viewAllOrganizationsClick();"> <my-tab *ngIf="fetchPublications.searchUtils.totalResults > 0"
View more [tabTitle]="openaireEntities.PUBLICATIONS" [tabNumber]="fetchPublications.searchUtils.totalResults"
[tabId]="'publications'"></my-tab>
<my-tab *ngIf="fetchDatasets.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.DATASETS" [tabNumber]="fetchDatasets.searchUtils.totalResults"
[tabId]="'datasets'"></my-tab>
<my-tab *ngIf="fetchSoftware.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.SOFTWARE" [tabNumber]="fetchSoftware.searchUtils.totalResults"
[tabId]="'software'"></my-tab>
<my-tab *ngIf="fetchOrps.searchUtils.totalResults > 0"
[tabTitle]="openaireEntities.OTHER" [tabNumber]="fetchOrps.searchUtils.totalResults"
[tabId]="'other'"></my-tab>
<my-tab [tabTitle]="'Dmps'" [tabNumber]="fetchDmps.searchUtils.totalResults > 0 ? fetchDmps.searchUtils.totalResults : ''" [tabId]="'dmps'"></my-tab>
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
[tabTitle]="'Statistics'" customClass="statistics" [tabId]="'statistics'" [active]="false"></my-tab>
</my-tabs>
</div>
</div>
<div id="landing-sections" class="uk-text-small">
<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 *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">
No summary information available
</div>
</div>
<div *ngIf="hasPrimaryInfo" class="uk-width-expand uk-padding uk-inline">
<!-- Description -->
<div *ngIf="projectInfo.description && projectInfo.description.length > 0"
class="uk-margin-medium-bottom">
<div class="uk-text-justify ">
<div class="uk-text-meta uk-margin-small-bottom">Description</div>
<div class=" uk-height-max-medium uk-overflow-auto">
<div *ngFor="let description of projectInfo.description" class="uk-margin-small-bottom "
[innerHtml]="description"></div>
</div>
</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" [class.separator-in-tab]="hasPrimaryInfo">
<!-- Organizations -->
<div class="uk-text-meta uk-margin-small-bottom">Partners</div>
<div class="uk-margin-medium-bottom">
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: lessBtnOrganizations ? projectInfo.organizations.length : thresholdOrganizations }"></ng-container>
<div *ngIf="projectInfo.organizations.length > thresholdOrganizations && !lessBtnOrganizations"
class="uk-text-center">
<a (click)="viewAllOrganizationsClick();">
View more
</a>
</div>
<div *ngIf="viewAllOrganizations && lessBtnOrganizations" class="uk-text-center">
<a (click)="viewAllOrganizations = !viewAllOrganizations; lessBtnOrganizations=false;">View less</a>
</div>
</div>
</div>
</div>
</div>
</div>
<ng-container *ngIf="fetchPublications.searchUtils.totalResults > 0">
<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-container>
<ng-container *ngIf="fetchDatasets.searchUtils.totalResults > 0">
<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-container>
<ng-container *ngIf="fetchSoftware.searchUtils.totalResults > 0">
<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-container>
<ng-container *ngIf="fetchOrps.searchUtils.totalResults > 0">
<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-container>
<ng-container>
<div id="dmps" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchDmps" customTitle="DMPs"
[properties]="properties">
<div class="uk-margin-medium-top uk-margin-bottom uk-width-1-1 uk-flex uk-flex-center uk-flex-middle">
<a *ngIf="fetchDmps.searchUtils.totalResults > 0" class="uk-button uk-button-text uk-margin-right"
[queryParams]="getParamsForSearchLink('publications', 'Data Management Plan')"
[routerLink]="properties.searchLinkToAdvancedResults">
View all
<span *ngIf="fetchDmps.searchUtils.totalResults <= searchNumber">in search page</span>
</a>
<a class="uk-button uk-button-text custom-external" href="https://argos.openaire.eu/splash/" target="_blank">
<img src="assets/common-assets/common/argos_entities.svg"
alt="argos" width="20px" height="20px" loading="lazy">
Start a new DMP in <span class="text-argos">Argos</span>
</a> </a>
</div> </div>
<div *ngIf="viewAllOrganizations && lessBtnOrganizations" class="uk-text-center"> </search-tab>
<a (click)="viewAllOrganizations = !viewAllOrganizations; lessBtnOrganizations=false;">View less</a> </div>
</ng-container>
<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> </div>
</div> </div>
</div> </ng-container>
</div> </div>
</div>
<ng-container *ngIf="fetchPublications.searchUtils.totalResults > 0"> <div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
<div id="publications" class="landing-section uk-padding uk-padding-remove-horizontal"> <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
<search-tab [fetch]="fetchPublications" resultType="publication" [texts]="pageContents['bottom']"></helper>
[params]="getParamsForSearchLink('publications')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
[properties]="properties">
</search-tab>
</div>
</ng-container>
<ng-container *ngIf="fetchDatasets.searchUtils.totalResults > 0">
<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-container>
<ng-container *ngIf="fetchSoftware.searchUtils.totalResults > 0">
<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-container>
<ng-container *ngIf="fetchOrps.searchUtils.totalResults > 0">
<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-container>
<ng-container>
<div id="dmps" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchDmps" customTitle="DMPs"
[properties]="properties">
<div class="uk-margin-medium-top uk-margin-bottom uk-width-1-1 uk-flex uk-flex-center uk-flex-middle">
<a *ngIf="fetchDmps.searchUtils.totalResults > 0" class="uk-button uk-button-text uk-margin-right"
[queryParams]="getParamsForSearchLink('publications', 'Data Management Plan')"
[routerLink]="properties.searchLinkToAdvancedResults">
View all
<span *ngIf="fetchDmps.searchUtils.totalResults <= searchNumber">in search page</span>
</a>
<a class="uk-button uk-button-text custom-external" href="https://argos.openaire.eu/splash/" target="_blank">
<img src="assets/common-assets/common/argos_entities.svg"
alt="argos" width="20px" height="20px" loading="lazy">
Start a new DMP in <span class="text-argos">Argos</span>
</a>
</div>
</search-tab>
</div>
</ng-container>
<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> </ng-container>
</div> </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>
</div> </div>
</div> </div>

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

@ -1,4 +1,4 @@
import {Component, Input, ViewChild} from '@angular/core'; import {ChangeDetectorRef, Component, HostListener, Input, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser'; import {Meta, Title} from '@angular/platform-browser';
@ -30,6 +30,8 @@ import {properties} from "../../../../environments/environment";
import {Option} from "../../sharedComponents/input/input.component"; import {Option} from "../../sharedComponents/input/input.component";
import {OpenaireEntities} from "../../utils/properties/searchFields"; import {OpenaireEntities} from "../../utils/properties/searchFields";
declare var ResizeObserver;
@Component({ @Component({
selector: 'project', selector: 'project',
templateUrl: 'project.component.html', templateUrl: 'project.component.html',
@ -149,10 +151,10 @@ export class ProjectComponent {
public offset: number; public offset: number;
public stickyHeader: boolean = false; public stickyHeader: boolean = false;
public graph_offset: number = 0; public graph_offset: number = 0;
public graph_height: number = 0;
@ViewChild("graph_and_feedback") graph_and_feedback; @ViewChild("graph_and_feedback") graph_and_feedback;
public shouldSticky: boolean = true; public shouldSticky: boolean = true;
private observer: IntersectionObserver;
subscriptions = []; subscriptions = [];
properties: EnvProperties; properties: EnvProperties;
@ -170,7 +172,8 @@ export class ProjectComponent {
private _searchResearchResultsService: SearchResearchResultsService, private _searchResearchResultsService: SearchResearchResultsService,
private _reportsService: ReportsService, private _reportsService: ReportsService,
private htmlService: HtmlProjectReportService, private htmlService: HtmlProjectReportService,
private indexInfoService: IndexInfoService) {} private indexInfoService: IndexInfoService,
private cdr: ChangeDetectorRef) {}
ngOnInit() { ngOnInit() {
@ -232,38 +235,61 @@ export class ProjectComponent {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
let bottom = document.getElementById('bottom'); let bottom = document.getElementById('bottom');
if(bottom) { if(bottom) {
this.observer = new IntersectionObserver(entries => { let observer = new IntersectionObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
this.shouldSticky = !entry.isIntersecting; this.shouldSticky = !entry.isIntersecting;
}) })
}); });
this.observer.observe(bottom); this.subscriptions.push(observer);
observer.observe(bottom);
}
if(this.graph_and_feedback) {
this.observeGraphAndFeedback();
} }
} }
} }
ngAfterContentChecked() { ngAfterContentChecked() {
if(this.graph_and_feedback && window) { if(this.graph_and_feedback && window) {
this.graph_offset = this.calcGraphOffset(); this.graph_offset = this.calcGraphOffset(this.graph_and_feedback.nativeElement);
} }
} }
calcGraphOffset() {
return window.innerHeight-this.graph_and_feedback.nativeElement.offsetHeight; public observeGraphAndFeedback() {
let resizeObs = new ResizeObserver(entries => {
entries.forEach(entry => {
setTimeout(() => {
// console.log(entry);
this.graph_offset = this.calcGraphOffset(entry.target);
this.cdr.detectChanges();
});
})
});
this.subscriptions.push(resizeObs);
resizeObs.observe(this.graph_and_feedback.nativeElement);
}
calcGraphOffset(element) {
this.graph_height = element.offsetHeight;
return window.innerHeight-this.graph_height;
} }
public getFileNameType(type: string) { public getFileNameType(type: string) {
if(type == "results") { if(type == "publications") {
return OpenaireEntities.RESULTS.replace(" ", "-"); // return OpenaireEntities.PUBLICATIONS.replace(" ", "-");
} else if(type == "publications") { return OpenaireEntities.PUBLICATIONS_FILE;
return OpenaireEntities.PUBLICATIONS.replace(" ", "-");
} else if(type == "datasets") { } else if(type == "datasets") {
return OpenaireEntities.DATASETS.replace(" ", "-"); // return OpenaireEntities.DATASETS.replace(" ", "-");
return OpenaireEntities.DATASETS_FILE;
} else if(type == "software") { } else if(type == "software") {
return OpenaireEntities.SOFTWARE.replace(" ", "-"); // return OpenaireEntities.SOFTWARE.replace(" ", "-");
return OpenaireEntities.SOFTWARE_FILE;
} else if(type == "other") { } else if(type == "other") {
return OpenaireEntities.OTHER.replace(" ", "-"); // return OpenaireEntities.OTHER.replace(" ", "-");
return OpenaireEntities.OTHER_FILE;
} }
return OpenaireEntities.RESULTS.replace(" ", "-"); // return OpenaireEntities.RESULTS.replace(" ", "-");
return OpenaireEntities.RESULTS_FILE;
} }
public getCsvParams(type: string) { public getCsvParams(type: string) {
@ -319,6 +345,8 @@ export class ProjectComponent {
this.subscriptions.forEach(subscription => { this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) { if (subscription instanceof Subscriber) {
subscription.unsubscribe(); subscription.unsubscribe();
} else if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
subscription.disconnect();
} }
}); });
this.fetchDatasets.clearSubscriptions(); this.fetchDatasets.clearSubscriptions();
@ -326,10 +354,6 @@ export class ProjectComponent {
this.fetchSoftware.clearSubscriptions(); this.fetchSoftware.clearSubscriptions();
this.fetchOrps.clearSubscriptions(); this.fetchOrps.clearSubscriptions();
this.fetchDmps.clearSubscriptions(); this.fetchDmps.clearSubscriptions();
if(this.observer) {
this.observer.disconnect();
}
} }
private createClipboard() { private createClipboard() {
@ -953,7 +977,5 @@ export class ProjectComponent {
(!this.projectInfo.funding || this.fetchOrps.searchUtils.totalResults == 0 (!this.projectInfo.funding || this.fetchOrps.searchUtils.totalResults == 0
|| this.fetchOrps.searchUtils.status != this.errorCodes.DONE)} || this.fetchOrps.searchUtils.status != this.errorCodes.DONE)}
]; ];
console.log(this.resultTypesForDownloading);
} }
} }

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

@ -8,11 +8,11 @@
</div> </div>
</div> </div>
<div *ngIf="resultLandingInfo" class="publication"> <div class="publication">
<div *ngIf="!showFeedback" class="uk-grid"> <div *ngIf="!showFeedback" class="uk-grid">
<!-- left box - actions --> <!-- left box - actions -->
<div class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color"> <div *ngIf="resultLandingInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color">
<div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky" <div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset"> uk-sticky="bottom: true" [attr.offset]="offset">
<div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between"> <div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
@ -72,18 +72,18 @@
</div> </div>
<!-- center box--> <!-- center box-->
<div *ngIf="resultLandingInfo" class="uk-width-expand uk-padding-remove uk-margin-large-left uk-margin-large-right landing-background-default-color"> <div class="uk-width-expand uk-padding-remove uk-background-default">
<ng-template #graph_and_feedback_template> <ng-template #graph_and_feedback_template>
<div class="uk-flex uk-margin-small-top uk-margin-small-bottom"> <div class="uk-flex uk-margin-small-bottom uk-margin-small-top" [class.uk-invisible]="!resultLandingInfo">
<!-- Last Index Info--> <!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2 graph"> <div class="uk-width-2-3@m uk-width-1-2 graph">
<icon name="graph" customClass="uk-text-primary"></icon> <icon name="graph" customClass="uk-text-primary"></icon>
<span class="uk-margin-small-left uk-text-baseline"> <span class="uk-margin-small-left uk-text-baseline">
<span class="uk-text-meta">Powered by </span><a href="https://graph.openaire.eu" target="_blank">OpenAIRE Research Graph</a> <span class="uk-text-meta">Powered by </span><a href="https://graph.openaire.eu" target="_blank">OpenAIRE Research Graph</a>
</span> </span>
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta"> <span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta">
. Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span> </span>
</div> </div>
<!--Feedback--> <!--Feedback-->
<div *ngIf="properties.reCaptchaSiteKey" class="uk-width-expand uk-text-right"> <div *ngIf="properties.reCaptchaSiteKey" class="uk-width-expand uk-text-right">
@ -93,243 +93,249 @@
</div> </div>
</ng-template> </ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-text-xsmall uk-visible@m" <div #graph_and_feedback id="graph_and_feedback" class="uk-padding uk-padding-remove-vertical uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset"> uk-sticky="bottom: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container> <ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div> </div>
<div class="uk-margin-medium-top"> <div class="uk-margin-large-left uk-margin-large-right uk-height-1-1">
<!-- schema.org--> <ng-container *ngIf="resultLandingInfo">
<schema2jsonld *ngIf="resultLandingInfo.record" [data]=resultLandingInfo.record <!-- in small screens there is no sticky #graph_and_feedback so margin-top is medium (40px) -->
[URL]="canonicalUrl"></schema2jsonld> <!-- else margin is medium (40px) - the actual height of uk-sticky-placeholder (graph_height - 20px -> margins of #graph_and_feedback) -->
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" <div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
[texts]="pageContents['top']"></helper> <!-- schema.org-->
<schema2jsonld *ngIf="resultLandingInfo.record" [data]=resultLandingInfo.record
[URL]="canonicalUrl"></schema2jsonld>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<span *ngIf="resultLandingInfo.deletedByInferenceIds" class="uk-text-primary uk-flex uk-flex-middle"> <span *ngIf="resultLandingInfo.deletedByInferenceIds" class="uk-text-primary uk-flex uk-flex-middle">
<icon flex="true" ratio="0.8" name="auto_awesome_motion"></icon> <icon flex="true" ratio="0.8" name="auto_awesome_motion"></icon>
<a (click)="openDeletedByInference()" class="uk-text-primary uk-text-small uk-margin-small-left"> <a (click)="openDeletedByInference()" class="uk-text-primary uk-text-small uk-margin-small-left">
View all {{resultLandingInfo.deletedByInferenceIds.length}} versions View all {{resultLandingInfo.deletedByInferenceIds.length}} versions
</a> </a>
</span> </span>
<landing-header [properties]="properties" [title]="resultLandingInfo.title" <landing-header [properties]="properties" [title]="resultLandingInfo.title"
[subTitle]="resultLandingInfo.subtitle" [subTitle]="resultLandingInfo.subtitle"
[authors]="resultLandingInfo.authors" [authors]="resultLandingInfo.authors"
[underCuration]="resultLandingInfo.underCurationMessage" [underCuration]="resultLandingInfo.underCurationMessage"
[entityType]="getTypeName()" [types]="resultLandingInfo.types" [entityType]="getTypeName()" [types]="resultLandingInfo.types"
[year]="resultLandingInfo.date" [embargoEndDate]="resultLandingInfo.embargoEndDate"> [year]="resultLandingInfo.date" [embargoEndDate]="resultLandingInfo.embargoEndDate">
</landing-header> </landing-header>
<!-- Labels --> <!-- Labels -->
<div class="uk-margin-bottom"> <div class="uk-margin-bottom uk-margin-remove-left uk-grid uk-grid-small uk-flex-middle" uk-grid>
<ng-container *ngIf="resultLandingInfo.accessMode && resultLandingInfo.accessMode.toLowerCase() !== 'not available'"> <ng-container *ngIf="resultLandingInfo.accessMode && resultLandingInfo.accessMode.toLowerCase() !== 'not available'">
<span [class]="'uk-label uk-text-truncate '+ (accessClass(resultLandingInfo.accessMode) == 'open' ? 'uk-label-success' : '')" <span [class]="'uk-label uk-text-truncate '+ (accessClass(resultLandingInfo.accessMode) == 'open' ? 'uk-label-success' : '')"
title="Access Mode">{{resultLandingInfo.accessMode}} title="Access Mode">{{resultLandingInfo.accessMode}}
</span>&#160; </span>&#160;
</ng-container> </ng-container>
<span *ngIf="resultLandingInfo.languages && <span *ngIf="resultLandingInfo.languages &&
removeUnknown(resultLandingInfo.languages).length > 0"> removeUnknown(resultLandingInfo.languages).length > 0">
<ng-container *ngFor="let language of removeUnknown(resultLandingInfo.languages)"> <ng-container *ngFor="let language of removeUnknown(resultLandingInfo.languages)">
<span class="uk-label custom-label label-language" title="Language">{{language}}</span> <span class="uk-label custom-label label-language" title="Language">{{language}}</span>
&#160; &#160;
</ng-container> </ng-container>
</span> </span>
<span *ngIf="resultLandingInfo.programmingLanguages && resultLandingInfo.programmingLanguages.length > 0"> <span *ngIf="resultLandingInfo.programmingLanguages && resultLandingInfo.programmingLanguages.length > 0">
<ng-container *ngFor="let programmingLanguage of resultLandingInfo.programmingLanguages"> <ng-container *ngFor="let programmingLanguage of resultLandingInfo.programmingLanguages">
<span class="uk-label custom-label label-language" <span class="uk-label custom-label label-language"
title="Programming Language">{{programmingLanguage}}</span> title="Programming Language">{{programmingLanguage}}</span>
&#160; &#160;
</ng-container> </ng-container>
</span> </span>
</div> </div>
<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"></showIdentifiers>
</div> </div>
<!--Published Date, Journal and Publisher--> <!--Published Date, Journal and Publisher-->
<div showPublisher [publisher]="resultLandingInfo.publisher" <div showPublisher [publisher]="resultLandingInfo.publisher"
[publishDate]="resultLandingInfo.dateofacceptance" [publishDate]="resultLandingInfo.dateofacceptance"
[journal]="resultLandingInfo.journal" [properties]="properties" class="uk-margin-small-top"></div> [journal]="resultLandingInfo.journal" [properties]="properties" class="uk-margin-small-top"></div>
<!-- Countries --> <!-- Countries -->
<div *ngIf="resultLandingInfo.countries && resultLandingInfo.countries.length > 0" class="uk-margin-small-top"> <div *ngIf="resultLandingInfo.countries && resultLandingInfo.countries.length > 0" class="uk-margin-small-top">
<span class="uk-text-meta"> <span class="uk-text-meta">
{{(resultLandingInfo.countries.length === 1) ? 'Country: ' : 'Countries: '}} {{(resultLandingInfo.countries.length === 1) ? 'Country: ' : 'Countries: '}}
</span> </span>
{{resultLandingInfo.countries.join(", ")}} {{resultLandingInfo.countries.join(", ")}}
</div>
</div>
</div>
<div id="main-tabs-div"
[attr.uk-sticky]="shouldSticky ? 'bottom: true; media: @m': null" [attr.offset]="offset"
cls-active="active">
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<showTitle *ngIf="stickyHeader" [titleName]="resultLandingInfo.title" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>
<my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [offsetForSticky]="offset" [(isSticky)]="stickyHeader">
<my-tab tabTitle="Summary" [tabId]="'summary'" [active]="true"></my-tab>
<my-tab *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0"
[tabTitle]="'References'" [tabId]="'references'"
[tabNumber]="resultLandingInfo.references.length">
</my-tab>
<my-tab *ngIf="resultLandingInfo.relatedResults?.length > 0"
[tabTitle]="'Related research'" [tabId]="'all_related'"
[tabNumber]="resultLandingInfo.relatedResults.length">
</my-tab>
<my-tab *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0"
[tabTitle]="'External Databases'" [tabId]="'bioentities'" [tabNumber]="bioentitiesNum">
</my-tab>
<my-tab *ngIf="enermapsId && properties.enermapsURL"
[tabTitle]="'Enermaps Tool'" [tabId]="'enermaps'"
customClass="portalTab">
</my-tab>
</my-tabs>
</div>
</div>
<div id="landing-sections" class="uk-text-small">
<ng-container>
<div id="summary" class="landing-section landing-section-height-auto uk-padding uk-padding-remove-horizontal">
<div *ngIf="!hasPrimaryInfo" class="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> </div>
<div *ngIf="hasPrimaryInfo"> </div>
<!-- Description -->
<div *ngIf="resultLandingInfo.description && resultLandingInfo.description.length > 0" <div id="main-tabs-div"
class="uk-margin-medium-bottom"> [attr.uk-sticky]="shouldSticky ? 'bottom: true; media: @m': null" [attr.offset]="offset"
<div class="uk-text-justify "> cls-active="active">
<div class="uk-text-meta">Abstract</div> <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<div class=" uk-height-max-medium uk-overflow-auto"> <showTitle *ngIf="stickyHeader" [titleName]="resultLandingInfo.title" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>
<div *ngFor="let description of resultLandingInfo.description" class="uk-margin-small-bottom " <my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [offsetForSticky]="offset" [(isSticky)]="stickyHeader">
[innerHtml]="description"></div> <my-tab tabTitle="Summary" [tabId]="'summary'" [active]="true"></my-tab>
<my-tab *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0"
[tabTitle]="'References'" [tabId]="'references'"
[tabNumber]="resultLandingInfo.references.length">
</my-tab>
<my-tab *ngIf="resultLandingInfo.relatedResults?.length > 0"
[tabTitle]="'Related research'" [tabId]="'all_related'"
[tabNumber]="resultLandingInfo.relatedResults.length">
</my-tab>
<my-tab *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0"
[tabTitle]="'External Databases'" [tabId]="'bioentities'" [tabNumber]="bioentitiesNum">
</my-tab>
<my-tab *ngIf="enermapsId && properties.enermapsURL"
[tabTitle]="'Enermaps Tool'" [tabId]="'enermaps'"
customClass="portalTab">
</my-tab>
</my-tabs>
</div>
</div>
<div id="landing-sections" class="uk-text-small">
<ng-container>
<div id="summary" class="landing-section landing-section-height-auto uk-padding uk-padding-remove-horizontal">
<div *ngIf="!hasPrimaryInfo" class="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>
<div *ngIf="hasPrimaryInfo">
<!-- Description -->
<div *ngIf="resultLandingInfo.description && resultLandingInfo.description.length > 0"
class="uk-margin-medium-bottom">
<div class="uk-text-justify ">
<div class="uk-text-meta">Abstract</div>
<div class=" uk-height-max-medium uk-overflow-auto">
<div *ngFor="let description of resultLandingInfo.description" class="uk-margin-small-bottom "
[innerHtml]="description"></div>
</div>
</div>
</div>
<div *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects ||
resultLandingInfo.classifiedSubjects" class="uk-margin-medium-bottom">
<showSubjects [subjects]="resultLandingInfo.subjects"
[otherSubjects]="resultLandingInfo.otherSubjects"
[classifiedSubjects]="resultLandingInfo.classifiedSubjects">
</showSubjects>
</div>
<!-- Related Organizations-->
<div *ngIf="resultLandingInfo.organizations && resultLandingInfo.organizations.length > 0"
class="uk-margin-medium-bottom uk-width-2-3@m">
<div class="uk-text-meta uk-margin-small-bottom">Related {{openaireEntities.ORGANIZATIONS}}</div>
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: lessBtnOrganizations ? resultLandingInfo.organizations.length : thresholdOrganizations }"></ng-container>
<div *ngIf="resultLandingInfo.organizations.length > thresholdOrganizations && !lessBtnOrganizations"
class="uk-text-center">
<a (click)="viewAllOrganizationsClick();">
View more
</a>
</div>
<div *ngIf="viewAllOrganizations && lessBtnOrganizations" class="uk-text-center">
<a (click)="viewAllOrganizations = !viewAllOrganizations; lessBtnOrganizations=false;">View less</a>
</div>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
<div id="references" class="landing-section uk-padding uk-padding-remove-horizontal">
<results-and-pages *ngIf="resultLandingInfo.references.length > pageSize" [type]="'references'"
[page]="referencesPage" [pageSize]="pageSize"
[totalResults]="resultLandingInfo.references.length">
</results-and-pages>
<div
*ngFor="let item of resultLandingInfo.references.slice((referencesPage-1)*pageSize, referencesPage*pageSize)">
<p *ngIf="item">
{{item.name}}
<ng-container *ngIf="item.ids && item.ids.length > 0">
<span *ngFor="let id of item.ids">
[<a *ngIf="id.type !== 'openaire'" href="{{getReferenceUrl(id)}}"
target="_blank">{{getReferenceIdName(id)}}</a>
<a *ngIf="id.type === 'openaire'" [routerLink]="properties.searchLinkToResult.split('?')[0]"
[queryParams]="{id: id.value}"
target="_blank">OpenAIRE</a>]
</span>
</ng-container>
</p>
</div>
<paging-no-load *ngIf="resultLandingInfo.references.length > pageSize"
(pageChange)="updateReferencesPage($event)"
[currentPage]="referencesPage" [size]="pageSize"
[totalResults]="resultLandingInfo.references.length">
</paging-no-load>
</div>
</ng-container>
<ng-container *ngIf="resultLandingInfo.relatedResults?.length > 0">
<div id="all_related" class="landing-section uk-padding uk-padding-remove-horizontal">
<ng-container *ngTemplateOutlet="relation_in_tab; context: { researchResults: filteredRelatedResults, header: ''}"></ng-container>
</div>
</ng-container>
<ng-container *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0">
<div id="bioentities" class="landing-section uk-padding uk-padding-remove-horizontal">
<results-and-pages *ngIf="bioentitiesNum > 2*pageSize" [type]="'bioentities'"
[page]="bioentitiesPage" [pageSize]="2*pageSize"
[totalResults]="bioentitiesNum">
</results-and-pages>
<div class="uk-text-center uk-child-width-1-4@s uk-child-width-1-2 uk-grid uk-grid-medium uk-margin-bottom" uk-grid>
<ng-container *ngFor="let key of getKeys(resultLandingInfo.bioentities) let i=index">
<ng-container
*ngFor="let keyIn of keysToArray(resultLandingInfo.bioentities.get(key)).slice((bioentitiesPage-1)*2*pageSize, bioentitiesPage*2*pageSize)">
<div>
<div [title]="key" *ngIf="keyIn && !resultLandingInfo.bioentities.get(key).get(keyIn)"
class="uk-card uk-card-default uk-card-body">
{{keyIn}}
</div> </div>
<a [href]="resultLandingInfo.bioentities.get(key).get(keyIn)" target="_blank"
[title]="key" *ngIf="keyIn && resultLandingInfo.bioentities.get(key).get(keyIn)"
class="uk-card uk-card-default uk-card-hover uk-card-body custom-external">
{{keyIn}}
</a>
</div> </div>
</ng-container> <div *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects ||
</ng-container> resultLandingInfo.classifiedSubjects" class="uk-margin-medium-bottom">
</div> <showSubjects [subjects]="resultLandingInfo.subjects"
<paging-no-load *ngIf="bioentitiesNum > 2*pageSize" [otherSubjects]="resultLandingInfo.otherSubjects"
(pageChange)="updateBioentitiesPage($event)" [classifiedSubjects]="resultLandingInfo.classifiedSubjects">
[currentPage]="bioentitiesPage" [size]="2*pageSize" </showSubjects>
[totalResults]="bioentitiesNum"> </div>
</paging-no-load> <!-- Related Organizations-->
</div> <div *ngIf="resultLandingInfo.organizations && resultLandingInfo.organizations.length > 0"
</ng-container> class="uk-margin-medium-bottom uk-width-2-3@m">
<ng-container *ngIf="enermapsId && properties.enermapsURL"> <div class="uk-text-meta uk-margin-small-bottom">Related {{openaireEntities.ORGANIZATIONS}}</div>
<div id="enermaps" class="landing-section uk-padding uk-padding-remove-horizontal"> <ng-container *ngTemplateOutlet="organizations_template; context: { threshold: lessBtnOrganizations ? resultLandingInfo.organizations.length : thresholdOrganizations }"></ng-container>
<div class=" uk-inline uk-text-center "> <div *ngIf="resultLandingInfo.organizations.length > thresholdOrganizations && !lessBtnOrganizations"
<img class="uk-width-auto" [src]="properties.enermapsURL +'/images/datasets/' + enermapsId + class="uk-text-center">
'.png'" <a (click)="viewAllOrganizationsClick();">
alt="Enermaps tool preview" loading="lazy"> View more
<div class="uk-overlay uk-overlay-default uk-position-bottom"> </a>
<p>Visit <a </div>
class=" uk-margin-right uk-margin-small-top custom-external" <div *ngIf="viewAllOrganizations && lessBtnOrganizations" class="uk-text-center">
[href]="properties.enermapsURL + '/?shared_id=' + enermapsId" target="_blank" > <a (click)="viewAllOrganizations = !viewAllOrganizations; lessBtnOrganizations=false;">View less</a>
Enermaps tool </div>
</a></p> </div>
</div>
</div> </div>
</div> </ng-container>
<ul *ngIf="enermapsDetails?.length > 0" class="uk-list uk-animation-fade"> <ng-container *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
<ng-container *ngFor="let detail of enermapsDetails"> <div id="references" class="landing-section uk-padding uk-padding-remove-horizontal">
<li *ngIf="detail[0] && detail[1]"> <results-and-pages *ngIf="resultLandingInfo.references.length > pageSize" [type]="'references'"
<span class="uk-text-meta">{{detail[0]}}: </span> [page]="referencesPage" [pageSize]="pageSize"
<span> [totalResults]="resultLandingInfo.references.length">
<ng-container *ngFor="let word of detail[1].split(' ')"> </results-and-pages>
<ng-container *ngIf="!word.startsWith('http://') && !word.startsWith('https://')">{{word}} </ng-container> <div
<a *ngIf="word.startsWith('http://') || word.startsWith('https://')" *ngFor="let item of resultLandingInfo.references.slice((referencesPage-1)*pageSize, referencesPage*pageSize)">
target="_blank" [href]="word">{{word}} </a> <p *ngIf="item">
</ng-container> {{item.name}}
</span> <ng-container *ngIf="item.ids && item.ids.length > 0">
</li> <span *ngFor="let id of item.ids">
</ng-container> [<a *ngIf="id.type !== 'openaire'" href="{{getReferenceUrl(id)}}"
</ul> target="_blank">{{getReferenceIdName(id)}}</a>
<a *ngIf="id.type === 'openaire'" [routerLink]="properties.searchLinkToResult.split('?')[0]"
[queryParams]="{id: id.value}"
target="_blank">OpenAIRE</a>]
</span>
</ng-container>
</p>
</div>
<paging-no-load *ngIf="resultLandingInfo.references.length > pageSize"
(pageChange)="updateReferencesPage($event)"
[currentPage]="referencesPage" [size]="pageSize"
[totalResults]="resultLandingInfo.references.length">
</paging-no-load>
</div>
</ng-container>
<ng-container *ngIf="resultLandingInfo.relatedResults?.length > 0">
<div id="all_related" class="landing-section uk-padding uk-padding-remove-horizontal">
<ng-container *ngTemplateOutlet="relation_in_tab; context: { researchResults: filteredRelatedResults, header: ''}"></ng-container>
</div>
</ng-container>
<ng-container *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0">
<div id="bioentities" class="landing-section uk-padding uk-padding-remove-horizontal">
<results-and-pages *ngIf="bioentitiesNum > 2*pageSize" [type]="'bioentities'"
[page]="bioentitiesPage" [pageSize]="2*pageSize"
[totalResults]="bioentitiesNum">
</results-and-pages>
<div class="uk-text-center uk-child-width-1-4@s uk-child-width-1-2 uk-grid uk-grid-medium uk-margin-bottom" uk-grid>
<ng-container *ngFor="let key of getKeys(resultLandingInfo.bioentities) let i=index">
<ng-container
*ngFor="let keyIn of keysToArray(resultLandingInfo.bioentities.get(key)).slice((bioentitiesPage-1)*2*pageSize, bioentitiesPage*2*pageSize)">
<div>
<div [title]="key" *ngIf="keyIn && !resultLandingInfo.bioentities.get(key).get(keyIn)"
class="uk-card uk-card-default uk-card-body">
{{keyIn}}
</div>
<a [href]="resultLandingInfo.bioentities.get(key).get(keyIn)" target="_blank"
[title]="key" *ngIf="keyIn && resultLandingInfo.bioentities.get(key).get(keyIn)"
class="uk-card uk-card-default uk-card-hover uk-card-body custom-external">
{{keyIn}}
</a>
</div>
</ng-container>
</ng-container>
</div>
<paging-no-load *ngIf="bioentitiesNum > 2*pageSize"
(pageChange)="updateBioentitiesPage($event)"
[currentPage]="bioentitiesPage" [size]="2*pageSize"
[totalResults]="bioentitiesNum">
</paging-no-load>
</div>
</ng-container>
<ng-container *ngIf="enermapsId && properties.enermapsURL">
<div id="enermaps" class="landing-section uk-padding uk-padding-remove-horizontal">
<div class=" uk-inline uk-text-center ">
<img class="uk-width-auto" [src]="properties.enermapsURL +'/images/datasets/' + enermapsId +
'.png'"
alt="Enermaps tool preview" loading="lazy">
<div class="uk-overlay uk-overlay-default uk-position-bottom">
<p>Visit <a
class=" uk-margin-right uk-margin-small-top custom-external"
[href]="properties.enermapsURL + '/?shared_id=' + enermapsId" target="_blank" >
Enermaps tool
</a></p>
</div>
</div>
<ul *ngIf="enermapsDetails?.length > 0" class="uk-list uk-animation-fade">
<ng-container *ngFor="let detail of enermapsDetails">
<li *ngIf="detail[0] && detail[1]">
<span class="uk-text-meta">{{detail[0]}}: </span>
<span>
<ng-container *ngFor="let word of detail[1].split(' ')">
<ng-container *ngIf="!word.startsWith('http://') && !word.startsWith('https://')">{{word}} </ng-container>
<a *ngIf="word.startsWith('http://') || word.startsWith('https://')"
target="_blank" [href]="word">{{word}} </a>
</ng-container>
</span>
</li>
</ng-container>
</ul>
</div>
</ng-container>
</div> </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> </ng-container>
</div> </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>
</div> </div>
@ -342,7 +348,8 @@
</div> </div>
<div id="right-column-offcanvas" class="uk-offcanvas offcanvas" uk-offcanvas="flip: true; overlay: true;"> <div id="right-column-offcanvas" class="uk-offcanvas offcanvas" uk-offcanvas="flip: true; overlay: true;">
<div class="uk-offcanvas-bar"> <div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button"> <button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button"
(click)="rightSidebarOffcanvasClicked = false">
<icon name="close" ratio="1.5" visuallyHidden="close"></icon> <icon name="close" ratio="1.5" visuallyHidden="close"></icon>
</button> </button>
<div *ngIf="rightSidebarOffcanvasClicked" class="uk-padding"> <div *ngIf="rightSidebarOffcanvasClicked" class="uk-padding">

41
landingPages/result/resultLanding.component.ts
View File

@ -1,4 +1,4 @@
import {ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild} from '@angular/core'; import {ChangeDetectorRef, Component, EventEmitter, HostListener, Input, Output, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser'; import {Meta, Title} from '@angular/platform-browser';
@ -26,7 +26,7 @@ import {UserManagementService} from "../../services/user-management.service";
import {OpenaireEntities} from "../../utils/properties/searchFields"; import {OpenaireEntities} from "../../utils/properties/searchFields";
import {Option} from "../../sharedComponents/input/input.component"; import {Option} from "../../sharedComponents/input/input.component";
declare var UIkit; declare var ResizeObserver;
@Component({ @Component({
selector: 'result-landing', selector: 'result-landing',
@ -127,10 +127,10 @@ export class ResultLandingComponent {
public offset: number; public offset: number;
public stickyHeader: boolean = false; public stickyHeader: boolean = false;
public graph_offset: number = 0; public graph_offset: number = 0;
public graph_height: number = 0;
@ViewChild("graph_and_feedback") graph_and_feedback; @ViewChild("graph_and_feedback") graph_and_feedback;
public shouldSticky: boolean = true; public shouldSticky: boolean = true;
private observer: IntersectionObserver;
public viewAll: string = ""; public viewAll: string = "";
public noCommunities: boolean = false; public noCommunities: boolean = false;
@ -224,23 +224,43 @@ export class ResultLandingComponent {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
let bottom = document.getElementById('bottom'); let bottom = document.getElementById('bottom');
if(bottom) { if(bottom) {
this.observer = new IntersectionObserver(entries => { let observer = new IntersectionObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
this.shouldSticky = !entry.isIntersecting; this.shouldSticky = !entry.isIntersecting;
}) })
}); });
this.observer.observe(bottom); this.subscriptions.push(observer);
observer.observe(bottom);
}
if(this.graph_and_feedback) {
this.observeGraphAndFeedback();
} }
} }
} }
ngAfterContentChecked() { ngAfterContentChecked() {
if(this.graph_and_feedback && window) { if(this.graph_and_feedback && window) {
this.graph_offset = this.calcGraphOffset(); this.graph_offset = this.calcGraphOffset(this.graph_and_feedback.nativeElement);
} }
} }
calcGraphOffset() {
return window.innerHeight-this.graph_and_feedback.nativeElement.offsetHeight; public observeGraphAndFeedback() {
let resizeObs = new ResizeObserver(entries => {
entries.forEach(entry => {
setTimeout(() => {
// console.log(entry);
this.graph_offset = this.calcGraphOffset(entry.target);
this.cdr.detectChanges();
});
})
});
this.subscriptions.push(resizeObs);
resizeObs.observe(this.graph_and_feedback.nativeElement);
}
calcGraphOffset(element) {
this.graph_height = element.offsetHeight;
return window.innerHeight-this.graph_height;
} }
private initMetaAndLinks(type: string) { private initMetaAndLinks(type: string) {
@ -299,12 +319,11 @@ export class ResultLandingComponent {
subscription.unsubscribe(); subscription.unsubscribe();
} else if (subscription instanceof Function) { } else if (subscription instanceof Function) {
subscription(); subscription();
} else if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
subscription.disconnect();
} }
}); });
this._vocabulariesService.clearSubscriptions(); this._vocabulariesService.clearSubscriptions();
if(this.observer) {
this.observer.disconnect();
}
} }
public pidInit(event) { public pidInit(event) {