refactor(project landing page): update metadata typings (DSP-1393)

package.json

@@ -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",

src/app/app.module.ts

@@ -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,

src/app/project/board/dataset-metadata.service.ts

@@ -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;
     }
-
 }

src/app/project/board/dataset-tab-view/dataset-tab-view.component.html

@@ -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>

src/app/project/board/dataset-tab-view/dataset-tab-view.component.ts

@@ -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'];
-
 }

src/app/project/board/organisation-template/organisation-template.component.ts

@@ -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">

src/app/project/board/person-template/person-template.component.html

@@ -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">

src/app/project/board/project-tab-view/project-tab-view.component.html

@@ -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>

src/app/project/board/project-tab-view/project-tab-view.component.ts

@@ -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;

src/app/project/board/url-template/url-template.component.ts

@@ -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';
+    }
+}