Merge pull request #2032 from ORCID/add-link-functionality

Add link functionality
ORCID · Jul 31, 2023 · 2e13edd · 2e13edd
2 parents 102c2c3 + b0f04a4
commit 2e13edd
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 57 deletions.
diff --git a/src/app/cdk/side-bar/side-bar/side-bar.component.html b/src/app/cdk/side-bar/side-bar/side-bar.component.html
@@ -120,7 +120,7 @@ <h3 header class="orc-font-body" i18n="@@record.websitesAndSocialLinks">
       [isPublicRecord]="isPublicRecord"
       [type]="'side-bar'"
       class="side-bar"
-      id="personal-identifiers-panel"
+      id="other-identifiers"
       [(openState)]="externalIdentifierOpenState"
       [userRecord]="userRecord"
     >

diff --git a/src/app/cdk/side-bar/side-bar/side-bar.component.ts b/src/app/cdk/side-bar/side-bar/side-bar.component.ts
@@ -18,6 +18,7 @@ import { ModalEmailComponent } from '../modals/modal-email/modal-email.component
 import { ModalKeywordComponent } from '../modals/modal-keyword/modal-keyword.component'
 import { ModalPersonIdentifiersComponent } from '../modals/modal-person-identifiers/modal-person-identifiers.component'
 import { ModalWebsitesComponent } from '../modals/modal-websites/modal-websites.component'
