41650: full item page

resources/i18n/en.json

@@ -12,6 +12,7 @@
       "date": "Date",
       "uri": "URI",
       "files": "Files",
+      "downloads": "Downloads",
       "collections": "Collections"
     }
   },

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

@@ -59,6 +59,29 @@ export class Item extends DSpaceObject {
         );
     }
 
+    /**
+     * Retrieves the thumbnail for the given original of this item
+     * @returns {Observable<Bitstream>} the primaryBitstream of the "THUMBNAIL" bundle
+     */
+    getThumbnailForOriginal(original: Observable<Bitstream>): Observable<Bitstream> { //returns obs of obs of bitstream instead...
+        const bundle: Observable<Bundle> = this.getBundle("THUMBNAIL");
+        return bundle.map(
+            bundle => {
+                if (bundle != null) {
+                    return bundle.bitstreams.find(
+                        file => {
+                            return Observable.combineLatest(
+                                original,
+                                file.payload,
+                                (original, thumbnail) => {
+                                    return (thumbnail.name.startsWith(original.name));
+                                });
+                        });
+                }
+            }
+        );
+    }
+
     /**
      * Retrieves all files that should be displayed on the item page of this item
      * @returns {Observable<Array<Observable<Bitstream>>>} an array of all Bitstreams in the "ORIGINAL" bundle

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

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

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

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

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

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

src/app/item-page/full/field-components/file-section/full-file-section.component.html

@@ -0,0 +1,11 @@
+<ds-metadata-field-wrapper [label]="label | translate">
+    <div class="file-section row" *ngFor="let file of (files | async); let last=last;">
+        <ds-thumbnail [thumbnail]="thumbnails[(file | async)?.id] | async"></ds-thumbnail>
+        <div>{{(file | async)?.name}}</div>
+        <div>{{(file | async)?.findMetadata("dc.description")}}</div>
+        <div>{{((file | async)?.size) | dsFileSize }}</div>
+        <a [href]="(file | async)?.retrieve">
+            {{"item.page.download" | translate}}
+        </a>
+    </div>
+</ds-metadata-field-wrapper>

src/app/item-page/full/field-components/file-section/full-file-section.component.ts

@@ -0,0 +1,47 @@
+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";
+import { FileSectionComponent } from "../../../simple/field-components/file-section/file-section.component";
+
+/**
+ * This component renders the file section of the item
+ * inside a 'ds-metadata-field-wrapper' component.
+ */
+
+@Component({
+    selector: 'ds-item-page-full-file-section',
+    templateUrl: './full-file-section.component.html'
+})
+export class FullFileSectionComponent extends FileSectionComponent implements OnInit {
+
+    @Input() item: Item;
+
+    files: Observable<Array<Observable<Bitstream>>>;
+
+    thumbnails: Map<string,  Observable<Bitstream>> = new Map();
+
+
+    universalInit() {
+    }
+
+    ngOnInit(): void {
+        super.ngOnInit();
+        this.files.subscribe(
+            files =>
+                files.forEach(
+                    file => {
+                        file.subscribe(
+                            original => {
+                                const thumbnail : Observable<Bitstream> = this.item.getThumbnailForOriginal(file);
+                                thumbnail.subscribe(t =>
+                                    console.log("TESTTTT" , t));
+                                this.thumbnails.set(original.id, thumbnail);
+                            }
+                        );
+                    }
+                )
+        )
+    }
+
+}

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

@@ -0,0 +1,16 @@
+<div class="item-page" *ngIf="item.hasSucceeded | async">
+    <ds-item-page-title-field [item]="item.payload | async"></ds-item-page-title-field>
+    <table class="table table-responsive table-striped">
+        <tbody>
+            <tr *ngFor="let metadatum of (metadata | async)">
+                  <td>{{metadatum.key}}</td>
+                  <td>{{metadatum.value}}</td>
+                  <td>{{metadatum.language}}</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <ds-item-page-full-file-section [item]="item.payload | async"></ds-item-page-full-file-section>
+
+    <ds-item-page-collections [item]="item.payload | async"></ds-item-page-collections>
+</div>

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

@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
-import { Item } from "../../core/shared/item.model";
-import { RemoteData } from "../../core/data/remote-data";
+import { Component } from '@angular/core';
 import { Observable } from "rxjs";
-import { Bitstream } from "../../core/shared/bitstream.model";
 import { ItemPageComponent } from "../simple/item-page.component";
 import { Metadatum } from "../../core/shared/metadatum.model";
