Skip to content
Permalink
Browse files
feat: display metadata on project landing page (DSP-1065) (#348)
* Feat (Project landing/metadata page): implementation of functionality to display project and dataset metadata
  • Loading branch information
Snehal Kumbhar committed Jan 11, 2021
1 parent f348e70 commit 3012ef5e767dea3a16c7ae380bf3f1a4b3385c9e
Showing with 1,500 additions and 77 deletions.
  1. +31 −0 package-lock.json
  2. +1 −0 package.json
  3. +20 −2 src/app/app.module.ts
  4. +18 −0 src/app/project/board/address-template/address-template.component.ts
  5. +15 −0 src/app/project/board/attribution-tab-view/attribution-tab-view.component.html
  6. +7 −0 src/app/project/board/attribution-tab-view/attribution-tab-view.component.scss
  7. +25 −0 src/app/project/board/attribution-tab-view/attribution-tab-view.component.spec.ts
  8. +82 −0 src/app/project/board/attribution-tab-view/attribution-tab-view.component.ts
  9. +164 −43 src/app/project/board/board.component.html
  10. +175 −2 src/app/project/board/board.component.scss
  11. +14 −8 src/app/project/board/board.component.spec.ts
  12. +194 −21 src/app/project/board/board.component.ts
  13. +5 −0 src/app/project/board/contacts-tab-view/contacts-tab-view.component.html
  14. +1 −0 src/app/project/board/contacts-tab-view/contacts-tab-view.component.scss
  15. +51 −0 src/app/project/board/contacts-tab-view/contacts-tab-view.component.spec.ts
  16. +26 −0 src/app/project/board/contacts-tab-view/contacts-tab-view.component.ts
  17. +35 −0 src/app/project/board/dataset-tab-view/dataset-tab-view.component.html
  18. +7 −0 src/app/project/board/dataset-tab-view/dataset-tab-view.component.scss
  19. +133 −0 src/app/project/board/dataset-tab-view/dataset-tab-view.component.spec.ts
  20. +25 −0 src/app/project/board/dataset-tab-view/dataset-tab-view.component.ts
  21. +32 −0 src/app/project/board/organisation-template/organisation-template.component.ts
  22. +28 −0 src/app/project/board/person-template/person-template.component.html
  23. 0 src/app/project/board/person-template/person-template.component.scss
  24. +52 −0 src/app/project/board/person-template/person-template.component.spec.ts
  25. +25 −0 src/app/project/board/person-template/person-template.component.ts
  26. +94 −0 src/app/project/board/project-tab-view/project-tab-view.component.html
  27. +17 −0 src/app/project/board/project-tab-view/project-tab-view.component.scss
  28. +112 −0 src/app/project/board/project-tab-view/project-tab-view.component.spec.ts
  29. +20 −0 src/app/project/board/project-tab-view/project-tab-view.component.ts
  30. +15 −0 src/app/project/board/terms-tab-view/terms-tab-view.component.html
  31. +14 −0 src/app/project/board/terms-tab-view/terms-tab-view.component.scss
  32. +45 −0 src/app/project/board/terms-tab-view/terms-tab-view.component.spec.ts
  33. +16 −0 src/app/project/board/terms-tab-view/terms-tab-view.component.ts
  34. BIN src/assets/images/cc-license.png
  35. +1 −1 src/assets/style/_config.scss

Some generated files are not rendered by default. Learn more.

@@ -47,6 +47,7 @@
"json2typescript": "^1.0.6",
"jsonld": "^1.1.0",
"moment": "^2.27.0",
"ngx-clipboard": "^14.0.1",
"ngx-color-picker": "^10.0.1",
"openseadragon": "^2.4.0",
"rxjs": "~6.5.3",
@@ -78,12 +78,21 @@ import { SelectOntologyComponent } from './workspace/resource/resource-instance-
import { SelectResourceClassComponent } from './workspace/resource/resource-instance-form/select-resource-class/select-resource-class.component';
import { SelectPropertiesComponent } from './workspace/resource/resource-instance-form/select-properties/select-properties.component';
import { SwitchPropertiesComponent } from './workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component';
import { ProjectTabViewComponent } from './project/board/project-tab-view/project-tab-view.component';
import { DatasetTabViewComponent } from './project/board/dataset-tab-view/dataset-tab-view.component';
import { AttributionTabViewComponent } from './project/board/attribution-tab-view/attribution-tab-view.component';
import { TermsTabViewComponent } from './project/board/terms-tab-view/terms-tab-view.component';
import { ContactsTabViewComponent } from './project/board/contacts-tab-view/contacts-tab-view.component';
import { ClipboardModule } from 'ngx-clipboard';

import { AngularSplitModule } from 'angular-split';
import { PersonTemplateComponent } from './project/board/person-template/person-template.component';
import { AddressTemplateComponent } from './project/board/address-template/address-template.component';
import { OrganisationTemplateComponent } from './project/board/organisation-template/organisation-template.component';

// translate: AoT requires an exported function for factories
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, 'assets/i18n/', '.json')
return new TranslateHttpLoader(httpClient, 'assets/i18n/', '.json');
}

