[Task 72397] applied feedback on the file section and full file section components

This commit is contained in:
Raf Ponsaerts
2020-08-17 10:14:05 +02:00
parent 82d780b6c2
commit 18fb47c9b6
4 changed files with 33 additions and 30 deletions

View File

@@ -1,14 +1,15 @@
import { Component, Input, OnInit } from '@angular/core'; 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 { BitstreamDataService } from '../../../../core/data/bitstream-data.service';
import { Bitstream } from '../../../../core/shared/bitstream.model'; import { Bitstream } from '../../../../core/shared/bitstream.model';
import { Item } from '../../../../core/shared/item.model'; import { Item } from '../../../../core/shared/item.model';
import { followLink } from '../../../../shared/utils/follow-link-config.model'; import { followLink } from '../../../../shared/utils/follow-link-config.model';
import { FileSectionComponent } from '../../../simple/field-components/file-section/file-section.component'; import { FileSectionComponent } from '../../../simple/field-components/file-section/file-section.component';
import {PaginationComponentOptions} from '../../../../shared/pagination/pagination-component-options.model'; import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
import {PaginatedList} from '../../../../core/data/paginated-list'; import { PaginatedList } from '../../../../core/data/paginated-list';
import {RemoteData} from '../../../../core/data/remote-data'; import { RemoteData } from '../../../../core/data/remote-data';
import { switchMap } from "rxjs/operators";
/** /**
* This component renders the file section of the item * This component renders the file section of the item
@@ -55,23 +56,23 @@ export class FullFileSectionComponent extends FileSectionComponent implements On
} }
initialize(): void { initialize(): void {
this.originalCurrentPage$.subscribe((value) => { this.originals$ = this.originalCurrentPage$.pipe(
this.originals$ = this.bitstreamDataService.findAllByItemAndBundleName( switchMap((pageNumber: number) => this.bitstreamDataService.findAllByItemAndBundleName(
this.item, this.item,
'ORIGINAL', 'ORIGINAL',
{ elementsPerPage: this.pageSize, currentPage: value }, { elementsPerPage: this.pageSize, currentPage: pageNumber },
followLink( 'format') followLink( 'format')
); ))
}); );
this.licenseCurrentPage$.subscribe((value) => { this.licenses$ = this.licenseCurrentPage$.pipe(
this.licenses$ = this.bitstreamDataService.findAllByItemAndBundleName( switchMap((pageNumber: number) => this.bitstreamDataService.findAllByItemAndBundleName(
this.item, this.item,
'LICENSE', 'LICENSE',
{ elementsPerPage: this.pageSize, currentPage: value }, { elementsPerPage: this.pageSize, currentPage: pageNumber },
followLink( 'format') followLink( 'format')
); ))
}); );
} }

View File

@@ -6,12 +6,12 @@
<span>({{(file?.sizeBytes) | dsFileSize }})</span> <span>({{(file?.sizeBytes) | dsFileSize }})</span>
<span *ngIf="!last" innerHTML="{{separator}}"></span> <span *ngIf="!last" innerHTML="{{separator}}"></span>
</ds-file-download-link> </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"> <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>
<div *ngIf="isLastPage && currentPage != 1" class="mt-1" id="view-less"> <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>
</div> </div>
</ds-metadata-field-wrapper> </ds-metadata-field-wrapper>

View File

@@ -135,12 +135,12 @@ describe('FileSectionComponent', () => {
it('should not contain a view more link', () => { it('should not contain a view more link', () => {
const viewMore = fixture.debugElement.query(By.css('.bitstream-view-more')); const viewMore = fixture.debugElement.query(By.css('.bitstream-view-more'));
expect(viewMore).toBeFalsy(); expect(viewMore).toBeNull();
}) })
it('should contain a view less link', () => { it('should contain a view less link', () => {
const viewLess = fixture.debugElement.query(By.css('.bitstream-view-less')); 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()', () => { it('clicking on the view less link should reset the pages and call getNextPage()', () => {

View File

@@ -4,10 +4,10 @@ import { BitstreamDataService } from '../../../../core/data/bitstream-data.servi
import { Bitstream } from '../../../../core/shared/bitstream.model'; import { Bitstream } from '../../../../core/shared/bitstream.model';
import { Item } from '../../../../core/shared/item.model'; import { Item } from '../../../../core/shared/item.model';
import {filter, takeWhile} from 'rxjs/operators'; import { filter, takeWhile } from 'rxjs/operators';
import {RemoteData} from '../../../../core/data/remote-data'; import { RemoteData } from '../../../../core/data/remote-data';
import {hasNoValue, hasValue} from '../../../../shared/empty.util'; import { hasNoValue, hasValue } from '../../../../shared/empty.util';
import {PaginatedList} from '../../../../core/data/paginated-list'; import { PaginatedList } from '../../../../core/data/paginated-list';
/** /**
* This component renders the file section of the item * This component renders the file section of the item
@@ -33,6 +33,8 @@ export class FileSectionComponent implements OnInit {
isLastPage: boolean; isLastPage: boolean;
pageSize: number = 5;
constructor( constructor(
protected bitstreamDataService: BitstreamDataService protected bitstreamDataService: BitstreamDataService
) { ) {
@@ -56,7 +58,7 @@ export class FileSectionComponent implements OnInit {
} else { } else {
this.currentPage++; 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)), filter((bitstreamsRD: RemoteData<PaginatedList<Bitstream>>) => hasValue(bitstreamsRD)),
takeWhile((bitstreamsRD: RemoteData<PaginatedList<Bitstream>>) => hasNoValue(bitstreamsRD.payload) && hasNoValue(bitstreamsRD.error), true) takeWhile((bitstreamsRD: RemoteData<PaginatedList<Bitstream>>) => hasNoValue(bitstreamsRD.payload) && hasNoValue(bitstreamsRD.error), true)
).subscribe((bitstreamsRD: RemoteData<PaginatedList<Bitstream>>) => { ).subscribe((bitstreamsRD: RemoteData<PaginatedList<Bitstream>>) => {