Skip to content
Permalink
Browse files
refactor(project landing page): update metadata typings (DSP-1393) (#407
)

* refactor(project landing page): updated metadata typings
  • Loading branch information
Snehal Kumbhar committed Mar 4, 2021
1 parent 6de83b8 commit b4f101b0425f12919cfa071903fc788ea44aa561
@@ -31,7 +31,7 @@
"@angular/platform-browser-dynamic": "~9.1.12",
"@angular/router": "~9.1.12",
"@ckeditor/ckeditor5-angular": "^1.2.3",
"@dasch-swiss/dsp-js": "^2.1.0",
"@dasch-swiss/dsp-js": "^2.1.1",
"@dasch-swiss/dsp-ui": "^1.2.2",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
@@ -5,9 +5,6 @@ import { APP_INITIALIZER, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { KnoraApiConnection } from '@dasch-swiss/dsp-js';
import {
AppInitService,
@@ -18,12 +15,17 @@ import {
DspSearchModule,
DspViewerModule
} from '@dasch-swiss/dsp-ui';

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AngularSplitModule } from 'angular-split';
import { environment } from '../environments/environment';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CookiePolicyComponent } from './main/cookie-policy/cookie-policy.component';
import { DialogHeaderComponent } from './main/dialog/dialog-header/dialog-header.component';
import { DialogComponent } from './main/dialog/dialog.component';
import { ExternalLinksDirective } from './main/directive/external-links.directive';
import { InvalidControlScrollDirective } from './main/directive/invalid-control-scroll.directive';
import { ErrorComponent } from './main/error/error.component';
import { FooterComponent } from './main/footer/footer.component';
import { GridComponent } from './main/grid/grid.component';
@@ -33,20 +35,32 @@ import { LoginComponent } from './main/login/login.component';
import { MainComponent } from './main/main.component';
import { SelectLanguageComponent } from './main/select-language/select-language.component';
import { MaterialModule } from './material-module';
import { AddressTemplateComponent } from './project/board/address-template/address-template.component';
import { AttributionTabViewComponent } from './project/board/attribution-tab-view/attribution-tab-view.component';
import { BoardComponent } from './project/board/board.component';
import { ContactsTabViewComponent } from './project/board/contacts-tab-view/contacts-tab-view.component';
import { DatasetTabViewComponent } from './project/board/dataset-tab-view/dataset-tab-view.component';
import { OrganisationTemplateComponent } from './project/board/organisation-template/organisation-template.component';
import { PersonTemplateComponent } from './project/board/person-template/person-template.component';
import { ProjectTabViewComponent } from './project/board/project-tab-view/project-tab-view.component';
import { TermsTabViewComponent } from './project/board/terms-tab-view/terms-tab-view.component';
import { UrlTemplateComponent } from './project/board/url-template/url-template.component';
import { AddUserComponent } from './project/collaboration/add-user/add-user.component';
import { CollaborationComponent } from './project/collaboration/collaboration.component';
import { SelectGroupComponent } from './project/collaboration/select-group/select-group.component';
import { ListInfoFormComponent } from './project/list/list-info-form/list-info-form.component';
import { EditListItemComponent } from './project/list/list-item-form/edit-list-item/edit-list-item.component';
import { ListItemFormComponent } from './project/list/list-item-form/list-item-form.component';
import { ListItemComponent } from './project/list/list-item/list-item.component';
import { ListComponent } from './project/list/list.component';
import { OntologyFormComponent } from './project/ontology/ontology-form/ontology-form.component';
import { OntologyComponent } from './project/ontology/ontology.component';
import { OntologyVisualizerComponent } from './project/ontology/ontology-visualizer/ontology-visualizer.component';
import { VisualizerComponent } from './project/ontology/ontology-visualizer/visualizer/visualizer.component';
import { ResourceClassFormComponent } from './project/ontology/resource-class-form/resource-class-form.component';
import { OntologyComponent } from './project/ontology/ontology.component';
import { PropertyFormComponent } from './project/ontology/property-form/property-form.component';
import { PropertyInfoComponent } from './project/ontology/property-info/property-info.component';
import { ResourceClassFormComponent } from './project/ontology/resource-class-form/resource-class-form.component';
import { ResourceClassInfoComponent } from './project/ontology/resource-class-info/resource-class-info.component';
import { AddGroupComponent } from './project/permission/add-group/add-group.component';
import { PermissionComponent } from './project/permission/permission.component';
import { ProjectFormComponent } from './project/project-form/project-form.component';
@@ -67,31 +81,18 @@ import { PasswordFormComponent } from './user/user-form/password-form/password-f
import { UserFormComponent } from './user/user-form/user-form.component';
import { UserMenuComponent } from './user/user-menu/user-menu.component';
import { UserComponent } from './user/user.component';
import { ResourceComponent } from './workspace/resource/resource.component';
import { ResourceInstanceFormComponent } from './workspace/resource/resource-instance-form/resource-instance-form.component';
import { ResultsComponent } from './workspace/results/results.component';

