[develop | DONE | CHANGED]: Alt attribute on images | Set changeDetection: ChangeDetectionStrategy.OnPush on result-preview.component.ts.

1. deletedByInference.service.ts: [Bug fix] Fixed author check.
2. sdg.component.html & quick-contact.component.html & fos.component.html: Added alt attribute on images.
3. result-preview.component.ts: Set changeDetection: ChangeDetectionStrategy.OnPush | Added get countDots().
4. result-preview.component.html: Changed how number of access routes dots is passed into a class (countDots) - needed for ChangeDetectionStrategy.OnPush.
5. orcid-work.component.ts: Added alt attribute on images | Added ChangeDetectorRef and call this.cdr.markForCheck(); on "getPutCode()", "saveWork()" and "deleteWorks()" - needed for ChangeDetectionStrategy.OnPush.
6. searchResult.component.ts: Rebuild previewResults object after getting orcidPutCodes to draw html again - needed for ChangeDetectionStrategy.OnPush.
7. newSearchPage.component.html: Removed uk-flex-wrap for number of results and uk-margin-medium-left from desktop sorting.
This commit is contained in:
Konstantina Galouni 2024-04-15 17:11:38 +03:00
parent 9b04260a60
commit 6886df2caa
9 changed files with 48 additions and 16 deletions

View File

@ -32,7 +32,7 @@
</div>
</div>
<div class="uk-width-2-5@m uk-width-1-1@s uk-text-center" uk-scrollspy-class>
<img src="assets/common-assets/fos/fos-hero-img.svg" loading="lazy">
<img src="assets/common-assets/fos/fos-hero-img.svg" loading="lazy" alt="FoS logo">
</div>
</div>
</div>

View File

