From 18fb47c9b69e360abc76a204ed9102f566c68194 Mon Sep 17 00:00:00 2001
From: Raf Ponsaerts <raf.ponsaerts@atmire.com>
Date: Mon, 17 Aug 2020 10:14:05 +0200
Subject: [PATCH] [Task 72397] applied feedback on the file section and full
 file section components

---
 .../full-file-section.component.ts            | 41 ++++++++++---------
 .../file-section/file-section.component.html  |  6 +--
 .../file-section.component.spec.ts            |  4 +-
 .../file-section/file-section.component.ts    | 12 +++---
 4 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/app/+item-page/full/field-components/file-section/full-file-section.component.ts b/src/app/+item-page/full/field-components/file-section/full-file-section.component.ts
index 70950d9227..f8af73f55b 100644
--- a/src/app/+item-page/full/field-components/file-section/full-file-section.component.ts
+++ b/src/app/+item-page/full/field-components/file-section/full-file-section.component.ts
@@ -1,14 +1,15 @@
 import { Component, Input, OnInit } from '@angular/core';
-import {BehaviorSubject, Observable} from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { BitstreamDataService } from '../../../../core/data/bitstream-data.service';
 
 import { Bitstream } from '../../../../core/shared/bitstream.model';
 import { Item } from '../../../../core/shared/item.model';
 import { followLink } from '../../../../shared/utils/follow-link-config.model';
 import { FileSectionComponent } from '../../../simple/field-components/file-section/file-section.component';
