Merge pull request #88 from LotteHofstede/w2p-40416_simple-item-page

Simple Item View Page

resources/i18n/en.json

@@ -11,6 +11,17 @@
     "link.duraspace": "DuraSpace"
   },
 
+  "item": {
+    "page": {
+      "author": "Author",
+      "abstract": "Abstract",
+      "date": "Date",
+      "uri": "URI",
+      "files": "Files",
+      "collections": "Collections"
+    }
+  },
+
   "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/cache/models/normalized-bitstream.model.ts

@@ -1,4 +1,4 @@
-import { inheritSerialization } from "cerialize";
+import { inheritSerialization, autoserialize } from "cerialize";
 import { NormalizedDSpaceObject } from "./normalized-dspace-object.model";
 import { Bitstream } from "../../shared/bitstream.model";
 import { mapsTo } from "../builders/build-decorators";
@@ -10,6 +10,7 @@ export class NormalizedBitstream extends NormalizedDSpaceObject {
     /**
      * The size of this bitstream in bytes(?)
      */
+    @autoserialize
     size: number;
 
     /**
@@ -36,4 +37,7 @@ export class NormalizedBitstream extends NormalizedDSpaceObject {
      * The Bundle that owns this Bitstream
      */
     owner: string;
+
+    @autoserialize
+    retrieve: string;
 }

src/app/core/cache/models/normalized-dspace-object.model.ts

@@ -42,6 +42,7 @@ export abstract class NormalizedDSpaceObject implements CacheableObject {
   /**
    * An array of DSpaceObjects that are direct parents of this DSpaceObject
    */
+  @autoserialize
   parents: Array<string>;
 
   /**

src/app/core/cache/models/normalized-item.model.ts

@@ -32,6 +32,8 @@ export class NormalizedItem extends NormalizedDSpaceObject {
   /**
    * An array of Collections that are direct parents of this Item
    */
+  @autoserialize
+  @relationship(NormalizedDSOType.NormalizedCollection)
   parents: Array<string>;
 
   /**

src/app/core/shared/bitstream.model.ts

@@ -1,5 +1,6 @@
 import { DSpaceObject } from "./dspace-object.model";
 import { Bundle } from "./bundle.model";
+import { RemoteData } from "../data/remote-data";
 
 export class Bitstream extends DSpaceObject {
 
@@ -26,10 +27,16 @@ export class Bitstream extends DSpaceObject {
     /**
      * An array of Bundles that are direct parents of this Bitstream
      */
-    parents: Array<Bundle>;
+    parents: Array<RemoteData<Bundle>>;
 
     /**
      * The Bundle that owns this Bitstream
      */
     owner: Bundle;
+
+    /**
+     * The Bundle that owns this Bitstream
+     */
+    retrieve: string;
+
 }

src/app/core/shared/bundle.model.ts

@@ -12,7 +12,7 @@ export class Bundle extends DSpaceObject {
   /**
    * An array of Items that are direct parents of this Bundle
    */
-  parents: Array<Item>;
+  parents: Array<RemoteData<Item>>;
 
   /**
    * The Item that owns this Bundle

src/app/core/shared/collection.model.ts

@@ -58,7 +58,7 @@ export class Collection extends DSpaceObject {
   /**
    * An array of Collections that are direct parents of this Collection
    */
-  parents: Array<Collection>;
+  parents: Array<RemoteData<Collection>>;
 
   /**
    * The Collection that owns this Collection

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

@@ -2,6 +2,7 @@ import { autoserialize, autoserializeAs } from "cerialize";
 import { Metadatum } from "./metadatum.model"
 import { isEmpty, isNotEmpty } from "../../shared/empty.util";
 import { CacheableObject } from "../cache/object-cache.reducer";
+import { RemoteData } from "../data/remote-data";
 
 /**
  * An abstract model class for a DSpaceObject.
@@ -43,7 +44,7 @@ export abstract class DSpaceObject implements CacheableObject {
     /**
      * An array of DSpaceObjects that are direct parents of this DSpaceObject
      */
-  parents: Array<DSpaceObject>;
+    parents: Array<RemoteData<DSpaceObject>>;
 
     /**
      * The DSpaceObject that owns this DSpaceObject
@@ -74,4 +75,21 @@ export abstract class DSpaceObject implements CacheableObject {
             return undefined;
         }
     }
+
+    /**
+     * Find metadata by an array of keys
+     *
+     * This method returns the values of the element
+     * in the metadata array that match the provided
+     * key(s)
+     *
+     * @param key(s)
+     * @return Array<Metadatum>
+     */
+    filterMetadata(keys: string[]): Array<Metadatum> {
+        return this.metadata
+            .filter((metadatum: Metadatum) => {
+                return keys.some(key => key === metadatum.key);
+            });
+    }
 }

