refactor(project landing page): use metadata endpoint to get data fro…

…m backend (DSP-1199) (#400)

* feat(project landing page): displayed message if metadata is not available for selected project.

* feat(project landing page): removed copyToClipboard option for license

* refactor(project landing page): updated right side column for new metadata structure

* refactor(project landing page): update project and terms tabs according to new metadata schema

* refactor(project landing page): update dataset and attribution and contact page for new metadata schema

Note: need to work on UI for person and organisation templates (mainly used in funder, grant,
attribution and contact sections)

* chore(project landing page): updated template for funder and grant

* chore(project landing page): updated style

* chore(project landing page): cleanup, removed hardcoded metadata

* refactor(project landing page): updated error handler for project metadata endpoint

* chore(project landing page): removed dataset-metadata interface

* chore(project landing page): excluded some testcases until test data is ready

* chore(project landing page): use service to get contact type

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

@@ -1,20 +1,19 @@
 import { Component, Input } from '@angular/core';
-import { IAddress } from '../dataset-metadata';
+import { Address } from '@dasch-swiss/dsp-js';
 
 @Component({
     selector: 'app-address-template',
     template: `
-        <div class="sub-details">
-            <h4>Address:</h4>
-            <address class="contents">
-                <p>{{ address.streetAddress }}</p>
-                <span class="postcode">{{ address.postalCode }}</span>
-                <span>{{ address.addressLocality }}</span>
-            </address>
+        <div class='metadata-property'>
+            <div class='property-label display-inline-block'>
+                Address:
+            </div>
+            <div class='display-inline-block add-left-margin'>
+                <span>{{ address.streetAddress }}, {{ address.postalCode }} {{ address.addressLocality }}</span>
+            </div>
         </div>
-    `,
-    styles: ['.postcode { margin-right: 6px; }']
+    `
 })
 export class AddressTemplateComponent {
-    @Input() address: IAddress;
+    @Input() address: Address;
 }

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

@@ -1,21 +1,28 @@
-<h1>Attribution</h1>
-
-<p>The following people are involved in the creation of the dataset:</p>
 
 <div class="tab-contents">
 
-    <mat-card *ngFor="let attribution of attributions" class="attribution-entry">
-
-        <h3 class="color-for-role"> {{ attribution.role | titlecase }} </h3>
+    <p>The following people are involved in the creation of the dataset:</p>
 
-        <div *ngIf="getAgentType(attribution.agent) === 'person'">
-            <app-person-template [person]="attribution.agent"></app-person-template>
+    <mat-card *ngFor="let attribution of attributions" class="attribution-entry">
+        <div class="metadata-property">
+            <div class="property-label">
+                <p *ngFor="let role of attribution.role" class="color-for-role">
+                    {{ role | titlecase }}
+                </p>
+            </div>
         </div>
 
-        <div *ngIf="getAgentType(attribution.agent) === 'organisation'">
-            <app-organisation-template [organisation]="attribution.agent"></app-organisation-template>
+        <h4>Agent(s):</h4>
+        <div *ngFor="let agent of attribution.agent" class="sub-block" >
+            <div [ngSwitch]="setAgent(agent)">
+                <div *ngSwitchCase="'person'">
+                    <app-person-template [person]="currentAgent" [subProperties]="subProperties"></app-person-template>
+                </div>
+                <div *ngSwitchCase="'organization'">
+                    <app-organisation-template [organisation]="currentAgent"></app-organisation-template>
+                </div>
+            </div>
         </div>
-
     </mat-card>
 
 </div>

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

@@ -1,5 +1,6 @@
 .attribution-entry {
-  margin-top: 25px;
+  margin-top: 20px;
+  background-color: #fffdfd;
 
   .color-for-role {
     color: brown;

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

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
-import { IAttribution, IOrganisation, IPerson } from '../dataset-metadata';
+import { Attribution, IId, Organization, Person } from '@dasch-swiss/dsp-js';
+import { MetadataService } from '../dataset-metadata.service';
 
 @Component({
     selector: 'app-attribution-tab-view',
@@ -8,15 +9,24 @@ import { IAttribution, IOrganisation, IPerson } from '../dataset-metadata';
 })
 export class AttributionTabViewComponent {
     // attribution input
-    @Input() attributions: IAttribution[];
+    @Input() attributions: Attribution[];
+
+    @Input() subProperties: Object;
+
+    currentAgent: Person | Organization | IId;
+
+    constructor(private _metadataService: MetadataService) {
+    }
 
     // return the type of agent to use correct template to display it
-    getAgentType(agent: IPerson | IOrganisation) {
-        if (agent.hasOwnProperty('familyName')) {
-            return 'person';
-        }
-        if (agent.hasOwnProperty('url')) {
-            return 'organisation';
+    setAgent (agent: Person | Organization | IId): string {
+        let atype = this._metadataService.getContactType(agent);
+        if (atype) {
+            this.currentAgent = agent;
+        } else {
+            this.currentAgent = this.subProperties[agent.id];
+            atype = this._metadataService.getContactType(this.currentAgent);
         }
+        return atype;
     }
 }