Merge pull request #2031 from ORCID/trusted-summary

Trusted summary

src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import {
   ApplicationRoutes,
   routerPublicPageUrl,
   routerReactivation,
+  routerSummaryPageUrl,
   routerThirdPartySignInMatch,
 } from './constants'
 import { AuthenticatedGuard } from './guards/authenticated.guard'
@@ -22,6 +23,13 @@ const routes: Routes = [
     path: ApplicationRoutes.home,
     loadChildren: () => import('./home/home.module').then((m) => m.HomeModule),
   },
+  {
+    matcher: routerSummaryPageUrl,
+    loadChildren: () =>
+      import('./trusted-summary/trusted-summary.module').then(
+        (m) => m.TrustedSummaryModule
+      ),
+  },
   {
     matcher: routerPublicPageUrl,
     loadChildren: () =>

src/app/app.component.html

@@ -3,7 +3,11 @@
   <router-outlet name="banner"></router-outlet>
   <app-banners *ngIf="!headlessMode"></app-banners>
   <app-header *ngIf="!headlessMode" currentRoute=""></app-header>
-  <div class="router-container">
+  <div
+    [ngClass]="{
+      'router-container': !headlessMode
+    }"
+  >
     <router-outlet> </router-outlet>
     <app-footer *ngIf="!headlessMode"></app-footer>
   </div>

src/app/app.component.ts

@@ -130,9 +130,10 @@ export class AppComponent {
   }
 
   setPlatformClasses(platformInfo: PlatformInfo, oauthSessionFound?: boolean) {
-    this.headlessMode =
+    const isOauth =
       (platformInfo.hasOauthParameters || oauthSessionFound) &&
       this.currentRouteIsHeadlessOnOauthPage
+    this.headlessMode = isOauth || platformInfo.summaryScreen
     this.ie = platformInfo.ie
     this.edge = platformInfo.edge
     this.tabletOrHandset = platformInfo.tabletOrHandset

src/app/cdk/platform-info/platform-info.service.ts

@@ -36,6 +36,7 @@ export class PlatformInfoService {
     currentRoute: '',
     reactivation: false,
     reactivationCode: '',
+    summaryScreen: false,
   }
   platformSubject = new BehaviorSubject<PlatformInfo>(this.platform)
 
@@ -231,6 +232,7 @@ export class PlatformInfoService {
         this.window.location.pathname.toLowerCase().indexOf('reactivation') >=
         0,
       reactivationCode: this.getReactivationCode(),
+      summaryScreen: this.window.location.pathname.endsWith('/summary'),
     }
     this.platformSubject.next(this.platform)
     return this.platformSubject.asObservable()

src/app/cdk/platform-info/platform-info.type.ts

@@ -23,4 +23,5 @@ export interface PlatformInfo {
   currentRoute: string
   reactivation: boolean
   reactivationCode: string
+  summaryScreen: boolean
 }

src/app/constants.ts

@@ -221,7 +221,18 @@ export function routerPublicPageUrl(segments: UrlSegment[]) {
   if (segments[0] && isValidOrcidFormat(segments[0].path)) {
     return { consumed: [segments[0]] }
   }
-  if (segments[1] && isValidOrcidFormat(segments[1].path)) {
+  return {
+    consumed: [],
+  }
+}
+
+export function routerSummaryPageUrl(segments: UrlSegment[]) {
+  if (
+    segments[0] &&
+    isValidOrcidFormat(segments[0].path) &&
+    segments[1] &&
+    segments[1].path === 'summary'
+  ) {
     return { consumed: [segments[0], segments[1]] }
   }
   return {

src/app/core/trusted-summary/trusted-summary.service.spec.ts

@@ -0,0 +1,27 @@
+import { TestBed } from '@angular/core/testing'
+
+import { TrustedSummaryService } from './trusted-summary.service'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { ErrorHandlerService } from '../error-handler/error-handler.service'
+
+describe('TrustedSummaryService', () => {
+  let service: TrustedSummaryService
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [
+        { provide: ErrorHandlerService, userValue: {} },
+        {
+          provide: ErrorHandlerService,
+          useValue: {},
+        },
+      ],
+    })
+    service = TestBed.inject(TrustedSummaryService)
+  })
+
+  it('should be created', () => {
+    expect(service).toBeTruthy()
+  })
+})