src/app/core/shared/item.model.ts

@@ -2,6 +2,8 @@ import { DSpaceObject } from "./dspace-object.model";
 import { Collection } from "./collection.model";
 import { RemoteData } from "../data/remote-data";
 import { Bundle } from "./bundle.model";
+import { Bitstream } from "./bitstream.model";
+import { Observable } from "rxjs";
 
 export class Item extends DSpaceObject {
 
@@ -28,13 +30,51 @@ export class Item extends DSpaceObject {
     /**
      * An array of Collections that are direct parents of this Item
      */
-  parents: Array<Collection>;
+    parents: Array<RemoteData<Collection>>;
 
     /**
      * The Collection that owns this Item
      */
     owner: Collection;
 
-  bundles: Array<RemoteData<Bundle>>
+    bundles: Array<RemoteData<Bundle>>;
+
+    getThumbnail(): Observable<Bitstream> {
+        const bundle: Observable<Bundle> = this.getBundle("THUMBNAIL");
+        return bundle.flatMap(
+            bundle => {
+                if (bundle != null) {
+                    return bundle.primaryBitstream.payload;
+                }
+                else {
+                    return Observable.of(undefined);
+                }
+            }
+        );
+    }
+
+    getFiles(): Observable<Array<Observable<Bitstream>>> {
+        const bundle: Observable <Bundle> = this.getBundle("ORIGINAL");
+        return bundle.map(bundle => {
+            if (bundle != null) {
+                return bundle.bitstreams.map(bitstream => bitstream.payload)
+            }
+        });
+    }
+
+    getBundle(name: String): Observable<Bundle> {
+        return Observable.combineLatest(
+            ...this.bundles.map(b => b.payload),
+            (...bundles: Array<Bundle>) => bundles)
+            .map(bundles => {
+                return bundles.find((bundle: Bundle) => {
+                    return bundle.name === name
+                });
+            });
+    }
+
+    getCollections(): Array<Observable<Collection>> {
+        return this.parents.map(collection => collection.payload.map(parent => parent));
+    }
 
 }

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

@@ -0,0 +1,7 @@
+<ds-metadata-field-wrapper [label]="label | translate">
+    <div class="collections">
+        <a *ngFor="let collection of collections; let last=last;" [href]="(collection | async)?.self">
+            <span>{{(collection | async)?.name}}</span><span *ngIf="!last" [innerHTML]="separator"></span>
+        </a>
+    </div>
+</ds-metadata-field-wrapper>

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

@@ -0,0 +1,34 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Collection } from "../../core/shared/collection.model";
+import { Observable } from "rxjs";
+import { Item } from "../../core/shared/item.model";
+
+@Component({
+    selector: 'ds-item-page-collections',
+    templateUrl: './collections.component.html'
+})
+export class CollectionsComponent implements OnInit {
+
+    @Input() item: Item;
+
+    label : string = "item.page.collections";
+
+    separator: string = "<br/>"
+
+    collections: Array<Observable<Collection>>;
+
+    constructor() {
+        this.universalInit();
+
+    }
+
+    universalInit() {
+    }
+
+    ngOnInit(): void {
+        this.collections = this.item.getCollections();
+    }
+
+
+
+}

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

