From 5e0a9382c0e9eaceba346183254059367f16edf9 Mon Sep 17 00:00:00 2001 From: Snehal Kumbhar Date: Thu, 21 Jan 2021 13:51:45 +0100 Subject: [PATCH] refactor(project landing page): add interfaces for metadata object (DSP-1183) (#366) * refactor (project landing page): Add interfaces for metadata object and replace bracket notation with dot notation --- .../address-template.component.ts | 26 +- .../attribution-tab-view.component.html | 12 +- .../attribution-tab-view.component.ts | 84 +--- src/app/project/board/board.component.html | 28 +- src/app/project/board/board.component.ts | 427 ++++++++++++------ .../contacts-tab-view.component.ts | 19 +- src/app/project/board/dataset-metadata.ts | 123 +++++ .../dataset-tab-view.component.html | 14 +- .../dataset-tab-view.component.ts | 5 +- .../organisation-template.component.ts | 20 +- .../person-template.component.html | 20 +- .../person-template.component.ts | 19 +- .../project-tab-view.component.html | 55 +-- .../project-tab-view.component.scss | 6 +- .../project-tab-view.component.ts | 3 +- 15 files changed, 508 insertions(+), 353 deletions(-) create mode 100644 src/app/project/board/dataset-metadata.ts diff --git a/src/app/project/board/address-template/address-template.component.ts b/src/app/project/board/address-template/address-template.component.ts index 2d3d3fffbc..5c5d0c76f3 100644 --- a/src/app/project/board/address-template/address-template.component.ts +++ b/src/app/project/board/address-template/address-template.component.ts @@ -1,18 +1,20 @@ import { Component, Input } from '@angular/core'; +import { IAddress } from '../dataset-metadata'; @Component({ - selector: 'app-address-template', - template: ` -
-

Address:

-
-

{{ address['streetAddress'] }}

- {{ address['postalCode'] }} - {{ address['addressLocality'] }} -
-
- ` + selector: 'app-address-template', + template: ` +
+

Address:

+
+

{{ address.streetAddress }}

+ {{ address.postalCode }} + {{ address.addressLocality }} +
+
+ `, + styles: ['.postcode { margin-right: 6px; }'] }) export class AddressTemplateComponent { - @Input() address: object; + @Input() address: IAddress; } diff --git a/src/app/project/board/attribution-tab-view/attribution-tab-view.component.html b/src/app/project/board/attribution-tab-view/attribution-tab-view.component.html index 766a08aa85..ecec3cb85a 100644 --- a/src/app/project/board/attribution-tab-view/attribution-tab-view.component.html +++ b/src/app/project/board/attribution-tab-view/attribution-tab-view.component.html @@ -4,11 +4,17 @@

Attribution

- + -

{{ entry.value['role'] | titlecase }}

+

{{ attribution.role | titlecase }}

- +
+ +
+ +
+ +
diff --git a/src/app/project/board/attribution-tab-view/attribution-tab-view.component.ts b/src/app/project/board/attribution-tab-view/attribution-tab-view.component.ts index 17a9981f5b..2b2145b047 100644 --- a/src/app/project/board/attribution-tab-view/attribution-tab-view.component.ts +++ b/src/app/project/board/attribution-tab-view/attribution-tab-view.component.ts @@ -1,82 +1,22 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input } from '@angular/core'; +import { IAttribution, IOrganisation, IPerson } from '../dataset-metadata'; @Component({ selector: 'app-attribution-tab-view', templateUrl: './attribution-tab-view.component.html', styleUrls: ['./attribution-tab-view.component.scss'] }) -export class AttributionTabViewComponent implements OnInit{ - +export class AttributionTabViewComponent { // 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/' - } - }]; + @Input() attributions: IAttribution[]; - 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']; - } + // 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'; + } + }; } diff --git a/src/app/project/board/board.component.html b/src/app/project/board/board.component.html index 78251fef9e..8f06bd43ae 100644 --- a/src/app/project/board/board.component.html +++ b/src/app/project/board/board.component.html @@ -51,13 +51,13 @@

-
+
-
+

Description

-
+
@@ -67,7 +67,7 @@

Description

perm_data_setting Project - + @@ -75,7 +75,7 @@

Description

collections Dataset - + @@ -83,7 +83,7 @@

Description

assignment Attribution - + @@ -91,7 +91,7 @@

Description

receipt Terms & conditions - + @@ -99,7 +99,7 @@

Description

portrait Contact - +
@@ -134,7 +134,7 @@

Cite as

-

+

@@ -144,7 +144,7 @@

Cite as

Persistent identifier
- {{ datasetIdentifier }} + {{ selectedDataset.project.id }}
@@ -152,15 +152,15 @@

Cite as

License
- {{ license['value'] }} + {{ selectedDataset.license.value }}
-
+
Publication date
- {{ publicationDate | date:'MMMM d, yyyy' }} + {{ selectedDataset.datePublished | date:'MMMM d, yyyy' }}
@@ -170,7 +170,7 @@

Cite as

Keyword(s)

- {{ k }} + {{ kword }}
diff --git a/src/app/project/board/board.component.ts b/src/app/project/board/board.component.ts index 641001033e..d651aac75a 100644 --- a/src/app/project/board/board.component.ts +++ b/src/app/project/board/board.component.ts @@ -15,12 +15,20 @@ import { ClipboardService } from 'ngx-clipboard'; import { DialogComponent } from 'src/app/main/dialog/dialog.component'; import { ErrorHandlerService } from 'src/app/main/error/error-handler.service'; import { CacheService } from '../../main/cache/cache.service'; +import { IDataset } from './dataset-metadata'; + +export interface DatasetRadioOption { + name: string; + id: number; + checked: boolean; +} @Component({ selector: 'app-board', templateUrl: './board.component.html', styleUrls: ['./board.component.scss'] }) + export class BoardComponent implements OnInit { // loading for progress indicator @@ -40,20 +48,17 @@ export class BoardComponent implements OnInit { color: string = 'primary'; // variables to store metadata information + // metadata received from backend metadata: object; - datasetMetadata: object; - projectMetadata: object; - attribution: object; - conditionsOfAccess: string; - license: object; - contactDetails: object; - projectDescription: string; - datasetOptions: object[]; - howToCite: string; - datasetIdentifier: string; - publicationDate: string; - keywords: object; - selectedDataset: string; + + // list of all datasets + datasets: IDataset[]; + + // metadata displayed on current page is from selected dataset + selectedDataset: IDataset; + + // list of dataset names to display as radio buttons in right side column + datasetOptions: DatasetRadioOption[]; // different metadata download formats metadataDownloadFormats = ['JSON-LD', 'XML', 'Triplestore', 'CSV']; @@ -87,6 +92,7 @@ export class BoardComponent implements OnInit { this.sysAdmin = this.session.user.sysAdmin; } + // get project info from backend this.getProject(); @@ -108,8 +114,6 @@ export class BoardComponent implements OnInit { this.projectAdmin = this.sysAdmin ? this.sysAdmin : this.session.user.projectAdmin.some(e => e === this.project.id); } - this.datasetIdentifier = this.project['id']; - this.loading = false; }, (error: ApiResponseError) => { @@ -126,148 +130,276 @@ export class BoardComponent implements OnInit { // in next iteration, it will be replace with ajax request to get // metadata from backend this.metadata = { - 'projectsMetadata': [{ - 'abstract': 'Dies ist ein Testprojekt.', - 'alternativeTitle': 'test', - 'conditionsOfAccess': 'Open Access', - 'dateCreated': '2001-09-26', - 'dateModified': '2020-04-26', - 'datePublished': '2002-09-24', - 'distribution': {'type': 'https://schema.org/DataDownload', 'value': 'https://test.dasch.swiss'}, - 'documentation': 'Work in progress', - 'howToCite': 'Testprojekt (test), 2002, https://test.dasch.swiss', - 'language': ['EN', 'DE', 'FR'], - 'license': {'type': 'https://schema.org/URL', 'value': 'https://creativecommons.org/licenses/by/3.0'}, - 'qualifiedAttribution': [{'role': 'contributor', 'agent': 'http://ns.dasch.swiss/test-berry'}, {'role': 'contributor', 'agent': 'http://ns.dasch.swiss/test-hart'}, { - 'role': 'editor', - 'agent': 'http://ns.dasch.swiss/test-abraham' - }, {'role': 'editor', 'agent': 'http://ns.dasch.swiss/test-coleman'}, {'role': 'editor', 'agent': 'http://ns.dasch.swiss/test-jones'}], - 'status': 'ongoing', - 'title': 'Testprojekt', - 'typeOfData': ['image', 'text'], - 'project': { - 'alternateName': 'test', - 'contactPoint': { - 'address': {'addressLocality': 'Basel', 'postalCode': '4000', 'streetAddress': 'Teststrasse'}, - 'email': 'stewart.abraham@test.ch', - 'familyName': 'Abraham', - 'givenName': 'Stewart', - 'jobTitle': 'Dr.', - 'memberOf': 'http://ns.dasch.swiss/test-dasch', - 'sameAs': {'type': 'https://schema.org/URL', 'value': 'https://orcid.org/0000-0002-1825-0097'}, - 'organisation': { - 'address': {'addressLocality': 'Toronto', 'postalCode': '40000', 'streetAddress': 'University of Toronto Street'}, - 'email': '/info@universityoftoronto.ca', - 'name': 'University of Toronto', - 'url': {'type': 'https://schema.org/URL', 'value': 'http://www.utoronto.ca/'} - } + 'projectsMetadata': [ + { + 'type': 'http://ns.dasch.swiss/repository#Dataset', + 'id': 'http://ns.dasch.swiss/test-dataset', + 'abstract': 'Dies ist ein Testprojekt.', + 'alternativeTitle': 'test', + 'conditionsOfAccess': 'Open Access', + 'dateCreated': '2001-09-26', + 'dateModified': '2020-04-26', + 'datePublished': '2002-09-24', + 'distribution': { + 'type': 'https://schema.org/DataDownload', + 'value': 'https://test.dasch.swiss' }, - 'dataManagementPlan': {'url': {'type': 'https://schema.org/URL', 'value': 'https://snf.ch'}, 'isAvailable': true}, - 'description': 'Dies ist ein Testprojekt...alle Properties wurden verwendet, um diese zu testen', - 'discipline': {'name': 'SKOS UNESCO Nomenclature', 'url': 'http://skos.um.es/unesco6/11'}, - 'endDate': '2001-01-26', - 'funder': 'http://ns.dasch.swiss/test-funder', - 'grant': { - 'funder': [ - { - 'address': {'addressLocality': 'Toronto', 'postalCode': '40000', 'streetAddress': 'University of Toronto Street'}, - 'email': '/info@universityoftoronto.ca', - 'name': 'University of Toronto', - 'url': {'type': 'https://schema.org/URL', 'value': 'http://www.utoronto.ca/'} - }, - { - 'address': {'addressLocality': 'Basel', 'postalCode': '4000', 'streetAddress': 'Teststrasse'}, + 'documentation': 'Work in progress', + 'howToCite': 'Testprojekt (test), 2002, https://test.dasch.swiss', + 'language': [ + 'EN', + 'DE', + 'FR' + ], + 'license': { + 'type': 'https://schema.org/URL', + 'value': 'https://creativecommons.org/licenses/by/3.0' + }, + 'qualifiedAttribution': [ + { + 'type': 'http://www.w3.org/ns/prov#Attribution', + 'role': 'contributor', + 'agent': { + 'type': 'http://ns.dasch.swiss/repository#Person', + 'id': 'http://ns.dasch.swiss/test-berry', + 'address': { + 'type': 'https://schema.org/PostalAddress', + '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/' - } - }], 'name': 'Test Grant Name', 'number': '0123456789', 'url': {'type': 'https://schema.org/URL', 'value': 'http://p3.snf.ch/testproject'} - }, - 'keywords': ['science', 'mathematics', 'history of science', 'history of mathematics'], - 'name': 'Testprojektname (test)', - 'publication': 'testpublication', - 'shortcode': '0000', - 'spatialCoverage': [ - {'place': {'name': 'Geonames', 'url': 'https://www.geonames.org/2017370/russian-federation.html'}}, { - 'place': { - 'name': 'Geonames', - 'url': 'https://www.geonames.org/2658434/switzerland.html' + 'memberOf': 'http://ns.dasch.swiss/test-dasch' + } + }, + { + 'type': 'http://www.w3.org/ns/prov#Attribution', + 'role': 'contributor', + 'agent': { + 'type': 'http://ns.dasch.swiss/repository#Person', + 'id': 'http://ns.dasch.swiss/test-hart', + 'address': { + 'type': 'https://schema.org/PostalAddress', + 'addressLocality': 'Basel', + 'postalCode': '4000', + 'streetAddress': 'Teststrasse' + }, + 'email': 'leonhard.hart@test.ch', + 'familyName': 'Hart', + 'givenName': 'Leonhard', + 'jobTitle': 'Prof.', + 'memberOf': 'http://ns.dasch.swiss/test-dasch' + } + }, + { + 'type': 'http://www.w3.org/ns/prov#Attribution', + 'role': 'editor', + 'agent': { + 'type': 'http://ns.dasch.swiss/repository#Person', + 'id': 'http://ns.dasch.swiss/test-hart', + 'address': { + 'type': 'https://schema.org/PostalAddress', + 'addressLocality': 'Basel', + 'postalCode': '4000', + 'streetAddress': 'Teststrasse' + }, + 'email': 'leonhard.hart@test.ch', + 'familyName': 'Hart', + 'givenName': 'Leonhard', + 'jobTitle': 'Prof.', + 'memberOf': 'http://ns.dasch.swiss/test-dasch' } - }, {'place': {'name': 'Geonames', 'url': 'https://www.geonames.org/3175395/italian-republic.html'}}, { - 'place': { - 'name': 'Geonames', - 'url': 'https://www.geonames.org/2921044/federal-republic-of-germany.html' + }, + { + 'type': 'http://www.w3.org/ns/prov#Attribution', + 'role': 'editor', + 'agent': { + 'type': 'http://ns.dasch.swiss/repository#Person', + 'id': 'http://ns.dasch.swiss/test-coleman', + 'address': { + 'type': 'https://schema.org/PostalAddress', + 'addressLocality': 'Basel', + 'postalCode': '4000', + 'streetAddress': 'Teststrasse' + }, + 'email': 'james.coleman@dasch.swiss', + 'familyName': 'Coleman', + 'givenName': 'James', + 'jobTitle': 'Dr. des.', + 'memberOf': 'http://ns.dasch.swiss/test-dasch' } - }, {'place': {'name': 'Geonames', 'url': 'https://www.geonames.org/3017382/republic-of-france.html'}}, { - 'place': { - 'name': 'Geonames', - 'url': 'https://www.geonames.org/6269131/england.html' + }, + { + 'type': 'http://www.w3.org/ns/prov#Attribution', + 'role': 'editor', + 'agent': { + 'type': 'http://ns.dasch.swiss/repository#Person', + 'id': 'http://ns.dasch.swiss/test-jones', + 'address': { + 'type': 'https://schema.org/PostalAddress', + 'addressLocality': 'Basel', + 'postalCode': '4000', + 'streetAddress': 'Teststrasse' + }, + 'email': 'benjamin.jones@test.ch', + 'familyName': 'Jones', + 'givenName': 'Benjamin', + 'jobTitle': 'Dr. des.', + 'memberOf': 'http://ns.dasch.swiss/test-dasch' + } + } + ], + 'status': 'ongoing', + 'title': 'Testprojekt', + 'typeOfData': [ + 'image', + 'text' + ], + 'project': { + 'type': 'http://ns.dasch.swiss/repository#Project', + 'id': 'http://ns.dasch.swiss/test-project', + 'alternateName': 'test', + 'contactPoint': { + 'type': 'http://ns.dasch.swiss/repository#Person', + 'id': 'http://ns.dasch.swiss/test-abraham', + 'address': { + 'type': 'https://schema.org/PostalAddress', + 'addressLocality': 'Basel', + 'postalCode': '4000', + 'streetAddress': 'Teststrasse' + }, + 'email': 'stewart.abraham@test.ch', + 'familyName': 'Abraham', + 'givenName': 'Stewart', + 'jobTitle': 'Dr.', + 'memberOf': 'http://ns.dasch.swiss/test-dasch', + 'sameAs': { + 'type': 'https://schema.org/URL', + 'value': 'https://orcid.org/0000-0002-1825-0097' + } + }, + 'dataManagementPlan': { + 'type': 'http://ns.dasch.swiss/repository#DataManagementPlan', + 'id': 'http://ns.dasch.swiss/test-plan', + 'url': { + 'type': 'https://schema.org/URL', + 'value': 'https://snf.ch' + }, + 'isAvailable': true + }, + 'description': 'Dies ist ein Testprojekt...alle Properties wurden verwendet, um diese zu testen', + 'discipline': { + 'name': 'SKOS UNESCO Nomenclature', + 'url': 'http://skos.um.es/unesco6/11' + }, + 'endDate': '2001-01-26', + 'funder': { + 'id': 'http://ns.dasch.swiss/test-funder' + }, + 'grant': { + 'type': 'http://ns.dasch.swiss/repository#Grant', + 'id': 'http://ns.dasch.swiss/test-grant', + 'funder': { + 'id': 'http://ns.dasch.swiss/test-funder' + }, + 'name': 'Prof. test test, Prof. test Harbtestrecht', + 'number': '0123456789', + 'url': { + 'type': 'https://schema.org/URL', + 'value': 'http://p3.snf.ch/testproject' + } + }, + 'keywords': [ + 'science', + 'mathematics', + 'history of science', + 'history of mathematics' + ], + 'name': 'Testprojektname (test)', + 'publication': 'testpublication', + 'shortcode': '0000', + 'spatialCoverage': [ + { + 'place': { + 'name': 'Geonames', + 'url': 'https://www.geonames.org/2658434/switzerland.html' + } + }, + { + 'place': { + 'name': 'Geonames', + 'url': 'https://www.geonames.org/6255148/europe.html' + } + }, + { + 'place': { + 'name': 'Geonames', + 'url': 'https://www.geonames.org/3017382/republic-of-france.html' + } + }, + { + 'place': { + 'name': 'Geonames', + 'url': 'https://www.geonames.org/6269131/england.html' + } + }, + { + 'place': { + 'name': 'Geonames', + 'url': 'https://www.geonames.org/2017370/russian-federation.html' + } + }, + { + 'place': { + 'name': 'Geonames', + 'url': 'https://www.geonames.org/2921044/federal-republic-of-germany.html' + } + }, + { + 'place': { + 'name': 'Geonames', + 'url': 'https://www.geonames.org/3175395/italian-republic.html' + } } - }, {'place': {'name': 'Geonames', 'url': 'https://www.geonames.org/6255148/europe.html'}}], - 'startDate': '2000-07-26', - 'temporalCoverage': {'name': 'Chronontology Dainst', 'url': 'http://chronontology.dainst.org/period/Ef9SyESSafJ1'}, - 'url': {'type': 'https://schema.org/URL', 'value': 'https://test.dasch.swiss/'} - }, - 'sameAs': {'type': 'https://schema.org/URL', 'value': 'https://test.dasch.swiss/'} - }, { - 'address': {'addressLocality': 'Basel', 'postalCode': '4000', 'streetAddress': 'Teststrasse'}, - 'email': '/benjamin.jones@test.ch', - 'familyName': 'Jones', - 'givenName': 'Benjamin', - 'jobTitle': 'Dr. des.', - 'memberOf': 'http://ns.dasch.swiss/test-dasch' - }, { - 'address': {'addressLocality': 'Basel', 'postalCode': '4000', 'streetAddress': 'Teststrasse'}, - 'email': '/james.coleman@dasch.swiss', - 'familyName': 'Coleman', - 'givenName': 'James', - 'jobTitle': 'Dr. des.', - 'memberOf': 'http://ns.dasch.swiss/test-dasch' - }, { - 'address': {'addressLocality': 'Basel', 'postalCode': '4000', 'streetAddress': 'Teststrasse'}, - 'email': '/lauren.berry@unibas.ch', - 'familyName': 'Berry', - 'givenName': 'Lauren', - 'jobTitle': 'Dr.', - 'memberOf': 'http://ns.dasch.swiss/test-dasch' - }, { - 'address': {'addressLocality': 'Basel', 'postalCode': '4000', 'streetAddress': 'Teststrasse'}, - 'email': '/leonhard.hart@test.ch', - 'familyName': 'Hart', - 'givenName': 'Leonhard', - 'jobTitle': 'Prof.', - 'memberOf': 'http://ns.dasch.swiss/test-dasch' - }] + ], + 'startDate': '2000-07-26', + 'temporalCoverage': { + 'name': 'Chronontology Dainst', + 'url': 'http://chronontology.dainst.org/period/Ef9SyESSafJ1' + }, + 'url': { + 'type': 'https://schema.org/URL', + 'value': 'https://test.dasch.swiss/' + } + }, + 'sameAs': { + 'type': 'https://schema.org/URL', + 'value': 'https://test.dasch.swiss' + } + } + ] }; - this.datasetMetadata = this.metadata['projectsMetadata'][0]; + // convert metadata to use IDataset interface + this.datasets = this.metadata['projectsMetadata'] as IDataset[]; - // dataset options to display radio buttons for selection in right column - this.datasetOptions = [ - {'name': this.datasetMetadata['title'], 'id': 0, 'checked': true} - ]; + // by default display first dataset + this.selectedDataset = this.datasets[0]; - // initialise metadata - this.initialiseMetadataVariables(); - } + const dsOptions = []; + // dataset options to display radio buttons for selection in right column + for (let idx = 0; idx < this.datasets.length; idx++) { + dsOptions.push({ + name: this.datasets[idx].title, + id: idx, + checked: idx === 0 ? true : false + }); + } - // initialise metadata variables required to display in template - initialiseMetadataVariables() { - this.projectMetadata = this.datasetMetadata['project']; - this.attribution = this.datasetMetadata['qualifiedAttribution']; - this.conditionsOfAccess = this.datasetMetadata['conditionsOfAccess']; - this.license = this.datasetMetadata['license']; - this.contactDetails = this.projectMetadata['contactPoint']; - this.projectDescription = this.projectMetadata['description']; - this.howToCite = this.datasetMetadata['howToCite']; - this.publicationDate = this.datasetMetadata['datePublished']; - this.keywords = this.projectMetadata['keywords']; + this.datasetOptions = dsOptions; } // download metadata @@ -287,14 +419,11 @@ export class BoardComponent implements OnInit { } updateDataset(event: MatRadioChange) { - this.datasetMetadata = this.metadata['projectsMetadata'][event.value]; - - // initialise metadata variables again - this.initialiseMetadataVariables(); + this.selectedDataset = this.datasets[event.value]; } copyHowToCiteToClipboard() { - this._clipboardService.copyFromContent(this.howToCite); + this._clipboardService.copyFromContent(this.selectedDataset.howToCite); } openDialog(mode: string, name: string, id?: string): void { diff --git a/src/app/project/board/contacts-tab-view/contacts-tab-view.component.ts b/src/app/project/board/contacts-tab-view/contacts-tab-view.component.ts index 78b45cd77a..b73a09c0ec 100644 --- a/src/app/project/board/contacts-tab-view/contacts-tab-view.component.ts +++ b/src/app/project/board/contacts-tab-view/contacts-tab-view.component.ts @@ -1,26 +1,11 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input } from '@angular/core'; @Component({ selector: 'app-contacts-tab-view', templateUrl: './contacts-tab-view.component.html', styleUrls: ['./contacts-tab-view.component.scss'] }) -export class ContactsTabViewComponent implements OnInit { - +export class ContactsTabViewComponent { // contact details @Input() contactDetails: object; - - ngOnInit(): void { - // reformat data - if (this.contactDetails['sameAs']) { - this.contactDetails['sameAs'] = this.contactDetails['sameAs']['value']; - } - - if (this.contactDetails['organisation']) { - if (this.contactDetails['organisation']['url']) { - this.contactDetails['organisation']['url'] = this.contactDetails['organisation']['url']['value']; - } - } - } - } diff --git a/src/app/project/board/dataset-metadata.ts b/src/app/project/board/dataset-metadata.ts new file mode 100644 index 0000000000..7ae52a9c14 --- /dev/null +++ b/src/app/project/board/dataset-metadata.ts @@ -0,0 +1,123 @@ +/* Interface for url type */ +export interface UrlProperty { + type: string; + value: string; +} + +/* Interface to add address metadata */ +export interface IAddress { + type: string; + streetAddress: string; + postalCode: string; + addressLocality: string; +} + +/* Interface to add organisation metadata */ +export interface IOrganisation { + type: string; + id: string; + name: string; + address?: IAddress; + email?: string; + url?: string; +} + +/* Interface to add person metadata */ +export interface IPerson { + type: string; + id: string; + jobTitle: string | string[]; + givenName: string; + familyName: string; + organisation?: IOrganisation; + memberOf: string; + email?: string | string[]; + sameAs?: UrlProperty; + address?: IAddress | IAddress[]; +} + +/* Interface for Attribution array available for every dataset */ +export interface IAttribution { + type: string; + role: string; + agent: IPerson | IOrganisation; +} + +/* Interface to add DMP metadata */ +export interface IDMP { + type: string; + id: string; + isAvailable: boolean; + url?: UrlProperty; +} + +/* Interface to add SpatialCoverage: place metadata */ +export interface IPlace { + name: string; + url: string; +} + +/* Interface to add SpatialCoverage metadata */ +export interface ISpatialCoverage { + place: IPlace; +} + +/* Interface for funder metadata */ +export interface IFunder { + id: string; +} + +/* Interface to add grant metadata */ +export interface IGrant { + type: string; + id: string; + funder: IFunder; + number?: string; + name?: string; + url?: UrlProperty; +} + +/* Interface to add project metadata */ +export interface IProject { + type: string; + id: string; + url: UrlProperty; + shortcode: string; + name: string; + description: string; + keywords: string[]; + discipline: IPlace; + startDate: string; + temporalCoverage: IPlace; + spatialCoverage: ISpatialCoverage[]; + funder: IFunder; + dataManagementPlan?: IDMP; + publication?: string | string[]; + endDate?: string; + grant?: IGrant; + contactPoint?: IPerson | IOrganisation; + alternateName?: string | string[]; +} + +/* Interface to add dataset metadata */ +export interface IDataset { + type: string; + id: string; + abstract: string | string[]; + conditionsOfAccess: string; + howToCite: string; + language: string[]; + license: UrlProperty; + qualifiedAttribution: IAttribution[]; + status: 'in planning' | 'ongoing' | 'on hold' | 'finished'; + title: string; + typeOfData: string[]; + project: IProject; + sameAs?: UrlProperty; + alternativeTitle?: string; + documentation?: string | string[]; + datePublished?: string; + dateCreated?: string; + dateModified?: string; + distribution?: UrlProperty; +} diff --git a/src/app/project/board/dataset-tab-view/dataset-tab-view.component.html b/src/app/project/board/dataset-tab-view/dataset-tab-view.component.html index 00aedc1abb..8b1c35f70b 100644 --- a/src/app/project/board/dataset-tab-view/dataset-tab-view.component.html +++ b/src/app/project/board/dataset-tab-view/dataset-tab-view.component.html @@ -1,5 +1,5 @@
-

Selected dataset: {{ metadata['title'] }}

+

Selected dataset: {{ metadata.title }}

Click on the radio button in the right side panel to change the dataset.

@@ -18,16 +18,14 @@

{{ prop.key }}

-
+
{{ prop.value }}
-
- {{ metadata[prop.key]['value'] }} -
-
- {{ prop.value | date:'MMMM d, yyyy' }} -
+ {{ metadata[prop.key]['value'] }} +
+
+ {{ prop.value | date:'MMMM d, yyyy' }}
diff --git a/src/app/project/board/dataset-tab-view/dataset-tab-view.component.ts b/src/app/project/board/dataset-tab-view/dataset-tab-view.component.ts index cbc12020d0..51cfb92890 100644 --- a/src/app/project/board/dataset-tab-view/dataset-tab-view.component.ts +++ b/src/app/project/board/dataset-tab-view/dataset-tab-view.component.ts @@ -1,4 +1,5 @@ import { Component, Input } from '@angular/core'; +import { IDataset } from '../dataset-metadata'; @Component({ selector: 'app-dataset-tab-view', @@ -8,7 +9,7 @@ import { Component, Input } from '@angular/core'; export class DatasetTabViewComponent { // metadata input object - @Input() metadata: object; + @Input() metadata: IDataset; // number of datasets available for this project @Input() noOfDatasets: number; @@ -17,7 +18,7 @@ export class DatasetTabViewComponent { excludeKeys = ['project', 'qualifiedAttribution']; // metadata keys that require specific format to display - templateKeys = ['distribution', 'license', 'sameAs', 'dateCreated', 'dateModified', 'datePublished']; + templateKeys = ['distribution', 'license', 'sameAs']; // date keys from metadata object for formatting dateKeys = ['dateCreated', 'dateModified', 'datePublished']; diff --git a/src/app/project/board/organisation-template/organisation-template.component.ts b/src/app/project/board/organisation-template/organisation-template.component.ts index 05d9cffe4a..4ba7876579 100644 --- a/src/app/project/board/organisation-template/organisation-template.component.ts +++ b/src/app/project/board/organisation-template/organisation-template.component.ts @@ -1,32 +1,32 @@ import { Component, Input } from '@angular/core'; +import { IOrganisation } from '../dataset-metadata'; @Component({ selector: 'app-organisation-template', template: ` -
-
+

Organisation:

- {{ organisation['name'] }} + {{ organisation.name }}
-
+

URL:

- {{ organisation['url'] }} + {{ organisation.url }}
- `, styles: ['.metadata-title { font-size: 95%; }'] }) -export class OrganisationTemplateComponent { +export class OrganisationTemplateComponent { // input parameter - @Input() organisation: object; + @Input() organisation: IOrganisation; } diff --git a/src/app/project/board/person-template/person-template.component.html b/src/app/project/board/person-template/person-template.component.html index 1c38f1342c..a3262c57d1 100644 --- a/src/app/project/board/person-template/person-template.component.html +++ b/src/app/project/board/person-template/person-template.component.html @@ -1,27 +1,27 @@
-

{{ person['givenName'] }} {{person['familyName'] }}

+

{{ person.givenName }} {{person.familyName }}

-
+

Job title:

- {{ person['jobTitle'] }} + {{ person.jobTitle }}
-
+ -
+ - + -
+

Member of:

- +
diff --git a/src/app/project/board/person-template/person-template.component.ts b/src/app/project/board/person-template/person-template.component.ts index f250e5e372..56f8f18268 100644 --- a/src/app/project/board/person-template/person-template.component.ts +++ b/src/app/project/board/person-template/person-template.component.ts @@ -1,4 +1,5 @@ -import {Component, Input} from '@angular/core'; +import { Component, Input } from '@angular/core'; +import { IPerson } from '../dataset-metadata'; @Component({ selector: 'app-person-template', @@ -6,20 +7,6 @@ import {Component, Input} from '@angular/core'; styleUrls: ['./person-template.component.scss'] }) export class PersonTemplateComponent { - - /* - Format for person object: - person = { - jobTitle: '', - givenName: '', - familyName: '', - email: ''. - sameAs: '', - address: '
', - organisation: '' - } - */ // input parameter - @Input() person: object; - + @Input() person: IPerson; } diff --git a/src/app/project/board/project-tab-view/project-tab-view.component.html b/src/app/project/board/project-tab-view/project-tab-view.component.html index 8cb42a388d..166e415348 100644 --- a/src/app/project/board/project-tab-view/project-tab-view.component.html +++ b/src/app/project/board/project-tab-view/project-tab-view.component.html @@ -13,68 +13,55 @@

+ + +
- {{ k }} + {{ kword }}
-

{{ metadata['dataManagementPlan']['isAvailable']? 'Available' : 'Unavailable' }}

-

- URL: {{ metadata['dataManagementPlan']['url']['value'] }} +

{{ metadata.dataManagementPlan.isAvailable? 'Available' : 'Unavailable' }}

+

+ URL: {{ metadata.dataManagementPlan.url.value }}

- -
-

{{ metadata['grant']['name'] }}

-
- call - {{ metadata['grant']['number'] }} -
- - - -
-

Funder(s):

- -
- -
-
- -
- -
+ {{ metadata.grant.name }} +

Id: {{ metadata.grant.id }}

+

URL: {{ metadata.grant.url.value }}

+

Funder: {{ metadata.grant.funder.id }}

+
+ call + {{ metadata.grant.number }}
-
-
- {{ coverage.value['place']['name'] }} ( {{ coverage.value['place']['url'] }} ) +
+ {{ coverage.place.name }} ( {{ coverage.place.url }} )
diff --git a/src/app/project/board/project-tab-view/project-tab-view.component.scss b/src/app/project/board/project-tab-view/project-tab-view.component.scss index 74bc5dadf0..f789868a8c 100644 --- a/src/app/project/board/project-tab-view/project-tab-view.component.scss +++ b/src/app/project/board/project-tab-view/project-tab-view.component.scss @@ -7,11 +7,7 @@ } } -.funder-entry { - margin-bottom: 15px; - margin-left: 35px; -} - .remove-top-margin { margin-top: 0px; } + diff --git a/src/app/project/board/project-tab-view/project-tab-view.component.ts b/src/app/project/board/project-tab-view/project-tab-view.component.ts index 874aeea674..4a5ca400c4 100644 --- a/src/app/project/board/project-tab-view/project-tab-view.component.ts +++ b/src/app/project/board/project-tab-view/project-tab-view.component.ts @@ -1,4 +1,5 @@ import { Component, Input } from '@angular/core'; +import { IProject } from '../dataset-metadata'; @Component({ selector: 'app-project-tab-view', @@ -8,7 +9,7 @@ import { Component, Input } from '@angular/core'; export class ProjectTabViewComponent { // metadata object - @Input() metadata: object; + @Input() metadata: IProject; // metadata keys that we do not want to display in template excludeKeys = ['contactPoint'];