src/app/core/trusted-summary/trusted-summary.service.ts

@@ -0,0 +1,37 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { ErrorHandlerService } from '../error-handler/error-handler.service'
+import { Observable } from 'rxjs'
+import { TrustedSummary } from 'src/app/types/trust-summary'
+import { environment } from 'src/environments/environment'
+import { catchError, retry } from 'rxjs/operators'
+import { ERROR_REPORT } from 'src/app/errors'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TrustedSummaryService {
+  headers = new HttpHeaders({
+    'Access-Control-Allow-Origin': '*',
+    'Content-Type': 'application/json',
+  })
+
+  constructor(
+    private _http: HttpClient,
+    private _errorHandler: ErrorHandlerService
+  ) {}
+
+  getSummary(orcid): Observable<TrustedSummary> {
+    let url = orcid + '/summary.json'
+    return this._http
+      .get<TrustedSummary>(environment.BASE_URL + url, {
+        headers: this.headers,
+      })
+      .pipe(
+        retry(3),
+        catchError((error) =>
+          this._errorHandler.handleError(error, ERROR_REPORT.STANDARD_VERBOSE)
+        )
+      )
+  }
+}

src/app/shared/pipes/month-day-year-date-to-string/month-day-year-date-to-string.pipe.ts

@@ -5,8 +5,8 @@ import { MonthDayYearDate } from 'src/app/types'
   name: 'monthDayYearDateToString',
 })
 export class MonthDayYearDateToStringPipe implements PipeTransform {
-  transform(value: MonthDayYearDate | number): string {
-    if (typeof value === 'number') {
+  transform(value: MonthDayYearDate | number | string): string {
+    if (typeof value === 'number' || typeof value === 'string') {
       const date = new Date(value)
       value = {
         day: date.getUTCDate() + '',

src/app/trusted-summary/component/summary-panel/summary-panel.component.html

@@ -0,0 +1,105 @@
+<div class="card-container" *ngIf="activitiesToDisplay?.length">
+  <ng-container *ngFor="let activity of activitiesToDisplay; last as isLast">
+    <div
+      class="activity-container"
+      [ngClass]="{
+        'with-border': !isLast || acitivityCountOverflow,
+        'padding-botton': !isLast || acitivityCountOverflow
+      }"
+    >
+      <div class="header">
+        <div class="header-title">
+          <mat-icon
+            [attr.aria-label]="validatedSourceAriaLabel"
+            class="verified"
+            *ngIf="activity.validatedOrSelfAsserted"
+            >check_circle</mat-icon
+          >
+          <mat-icon
+            class="margin-compensation"
+            [attr.aria-label]="selftAssertedSource"
+            *ngIf="!activity.validatedOrSelfAsserted"
+            ><img src="./assets/vectors/profile-not-verified.svg" />
+          </mat-icon>
+          <h3
+            *ngIf="activity.organizationName && activity.url"
+            class="orc-font-body-small"
+          >
+            <a
+              class="underline"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="{{ activity.url }}"
+              >{{ activity.organizationName }}</a
+            >
+          </h3>
+          <h3
+            *ngIf="activity.organizationName && !activity.url"
+            class="orc-font-body-small"
+          >
+            {{ activity.organizationName }}
+          </h3>
+        </div>
+
+        <a
+          *ngIf="activity.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="{{ activity.url }}"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M12.0006 8.80024C12.0006 8.35846 12.3588 8.00026 12.8007 8.00026C13.2425 8.00026 13.6007 8.35846 13.6007 8.80024V13.6001C13.6007 14.9256 12.5262 16.0001 11.2006 16.0001H2.40012C1.07452 16.0001 0 14.9256 0 13.6001V4.80033C0 3.47483 1.07452 2.40039 2.40012 2.40039H7.20037C7.64218 2.40039 8.00041 2.75859 8.00041 3.20037C8.00041 3.64215 7.64218 4.00035 7.20037 4.00035H2.40012C1.95831 4.00035 1.60008 4.35856 1.60008 4.80033V13.6001C1.60008 14.0419 1.95831 14.4001 2.40012 14.4001H11.2006C11.6424 14.4001 12.0006 14.0419 12.0006 13.6001V8.80024Z"
+              fill="#8EC2DB"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M14.4 1.59996H10.3998C9.95796 1.59996 9.59973 1.24176 9.59973 0.799981C9.59973 0.358204 9.95796 0 10.3998 0H15.2C15.6418 0 16.0001 0.358204 16.0001 0.799981V5.59986C16.0001 6.04164 15.6418 6.39985 15.2 6.39985C14.7582 6.39985 14.4 6.04164 14.4 5.59986V1.59996Z"
+              fill="#8EC2DB"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M6.9634 10.1654C6.65088 10.4777 6.14443 10.4777 5.83191 10.1654C5.51957 9.85293 5.51957 9.34652 5.83191 9.03402L14.6324 0.234234C14.9449 -0.0780781 15.4513 -0.0780781 15.7638 0.234234C16.0762 0.546725 16.0762 1.05314 15.7638 1.36564L6.9634 10.1654Z"
+              fill="#8EC2DB"
+            />
+          </svg>
+        </a>
+      </div>
+      <div class="body-wrapper">
+        <caption class="orc-font-small-print">
+          <ng-container *ngIf="activity.startDate">
+            {{ activity.startDate | monthDayYearDateToString }}
+          </ng-container>
+          <ng-container *ngIf="activity.endDate">
+            <ng-container i18n="@@summary.to">to</ng-container>
+            {{ activity.endDate | monthDayYearDateToString }}
+          </ng-container>
+        </caption>
+        <div class="orc-font-small-print">{{ activity.role }}</div>
+        <div class="orc-font-small-print">{{ activity.type }}</div>
+      </div>
+    </div>
+  </ng-container>
+  <div class="activity-container" *ngIf="acitivityCountOverflow">
+    <a
+      [href]="url"
+      class="underline orc-font-body-small"
+      target="_blank"
+      rel="noopener noreferrer"
+      >+ {{ count - 3 }}
+      <ng-container i18n="@@summary.moreAffiliation"
+        >more Affiliations</ng-container
+      ></a
+    >
+  </div>
+</div>

src/app/trusted-summary/component/summary-panel/summary-panel.component.scss

@@ -0,0 +1,78 @@
+.card-container {
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 16px;
+  border: 2px solid;
+  border-radius: 4px;
+  background-color: white;
+}
+
+.mobile {
+  :host {
+    .card-container {
+      max-width: 100%;
+    }
+  }
+}
+
+.activity-container.padding-botton {
+  padding-bottom: 16px;
+}
+
+.activity-container {
+  width: 100%;
+  border-bottom: 16px;
+  text-align: initial;
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    .header-title {
+      display: flex;
+      align-items: center;
+
+      h3 {
+        font-weight: 400;
+
+        margin: 0;
+      }
+    }
+
+    display: flex;
+    padding-bottom: 4px;
+  }
+
+  caption {
+    font-style: italic;
+    display: flex;
+    width: 100%;
+    text-align: left;
+  }
+}
+
+.activity-container.with-border {
+  border-bottom: 2px solid;
+}
+
+.body-wrapper {
+  margin-inline-start: 27px;
+}
+
+mat-icon.margin-compensation {
+  margin-bottom: 3px;
+}
+
+mat-icon {
+  min-width: 22px;
+  margin-inline-end: 3px;
+}
+
+a {
+  font-weight: 400;
+}

src/app/trusted-summary/component/summary-panel/summary-panel.component.scss-theme.scss

@@ -0,0 +1,40 @@
+@use '@angular/material' as mat;
+@import 'src/assets/scss/material.orcid-theme.scss';
+
+@mixin theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  .verified {
+    color: mat.get-color-from-palette($accent, 400);
+  }
+
+  .not-verified {
+    color: mat.get-color-from-palette($primary, 200);
+  }
+
+  .card-container {
+    border-color: map-get($background, 'ui-background-light');
+  }
+
+  .activity-container {
+    .header {
+      .header-title {
+        color: map-get($foreground, 'text-dark-high');
+      }
+    }
+  }
+
+  .activity-container.with-border {
+    border-color: map-get($background, 'ui-background-light');
+  }
+
+  .body-wrapper {
+    color: map-get($foreground, 'text-dark-mid');
+  }
+}
+
+@include theme($orcid-app-theme);