\ No newline at end of file diff --git a/src/app/trusted-summary/pages/trusted-summary/trusted-summary-page.component.scss b/src/app/trusted-summary/pages/trusted-summary/trusted-summary-page.component.scss new file mode 100644 index 0000000000..7118c03ca8 --- /dev/null +++ b/src/app/trusted-summary/pages/trusted-summary/trusted-summary-page.component.scss @@ -0,0 +1,191 @@ +:host { + width: 100%; + display: flex; + justify-content: center; +} + +main { + margin-top: 32px; +} + +main.inside-iframe { + margin-top: 0; + align-content: start; + grid-gap: 0; + height: 100vh; + box-sizing: border-box; + + .panel-body { + padding-top: 16px; + overflow-y: auto; + } +} + +.panel { + display: grid; + grid-gap: 16px; + border-radius: 8px 8px 0px 0px; + border: 2px solid; +} + +.panel-header { + height: 46px; + border-bottom: 2px solid; + color: #fff; + padding: 16px; + display: flex; + flex-direction: row; + + label.caption { + text-align: initial; + display: inline; + line-height: 1; + } + + img { + padding-inline-end: 10px; + } + + .header-name { + display: flex; + flex-direction: column; + + h1 { + margin: 0; + line-height: 1; + word-break: break-word; + } + } +} + +.column { + padding-left: 20px; + padding-right: 20px; +} + +.panel-body { + grid-column: 1 / -1; + display: grid; + padding-bottom: 16px; +} + +.panel-body-3-cols { + // 3 columns with a max with of 320px each + grid-template-columns: repeat(3, minmax(auto, 433px)); +} + +.panel-body-2-cols { + grid-template-columns: 1fr 1fr; +} + +.panel-body-1-cols { + grid-template-columns: 340px; +} + +.column-border { + border-right: 2px solid; +} + +h2 { + font-weight: 600; + letter-spacing: 2px; +} + +main { + max-width: 100%; + overflow: hidden; +} + +main.panel.mobile { + max-width: 340px; +} + +.date-item { + display: flex; + flex-direction: column; + padding-bottom: 16px; + + caption, + label { + display: block; + } +} + +.date-item.last-date { + padding-bottom: 0; +} + +ul { + list-style-type: none; + + margin: 0; + margin: 0; + padding-inline-start: 29px; +} + +ul li { + position: relative; + margin-bottom: 0; +} + +ul li:after { + content: url('/assets/vectors/bullet-point.svg'); + position: absolute; + left: -29px; + top: 5px; +} + +ul li:before { + content: ''; + position: absolute; + left: -16px; + border-left: 1px dashed; + height: 100%; + width: 1px; + left: -19px; + top: 6px; +} + +ul li:first-child:before { + top: 6px; +} + +ul li:last-child:before { + height: 6px; +} + +.card-container { + display: flex; + padding: 16px; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 16px; + border-radius: 4px; + border: 2px solid; + background: #fff; +} + +.cursor-pointer { + cursor: pointer; +} + +a { + .label-with-icon { + padding-top: 2px; + color: #fff; + text-decoration: underline; + + > svg > path { + fill: #fff; + } + + display: flex; + align-items: center; + gap: 8px; + } + + h2.hover-effect { + text-decoration: underline; + } +} diff --git a/src/app/trusted-summary/pages/trusted-summary/trusted-summary-page.component.spec.ts b/src/app/trusted-summary/pages/trusted-summary/trusted-summary-page.component.spec.ts new file mode 100644 index 0000000000..2df033c9c7 --- /dev/null +++ b/src/app/trusted-summary/pages/trusted-summary/trusted-summary-page.component.spec.ts @@ -0,0 +1,43 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing' + +import { TrustedSummaryPageComponent } from './trusted-summary.component' +import { TrustedSummaryService } from 'src/app/core/trusted-summary/trusted-summary.service' +import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.service' +import { HttpClientTestingModule } from '@angular/common/http/testing' +import { PlatformInfoService } from 'src/app/cdk/platform-info' +import { of } from 'rxjs' +import { ZendeskService } from 'src/app/core/zendesk/zendesk.service' +import { WINDOW } from 'src/app/cdk/window' + +describe('TrustedSummaryComponent', () => { + let component: TrustedSummaryPageComponent + let fixture: ComponentFixture + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [TrustedSummaryPageComponent], + providers: [ + { provide: ErrorHandlerService, userValue: {} }, + { + provide: TrustedSummaryService, + useValue: { getSummary: () => of() }, + }, + { provide: PlatformInfoService, useValue: { get: () => of() } }, + { + provide: ZendeskService, + useValue: { hide: () => of() }, + }, + { provide: WINDOW, useValue: {} }, + ], + imports: [HttpClientTestingModule], + }).compileComponents() + + fixture = TestBed.createComponent(TrustedSummaryPageComponent) + component = fixture.componentInstance + fixture.detectChanges() + }) + + it('should create', () => { + expect(component).toBeTruthy() + }) +}) diff --git a/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.ts b/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.ts index 36e5db2ff7..9662732bbc 100644 --- a/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.ts +++ b/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.ts @@ -1,218 +1,11 @@ import { Component, Inject, OnDestroy, OnInit } from '@angular/core' -import { Router } from '@angular/router' -import { TrustedSummaryService } from 'src/app/core/trusted-summary/trusted-summary.service' -import { TrustedSummary } from 'src/app/types/trust-summary' -import { SimpleActivityModel } from '../../component/summary-simple-panel/summary-simple-panel.component' -import { PlatformInfoService } from 'src/app/cdk/platform-info' -import { takeUntil } from 'rxjs/operators' -import { Subject } from 'rxjs' -import { RobotsMetaTagsService } from 'src/app/core/robots-meta-tags/robots-meta-tags.service' -import { ZendeskService } from 'src/app/core/zendesk/zendesk.service' -import { WINDOW } from 'src/app/cdk/window' @Component({ - selector: 'app-trusted-summary', - templateUrl: './trusted-summary.component.html', - styleUrls: [ - './trusted-summary.component.scss', - './trusted-summary.component.scss-theme.scss', - ], + selector: 'app-trusted-summary-page', + templateUrl: './trusted-summary-page.component.html', + styleUrls: ['./trusted-summary-page.component.scss'], }) -export class TrustedSummaryComponent implements OnInit, OnDestroy { - trustedSummary: TrustedSummary - currentLocation: string - orcid: string - works: SimpleActivityModel[] = [] - unsubscribe = new Subject() - affiliationsHover = false - worksHover = false - peerReviewsHover = false - fundsHover = false - externalIdentifiersHover = false - professionalActivitiesHover = false - - labelValidatedWorks = $localize`:@@summary.validatedWorks:Validated works` - labelValidatedWork = $localize`:@@summary.validatedWork:Validated work` - labelSelfAssertedWorks = $localize`:@@summary.selfAssertedWorks:Self-asserted works` - labelSelfAssertedWork = $localize`:@@summary.selfAssertedWork:Self-asserted work` - labelValidatedFunding = $localize`:@@summary.validatedFunding:Validated funding` - labelValidatedFundings = $localize`:@@summary.validatedFundings:Validated fundings` - labelSelfAssertedFunding = $localize`:@@summary.selfAssertedFunding:Self-asserted funding` - labelSelfAssertedFundings = $localize`:@@summary.selfAssertedFundings:Self-asserted fundings` - labelReviesFor = $localize`:@@summary.reviewsFor:reviews for` - labelReviewFor = $localize`:@@summary.reviewFor:review for` - labelpublicationgrants = $localize`:@@summary.publicationgrantes:publications/grants` - labelpublicationgrant = $localize`:@@summary.publicationgrant:publication/grant` - labelMoreAffiliations = $localize`:@@summary.moreAffiliations:more Affiliations` - labelMoreProfessionalActivities = $localize`:@@summary.moreProfessionalActivities:more Professional activities` - labelMoreOtherIdentifiers = $localize`:@@summary.moreOtherIdentifiers:more Other Identifiers` - insideIframe: boolean - labelMoreAffiliation = $localize`:@@summary.moreAffiliation:more Affiliation` - labelMoreProfessionalActivitie = $localize`:@@summary.moreProfessionalActivitie:more Professional activity` - labelMoreOtherIdentifier = $localize`:@@summary.moreOtherIdentifier:more Other Identifier` - - funds: SimpleActivityModel[] = [] - peerReviews: SimpleActivityModel[] = [] - mobile: boolean - externalIdentifiers: SimpleActivityModel[] - twoColumns: boolean = false - threeColumns: boolean = false - oneColumn: boolean - createdToday = false - modifiedToday: boolean - creationDateWithOffset: any - lastUpdateDate: any - - constructor( - private _trustedSummary: TrustedSummaryService, - private _router: Router, - private _platform: PlatformInfoService, - private _robotsMetaTags: RobotsMetaTagsService, - private _zendeskService: ZendeskService, - // import window - @Inject(WINDOW) private _window: Window - ) {} - ngOnDestroy(): void { - this.unsubscribe.next() - this.unsubscribe.complete() - this._robotsMetaTags.restoreEnvironmentRobotsConfig() - } - - ngOnInit(): void { - this.insideIframe = this._window.self !== this._window.top - this._zendeskService.hide() - this._robotsMetaTags.disallowRobots() - this._platform - .get() - .pipe(takeUntil(this.unsubscribe)) - .subscribe((platform) => { - if (platform.columns4 || platform.columns8) { - this.mobile = true - } else { - this.mobile = false - } - }) - this.currentLocation = window.location.origin - this.orcid = this._router.url.split('/')[1] - - this._trustedSummary.getSummary(this.orcid).subscribe((data) => { - this.trustedSummary = data - if (this.trustedSummary.creation) { - this.creationDateWithOffset = this.dateWithOffset( - this.trustedSummary.creation - ) - // if record was created today - if ( - this.creationDateWithOffset.toDateString() === - new Date().toDateString() - ) { - this.createdToday = true - } - } - if (this.trustedSummary.lastModified) { - this.lastUpdateDate = this.dateWithOffset( - this.trustedSummary.lastModified - ) - // if record was modified today - if (this.lastUpdateDate.toDateString() === new Date().toDateString()) { - this.modifiedToday = true - } - } - - if (this.trustedSummary.selfAssertedWorks) { - this.works.push({ - verified: false, - countA: this.trustedSummary.selfAssertedWorks, - stringA: - this.trustedSummary.selfAssertedWorks > 1 - ? this.labelSelfAssertedWorks - : this.labelSelfAssertedWork, - }) - } - if (this.trustedSummary.validatedWorks) { - this.works.push({ - verified: true, - countA: this.trustedSummary.validatedWorks, - stringA: - this.trustedSummary.validatedWorks > 1 - ? this.labelValidatedWorks - : this.labelValidatedWork, - }) - } - if (this.trustedSummary.validatedFunds) { - this.funds.push({ - verified: true, - countA: this.trustedSummary.validatedFunds, - stringA: - this.trustedSummary.validatedFunds > 1 - ? this.labelValidatedFundings - : this.labelValidatedFunding, - }) - } - if (this.trustedSummary.selfAssertedFunds) { - this.funds.push({ - verified: false, - countA: this.trustedSummary.selfAssertedFunds, - stringA: - this.trustedSummary.selfAssertedFunds > 1 - ? this.labelSelfAssertedFundings - : this.labelSelfAssertedFunding, - }) - } - if ( - this.trustedSummary.peerReviewsTotal && - this.trustedSummary.peerReviewPublicationGrants - ) { - this.peerReviews.push({ - verified: true, - countA: this.trustedSummary.peerReviewsTotal, - stringA: - this.trustedSummary.peerReviewsTotal > 1 - ? this.labelReviesFor - : this.labelReviewFor, - countB: this.trustedSummary.peerReviewPublicationGrants, - stringB: - this.trustedSummary.peerReviewPublicationGrants > 1 - ? this.labelpublicationgrants - : this.labelpublicationgrant, - }) - } - this.externalIdentifiers = this.trustedSummary.externalIdentifiers?.map( - (id) => { - return { - verified: id.validated, - url: id.url, - stringA: id.commonName + ': ' + id.reference, - } - } - ) - - if ( - (this.works.length > 0 || - this.funds.length > 0 || - this.peerReviews.length > 0) && - (this.externalIdentifiers?.length > 0 || - this.trustedSummary.professionalActivitiesCount > 0 || - this.trustedSummary.externalIdentifiers.length > 0) - ) { - this.threeColumns = true - } else if ( - this.works.length > 0 || - this.funds.length > 0 || - this.peerReviews.length > 0 || - this.externalIdentifiers?.length > 0 || - this.trustedSummary.professionalActivitiesCount > 0 - ) { - this.twoColumns = true - } else { - this.oneColumn = true - } - }) - } - dateWithOffset(creation: string): any { - const date = new Date(creation) - const offset = date.getTimezoneOffset() - const offsettedDate = new Date(date.getTime() + offset * 60 * 1000) - return offsettedDate - } +export class TrustedSummaryPageComponent implements OnInit, OnDestroy { + ngOnDestroy(): void {} + ngOnInit(): void {} } diff --git a/src/app/trusted-summary/trusted-summary-routing.module.ts b/src/app/trusted-summary/trusted-summary-routing.module.ts index 3c49708eff..38350e32d2 100644 --- a/src/app/trusted-summary/trusted-summary-routing.module.ts +++ b/src/app/trusted-summary/trusted-summary-routing.module.ts @@ -1,11 +1,11 @@ import { NgModule } from '@angular/core' import { Routes, RouterModule } from '@angular/router' -import { TrustedSummaryComponent } from './pages/trusted-summary/trusted-summary.component' +import { TrustedSummaryPageComponent } from './pages/trusted-summary/trusted-summary.component' const routes: Routes = [ { path: '', - component: TrustedSummaryComponent, + component: TrustedSummaryPageComponent, }, ] @@ -13,4 +13,4 @@ const routes: Routes = [ imports: [RouterModule.forChild(routes)], exports: [RouterModule], }) -export class TrustedSummaryRouting {} +export class TrustedSummaryPageRouting {} diff --git a/src/app/trusted-summary/trusted-summary.module.ts b/src/app/trusted-summary/trusted-summary.module.ts index 180e232ff3..05363b6e75 100644 --- a/src/app/trusted-summary/trusted-summary.module.ts +++ b/src/app/trusted-summary/trusted-summary.module.ts @@ -1,25 +1,15 @@ import { NgModule } from '@angular/core' import { CommonModule } from '@angular/common' -import { SummaryPanelComponent } from './component/summary-panel/summary-panel.component' -import { SummarySimplePanelComponent } from './component/summary-simple-panel/summary-simple-panel.component' -import { TrustedSummaryComponent } from './pages/trusted-summary/trusted-summary.component' -import { TrustedSummaryRouting } from './trusted-summary-routing.module' + +import { TrustedSummaryPageRouting } from './trusted-summary-routing.module' import { MatIconModule } from '@angular/material/icon' import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner' import { SharedModule } from '../shared/shared.module' +import { TrustedSummaryModule } from '../cdk/trusted-summary/trusted-summary.module' +import { TrustedSummaryPageComponent } from './pages/trusted-summary/trusted-summary.component' @NgModule({ - declarations: [ - SummaryPanelComponent, - SummarySimplePanelComponent, - TrustedSummaryComponent, - ], - imports: [ - CommonModule, - TrustedSummaryRouting, - MatIconModule, - MatProgressSpinnerModule, - SharedModule, - ], + declarations: [TrustedSummaryPageComponent], + imports: [TrustedSummaryModule, TrustedSummaryPageRouting], }) -export class TrustedSummaryModule {} +export class TrustedSummaryPageModule {} diff --git a/src/locale/properties/summary/summary.en.properties b/src/locale/properties/summary/summary.en.properties index e8aa40cdf2..19373b69e9 100644 --- a/src/locale/properties/summary/summary.en.properties +++ b/src/locale/properties/summary/summary.en.properties @@ -32,3 +32,8 @@ summary.moreOtherIdentifier=more Other Identifier summary.recordIsLocked=This record is locked summary.recordIsDeprecated=This record has been deprecated summary.recordIsDeactivated=This record has been deactivated +summary.loadingRecordSummary=Loading record summary +summary.hideRecordSummary=Hide record summary +summary.showRecordSummary=Show record summary +summary.recordSummary=Record summary +summary.findOutMoreAboutRecordSummaries=Find out more about record summaries \ No newline at end of file