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 5 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> | ||
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. 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 commentThe 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. 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. Is this happening everywhere? This is strange, because you use hardcoded data. However you can also use
But if you use primitive object type and get this error: |
||
<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 making of dataset.</p> | ||
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. I would change it to 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. Done. 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. to correct: "in THE creation of the dataset" |
||
|
||
<div class="tab-contents" style="margin-top: 40px;"> | ||
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. If unnecessary and repeatable, keep styles aside of HTML. 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. Done. |
||
|
||
<mat-card *ngFor="let entry of attribution | keyvalue;" class="attribution-entry"> | ||
|
||
<h3 style="color: brown"> {{ 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,3 @@ | ||
.attribution-entry { | ||
margin-top: 25px; | ||
} |
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.
What about https://v9.material.angular.io/cdk/clipboard/overview
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.
It was not working for me but I don't remember exactly what was the issue. In next iteration I will check it again as I need this functionality in many other places which are not implemented in this PR.
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.
Ok, check this out in next iteration.