@@ -0,0 +1,9 @@
+<ds-metadata-field-wrapper [label]="label | translate">
+    <div class="file-section">
+        <a *ngFor="let file of (files | async); let last=last;" [href]="(file | async)?.retrieve">
+            <span>{{(file | async)?.name}}</span>
+            <span>({{((file | async)?.size) | dsFileSize }})</span>
+            <span *ngIf="!last" innerHTML="{{separator}}"></span>
+        </a>
+    </div>
+</ds-metadata-field-wrapper>

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

@@ -0,0 +1,33 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Bitstream } from "../../core/shared/bitstream.model";
+import { Item } from "../../core/shared/item.model";
+import { Observable } from "rxjs";
+
+@Component({
+  selector: 'ds-item-page-file-section',
+  templateUrl: './file-section.component.html'
+})
+export class FileSectionComponent implements OnInit {
+
+  @Input() item: Item;
+
+  label : string = "item.page.files";
+
+  separator: string = "<br/>"
+
+  files: Observable<Array<Observable<Bitstream>>>;
+
+  constructor() {
+    this.universalInit();
+
+  }
+
+  universalInit() {
+  }
+
+  ngOnInit(): void {
+    this.files = this.item.getFiles();
+  }
+
+
+}

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: 'items/:id', pathMatch: 'full', component: ItemPageComponent },
+        ])
+    ]
+})
+export class ItemPageRoutingModule {
+}

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

@@ -0,0 +1,19 @@
+<div class="item-page" *ngIf="item.hasSucceeded | async">
+    <ds-item-page-title-field [item]="item.payload | async"></ds-item-page-title-field>
+    <div class="row">
+        <div class="col-xs-12 col-md-4">
+            <ds-metadata-field-wrapper>
+                <ds-thumbnail [thumbnail]="thumbnail | async"></ds-thumbnail>
+            </ds-metadata-field-wrapper>
+            <ds-item-page-file-section [item]="item.payload | async"></ds-item-page-file-section>
+            <ds-item-page-date-field [item]="item.payload | async"></ds-item-page-date-field>
+            <ds-item-page-author-field [item]="item.payload | async"></ds-item-page-author-field>
+        </div>
+        <div class="col-xs-12 col-md-6">
+            <ds-item-page-abstract-field
+                    [item]="item.payload | async"></ds-item-page-abstract-field>
+            <ds-item-page-uri-field [item]="item.payload | async"></ds-item-page-uri-field>
+            <ds-item-page-collections [item]="item.payload | async"></ds-item-page-collections>
+        </div>
+    </div>
+</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,41 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Item } from "../core/shared/item.model";
+import { ItemDataService } from "../core/data/item-data.service";
+import { RemoteData } from "../core/data/remote-data";
+import { Observable } from "rxjs";
+import { Bitstream } from "../core/shared/bitstream.model";
+
+@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>;
+
+    thumbnail: Observable<Bitstream>;
+
+    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']);
+            this.thumbnail = this.item.payload.flatMap(i => i.getThumbnail());
+        });
+    }
+
+
+}

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

@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ItemPageComponent } from './item-page.component';
+import { ItemPageRoutingModule } from './item-page-routing.module';
+import { MetadataValuesComponent } from './metadata-values/metadata-values.component';
+import { MetadataUriValuesComponent } from './metadata-uri-values/metadata-uri-values.component';
+import { MetadataFieldWrapperComponent } from './metadata-field-wrapper/metadata-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';
+import { FileSectionComponent } from "./file-section/file-section.component";
+import { CollectionsComponent } from "./collections/collections.component";
+
+@NgModule({
+    declarations: [
+        ItemPageComponent,
+        MetadataValuesComponent,
+        MetadataUriValuesComponent,
+        MetadataFieldWrapperComponent,
+        ItemPageAuthorFieldComponent,
+        ItemPageDateFieldComponent,
+        ItemPageAbstractFieldComponent,
+        ItemPageUriFieldComponent,
+        ItemPageTitleFieldComponent,
+        ItemPageSpecificFieldComponent,
+        FileSectionComponent,
+        CollectionsComponent
+    ],
+    imports: [
+        ItemPageRoutingModule,
+        CommonModule,
+        SharedModule
+    ]
+})
+export class ItemPageModule {
+}

