Skip to content

Commit 3012ef5

Browse files
author
Snehal Kumbhar
authored
feat: display metadata on project landing page (DSP-1065) (#348)
* Feat (Project landing/metadata page): implementation of functionality to display project and dataset metadata
1 parent f348e70 commit 3012ef5

35 files changed

Lines changed: 1500 additions & 77 deletions

‎package-lock.json‎

Lines changed: 31 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"json2typescript": "^1.0.6",
4848
"jsonld": "^1.1.0",
4949
"moment": "^2.27.0",
50+
"ngx-clipboard": "^14.0.1",
5051
"ngx-color-picker": "^10.0.1",
5152
"openseadragon": "^2.4.0",
5253
"rxjs": "~6.5.3",

‎src/app/app.module.ts‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,12 +78,21 @@ import { SelectOntologyComponent } from './workspace/resource/resource-instance-
7878
import { SelectResourceClassComponent } from './workspace/resource/resource-instance-form/select-resource-class/select-resource-class.component';
7979
import { SelectPropertiesComponent } from './workspace/resource/resource-instance-form/select-properties/select-properties.component';
8080
import { SwitchPropertiesComponent } from './workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component';
81+
import { ProjectTabViewComponent } from './project/board/project-tab-view/project-tab-view.component';
82+
import { DatasetTabViewComponent } from './project/board/dataset-tab-view/dataset-tab-view.component';
83+
import { AttributionTabViewComponent } from './project/board/attribution-tab-view/attribution-tab-view.component';
84+
import { TermsTabViewComponent } from './project/board/terms-tab-view/terms-tab-view.component';
85+
import { ContactsTabViewComponent } from './project/board/contacts-tab-view/contacts-tab-view.component';
86+
import { ClipboardModule } from 'ngx-clipboard';
8187

8288
import { AngularSplitModule } from 'angular-split';
89+
import { PersonTemplateComponent } from './project/board/person-template/person-template.component';
90+
import { AddressTemplateComponent } from './project/board/address-template/address-template.component';
91+
import { OrganisationTemplateComponent } from './project/board/organisation-template/organisation-template.component';
8392

8493
// translate: AoT requires an exported function for factories
8594
export function HttpLoaderFactory(httpClient: HttpClient) {
86-
return new TranslateHttpLoader(httpClient, 'assets/i18n/', '.json')
95+
return new TranslateHttpLoader(httpClient, 'assets/i18n/', '.json');
8796
}
8897

8998
@NgModule({
@@ -143,7 +152,15 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
143152
SelectOntologyComponent,
144153
SelectResourceClassComponent,
145154
SelectPropertiesComponent,
146-
SwitchPropertiesComponent
155+
SwitchPropertiesComponent,
156+
ProjectTabViewComponent,
157+
DatasetTabViewComponent,
158+
AttributionTabViewComponent,
159+
TermsTabViewComponent,
160+
ContactsTabViewComponent,
161+
PersonTemplateComponent,
162+
AddressTemplateComponent,
163+
OrganisationTemplateComponent
147164
],
148165
imports: [
149166
AppRoutingModule,
@@ -165,6 +182,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
165182
deps: [HttpClient]
166183
}
167184
}),
185+
ClipboardModule,
168186
AngularSplitModule.forRoot()
169187
],
170188
providers: [

‎src/app/project/board/address-template/address-template.component.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Component, Input } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-address-template',
5+
template: `
6+
<div class="sub-details">
7+
<h4>Address:</h4>
8+
<address class="contents">
9+
<p *ngIf="address['streetAddress']">{{ address['streetAddress'] }}</p>
10+
<span *ngIf="address['postalCode']" style="margin-right: 6px;">{{ address['postalCode'] }}</span>
11+
<span *ngIf="address['addressLocality']">{{ address['addressLocality'] }}</span>
12+
</address>
13+
</div>
14+
`
15+
})
16+
export class AddressTemplateComponent {
17+
@Input() address: object;
18+
}

‎src/app/project/board/attribution-tab-view/attribution-tab-view.component.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<h1>Attribution</h1>
2+
3+
<p>The following people are involved in the creation of the dataset:</p>
4+
5+
<div class="tab-contents">
6+
7+
<mat-card *ngFor="let entry of attribution | keyvalue;" class="attribution-entry">
8+
9+
<h3 class="color-for-role"> {{ entry.value['role'] | titlecase }} </h3>
10+
11+
<app-person-template [person]="people[entry.key]"></app-person-template>
12+
13+
</mat-card>
14+
15+
</div>

