40416: Thumbnail fix + clean up

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

@@ -33,4 +33,10 @@ export class Bitstream extends DSpaceObject {
      * The Bundle that owns this Bitstream
      */
     owner: Bundle;
+
+    /**
+     * The Bundle that owns this Bitstream
+     */
+    retrieve: string;
+
 }

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

@@ -42,12 +42,24 @@ export class Item extends DSpaceObject {
     getThumbnail(): Observable<Bitstream> {
         const bundle: Observable<Bundle> = this.getBundle("THUMBNAIL");
         return bundle.flatMap(
-            b => b.primaryBitstream.payload
+            bundle => {
+                if (bundle != null) {
+                    return bundle.primaryBitstream.payload;
+                }
+                else {
+                    return Observable.of(undefined);
+                }
+            }
         );
     }
 
     getFiles(): Observable<Array<Observable<Bitstream>>> {
-        return this.getBundle("ORIGINAL").map(bundle => bundle.bitstreams.map(bitstream => bitstream.payload));
+        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> {
@@ -62,7 +74,7 @@ export class Item extends DSpaceObject {
     }
 
     getCollections(): Array<Observable<Collection>> {
-        return this.parents.map(c => c.payload.map(p => p));
+        return this.parents.map(collection => collection.payload.map(parent => parent));
     }
 
 }

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

@@ -10,8 +10,11 @@ import { Item } from "../../core/shared/item.model";
 export class CollectionsComponent implements OnInit {
 
     @Input() item: Item;
+
     label : string = "item.page.collections";
+
     separator: string = "<br/>"
+
     collections: Array<Observable<Collection>>;
 
     constructor() {

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

@@ -10,8 +10,11 @@ import { Observable } from "rxjs";
 export class FileSectionComponent implements OnInit {
 
   @Input() item: Item;
+
   label : string = "item.page.files";
+
   separator: string = "<br/>"
+
   files: Observable<Array<Observable<Bitstream>>>;
 
   constructor() {

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

@@ -2,7 +2,9 @@
     <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>

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

@@ -14,8 +14,11 @@ import { Bitstream } from "../core/shared/bitstream.model";
 export class ItemPageComponent implements OnInit {
 
     id: number;
+
     private sub: any;
+
     item: RemoteData<Item>;
+
     thumbnail: Observable<Bitstream>;
 
     constructor(private route: ActivatedRoute, private items: ItemDataService) {
@@ -32,8 +35,6 @@ export class ItemPageComponent implements OnInit {
             this.item = this.items.findById(params['id']);
             this.thumbnail = this.item.payload.flatMap(i => i.getThumbnail());
         });
-
-
     }
 
 

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

@@ -12,7 +12,6 @@ import { ItemPageUriFieldComponent } from './specific-field/uri/item-page-uri-fi
 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 { ThumbnailComponent } from "../thumbnail/thumbnail.component";
 import { FileSectionComponent } from "./file-section/file-section.component";
 import { CollectionsComponent } from "./collections/collections.component";
 
@@ -28,7 +27,6 @@ import { CollectionsComponent } from "./collections/collections.component";
         ItemPageUriFieldComponent,
         ItemPageTitleFieldComponent,
         ItemPageSpecificFieldComponent,
-        ThumbnailComponent,
         FileSectionComponent,
         CollectionsComponent
     ],

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

@@ -8,6 +8,7 @@ import { Component, Input } from '@angular/core';
 export class MetadataFieldWrapperComponent {
 
   @Input() label: string;
+
   constructor() {
     this.universalInit();
 

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

@@ -7,8 +7,12 @@ import { MetadataValuesComponent } from "../metadata-values/metadata-values.comp
   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.ts

@@ -8,7 +8,9 @@ import { Component, Input } from '@angular/core';
 export class MetadataValuesComponent {
 
   @Input() values: any;
+
   @Input() separator: string;
+
   @Input() label: string;
 
   constructor() {

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

@@ -6,14 +6,16 @@ import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.comp
     selector: 'ds-item-page-abstract-field',
     templateUrl: './../item-page-specific-field.component.html'
 })
-export class ItemPageAbstractFieldComponent extends ItemPageSpecificFieldComponent implements OnInit {
+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

@@ -6,9 +6,10 @@ import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.comp
   selector: 'ds-item-page-author-field',
   templateUrl: './../item-page-specific-field.component.html'
 })
-export class ItemPageAuthorFieldComponent extends ItemPageSpecificFieldComponent implements OnInit {
+export class ItemPageAuthorFieldComponent extends ItemPageSpecificFieldComponent {
 
   @Input() item: Item;
+
   separator : string;
 
   fields : string[] = [
@@ -16,6 +17,7 @@ export class ItemPageAuthorFieldComponent extends ItemPageSpecificFieldComponent
     "dc.creator",
     "dc.contributor"
   ];
+
   label : string = "item.page.author";
 
 }

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

@@ -6,14 +6,16 @@ import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.comp
     selector: 'ds-item-page-date-field',
     templateUrl: './../item-page-specific-field.component.html'
 })
-export class ItemPageDateFieldComponent extends ItemPageSpecificFieldComponent implements OnInit {
+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.ts

@@ -4,12 +4,14 @@ import { Item } from "../../core/shared/item.model";
 @Component({
     templateUrl: './item-page-specific-field.component.html'
 })
-export class ItemPageSpecificFieldComponent implements OnInit {
+export class ItemPageSpecificFieldComponent {
 
     @Input() item: Item;
 
     fields : string[];
+
     label : string;
+
     separator : string = "<br/>";
 
     constructor() {
@@ -19,9 +21,4 @@ export class ItemPageSpecificFieldComponent implements OnInit {
     universalInit() {
 
     }
-
-    ngOnInit(): void {
-    }
-
-
 }

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

@@ -6,9 +6,10 @@ import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.comp
     selector: 'ds-item-page-title-field',
     templateUrl: './item-page-title-field.component.html'
 })
-export class ItemPageTitleFieldComponent extends ItemPageSpecificFieldComponent implements OnInit {
+export class ItemPageTitleFieldComponent extends ItemPageSpecificFieldComponent {
 
     @Input() item: Item;
+
     separator : string;
 
     fields : string[] = [

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

@@ -6,15 +6,16 @@ import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.comp
   selector: 'ds-item-page-uri-field',
   templateUrl: './item-page-uri-field.component.html'
 })
-export class ItemPageUriFieldComponent extends ItemPageSpecificFieldComponent implements OnInit {
+export class ItemPageUriFieldComponent extends ItemPageSpecificFieldComponent {
 
   @Input() item: Item;
-  separator : string;
 
+  separator : string;
 
   fields : string[] = [
     "dc.identifier.uri"
   ];
+
   label : string = "item.page.uri";
 
 }

src/app/shared/shared.module.ts

@@ -8,6 +8,8 @@ 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
@@ -20,11 +22,13 @@ const MODULES = [
 ];
 
 const PIPES = [
-    FileSizePipe
+    FileSizePipe,
+    SafeUrlPipe
   // put pipes here
 ];
 
 const COMPONENTS = [
+  ThumbnailComponent
   // put shared components here
 ];
 

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

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

src/app/thumbnail/thumbnail.component.ts

@@ -1,6 +1,5 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Bitstream } from "../core/shared/bitstream.model";
-import { Observable } from "rxjs";
 
 @Component({
     selector: 'ds-thumbnail',
@@ -9,12 +8,17 @@ import { Observable } from "rxjs";
 })
 export class ThumbnailComponent {
 
-    @Input() thumbnail : Observable<Bitstream>;
+    @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() {