New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: display metadata on project landing page (DSP-1065) #348
Changes from all commits
f6fb17e
30f9e34
21b5e87
1f31541
de3b18a
0060982
9ea26b1
9bf1a6f
8c7b8b2
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
flavens marked this conversation as resolved.
Show resolved
Hide resolved
|
||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
.attribution-entry { | ||
margin-top: 25px; | ||
|
||
.color-for-role { | ||
color: brown; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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++) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What do you exactly need this for? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Here I am reformatting the data I received from parent to pass it to the person component.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let me know if it could be done in better way in angular 9. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. But why do you think this could be reused anywhere? |
||
if (this.people[idx]['sameAs']) { | ||
this.people[idx]['sameAs'] = this.people[idx]['sameAs']['value']; | ||
} | ||
} | ||
} | ||
|
||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would recommend to use the dot notation, instead the bracket notation. It is easier to use it (faster to type) and more readable (especially for deep objects). The bracket notation is helpful with invalid identifier and variables, as well as dynamic forms. Here keys are known, because defined in DSP-JS as properties.
This is general comment. Not only for this specific line.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I also prefer to use dot notation as you said it is easier.
But in this case if I use it, it gives me variable undefined error. I am not sure why... so I started to use bracket notation and it solved the error.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this happening everywhere? This is strange, because you use hardcoded data. However you can also use
?
operator to check if key is undefined, then it shouldn't return error if it is:address.streetAddress?.anotherProp?
But if you use primitive object type and get this error:
Identifier 'test' is not defined. 'object' does not contain such a member
then it is clear as error says. So you can leave it now, but in second iteration when you add interfaces, bracket notation should be easily replaced with dot notation.