import { environment } from '../environments/environment';
import { ExternalLinksDirective } from './main/directive/external-links.directive';
import { InvalidControlScrollDirective } from './main/directive/invalid-control-scroll.directive';
import { SelectProjectComponent } from './workspace/resource/resource-instance-form/select-project/select-project.component';
import { SelectOntologyComponent } from './workspace/resource/resource-instance-form/select-ontology/select-ontology.component';
import { SelectResourceClassComponent } from './workspace/resource/resource-instance-form/select-resource-class/select-resource-class.component';
import { SelectProjectComponent } from './workspace/resource/resource-instance-form/select-project/select-project.component';
import { SelectPropertiesComponent } from './workspace/resource/resource-instance-form/select-properties/select-properties.component';
import { SwitchPropertiesComponent } from './workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component';
import { ProjectTabViewComponent } from './project/board/project-tab-view/project-tab-view.component';
import { DatasetTabViewComponent } from './project/board/dataset-tab-view/dataset-tab-view.component';
import { AttributionTabViewComponent } from './project/board/attribution-tab-view/attribution-tab-view.component';
import { TermsTabViewComponent } from './project/board/terms-tab-view/terms-tab-view.component';
import { ContactsTabViewComponent } from './project/board/contacts-tab-view/contacts-tab-view.component';
import { SelectResourceClassComponent } from './workspace/resource/resource-instance-form/select-resource-class/select-resource-class.component';
import { ResourceComponent } from './workspace/resource/resource.component';
import { ResultsComponent } from './workspace/results/results.component';




import { AngularSplitModule } from 'angular-split';
import { PersonTemplateComponent } from './project/board/person-template/person-template.component';
import { AddressTemplateComponent } from './project/board/address-template/address-template.component';
import { OrganisationTemplateComponent } from './project/board/organisation-template/organisation-template.component';
import { EditListItemComponent } from './project/list/list-item-form/edit-list-item/edit-list-item.component';
import { PropertyInfoComponent } from './project/ontology/property-info/property-info.component';
import { ResourceClassInfoComponent } from './project/ontology/resource-class-info/resource-class-info.component';

