Skip to content

Commit 42f395e

Browse files
alisaismailatialisaismailati
committed
[DSC-1708] (WIP 1) crisref rendering visualization
1 parent 1d6edf2 commit 42f395e

22 files changed

Lines changed: 461 additions & 45 deletions

‎src/app/shared/metadata-link-view/metadata-link-view-avatar-popover/metadata-link-view-avatar-popover.component.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="thumbnail" [class.limit-width]="limitWidth" *ngVar="(isLoading$ | async) as isLoading">
2+
<div *ngIf="isLoading" class="thumbnail-content outer">
3+
<div class="inner">
4+
<div class="centered">
5+
<ds-themed-loading [spinner]="true"></ds-themed-loading>
6+
</div>
7+
</div>
8+
</div>
9+
<ng-container *ngVar="(src$ | async) as src">
10+
<!-- don't use *ngIf="!isLoading" so the thumbnail can load in while the animation is playing -->
11+
<img *ngIf="src !== null" class="thumbnail-content img-fluid" [ngClass]="{'d-none': isLoading}"
12+
[src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()" (load)="successHandler()">
13+
<div *ngIf="src === null && !isLoading" class="thumbnail-content outer" #thumbnailBox>
14+
<img [src]="fallbackImage" [alt]="placeholder | translate">
15+
</div>
16+
</ng-container>
17+
</div>

‎src/app/shared/metadata-link-view/metadata-link-view-avatar-popover/metadata-link-view-avatar-popover.component.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
:host{
2+
img {
3+
height: 50px;
4+
width: 50px;
5+
border: 1px solid #ccc;
6+
border-radius: 50%;
7+
object-fit: cover;
8+
}
9+
}

‎src/app/shared/metadata-link-view/metadata-link-view-avatar-popover/metadata-link-view-avatar-popover.component.spec.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* tslint:disable:no-unused-variable */
2+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3+
import { By } from '@angular/platform-browser';
4+
import { DebugElement } from '@angular/core';
5+
6+
import { MetadataLinkViewAvatarPopoverComponent } from './metadata-link-view-avatar-popover.component';
7+
8+
describe('MetadataLinkViewAvatarPopoverComponent', () => {
9+
let component: MetadataLinkViewAvatarPopoverComponent;
10+
let fixture: ComponentFixture<MetadataLinkViewAvatarPopoverComponent>;
11+
12+
beforeEach(async(() => {
13+
TestBed.configureTestingModule({
14+
declarations: [ MetadataLinkViewAvatarPopoverComponent ]
15+
})
16+
.compileComponents();
17+
}));
18+
19+
beforeEach(() => {
20+
fixture = TestBed.createComponent(MetadataLinkViewAvatarPopoverComponent);
21+
component = fixture.componentInstance;
22+
fixture.detectChanges();
23+
});
24+
25+
it('should create', () => {
26+
expect(component).toBeTruthy();
27+
});
28+
});

‎src/app/shared/metadata-link-view/metadata-link-view-avatar-popover/metadata-link-view-avatar-popover.component.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component } from '@angular/core';
2+
import { ThumbnailComponent } from 'src/app/thumbnail/thumbnail.component';
3+
4+
@Component({
5+
selector: 'ds-metadata-link-view-avatar-popover',
6+
templateUrl: './metadata-link-view-avatar-popover.component.html',
7+
styleUrls: ['./metadata-link-view-avatar-popover.component.scss']
8+
})
9+
export class MetadataLinkViewAvatarPopoverComponent extends ThumbnailComponent {
10+
11+
fallbackImage = 'assets/images/person-placeholder.svg';
12+
}

‎src/app/shared/metadata-link-view/metadata-link-view-orcid/metadata-link-view-orcid.component.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div [class]="field.styleValue">
2+
<span class="d-flex align-items-center txt-value">
3+
4+
<a *ngIf="(orcidUrl$ | async); else noOrcidUrl" href="{{(orcidUrl$ | async)}}/{{metadataValue.value}}" target="_blank">
5+
{{ metadataValue.value }}
6+
</a>
7+
8+
<ng-template #noOrcidUrl>{{ metadataValue.value }}</ng-template>
9+
10+
<img *ngIf="hasOrcidBadge()"
11+
placement="top"
12+
ngbTooltip="{{ 'orcid.badge.tooltip' | translate }}"
13+
class="orcid-icon"
14+
alt="orcid-logo"
15+
src="assets/images/orcid.logo.icon.svg"/>
16+
17+
</span>
18+
</div>

