redesign of result-preview component

This commit is contained in:
Alex Martzios 2022-03-15 13:13:28 +02:00
parent 35a8a098c3
commit e1a632e63f
14 changed files with 138 additions and 122 deletions

View File

@ -18,10 +18,9 @@
</div> </div>
<ul class="uk-margin-top uk-list uk-margin search-results "> <ul class="uk-margin-top uk-list uk-margin search-results ">
<li *ngFor="let result of results" class="uk-animation-fade"> <li *ngFor="let result of results" class="uk-animation-fade">
<div class="uk-card uk-card-default uk-padding uk-card-hover"> <result-preview [properties]="properties" [showOrganizations]="true"
<result-preview [properties]="properties" [showOrganizations]="true" [showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"
[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"> [isCard]="true">
</result-preview> </result-preview>
</div>
</li> </li>
</ul> </ul>

View File

@ -16,29 +16,31 @@ import {properties} from "../../../../environments/environment";
@Component({ @Component({
selector: 'showIdentifiers', selector: 'showIdentifiers',
template: ` template: `
<div class="uk-text-muted">Persistent Identifiers</div> <!-- <div class="uk-text-muted">Persistent Identifiers</div> -->
<div class="uk-height-max-medium uk-overflow-auto uk-margin-small-top"> <div class="uk-height-max-medium uk-overflow-auto uk-margin-small-top">
<ng-container *ngFor="let key of keys let i=index"> <ng-container *ngFor="let key of keys let i=index">
<div [class.multi-line-ellipsis]="large.get(key) && !showAll" [class.lines-2]="keys.length === 1" [class.line-1]="keys.length > 1"> <!-- <div [class.multi-line-ellipsis]="large.get(key) && !showAll" [class.lines-2]="keys.length === 1" [class.line-1]="keys.length > 1"> -->
<p class="custom-break uk-margin-remove"> <div *ngIf="!showAll" class="uk-flex-inline uk-flex-wrap uk-margin-medium-right">
<span #content [id]="key"> <p class="uk-margin-remove">
<span class="uk-text-bold uk-text-uppercase">{{key}}: </span> <span #content [id]="key">
<ng-container *ngFor="let item of identifiers.get(key) let j=index"> <span class="uk-text-muted uk-text-uppercase">{{key}}: </span>
<a *ngIf="key=='doi'" [href]="properties.doiURL + item" target="_blank" class="uk-display-inline"> <ng-container *ngFor="let item of identifiers.get(key) let j=index">
{{item}} <span class="custom-external custom-icon"></span> <!-- TODO: custom external link icons -->
</a> <a *ngIf="key=='doi'" [href]="properties.doiURL + item" target="_blank" class="uk-display-inline">
<a *ngIf="key=='pmc'" [href]="properties.pmcURL + item" target="_blank"> {{item}} <span class="custom-external custom-icon"></span>
{{item}} <span class="custom-external custom-icon"></span> </a>
</a> <a *ngIf="key=='pmc'" [href]="properties.pmcURL + item" target="_blank">
<a *ngIf="key=='pmid'" [href]="properties.pmidURL + item" target="_blank"> {{item}} <span class="custom-external custom-icon"></span>
{{item}} <span class="custom-external custom-icon"></span> </a>
</a> <a *ngIf="key=='pmid'" [href]="properties.pmidURL + item" target="_blank">
<a *ngIf="key=='handle'" [href]="properties.handleURL + item" target="_blank"> {{item}} <span class="custom-external custom-icon"></span>
{{item}} <span class="custom-external custom-icon"></span> </a>
</a> <a *ngIf="key=='handle'" [href]="properties.handleURL + item" target="_blank">
<ng-container *ngIf="(j !== (identifiers.get(key).length - 1))">, </ng-container> {{item}} <span class="custom-external custom-icon"></span>
</ng-container> </a>
</span> <ng-container *ngIf="(j !== (identifiers.get(key).length - 1))">, </ng-container>
</ng-container>
</span>
</p> </p>
</div> </div>
</ng-container> </ng-container>

View File

@ -24,7 +24,7 @@ import {properties} from "../../../../../environments/environment";
</no-load-paging> </no-load-paging>
<ul class="uk-list uk-list-divider uk-margin"> <ul class="uk-list uk-list-divider uk-margin">
<li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)"> <li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)"></result-preview> <result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [isCard]="false"></result-preview>
</li> </li>
</ul> </ul>
<no-load-paging *ngIf="results.length > pageSize" [type]="type" <no-load-paging *ngIf="results.length > pageSize" [type]="type"

View File

@ -24,7 +24,7 @@ import {properties} from "../../../../../environments/environment";
</no-load-paging> </no-load-paging>
<ul class="uk-list uk-list-divider uk-margin"> <ul class="uk-list uk-list-divider uk-margin">
<li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)"> <li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false"></result-preview> <result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false" [isCard]="false"></result-preview>
</li> </li>
</ul> </ul>
<no-load-paging *ngIf="results.length > pageSize" [type]="type" <no-load-paging *ngIf="results.length > pageSize" [type]="type"

View File

@ -369,7 +369,8 @@
<ul class="uk-list uk-list-divider uk-margin"> <ul class="uk-list uk-list-divider uk-margin">
<li *ngFor="let item of researchResults.slice((relatedPage-1)*pageSize, relatedPage*pageSize)"> <li *ngFor="let item of researchResults.slice((relatedPage-1)*pageSize, relatedPage*pageSize)">
<result-preview [modal]="relationModal" [properties]="properties" <result-preview [modal]="relationModal" [properties]="properties"
[result]="getResultPreview(item)"></result-preview> [result]="getResultPreview(item)"
[isCard]="false"></result-preview>
</li> </li>
</ul> </ul>
<no-load-paging *ngIf="researchResults.length > pageSize" <no-load-paging *ngIf="researchResults.length > pageSize"

View File

@ -13,7 +13,8 @@
<div class="uk-grid uk-grid-divider"> <div class="uk-grid uk-grid-divider">
<div class="uk-width-expand@m uk-width-1-1 uk-first-column"> <div class="uk-width-expand@m uk-width-1-1 uk-first-column">
<result-preview [properties]="properties" [showOrcid]="false" [showOrganizations]="true" <result-preview [properties]="properties" [showOrcid]="false" [showOrganizations]="true"
[showSubjects]="true" [result]="result" [promoteWebsiteURL]="true"> [showSubjects]="true" [result]="result" [promoteWebsiteURL]="true"
[isCard]="false">
</result-preview> </result-preview>
</div> </div>

View File

@ -41,10 +41,10 @@ declare var UIkit: any;
[class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ ((showLoading || !isLoggedIn) ? 'uk-disabled ' : '') + (!isLoggedIn ? 'half-opacity' : '')"> [class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ ((showLoading || !isLoggedIn) ? 'uk-disabled ' : '') + (!isLoggedIn ? 'half-opacity' : '')">
<icon *ngIf="!showLoading" name="add" ratio="1"></icon> <icon *ngIf="!showLoading" name="add" ratio="1"></icon>
<span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span> <span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
<span class="uk-margin-small-left uk-flex uk-flex-middle">Add to <span class="uk-margin-small-left uk-flex uk-flex-middle">Add to&#160;
<span class="orcid-color space uk-flex uk-flex-middle"> <span class="orcid-color uk-flex uk-flex-middle">
<span>ORCID</span> <span>ORCID&#160;</span>
<img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid" style="width:16px; height:16px" loading="lazy">{{" "}} <img class="" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid" style="width:16px; height:16px" loading="lazy">{{" "}}
</span> </span>
</span> </span>
</a> </a>
@ -60,9 +60,9 @@ declare var UIkit: any;
[class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ (showLoading ? 'uk-disabled' : '')"> [class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ (showLoading ? 'uk-disabled' : '')">
<icon *ngIf="!showLoading" name="remove" ratio="0.8"></icon> <icon *ngIf="!showLoading" name="remove" ratio="0.8"></icon>
<span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span> <span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
<span class="uk-margin-small-left uk-flex uk-flex-middle">Delete from <span class="uk-margin-small-left uk-flex uk-flex-middle">Delete from&#160;
<span class="orcid-color space uk-flex uk-flex-middle"> <span class="orcid-color space uk-flex uk-flex-middle">
<span>ORCID</span> <span>ORCID&#160;</span>
<img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">{{" "}} <img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">{{" "}}
</span> </span>
</span> </span>
@ -84,7 +84,7 @@ declare var UIkit: any;
</span> </span>
<span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading <span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
[top_margin]="false"></loading></span> [top_margin]="false"></loading></span>
<span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Add to <span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Add to&#160;
<span class="orcid-color"> <span class="orcid-color">
ORCID ORCID
</span> </span>
@ -105,7 +105,7 @@ declare var UIkit: any;
</span> </span>
<span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading <span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
[top_margin]="false"></loading></span> [top_margin]="false"></loading></span>
<span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Delete from <span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Delete from&#160;
<span class="orcid-color"> <span class="orcid-color">
ORCID ORCID
</span> </span>
@ -142,9 +142,9 @@ declare var UIkit: any;
<ng-container *ngIf="pageType == 'my_search'"> <ng-container *ngIf="pageType == 'my_search'">
<span class="uk-margin-bottom uk-flex uk-flex-middle uk-flex-center"> <span class="uk-margin-bottom uk-flex uk-flex-middle uk-flex-center">
<span>ORCID</span> <span>ORCID&#160;</span>
<img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy"> <img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">
<span class="space">ACTIONS</span> <span class="space">&#160;ACTIONS</span>
</span> </span>
<span [attr.uk-tooltip]="(!putCodes || putCodes.length == 0) <span [attr.uk-tooltip]="(!putCodes || putCodes.length == 0)

View File

@ -9,10 +9,9 @@
</div> </div>
<ul class="uk-margin-top uk-list uk-margin search-results "> <ul class="uk-margin-top uk-list uk-margin search-results ">
<li *ngFor="let result of results" class="uk-animation-fade"> <li *ngFor="let result of results" class="uk-animation-fade">
<div class="uk-card uk-card-default uk-padding uk-card-hover"> <result-preview [properties]="properties" [showOrganizations]="true"
<result-preview [properties]="properties" [showOrganizations]="true" [showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"
[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"> [isCard]="true">
</result-preview> </result-preview>
</div>
</li> </li>
</ul> </ul>

View File

@ -21,7 +21,8 @@ import {EnvProperties} from "../../../utils/properties/env-properties";
<result-preview [modal]="modal" [properties]="properties" <result-preview [modal]="modal" [properties]="properties"
[result]="getResultPreview(result)" [result]="getResultPreview(result)"
[showSubjects]="showSubjects" [showSubjects]="showSubjects"
[showOrganizations]="showOrganizations"></result-preview> [showOrganizations]="showOrganizations"
[isCard]="false"></result-preview>
</li> </li>
</ul> </ul>
<no-load-paging *ngIf="totalResults > pageSize" [type]="type" <no-load-paging *ngIf="totalResults > pageSize" [type]="type"

View File

@ -231,30 +231,32 @@
[href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)" [href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
target="_blank"> OpenAIRE - Explore</a>. target="_blank"> OpenAIRE - Explore</a>.
</div> </div>
<!-- Total results, number of pages --> <div class="uk-flex uk-flex-between uk-flex-middle uk-flex-wrap uk-margin-medium-top uk-margin-bottom">
<h6 class="uk-margin-bottom"> <!-- Total results, number of pages -->
<ng-container *ngIf="results && searchUtils.totalResults > 0"> <h6 class="uk-margin-remove">
<span>{{searchUtils.totalResults|number}}</span> <ng-container *ngIf="results && searchUtils.totalResults > 0">
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span> <span>{{searchUtils.totalResults|number}}</span>
<span>{{searchUtils.page | number}}</span> <span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
<span class="uk-text-muted"> of {{(totalPages(searchUtils.totalResults)|number)}}</span> <span>{{searchUtils.page | number}}</span>
</ng-container> <span class="uk-text-muted"> of {{(totalPages(searchUtils.totalResults)|number)}}</span>
<ng-container *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING"> </ng-container>
<span>{{oldTotalResults|number}}</span> <ng-container *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span> <span>{{oldTotalResults|number}}</span>
<span>{{searchUtils.page | number}}</span> <span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
<span class="uk-text-muted"> of {{(totalPages(oldTotalResults)|number)}}</span> <span>{{searchUtils.page | number}}</span>
</ng-container> <span class="uk-text-muted"> of {{(totalPages(oldTotalResults)|number)}}</span>
</h6> </ng-container>
<!-- TODO Download results position--> </h6>
<div *ngIf="showDownload" class="uk-width-auto@m uk-margin-small-bottom"> <!-- Download results -->
<search-download <div *ngIf="showDownload" class="uk-margin-small-bottom uk-margin-small-top">
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'" <search-download
[isDisabled]="disabled" *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
[type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults" [isDisabled]="disabled"
[piwikSiteId]="piwikSiteId"> [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"
</search-download> [piwikSiteId]="piwikSiteId">
</div> </search-download>
</div>
</div>
<!-- No Dashboard Filters --> <!-- No Dashboard Filters -->
<div <div
*ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))"> *ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))">

View File

@ -1,10 +1,9 @@
<ul class="uk-list uk-list-xlarge uk-margin" [ngClass]="custom_class"> <ul class="uk-list uk-list-xlarge uk-margin" [ngClass]="custom_class">
<errorMessages [status]="[status]" [type]="'results'"></errorMessages> <errorMessages [status]="[status]" [type]="'results'"></errorMessages>
<li *ngFor="let result of previewResults" class="uk-animation-fade"> <li *ngFor="let result of previewResults" class="uk-animation-fade">
<div class="uk-card uk-card-default uk-card-body uk-card-hover"> <result-preview [properties]="properties" [showOrganizations]="showOrganizations"
<result-preview [properties]="properties" [showOrganizations]="showOrganizations" [showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps"
[showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps"> [isCard]="true">
</result-preview> </result-preview>
</div>
</li> </li>
</ul> </ul>

View File

@ -25,8 +25,9 @@
[placeholder]="'e.g. ' + yearMax "/> [placeholder]="'e.g. ' + yearMax "/>
<button type="submit" (click)="yearChanged()" <button type="submit" (click)="yearChanged()"
[ngStyle]="{'cursor': (rangeForm.valid && (yearFrom.dirty || yearTo.dirty)) ? 'pointer' : 'default'}" [ngStyle]="{'cursor': (rangeForm.valid && (yearFrom.dirty || yearTo.dirty)) ? 'pointer' : 'default'}"
class="uk-icon uk-icon-button uk-margin-small-left uk-text-right uk-button-default" class="uk-icon uk-icon-button uk-button-default uk-margin-small-left"
[disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)"> [class.uk-disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)"
[disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
icon="chevron-right" ratio="1"> icon="chevron-right" ratio="1">
<polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline> <polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline>
@ -55,20 +56,20 @@
<!-- Natalia's suggestion--> <!-- Natalia's suggestion-->
<div class="uk-margin-small uk-margin-top uk-text-left"> <div class="uk-margin-small uk-margin-top uk-text-left">
<ul class="uk-subnav uk-subnav-divider recentyears"> <ul class="uk-text-small uk-grid uk-grid-small uk-grid-divider" uk-grid>
<!-- + (isDisabled ? ' uk-disabled uk-text-muted' : '')"--> <!-- + (isDisabled ? ' uk-disabled uk-text-muted' : '')"-->
<li> <li>
<a *ngIf="actionRoute" [routerLink]="getRoute()" <a *ngIf="actionRoute" [routerLink]="getRoute()"
[queryParams]="getParams(0,(stringToNum(filter.selectedToValue) == [queryParams]="getParams(0,(stringToNum(filter.selectedToValue) ==
currentYear currentYear
&&stringToNum(filter.selectedFromValue) == currentYear))" &&stringToNum(filter.selectedFromValue) == currentYear))"
[class]="'portal-link uk-text-center ' [class]="'uk-text-center '
+ ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue) == currentYear) ? ' uk-text-bold' : '') + ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue) == currentYear) ? ' uk-text-bold' : '')
" "
(click)="yearChanged(0)" (click)="yearChanged(0)"
>This year</a> >This year</a>
<a *ngIf="!actionRoute" <a *ngIf="!actionRoute"
[class]="'portal-link uk-text-center ' [class]="'uk-text-center '
+ ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue) == currentYear) ? ' uk-text-bold' : '') + ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue) == currentYear) ? ' uk-text-bold' : '')
" "
(click)="yearChanged(0)" (click)="yearChanged(0)"
@ -77,13 +78,13 @@
<li><a *ngIf="actionRoute" [routerLink]="getRoute()" <li><a *ngIf="actionRoute" [routerLink]="getRoute()"
[queryParams]="getParams(4,(stringToNum(filter.selectedToValue) == currentYear [queryParams]="getParams(4,(stringToNum(filter.selectedToValue) == currentYear
&&stringToNum(filter.selectedFromValue) == currentYear-4))" &&stringToNum(filter.selectedFromValue) == currentYear-4))"
[class]="'portal-link uk-text-center ' [class]="'uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-4) ? ' uk-text-bold' : '') + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-4) ? ' uk-text-bold' : '')
" "
(click)="yearChanged(4)" (click)="yearChanged(4)"
>Last 5 years</a> >Last 5 years</a>
<a *ngIf="!actionRoute" <a *ngIf="!actionRoute"
[class]="'portal-link uk-text-center ' [class]="'uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-4) ? ' uk-text-bold' : '') + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-4) ? ' uk-text-bold' : '')
" "
(click)="yearChanged(4)" (click)="yearChanged(4)"
@ -91,13 +92,13 @@
</li> </li>
<li><a *ngIf="actionRoute" [routerLink]="getRoute()" <li><a *ngIf="actionRoute" [routerLink]="getRoute()"
[queryParams]="getParams(9,(stringToNum(filter.selectedToValue) == currentYear &&stringToNum(filter.selectedFromValue) == currentYear-9))" [queryParams]="getParams(9,(stringToNum(filter.selectedToValue) == currentYear &&stringToNum(filter.selectedFromValue) == currentYear-9))"
[class]="'portal-link uk-text-center ' [class]="'uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-9) ? ' uk-text-bold' : '') + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-9) ? ' uk-text-bold' : '')
" "
(click)="yearChanged(9)" (click)="yearChanged(9)"
>Last 10 years</a> >Last 10 years</a>
<a *ngIf="!actionRoute" <a *ngIf="!actionRoute"
[class]="'portal-link uk-text-center ' [class]="'uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-9) ? ' uk-text-bold' : '') + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-9) ? ' uk-text-bold' : '')
" "
(click)="yearChanged(9)" (click)="yearChanged(9)"