src/app/item-page/metadata-field-wrapper/metadata-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/metadata-field-wrapper/metadata-field-wrapper.component.scss

@@ -0,0 +1,6 @@
+@import '../../../styles/variables.scss';
+:host {
+    .simple-view-element {
+        margin-bottom: 15px;
+    }
+}

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

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

src/app/item-page/metadata-uri-values/metadata-uri-values.component.html

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

src/app/item-page/metadata-uri-values/metadata-uri-values.component.scss

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

src/app/item-page/metadata-uri-values/metadata-uri-values.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { MetadataValuesComponent } from "../metadata-values/metadata-values.component";
+
+@Component({
+  selector: 'ds-metadata-uri-values',
+  styleUrls: ['./metadata-uri-values.component.css'],
+  templateUrl: './metadata-uri-values.component.html'
+})
+export class MetadataUriValuesComponent extends MetadataValuesComponent {
+
+  @Input() linktext: any;
+
+  @Input() values: any;
+
+  @Input() separator: string;
+
+  @Input() label: string;
+}

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ds-metadata-values',
+  styleUrls: ['./metadata-values.component.css'],
+  templateUrl: './metadata-values.component.html'
+})
+export class MetadataValuesComponent {
+
+  @Input() values: any;
+
+  @Input() separator: string;
+
+  @Input() label: string;
+
+  constructor() {
+    this.universalInit();
+
+  }
+
+  universalInit() {
+
+  }
+
+}

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

@@ -0,0 +1,21 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Item } from "../../../core/shared/item.model";
+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 {
+
+    @Input() item: Item;
+
+    separator : string;
+
+    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,23 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Item } from "../../../core/shared/item.model";
+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 {
+
+  @Input() item: Item;
+
+  separator : string;
+
+  fields : string[] = [
+    "dc.contributor.author",
+    "dc.creator",
+    "dc.contributor"
+  ];
+
+  label : string = "item.page.author";
+
+}

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

