[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.

fos/fos.component.html

@@ -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>

landingPages/result/deletedByInference/deletedByInference.service.ts

@@ -145,8 +145,7 @@ export class DeletedByInferenceService {
                 if(author.orcid_pending) {
                   author.orcid_pending = author.orcid_pending.toUpperCase();
                 }
-
+                if(result['authors'][author.rank] && result['authors'][author.rank].fullName == author.content) {
-                if(result['authors'][author.rank] && results['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) {

orcid/orcid-work.component.ts

@@ -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);

sdg/sdg.component.html

@@ -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>

searchPages/searchUtils/newSearchPage.component.html

@@ -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>

searchPages/searchUtils/searchResult.component.ts

@@ -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);
   }

sharedComponents/quick-contact/quick-contact.component.html

@@ -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?

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

@@ -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>

utils/result-preview/result-preview.component.ts

@@ -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);
+  }
 }