@NgModule({
@@ -143,7 +152,15 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
SelectOntologyComponent,
SelectResourceClassComponent,
SelectPropertiesComponent,
SwitchPropertiesComponent
SwitchPropertiesComponent,
ProjectTabViewComponent,
DatasetTabViewComponent,
AttributionTabViewComponent,
TermsTabViewComponent,
ContactsTabViewComponent,
PersonTemplateComponent,
AddressTemplateComponent,
OrganisationTemplateComponent
],
imports: [
AppRoutingModule,
@@ -165,6 +182,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
deps: [HttpClient]
}
}),
ClipboardModule,
AngularSplitModule.forRoot()
],
providers: [
@@ -0,0 +1,18 @@
import { Component, Input } from '@angular/core';

@Component({
selector: 'app-address-template',
template: `
<div class="sub-details">
<h4>Address:</h4>
<address class="contents">
<p *ngIf="address['streetAddress']">{{ address['streetAddress'] }}</p>
<span *ngIf="address['postalCode']" style="margin-right: 6px;">{{ address['postalCode'] }}</span>
<span *ngIf="address['addressLocality']">{{ address['addressLocality'] }}</span>
</address>
</div>
`
})
export class AddressTemplateComponent {
@Input() address: object;
}
@@ -0,0 +1,15 @@
<h1>Attribution</h1>

<p>The following people are involved in the creation of the dataset:</p>

<div class="tab-contents">

<mat-card *ngFor="let entry of attribution | keyvalue;" class="attribution-entry">

<h3 class="color-for-role"> {{ entry.value['role'] | titlecase }} </h3>

<app-person-template [person]="people[entry.key]"></app-person-template>

</mat-card>

</div>
@@ -0,0 +1,7 @@
.attribution-entry {
margin-top: 25px;

.color-for-role {
color: brown;
}
}
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { AttributionTabViewComponent } from './attribution-tab-view.component';

describe('AttributionTabViewComponent', () => {
let component: AttributionTabViewComponent;
let fixture: ComponentFixture<AttributionTabViewComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AttributionTabViewComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(AttributionTabViewComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,82 @@
import { Component, Input, OnInit } from '@angular/core';

@Component({
selector: 'app-attribution-tab-view',
templateUrl: './attribution-tab-view.component.html',
styleUrls: ['./attribution-tab-view.component.scss']
})
export class AttributionTabViewComponent implements OnInit{

// attribution input
@Input() attribution: object;

// hard-coded data to complete the functionality
people = [{
'address': {'addressLocality': 'Basel', 'postalCode': '4000', 'streetAddress': 'Teststrasse'},
'email': 'benjamin.jones@test.ch',
'familyName': 'Jones',
'givenName': 'Benjamin',
'jobTitle': 'Dr. des.',
'organisation': {
'address': {'addressLocality': 'Toronto', 'postalCode': '40000', 'streetAddress': 'University of Toronto Street'},
'email': 'info@universityoftoronto.ca',
'name': 'University of Toronto',
'url': 'http://www.utoronto.ca/'
}
}, {
'address': {'addressLocality': 'Basel', 'postalCode': '4000', 'streetAddress': 'Teststrasse'},
'email': 'james.coleman@dasch.swiss',
'familyName': 'Coleman',
'givenName': 'James',
'jobTitle': 'Dr. des.',
'organisation': {
'address': {'addressLocality': 'Toronto', 'postalCode': '40000', 'streetAddress': 'University of Toronto Street'},
'email': 'info@universityoftoronto.ca',
'name': 'University of Toronto',
}
}, {
'address': {'addressLocality': 'Basel', 'postalCode': '4000', 'streetAddress': 'Teststrasse'},
'email': 'lauren.berry@unibas.ch',
'familyName': 'Berry',
'givenName': 'Lauren',
'jobTitle': 'Dr.',
'organisation': {
'address': {'addressLocality': 'Toronto', 'postalCode': '40000', 'streetAddress': 'University of Toronto Street'},
'email': 'info@universityoftoronto.ca',
'name': 'University of Toronto',
}
}, {
'address': {'addressLocality': 'Basel', 'postalCode': '4000', 'streetAddress': 'Teststrasse'},
'email': 'leonhard.hart@test.ch',
'familyName': 'Hart',
'givenName': 'Leonhard',
'jobTitle': 'Prof.',
'organisation': {
'address': {'addressLocality': 'Toronto', 'postalCode': '40000', 'streetAddress': 'University of Toronto Street'},
'email': 'info@universityoftoronto.ca',
'name': 'University of Toronto',
}
},{
'address': {'addressLocality': 'Basel', 'postalCode': '4000', 'streetAddress': 'Teststrasse'},
'email': 'lauren.berry@unibas.ch',
'familyName': 'Berry',
'givenName': 'Lauren',
'jobTitle': 'Dr.',
'organisation': {
'address': {'addressLocality': 'Toronto', 'postalCode': '40000', 'streetAddress': 'University of Toronto Street'},
'email': 'info@universityoftoronto.ca',
'name': 'University of Toronto',
'url': 'http://www.utoronto.ca/'
}
}];

ngOnInit(): void {
// reformat data
for (let idx = 0; idx < this.people.length; idx++) {
if (this.people[idx]['sameAs']) {
this.people[idx]['sameAs'] = this.people[idx]['sameAs']['value'];
}
}
}

}
Loading

0 comments on commit 3012ef5

Please sign in to comment.