40416: started on simple item view page

resources/i18n/en.json

@@ -11,6 +11,15 @@
     "link.duraspace": "DuraSpace"
   },
 
+  "item": {
+    "page": {
+      "author": "Author",
+      "abstract": "Abstract",
+      "date": "Date",
+      "uri": "URI"
+    }
+  },
+
   "nav": {
     "home": "Home"
   },

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 
 import { CoreModule } from './core/core.module';
 import { HomeModule } from './home/home.module';
+import { ItemPageModule } from './item-page/item-page.module';
 
 import { SharedModule } from './shared/shared.module';
 
@@ -10,15 +11,17 @@ import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
 import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
 
+
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
-    PageNotFoundComponent
+    PageNotFoundComponent,
   ],
   imports: [
     SharedModule,
     HomeModule,
+    ItemPageModule,
     CoreModule.forRoot(),
     AppRoutingModule,
   ],

src/app/core/shared/dspace-object.model.ts

@@ -71,4 +71,12 @@ export abstract class DSpaceObject implements CacheableObject {
             return undefined;
         }
     }
+
+    filterMetadata(keys: string[]): Array<Metadatum> {
+        return this.metadata
+            .filter((metadatum: Metadatum) => {
+                return keys.some(key => key === metadatum.key);
+            });
+    }
+
 }

src/app/item-page/field-wrapper/item-page-field-wrapper.component.html

@@ -0,0 +1,6 @@
+<div class="simple-view-element">
+    <h5 class="simple-view-element-header" *ngIf="label">{{ label }}</h5>
+    <div class="simple-view-element-body">
+        <ng-content></ng-content>
+    </div>
+</div>

src/app/item-page/field-wrapper/item-page-field-wrapper.component.scss

@@ -0,0 +1 @@
+@import '../../../styles/variables.scss';

src/app/item-page/field-wrapper/item-page-field-wrapper.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ds-item-page-field-wrapper',
+  styleUrls: ['./item-page-field-wrapper.component.css'],
+  templateUrl: './item-page-field-wrapper.component.html'
+})
+export class ItemPageFieldWrapperComponent {
+
+  @Input() label: string;
+  constructor() {
+    this.universalInit();
+
+  }
+
+  universalInit() {
+
+  }
+
+}

src/app/item-page/generic-field/item-page-field.component.html

@@ -0,0 +1,5 @@
+<ds-item-page-field-wrapper [label]="label | translate">
+    <span *ngFor="let metadatum of data; let last=last;">
+        {{metadatum.value}}<span *ngIf="!last"><span innerHTML="{{separator}}"></span></span>
+    </span>
+</ds-item-page-field-wrapper>

src/app/item-page/generic-field/item-page-field.component.scss

@@ -0,0 +1 @@
+@import '../../../styles/variables.scss';

src/app/item-page/generic-field/item-page-field.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ds-item-page-field',
+  styleUrls: ['./item-page-field.component.css'],
+  templateUrl: './item-page-field.component.html'
+})
+export class ItemPageFieldComponent {
+
+  @Input() data: any;
+  @Input() separator: string;
+  @Input() label: string;
+
+  constructor() {
+    this.universalInit();
+
+  }
+
+  universalInit() {
+
+  }
+
+}

src/app/item-page/item-page-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { ItemPageComponent } from './item-page.component';
+
+@NgModule({
+    imports: [
+        RouterModule.forChild([
+            { path: 'item/:id', pathMatch: 'full', component: ItemPageComponent },
+        ])
+    ]
+})
+export class ItemPageRoutingModule {
+}

src/app/item-page/item-page.component.html

@@ -0,0 +1,8 @@
+<div class="item-page" *ngIf="item.hasSucceeded | async">
+  Item page component
+  <ds-item-page-title-field [item]="item.payload"></ds-item-page-title-field>
+  <ds-item-page-date-field [item]="item.payload"></ds-item-page-date-field>
+  <ds-item-page-author-field [item]="item.payload"></ds-item-page-author-field>
+  <ds-item-page-abstract-field [item]="item.payload"></ds-item-page-abstract-field>
+  <ds-item-page-uri-field [item]="item.payload"></ds-item-page-uri-field>
+</div>

src/app/item-page/item-page.component.scss

@@ -0,0 +1 @@
+@import '../../styles/variables.scss';

src/app/item-page/item-page.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Item } from "../core/shared/item.model";
+import { ItemDataService } from "../core/data-services/item-data.service";
+import { RemoteData } from "../core/data-services/remote-data";
+
+@Component({
+  selector: 'ds-item-page',
+  styleUrls: ['./item-page.component.css'],
+  templateUrl: './item-page.component.html'
+})
+export class ItemPageComponent implements OnInit {
+
+  id: number;
+  private sub: any;
+  item : RemoteData<Item>;
+
+  constructor(  private route: ActivatedRoute, private items : ItemDataService) {
+    this.universalInit();
+  }
+
+  universalInit() {
+
+  }
+
+  ngOnInit(): void {
+    this.sub = this.route.params.subscribe(params => {
+      this.id = +params['id'];
+      this.item = this.items.findById(params['id']);
+    });
+
+  }
+
+
+}