@@ -0,0 +1,21 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Item } from "../../../core/shared/item.model";
+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 {
+
+    @Input() item: Item;
+
+    separator : string = ", ";
+
+    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-metadata-values [values]="item?.filterMetadata(fields)" [separator]="separator" [label]="label"></ds-metadata-values>
+</div>

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

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

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

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

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

@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Item } from "../../../core/shared/item.model";
+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 {
+
+    @Input() item: Item;
+
+    separator : string;
+
+    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-metadata-uri-values [values]="item?.filterMetadata(fields)" [separator]="separator" [label]="label"></ds-metadata-uri-values>
+</div>

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

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

src/app/shared/shared.module.ts

@@ -7,6 +7,9 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from 'ng2-translate/ng2-translate';
 
 import { ApiService } from './api.service';
+import { FileSizePipe } from "./utils/file-size-pipe";
+import { ThumbnailComponent } from "../thumbnail/thumbnail.component";
+import { SafeUrlPipe } from "./utils/safe-url-pipe";
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -19,10 +22,13 @@ const MODULES = [
 ];
 
 const PIPES = [
+    FileSizePipe,
+    SafeUrlPipe
   // put pipes here
 ];
 
 const COMPONENTS = [
+  ThumbnailComponent
   // put shared components here
 ];
 

src/app/shared/utils/file-size-pipe.ts

@@ -0,0 +1,36 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+/*
+ * Convert bytes into largest possible unit.
+ * Takes an precision argument that defaults to 2.
+ * Usage:
+ *   bytes | fileSize:precision
+ * Example:
+ *   {{ 1024 |  fileSize}}
+ *   formats to: 1 KB
+ */
+@Pipe({name: 'dsFileSize'})
+export class FileSizePipe implements PipeTransform {
+
+    private units = [
+        'bytes',
+        'KiB',
+        'MiB',
+        'GiB',
+        'TiB',
+        'PiB'
+    ];
+
+    transform(bytes: number = 0, precision: number = 2 ) : string {
+        if ( isNaN( parseFloat( String(bytes) )) || ! isFinite( bytes ) ) return '?';
+
+        let unit = 0;
+
+        while ( bytes >= 1024 ) {
+            bytes /= 1024;
+            unit ++;
+        }
+
+        return bytes.toFixed( + precision ) + ' ' + this.units[ unit ];
+    }
+}

src/app/shared/utils/safe-url-pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({name: 'dsSafeUrl'})
+export class SafeUrlPipe implements PipeTransform {
+    constructor(private domSanitizer: DomSanitizer) {}
+    transform(url) {
+        return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+}

src/app/thumbnail/thumbnail.component.html

@@ -0,0 +1,4 @@
+<div class="thumbnail">
+   <img *ngIf="thumbnail" [src]="thumbnail.retrieve"/>
+   <img *ngIf="!thumbnail" [src]="holderSource | dsSafeUrl"/>
+</div>

src/app/thumbnail/thumbnail.component.scss

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

src/app/thumbnail/thumbnail.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Bitstream } from "../core/shared/bitstream.model";
+
+@Component({
+    selector: 'ds-thumbnail',
+    styleUrls: ['./thumbnail.component.css'],
+    templateUrl: './thumbnail.component.html'
+})
+export class ThumbnailComponent {
+
+    @Input() thumbnail: Bitstream;
+
+    data: any = {};
+
+    /**
+     * The default 'holder.js' image
+     */
+    holderSource: string = "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2293%22%20height%3D%22120%22%20viewBox%3D%220%200%2093%20120%22%20preserveAspectRatio%3D%22none%22%3E%3C!--%0ASource%20URL%3A%20holder.js%2F93x120%3Ftext%3DNo%20Thumbnail%0ACreated%20with%20Holder.js%202.8.2.%0ALearn%20more%20at%20http%3A%2F%2Fholderjs.com%0A(c)%202012-2015%20Ivan%20Malopinsky%20-%20http%3A%2F%2Fimsky.co%0A--%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C!%5BCDATA%5B%23holder_1543e460b05%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1543e460b05%22%3E%3Crect%20width%3D%2293%22%20height%3D%22120%22%20fill%3D%22%23EEEEEE%22%2F%3E%3Cg%3E%3Ctext%20x%3D%2235.6171875%22%20y%3D%2257%22%3ENo%3C%2Ftext%3E%3Ctext%20x%3D%2210.8125%22%20y%3D%2272%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+
+    constructor() {
+        this.universalInit();
+    }
+
+    universalInit() {
+
+    }
+
+}

src/backend/items.ts

@@ -4,7 +4,7 @@ export const ITEMS = [
       "self": {
         "href": "/items/8871"
       },
-      "collections": [
+      "parents": [
         {
           "href": "/collections/5179"
         },
@@ -16,9 +16,9 @@ export const ITEMS = [
         {
           "href": "/bundles/2355"
         },
-        {
-          "href": "/bundles/5687"
-        }
+        // {
+        //   "href": "/bundles/5687"
+        // }
       ]
     },
     "id": "8871",
@@ -96,7 +96,7 @@ export const ITEMS = [
       "self": {
         "href": "/items/9978"
       },
-      "collections": [
+      "parents": [
         {
           "href": "/collections/5179"
         },
@@ -108,9 +108,9 @@ export const ITEMS = [
         {
           "href": "/bundles/2355"
         },
-        {
-          "href": "/bundles/5687"
-        }
+        // {
+        //   "href": "/bundles/5687"
+        // }
       ]
     },
     "id": "9978",

src/server.routes.ts

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