[Trunk | Library]: Redesign of Dataprovider Landing Page.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58789 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2020-05-26 20:36:14 +00:00
parent 9a59027576
commit 797401f7c1
4 changed files with 735 additions and 320 deletions

View File

@ -16,6 +16,38 @@
</div> </div>
</ng-template> </ng-template>
<ng-template #search_tab let-fetch="fetch" let-type="type" let-urlParam="urlParam"
let-searchLinkToAdvancedPage="searchLinkToAdvancedPage" let-params="params">
<errorMessages [status]="[fetch.searchUtils.status]" [type]="getEntityName(type, true, true)"
tab_error_class=true></errorMessages>
<div *ngIf="fetch.searchUtils.status == errorCodes.DONE">
<div *ngIf="fetch.searchUtils.totalResults > searchNumber" class="uk-inline uk-flex uk-flex-right">
<span class="uk-text-uppercase uk-position-left uk-text-middle uk-flex-middle uk-flex">
<span>Top {{searchNumber}}</span><span class="space uk-text-muted">{{getEntityName(type, true, true)}}</span>
</span>
<a [queryParams]="params" [routerLink]="searchLinkToAdvancedPage">
<button class="uk-button uk-button-small portal-button">
<span uk-icon="search"></span>
View all
</button>
</a>
</div>
<ul class="uk-list-divider uk-list uk-margin uk-margin-top">
<errorMessages [status]="[fetch.searchUtils.status]" [type]="'results'"></errorMessages>
<li *ngFor="let result of fetch.results" class="uk-animation-fade">
<div>
<result-preview [properties]="properties" [showOrganizations]="true"
[showSubjects]="true" [result]="getResultPreview(result, type)">
</result-preview>
</div>
</li>
</ul>
</div>
</ng-template>
<div id="tm-main" class="landing uk-section uk-padding-remove-top tm-middle"> <div id="tm-main" class="landing uk-section uk-padding-remove-top tm-middle">
<div *ngIf="!showFeedback" uk-grid> <div *ngIf="!showFeedback" uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first "> <div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
@ -30,9 +62,9 @@
class="loading-gif uk-align-center"></span></div> class="loading-gif uk-align-center"></span></div>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper> [texts]="pageContents['top']"></helper>
<div *ngIf="dataProviderInfo != null" class=" uk-grid"> <div *ngIf="dataProviderInfo != null" class="uk-grid uk-margin-remove-left uk-margin-large-bottom">
<div class=" uk-width-2-3@m uk-width-1-1@s uk-margin-bottom"> <div class="uk-width-2-3@m uk-width-1-1@s uk-margin-bottom uk-padding uk-padding-remove-left uk-padding-remove-vertical">
<!--h3 *ngIf="dataProviderInfo.title != null"> <!--h3 *ngIf="dataProviderInfo.title != null">
<a *ngIf="dataProviderInfo.title['url'] != undefined && dataProviderInfo.title['url'] != null" <a *ngIf="dataProviderInfo.title['url'] != undefined && dataProviderInfo.title['url'] != null"
href="{{dataProviderInfo.title['url']}}" target="_blank" class="custom-external"> href="{{dataProviderInfo.title['url']}}" target="_blank" class="custom-external">
{{dataProviderInfo.title['name']}} {{dataProviderInfo.title['name']}}
@ -96,156 +128,8 @@
</span> </span>
</div> </div>
</div> </div>
<ul class="uk-list">
<showPublisher [journal]="dataProviderInfo.journal" [properties]="properties"></showPublisher>
<li *ngIf="dataProviderInfo.aggregationStatus" class="uk-animation-fade uk-animation-fast">
<span *ngIf="dataProviderInfo.aggregationStatus.fulltexts && dataProviderInfo.aggregationStatus.fulltexts != -1"
class="uk-margin-right">
<span class="uk-text-muted">Collected full-texts: </span>
{{dataProviderInfo.aggregationStatus.fulltexts | number}}
</span>
<span *ngIf="dataProviderInfo.aggregationStatus.fundedContent && dataProviderInfo.aggregationStatus.fundedContent != -1"
class="uk-display-inline-block">
<span class="uk-text-muted">Results with funding information: </span>
{{dataProviderInfo.aggregationStatus.fundedContent | number}}
</span>
<span *ngIf="dataProviderInfo.aggregationStatus.lastUpdateDate && dataProviderInfo.aggregationStatus.lastUpdateDate != null"
class="uk-display-inline-block">
<span class="uk-text-muted">Latest data aggregation: </span>
{{dataProviderInfo.aggregationStatus.lastUpdateDate | date}}
</span>
</li>
<!-- Organizations -->
<!-- <li *ngIf="dataProviderInfo.organizations && dataProviderInfo.organizations.length > 0" class="uk-margin-small-bottom">-->
<!-- <div class="uk-height-max-medium uk-overflow-auto">-->
<!-- <span class="uk-text-muted">Organizations: </span>-->
<!-- <span *ngFor="let organization of dataProviderInfo.organizations.slice(0, showNumOrganizations) let i=index">-->
<!-- <a *ngIf="organization.id"-->
<!-- [queryParams]="{organizationId: organization.id}" routerLinkActive="router-link-active"-->
<!-- routerLink="/search/organization">-->
<!-- <u>{{organization.name}}</u>-->
<!-- </a>-->
<!-- <span *ngIf="!organization.id">-->
<!-- <span>{{organization.name}}</span>-->
<!-- <span *ngIf="(i < dataProviderInfo.organizations.length-1)">,</span>-->
<!-- </span>-->
<!-- <span *ngIf="(i < dataProviderInfo.organizations.length-1)">, </span>-->
<!-- </span>-->
<!-- <span *ngIf="showNumOrganizations == thresholdOrganizations && dataProviderInfo.organizations.length > thresholdOrganizations"> ... </span>-->
<!-- </div>-->
<!-- <div *ngIf="showNumOrganizations == thresholdOrganizations && dataProviderInfo.organizations.length > thresholdOrganizations"-->
<!-- class="uk-width-1-1 uk-text-right">-->
<!-- <a (click)="showNumOrganizations = dataProviderInfo.organizations.length;">-->
<!-- View all {{dataProviderInfo.organizations.length | number}} organizations-->
<!-- </a>-->
<!-- </div>-->
<!-- <div *ngIf="showNumOrganizations > thresholdOrganizations" class="uk-width-1-1 uk-text-right">-->
<!-- <a (click)="showNumOrganizations = thresholdOrganizations;">View less organizations</a>-->
<!-- </div>-->
<!-- </li>-->
<li *ngIf="dataProviderInfo.organizations && dataProviderInfo.organizations.length > 0" class="uk-margin-bottom">
<div class="uk-height-max-medium uk-overflow-auto">
<span class="uk-text-muted">Organizations: </span>
<span *ngFor="let organization of dataProviderInfo.organizations.slice(0, showNumOrganizations) let i=index"
[attr.uk-tooltip]="organization.acronym && organization.name ? 'pos:right; delay:10' : 'cls: uk-invisible'"
[title]="organization.name">
<a *ngIf="organization.id"
[queryParams]="{organizationId: organization.id}" routerLinkActive="router-link-active"
routerLink="/search/organization">
<u>{{(organization.acronym) ? organization.acronym : ''}}</u>
<u>{{(!organization.acronym && organization.name) ? organization.name : ''}}</u>
</a>
<span *ngIf="!organization.id">
<span *ngIf="organization.acronym">{{organization.acronym}}</span>
<span *ngIf="!organization.acronym && organization.name">{{organization.name}}</span>
<span *ngIf="(i < dataProviderInfo.organizations.length-1)">,</span>
</span>
<span *ngIf="(i < dataProviderInfo.organizations.length-1)">, </span>
</span>
<span *ngIf="showNumOrganizations == thresholdOrganizations && dataProviderInfo.organizations.length > thresholdOrganizations"> ... </span>
</div>
<div *ngIf="showNumOrganizations == thresholdOrganizations && dataProviderInfo.organizations.length > thresholdOrganizations"
class="uk-width-1-1 uk-text-right">
<a (click)="showNumOrganizations = dataProviderInfo.organizations.length;">
View all {{dataProviderInfo.organizations.length | number}} organizations
</a>
</div>
<div *ngIf="showNumOrganizations > thresholdOrganizations" class="uk-width-1-1 uk-text-right">
<a (click)="showNumOrganizations = thresholdOrganizations;">View less organizations</a>
</div>
</li>
<li *ngIf="dataProviderInfo.oaiPmhURL || dataProviderInfo.openDoarId || dataProviderInfo.r3DataId">
<span *ngIf="dataProviderInfo.oaiPmhURL" class="uk-margin-right">
<span class="uk-text-muted">OAI-PMH: </span>
<a target="_blank" href="{{dataProviderInfo.oaiPmhURL}}">
{{dataProviderInfo.oaiPmhURL}}
<span class="custom-external custom-icon space"></span>
</a>
</span>
<span *ngIf="dataProviderInfo.openDoarId" class="uk-display-inline-block">
<span class="uk-text-muted">Detailed content provider information at </span>
<a target="_blank" href="{{properties.openDoarURL+dataProviderInfo.openDoarId}}">
OpenDOAR
<span class="custom-external custom-icon space"></span>
</a>
</span>
<span *ngIf="dataProviderInfo.r3DataId" class="uk-display-inline-block">
<span class="uk-text-muted">Detailed content provider information at </span>
<a target="_blank" href="{{properties.r3DataURL+dataProviderInfo.r3DataId}}">
re3data.org
<span class="custom-external custom-icon space"></span>
</a>
</span>
</li>
<li *ngIf="dataProviderInfo.countries != undefined && dataProviderInfo.countries.length > 0">
<span class="uk-text-muted">Countries:</span>
{{dataProviderInfo.countries.join(", ")}}
</li>
</ul>
<!-- Description -->
<div *ngIf="dataProviderInfo.description" class="uk-margin-bottom">
<div class="uk-text-justify uk-text-small uk-height-max-medium uk-overflow-auto">
<span class="uk-text-muted">Description: </span>
<span>{{dataProviderInfo.description.substring(0, showNumDescription)}}</span>
<span *ngIf="showNumDescription == thresholdDescription &&
dataProviderInfo.description.length > thresholdDescription">...</span>
</div>
<div *ngIf="showNumDescription == thresholdDescription &&
dataProviderInfo.description.length > thresholdDescription" class="uk-text-right">
<a (click)="showNumDescription = dataProviderInfo.description.length;">
View more
</a>
</div>
<div *ngIf="dataProviderInfo.description && showNumDescription > thresholdDescription"
class="uk-text-right">
<a (click)="showNumDescription = thresholdDescription;">
View less
</a>
</div>
</div>
<!-- Subjects -->
<div *ngIf="dataProviderInfo.subjects && dataProviderInfo.subjects.length > 0" class="uk-margin-bottom">
<div class="uk-text-small uk-height-max-medium uk-overflow-auto">
<span class="uk-text-muted">Subjects: </span>
<!-- {{dataProviderInfo.countries.join(", ")}}-->
<span *ngFor="let subject of dataProviderInfo.subjects.slice(0, showNumSubjects) let i=index">
<span>{{subject}}</span>
<span *ngIf="(i < dataProviderInfo.subjects.length-1)">, </span>
</span>
<span *ngIf="showNumSubjects == thresholdSubjects && dataProviderInfo.organizations.length > thresholdSubjects"> ... </span>
</div>
<div *ngIf="showNumSubjects == thresholdSubjects && dataProviderInfo.organizations.length > thresholdSubjects"
class="uk-width-1-1 uk-text-right">
<a (click)="showNumSubjects = dataProviderInfo.subjects.length;">
View all {{dataProviderInfo.subjects.length | number}} subjects
</a>
</div>
<div *ngIf="showNumSubjects > thresholdSubjects" class="uk-width-1-1 uk-text-right">
<a (click)="showNumSubjects = thresholdSubjects;">View less subjects</a>
</div>
</div>
<!-- <span *ngIf="dataProviderInfo.type" class="uk-label custom-label label-type label-dataprovider "--> <!-- <span *ngIf="dataProviderInfo.type" class="uk-label custom-label label-type label-dataprovider "-->
<!-- title="Type">{{dataProviderInfo.type}}</span>{{" "}}--> <!-- title="Type">{{dataProviderInfo.type}}</span>{{" "}}-->
@ -319,101 +203,95 @@
<!-- </ul>--> <!-- </ul>-->
<!-- && dataProviderInfo.tabs2 && dataProviderInfo.tabs2.length > 0--> <!-- && dataProviderInfo.tabs2 && dataProviderInfo.tabs2.length > 0-->
<div *ngIf="showTabs" <!-- <div *ngIf="showTabs"-->
class="uk-margin-medium-top"> <!-- class="uk-margin-medium-top">-->
<!-- *ngIf="dataProviderInfo.tabs2.indexOf('Statistics') != -1 || dataProviderInfo.tabs2.indexOf('Related Content Providers') != -1"--> <!--&lt;!&ndash; *ngIf="dataProviderInfo.tabs2.indexOf('Statistics') != -1 || dataProviderInfo.tabs2.indexOf('Related Content Providers') != -1"&ndash;&gt;-->
<div <!-- <div-->
class="uk-margin-top simple-buttons uk-flex uk-flex-middle"> <!-- class="uk-margin-top simple-buttons uk-flex uk-flex-middle">-->
<!-- *ngIf="dataProviderInfo.tabs2.indexOf('Related Content Providers') != -1"--> <!--&lt;!&ndash; *ngIf="dataProviderInfo.tabs2.indexOf('Related Content Providers') != -1"&ndash;&gt;-->
<div *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0 <!-- <div *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)"-->
(click)="openRelatedDatasources()" class="clickable uk-margin-right"> <!-- (click)="openRelatedDatasources()" class="clickable uk-margin-right">-->
<span class="uk-text-middle">Related Content Providers</span> <!-- <span class="uk-text-middle">Related Content Providers</span>-->
</div>
<!-- *ngIf="dataProviderInfo.tabs2.indexOf('Statistics') != -1"-->
<div *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
(click)="openStatistics()" class="clickable uk-margin-right">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path id="statistics-bars" d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z"></path>
</svg>
<span class="uk-text-middle space">View statistics</span>
</div>
</div>
<!-- ||-->
<!-- dataProviderInfo.tabs2.indexOf('Related Content Providers') != -1-->
<!-- *ngIf="dataProviderInfo.tabs2.indexOf('Publications') != -1 ||-->
<!-- dataProviderInfo.tabs2.indexOf('Research Data') != -1 ||-->
<!-- dataProviderInfo.tabs2.indexOf('Software') != -1 ||-->
<!-- dataProviderInfo.tabs2.indexOf('Other Research Products') != -1 ||-->
<!-- dataProviderInfo.tabs2.indexOf('Projects') != -1 ||-->
<!-- dataProviderInfo.tabs2.indexOf('Content Providers') != -1 "-->
<div
class="uk-margin-top advanced-buttons uk-grid-small uk-child-width-1-4@s uk-child-width-1-2"
uk-height-match="target: .target; row: false"
uk-grid>
<!-- && dataProviderInfo.relatedDatasources && dataProviderInfo.relatedDatasources.size > 0-->
<!-- <div *ngIf="dataProviderInfo.tabs2.indexOf('Related Content Providers') != -1-->
<!-- ">-->
<!-- <div class="clickable" (click)="openRelatedDatasources()">-->
<!-- <div class="header target uk-text-bold">Related Content Providers</div>-->
<!-- <div class="footer target uk-position-relative">-->
<!--&lt;!&ndash; <span class="uk-text-bold uk-position-center">&ndash;&gt;-->
<!--&lt;!&ndash; {{dataProviderInfo.relatedDatasources?.size | number}}&ndash;&gt;-->
<!--&lt;!&ndash; </span>&ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!--&lt;!&ndash; *ngIf="dataProviderInfo.tabs2.indexOf('Statistics') != -1"&ndash;&gt;-->
<!-- <div *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0-->
<!-- || fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"-->
<!-- (click)="openStatistics()" class="clickable uk-margin-right">-->
<!-- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">-->
<!-- <path d="M0 0h24v24H0z" fill="none"></path>-->
<!-- <path id="statistics-bars" d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z"></path>-->
<!-- </svg>-->
<!-- <span class="uk-text-middle space">View statistics</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- <ng-container *ngIf="dataProviderInfo.tabs2.indexOf('Publications') != -1">--> <!--&lt;!&ndash; ||&ndash;&gt;-->
<ng-container *ngTemplateOutlet="search_box; <!--&lt;!&ndash; dataProviderInfo.tabs2.indexOf('Related Content Providers') != -1&ndash;&gt;-->
context: { fetch: fetchPublications, type: 'publications', typeName: 'Publications',
searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults, params: getParamsForSearchLink('publications')}"> <!--&lt;!&ndash; *ngIf="dataProviderInfo.tabs2.indexOf('Publications') != -1 ||&ndash;&gt;-->
</ng-container> <!--&lt;!&ndash; dataProviderInfo.tabs2.indexOf('Research Data') != -1 ||&ndash;&gt;-->
<!-- <a [queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'type', 'qf'], ['relprojectid', projectId, type, 'false'])"--> <!--&lt;!&ndash; dataProviderInfo.tabs2.indexOf('Software') != -1 ||&ndash;&gt;-->
<!-- [routerLink]="properties.searchLinkToAdvancedResults">--> <!--&lt;!&ndash; dataProviderInfo.tabs2.indexOf('Other Research Products') != -1 ||&ndash;&gt;-->
<!-- </ng-container>--> <!--&lt;!&ndash; dataProviderInfo.tabs2.indexOf('Projects') != -1 ||&ndash;&gt;-->
<!-- <ng-container *ngIf="dataProviderInfo.tabs2.indexOf('Research Data') != -1">--> <!--&lt;!&ndash; dataProviderInfo.tabs2.indexOf('Content Providers') != -1 "&ndash;&gt;-->
<ng-container *ngTemplateOutlet="search_box; <!-- <div-->
context: { fetch: fetchDatasets, type: 'datasets', typeName: 'Research Data', <!-- class="uk-margin-top advanced-buttons uk-grid-small uk-child-width-1-4@s uk-child-width-1-2"-->
searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults, params: getParamsForSearchLink('datasets')}"> <!-- uk-height-match="target: .target; row: false"-->
</ng-container> <!-- uk-grid>-->
<!-- </ng-container>--> <!--&lt;!&ndash; && dataProviderInfo.relatedDatasources && dataProviderInfo.relatedDatasources.size > 0&ndash;&gt;-->
<!-- <ng-container *ngIf="dataProviderInfo.tabs2.indexOf('Software') != -1">--> <!--&lt;!&ndash; <div *ngIf="dataProviderInfo.tabs2.indexOf('Related Content Providers') != -1&ndash;&gt;-->
<ng-container *ngTemplateOutlet="search_box; <!--&lt;!&ndash; ">&ndash;&gt;-->
context: { fetch: fetchSoftware, type: 'software', typeName: 'Software', <!--&lt;!&ndash; <div class="clickable" (click)="openRelatedDatasources()">&ndash;&gt;-->
searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults, params: getParamsForSearchLink('software')}"> <!--&lt;!&ndash; <div class="header target uk-text-bold">Related Content Providers</div>&ndash;&gt;-->
</ng-container> <!--&lt;!&ndash; <div class="footer target uk-position-relative">&ndash;&gt;-->
<!-- </ng-container>--> <!--&lt;!&ndash;&lt;!&ndash; <span class="uk-text-bold uk-position-center">&ndash;&gt;&ndash;&gt;-->
<!-- <ng-container *ngIf="dataProviderInfo.tabs2.indexOf('Other Research Products') != -1">--> <!--&lt;!&ndash;&lt;!&ndash; {{dataProviderInfo.relatedDatasources?.size | number}}&ndash;&gt;&ndash;&gt;-->
<ng-container *ngTemplateOutlet="search_box; <!--&lt;!&ndash;&lt;!&ndash; </span>&ndash;&gt;&ndash;&gt;-->
context: { fetch: fetchOrps, type: 'other', typeName: 'Other Research Products', <!--&lt;!&ndash; </div>&ndash;&gt;-->
searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults, params: getParamsForSearchLink('other')}"> <!--&lt;!&ndash; </div>&ndash;&gt;-->
</ng-container> <!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- </ng-container>-->
<!-- <ng-container *ngIf="dataProviderInfo.tabs2.indexOf('Projects') != -1">--> <!--&lt;!&ndash; <ng-container *ngIf="dataProviderInfo.tabs2.indexOf('Publications') != -1">&ndash;&gt;-->
<ng-container *ngTemplateOutlet="search_box; <!-- <ng-container *ngTemplateOutlet="search_box;-->
context: { fetch: fetchProjects, type: 'project', typeName: 'Projects', <!-- context: { fetch: fetchPublications, type: 'publications', typeName: 'Publications',-->
searchLinkToAdvancedPage: properties.searchLinkToAdvancedProjects, params: getParamsForSearchLink()}"> <!-- searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults, params: getParamsForSearchLink('publications')}">-->
</ng-container> <!-- </ng-container>-->
<!-- </ng-container>--> <!--&lt;!&ndash; <a [queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'type', 'qf'], ['relprojectid', projectId, type, 'false'])"&ndash;&gt;-->
<!-- <ng-container *ngIf="dataProviderInfo.tabs2.indexOf('Content Providers') != -1">--> <!--&lt;!&ndash; [routerLink]="properties.searchLinkToAdvancedResults">&ndash;&gt;-->
<ng-container *ngTemplateOutlet="search_box; <!--&lt;!&ndash; </ng-container>&ndash;&gt;-->
context: { fetch: fetchDataproviders, type: 'other', typeName: 'Content Providers', <!--&lt;!&ndash; <ng-container *ngIf="dataProviderInfo.tabs2.indexOf('Research Data') != -1">&ndash;&gt;-->
searchLinkToAdvancedPage: properties.searchLinkToAdvancedDataProviders, params: getParamsForSearchLink()}"> <!-- <ng-container *ngTemplateOutlet="search_box;-->
</ng-container> <!-- context: { fetch: fetchDatasets, type: 'datasets', typeName: 'Research Data',-->
<!-- </ng-container>--> <!-- searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults, params: getParamsForSearchLink('datasets')}">-->
</div> <!-- </ng-container>-->
</div> <!--&lt;!&ndash; </ng-container>&ndash;&gt;-->
<div class="uk-margin-small-top uk-flex uk-flex-bottom"> <!--&lt;!&ndash; <ng-container *ngIf="dataProviderInfo.tabs2.indexOf('Software') != -1">&ndash;&gt;-->
<img src="assets/common-assets/graph.svg" style="opacity: 0.4"> <!-- <ng-container *ngTemplateOutlet="search_box;-->
<span class="uk-margin-small-left uk-text-small uk-text-baseline uk-text-muted"> <!-- context: { fetch: fetchSoftware, type: 'software', typeName: 'Software',-->
Powered by OpenAIRE Open Research Graph <!-- searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults, params: getParamsForSearchLink('software')}">-->
</span> <!-- </ng-container>-->
</div> <!--&lt;!&ndash; </ng-container>&ndash;&gt;-->
<!--&lt;!&ndash; <ng-container *ngIf="dataProviderInfo.tabs2.indexOf('Other Research Products') != -1">&ndash;&gt;-->
<!-- <ng-container *ngTemplateOutlet="search_box;-->
<!-- context: { fetch: fetchOrps, type: 'other', typeName: 'Other Research Products',-->
<!-- searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults, params: getParamsForSearchLink('other')}">-->
<!-- </ng-container>-->
<!--&lt;!&ndash; </ng-container>&ndash;&gt;-->
<!--&lt;!&ndash; <ng-container *ngIf="dataProviderInfo.tabs2.indexOf('Projects') != -1">&ndash;&gt;-->
<!-- <ng-container *ngTemplateOutlet="search_box;-->
<!-- context: { fetch: fetchProjects, type: 'project', typeName: 'Projects',-->
<!-- searchLinkToAdvancedPage: properties.searchLinkToAdvancedProjects, params: getParamsForSearchLink()}">-->
<!-- </ng-container>-->
<!--&lt;!&ndash; </ng-container>&ndash;&gt;-->
<!--&lt;!&ndash; <ng-container *ngIf="dataProviderInfo.tabs2.indexOf('Content Providers') != -1">&ndash;&gt;-->
<!-- <ng-container *ngTemplateOutlet="search_box;-->
<!-- context: { fetch: fetchDataproviders, type: 'other', typeName: 'Content Providers',-->
<!-- searchLinkToAdvancedPage: properties.searchLinkToAdvancedDataProviders, params: getParamsForSearchLink()}">-->
<!-- </ng-container>-->
<!--&lt;!&ndash; </ng-container>&ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
</div> </div>
<!-- <div *ngIf="showTabs">--> <!-- <div *ngIf="showTabs">-->
@ -569,17 +447,12 @@
<!-- </ul>--> <!-- </ul>-->
<!-- </div>--> <!-- </div>-->
<div class=" uk-width-1-3@m uk-width-1-1@s"> <div class="uk-width-1-3@m uk-width-1-1@s uk-padding-remove">
<div class="uk-card uk-card-default uk-padding-small"> <ul class="user-actions uk-list uk-card uk-card-default uk-padding">
<div> <li><addThis></addThis></li>
<div class="sideInfoTitle uk-margin-small-bottom uk-margin-small-top">Share - Bookmark</div>
<addThis></addThis>
</div>
<!-- Metrics --> <!-- Metrics -->
<div *ngIf="hasMetrics" class="uk-margin-top"> <li *ngIf="hasMetrics" class="uk-margin-medium-top">
<div class="sideInfoTitle uk-margin-small-bottom">Metrics</div> <div class="uk-text-center uk-flex uk-flex-middle uk-flex-center">
<div uk-grid class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle">
<div></div><!-- Open Citations-->
<div> <div>
<metrics [pageViews]="pageViews" <metrics [pageViews]="pageViews"
[id]="datasourceId" [entityType]="'datasources'" [entity]="'Content Provider'" [id]="datasourceId" [entityType]="'datasources'" [entity]="'Content Provider'"
@ -588,21 +461,373 @@
</metrics> </metrics>
</div> </div>
</div> </div>
</li>
</ul>
</div>
</div>
<div *ngIf="dataProviderInfo != null">
<div *ngIf="numberOfTabs > 0; else loadingBlock" class="main-tabs-div">
<ng-template #summary_tab>
<div class="uk-grid uk-margin-remove">
<div *ngIf="hasPrimaryInfo" class="uk-width-expand uk-padding uk-inline">
<!-- Description -->
<div *ngIf="dataProviderInfo.description" class="uk-margin-medium-bottom">
<div class="uk-text-muted">Description</div>
<div class="uk-text-justify uk-height-max-medium uk-overflow-auto">
<span>{{dataProviderInfo.description.substring(0, showNumDescription)}}</span>
<span *ngIf="showNumDescription == thresholdDescription &&
dataProviderInfo.description.length > thresholdDescription">...</span>
</div>
<div *ngIf="showNumDescription == thresholdDescription &&
dataProviderInfo.description.length > thresholdDescription" class="uk-text-right">
<a (click)="showNumDescription = dataProviderInfo.description.length;">
Read more
</a>
</div>
<div *ngIf="dataProviderInfo.description && showNumDescription > thresholdDescription"
class="uk-text-right">
<a (click)="showNumDescription = thresholdDescription;">
Read less
</a>
</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"
class="uk-margin-medium-bottom uk-animation-fade uk-animation-fast">
<span *ngIf="dataProviderInfo.aggregationStatus.fulltexts && dataProviderInfo.aggregationStatus.fulltexts != -1"
class="uk-margin-right">
<span class="uk-text-muted">Collected full-texts: </span>
{{dataProviderInfo.aggregationStatus.fulltexts | number}}
</span>
<span *ngIf="dataProviderInfo.aggregationStatus.fundedContent && dataProviderInfo.aggregationStatus.fundedContent != -1"
class="uk-display-inline-block">
<span class="uk-text-muted">Results with funding information: </span>
{{dataProviderInfo.aggregationStatus.fundedContent | number}}
</span>
<span *ngIf="dataProviderInfo.aggregationStatus.lastUpdateDate"
class="uk-display-inline-block">
<span class="uk-text-muted">Latest data aggregation: </span>
{{dataProviderInfo.aggregationStatus.lastUpdateDate | date}}
</span>
</div>
<div *ngIf="dataProviderInfo.countries != undefined && dataProviderInfo.countries.length > 0"
class="uk-margin-medium-bottom">
<span class="uk-text-muted">Countries:</span>
{{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-muted">Subjects </div>
<span *ngFor="let subject of dataProviderInfo.subjects.slice(0, showNumSubjects) let i=index">
<span>{{subject}}</span>
<span *ngIf="(i < dataProviderInfo.subjects.length-1)">, </span>
</span>
<span *ngIf="showNumSubjects == thresholdSubjects && dataProviderInfo.organizations.length > thresholdSubjects"> ... </span>
</div>
<div *ngIf="showNumSubjects == thresholdSubjects && dataProviderInfo.organizations.length > thresholdSubjects"
class="uk-width-1-1 uk-text-right">
<a (click)="showNumSubjects = dataProviderInfo.subjects.length;">
View all {{dataProviderInfo.subjects.length | number}} subjects
</a>
</div>
<div *ngIf="showNumSubjects > thresholdSubjects" class="uk-width-1-1 uk-text-right">
<a (click)="showNumSubjects = thresholdSubjects;">View less subjects</a>
</div>
</div>
</div>
<div *ngIf="hasSecondaryInfo"
[class]="'uk-padding uk-inline ' + (hasPrimaryInfo?'uk-width-1-3@m right-column': 'uk-width-expand')">
<div *ngIf="dataProviderInfo.oaiPmhURL || dataProviderInfo.openDoarId || dataProviderInfo.r3DataId"
class="uk-margin-medium-bottom">
<div *ngIf="dataProviderInfo.oaiPmhURL">
<span class="uk-text-muted">OAI-PMH: </span>
<a target="_blank" href="{{dataProviderInfo.oaiPmhURL}}">
{{dataProviderInfo.oaiPmhURL}}
<span class="custom-external custom-icon space"></span>
</a>
</div>
<div *ngIf="dataProviderInfo.openDoarId" class="uk-display-inline-block">
<span class="uk-text-muted">Detailed information @ </span>
<a target="_blank" href="{{properties.openDoarURL+dataProviderInfo.openDoarId}}">
OpenDOAR
<span class="custom-external custom-icon space"></span>
</a>
</div>
<span *ngIf="dataProviderInfo.r3DataId" class="uk-display-inline-block">
<span class="uk-text-muted">Detailed information @ </span>
<a target="_blank" href="{{properties.r3DataURL+dataProviderInfo.r3DataId}}">
re3data.org
<span class="custom-external custom-icon space"></span>
</a>
</span>
</div>
<!-- Organizations -->
<!-- <div class="uk-text-muted uk-text-small">Organizations</div>-->
<!-- <div class="uk-height-max-medium uk-overflow-auto">-->
<div *ngIf="dataProviderInfo.organizations && dataProviderInfo.organizations.length > 0"
class="uk-margin-medium-bottom">
<div class="uk-height-max-medium uk-overflow-auto">
<span class="uk-text-muted">Organizations: </span>
<span *ngFor="let organization of dataProviderInfo.organizations.slice(0, showNumOrganizations) let i=index"
[attr.uk-tooltip]="organization.acronym && organization.name ? 'pos:right; delay:10' : 'cls: uk-invisible'"
[title]="organization.name">
<a *ngIf="organization.id"
[queryParams]="{organizationId: organization.id}" routerLinkActive="router-link-active"
routerLink="/search/organization">
<u>{{(organization.acronym) ? organization.acronym : ''}}</u>
<u>{{(!organization.acronym && organization.name) ? organization.name : ''}}</u>
</a>
<span *ngIf="!organization.id">
<span *ngIf="organization.acronym">{{organization.acronym}}</span>
<span *ngIf="!organization.acronym && organization.name">{{organization.name}}</span>
<span *ngIf="(i < dataProviderInfo.organizations.length-1)">,</span>
</span>
<span *ngIf="(i < dataProviderInfo.organizations.length-1)">, </span>
</span>
<span *ngIf="showNumOrganizations == thresholdOrganizations && dataProviderInfo.organizations.length > thresholdOrganizations"> ... </span>
</div>
<div *ngIf="showNumOrganizations == thresholdOrganizations && dataProviderInfo.organizations.length > thresholdOrganizations"
class="uk-width-1-1 uk-text-right">
<a (click)="showNumOrganizations = dataProviderInfo.organizations.length;">
View all {{dataProviderInfo.organizations.length | number}} organizations
</a>
</div>
<div *ngIf="showNumOrganizations > thresholdOrganizations" class="uk-width-1-1 uk-text-right">
<a (click)="showNumOrganizations = thresholdOrganizations;">View less organizations</a>
</div>
</div>
</div>
</div> </div>
<!-- <metrics [pageViews]="pageViews" shortView=true--> </ng-template>
<!-- [id]="datasourceId" [entityType]="'datasources'" [entity]="'Content Provider'"--> <ng-template #projects_tab>
<!-- (metricsResults)="metricsResults($event)" [properties]=properties>--> <div class="uk-grid uk-margin-remove">
<!-- </metrics>--> <div class="uk-width-expand uk-padding">
<!-- Metrics --> <ng-container *ngTemplateOutlet="search_tab;
<!-- <div class="uk-margin-top">--> context: { fetch: fetchProjects, type: 'project', urlParam: 'projectId',
<!-- <div class="sideInfoTitle uk-margin-small-bottom">Metrics</div>--> searchLinkToAdvancedPage: properties.searchLinkToAdvancedProjects,
<!-- <div uk-grid class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle">--> params: getParamsForSearchLink()}">
<!-- <div></div>&lt;!&ndash; OpenAIRE Metrics &ndash;&gt;--> </ng-container>
<!-- </div>--> </div>
<!-- </div>--> </div>
</ng-template>
<ng-template #datasources_tab>
<div class="uk-grid uk-margin-remove">
<div class="uk-width-expand uk-padding">
<ng-container *ngTemplateOutlet="search_tab;
context: { fetch: fetchDataproviders, type: 'dataprovider', urlParam: 'datasourceId',
searchLinkToAdvancedPage: properties.searchLinkToAdvancedDataProviders,
params: getParamsForSearchLink()}">
</ng-container>
</div>
</div>
</ng-template>
<ng-template #relatedDatasources_tab>
<div class="uk-grid uk-margin-remove">
<div class="uk-width-expand uk-padding">
<relatedDatasourcesTab
[dataproviderId]="datasourceId"
[results]="dataProviderInfo.relatedDatasources"
[loading]="loadingRelatedDatasources"
[fetchResults]="fetchAggregatorsResults"
[collectedFromName]="dataProviderInfo.title.name"
[properties]=properties
[modal]="relatedDatasourcesModal">
</relatedDatasourcesTab>
</div>
</div>
</ng-template>
<ng-template #publications_tab>
<div class="uk-grid uk-margin-remove">
<div class="uk-width-expand uk-padding">
<ng-container *ngTemplateOutlet="search_tab;
context: { fetch: fetchPublications, type: 'publication', urlParam: 'articleId',
searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
params: getParamsForSearchLink('publications')}">
</ng-container>
</div>
</div>
</ng-template>
<ng-template #datasets_tab>
<div class="uk-grid uk-margin-remove">
<div class="uk-width-expand uk-padding">
<ng-container *ngTemplateOutlet="search_tab;
context: { fetch: fetchDatasets, type: 'dataset', urlParam: 'datasetId',
searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
params: getParamsForSearchLink('datasets')}">
</ng-container>
</div>
</div>
</ng-template>
<ng-template #software_tab>
<div class="uk-grid uk-margin-remove">
<div class="uk-width-expand uk-padding">
<ng-container *ngTemplateOutlet="search_tab;
context: { fetch: fetchSoftware, type: 'software', urlParam: 'softwareId',
searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
params: getParamsForSearchLink('software')}">
</ng-container>
</div>
</div>
</ng-template>
<ng-template #other_tab>
<div class="uk-grid uk-margin-remove">
<div class="uk-width-expand uk-padding">
<ng-container *ngTemplateOutlet="search_tab;
context: { fetch: fetchOrps, type: 'other', urlParam: 'orpId',
searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
params: getParamsForSearchLink('other')}">
</ng-container>
</div>
</div>
</ng-template>
<ng-template #statistics_tab>
<div class="">
<div class="uk-width-expand uk-padding">
<errorMessages [status]="[fetchPublications.searchUtils.status, fetchDatasets.searchUtils.status,
fetchSoftware.searchUtils.status, fetchOrps.searchUtils.status]"
[type]="'statistics'" tab_error_class=true></errorMessages>
<div
*ngIf="statsClicked &&
(fetchPublications.searchUtils.status == errorCodes.DONE || fetchDatasets.searchUtils.status == errorCodes.DONE
|| fetchSoftware.searchUtils.status == errorCodes.DONE || fetchOrps.searchUtils.status == errorCodes.DONE)">
<statisticsTab [fetchPublications]="fetchPublications" [fetchDatasets]="fetchDatasets"
[fetchSoftware]="fetchSoftware" [fetchOther]="fetchOrps"
[datasourceId]="datasourceId">
</statisticsTab>
</div>
</div>
</div>
</ng-template>
<my-tabs [class]="numberOfTabs > 2 ? 'uk-visible@m' : ''" (selectedActiveTab)="onSelectActiveTab($event)">
<my-tab *ngIf="hasPrimaryInfo || hasSecondaryInfo"
[tabTitle]="'Summary'" [tabId]="'summary'" [class]="(firstTab === 'summary')?'uk-active':''">
<ng-container *ngTemplateOutlet="summary_tab;"></ng-container>
</my-tab>
<my-tab *ngIf="fetchProjects.searchUtils.totalResults > 0"
[tabTitle]="'Projects'" [tabNumber]="fetchProjects.searchUtils.totalResults"
[tabId]="'projects'" [class]="(firstTab === 'projects')?'uk-active':''">
<ng-container *ngTemplateOutlet="projects_tab;"></ng-container>
</my-tab>
<my-tab *ngIf="fetchDataproviders.searchUtils.totalResults > 0"
[tabTitle]="'Content Providers'" [tabNumber]="fetchDataproviders.searchUtils.totalResults"
[tabId]="'datasources'" [class]="(firstTab === 'datasources')?'uk-active':''">
<ng-container *ngTemplateOutlet="datasources_tab;"></ng-container>
</my-tab>
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
[tabTitle]="'Related Content Providers'" [tabId]="'relatedDatasources'"
[class]="(firstTab === 'relatedDatasources')?'uk-active':''">
<ng-container *ngTemplateOutlet="relatedDatasources_tab;"></ng-container>
</my-tab>
<my-tab *ngIf="fetchPublications.searchUtils.totalResults > 0"
[tabTitle]="'Publications'" [tabNumber]="fetchPublications.searchUtils.totalResults"
[tabId]="'publications'" [class]="(firstTab === 'publications')?'uk-active':''">
<ng-container *ngTemplateOutlet="publications_tab;"></ng-container>
</my-tab>
<my-tab *ngIf="fetchDatasets.searchUtils.totalResults > 0"
[tabTitle]="'Research Data'" [tabNumber]="fetchDatasets.searchUtils.totalResults"
[tabId]="'datasets'" [class]="(firstTab === 'datasets')?'uk-active':''">
<ng-container *ngTemplateOutlet="datasets_tab;"></ng-container>
</my-tab>
<my-tab *ngIf="fetchSoftware.searchUtils.totalResults > 0"
[tabTitle]="'Software'" [tabNumber]="fetchSoftware.searchUtils.totalResults"
[tabId]="'software'" [class]="(firstTab === 'software')?'uk-active':''">
<ng-container *ngTemplateOutlet="software_tab;"></ng-container>
</my-tab>
<my-tab *ngIf="fetchOrps.searchUtils.totalResults > 0"
[tabTitle]="'Other Research'" [tabNumber]="fetchOrps.searchUtils.totalResults"
[tabId]="'other'" [class]="(firstTab === 'other')?'uk-active':''">
<ng-container *ngTemplateOutlet="other_tab;"></ng-container>
</my-tab>
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
[tabTitle]="'Statistics'" [statistics]="true" [tabId]="'statistics'"
[class]="(firstTab === 'statistics')?'uk-active':''">
<ng-container *ngTemplateOutlet="statistics_tab;"></ng-container>
</my-tab>
</my-tabs>
<my-small-tabs *ngIf="numberOfTabs > 2" class="uk-hidden@m" (selectedActiveTab)="onSelectActiveTab($event)">
<my-tab *ngIf="hasPrimaryInfo || hasSecondaryInfo"
[tabTitle]="'Summary'" [tabId]="'summary'" [class]="(firstTab === 'summary')?'uk-active':''">
<ng-container *ngTemplateOutlet="summary_tab;"></ng-container>
</my-tab>
<my-tab *ngIf="fetchProjects.searchUtils.totalResults > 0"
[tabTitle]="'Projects'" [tabNumber]="fetchProjects.searchUtils.totalResults"
[tabId]="'projects'" [class]="(firstTab === 'projects')?'uk-active':''">
<ng-container *ngTemplateOutlet="projects_tab;"></ng-container>
</my-tab>
<my-tab *ngIf="fetchDataproviders.searchUtils.totalResults > 0"
[tabTitle]="'Content Providers'" [tabNumber]="fetchDataproviders.searchUtils.totalResults"
[tabId]="'datasources'" [class]="(firstTab === 'datasources')?'uk-active':''">
<ng-container *ngTemplateOutlet="datasources_tab;"></ng-container>
</my-tab>
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
[tabTitle]="'Related Content Providers'" [tabId]="'relatedDatasources'"
[class]="(firstTab === 'relatedDatasources')?'uk-active':''">
<ng-container *ngTemplateOutlet="relatedDatasources_tab;"></ng-container>
</my-tab>
<my-tab *ngIf="fetchPublications.searchUtils.totalResults > 0"
[tabTitle]="'Publications'" [tabNumber]="fetchPublications.searchUtils.totalResults"
[tabId]="'publications'" [class]="(firstTab === 'publications')?'uk-active':''">
<ng-container *ngTemplateOutlet="publications_tab;"></ng-container>
</my-tab>
<my-tab *ngIf="fetchDatasets.searchUtils.totalResults > 0"
[tabTitle]="'Research Data'" [tabNumber]="fetchDatasets.searchUtils.totalResults"
[tabId]="'datasets'" [class]="(firstTab === 'datasets')?'uk-active':''">
<ng-container *ngTemplateOutlet="datasets_tab;"></ng-container>
</my-tab>
<my-tab *ngIf="fetchSoftware.searchUtils.totalResults > 0"
[tabTitle]="'Software'" [tabNumber]="fetchSoftware.searchUtils.totalResults"
[tabId]="'software'" [class]="(firstTab === 'software')?'uk-active':''">
<ng-container *ngTemplateOutlet="software_tab;"></ng-container>
</my-tab>
<my-tab *ngIf="fetchOrps.searchUtils.totalResults > 0"
[tabTitle]="'Other Research'" [tabNumber]="fetchOrps.searchUtils.totalResults"
[tabId]="'other'" [class]="(firstTab === 'other')?'uk-active':''">
<ng-container *ngTemplateOutlet="other_tab;"></ng-container>
</my-tab>
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
[tabTitle]="'Statistics'" [statistics]="true" [tabId]="'statistics'"
[class]="(firstTab === 'statistics')?'uk-active':''">
<ng-container *ngTemplateOutlet="statistics_tab;"></ng-container>
</my-tab>
</my-small-tabs>
</div>
<ng-template #loadingBlock>
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center" ></span>
</div> </div>
<div class="uk-margin-small-top uk-text-muted uk-text-small uk-text-right"> </ng-template>
Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
<div class="uk-margin-small-top uk-flex">
<!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2">
<img src="assets/common-assets/graph.svg" style="opacity: 0.4">
<span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by OpenAIRE Open Research Graph</span>
<span class="uk-text-baseline uk-text-muted">
. Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
<!--Feedback-->
<div class="uk-width-expand uk-text-right">
<span class="uk-text-muted">Any information missing or wrong?</span>
<a (click)="showFeedback = true; scroll()" class="portal-link space">Report an Issue</a>
</div> </div>
</div> </div>
</div> </div>
@ -616,51 +841,51 @@
[showForm]="showFeedback" (show)="showFeedback = $event"></feedback> [showForm]="showFeedback" (show)="showFeedback = $event"></feedback>
<!-- Statistics --> <!-- Statistics -->
<!-- && dataProviderInfo.tabs2 && dataProviderInfo.tabs2.indexOf('Statistics') != -1--> <!-- && dataProviderInfo.tabs2 && dataProviderInfo.tabs2.indexOf('Statistics') != -1-->
<modal-alert *ngIf="dataProviderInfo && <!-- <modal-alert *ngIf="dataProviderInfo &&-->
(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0 <!-- (fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0-->
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)" <!-- || fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"-->
classBody="uk-width-xxlarge uk-padding-remove-right" #statisticsModal> <!-- classBody="uk-width-xxlarge uk-padding-remove-right" #statisticsModal>-->
<landing-header [properties]="properties" [title]="dataProviderInfo.title.name" <!-- <landing-header [properties]="properties" [title]="dataProviderInfo.title.name"-->
[subTitle]="(dataProviderInfo.officialName <!-- [subTitle]="(dataProviderInfo.officialName-->
&& dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null" <!-- && dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null"-->
[entityType]="'content provider'" <!-- [entityType]="'content provider'"-->
[types]="dataProviderInfo.type ? [dataProviderInfo.type] : null"> <!-- [types]="dataProviderInfo.type ? [dataProviderInfo.type] : null">-->
</landing-header> <!-- </landing-header>-->
<div *ngIf="statsClicked" class="uk-margin-medium-top uk-margin-medium-right"> <!-- <div *ngIf="statsClicked" class="uk-margin-medium-top uk-margin-medium-right">-->
<statisticsTab [fetchPublications]="fetchPublications" [fetchDatasets]="fetchDatasets" <!-- <statisticsTab [fetchPublications]="fetchPublications" [fetchDatasets]="fetchDatasets"-->
[fetchSoftware]="fetchSoftware" [fetchOther]="fetchOrps" <!-- [fetchSoftware]="fetchSoftware" [fetchOther]="fetchOrps"-->
[datasourceId]="datasourceId"></statisticsTab> <!-- [datasourceId]="datasourceId"></statisticsTab>-->
</div> <!-- </div>-->
</modal-alert> <!-- </modal-alert>-->
<!-- Related Content Providers --> <!-- Related Content Providers -->
<!-- && dataProviderInfo.relatedDatasources && dataProviderInfo.relatedDatasources.size > 0--> <!-- && dataProviderInfo.relatedDatasources && dataProviderInfo.relatedDatasources.size > 0-->
<!-- && dataProviderInfo.tabs2 && dataProviderInfo.tabs2.indexOf('Related Content Providers') != -1--> <!-- && dataProviderInfo.tabs2 && dataProviderInfo.tabs2.indexOf('Related Content Providers') != -1-->
<modal-alert *ngIf="dataProviderInfo && <!-- <modal-alert *ngIf="dataProviderInfo &&-->
(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0 <!-- (fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0-->
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)" <!-- || fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"-->
classBody="uk-width-xxlarge uk-padding-remove-right" #relatedDatasourcesModal> <!-- classBody="uk-width-xxlarge uk-padding-remove-right" #relatedDatasourcesModal>-->
<landing-header [properties]="properties" [title]="dataProviderInfo.title.name" <!-- <landing-header [properties]="properties" [title]="dataProviderInfo.title.name"-->
[subTitle]="(dataProviderInfo.officialName <!-- [subTitle]="(dataProviderInfo.officialName-->
&& dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null" <!-- && dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null"-->
[entityType]="'content provider'" <!-- [entityType]="'content provider'"-->
[types]="dataProviderInfo.type ? [dataProviderInfo.type] : null"> <!-- [types]="dataProviderInfo.type ? [dataProviderInfo.type] : null">-->
</landing-header> <!-- </landing-header>-->
<div class="uk-margin-medium-top uk-margin-medium-right"> <!-- <div class="uk-margin-medium-top uk-margin-medium-right">-->
<!-- [fetchPublications]="fetchAggregatorsPublications"--> <!--&lt;!&ndash; [fetchPublications]="fetchAggregatorsPublications"&ndash;&gt;-->
<!-- [fetchDatasets]="fetchAggregatorsDatasets"--> <!--&lt;!&ndash; [fetchDatasets]="fetchAggregatorsDatasets"&ndash;&gt;-->
<!-- [fetchSoftware]="fetchAggregatorsSoftware"--> <!--&lt;!&ndash; [fetchSoftware]="fetchAggregatorsSoftware"&ndash;&gt;-->
<!-- [fetchOrps]="fetchAggregatorsOrps"--> <!--&lt;!&ndash; [fetchOrps]="fetchAggregatorsOrps"&ndash;&gt;-->
<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>-->
</modal-alert> <!-- </modal-alert>-->
</div> </div>

View File

@ -22,6 +22,9 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {HelperService} from "../../utils/helper/helper.service"; import {HelperService} from "../../utils/helper/helper.service";
import {Location} from "@angular/common"; import {Location} from "@angular/common";
import {StringUtils} from "../../utils/string-utils.class"; import {StringUtils} from "../../utils/string-utils.class";
import {SearchResult} from "../../utils/entities/searchResult";
import {ResultPreview} from "../../utils/result-preview/result-preview";
import {IndexInfoService} from "../../utils/indexInfo.service";
@Component({ @Component({
@ -75,6 +78,9 @@ export class DataProviderComponent {
public fetchAggregatorsSoftware: FetchResearchResults; public fetchAggregatorsSoftware: FetchResearchResults;
public fetchAggregatorsOrps: FetchResearchResults; public fetchAggregatorsOrps: FetchResearchResults;
public fetchAggregatorsResults: FetchResearchResults; public fetchAggregatorsResults: FetchResearchResults;
public searchNumber: number = 5;
public aggregationStatusIsInitialized: boolean = false;
public loadingRelatedDatasources: boolean = true; public loadingRelatedDatasources: boolean = true;
@ -82,6 +88,10 @@ export class DataProviderComponent {
public activeTab: string = ""; public activeTab: string = "";
public showTabs: boolean = false; public showTabs: boolean = false;
public firstTab: string = "";
public _numberOfTabs: number = 0;
public tabsAreInitialized: boolean = false;
public routerHelper: RouterHelper = new RouterHelper(); public routerHelper: RouterHelper = new RouterHelper();
public errorCodes: ErrorCodes = new ErrorCodes(); public errorCodes: ErrorCodes = new ErrorCodes();
public pageContents = null; public pageContents = null;
@ -129,7 +139,8 @@ export class DataProviderComponent {
private _searchDataprovidersService: SearchDataprovidersService, private _searchDataprovidersService: SearchDataprovidersService,
private seoService: SEOService, private seoService: SEOService,
private helper: HelperService, private helper: HelperService,
private _location: Location) { private _location: Location,
private indexInfoService: IndexInfoService) {
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);
@ -143,9 +154,13 @@ export class DataProviderComponent {
this.route.data this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => { .subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific; this.properties = data.envSpecific;
if(this.properties.lastIndexUpdate) { this.indexInfoService.getLastIndexDate(this.properties).subscribe(lastIndexUpdate => {
this.indexUpdateDate = new Date(this.properties.lastIndexUpdate); if(lastIndexUpdate) {
} this.indexUpdateDate = new Date(lastIndexUpdate);
} else if(this.properties.lastIndexUpdate) {
this.indexUpdateDate = new Date(this.properties.lastIndexUpdate);
}
});
//this.getDivContents(); //this.getDivContents();
this.getPageContents(); this.getPageContents();
this.updateUrl(data.envSpecific.baseLink + this._router.url); this.updateUrl(data.envSpecific.baseLink + this._router.url);
@ -156,6 +171,7 @@ export class DataProviderComponent {
this.updateDescription(""); this.updateDescription("");
this.datasourceId = data['datasourceId']; this.datasourceId = data['datasourceId'];
if (this.datasourceId) { if (this.datasourceId) {
this.initializeValues();
this.getDataProviderInfo(this.datasourceId); this.getDataProviderInfo(this.datasourceId);
} else { } else {
this.showLoading = false; this.showLoading = false;
@ -166,6 +182,27 @@ export class DataProviderComponent {
}); });
} }
public initializeValues() {
this._numberOfTabs = 0;
this.tabsAreInitialized = false;
this.dataProviderInfo = null;
this.aggregationStatusIsInitialized = false;
this.fetchProjects.searchUtils.status = this.errorCodes.LOADING;
this.fetchProjects.searchUtils.totalResults = 0;
this.fetchDataproviders.searchUtils.status = this.errorCodes.LOADING;
this.fetchDataproviders.searchUtils.totalResults = 0;
this.fetchPublications.searchUtils.status = this.errorCodes.LOADING;
this.fetchPublications.searchUtils.totalResults = 0;
this.fetchDatasets.searchUtils.status = this.errorCodes.LOADING;
this.fetchDatasets.searchUtils.totalResults = 0;
this.fetchSoftware.searchUtils.status = this.errorCodes.LOADING;
this.fetchSoftware.searchUtils.totalResults = 0;
this.fetchOrps.searchUtils.status = this.errorCodes.LOADING;
this.fetchOrps.searchUtils.totalResults = 0;
this.statsClicked = false;
this.metricsClicked = false;
}
private getPageContents() { private getPageContents() {
this.helper.getPageHelpContents(this.properties, this.communityId, this._router.url).subscribe(contents => { this.helper.getPageHelpContents(this.properties, this.communityId, this._router.url).subscribe(contents => {
this.pageContents = contents; this.pageContents = contents;
@ -212,6 +249,8 @@ export class DataProviderComponent {
this.seoService.createLinkForCanonicalURL(this.properties.baseLink + this._router.url); this.seoService.createLinkForCanonicalURL(this.properties.baseLink + this._router.url);
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
this.getDataProviderAggregationStatus(this.dataProviderInfo.originalId); this.getDataProviderAggregationStatus(this.dataProviderInfo.originalId);
} else {
this.aggregationStatusIsInitialized = true;
} }
this.initTabs(); this.initTabs();
this.showTabs = true; this.showTabs = true;
@ -223,9 +262,9 @@ export class DataProviderComponent {
this.showLoading = false; this.showLoading = false;
if (this.dataProviderInfo.tabs != undefined && this.dataProviderInfo.tabs.length > 0) { // if (this.dataProviderInfo.tabs != undefined && this.dataProviderInfo.tabs.length > 0) {
this.activeTab = this.dataProviderInfo.tabs[0].name; // this.activeTab = this.dataProviderInfo.tabs[0].name;
} // }
}, },
err => { err => {
//console.log(err); //console.log(err);
@ -249,6 +288,9 @@ export class DataProviderComponent {
err => { err => {
//console.log(err); //console.log(err);
this.handleError("Error getting content provider aggregation status for id: " + this.datasourceId, err); this.handleError("Error getting content provider aggregation status for id: " + this.datasourceId, err);
},
() => {
this.aggregationStatusIsInitialized = true;
} }
); );
} }
@ -623,4 +665,147 @@ export class DataProviderComponent {
private handleError(message: string, error) { private handleError(message: string, error) {
console.error("Content Provider Landing Page: " + message, error); console.error("Content Provider Landing Page: " + message, error);
} }
private getEntityName (entityType:string, plural:boolean, full:boolean): string {
if(entityType == "publication") {
return "publication" + (plural ? "s" : "");
} else if(entityType == "dataset") {
return (full ? "research data" : ("dataset" + (plural ? "s" : "")));
} else if(entityType == "software") {
return "software";
} else if(entityType == "other") {
return (full ? ("other research product" + (plural ? "s" : "")) : "other");
} else if(entityType == "dataprovider") {
return (full ? ("content provider" + (plural ? "s" : "")) : "dataprovider" + (plural ? "s" : ""));
} else {
return entityType + (plural ? "s" : "");
}
}
public getResultPreview(result: SearchResult, type: string): ResultPreview {
return ResultPreview.searchResultConvert(result, type);
}
public onSelectActiveTab(activeTabId) {
if(this.activeTab != "activaTabId") { // tab really changed
if (activeTabId == 'summary') {
this.activeTab = 'summary';
} else if (activeTabId == 'publications') {
this.activeTab = 'publications';
this.searchPublications(1, this.searchNumber);
} else if (activeTabId == 'datasets') {
this.activeTab = 'datasets';
this.searchDatasets(1, this.searchNumber);
} else if (activeTabId == 'software') {
this.activeTab = 'software';
this.searchSoftware(1, this.searchNumber);
} else if (activeTabId == 'other') {
this.activeTab = "other";
this.searchOrps(1, this.searchNumber);
} else if(activeTabId == 'projects') {
this.activeTab = "projects";
this.searchProjects(1, this.searchNumber);
} else if(activeTabId == 'datasources') {
this.activeTab = "datasources";
this.searchDatasources(1, this.searchNumber);
} else if(activeTabId == 'relatedDatasources') {
this.activeTab = "relatedDatasources";
this.searchRelatedDatasources(1, this.searchNumber);
} else if (activeTabId == 'statistics') {
this.activeTab = 'statistics';
this.statsClicked = true;
}
}
}
public get hasAggregationStatusInfo(): boolean {
return (!!this.dataProviderInfo.aggregationStatus &&
((!!this.dataProviderInfo.aggregationStatus.fulltexts && parseInt(this.dataProviderInfo.aggregationStatus.fulltexts) != -1)
|| (!!this.dataProviderInfo.aggregationStatus.fundedContent && parseInt(this.dataProviderInfo.aggregationStatus.fundedContent) != -1)
|| !!this.dataProviderInfo.aggregationStatus.lastUpdateDate));
}
public get hasJournalInfo(): boolean {
return (!!this.dataProviderInfo.journal && (
!!this.dataProviderInfo.journal['journal'] || !!this.dataProviderInfo.journal['issn'] ||
!!this.dataProviderInfo.journal['lissn'] || !!this.dataProviderInfo.journal['eissn'] ||
!!this.dataProviderInfo.journal['volume'] || !!this.dataProviderInfo.journal['issue'] ||
!!this.dataProviderInfo.journal['start_page'] || !!this.dataProviderInfo.journal['end_page']));
//return true;
}
public get hasPrimaryInfo(): boolean {
return !!this.dataProviderInfo && (
!!this.dataProviderInfo.description ||
this.hasJournalInfo ||
this.hasAggregationStatusInfo ||
!!this.dataProviderInfo.countries ||
(!!this.dataProviderInfo.subjects && this.dataProviderInfo.subjects.length > 0));
}
public get hasSecondaryInfo(): boolean {
return !!this.dataProviderInfo && (
(!!this.dataProviderInfo.organizations && this.dataProviderInfo.organizations.length > 0)
|| !!this.dataProviderInfo.oaiPmhURL || !!this.dataProviderInfo.openDoarId || !!this.dataProviderInfo.r3DataId
);
}
public get numberOfTabs(): number {
if(this.tabsAreInitialized) {
return this._numberOfTabs;
}
if(!this.dataProviderInfo || !this.aggregationStatusIsInitialized
|| this.fetchProjects.searchUtils.status == this.errorCodes.LOADING
|| this.fetchDataproviders.searchUtils.status == this.errorCodes.LOADING
|| this.fetchPublications.searchUtils.status == this.errorCodes.LOADING
|| this.fetchDatasets.searchUtils.status == this.errorCodes.LOADING
|| this.fetchSoftware.searchUtils.status == this.errorCodes.LOADING
|| this.fetchOrps.searchUtils.status == this.errorCodes.LOADING) {
return 0;
}
if (this.hasPrimaryInfo || this.hasSecondaryInfo) {
this.firstTab = "summary";
this._numberOfTabs++;
}
if(this.fetchProjects.searchUtils.totalResults > 0) {
if( this._numberOfTabs == 0) {
this.firstTab = "projects";
this.searchProjects(1, this.searchNumber);
}
this._numberOfTabs++;
}
if(this.fetchDataproviders.searchUtils.totalResults > 0) {
if( this._numberOfTabs == 0) {
this.firstTab = "datasources";
this.searchDatasources(1, this.searchNumber);
}
this._numberOfTabs++;
}
if(this.fetchPublications.searchUtils.totalResults > 0 || this.fetchDatasets.searchUtils.totalResults > 0
|| this.fetchSoftware.searchUtils.totalResults > 0 || this.fetchOrps.searchUtils.totalResults > 0) {
if( this._numberOfTabs == 0) {
this.firstTab = "relatedDatasources";
this.searchRelatedDatasources(1, this.searchNumber);
}
this._numberOfTabs += 2;
if(this.fetchPublications.searchUtils.totalResults > 0) {
this._numberOfTabs++;
}
if(this.fetchDatasets.searchUtils.totalResults > 0) {
this._numberOfTabs++;
}
if(this.fetchSoftware.searchUtils.totalResults > 0) {
this._numberOfTabs++;
}
if(this.fetchOrps.searchUtils.totalResults > 0) {
this._numberOfTabs++;
}
}
this.activeTab = this.firstTab;
this.tabsAreInitialized = true;
return this._numberOfTabs;
}
} }

View File

@ -38,6 +38,8 @@ import {LandingHeaderModule} from "../landing-utils/landing-header/landing-heade
import {AlertModalModule} from "../../utils/modal/alertModal.module"; import {AlertModalModule} from "../../utils/modal/alertModal.module";
import {NoLoadPaging} from "../../searchPages/searchUtils/no-load-paging.module"; import {NoLoadPaging} from "../../searchPages/searchUtils/no-load-paging.module";
import {FeedbackModule} from "../feedback/feedback.module"; import {FeedbackModule} from "../feedback/feedback.module";
import {ResultPreviewModule} from "../../utils/result-preview/result-preview.module";
import {TabsModule} from "../../utils/tabs/tabs.module";
@NgModule({ @NgModule({
imports: imports:
@ -45,7 +47,8 @@ import {FeedbackModule} from "../feedback/feedback.module";
TabResultModule, IFrameModule, ErrorMessagesModule, MetricsModule, LandingModule, TabResultModule, IFrameModule, ErrorMessagesModule, MetricsModule, LandingModule,
DataProvidersServiceModule, ProjectsServiceModule, SearchResearchResultsServiceModule, DataProvidersServiceModule, ProjectsServiceModule, SearchResearchResultsServiceModule,
PagingModule, Schema2jsonldModule, SEOServiceModule, ShowPublisherModule, HelperModule, PagingModule, Schema2jsonldModule, SEOServiceModule, ShowPublisherModule, HelperModule,
LandingHeaderModule, AlertModalModule, NoLoadPaging, FeedbackModule LandingHeaderModule, AlertModalModule, NoLoadPaging, FeedbackModule,
ResultPreviewModule, TabsModule
], ],
declarations: declarations:
[PublicationsTabComponent, DatasetsTabComponent, StatisticsTabComponent, ProjectsTabComponent, DatasourcesTabComponent, OrganizationsTabComponent, [PublicationsTabComponent, DatasetsTabComponent, StatisticsTabComponent, ProjectsTabComponent, DatasourcesTabComponent, OrganizationsTabComponent,

View File

@ -16,8 +16,9 @@ import {StringUtils} from "../../utils/string-utils.class";
<!-- || fetchDatasets.searchUtils.status == errorCodes.DONE--> <!-- || fetchDatasets.searchUtils.status == errorCodes.DONE-->
<!-- || fetchSoftware.searchUtils.status == errorCodes.DONE--> <!-- || fetchSoftware.searchUtils.status == errorCodes.DONE-->
<!-- || fetchOther.searchUtils.status == errorCodes.DONE)">--> <!-- || fetchOther.searchUtils.status == errorCodes.DONE)">-->
<ng-container *ngIf="fetchPublications.searchUtils.totalResults > 0 || (fetchDatasets.searchUtils.totalResults > 0 || <div *ngIf="fetchPublications.searchUtils.totalResults > 0 || (fetchDatasets.searchUtils.totalResults > 0 ||
fetchSoftware.searchUtils.totalResults > 0 || fetchOther.searchUtils.totalResults > 0)"> fetchSoftware.searchUtils.totalResults > 0 || fetchOther.searchUtils.totalResults > 0)"
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-padding uk-padding-remove-top">
<div *ngIf=" properties && !properties.useNewStatistisTool" class="uk-text-center uk-text-large">Produced research outcomes per year</div> <div *ngIf=" properties && !properties.useNewStatistisTool" class="uk-text-center uk-text-large">Produced research outcomes per year</div>
<i-frame [url]=docsTimelineUrl ></i-frame> <i-frame [url]=docsTimelineUrl ></i-frame>
@ -35,7 +36,6 @@ import {StringUtils} from "../../utils/string-utils.class";
<div *ngIf=" properties && !properties.useNewStatistisTool" class="uk-text-center uk-text-large">Research outcomes per funder</div> <div *ngIf=" properties && !properties.useNewStatistisTool" class="uk-text-center uk-text-large">Research outcomes per funder</div>
<i-frame [url]=docsFunderUrl ></i-frame> <i-frame [url]=docsFunderUrl ></i-frame>
</div> </div>
</ng-container>
<div *ngIf="fetchPublications.searchUtils.totalResults > 0 " <div *ngIf="fetchPublications.searchUtils.totalResults > 0 "
class="uk-padding uk-padding-remove-top"> class="uk-padding uk-padding-remove-top">
@ -48,6 +48,8 @@ import {StringUtils} from "../../utils/string-utils.class";
<div *ngIf=" properties && !properties.useNewStatistisTool" class="uk-text-center uk-text-large">Projects with most Research Data</div> <div *ngIf=" properties && !properties.useNewStatistisTool" class="uk-text-center uk-text-large">Projects with most Research Data</div>
<i-frame [url]=dataProjectsUrl></i-frame> <i-frame [url]=dataProjectsUrl></i-frame>
</div> </div>
</div>
` `
}) })