-import {PaginationComponentOptions} from '../../../../shared/pagination/pagination-component-options.model';
-import {PaginatedList} from '../../../../core/data/paginated-list';
-import {RemoteData} from '../../../../core/data/remote-data';
+import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
+import { PaginatedList } from '../../../../core/data/paginated-list';
+import { RemoteData } from '../../../../core/data/remote-data';
+import { switchMap } from "rxjs/operators";
 
 /**
  * This component renders the file section of the item
@@ -55,23 +56,23 @@ export class FullFileSectionComponent extends FileSectionComponent implements On
   }
 
   initialize(): void {
-    this.originalCurrentPage$.subscribe((value) => {
-      this.originals$ = this.bitstreamDataService.findAllByItemAndBundleName(
-          this.item,
-          'ORIGINAL',
-          { elementsPerPage: this.pageSize, currentPage: value },
-          followLink( 'format')
-      );
-    });
+    this.originals$ = this.originalCurrentPage$.pipe(
+        switchMap((pageNumber: number) => this.bitstreamDataService.findAllByItemAndBundleName(
+            this.item,
+            'ORIGINAL',
+            { elementsPerPage: this.pageSize, currentPage: pageNumber },
+            followLink( 'format')
+        ))
+    );
 
-    this.licenseCurrentPage$.subscribe((value) => {
-      this.licenses$ = this.bitstreamDataService.findAllByItemAndBundleName(
-          this.item,
-          'LICENSE',
-          { elementsPerPage: this.pageSize, currentPage: value },
-          followLink( 'format')
-      );
-    });
+    this.licenses$ = this.licenseCurrentPage$.pipe(
+        switchMap((pageNumber: number) => this.bitstreamDataService.findAllByItemAndBundleName(
+            this.item,
+            'LICENSE',
+            { elementsPerPage: this.pageSize, currentPage: pageNumber },
+            followLink( 'format')
+        ))
+    );
 
   }
 
diff --git a/src/app/+item-page/simple/field-components/file-section/file-section.component.html b/src/app/+item-page/simple/field-components/file-section/file-section.component.html
index ecd64ec5ec..4a53f1d829 100644
--- a/src/app/+item-page/simple/field-components/file-section/file-section.component.html
+++ b/src/app/+item-page/simple/field-components/file-section/file-section.component.html
@@ -6,12 +6,12 @@
         <span>({{(file?.sizeBytes) | dsFileSize }})</span>
         <span *ngIf="!last" innerHTML="{{separator}}"></span>
       </ds-file-download-link>
-      <ds-loading *ngIf="isLoading" message="{{'loading.default' | translate}}"></ds-loading>
+      <ds-loading *ngIf="isLoading" message="{{'loading.default' | translate}}" [showMessage]="false"></ds-loading>
       <div *ngIf="!isLastPage" class="mt-1" id="view-more">
-        <a class="bitstream-view-more" [routerLink]="" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</a>
+        <a class="bitstream-view-more btn btn-outline-secondary btn-sm" [routerLink]="" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</a>
       </div>
       <div *ngIf="isLastPage && currentPage != 1" class="mt-1" id="view-less">
-        <a class="bitstream-view-less" [routerLink]="" (click)="currentPage = undefined; getNextPage();">{{'item.page.bitstreams.view-less' | translate}}</a>
+        <a class="bitstream-view-less btn btn-outline-secondary btn-sm" [routerLink]="" (click)="currentPage = undefined; getNextPage();">{{'item.page.bitstreams.view-less' | translate}}</a>
       </div>
     </div>
   </ds-metadata-field-wrapper>
diff --git a/src/app/+item-page/simple/field-components/file-section/file-section.component.spec.ts b/src/app/+item-page/simple/field-components/file-section/file-section.component.spec.ts
index 4f907a0b04..aac0fa108e 100644
--- a/src/app/+item-page/simple/field-components/file-section/file-section.component.spec.ts
+++ b/src/app/+item-page/simple/field-components/file-section/file-section.component.spec.ts
@@ -135,12 +135,12 @@ describe('FileSectionComponent', () => {
 
         it('should not contain a view more link', () => {
             const viewMore = fixture.debugElement.query(By.css('.bitstream-view-more'));
-            expect(viewMore).toBeFalsy();
+            expect(viewMore).toBeNull();
         })
 
         it('should contain a view less link', () => {
             const viewLess = fixture.debugElement.query(By.css('.bitstream-view-less'));
-            expect(viewLess).toBeTruthy();
+            expect(viewLess).toBeDefined();
         })
 
         it('clicking on the view less link should reset the pages and call getNextPage()', () => {
diff --git a/src/app/+item-page/simple/field-components/file-section/file-section.component.ts b/src/app/+item-page/simple/field-components/file-section/file-section.component.ts
index 11c5ff2917..6832556ff6 100644
--- a/src/app/+item-page/simple/field-components/file-section/file-section.component.ts
+++ b/src/app/+item-page/simple/field-components/file-section/file-section.component.ts
@@ -4,10 +4,10 @@ import { BitstreamDataService } from '../../../../core/data/bitstream-data.servi
 
 import { Bitstream } from '../../../../core/shared/bitstream.model';
 import { Item } from '../../../../core/shared/item.model';
-import {filter, takeWhile} from 'rxjs/operators';
-import {RemoteData} from '../../../../core/data/remote-data';
-import {hasNoValue, hasValue} from '../../../../shared/empty.util';
-import {PaginatedList} from '../../../../core/data/paginated-list';
+import { filter, takeWhile } from 'rxjs/operators';
+import { RemoteData } from '../../../../core/data/remote-data';
+import { hasNoValue, hasValue } from '../../../../shared/empty.util';
+import { PaginatedList } from '../../../../core/data/paginated-list';
 
 /**
  * This component renders the file section of the item
@@ -33,6 +33,8 @@ export class FileSectionComponent implements OnInit {
 
   isLastPage: boolean;
 
+  pageSize: number = 5;
+
   constructor(
     protected bitstreamDataService: BitstreamDataService
   ) {
@@ -56,7 +58,7 @@ export class FileSectionComponent implements OnInit {
     } else {
       this.currentPage++;
     }
-    this.bitstreamDataService.findAllByItemAndBundleName(this.item, 'ORIGINAL', { currentPage: this.currentPage }).pipe(
+    this.bitstreamDataService.findAllByItemAndBundleName(this.item, 'ORIGINAL', { currentPage: this.currentPage, elementsPerPage: this.pageSize }).pipe(
         filter((bitstreamsRD: RemoteData<PaginatedList<Bitstream>>) => hasValue(bitstreamsRD)),
         takeWhile((bitstreamsRD: RemoteData<PaginatedList<Bitstream>>) => hasNoValue(bitstreamsRD.payload) && hasNoValue(bitstreamsRD.error), true)
     ).subscribe((bitstreamsRD: RemoteData<PaginatedList<Bitstream>>) => {