[develop]: Fix showAuthors in modal.

This commit is contained in:
Konstantinos Triantafyllou 2024-02-14 15:43:27 +02:00
parent c803674ceb
commit 3204ba18ff
4 changed files with 100 additions and 89 deletions

View File

@ -27,7 +27,7 @@ import {HelperFunctions} from "../../../utils/HelperFunctions.class";
<ul class="uk-list uk-margin"> <ul class="uk-list 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 [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)"
[showOrcid]="false" [isCard]="false" [prevPath]="prevPath" [showInline]="true" [showOrcid]="false" [prevPath]="prevPath" [showInline]="true"
[isDeletedByInferenceModal]="true"></result-preview> [isDeletedByInferenceModal]="true"></result-preview>
</li> </li>
</ul> </ul>

View File

@ -1,4 +1,13 @@
import {Component, Inject, Input, PLATFORM_ID, ViewChild} from '@angular/core'; import {
AfterContentInit,
AfterViewInit,
ChangeDetectorRef,
Component,
Inject,
Input,
PLATFORM_ID,
ViewChild
} from '@angular/core';
import {ActivatedRoute} from "@angular/router"; import {ActivatedRoute} from "@angular/router";
import {RouterHelper} from "../routerHelper.class"; import {RouterHelper} from "../routerHelper.class";
import {EnvProperties} from '../properties/env-properties'; import {EnvProperties} from '../properties/env-properties';
@ -11,89 +20,89 @@ import {properties} from "../../../../environments/environment";
selector: 'showAuthors', selector: 'showAuthors',
template: ` template: `
<ng-template #author_template let-author="author" let-i="i" let-italic="italic"> <ng-template #author_template let-author="author" let-i="i" let-italic="italic">
<span *ngIf="isSticky || (!author.orcid && !author.orcid_pending) || !isBrowser" style="margin-right: 5px;" <span *ngIf="isSticky || (!author.orcid && !author.orcid_pending) || !isBrowser" style="margin-right: 5px;"
[class.uk-text-italic]="italic"> [class.uk-text-italic]="italic">
{{author.fullName + ";"}} {{author.fullName + ";"}}
</span> </span>
<ng-container *ngIf="!isSticky && (author.orcid || author.orcid_pending) && isBrowser"> <ng-container *ngIf="!isSticky && (author.orcid || author.orcid_pending) && isBrowser">
<a #toggle class="uk-flex-inline uk-flex-middle uk-link-text"> <a #toggle class="uk-flex-inline uk-flex-middle uk-link-text">
<img *ngIf="author.orcid" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid" <img *ngIf="author.orcid" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid"
loading="lazy" style="width:16px; height:16px; margin-right: 3px;"> loading="lazy" style="width:16px; height:16px; margin-right: 3px;">
<img *ngIf="!author.orcid && author.orcid_pending" <img *ngIf="!author.orcid && author.orcid_pending"
src="assets/common-assets/common/ORCIDiD_iconbw16x16.png" alt="orcid bw" loading="lazy" src="assets/common-assets/common/ORCIDiD_iconbw16x16.png" alt="orcid bw" loading="lazy"
style="margin-right: 3px;"> style="margin-right: 3px;">
<span style="margin-right: 5px;" [class.uk-text-italic]="italic"> <span style="margin-right: 5px;" [class.uk-text-italic]="italic">
{{author.fullName + ";"}} {{author.fullName + ";"}}
</span> </span>
</a> </a>
<div *ngIf="!isMobile" class="default-dropdown uk-margin-remove-top uk-dropdown orcid-dropdown" uk-dropdown="mode:click; offset: 4; container: true" style="min-width: 465px !important;"> <div *ngIf="!isMobile" class="default-dropdown uk-margin-remove-top uk-dropdown orcid-dropdown"
<ng-container *ngTemplateOutlet="dropdown"></ng-container> uk-dropdown="mode:click; offset: 4;" style="min-width: 465px !important;" [attr.container]="isModal?'#modal-container':true">
</div> <ng-container *ngTemplateOutlet="dropdown"></ng-container>
<mobile-dropdown *ngIf="isMobile" [toggle]="toggle"> </div>
<div class="orcid-dropdown"> <mobile-dropdown *ngIf="isMobile" [toggle]="toggle">
<ng-container *ngTemplateOutlet="dropdown"></ng-container> <div class="orcid-dropdown">
</div> <ng-container *ngTemplateOutlet="dropdown"></ng-container>
</mobile-dropdown> </div>
<ng-template #dropdown> </mobile-dropdown>
<div class="uk-padding-small"> <ng-template #dropdown>
<h6 class="uk-margin-remove">{{author.fullName}}</h6> <div class="uk-padding-small">
<div> <h6 class="uk-margin-remove">{{author.fullName}}</h6>
<div class="uk-text-meta uk-margin-bottom">ORCID</div> <div>
<div class="uk-text-meta uk-margin-bottom">ORCID</div>
<div class="uk-text-meta uk-text-xsmall uk-margin-small-top uk-margin-small-bottom"> <div class="uk-text-meta uk-text-xsmall uk-margin-small-top uk-margin-small-bottom">
<img *ngIf="author.orcid" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" <img *ngIf="author.orcid" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt=""
loading="lazy">{{" "}} loading="lazy">{{" "}}
<img *ngIf="!author.orcid && author.orcid_pending" <img *ngIf="!author.orcid && author.orcid_pending"
src="assets/common-assets/common/ORCIDiD_iconbw16x16.png" alt="" loading="lazy">{{" "}} src="assets/common-assets/common/ORCIDiD_iconbw16x16.png" alt="" loading="lazy">{{" "}}
<i *ngIf="author.orcid">Harvested from ORCID Public Data File</i> <i *ngIf="author.orcid">Harvested from ORCID Public Data File</i>
<i *ngIf="!author.orcid && author.orcid_pending">Derived by OpenAIRE algorithms or harvested <i *ngIf="!author.orcid && author.orcid_pending">Derived by OpenAIRE algorithms or harvested
from 3d party repositories</i> from 3d party repositories</i>
</div> </div>
<div> <div>
<div class="clipboard-wrapper uk-width-1-1 uk-flex uk-flex-middle uk-flex-center" <div class="clipboard-wrapper uk-width-1-1 uk-flex uk-flex-middle uk-flex-center"
style="min-height: 43px; min-width: 280px;"> style="min-height: 43px; min-width: 280px;">
<input #element class="uk-padding-small uk-text-emphasis uk-width-expand uk-disabled" <input #element class="uk-padding-small uk-text-emphasis uk-width-expand uk-disabled"
[value]="properties.orcidURL+(author.orcid ? author.orcid : author.orcid_pending)"/> [value]="properties.orcidURL+(author.orcid ? author.orcid : author.orcid_pending)"/>
<button class="uk-button uk-button-link uk-margin-small-right copy orcid_clipboard_btn" [ngClass]="'orcid_clipboard_btn_auhtor_'+i" <button class="uk-button uk-button-link uk-margin-small-right copy orcid_clipboard_btn" [ngClass]="'orcid_clipboard_btn_auhtor_'+i"
title="Copy to clipboard" (click)="copyToClipboard(element)"> title="Copy to clipboard" (click)="copyToClipboard(element)">
<icon name="content_copy" visuallyHidden="Copy to clipboard" [flex]="true"></icon> <icon name="content_copy" visuallyHidden="Copy to clipboard" [flex]="true"></icon>
</button> </button>
</div> </div>
<div class="uk-text-center uk-margin-small-top"> <div class="uk-text-center uk-margin-small-top">
<a class="uk-button uk-button-text custom-external" <a class="uk-button uk-button-text custom-external"
title="Visit author in ORCID" title="Visit author in ORCID"
[href]="properties.orcidURL+(author.orcid ? author.orcid : author.orcid_pending)" [href]="properties.orcidURL+(author.orcid ? author.orcid : author.orcid_pending)"
target="_blank"> target="_blank">
VISIT AUTHOR IN ORCID VISIT AUTHOR IN ORCID
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<hr>
<div class="uk-margin-top uk-text-bold uk-text-emphasis uk-text-center">
{{author.fullName}} in OpenAIRE
</div>
<div class="uk-text-center uk-margin-top uk-margin-large-left uk-margin-large-right">
<a *ngIf="properties.adminToolsPortalType !== 'eosc'"
class="uk-button uk-button-primary uk-text-bold uk-padding-remove-top uk-padding-remove-bottom"
(click)="onClick()"
[queryParams]="routerHelper.createQueryParams(['orcid','oc'],[(author['orcid'] ? author['orcid'] : author['orcid_pending']),'and'])"
routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults">
<span class="space">Search</span>
</a>
<a *ngIf="properties.adminToolsPortalType == 'eosc'"
class="uk-button uk-button-primary uk-text-bold uk-padding-remove-top uk-padding-remove-bottom uk-light"
[href]="'https://explore.openaire.eu'+properties.searchLinkToAdvancedResults+'?orcid='+(author['orcid'] ? author['orcid'] : author['orcid_pending'])+'&oc=and'"
target="_blank">
<span class="space custom-external">Search in OpenAIRE</span>
</a>
</div>
</div>
</ng-template>
</ng-container>
<hr>
<div class="uk-margin-top uk-text-bold uk-text-emphasis uk-text-center">
{{author.fullName}} in OpenAIRE
</div>
<div class="uk-text-center uk-margin-top uk-margin-large-left uk-margin-large-right">
<a *ngIf="properties.adminToolsPortalType !== 'eosc'"
class="uk-button uk-button-primary uk-text-bold uk-padding-remove-top uk-padding-remove-bottom"
(click)="onClick()"
[queryParams]="routerHelper.createQueryParams(['orcid','oc'],[(author['orcid'] ? author['orcid'] : author['orcid_pending']),'and'])"
routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults">
<span class="space">Search</span>
</a>
<a *ngIf="properties.adminToolsPortalType == 'eosc'"
class="uk-button uk-button-primary uk-text-bold uk-padding-remove-top uk-padding-remove-bottom uk-light"
[href]="'https://explore.openaire.eu'+properties.searchLinkToAdvancedResults+'?orcid='+(author['orcid'] ? author['orcid'] : author['orcid_pending'])+'&oc=and'"
target="_blank">
<span class="space custom-external">Search in OpenAIRE</span>
</a>
</div>
</div>
</ng-template>
</ng-container>
</ng-template> </ng-template>
<div *ngIf="authors" <div *ngIf="authors"
@ -144,6 +153,7 @@ export class ShowAuthorsComponent {
@Input() authorsLimit: number = 7; @Input() authorsLimit: number = 7;
@Input() showAll: boolean = true; @Input() showAll: boolean = true;
@Input() modal: AlertModal; @Input() modal: AlertModal;
@Input() isModal: boolean
@Input() viewAll: boolean = false; @Input() viewAll: boolean = false;
@Input() showInline: boolean = false; // do not open modal for "view more" when this is true @Input() showInline: boolean = false; // do not open modal for "view more" when this is true
public lessBtn: boolean = false; public lessBtn: boolean = false;

View File

@ -1,4 +1,4 @@
import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from "@angular/core"; import {ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output} from "@angular/core";
import {NavigationStart, Router} from "@angular/router"; import {NavigationStart, Router} from "@angular/router";
@Component({ @Component({
@ -21,7 +21,7 @@ export class MobileDropdownComponent implements OnInit{
public opened: boolean = false; public opened: boolean = false;
private static MOBILE_DROPDOWN_CONTAINER = 'mobile-dropdown-container'; private static MOBILE_DROPDOWN_CONTAINER = 'mobile-dropdown-container';
constructor(private element: ElementRef, private router: Router) { constructor(private element: ElementRef, private router: Router, private cdr: ChangeDetectorRef) {
this.router.events.subscribe(event => { this.router.events.subscribe(event => {
if(event instanceof NavigationStart) { if(event instanceof NavigationStart) {
this.element.nativeElement.remove(); this.element.nativeElement.remove();
@ -63,6 +63,7 @@ export class MobileDropdownComponent implements OnInit{
close() { close() {
if(this.opened) { if(this.opened) {
this.opened = false; this.opened = false;
this.cdr.detectChanges();
this.onClose.emit(); this.onClose.emit();
document.getElementsByTagName('body')[0].setAttribute('style', ''); document.getElementsByTagName('body')[0].setAttribute('style', '');
} }

View File

@ -125,7 +125,7 @@
</div> </div>
<!-- Authors --> <!-- Authors -->
<div *ngIf="result.authors" class="uk-margin-xsmall-bottom"> <div *ngIf="result.authors" class="uk-margin-xsmall-bottom">
<showAuthors [authors]="result.authors" [authorsLimit]=4 [modal]="modal" [isMobile]="isMobile" <showAuthors [authors]="result.authors" [authorsLimit]=4 [modal]="modal" [isMobile]="isMobile" [isModal]="isDeletedByInferenceModal"
[showAll]=true [showInline]="showInline"></showAuthors> [showAll]=true [showInline]="showInline"></showAuthors>
</div> </div>
<!-- Identifiers --> <!-- Identifiers -->