+import { ActivatedRoute } from '@angular/router'
 
 @Component({
   selector: 'app-side-bar',
@@ -66,11 +67,13 @@ export class SideBarComponent implements OnInit, OnDestroy {
   emailsOpenState = false
 
   regionPersonalInformation = $localize`:@@shared.personalInformation:Personal information`
+  fragment: string
 
   constructor(
     _platform: PlatformInfoService,
     private _user: UserService,
-    private _record: RecordService
+    private _record: RecordService,
+    private _route: ActivatedRoute
   ) {
     _platform
       .get()
@@ -82,6 +85,8 @@ export class SideBarComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.getRecord()
+    this.externalIdentifierOpenState =
+      this._route.snapshot.fragment === 'other-identifiers'
   }
 
   private getRecord() {

diff --git a/src/app/record/pages/my-orcid/my-orcid.component.ts b/src/app/record/pages/my-orcid/my-orcid.component.ts
@@ -1,8 +1,14 @@
-import { Component, Inject, OnDestroy, OnInit } from '@angular/core'
+import {
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  OnDestroy,
+  OnInit,
+} from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
 import { ORCID_REGEXP } from 'src/app/constants'
-import { first, switchMap, takeUntil, tap } from 'rxjs/operators'
+import { first, switchMap, take, takeUntil, tap } from 'rxjs/operators'
 import { RecordService } from '../../../core/record/record.service'
 import { Subject } from 'rxjs'
 import { MainPanelsState, UserRecord } from '../../../types/record.local'
@@ -59,6 +65,7 @@ export class MyOrcidComponent implements OnInit, OnDestroy {
 
   regionActivities = $localize`:@@shared.activities:Activities`
   readyForIndexing: boolean
+  fragment: string
 
   constructor(
     _userInfoService: UserInfoService,
@@ -72,7 +79,8 @@ export class MyOrcidComponent implements OnInit, OnDestroy {
     private _userSession: UserService,
     @Inject(WINDOW) private window: Window,
     private _togglz: TogglzService,
-    private _scriptService: ScriptService
+    private _scriptService: ScriptService,
+    private _changeDetectorRef: ChangeDetectorRef
   ) {}
 
   private checkIfThisIsAPublicOrcid() {
@@ -98,6 +106,14 @@ export class MyOrcidComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.checkIfThisIsAPublicOrcid()
     this.affiliations = 0
+    // Remove fragment temporally, to adding back when items have loaded
+    this.route.fragment.pipe(take(1)).subscribe((fragment) => {
+      if (fragment) {
+        this.fragment = fragment
+        this._router.navigate([], { fragment: '' })
+      }
+    })
+
     this._platform.get().subscribe((value) => (this.platform = value))
     this._record
       .getRecord({
@@ -140,6 +156,38 @@ export class MyOrcidComponent implements OnInit, OnDestroy {
           }
 
           this._openGraph.addOpenGraphData(userRecord, { force: true })
+
+
+          // Add back fragment  when items have loaded
+          if (
+            userRecord.works &&
+            userRecord.fundings &&
+            userRecord.peerReviews &&
+            userRecord.researchResources &&
+            userRecord.affiliations &&
+            userRecord.externalIdentifier &&
+            [
+              'works',
+              'affiliations',
+              'peer-reviews',
+              'funding',
+              'professional-activities',
+            ].find((x) => x === this.fragment)
+          ) {
+            setTimeout(() => {
+              document.querySelector('#' + this.fragment).scrollIntoView()
+              this._router.navigate([], { fragment: this.fragment })
+            })
+          }
+          if (
+            userRecord.externalIdentifier &&
+            this.fragment === 'other-identifiers'
+          ) {
+            setTimeout(() => {
+              document.querySelector('#' + this.fragment).scrollIntoView()
+              this._router.navigate([], { fragment: this.fragment })
+            })
+          }
         }),
         switchMap(() => this._togglz.getTogglz().pipe(first())),
         tap((togglz) => {

diff --git a/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.html b/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.html
@@ -63,7 +63,7 @@ <h1 class="orc-font-body-large">{{ trustedSummary.name }}</h1>
     >
       <ng-container *ngIf="trustedSummary.employmentAffiliations?.length">
         <a
-          href="{{ trustedSummary.orcid }}"
+          href="{{ trustedSummary.orcid }}#affiliations"
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -75,54 +75,47 @@ <h2 class="orc-font-small-print" i18n="@@summary.affiliations">
           [url]="trustedSummary?.orcid"
           [activitySummary]="trustedSummary.employmentAffiliations"
         ></app-summary-panel>
-        <a
-          href="{{ trustedSummary.orcid }}"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 class="orc-font-small-print" i18n="@@summary.keyDates">
-            KEY DATES
-          </h2>
-        </a>
-        <div class="card-container">
-          <ul>
-            <li>
-              <div
-                class="date-item"
-                [ngClass]="{
-                  'last-date': !trustedSummary.lastModified
-                }"
+      </ng-container>
+
+      <h2 class="orc-font-small-print" i18n="@@summary.keyDates">KEY DATES</h2>
+      <div class="card-container">
+        <ul>
+          <li>
+            <div
+              class="date-item"
+              [ngClass]="{
+                'last-date': !trustedSummary.lastModified
+              }"
+            >
+              <caption
+                class="orc-font-small-print"
+                i18n="@@summary.recordCreated"
               >
-                <caption
-                  class="orc-font-small-print"
-                  i18n="@@summary.recordCreated"
-                >
-                  Record created
-                </caption>
-                <label class="orc-font-body-small">{{
-                  trustedSummary.creation | date
-                }}</label>
-              </div>
-            </li>
-            <li>
-              <div
-                class="date-item last-date"
-                *ngIf="trustedSummary.lastModified"
+                Record created
+              </caption>
+              <label class="orc-font-body-small">{{
+                trustedSummary.creation | date
+              }}</label>
+            </div>
+          </li>
+          <li>
+            <div
+              class="date-item last-date"
+              *ngIf="trustedSummary.lastModified"
+            >
+              <caption
+                class="orc-font-small-print"
+                i18n="@@summary.lastUpdated"
               >
-                <caption
-                  class="orc-font-small-print"
-                  i18n="@@summary.lastUpdated"
-                >
-                  Last updated
-                </caption>
-                <label class="orc-font-body-small">{{
-                  trustedSummary.lastModified | date
-                }}</label>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </ng-container>
+                Last updated
+              </caption>
+              <label class="orc-font-body-small">{{
+                trustedSummary.lastModified | date
+              }}</label>
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
     <div
       class="column column-border"
@@ -131,7 +124,7 @@ <h2 class="orc-font-small-print" i18n="@@summary.keyDates">
     >
       <ng-container *ngIf="works?.length">
         <a
-          href="{{ trustedSummary.orcid }}"
+          href="{{ trustedSummary.orcid }}#works"
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -143,7 +136,7 @@ <h2 class="orc-font-small-print" i18n="@@summary.works">WORKS</h2>
       </ng-container>
       <ng-container *ngIf="peerReviews?.length">
         <a
-          href="{{ trustedSummary.orcid }}"
+          href="{{ trustedSummary.orcid }}#peer-reviews"
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -157,7 +150,7 @@ <h2 class="orc-font-small-print" i18n="@@summary.peerReviews">
       </ng-container>
       <ng-container *ngIf="funds?.length">
         <a
-          href="{{ trustedSummary.orcid }}"
+          href="{{ trustedSummary.orcid }}#funding"
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -178,7 +171,7 @@ <h2 class="orc-font-small-print" i18n="@@summary.funding">FUNDING</h2>
     >
       <ng-container *ngIf="trustedSummary.professionalActivities?.length">
         <a
-          href="{{ trustedSummary.orcid }}"
+          href="{{ trustedSummary.orcid }}#professional-activities"
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -197,7 +190,7 @@ <h2 class="orc-font-small-print" i18n="@@summary.funding">FUNDING</h2>
       </ng-container>
       <ng-container *ngIf="externalIdentifiers?.length">
         <a
-          href="{{ trustedSummary.orcid }}"
+          href="{{ trustedSummary.orcid }}#other-identifiers"
           target="_blank"
           rel="noopener noreferrer"
         >