‎src/app/project/board/attribution-tab-view/attribution-tab-view.component.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.attribution-entry {
2+
margin-top: 25px;
3+
4+
.color-for-role {
5+
color: brown;
6+
}
7+
}

‎src/app/project/board/attribution-tab-view/attribution-tab-view.component.spec.ts‎

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

‎src/app/project/board/attribution-tab-view/attribution-tab-view.component.ts‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { Component, Input, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-attribution-tab-view',
5+
templateUrl: './attribution-tab-view.component.html',
6+
styleUrls: ['./attribution-tab-view.component.scss']
7+
})
8+
export class AttributionTabViewComponent implements OnInit{
9+
10+
// attribution input
11+
@Input() attribution: object;
12+
13+
// hard-coded data to complete the functionality
14+
people = [{
15+
'address': {'addressLocality': 'Basel', 'postalCode': '4000', 'streetAddress': 'Teststrasse'},
16+
'email': 'benjamin.jones@test.ch',
17+
'familyName': 'Jones',
18+
'givenName': 'Benjamin',
19+
'jobTitle': 'Dr. des.',
20+
'organisation': {
21+
'address': {'addressLocality': 'Toronto', 'postalCode': '40000', 'streetAddress': 'University of Toronto Street'},
22+
'email': 'info@universityoftoronto.ca',
23+
'name': 'University of Toronto',
24+
'url': 'http://www.utoronto.ca/'
25+
}
26+
}, {
27+
'address': {'addressLocality': 'Basel', 'postalCode': '4000', 'streetAddress': 'Teststrasse'},
28+
'email': 'james.coleman@dasch.swiss',
29+
'familyName': 'Coleman',
30+
'givenName': 'James',
31+
'jobTitle': 'Dr. des.',
32+
'organisation': {
33+
'address': {'addressLocality': 'Toronto', 'postalCode': '40000', 'streetAddress': 'University of Toronto Street'},
34+
'email': 'info@universityoftoronto.ca',
35+
'name': 'University of Toronto',
36+
}
37+
}, {
38+
'address': {'addressLocality': 'Basel', 'postalCode': '4000', 'streetAddress': 'Teststrasse'},
39+
'email': 'lauren.berry@unibas.ch',
40+
'familyName': 'Berry',
41+
'givenName': 'Lauren',
42+
'jobTitle': 'Dr.',
43+
'organisation': {
44+
'address': {'addressLocality': 'Toronto', 'postalCode': '40000', 'streetAddress': 'University of Toronto Street'},
45+
'email': 'info@universityoftoronto.ca',
46+
'name': 'University of Toronto',
47+
}
48+
}, {
49+
'address': {'addressLocality': 'Basel', 'postalCode': '4000', 'streetAddress': 'Teststrasse'},
50+
'email': 'leonhard.hart@test.ch',
51+
'familyName': 'Hart',
52+
'givenName': 'Leonhard',
53+
'jobTitle': 'Prof.',
54+
'organisation': {
55+
'address': {'addressLocality': 'Toronto', 'postalCode': '40000', 'streetAddress': 'University of Toronto Street'},
56+
'email': 'info@universityoftoronto.ca',
57+
'name': 'University of Toronto',
58+
}
59+
},{
60+
'address': {'addressLocality': 'Basel', 'postalCode': '4000', 'streetAddress': 'Teststrasse'},
61+
'email': 'lauren.berry@unibas.ch',
62+
'familyName': 'Berry',
63+
'givenName': 'Lauren',
64+
'jobTitle': 'Dr.',
65+
'organisation': {
66+
'address': {'addressLocality': 'Toronto', 'postalCode': '40000', 'streetAddress': 'University of Toronto Street'},
67+
'email': 'info@universityoftoronto.ca',
68+
'name': 'University of Toronto',
69+
'url': 'http://www.utoronto.ca/'
70+
}
71+
}];
72+
73+
ngOnInit(): void {
74+
// reformat data
75+
for (let idx = 0; idx < this.people.length; idx++) {
76+
if (this.people[idx]['sameAs']) {
77+
this.people[idx]['sameAs'] = this.people[idx]['sameAs']['value'];
78+
}
79+
}
80+
}
81+
82+
}

0 commit comments

Comments
 (0)