openaire-library/utils/result-preview/result-preview.component.html

<div *ngIf="result" [ngClass]="{'uk-card uk-card-default': isCard}">
	<div [ngClass]="{'uk-card-body': isCard}">
		<div class="uk-grid uk-flex uk-flex-middle">
			<div *ngIf="properties.enermapsURL && showEnermaps && result.enermapsId"
					 class=" uk-inline uk-width-auto  uk-text-center uk-visible-toggle">
				<img class="uk-width-medium" [src]="properties.enermapsURL +'/images/datasets/' + result.enermapsId + '.png'"
						 alt="Enermaps tool preview" loading="lazy">
				<div
						class="uk-overlay uk-margin-medium-left uk-overlay-default uk-position-bottom uk-hidden-hover uk-padding-small">
					<p>Visit <a
							class="custom-external uk-margin-right uk-margin-small-top"
							[href]="properties.enermapsURL + '/?shared_id=' + result.enermapsId" target="_blank">
						Enermaps tool
					</a></p>
				</div>
			</div>
			<div class="uk-width-expand">
				<!-- 1st section (title, metadata) -->
				<div class="uk-margin-small-bottom">
					<!-- Title -->
					<div>
						<h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
							<a *ngIf="!externalUrl && result.id" (click)="onClick()" [queryParams]="createParam()"
								 [routerLink]="url" class="uk-link uk-text-decoration-none uk-width-expand">
								<div *ngIf="(result.title) || result.acronym">
									<span *ngIf="result.acronym">
										{{result.acronym}}
									</span>
									<span *ngIf="result.acronym && (result.title)"> (</span>
									<span *ngIf="result.title" [innerHTML]="result.title"></span>
									<span *ngIf="result.acronym && result.title">)</span>
								</div>
								<div *ngIf="!result.title && !result.acronym">
									[no title available]
								</div>
							</a>
							<a *ngIf="externalUrl && result.id" (click)="onClick()"
								 target="_blank" [href]="externalUrl+result.id"
								 class="custom-external uk-link uk-text-decoration-none uk-width-expand">
								<span *ngIf="(result.title) || result.acronym">
									<span *ngIf="result.acronym">
										{{result.acronym}}
									</span>
									<span *ngIf="result.acronym && (result.title)"> (</span>
									<span *ngIf="result.title" [innerHTML]="result.title"></span>
									<span *ngIf="result.acronym && result.title">)</span>
								</span>
								<span *ngIf="!result.title && !result.acronym">
									[no title available]
								</span>
							</a>
							<div *ngIf="!result.id" class="uk-width-expand">
								<div *ngIf="(result.title) || result.acronym">
						<span *ngIf="result.acronym">
							{{result.acronym}}
						</span>
									<span *ngIf="result.acronym && (result.title)"> (</span>
									<span *ngIf="result.title" [innerHTML]="result.title"></span>
									<span *ngIf="result.acronym && result.title">)</span>
								</div>
								<div *ngIf="!result.title && !result.acronym">
									[no title available]
								</div>
							</div>
						</h2>
					</div>
					<!-- Metadata -->
					<div class="uk-margin-xsmall-top">
						<entity-metadata [entityType]="type" [types]="result.types" [startYear]="result.startYear?.toString()" [endYear]="result.endYear?.toString()"
														 [year]="result.year?.toString()" [openAccessMandatePublications]="result.openAccessMandatePublications"
														 [openAccessMandateDatasets]="result.openAccessMandateDatasets" [date]="" [embargoEndDate]="result.embargoEndDate"
														 [publisher]="result.publisher" [countries]="result.countries"
														 [languages]="result.languages" [programmingLanguages]="result.programmingLanguages"
														 [compatibility]="result.compatibility" [type]="type"
						></entity-metadata>
					</div>
				</div>
				<!-- 2nd section (labels only) -->
				<!--<div class="uk-margin-bottom">
					&lt;!&ndash; Labels &ndash;&gt;
					<div>
						<span
								*ngIf="result.accessMode && result.accessMode.toLowerCase() !== 'not available'"
								class="uk-label uk-text-truncate " [ngClass]="'uk-label-' + accessClass(result.accessMode)"
								title="Access Mode">
							{{result.accessMode}}
						</span>{{' '}}
						<span
								*ngIf="result.openAccessMandatePublications && (!result.openAccessMandateDatasets)"
								class="uk-label uk-label-success uk-text-truncate"
								title="Open Access mandate for {{openaireEntities.PUBLICATIONS}}">
							Open Access mandate for {{openaireEntities.PUBLICATIONS}}
						</span>{{' '}}
						<span
								*ngIf="result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets && (result.openAccessMandatePublications == undefined || !result.openAccessMandatePublications)"
								class="uk-label uk-label-success uk-text-truncate "
								title="Open Access mandate for {{openaireEntities.DATASETS}}">
							Open Access mandate for {{openaireEntities.DATASETS}}
						</span>{{' '}}
						<span
								*ngIf="result.openAccessMandatePublications != undefined && result.openAccessMandatePublications && result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets"
								class="uk-label uk-label-success uk-text-truncate"
								title="Open Access mandate for {{openaireEntities.PUBLICATIONS}} and {{openaireEntities.DATASETS}}">
							Open Access mandate for {{openaireEntities.PUBLICATIONS}} and {{openaireEntities.DATASETS}}
						</span>{{' '}}
						<span *ngIf="result.languages && result.languages.length > 0">
							<span
									*ngFor="let language of result.languages"
									class="uk-label" title="Language">
								{{language}}
							</span>{{' '}}
						</span>
						<span *ngIf="result.programmingLanguages && result.programmingLanguages.length > 0">
							<span
									*ngFor="let programmingLanguage of result.programmingLanguages"
									class="uk-label" title="Programming Language">
								{{programmingLanguage}}
							</span>{{" "}}
						</span>
						&lt;!&ndash;						<span &ndash;&gt;
						&lt;!&ndash;								*ngIf="result.sc39" class="uk-label" title="Special Clause 39">&ndash;&gt;
						&lt;!&ndash;							Special Clause 39&ndash;&gt;
						&lt;!&ndash;						</span>{{' '}}&ndash;&gt;
						<span
								*ngIf="result.compatibility && result.compatibility != '' && result.compatibility.toLowerCase() != 'not yet registered'"
								class="uk-label" title="Compatibility">
							{{result.compatibility}}
						</span>{{' '}}
						<span
								*ngIf="result.compatibility != undefined && result.compatibility != '' && result.compatibility.toLowerCase() == 'not yet registered'
											&& result.resultType != 'service'"
								class="uk-label" [class.uk-label-danger]="deposit" title="OpenAIRE Compatibility">
							{{result.compatibility}} <span *ngIf="properties.adminToolsPortalType == 'eosc'">in OpenAIRE</span>
						</span>{{' '}}
					</div>
				</div>-->
				<!-- 3rd section (funders, budget, authors, PIDs, publisher etc.) -->
				<div class="uk-text-small uk-margin-small-bottom">
					<!-- Funder -->
					<div *ngIf="result.funderShortname || result.code" class="uk-margin-xsmall-bottom">
						<span *ngIf="result.funderShortname">
							<span class="uk-text-meta">Funder: </span>
							{{result.funderShortname}}
						</span>
						<span *ngIf="result.code" [class.uk-margin-left]="result.funderShortname">
							<span class="uk-text-meta">{{openaireEntities.PROJECT}} Code: </span>
							{{result.code}}
						</span>
						<!--      Currently not parsed -->
						<!--      <span *ngIf="result.callIdentifier" [class.uk-margin-left]="(result.funderShortname || result.code)">-->
						<!--    <span class="uk-text-muted">Call for proposal: </span>-->
						<!--        {{result.callIdentifier}}-->
						<!--  </span>-->
					</div>
					<!-- Funder Budget -->
					<div *ngIf="result.budget || result.contribution" class="uk-margin-xsmall-bottom">
						<span *ngIf="result.budget">
							<span class="uk-text-meta">Overall Budget: </span>
							{{result.budget | number}}
							<span *ngIf="result.currency">{{result.currency}}</span>
						</span>
						<span *ngIf="result.contribution" [class.uk-margin-left]="result.budget">
							<span class="uk-text-meta">Funder Contribution: </span>
							{{result.contribution | number}}
							<span *ngIf="result.currency">{{result.currency}}</span>
						</span>
					</div>
					<!-- Authors -->
					<div *ngIf="result.authors" class="uk-flex uk-margin-xsmall-bottom">
						<showAuthors [authors]="result.authors" [authorsLimit]=10 [modal]="modal"
												 [showAll]=false></showAuthors>
					</div>
					<!-- Identifiers -->
					<div *ngIf="result.identifiers && result.identifiers.size > 0" class="uk-margin-xsmall-bottom">
						<showIdentifiers [identifiers]="result.identifiers"></showIdentifiers>
					</div>
					<!-- Projects -->
					<div *ngIf="result.projects && result.projects.length > 0" class="uk-margin-xsmall-bottom">
						<span class="uk-text-meta"> Project: </span>
						<span *ngFor="let project of result.projects.slice(0,10) let i=index">
							<span>
								{{project.funderShortname ? project.funderShortname : project.funderName}}
							</span>
							<span *ngIf="project.acronym || project.title">
								| {{ project.acronym ? project.acronym : (project.title.length > 25 ?
                  project.title.substring(0, 25) + '...' : project.title)}}
							</span>
							<span *ngIf="project.code"> ({{project.code}})</span>
							<span *ngIf="i < result.projects.length-1">,</span>
						</span>
						<span *ngIf="result.projects.length > 10">...</span>
					</div>
					<!-- Organizations -->
					<div *ngIf="showOrganizations && result.organizations && result.organizations.length > 0"
							 class="uk-margin-xsmall-bottom">
						<span class="uk-text-meta">Partners: </span>
						<span *ngFor="let organization of result.organizations.slice(0,10) let i=index">
							<span>{{organization.name}}</span>
							<span *ngIf="(i < result.organizations.length-1) && (i < 9)">, </span>
						</span>
						<span *ngIf="result.organizations.length > 10">...</span>
					</div>
					<!-- Website URL -->
					<div *ngIf="result.websiteURL && result.websiteURL != '' && !promoteWebsiteURL"
							 class="uk-margin-xsmall-bottom">
						<span class="uk-text-meta">Website URL: </span>
						<span>
							<a href="{{result.websiteURL}}" target="_blank" class="custom-external">
								{{result.websiteURL}}
							</a>
						</span>
					</div>
					<!-- OAI-PMH URL-->
					<div *ngIf="result.OAIPMHURL && result.OAIPMHURL != ''" class="uk-margin-xsmall-bottom">
						<span class="uk-text-meta">OAI-PMH URL: </span>
						<span>
							<a href="{{result.OAIPMHURL}}" target="_blank" class="custom-external">
								{{result.OAIPMHURL}}
							</a>
						</span>
					</div>
					<!-- Subjects -->
					<div *ngIf="showSubjects && result.subjects && result.subjects.length > 0"
							 class="uk-margin-xsmall-bottom">
						<span class="uk-text-meta">Subject: </span>
						<span *ngFor="let subject of  result.subjects.slice(0,10) let i = index">
							<span>{{subject}}</span>
							<span>{{(i < (result.subjects.slice(0, 10).length - 1)) ? ", " : ""}}</span>
							<span>{{(i == result.subjects.slice(0, 10).length - 1 && result.subjects.length > 10) ? "..." : ""}}</span>
						</span>
					</div>
				</div>
				<!-- 4th section (description) -->
				<div class="uk-text-small">
					<!-- Description -->
					<div *ngIf="result.description" class="multi-line-ellipsis lines-3">
						<p class="uk-text-meta" [innerHTML]="result.description"></p>
					</div>
				</div>
				<!-- 5th section(deposit only) -->
				<div>
					<span class="uk-flex uk-flex-right uk-margin-small-top">
						<a *ngIf="result.websiteURL && promoteWebsiteURL" href="{{result.websiteURL}}" target="_blank" type="submit"
							 class="uk-float-right uk-margin-small-left uk-display-inline-block uk-text-uppercase uk-button uk-button-text">
								<span class="uk-flex uk-flex-middle">
									<icon name="file_upload" type="outlined" [flex]="true" class="uk-margin-small-right"></icon>
									<span>Go to repository</span>
								</span>
						</a>
					</span>
				</div>
			</div>
		</div>
	</div>
	<!--&& loggedIn (card footer)-->
	<div *ngIf="result.hostedBy_collectedFrom || result.measure?.bip.length || result.measure?.counts.length"
			 class="uk-text-small" [class.uk-visible@m]="!result.measure?.bip.length && result.measure?.counts.length" [ngClass]="{'uk-card-footer': isCard}">
		<div class="uk-grid uk-grid-small uk-flex-between uk-flex-middle uk-grid-divider uk-margin-xsmall-bottom" uk-grid>
			<div *ngIf="result.hostedBy_collectedFrom" class="uk-width-auto uk-visible@m">
				<availableOn [availableOn]="result.hostedBy_collectedFrom" [source]="false"></availableOn>
			</div>
			<div *ngIf="hasActions" class="uk-width-expand uk-visible@m">
				<span class="uk-grid uk-grid-small uk-child-width-auto uk-text-xsmall" uk-grid>
					<span *ngIf="orcid">
						<orcid-work *ngIf="showOrcid && result.identifiers && result.identifiers.size > 0"
												[resultId]="result.relcanId" [resultTitle]="result.title"
												[type]="result.resultType" [pageType]="'search'"
												[putCodes]="result.orcidPutCodes" [givenPutCode]="true" [identifiers]="result.identifiers">
						</orcid-work>
					</span>
					<span *ngIf="orcid" class="uk-width-expand uk-text-right">
						<span *ngIf="result.orcidCreationDates?.length > 0" class="uk-display-inline-block">
							<span class="uk-text-meta">
								Added in ORCID:
							</span>
							<span *ngFor="let date of result.orcidCreationDates; let i=index">
								{{date | date: 'dd MMM yyyy'}}
								<span *ngIf="i < (result.orcidCreationDates.length - 1)">
									&
								</span>
							</span>
						</span>
					</span>
				</span>
			</div>
			<div *ngIf="result.measure?.bip.length || result.measure?.counts.length"
					 class="uk-text-xsmall uk-width-auto metrics uk-flex uk-flex-middle uk-flex-right uk-text-meta">
				<ng-container *ngIf="result.measure?.bip.length">
					<a class="uk-flex uk-flex-middle uk-link-reset">
						<icon customClass="bip-icon-hover" [flex]="true" [ratio]="0.7" [name]="result.measure.bip[0].icon"></icon>
						<span class="uk-margin-xsmall-left">{{result.measure.bip[0].value}}</span>
					</a>
					<div uk-drop="pos: top-left" class="uk-card uk-card-default uk-border uk-box-no-shadow uk-padding-small">
						<table>
							<tr *ngFor="let metric of result.measure.bip">
								<td class="bip-icon"><icon [flex]="true" [ratio]="0.7" [name]="metric.icon"></icon></td>
								<td class="uk-text-capitalize">{{metric.name}}</td>
								<td class="uk-text-bolder">{{metric.value}}</td>
							</tr>
						</table>
						<div class="uk-margin-top uk-flex uk-flex-middle uk-flex-center">
							<img class="uk-margin-xsmall-right" width="15" src="assets/common-assets/bip-minimal.svg" loading="lazy" alt="BIP!">
							<span class="uk-text-uppercase">Powered by <span class="uk-text-bolder">BIP!</span></span>
						</div>
					</div>
				</ng-container>
				<ng-container *ngIf="result.measure?.counts.length">
					<a class="uk-flex uk-flex-middle uk-margin-small-left uk-link-reset">
						<icon class="text-usage-counts-hover" [flex]="true" [ratio]="0.8" [name]="result.measure.counts[0].icon"></icon>
						<span class="uk-margin-xsmall-left">{{result.measure.counts[0].value}}</span>
					</a>
					<div uk-drop="pos: top-left" class="uk-card uk-card-default uk-border uk-box-no-shadow uk-padding-small">
					<table>
						<tr *ngFor="let metric of result.measure.counts">
							<td class="text-usage-counts"><icon [flex]="true" [ratio]="0.7" [name]="metric.icon"></icon></td>
							<td class="uk-text-capitalize">{{metric.name}}</td>
							<td class="uk-text-bolder">{{metric.value}}</td>
						</tr>
					</table>
					<div class="uk-margin-top uk-flex uk-flex-middle uk-flex-center">
						<span class="uk-text-uppercase">Powered by </span>
						<img class="uk-margin-xsmall-left" width="15" src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="BIP!">
					</div>
				</div>
				</ng-container>
			</div>
		</div>
	</div>
</div>