Skip to content

Commit

Permalink
refactor(project landing page): add interfaces for metadata object (D…
Browse files Browse the repository at this point in the history
…SP-1183) (#366)

* refactor (project landing page): Add interfaces for metadata object and replace bracket notation with dot notation
  • Loading branch information
Snehal Kumbhar committed Jan 21, 2021
1 parent 66931f0 commit 5e0a938
Show file tree
Hide file tree
Showing 15 changed files with 508 additions and 353 deletions.
@@ -1,18 +1,20 @@
import { Component, Input } from '@angular/core';
import { IAddress } from '../dataset-metadata';

@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>
`
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>
`,
styles: ['.postcode { margin-right: 6px; }']
})
export class AddressTemplateComponent {
@Input() address: object;
@Input() address: IAddress;
}
Expand Up @@ -4,11 +4,17 @@ <h1>Attribution</h1>

<div class="tab-contents">

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

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

<app-person-template [person]="people[entry.key]"></app-person-template>
<div *ngIf="getAgentType(attribution.agent) === 'person'">
<app-person-template [person]="attribution.agent"></app-person-template>
</div>

<div *ngIf="getAgentType(attribution.agent) === 'organisation'">
<app-organisation-template [organisation]="attribution.agent"></app-organisation-template>
</div>

</mat-card>

Expand Down
@@ -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';
}
};
}
28 changes: 14 additions & 14 deletions src/app/project/board/board.component.html
Expand Up @@ -51,13 +51,13 @@ <h2 class="mat-title">
</div>
</div>

<div class="project-info-container flex-panel">
<div class="project-info-container flex-panel" *ngIf="datasets">

<div class="left-info column">
<!-- description -->
<section class="project description" *ngFor="let description of project.description">
<section class="project description">
<h3>Description</h3>
<div [innerHtml]="projectDescription"></div>
<div [innerHtml]="selectedDataset.project.description"></div>
</section>

<section>
Expand All @@ -67,39 +67,39 @@ <h3>Description</h3>
<mat-icon class="tab-icon">perm_data_setting</mat-icon>
Project
</ng-template>
<app-project-tab-view [metadata]="projectMetadata"></app-project-tab-view>
<app-project-tab-view [metadata]="selectedDataset.project"></app-project-tab-view>
</mat-tab>

<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tab-icon">collections</mat-icon>
Dataset
</ng-template>
<app-dataset-tab-view [metadata]="datasetMetadata" [noOfDatasets]="datasetOptions.length"></app-dataset-tab-view>
<app-dataset-tab-view [metadata]="selectedDataset" [noOfDatasets]="datasetOptions.length"></app-dataset-tab-view>
</mat-tab>

<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tab-icon">assignment</mat-icon>
Attribution
</ng-template>
<app-attribution-tab-view [attribution]="attribution"></app-attribution-tab-view>
<app-attribution-tab-view [attributions]="selectedDataset.qualifiedAttribution"></app-attribution-tab-view>
</mat-tab>

<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tab-icon">receipt</mat-icon>
Terms & conditions
</ng-template>
<app-terms-tab-view [conditions]="conditionsOfAccess" [license]="license"></app-terms-tab-view>
<app-terms-tab-view [conditions]="selectedDataset.conditionsOfAccess" [license]="selectedDataset.license"></app-terms-tab-view>
</mat-tab>

<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tab-icon">portrait</mat-icon>
Contact
</ng-template>
<app-contacts-tab-view [contactDetails]="contactDetails"></app-contacts-tab-view>
<app-contacts-tab-view [contactDetails]="selectedDataset.project.contactPoint"></app-contacts-tab-view>
</mat-tab>
</mat-tab-group>
</section>
Expand Down Expand Up @@ -134,7 +134,7 @@ <h3 class="display-inline-block">Cite as</h3>
</button>
</div>
<div class="sidenav-prop-text">
<p [innerHTML]="howToCite"></p>
<p [innerHTML]="selectedDataset.howToCite"></p>
</div>
</div>
<div class="metadata-box">
Expand All @@ -144,23 +144,23 @@ <h3 class="display-inline-block">Cite as</h3>
Persistent identifier
</div>
<div class="sidenav-prop-text property-value">
<a href="{{ datasetIdentifier }}" target="_blank"> {{ datasetIdentifier }} </a>
<a href="{{ selectedDataset.project.id }}" target="_blank"> {{ selectedDataset.project.id }} </a>
</div>
</div>
<div class="property">
<div class="property-label">
License
</div>
<div class="sidenav-prop-text property-value">
<a href="{{ license['value'] }}" target="_blank"> {{ license['value'] }} </a>
<a href="{{ selectedDataset.license.value }}" target="_blank"> {{ selectedDataset.license.value }} </a>
</div>
</div>
<div class="property">
<div class="property" *ngIf="selectedDataset.datePublished">
<div class="property-label">
Publication date
</div>
<div class="sidenav-prop-text property-value">
{{ publicationDate | date:'MMMM d, yyyy' }}
{{ selectedDataset.datePublished | date:'MMMM d, yyyy' }}
</div>
</div>
</div>
Expand All @@ -170,7 +170,7 @@ <h3 class="display-inline-block">Cite as</h3>
<h3>Keyword(s)</h3>
<div class="sidenav-prop-text">
<mat-chip-list>
<mat-chip *ngFor="let k of keywords"> {{ k }} </mat-chip>
<mat-chip *ngFor="let kword of selectedDataset.project.keywords"> {{ kword }} </mat-chip>
</mat-chip-list>
</div>
</div>
Expand Down

0 comments on commit 5e0a938

Please sign in to comment.