41650: finished full item page

resources/i18n/en.json

@@ -12,8 +12,14 @@
       "date": "Date",
       "uri": "URI",
       "files": "Files",
-      "downloads": "Downloads",
+      "collections": "Collections",
-      "collections": "Collections"
+      "filesection": {
+        "download": "Download",
+        "name": "Name:",
+        "format": "Format:",
+        "size": "Size:",
+        "description": "Description:"
+      }
     }
   },
 

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

@@ -21,8 +21,14 @@ export class NormalizedBitstream extends NormalizedDSpaceObject {
     /**
      * The mime type of this Bitstream
      */
+    @autoserialize
     mimetype: string;
 
+    /**
+     * The format of this Bitstream
+     */
+    format: string;
+
     /**
      * The description of this Bitstream
      */

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

@@ -47,50 +47,40 @@ export class Item extends DSpaceObject {
      */
     getThumbnail(): Observable<Bitstream> {
         const bundle: Observable<Bundle> = this.getBundle("THUMBNAIL");
-        return bundle.flatMap(
+        return bundle
-            bundle => {
+            .filter(bundle => hasValue(bundle))
-                if (bundle != null) {
+            .flatMap(bundle => bundle.primaryBitstream.payload)
-                    return bundle.primaryBitstream.payload;
+            .startWith(undefined);
-                }
-                else {
-                    return Observable.of(undefined);
-                }
-            }
-        );
     }
 
     /**
      * 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...
+    getThumbnailForOriginal(original: Bitstream): Observable<Bitstream> { //returns obs of obs of bitstream instead...
         const bundle: Observable<Bundle> = this.getBundle("THUMBNAIL");
-        return bundle.map(
+        return bundle
-            bundle => {
+            .filter(bundle => hasValue(bundle))
-                if (bundle != null) {
+            .flatMap(bundle => bundle
-                    return bundle.bitstreams.find(
+                .bitstreams.payload.map(files => files
-                        file => {
+                    .find(thumbnail => thumbnail
-                            return Observable.combineLatest(
+                        .name.startsWith(original.name)
-                                original,
+                    )
-                                file.payload,
+                )
-                                (original, thumbnail) => {
+            )
-                                    return (thumbnail.name.startsWith(original.name));
+            .startWith(undefined);;
-                                });
-                        });
-                }
-            }
-        );
     }
 
     /**
      * 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
      */
-    getFiles(): Observable<Bitstream[]> {
+    getFiles(name: String = "ORIGINAL"): Observable<Bitstream[]> {
-        const bundle: Observable <Bundle> = this.getBundle("ORIGINAL");
+        const bundle: Observable <Bundle> = this.getBundle(name);
         return bundle
-          .filter(bundle => hasValue(bundle))
+            .filter(bundle => hasValue(bundle))
-          .flatMap(bundle => bundle.bitstreams.payload);
+            .flatMap(bundle => bundle.bitstreams.payload)
+            .startWith([]);
     }
 
     /**
@@ -105,7 +95,8 @@ export class Item extends DSpaceObject {
                 return bundles.find((bundle: Bundle) => {
                     return bundle.name === name
                 });
-            });
+            })
+            .startWith(undefined);
     }
 
 }

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

@@ -1,11 +1,29 @@
 <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 class="col-3">
-        <div>{{(file | async)?.name}}</div>
+            <ds-thumbnail [thumbnail]="thumbnails.get(file.id) | async"></ds-thumbnail>
-        <div>{{(file | async)?.findMetadata("dc.description")}}</div>
+        </div>
-        <div>{{((file | async)?.size) | dsFileSize }}</div>
+        <div class="col-7">
-        <a [href]="(file | async)?.retrieve">
+            <dl class="row">
-            {{"item.page.download" | translate}}
+                <dt class="col-md-4">{{"item.page.filesection.name" | translate}}</dt>
-        </a>
+                <dd class="col-md-8">{{file.name}}</dd>
+
+                <dt class="col-md-4">{{"item.page.filesection.size" | translate}}</dt>
+                <dd class="col-md-8">{{(file.size) | dsFileSize }}</dd>
+
+
+                <dt class="col-md-4">{{"item.page.filesection.format" | translate}}</dt>
+                <dd class="col-md-8">{{(file.mimetype)}}</dd>
+
+
+                <dt class="col-md-4">{{"item.page.filesection.description" | translate}}</dt>
+                <dd class="col-md-8">{{file.findMetadata("dc.description")}}</dd>
+            </dl>
+        </div>
+        <div class="col-2">
+            <a [href]="file.retrieve">
+                {{"item.page.filesection.download" | translate}}
+            </a>
+        </div>
     </div>
 </ds-metadata-field-wrapper>

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

@@ -0,0 +1,7 @@
+@import '../../../../../styles/variables.scss';
+@import '../../../../../../node_modules/bootstrap/scss/_variables.scss';
+@media screen and (min-width: map-get($grid-breakpoints, md)) {
+    dt {
+        text-align: right;
+    }
+}

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

@@ -3,6 +3,7 @@ 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";
+import { hasValue } from "../../../../shared/empty.util";
 
 /**
  * This component renders the file section of the item
@@ -11,13 +12,17 @@ import { FileSectionComponent } from "../../../simple/field-components/file-sect
 
 @Component({
     selector: 'ds-item-page-full-file-section',
+    styleUrls: ['./full-file-section.component.css'],
     templateUrl: './full-file-section.component.html'
 })
-export class FullFileSectionComponent extends FileSectionComponent implements OnInit {
+export class FullFileSectionComponent extends FileSectionComponent {
 
     @Input() item: Item;
 
-    files: Observable<Array<Observable<Bitstream>>>;
+    label : string;
+
+    files: Observable<Bitstream[]>;
+
 
     thumbnails: Map<string,  Observable<Bitstream>> = new Map();
 
@@ -25,20 +30,17 @@ export class FullFileSectionComponent extends FileSectionComponent implements On
     universalInit() {
     }
 
-    ngOnInit(): void {
+    initialize(): void {
-        super.ngOnInit();
+        const originals = this.item.getFiles("ORIGINAL");
+        const licenses = this.item.getFiles("LICENSE");
+        licenses.subscribe(licenses => console.log(licenses));
+        this.files = Observable.combineLatest(originals, licenses, (originals, licenses) => [...originals, ...licenses]);
         this.files.subscribe(
             files =>
                 files.forEach(
-                    file => {
+                    original => {
-                        file.subscribe(
+                        const thumbnail: Observable<Bitstream> = this.item.getThumbnailForOriginal(original);
-                            original => {
+                        this.thumbnails.set(original.id, thumbnail);
-                                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/simple/field-components/file-section/file-section.component.ts

@@ -24,15 +24,17 @@ export class FileSectionComponent implements OnInit {
 
   constructor() {
     this.universalInit();
-
   }
 
   universalInit() {
   }
 
   ngOnInit(): void {
+    this.initialize();
+  }
+
+  initialize(): void {
     this.files = this.item.getFiles();
   }
 
-
 }

src/backend/bitstreams.ts

@@ -42,5 +42,26 @@ export const BITSTREAMS = [
     ],
     "format": "JPEG",
     "mimetype": "image/jpeg"
+  },
+  {
+    "_links": {
+      "self": { "href": "/bitstreams/8934" },
+      "bundle": { "href": "/bundles/99f78e5e-3677-43b0-aaef-cddaa1a49092" },
+      "retrieve": { "href": "/rest/bitstreams/ba7d24f2-8fc7-4b8e-b7b6-6c32be1c12a6/retrieve" }
+    },
+    "id": "8934",
+    "uuid": "ba7d24f2-8fc7-4b8e-b7b6-6c32be1c12a6",
+    "name": "license.txt",
+    "size": 41183,
+    "checksum": {
+      "value": "8ad416e8a39e645020e13e06f1427814",
+      "algorithm": "MD5"
+    },
+    "metadata": [
+      { "key": "dc.title", "value": "license.txt", "language": null },
+      { "key": "dc.description", "value": "License", "language": "en" }
+    ],
+    "format": "Text",
+    "mimetype": "text/plain"
   }
 ];

src/backend/bundles.ts

@@ -36,5 +36,23 @@ export const BUNDLES = [
     "metadata": [
       { "key": "dc.title", "value": "THUMBNAIL", "language": "en" }
     ]
+  },
+  {
+    "_links": {
+      "self": { "href": "/bundles/8475" },
+      "items": [
+        { "href": "/items/8871" }
+      ],
+      "bitstreams": [
+        { "href": "/bitstreams/8934" },
+      ],
+      "primaryBitstream": { "href": "/bitstreams/8934" }
+    },
+    "id": "8475",
+    "uuid": "99f78e5e-3677-43b0-aaef-cddaa1a49092",
+    "name": "LICENSE",
+    "metadata": [
+      { "key": "dc.title", "value": "LICENSE", "language": "en" }
+    ]
   }
 ];

src/backend/items.ts

@@ -18,6 +18,9 @@ export const ITEMS = [
         },
         {
           "href": "/bundles/5687"
+        },
+        {
+          "href": "/bundles/8475"
         }
       ]
     },
@@ -109,9 +112,9 @@ export const ITEMS = [
         {
           "href": "/bundles/2355"
         },
-        // {
+        {
-        //   "href": "/bundles/5687"
+          "href": "/bundles/5687"
-        // }
+        }
       ]
     },
     "id": "9978",