Merge pull request #2222 from ORCID/fix/9159-qa-linked-section-titles…

…-in-record-summary feature: Header summary link scroll to section on standaloneMode
ORCID · Apr 3, 2024 · 69d6ce9 · 69d6ce9
2 parents 9a3a408 + 865fc86
commit 69d6ce9
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 15 deletions.
diff --git a/src/app/cdk/trusted-summary/component/summary-panel/summary-panel.component.html b/src/app/cdk/trusted-summary/component/summary-panel/summary-panel.component.html
@@ -6,7 +6,7 @@
   <ng-container *ngFor="let activity of activitiesToDisplay; last as isLast">
     <div
       class="activity-container"
-      (click)="goToUrl(activity.url)"
+(click)="goToUrl(activity.url)"
       [ngClass]="{
         'with-border': !isLast || acitivityCountOverflow,
         'padding-botton': !isLast || acitivityCountOverflow
@@ -108,10 +108,9 @@
   </ng-container>
   <div class="activity-container" *ngIf="acitivityCountOverflow">
     <a
-      [href]="url"
       class="underline orc-font-body-small"
-      target="_blank"
       rel="noopener noreferrer"
+      (click)="goToActivitySection(activitySection)"
       >+ {{ count - 3 }}
       <ng-container *ngIf="count - 3 === 1">{{
         moreLabelSingular

diff --git a/src/app/cdk/trusted-summary/component/summary-panel/summary-panel.component.ts b/src/app/cdk/trusted-summary/component/summary-panel/summary-panel.component.ts
@@ -22,6 +22,8 @@ export class SummaryPanelComponent implements OnInit {
   @Input() moreLabelSingular: string = ''
   @Input() showToPresent = true
   @Input() hoverEffect = false
+  @Input() standaloneMode: boolean
+  @Input() activitySection: string
   activitiesToDisplay: ActivitySummary[]
   acitivityCountOverflow: boolean
   unsubscribe = new Subject()
@@ -47,4 +49,10 @@ export class SummaryPanelComponent implements OnInit {
     }
     this._window.open(url, '_blank')
   }
+  goToActivitySection(activitySection: string) {
+    this.standaloneMode ? this.goToUrl(this.url) : this.scrollTo(activitySection)
+  }
+  scrollTo(activitySection: string) {
+    document.querySelector(`#${activitySection}`).scrollIntoView()
+  }
 }
diff --git a/src/app/cdk/trusted-summary/component/trusted-summary/trusted-summary.component.html b/src/app/cdk/trusted-summary/component/trusted-summary/trusted-summary.component.html
@@ -116,11 +116,10 @@ <h1 class="orc-font-body-large">
     >
       <ng-container *ngIf="trustedSummary.employmentAffiliations?.length">
         <a
-          href="{{ trustedSummary.orcid }}#affiliations"
-          target="_blank"
           rel="noopener noreferrer"
           (mouseenter)="affiliationsHover = true"
           (mouseleave)="affiliationsHover = false"
+          (click)="goToActivitySection('affiliations')"
         >
           <h3
             class="orc-font-small-print"
@@ -137,6 +136,8 @@ <h1 class="orc-font-body-large">
           [moreLabel]="labelMoreAffiliations"
           [moreLabelSingular]="labelMoreAffiliation"
           [hoverEffect]="affiliationsHover"
+          [standaloneMode]="standaloneMode"
+          [activitySection]="'affiliations'"
         ></app-summary-panel>
       </ng-container>
       <ng-container *ngIf="lastUpdateDate || creationDateWithOffset">
@@ -192,11 +193,10 @@ <h3 class="orc-font-small-print" i18n="@@summary.keyDates">
     >
       <ng-container *ngIf="works?.length">
         <a
-          href="{{ trustedSummary.orcid }}#works"
-          target="_blank"
           rel="noopener noreferrer"
           (mouseenter)="worksHover = true"
           (mouseleave)="worksHover = false"
+          (click)="goToActivitySection('works')"
         >
           <h3
             class="orc-font-small-print"
@@ -215,11 +215,10 @@ <h3 class="orc-font-small-print" i18n="@@summary.keyDates">
       </ng-container>
       <ng-container *ngIf="peerReviews?.length">
         <a
-          href="{{ trustedSummary.orcid }}#peer-reviews"
-          target="_blank"
           rel="noopener noreferrer"
           (mouseenter)="peerReviewsHover = true"
           (mouseleave)="peerReviewsHover = false"
+          (click)="goToActivitySection('peer-reviews')"
         >
           <h3
             [ngClass]="{
@@ -238,11 +237,10 @@ <h3 class="orc-font-small-print" i18n="@@summary.keyDates">
       </ng-container>
       <ng-container *ngIf="funds?.length">
         <a
-          href="{{ trustedSummary.orcid }}#funding"
-          target="_blank"
           rel="noopener noreferrer"
           (mouseenter)="fundsHover = true"
           (mouseleave)="fundsHover = false"
+          (click)="goToActivitySection('funding')"
         >
           <h3
             class="orc-font-small-print"
@@ -270,11 +268,10 @@ <h3 class="orc-font-small-print" i18n="@@summary.keyDates">
     >
       <ng-container *ngIf="trustedSummary.professionalActivities?.length">
         <a
-          href="{{ trustedSummary.orcid }}#professional-activities"
-          target="_blank"
           rel="noopener noreferrer"
           (mouseenter)="professionalActivitiesHover = true"
           (mouseleave)="professionalActivitiesHover = false"
+          (click)="goToActivitySection('professional-activities')"
         >
           <h3
             class="orc-font-small-print"
@@ -293,15 +290,16 @@ <h3 class="orc-font-small-print" i18n="@@summary.keyDates">
           [count]="trustedSummary.professionalActivitiesCount"
           [moreLabel]="labelMoreProfessionalActivities"
           [moreLabelSingular]="labelMoreProfessionalActivitie"
+          [standaloneMode]="standaloneMode"
+          [activitySection]="'professional-activities'"
         ></app-summary-panel>
       </ng-container>
       <ng-container *ngIf="externalIdentifiers?.length">
         <a
-          href="{{ trustedSummary.orcid }}#other-identifiers"
-          target="_blank"
           rel="noopener noreferrer"
           (mouseenter)="externalIdentifiersHover = true"
           (mouseleave)="externalIdentifiersHover = false"
+          (click)="goToActivitySection('other-identifiers')"
         >
           <h3
             class="orc-font-small-print"

diff --git a/src/app/cdk/trusted-summary/component/trusted-summary/trusted-summary.component.ts b/src/app/cdk/trusted-summary/component/trusted-summary/trusted-summary.component.ts
@@ -216,4 +216,13 @@ export class TrustedSummaryComponent implements OnInit, OnDestroy {
     const offsettedDate = new Date(date.getTime() + offset * 60 * 1000)
     return offsettedDate
   }
+  goToActivitySection(activitySection: string) {
+    this.standaloneMode ? this.navigateTo(activitySection) : this.scrollTo(activitySection)
+  }
+  scrollTo(activitySection: string) {
+    document.querySelector(`#${activitySection}`).scrollIntoView()
+  }
+  navigateTo(activitySection: string) {
+    this._window.open(`${this.trustedSummary.orcid}#${activitySection}`, '_blank')
+  }
 }