‎src/app/shared/metadata-link-view/metadata-link-view-orcid/metadata-link-view-orcid.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.orcid-icon {
2+
height: 1.2rem;
3+
padding-left: 0.3rem;
4+
}

‎src/app/shared/metadata-link-view/metadata-link-view-orcid/metadata-link-view-orcid.component.spec.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { MetadataLinkViewOrcidComponent } from './metadata-link-view-orcid.component';
4+
5+
describe('MetadataLinkViewOrcidComponent', () => {
6+
let component: MetadataLinkViewOrcidComponent;
7+
let fixture: ComponentFixture<MetadataLinkViewOrcidComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ MetadataLinkViewOrcidComponent ]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(MetadataLinkViewOrcidComponent);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});

‎src/app/shared/metadata-link-view/metadata-link-view-orcid/metadata-link-view-orcid.component.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Component, Input } from '@angular/core';
2+
import { Item } from 'src/app/core/shared/item.model';
3+
import { OrcidComponent } from 'src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/orcid/orcid.component';
4+
5+
@Component({
6+
selector: 'ds-metadata-link-view-orcid',
7+
templateUrl: './metadata-link-view-orcid.component.html',
8+
styleUrls: ['./metadata-link-view-orcid.component.scss']
9+
})
10+
export class MetadataLinkViewOrcidComponent extends OrcidComponent {
11+
12+
@Input() itemValue: Item;
13+
14+
ngOnInit(): void {
15+
this.item = this.itemValue;
16+
super.ngOnInit();
17+
}
18+
19+
}

‎src/app/shared/metadata-link-view/metadata-link-view-popover/metadata-link-view-popover.component.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<div class="view-container">
2+
<div>
3+
<ds-metadata-link-view-avatar-popover
4+
*ngIf="item.thumbnail | async"
5+
[thumbnail]="item.thumbnail | async"
6+
></ds-metadata-link-view-avatar-popover>
7+
</div>
8+
9+
<ng-container *ngFor="let metadata of entityMetdataFields">
10+
<div class="row" *ngIf="item.hasMetadata(metadata)">
11+
<div class="col-4">
12+
<span class="font-weight-bold">{{ "metadata-link-view.popover.label." + (isOtherEntityType ? "other" : item.entityType) + "." + metadata | translate }}</span>
13+
</div>
14+
<div class="col-8">
15+
<span class="ellipsis-y-3" *ngIf="longTextMetadataList.includes(metadata)">
16+
{{ item.firstMetadataValue(metadata) }}
17+
</span>
18+
<a [href]="item.firstMetadataValue(metadata)" target="_blank" *ngIf="isLink(item.firstMetadataValue(metadata))">
19+
{{ item.firstMetadataValue(metadata) }}
20+
</a>
21+
<div class="d-flex" *ngIf="!isLink(item.firstMetadataValue(metadata)) && !longTextMetadataList.includes(metadata)">
22+
<ds-metadata-link-view-orcid [itemValue]="item" *ngIf="metadata === 'person.identifier.orcid'; else valueIconType"></ds-metadata-link-view-orcid>
23+
<ng-template #valueIconType>
24+
<span>{{ item.firstMetadataValue(metadata) }}</span>
25+
<img
26+
*ngIf="showIconMetadataList.includes(metadata)"
27+
placement="top"
28+
ngbTooltip="{{ item.firstMetadataValue(metadata) }}"
29+
class="source-icon"
30+
alt="source-logo"
31+
[src]="getSourceIconPath(metadata)"
32+
data-test="sourceIcon"
33+
/>
34+
</ng-template>
35+
</div>
36+
</div>
37+
</div>
38+
</ng-container>
39+
40+
<div class="d-flex">
41+
<a
42+
class="font-weight-bold"
43+
[routerLink]="[getItemPageRoute()]"
44+
data-test="viewItemButton"
45+
>
46+
{{ "metadata-link-view.popover.label.more-info" | translate }}
47+
</a>
48+
</div>
49+
</div>

‎src/app/shared/metadata-link-view/metadata-link-view-popover/metadata-link-view-popover.component.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.source-icon {
2+
height: 1.2rem;
3+
padding-left: 0.3rem;
4+
}
5+
6+
.view-container {
7+
8+
}

0 commit comments

Comments
 (0)