// translate: AoT requires an exported function for factories
export function HttpLoaderFactory(httpClient: HttpClient) {
@@ -166,7 +167,8 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
OrganisationTemplateComponent,
EditListItemComponent,
PropertyInfoComponent,
ResourceClassInfoComponent
ResourceClassInfoComponent,
UrlTemplateComponent
],
imports: [
AppRoutingModule,
@@ -9,7 +9,6 @@ export class MetadataService {
constructor() { }

/**
* used in project metadata page
* determine if the object is of type Person or Organization or Iid
* @param obj Person | Organization | IId
*/
@@ -21,5 +20,4 @@ export class MetadataService {
}
return undefined;
}

}
@@ -16,21 +16,16 @@ <h3 class="label mat-subheading-1">
{{ prop.key }}
</h3>
</div>
<div *ngIf="templateKeys.indexOf(prop.key) < 0 && dateKeys.indexOf(prop.key) < 0 && prop.key !== 'distribution';" class="property-value">
{{ prop.value }}
</div>
<div *ngIf="templateKeys.indexOf(prop.key) > -1;" class="property-value">
<p *ngFor="let entry of prop.value" class="remove-top-margin">
<a *ngIf="entry.url" href="{{ entry.url }}" target="_blank"> {{ entry.url }} </a>
</p>
</div>
<div *ngIf="prop.key === 'distribution'" class="property-value">
<p *ngIf="prop.value.url" class="remove-top-margin">
<a href="{{ prop.value.url }}" target="_blank"> {{ prop.value.url }} </a>
</p>
</div>
<div *ngIf="dateKeys.indexOf(prop.key) > -1;">
{{ prop.value | date:'MMMM d, yyyy' }}
<div class="property-value">
<div *ngIf="templateKeys.indexOf(prop.key) < 0 && dateKeys.indexOf(prop.key) < 0">
{{ prop.value }}
</div>
<div *ngIf="templateKeys.indexOf(prop.key) > -1;">
<app-url-template [urls]="prop.value"></app-url-template>
</div>
<div *ngIf="dateKeys.indexOf(prop.key) > -1;">
{{ prop.value | date:'MMMM d, yyyy' }}
</div>
</div>
</div>
</div>
@@ -18,9 +18,8 @@ export class DatasetTabViewComponent {
excludeKeys = ['project', 'qualifiedAttribution'];

// metadata keys that require specific format to display
templateKeys = ['license', 'sameAs'];
templateKeys = ['abstract', 'distribution', 'documentation', 'license', 'sameAs', ];

// date keys from metadata object for formatting
dateKeys = ['dateCreated', 'dateModified', 'datePublished'];

}
@@ -13,15 +13,8 @@ import { Organization } from '@dasch-swiss/dsp-js';
</div>
</div>
<div *ngIf="organisation.url" class="metadata-property">
<div class="property-label display-inline-block">
URL(s):
</div>
<div class="display-inline-block add-left-margin">
<span *ngFor="let entry of organisation.url" class="comma">
<a href="{{ entry.url }}" target="_blank"> {{ entry.url }} </a>
</span>
</div>
<div *ngIf="organisation.url">
<app-url-template [urls]="organisation.url" [displayLabel]='true'></app-url-template>
</div>
<div *ngIf="organisation.email" class="metadata-property">
@@ -10,13 +10,8 @@
</div>
</div>

<div *ngIf="person.sameAs" class="metadata-property">
<div class="property-label display-inline-block">
ORCID:
</div>
<div class="display-inline-block add-left-margin">
<a href="{{ person.sameAs[0].url }}" target="_blank"> {{ person.sameAs[0].url }} </a>
</div>
<div *ngIf="person.sameAs">
<app-url-template [urls]="person.sameAs" [displayLabel]="true" [label]="'ORCID'"></app-url-template>
</div>

<div *ngIf="person.email" class="metadata-property">
@@ -11,23 +11,6 @@ <h3 class="label mat-subheading-1">
</div>
<div [ngSwitch]="prop.key" class="property-value">

<!-- template for discipline -->
<div *ngSwitchCase="'discipline'">
<a href="{{ selectedProject.discipline[0].url }}" target="_blank"> {{ selectedProject.discipline[0].name }} </a>
</div>

<!-- template for temporalCoverage -->
<div *ngSwitchCase="'temporalCoverage'">
<a href="{{ selectedProject.temporalCoverage[0].url }}" target="_blank"> {{ selectedProject.temporalCoverage[0].name }} </a>
</div>

<!-- template for url -->
<div *ngSwitchCase="'url'">
<p class="remove-top-margin" *ngFor="let link of selectedProject.url">
<a *ngIf="link.url" href="{{ link.url }}" target="_blank"> {{ link.url }} </a>
</p>
</div>

<!-- template for funder -->
<div *ngSwitchCase="'funder'">
<div *ngFor="let funder of funders" class="funder">
@@ -45,19 +28,16 @@ <h3 class="label mat-subheading-1">
<!-- template for keywords -->
<div *ngSwitchCase="'keywords'">
<mat-chip-list>
<mat-chip *ngFor="let kword of selectedProject.keywords"> {{ kword }} </mat-chip>
<mat-chip *ngFor="let kword of prop.value"> {{ kword }} </mat-chip>
</mat-chip-list>
</div>

