feat: display metadata on project landing page (DSP-1065) (#348)

* Feat (Project landing/metadata page): implementation of functionality to display project and dataset metadata

package.json

@@ -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",

src/app/app.module.ts

@@ -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: [

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

@@ -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;
+}

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

@@ -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>

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

@@ -0,0 +1,7 @@
+.attribution-entry {
+  margin-top: 25px;
+
+  .color-for-role {
+    color: brown;
+  }
+}

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

@@ -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();
+  });
+});

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

@@ -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'];
+            }
+        }
+    }
+
+}