+import { ItemDataService } from "../../core/data/item-data.service";
+import { ActivatedRoute } from "@angular/router";
+import { RemoteData } from "../../core/data/remote-data";
+import { Item } from "../../core/shared/item.model";
 
 /**
  * This component renders a simple item page.
@@ -19,7 +20,13 @@ import { Metadatum } from "../../core/shared/metadatum.model";
 })
 export class FullItemPageComponent extends ItemPageComponent {
 
-    metadata: Array<Metadatum>;
+    item: RemoteData<Item>;
+
+    metadata: Observable<Array<Metadatum>>;
+
+    constructor(route: ActivatedRoute, items: ItemDataService) {
+        super(route, items);
+    }
 
     universalInit() {
 
@@ -27,7 +34,7 @@ export class FullItemPageComponent extends ItemPageComponent {
 
     initialize(params) {
         super.initialize(params);
-        this.metadata = this.item.payload.flatMap(i => i.metadata);
+        this.metadata = this.item.payload.map(i => i.metadata);
     }
 
 }

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

@@ -8,7 +8,7 @@ import { FullItemPageComponent } from './full/full-item-page.component';
     imports: [
         RouterModule.forChild([
             { path: 'items/:id', pathMatch: 'full', component: ItemPageComponent },
-            { path: 'items/:id/full', pathMatch: 'full', component: FullItemPageComponent },
+            { path: 'items/:id/full', component: FullItemPageComponent },
         ])
     ]
 })

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

@@ -2,22 +2,25 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ItemPageComponent } from './simple/item-page.component';
 import { ItemPageRoutingModule } from './item-page-routing.module';
-import { MetadataValuesComponent } from './simple/metadata-values/metadata-values.component';
-import { MetadataUriValuesComponent } from './simple/metadata-uri-values/metadata-uri-values.component';
-import { MetadataFieldWrapperComponent } from './simple/metadata-field-wrapper/metadata-field-wrapper.component';
-import { ItemPageAuthorFieldComponent } from './simple/specific-field/author/item-page-author-field.component';
-import { ItemPageDateFieldComponent } from './simple/specific-field/date/item-page-date-field.component';
-import { ItemPageAbstractFieldComponent } from './simple/specific-field/abstract/item-page-abstract-field.component';
-import { ItemPageUriFieldComponent } from './simple/specific-field/uri/item-page-uri-field.component';
-import { ItemPageTitleFieldComponent } from './simple/specific-field/title/item-page-title-field.component';
-import { ItemPageSpecificFieldComponent } from './simple/specific-field/item-page-specific-field.component';
+import { MetadataValuesComponent } from './field-components/metadata-values/metadata-values.component';
+import { MetadataUriValuesComponent } from './field-components/metadata-uri-values/metadata-uri-values.component';
+import { MetadataFieldWrapperComponent } from './field-components/metadata-field-wrapper/metadata-field-wrapper.component';
+import { ItemPageAuthorFieldComponent } from './simple/field-components/specific-field/author/item-page-author-field.component';
+import { ItemPageDateFieldComponent } from './simple/field-components/specific-field/date/item-page-date-field.component';
+import { ItemPageAbstractFieldComponent } from './simple/field-components/specific-field/abstract/item-page-abstract-field.component';
+import { ItemPageUriFieldComponent } from './simple/field-components/specific-field/uri/item-page-uri-field.component';
+import { ItemPageTitleFieldComponent } from './simple/field-components/specific-field/title/item-page-title-field.component';
+import { ItemPageSpecificFieldComponent } from './simple/field-components/specific-field/item-page-specific-field.component';
 import { SharedModule } from './../shared/shared.module';
-import { FileSectionComponent } from "./simple/file-section/file-section.component";
-import { CollectionsComponent } from "./simple/collections/collections.component";
+import { FileSectionComponent } from "./simple/field-components/file-section/file-section.component";
+import { CollectionsComponent } from "./field-components/collections/collections.component";
+import { FullItemPageComponent } from "./full/full-item-page.component";
+import { FullFileSectionComponent } from "./full/field-components/file-section/full-file-section.component";
 
 @NgModule({
     declarations: [
         ItemPageComponent,
+        FullItemPageComponent,
         MetadataValuesComponent,
         MetadataUriValuesComponent,
         MetadataFieldWrapperComponent,
@@ -28,7 +31,8 @@ import { CollectionsComponent } from "./simple/collections/collections.component
         ItemPageTitleFieldComponent,
         ItemPageSpecificFieldComponent,
         FileSectionComponent,
-        CollectionsComponent
+        CollectionsComponent,
+        FullFileSectionComponent
     ],
     imports: [
         ItemPageRoutingModule,

src/app/item-page/simple/field-components/file-section/file-section.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Bitstream } from "../../../core/shared/bitstream.model";
-import { Item } from "../../../core/shared/item.model";
+import { Bitstream } from "../../../../core/shared/bitstream.model";
+import { Item } from "../../../../core/shared/item.model";
 import { Observable } from "rxjs";
 
 /**
@@ -18,7 +18,7 @@ export class FileSectionComponent implements OnInit {
 
   label : string = "item.page.files";
 
-  separator: string = "<br/>"
+  separator: string = "<br/>";
 
   files: Observable<Bitstream[]>;
 

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

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Item } from "../../../../core/shared/item.model";
+import { Component, Input } from '@angular/core';
+import { Item } from "../../../../../core/shared/item.model";
 import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.component";
 
 @Component({

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

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Item } from "../../../../core/shared/item.model";
+import { Component, Input } from '@angular/core';
+import { Item } from "../../../../../core/shared/item.model";
 import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.component";
 
 @Component({

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

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Item } from "../../../../core/shared/item.model";
+import { Component, Input } from '@angular/core';
+import { Item } from "../../../../../core/shared/item.model";
 import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.component";
 
 @Component({

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

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Item } from "../../../core/shared/item.model";
+import { Component, Input } from '@angular/core';
+import { Item } from "../../../../core/shared/item.model";
 
 /**
  * This component can be used to represent metadata on a simple item page.

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

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Item } from "../../../../core/shared/item.model";
+import { Component, Input } from '@angular/core';
+import { Item } from "../../../../../core/shared/item.model";
 import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.component";
 
 @Component({

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

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Item } from "../../../../core/shared/item.model";
+import { Component, Input } from '@angular/core';
+import { Item } from "../../../../../core/shared/item.model";
 import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.component";
 
 @Component({

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

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

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

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

src/backend/items.ts

@@ -16,9 +16,9 @@ export const ITEMS = [
         {
           "href": "/bundles/2355"
         },
-        // {
-        //   "href": "/bundles/5687"
-        // }
+        {
+          "href": "/bundles/5687"
+        }
       ]
     },
     "id": "8871",