View File

@ -1,4 +1,5 @@
<div *ngIf="result"> <div *ngIf="result" [ngClass]="{'uk-card uk-card-default uk-card-hover': isCard}">
<div [ngClass]="{'uk-card-body': isCard}">
<!-- Before title --> <!-- Before title -->
<div class="uk-grid uk-flex uk-flex-middle"> <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"> <div *ngIf="properties.enermapsURL && showEnermaps && result.enermapsId" class=" uk-inline uk-width-auto uk-text-center uk-visible-toggle">
@ -119,49 +120,55 @@
<div class="uk-margin-small-bottom"> <div class="uk-margin-small-bottom">
<span <span
*ngIf="result.accessMode && result.accessMode.toLowerCase() !== 'not available'" *ngIf="result.accessMode && result.accessMode.toLowerCase() !== 'not available'"
class="uk-label custom-label uk-text-truncate " [ngClass]="'label-' + accessClass(result.accessMode)" class="uk-label uk-text-truncate " [ngClass]="'uk-label-' + accessClass(result.accessMode)"
title="Access Mode"> title="Access Mode">
{{result.accessMode}} {{result.accessMode}}
</span>{{' '}} </span>{{' '}}
<span *ngIf="result.openAccessMandatePublications && (!result.openAccessMandateDatasets)" <span
class="uk-label custom-label label-open uk-text-truncate" *ngIf="result.openAccessMandatePublications && (!result.openAccessMandateDatasets)"
title="Open Access mandate for Publications"> class="uk-label uk-label-success uk-text-truncate"
Open Access mandate for Publications title="Open Access mandate for Publications">
</span>{{' '}} Open Access mandate for Publications
</span>{{' '}}
<span <span
*ngIf="result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets && (result.openAccessMandatePublications == undefined || !result.openAccessMandatePublications)" *ngIf="result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets && (result.openAccessMandatePublications == undefined || !result.openAccessMandatePublications)"
class="uk-label custom-label label-open uk-text-truncate " title="Open Access mandate for Research Data"> class="uk-label uk-label-success uk-text-truncate " title="Open Access mandate for Research Data">
Open Access mandate for Research Data Open Access mandate for Research Data
</span>{{' '}} </span>{{' '}}
<span <span
*ngIf="result.openAccessMandatePublications != undefined && result.openAccessMandatePublications && result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets" *ngIf="result.openAccessMandatePublications != undefined && result.openAccessMandatePublications && result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets"
class="uk-label custom-label label-open uk-text-truncate" class="uk-label uk-label-success uk-text-truncate"
title="Open Access mandate for Publications and Research Data"> title="Open Access mandate for Publications and Research Data">
Open Access mandate for Publications and Research Data Open Access mandate for Publications and Research Data
</span>{{' '}} </span>{{' '}}
<span *ngIf="result.languages && result.languages.length > 0"> <span *ngIf="result.languages && result.languages.length > 0">
<span *ngFor="let language of result.languages" <span
class="uk-label custom-label label-language " title="Language"> *ngFor="let language of result.languages"
{{language}} class="uk-label" title="Language">
</span>{{' '}} {{language}}
</span> </span>{{' '}}
</span>
<span *ngIf="result.programmingLanguages && result.programmingLanguages.length > 0"> <span *ngIf="result.programmingLanguages && result.programmingLanguages.length > 0">
<span *ngFor="let programmingLanguage of result.programmingLanguages" <span
class="uk-label custom-label label-language" title="Programming Language"> *ngFor="let programmingLanguage of result.programmingLanguages"
{{programmingLanguage}} class="uk-label" title="Programming Language">
</span>{{" "}} {{programmingLanguage}}
</span> </span>{{" "}}
<span *ngIf="result.sc39" class="uk-label custom-label label-sc39" title="Special Clause 39"> </span>
Special Clause 39 <span
</span>{{' '}} *ngIf="result.sc39" class="uk-label" title="Special Clause 39">
<span *ngIf="result.compatibility && result.compatibility != '' && result.compatibility != 'not available'" Special Clause 39
class="uk-label custom-label label-compatibility" title="Compatibility"> </span>{{' '}}
{{result.compatibility}} <span
</span>{{' '}} *ngIf="result.compatibility && result.compatibility != '' && result.compatibility != 'not available'"
<span *ngIf="result.compatibility != undefined && result.compatibility != '' && result.compatibility == class="uk-label" title="Compatibility">
'not available'" {{result.compatibility}}
class="uk-label custom-label label-danger" title="OpenAIRE Compatibility">Not yet registered</span> </span>{{' '}}
{{' '}} <span
*ngIf="result.compatibility != undefined && result.compatibility != '' && result.compatibility == 'not available'"
class="uk-label uk-label-danger" title="OpenAIRE Compatibility">
Not yet registered
</span>{{' '}}
</div> </div>
<!-- Authors --> <!-- Authors -->
<div *ngIf="result.authors" class="uk-flex uk-margin-small-bottom"> <div *ngIf="result.authors" class="uk-flex uk-margin-small-bottom">
@ -283,11 +290,13 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!--&& loggedIn --> <!--&& loggedIn -->
<div *ngIf="(result.pop_inf && result.DOI) || <div *ngIf="(result.pop_inf && result.DOI) ||
((properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community') && ((properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community') &&
((showOrcid && result.identifiers && result.identifiers.size > 0) || result.orcidCreationDates?.length > 0))" ((showOrcid && result.identifiers && result.identifiers.size > 0) || result.orcidCreationDates?.length > 0))"
class="result-preview-bottom"> class="result-preview-bottom"
[ngClass]="{'uk-card-footer': isCard}">
<!-- Impact Factors--> <!-- Impact Factors-->
<span class="uk-flex uk-flex-top"> <span class="uk-flex uk-flex-top">
<ng-container *ngIf="result.pop_inf && result.DOI"> <ng-container *ngIf="result.pop_inf && result.DOI">
@ -362,6 +371,7 @@
</div> </div>
</ng-container> </ng-container>
<!-- && loggedIn --> <!-- && loggedIn -->
<!-- TODO: change colors/opacity and disabled attr for ORCID buttons -->
<span *ngIf="(properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community') <span *ngIf="(properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community')
&& showOrcid && result.identifiers && result.identifiers.size > 0" && showOrcid && result.identifiers && result.identifiers.size > 0"
class="uk-width-1-3 uk-width-expand@s"> class="uk-width-1-3 uk-width-expand@s">

View File

@ -19,6 +19,7 @@ export class ResultPreviewComponent implements OnInit, OnChanges {
@Input() modal: AlertModal = null; @Input() modal: AlertModal = null;
@Input() promoteWebsiteURL: boolean = false; @Input() promoteWebsiteURL: boolean = false;
@Input() hasLink: boolean = true; @Input() hasLink: boolean = true;
@Input() isCard: boolean = false;
public routerHelper: RouterHelper = new RouterHelper(); public routerHelper: RouterHelper = new RouterHelper();
public urlParam: string; public urlParam: string;
public url: string; public url: string;
@ -142,11 +143,11 @@ export class ResultPreviewComponent implements OnInit, OnChanges {
public accessClass(accessMode: string): string { public accessClass(accessMode: string): string {
if(accessMode.toLowerCase().indexOf('open') !== -1) { if(accessMode.toLowerCase().indexOf('open') !== -1) {
return 'open'; return 'success';
} else if(accessMode.toLowerCase() === 'not available') { } else if(accessMode.toLowerCase() === 'not available') {
return 'unknown'; return 'disabled'; // unknown
} else { } else {
return 'closed'; return 'disabled'; // closed
} }
} }