<!-- template for dataManagementPlan -->
<div *ngSwitchCase="'dataManagementPlan'">
<div *ngFor="let dmp of dmps">
<p class="remove-top-margin"> {{ dmp.isAvailable? 'Available' : 'Unavailable' }} </p>
<div *ngIf="!dmp.isAvailable">
<p *ngIf="dmp.url.name"> Name: {{ dmp.url.url }} </p>
<p *ngIf="dmp.url.url">
URL: <a href="{{ dmp.url.url }}" target="_blank"> {{ dmp.url.url }} </a>
</p>
<div *ngIf="dmp.isAvailable">
<app-url-template [urls]='dmp.url'></app-url-template>
</div>
</div>
</div>
@@ -73,16 +53,7 @@ <h3 class="label mat-subheading-1">
</div>
</div>

<div *ngIf="grant.url" class="metadata-property">
<div class="property-label display-inline-block">
URL(s):
</div>
<div class="display-inline-block add-left-margin">
<span *ngFor="let entry of grant.url" class="comma">
<a href="{{ entry.url }}" target="_blank"> {{ entry.url }} </a>
</span>
</div>
</div>
<app-url-template [urls]='grant.url' [displayLabel]='true'></app-url-template>

<div *ngIf="grant.number" class="metadata-property">
<div class="property-label display-inline-block">
@@ -118,18 +89,21 @@ <h3 class="label mat-subheading-1">
<!-- template for spatialCoverage -->
<div *ngSwitchCase="'spatialCoverage'">
<div *ngFor="let coverage of selectedProject.spatialCoverage">
{{ coverage.place.name }} (<a href="{{ coverage.place.url }}" target="_blank"> {{ coverage.place.url }} </a>)
<app-url-template [urls]='coverage.place'></app-url-template>
</div>
</div>

<!-- default template -->
<div *ngSwitchDefault>
<div *ngIf="dateKeys.indexOf(prop.key) < 0;">
<div *ngIf="dateKeys.indexOf(prop.key) < 0 && iUrlTemplatesKeys.indexOf(prop.key) < 0">
{{ prop.value }}
</div>
<div *ngIf="dateKeys.indexOf(prop.key) > -1;">
{{ prop.value | date:'MMMM d, yyyy' }}
</div>
<div *ngIf="iUrlTemplatesKeys.indexOf(prop.key) > -1;">
<app-url-template [urls]='prop.value'></app-url-template>
</div>
</div>
</div>
</div>
@@ -23,6 +23,9 @@ export class ProjectTabViewComponent implements OnInit {
// used for formatting
dateKeys = ['startDate', 'endDate'];

// keys that require IUrl template
iUrlTemplatesKeys = ['discipline', 'temporalCoverage', 'url'];

dmps: DataManagementPlan[] = [];
funders: Person[] | Organization[] = [];
funderType: string;
@@ -0,0 +1,54 @@
import { Component, Input, OnInit } from '@angular/core';
import { IUrl } from '@dasch-swiss/dsp-js';

@Component({
selector: 'app-url-template',
template: `
<div *ngIf="urls">
<div *ngIf="templateType === 'string'">
<p *ngFor="let str of urls" class="remove-top-margin"> {{ str }} </p>
</div>
<div *ngIf="templateType === 'IUrl'">
<div class="metadata-property">
<div *ngIf="displayLabel" class="property-label display-inline-block">
{{ label }}:
</div>
<div [ngClass]="{'display-inline-block add-left-margin': displayLabel}">
<span *ngFor="let entry of urls" class="comma">
<a *ngIf="entry.name" href="{{ entry.url }}" target="_blank"> {{ entry.name }} </a>
<a *ngIf="!entry.name" href="{{ entry.url }}" target="_blank"> {{ entry.url }} </a>
</span>
</div>
</div>
</div>
</div>
`
})
export class UrlTemplateComponent implements OnInit {
@Input() urls: IUrl | IUrl[] | string[];

@Input() label = 'URL(s)';

@Input() displayLabel = false;

templateType: string;

ngOnInit() {
if (!(this.urls instanceof Array)) {
this.urls = [this.urls];
}

this.templateType = this.getTemplateType(this.urls[0]);
}

/**
* determine if the object is of type string or IUrl
* @param obj string | IUrl
*/
getTemplateType (obj: IUrl | string): string {
if (typeof obj === 'string') {
return 'string';
}
return 'IUrl';
}
}

0 comments on commit b4f101b

Please sign in to comment.