src/app/item-page/item-page.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ItemPageComponent } from './item-page.component';
+import { ItemPageRoutingModule } from './item-page-routing.module';
+import { ItemPageFieldComponent } from './generic-field/item-page-field.component';
+import { ItemPageFieldWrapperComponent } from './field-wrapper/item-page-field-wrapper.component';
+import { ItemPageAuthorFieldComponent } from './specific-field/author/item-page-author-field.component';
+import { ItemPageDateFieldComponent } from './specific-field/date/item-page-date-field.component';
+import { ItemPageAbstractFieldComponent } from './specific-field/abstract/item-page-abstract-field.component';
+import { ItemPageUriFieldComponent } from './specific-field/uri/item-page-uri-field.component';
+import { ItemPageTitleFieldComponent } from './specific-field/title/item-page-title-field.component';
+import { ItemPageSpecificFieldComponent } from './specific-field/item-page-specific-field.component';
+import { SharedModule } from './../shared/shared.module';
+
+@NgModule({
+    declarations: [
+        ItemPageComponent,
+        ItemPageFieldComponent,
+        ItemPageFieldWrapperComponent,
+        ItemPageAuthorFieldComponent,
+        ItemPageDateFieldComponent,
+        ItemPageAbstractFieldComponent,
+        ItemPageUriFieldComponent,
+        ItemPageTitleFieldComponent,
+        ItemPageSpecificFieldComponent,
+    ],
+    imports: [
+        ItemPageRoutingModule,
+        CommonModule,
+        SharedModule
+    ]
+})
+export class ItemPageModule {
+}

src/app/item-page/specific-field/abstract/item-page-abstract-field.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Item } from "../../../core/shared/item.model";
+import { Observable } from "rxjs";
+import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.component";
+
+@Component({
+    selector: 'ds-item-page-abstract-field',
+    templateUrl: './../item-page-specific-field.component.html'
+})
+export class ItemPageAbstractFieldComponent extends ItemPageSpecificFieldComponent implements OnInit {
+
+    @Input() item: Observable<Item>;
+
+    fields : string[] = [
+        "dc.description.abstract"
+    ];
+    label : string = "item.page.abstract";
+
+}

src/app/item-page/specific-field/author/item-page-author-field.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Item } from "../../../core/shared/item.model";
+import { Observable } from "rxjs";
+import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.component";
+
+@Component({
+  selector: 'ds-item-page-author-field',
+  templateUrl: './../item-page-specific-field.component.html'
+})
+export class ItemPageAuthorFieldComponent extends ItemPageSpecificFieldComponent implements OnInit {
+
+  @Input() item: Observable<Item>;
+
+  fields : string[] = [
+    "dc.contributor.author",
+    "dc.creator",
+    "dc.contributor"
+  ];
+  label : string = "item.page.author";
+  separator : string = ",";
+
+}

src/app/item-page/specific-field/date/item-page-date-field.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Item } from "../../../core/shared/item.model";
+import { Observable } from "rxjs";
+import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.component";
+
+@Component({
+    selector: 'ds-item-page-date-field',
+    templateUrl: './../item-page-specific-field.component.html'
+})
+export class ItemPageDateFieldComponent extends ItemPageSpecificFieldComponent implements OnInit {
+
+    @Input() item: Observable<Item>;
+
+    fields : string[] = [
+        "dc.date.issued"
+    ];
+    label : string = "item.page.date";
+
+}

src/app/item-page/specific-field/item-page-specific-field.component.html

@@ -0,0 +1,3 @@
+<div class="item-page-specific-field">
+  <ds-item-page-field [data]="(item | async)?.filterMetadata(fields)" [separator]="separator" [label]="label"></ds-item-page-field>
+</div>

src/app/item-page/specific-field/item-page-specific-field.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Item } from "../../core/shared/item.model";
+import { Observable } from "rxjs";
+
+@Component({
+    templateUrl: './item-page-specific-field.component.html'
+})
+export class ItemPageSpecificFieldComponent implements OnInit {
+
+    @Input() item: Observable<Item>;
+
+    fields : string[];
+    label : string;
+    separator : string = "<br/>";
+
+    constructor() {
+        this.universalInit();
+    }
+
+    universalInit() {
+
+    }
+
+    ngOnInit(): void {
+    }
+
+
+}

src/app/item-page/specific-field/title/item-page-title-field.component.html

@@ -0,0 +1,3 @@
+<h2 class="item-page-title-field">
+  <ds-item-page-field [data]="(item | async)?.filterMetadata(fields)"></ds-item-page-field>
+</h2>

src/app/item-page/specific-field/title/item-page-title-field.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Item } from "../../../core/shared/item.model";
+import { Observable } from "rxjs";
+import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.component";
+
+@Component({
+    selector: 'ds-item-page-title-field',
+    templateUrl: './item-page-title-field.component.html'
+})
+export class ItemPageTitleFieldComponent extends ItemPageSpecificFieldComponent implements OnInit {
+
+    @Input() item: Observable<Item>;
+
+    fields : string[] = [
+        "dc.title"
+    ];
+
+}

src/app/item-page/specific-field/uri/item-page-uri-field.component.html

@@ -0,0 +1,3 @@
+<div class="item-page-specific-field">
+  <ds-item-page-field [data]="(item | async)?.filterMetadata(fields)" [separator]="separator" [label]="label"></ds-item-page-field>
+</div>

src/app/item-page/specific-field/uri/item-page-uri-field.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Item } from "../../../core/shared/item.model";
+import { Observable } from "rxjs";
+import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.component";
+
+@Component({
+  selector: 'ds-item-page-uri-field',
+  templateUrl: './../item-page-specific-field.component.html'
+})
+export class ItemPageUriFieldComponent extends ItemPageSpecificFieldComponent implements OnInit {
+
+  @Input() item: Observable<Item>;
+
+  fields : string[] = [
+    "dc.identifier.uri"
+  ];
+  label : string = "item.page.uri";
+
+}

src/server.routes.ts

@@ -10,5 +10,5 @@
  * ];
  **/
 export const routes: string[] = [
-  'home', '**'
+  'home', 'item/:id' , '**'
 ];