@ -145,8 +145,7 @@ export class DeletedByInferenceService {
if(author.orcid_pending) {
author.orcid_pending = author.orcid_pending.toUpperCase();
}
if(result['authors'][author.rank] && results['authors'][author.rank].fullName == author.content) {
if(result['authors'][author.rank] && result['authors'][author.rank].fullName == author.content) {
if(!author.orcid && result['authors'][author.rank].orcid) {
author.orcid = result['authors'][author.rank].orcid;
} else if(!author.orcid_pending && result['authors'][author.rank].orcid_pending) {

View File

@ -1,4 +1,4 @@
import {Component, Input, ViewChild} from '@angular/core';
import {ChangeDetectorRef, Component, Input, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {Subscriber, Subscription} from "rxjs";
import {OrcidService} from "./orcid.service";
@ -85,7 +85,7 @@ declare var UIkit: any;
<ng-container *ngIf="!showOnlyUpdateButton">
<span class="uk-margin-bottom uk-flex uk-flex-middle uk-flex-center">
<span>ORCID&#160;</span>
<img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">
<img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="ORCID logo" loading="lazy">
<span>&#160;ACTIONS</span>
</span>
@ -330,7 +330,8 @@ export class OrcidWorkComponent {
private _router: Router,
private orcidService: OrcidService,
private resultLandingService: ResultLandingService,
private userManagementService: UserManagementService, private _logService: LogService, private _userProfileService: UserProfileService) {
private userManagementService: UserManagementService, private _logService: LogService, private _userProfileService: UserProfileService,
private cdr: ChangeDetectorRef) {
if (typeof document !== 'undefined') {
this.tokenUrl = properties.orcidTokenURL
+ "client_id=" + properties.orcidClientId
@ -444,6 +445,8 @@ export class OrcidWorkComponent {
this.subscriptions.push(this.orcidService.getPutCode(this.pids).subscribe(
putCodes => {
this.putCodes = putCodes;
this.cdr.markForCheck();
// this.cdr.detectChanges();
}, error => {
}
@ -525,7 +528,9 @@ export class OrcidWorkComponent {
this.putCodes.push("" + response['put-code']);
this.creationDates.push(response['created-date']['value']);
this.updateDates.push(response['last-modified-date']['value']);
this.cdr.markForCheck();
// this.cdr.detectChanges();
// this.closeGrantModal();
// this.message = "You have successfully added work with pids: "+this.pids+" in your ORCID record!";
this.message = "You have successfully added work \"" + this.resultTitle + "\" in your ORCID record!";
@ -701,6 +706,8 @@ export class OrcidWorkComponent {
deletedAll = false;
} else {
this.putCodes.splice(i, 1);
this.cdr.markForCheck();
// this.cdr.detectChanges();
this.creationDates.splice(i, 1);
this.updateDates.splice(i, 1);
// this.works.splice(i, 1);

View File

@ -34,9 +34,9 @@
</div>
</div>
<div class="uk-width-2-5@m uk-width-1-1@s uk-text-center uk-position-relative" uk-scrollspy-class>
<img src="assets/common-assets/sdg/sdg-hero-img.svg" loading="lazy">
<img src="assets/common-assets/sdg/sdg-hero-img.svg" loading="lazy" alt="SDGs logo">
<div class="uk-position-bottom-left uk-card uk-card-default uk-padding">
<img src="assets/common-assets/sdg/sdg-badge.png" loading="lazy" style="max-width: 215px">
<img src="assets/common-assets/sdg/sdg-badge.png" loading="lazy" style="max-width: 215px" alt="SDGs big logo">
</div>
</div>
</div>
@ -61,7 +61,7 @@
</div>
</div>
<div class="uk-text-center">
<img [src]="'assets/common-assets/sdg/icons/g' + sdg.code + '.png'" alt="">
<img [src]="'assets/common-assets/sdg/icons/g' + sdg.code + '.png'" [alt]="'SDG code: '+sdg.code">
</div>
<div class="uk-text-center uk-padding-small uk-background-default" style="border-radius: 0 0 4px 4px;">
<span class="uk-text-large uk-text-bold uk-margin-small-bottom">{{sdg.number == null ? '0' : sdg.number | number}}</span>

View File

@ -311,7 +311,7 @@
target="_blank"> OpenAIRE - Explore</a>.
</div>
<div class="uk-flex uk-flex-middle uk-flex-wrap uk-child-width-auto uk-flex-between">
<div class="uk-flex uk-flex-middle uk-child-width-auto uk-flex-between">
<!-- Total results, number of pages -->
<div class="uk-margin-remove-bottom uk-text-truncate" [class.uk-margin-medium-right]="!mobile" [class.uk-margin-right]="mobile" [class.uk-h6]="!mobile">
<ng-container *ngIf="results && searchUtils.totalResults > 0">
@ -347,7 +347,7 @@
</ng-container>
</div>
<div *ngIf="!mobile" class="uk-margin-medium-left uk-flex uk-flex-middle">
<div *ngIf="!mobile" class="uk-flex uk-flex-middle">
<div *ngIf="searchUtils.totalResults > 10 || sort || searchUtils.totalResults > searchUtils.size ||
(!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING)"
class="uk-grid uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>

View File

@ -78,6 +78,7 @@ export class SearchResultComponent implements OnInit, OnChanges {
// console.debug(i, this.previewResults[i].orcidPutCodes);
}
}
this.previewResults = JSON.parse(JSON.stringify(this.previewResults, this.replacer), this.reviver);
}, error => {
}
@ -85,6 +86,26 @@ export class SearchResultComponent implements OnInit, OnChanges {
}
}
private replacer(key, value) {
if(value instanceof Map) {
return {
dataType: 'Map',
value: Array.from(value.entries()), // or with spread: value: [...value]
};
} else {
return value;
}
}
private reviver(key, value) {
if(typeof value === 'object' && value !== null) {
if (value.dataType === 'Map') {
return new Map(value.value);
}
}
return value;
}
public getResultPreview(result: SearchResult): ResultPreview {
return ResultPreview.searchResultConvert(result, (result.entityType) ? result.entityType : this.type);
}

View File

@ -12,7 +12,7 @@
Send a message
</div>
<div *ngIf="images.length > 0" class="uk-margin-small avatars">
<img *ngFor="let image of images" [src]="image" class="uk-border-circle" >
<img *ngFor="let image of images" [src]="image" class="uk-border-circle" alt="contact person">
</div>
<div class="uk-text-bold">
How can we help?

View File

@ -218,7 +218,7 @@
<div *ngIf="result.oaRoutes" class="uk-first-column">
<!-- class="metrics uk-text-xsmall uk-width-auto uk-flex uk-flex-middle uk-flex-right uk-text-meta">-->
<a class="uk-flex uk-flex-middle uk-link-reset">
<span #badge class="access-route-badge" [ngClass]="'dots-' + badge.children.length.toString()">
<span #badge class="access-route-badge" [ngClass]="'dots-' + countDots">
<span *ngIf="result.oaRoutes.green" class="dot green"></span>
<span *ngIf="result.oaRoutes.oaColor" class="dot" [ngClass]="result.oaRoutes.oaColor"></span>
<span *ngIf="result.oaRoutes.isInDiamondJournal" class="dot diamond"></span>

View File

@ -1,4 +1,4 @@
import {Component, Input, OnChanges, OnInit, SimpleChanges} from "@angular/core";
import {ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges} from "@angular/core";
import {ResultPreview} from "./result-preview";
import {EnvProperties} from "../properties/env-properties";
import {RouterHelper} from "../routerHelper.class";
@ -12,7 +12,8 @@ import {NumberUtils} from '../number-utils.class';
@Component({
selector: 'result-preview',
templateUrl: 'result-preview.component.html',
styleUrls: ['result-preview.component.less']
styleUrls: ['result-preview.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ResultPreviewComponent implements OnInit, OnChanges {
@Input() prevPath: string = "";
@ -255,4 +256,8 @@ export class ResultPreviewComponent implements OnInit, OnChanges {
}
return obj;
}
public get countDots() {
return (this.result.oaRoutes.green ? 1 : 0) + (this.result.oaRoutes.oaColor ? 1 : 0) + (this.result.oaRoutes.isInDiamondJournal ? 1 : 0);
}
}