hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1552 from 4Science/CST-5449

Browse Source 
[CST-5449] "Browse by" pages are missing "Now showing" contextual information
This commit is contained in:
Tim Donohue
2022-04-04 10:07:35 -05:00
committed by GitHub
parent c1e6976502 2ce744280b
commit 9c0fce3a7a
16 changed files with 475 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
View File

@@ -31,7 +31,6 @@
[sortConfig]="(currentSort$ |async)"
[type]="startsWithType"
[startsWithOptions]="startsWithOptions"
[enableArrows]="true"
(prev)="goPrev()"
(next)="goNext()">
</ds-browse-by>

34
src/app/shared/browse-by/browse-by.component.html
View File

@@ -1,42 +1,20 @@
<ng-container *ngVar="(objects$ | async) as objects">
<h3 [ngClass]="{'sr-only': parentname }" >{{title | translate}}</h3>
<h3 [ngClass]="{'sr-only': parentname }">{{title | translate}}</h3>
<ng-container *ngComponentOutlet="getStartsWithComponent(); injector: objectInjector;"></ng-container>
<div *ngIf="objects?.hasSucceeded && !objects?.isLoading && objects?.payload?.page.length > 0" @fadeIn>
<div *ngIf="!enableArrows">
<ds-viewable-collection
[config]="paginationConfig"
[sortConfig]="sortConfig"
[objects]="objects">
[showPaginator]="showPaginator"
[objects]="objects"
(prev)="goPrev()"
(next)="goNext()">
</ds-viewable-collection>
</div>
<div *ngIf="enableArrows">
<div class="row">
<div class="col-12">
<div *ngIf="!hideGear" ngbDropdown #paginationControls="ngbDropdown" placement="bottom-right" class="d-inline-block float-right">
<button class="btn btn-secondary" id="paginationControls" [title]="'pagination.options.description' | translate" [attr.aria-label]="'pagination.options.description' | translate" ngbDropdownToggle><i class="fas fa-cog" aria-hidden="true"></i></button>
<div id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" ngbDropdownMenu>
<h6 class="dropdown-header">{{ 'pagination.results-per-page' | translate}}</h6>
<button class="dropdown-item page-size-change" *ngFor="let item of paginationConfig?.pageSizeOptions" (click)="doPageSizeChange(item)"><i [ngClass]="{'invisible': item != paginationConfig?.pageSize}" class="fas fa-check" aria-hidden="true"></i> {{item}} </button>
<h6 class="dropdown-header">{{ 'pagination.sort-direction' | translate}}</h6>
<button class="dropdown-item sort-direction-change" *ngFor="let direction of (sortDirections | dsKeys)" (click)="doSortDirectionChange(direction.value)"><i [ngClass]="{'invisible': direction.value !== sortConfig?.direction}" class="fas fa-check" aria-hidden="true"></i> {{'sorting.' + direction.key | translate}} </button>
</div>
</div>
</div>
</div>
<ul class="list-unstyled">
<li *ngFor="let object of objects?.payload?.page" class="mt-4 mb-4">
<ds-listable-object-component-loader [object]="object" [viewMode]="viewMode"></ds-listable-object-component-loader>
</li>
</ul>
<div>
<button id="nav-prev" type="button" class="btn btn-outline-primary float-left" (click)="goPrev()" [disabled]="objects?.payload?.currentPage <= 1"><i class="fas fa-angle-left"></i> {{'browse.previous.button' |translate}}</button>
<button id="nav-next" type="button" class="btn btn-outline-primary float-right" (click)="goNext()" [disabled]="objects?.payload?.currentPage >= objects?.payload?.totalPages"><i class="fas fa-angle-right"></i> {{'browse.next.button' |translate}}</button>
</div>
</div>
</div>
<ds-loading *ngIf="!objects || objects?.isLoading" message="{{'loading.browse-by' | translate}}"></ds-loading>
<ds-error *ngIf="objects?.hasFailed" message="{{'error.browse-by' | translate}}"></ds-error>
<div *ngIf="!objects?.isLoading && objects?.payload?.page.length === 0" class="alert alert-info w-100" role="alert">
{{'browse.empty' | translate}}
</div>
</ng-container>

85
src/app/shared/browse-by/browse-by.component.spec.ts
View File

@@ -4,20 +4,17 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { By } from '@angular/platform-browser';
import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
import { of as observableOf } from 'rxjs';
import { SharedModule } from '../shared.module';
import { CommonModule } from '@angular/common';
import { Item } from '../../core/shared/item.model';
import { buildPaginatedList } from '../../core/data/paginated-list.model';
import { PageInfo } from '../../core/shared/page-info.model';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { StoreModule } from '@ngrx/store';
import { TranslateLoaderMock } from '../mocks/translate-loader.mock';
import { RouterTestingModule } from '@angular/router/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
import { createSuccessfulRemoteDataObject$ } from '../remote-data.utils';
import { storeModuleConfig } from '../../app.reducer';
import { PaginationService } from '../../core/pagination/pagination.service';
import { PaginationServiceStub } from '../testing/pagination-service.stub';
import { ListableObjectComponentLoaderComponent } from '../object-collection/shared/listable-object/listable-object-component-loader.component';
@@ -30,6 +27,9 @@ import {
import { BrowseEntry } from '../../core/shared/browse-entry.model';
import { ITEM } from '../../core/shared/item.resource-type';
import { ThemeService } from '../theme-support/theme.service';
import { SelectableListService } from '../object-list/selectable-list/selectable-list.service';
import { HostWindowServiceStub } from '../testing/host-window-service.stub';
import { HostWindowService } from '../host-window.service';
import SpyObj = jasmine.SpyObj;
@listableObjectComponent(BrowseEntry, ViewMode.ListElement, DEFAULT_CONTEXT, 'custom')
@@ -37,7 +37,8 @@ import SpyObj = jasmine.SpyObj;
selector: 'ds-browse-entry-list-element',
template: ''
})
class MockThemedBrowseEntryListElementComponent {}
class MockThemedBrowseEntryListElementComponent {
}
describe('BrowseByComponent', () => {
let comp: BrowseByComponent;
@@ -83,10 +84,7 @@ describe('BrowseByComponent', () => {
TestBed.configureTestingModule({
imports: [
CommonModule,
TranslateModule.forRoot(),
SharedModule,
NgbModule,
StoreModule.forRoot({}, storeModuleConfig),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
@@ -94,13 +92,15 @@ describe('BrowseByComponent', () => {
}
}),
RouterTestingModule,
BrowserAnimationsModule
NoopAnimationsModule
],
declarations: [],
providers: [
{provide: PaginationService, useValue: paginationService},
{provide: MockThemedBrowseEntryListElementComponent},
{ provide: PaginationService, useValue: paginationService },
{ provide: MockThemedBrowseEntryListElementComponent },
{ provide: ThemeService, useValue: themeService },
{ provide: SelectableListService, useValue: {} },
{ provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
@@ -129,66 +129,7 @@ describe('BrowseByComponent', () => {
expect(fixture.debugElement.query(By.css('ds-viewable-collection'))).toBeDefined();
});
describe('when enableArrows is true and objects are defined', () => {
beforeEach(() => {
comp.enableArrows = true;
comp.objects$ = mockItemsRD$;
comp.paginationConfig = paginationConfig;
comp.sortConfig = Object.assign(new SortOptions('dc.title', SortDirection.ASC));
fixture.detectChanges();
});
describe('when clicking the previous arrow button', () => {
beforeEach(() => {
spyOn(comp.prev, 'emit');
fixture.debugElement.query(By.css('#nav-prev')).triggerEventHandler('click', null);
fixture.detectChanges();
});
it('should emit a signal to the EventEmitter', () => {
expect(comp.prev.emit).toHaveBeenCalled();
});
});
describe('when clicking the next arrow button', () => {
beforeEach(() => {
spyOn(comp.next, 'emit');
fixture.debugElement.query(By.css('#nav-next')).triggerEventHandler('click', null);
fixture.detectChanges();
});
it('should emit a signal to the EventEmitter', () => {
expect(comp.next.emit).toHaveBeenCalled();
});
});
describe('when clicking a different page size', () => {
beforeEach(() => {
spyOn(comp.pageSizeChange, 'emit');
fixture.debugElement.query(By.css('.page-size-change')).triggerEventHandler('click', null);
fixture.detectChanges();
});
it('should call the updateRoute method from the paginationService', () => {
expect(paginationService.updateRoute).toHaveBeenCalledWith('test-pagination', {pageSize: paginationConfig.pageSizeOptions[0]});
});
});
describe('when clicking a different sort direction', () => {
beforeEach(() => {
spyOn(comp.sortDirectionChange, 'emit');
fixture.debugElement.query(By.css('.sort-direction-change')).triggerEventHandler('click', null);
fixture.detectChanges();
});
it('should call the updateRoute method from the paginationService', () => {
expect(paginationService.updateRoute).toHaveBeenCalledWith('test-pagination', {sortDirection: 'ASC'});
});
});
});
describe('when enableArrows is true and browseEntries are provided', () => {
describe('when showPaginator is true and browseEntries are provided', () => {
let browseEntries;
beforeEach(() => {
@@ -209,7 +150,7 @@ describe('BrowseByComponent', () => {
}),
];
comp.enableArrows = true;
comp.showPaginator = true;
comp.objects$ = createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), browseEntries));
comp.paginationConfig = paginationConfig;
comp.sortConfig = Object.assign(new SortOptions('dc.title', SortDirection.ASC));

12
src/app/shared/browse-by/browse-by.component.ts
View File

@@ -67,30 +67,30 @@ export class BrowseByComponent implements OnInit {
/**
* Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
*/
@Input() enableArrows = false;
@Input() showPaginator = false;
/**
* If enableArrows is set to true, should it hide the options gear?
* It is used to hide or show gear
*/
@Input() hideGear = false;
/**
* If enableArrows is set to true, emit when the previous button is clicked
* Emits event when prev button clicked
*/
@Output() prev = new EventEmitter<boolean>();
/**
* If enableArrows is set to true, emit when the next button is clicked
* Emits event when next button clicked
*/
@Output() next = new EventEmitter<boolean>();
/**
* If enableArrows is set to true, emit when the page size is changed
* Emits event when page size is changed
*/
@Output() pageSizeChange = new EventEmitter<number>();
/**
* If enableArrows is set to true, emit when the sort direction is changed
* Emits event when page sort direction is changed
*/
@Output() sortDirectionChange = new EventEmitter<SortDirection>();

5
src/app/shared/object-collection/object-collection.component.html
View File

@@ -6,6 +6,7 @@
[linkType]="linkType"
[context]="context"
[hidePaginationDetail]="hidePaginationDetail"
[showPaginator]="showPaginator"
(paginationChange)="onPaginationChange($event)"
(pageChange)="onPageChange($event)"
(pageSizeChange)="onPageSizeChange($event)"
@@ -19,6 +20,8 @@
[importConfig]="importConfig"
(importObject)="importObject.emit($event)"
(contentChange)="contentChange.emit()"
(prev)="goPrev()"
(next)="goNext()"
*ngIf="(currentMode$ | async) === viewModeEnum.ListElement">
</ds-object-list>
@@ -29,6 +32,7 @@
[linkType]="linkType"
[context]="context"
[hidePaginationDetail]="hidePaginationDetail"
[showPaginator]="showPaginator"
(paginationChange)="onPaginationChange($event)"
(pageChange)="onPageChange($event)"
(pageSizeChange)="onPageSizeChange($event)"
@@ -44,6 +48,7 @@
[linkType]="linkType"
[context]="context"
[hidePaginationDetail]="hidePaginationDetail"
[showPaginator]="showPaginator"
*ngIf="(currentMode$ | async) === viewModeEnum.DetailedListElement">
</ds-object-detail>

29
src/app/shared/object-collection/object-collection.component.ts
View File

@@ -88,6 +88,11 @@ export class ObjectCollectionComponent implements OnInit {
*/
@Input() hidePaginationDetail = false;
/**
* Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
*/
@Input() showPaginator = true;
/**
* the page info of the list
*/
@@ -122,6 +127,16 @@ export class ObjectCollectionComponent implements OnInit {
*/
@Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
/**
* If showPaginator is set to true, emit when the previous button is clicked
*/
@Output() prev = new EventEmitter<boolean>();
/**
* If showPaginator is set to true, emit when the next button is clicked
*/
@Output() next = new EventEmitter<boolean>();
/**
* Emits the current view mode
*/
@@ -192,4 +207,18 @@ export class ObjectCollectionComponent implements OnInit {
this.paginationChange.emit(event);
}
/**
* Go to the previous page
*/
goPrev() {
this.prev.emit(true);
}
/**
* Go to the next page
*/
goNext() {
this.next.emit(true);
}
}

7
src/app/shared/object-detail/object-detail.component.html
View File

@@ -3,14 +3,19 @@
[pageInfoState]="objects?.payload"
[collectionSize]="objects?.payload?.totalElements"
[sortOptions]="sortConfig"
[objects]="objects"
[hideGear]="hideGear"
[hidePaginationDetail]="hidePaginationDetail"
[hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
[showPaginator]="showPaginator"
(pageChange)="onPageChange($event)"
(pageSizeChange)="onPageSizeChange($event)"
(sortDirectionChange)="onSortDirectionChange($event)"
(sortFieldChange)="onSortFieldChange($event)"
(paginationChange)="onPaginationChange($event)">
(paginationChange)="onPaginationChange($event)"
(prev)="goPrev()"
(next)="goNext()"
>
<div class="row mt-2" *ngIf="objects?.hasSucceeded" @fadeIn>
<div class="col"
*ngFor="let object of objects?.payload?.page">

29
src/app/shared/object-detail/object-detail.component.ts
View File

@@ -66,6 +66,21 @@ export class ObjectDetailComponent {
*/
@Input() context: Context;
/**
* Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
*/
@Input() showPaginator = true;
/**
* If showPaginator is set to true, emit when the previous button is clicked
*/
@Output() prev = new EventEmitter<boolean>();
/**
* If showPaginator is set to true, emit when the next button is clicked
*/
@Output() next = new EventEmitter<boolean>();
/**
* The list of objects to paginate
*/
@@ -168,4 +183,18 @@ export class ObjectDetailComponent {
this.paginationChange.emit(event);
}
/**
* Go to the previous page
*/
goPrev() {
this.prev.emit(true);
}
/**
* Go to the next page
*/
goNext() {
this.next.emit(true);
}
}

8
src/app/shared/object-grid/object-grid.component.html
View File

@@ -4,13 +4,18 @@
[collectionSize]="objects?.payload?.totalElements"
[sortOptions]="sortConfig"
[hideGear]="hideGear"
[objects]="objects"
[hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
[hidePaginationDetail]="hidePaginationDetail"
[showPaginator]="showPaginator"
(pageChange)="onPageChange($event)"
(pageSizeChange)="onPageSizeChange($event)"
(sortDirectionChange)="onSortDirectionChange($event)"
(sortFieldChange)="onSortFieldChange($event)"
(paginationChange)="onPaginationChange($event)">
(paginationChange)="onPaginationChange($event)"
(prev)="goPrev()"
(next)="goNext()"
>
<div class="card-columns row" *ngIf="objects?.hasSucceeded">
<div class="card-column col col-sm-6 col-lg-4" *ngFor="let column of (columns$ | async)" @fadeIn>
<div class="card-element" *ngFor="let object of column" data-test="grid-object">
@@ -22,3 +27,4 @@
<ds-loading *ngIf="objects.isLoading" message="{{'loading.objects' | translate}}"></ds-loading>
</ds-pagination>

30
src/app/shared/object-grid/object-grid.component.ts
View File

@@ -49,6 +49,11 @@ export class ObjectGridComponent implements OnInit {
*/
@Input() sortConfig: SortOptions;
/**
* Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
*/
@Input() showPaginator = true;
/**
* The whether or not the gear is hidden
*/
@@ -134,6 +139,17 @@ export class ObjectGridComponent implements OnInit {
* Event's payload equals to the newly selected sort field.
*/
@Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
/**
* If showPaginator is set to true, emit when the previous button is clicked
*/
@Output() prev = new EventEmitter<boolean>();
/**
* If showPaginator is set to true, emit when the next button is clicked
*/
@Output() next = new EventEmitter<boolean>();
data: any = {};
columns$: Observable<ListableObject[]>;
@@ -225,4 +241,18 @@ export class ObjectGridComponent implements OnInit {
this.paginationChange.emit(event);
}
/**
* Go to the previous page
*/
goPrev() {
this.prev.emit(true);
}
/**
* Go to the next page
*/
goNext() {
this.next.emit(true);
}
}

7
src/app/shared/object-list/object-list.component.html
View File

@@ -2,15 +2,20 @@
[paginationOptions]="config"
[pageInfoState]="objects?.payload"
[collectionSize]="objects?.payload?.totalElements"
[objects]="objects"
[sortOptions]="sortConfig"
[hideGear]="hideGear"
[hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
[hidePaginationDetail]="hidePaginationDetail"
[showPaginator]="showPaginator"
(pageChange)="onPageChange($event)"
(pageSizeChange)="onPageSizeChange($event)"
(sortDirectionChange)="onSortDirectionChange($event)"
(sortFieldChange)="onSortFieldChange($event)"
(paginationChange)="onPaginationChange($event)">
(paginationChange)="onPaginationChange($event)"
(prev)="goPrev()"
(next)="goNext()"
>
<ul *ngIf="objects?.hasSucceeded" class="list-unstyled" [ngClass]="{'ml-4': selectable}">
<li *ngFor="let object of objects?.payload?.page; let i = index; let last = last" class="mt-4 mb-4 d-flex" [class.border-bottom]="hasBorder && !last" data-test="list-object">
<ds-selectable-list-item-control *ngIf="selectable" [index]="i"

29
src/app/shared/object-list/object-list.component.ts
View File

@@ -76,11 +76,26 @@ export class ObjectListComponent {
*/
@Input() importConfig: { importLabel: string };
/**
* Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
*/
@Input() showPaginator = true;
/**
* Emit when one of the listed object has changed.
*/
@Output() contentChange = new EventEmitter<any>();
/**
* If showPaginator is set to true, emit when the previous button is clicked
*/
@Output() prev = new EventEmitter<boolean>();
/**
* If showPaginator is set to true, emit when the next button is clicked
*/
@Output() next = new EventEmitter<boolean>();
/**
* The current listable objects
*/
@@ -192,4 +207,18 @@ export class ObjectListComponent {
onPaginationChange(event) {
this.paginationChange.emit(event);
}
/**
* Go to the previous page
*/
goPrev() {
this.prev.emit(true);
}
/**
* Go to the next page
*/
goNext() {
this.next.emit(true);
}
}

20
src/app/shared/pagination/pagination.component.html
View File

@@ -20,7 +20,8 @@
</div>
<ng-content></ng-content>
<div *ngIf="shouldShowBottomPager |async" class="pagination justify-content-center clearfix bottom">
<div *ngIf="shouldShowBottomPager | async">
<div *ngIf="showPaginator" class="pagination justify-content-center clearfix bottom">
<ngb-pagination [boundaryLinks]="paginationOptions.boundaryLinks"
[collectionSize]="collectionSize"
[disabled]="paginationOptions.disabled"
@@ -30,6 +31,21 @@
(pageChange)="doPageChange($event)"
[pageSize]="(pageSize$ |async)"
[rotate]="paginationOptions.rotate"
[size]="(isXs)?'sm':paginationOptions.size"></ngb-pagination>
[size]="(isXs)?'sm':paginationOptions.size">
</ngb-pagination>
</div>
<div *ngIf="!showPaginator" class="d-flex justify-content-between">
<button id="nav-prev" type="button" class="btn btn-outline-primary float-left"
(click)="goPrev()"
[disabled]="objects?.payload?.currentPage <= 1">
<i class="fas fa-angle-left"></i> {{'pagination.previous.button' |translate}}
</button>
<button id="nav-next" type="button" class="btn btn-outline-primary float-right"
(click)="goNext()"
[disabled]="objects?.payload?.currentPage >= objects?.payload?.totalPages">
<i class="fas fa-angle-right"></i> {{'pagination.next.button' |translate}}
</button>
</div>
</div>
</div>

96
src/app/shared/pagination/pagination.component.spec.ts
View File

@@ -177,6 +177,7 @@ describe('Pagination component', () => {
}));
describe('when showPaginator is false', () => {
// synchronous beforeEach
beforeEach(() => {
html = `
@@ -185,16 +186,15 @@ describe('Pagination component', () => {
[sortOptions]='sortOptions'
[collectionSize]='collectionSize'
(pageChange)='pageChanged($event)'
(pageSizeChange)='pageSizeChanged($event)'>
(pageSizeChange)='pageSizeChanged($event)'
>
<ul>
<li *ngFor='let item of collection | paginate: { itemsPerPage: paginationOptions.pageSize,
currentPage: paginationOptions.currentPage, totalItems: collectionSize }'> {{item}} </li>
</ul>
</ds-pagination>`;
testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
testComp = testFixture.componentInstance;
});
it('should create Pagination Component', inject([PaginationComponent], (app: PaginationComponent) => {
@@ -303,6 +303,80 @@ describe('Pagination component', () => {
expect(de.nativeElement.classList.contains('pagination-sm')).toBeTruthy();
});
});
});
describe('when showPaginator is true', () => {
// synchronous beforeEach
beforeEach(() => {
html = `
<ds-pagination #p='paginationComponent'
[paginationOptions]='paginationOptions'
[sortOptions]='sortOptions'
[collectionSize]='collectionSize'
(pageChange)='pageChanged($event)'
(pageSizeChange)='pageSizeChanged($event)'
[showPaginator]='false'
[objects]='objects'
(prev)="goPrev()"
(next)="goNext()"
>
<ul>
<li *ngFor='let item of collection | paginate: { itemsPerPage: paginationOptions.pageSize,
currentPage: paginationOptions.currentPage, totalItems: collectionSize }'> {{item}} </li>
</ul>
</ds-pagination>`;
testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
testComp = testFixture.componentInstance;
});
beforeEach(() => {
testComp.showPaginator = false;
testFixture.detectChanges();
});
describe('when clicking the previous arrow button', () => {
beforeEach(() => {
spyOn(testComp, 'goPrev');
testFixture.detectChanges();
});
it('should call goPrev method', () => {
const prev = testFixture.debugElement.query(By.css('#nav-prev'));
testFixture.detectChanges();
prev.triggerEventHandler('click', null);
expect(testComp.goPrev).toHaveBeenCalled();
});
});
describe('when clicking the next arrow button', () => {
beforeEach(() => {
spyOn(testComp, 'goNext');
testFixture.detectChanges();
});
it('should call goNext method', () => {
const next = testFixture.debugElement.query(By.css('#nav-next'));
testFixture.detectChanges();
next.triggerEventHandler('click', null);
expect(testComp.goNext).toHaveBeenCalled();
});
});
describe('check for prev and next button', () => {
it('shoud have a previous button', () => {
const prev = testFixture.debugElement.query(By.css('#nav-prev'));
testFixture.detectChanges();
expect(prev).toBeTruthy();
});
it('shoud have a next button', () => {
const next = testFixture.debugElement.query(By.css('#nav-next'));
testFixture.detectChanges();
expect(next).toBeTruthy();
});
});
});
});
// declare a test component
@@ -313,11 +387,19 @@ class TestComponent {
collectionSize: number;
paginationOptions = new PaginationComponentOptions();
sortOptions = new SortOptions('dc.title', SortDirection.ASC);
showPaginator: boolean;
objects = {
payload: {
currentPage: 2,
totalPages: 100
}
};
constructor() {
this.collection = Array.from(new Array(100), (x, i) => `item ${i + 1}`);
this.collectionSize = 100;
this.paginationOptions.id = 'test';
this.showPaginator = false;
}
pageChanged(page) {
@@ -327,4 +409,12 @@ class TestComponent {
pageSizeChanged(pageSize) {
this.paginationOptions.pageSize = pageSize;
}
goPrev() {
this.objects.payload.currentPage --;
}
goNext() {
this.objects.payload.currentPage ++;
}
}

67
src/app/shared/pagination/pagination.component.ts
View File

@@ -19,7 +19,11 @@ import { SortDirection, SortOptions } from '../../core/cache/models/sort-options
import { hasValue } from '../empty.util';
import { PageInfo } from '../../core/shared/page-info.model';
import { PaginationService } from '../../core/pagination/pagination.service';
import { map } from 'rxjs/operators';
import { map, take } from 'rxjs/operators';
import { RemoteData } from '../../core/data/remote-data';
import { PaginatedList } from '../../core/data/paginated-list.model';
import { ListableObject } from '../object-collection/shared/listable-object.model';
import { ViewMode } from '../../core/shared/view-mode.model';
/**
* The default pagination controls component.
@@ -33,6 +37,11 @@ import { map } from 'rxjs/operators';
encapsulation: ViewEncapsulation.Emulated
})
export class PaginationComponent implements OnDestroy, OnInit {
/**
* ViewMode that should be passed to {@link ListableObjectComponentLoaderComponent}.
*/
viewMode: ViewMode = ViewMode.ListElement;
/**
* Number of items in collection.
*/
@@ -53,6 +62,26 @@ export class PaginationComponent implements OnDestroy, OnInit {
*/
@Input() sortOptions: SortOptions;
/**
* Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
*/
@Input() showPaginator = true;
/**
* The current pagination configuration
*/
@Input() config?: PaginationComponentOptions;
/**
* The list of listable objects to render in this component
*/
@Input() objects: RemoteData<PaginatedList<ListableObject>>;
/**
* The current sorting configuration
*/
@Input() sortConfig: SortOptions;
/**
* An event fired when the page is changed.
* Event's payload equals to the newly selected page.
@@ -163,6 +192,15 @@ export class PaginationComponent implements OnDestroy, OnInit {
*/
private subs: Subscription[] = [];
/**
* If showPaginator is set to true, emit when the previous button is clicked
*/
@Output() prev = new EventEmitter<boolean>();
/**
* If showPaginator is set to true, emit when the next button is clicked
*/
@Output() next = new EventEmitter<boolean>();
/**
* Method provided by Angular. Invoked after the constructor.
*/
@@ -347,4 +385,31 @@ export class PaginationComponent implements OnDestroy, OnInit {
map((hasMultiplePages) => hasMultiplePages || !this.hidePagerWhenSinglePage)
);
}
/**
* Go to the previous page
*/
goPrev() {
this.prev.emit(true);
this.updatePagination(-1);
}
/**
* Go to the next page
*/
goNext() {
this.next.emit(true);
this.updatePagination(1);
}
/**
* Update page when next or prev button is clicked
* @param value
*/
updatePagination(value: number) {
this.paginationService.getCurrentPagination(this.id, this.paginationOptions).pipe(take(1)).subscribe((currentPaginationOptions) => {
this.updateParams({page: (currentPaginationOptions.currentPage + value).toString()});
});
}
}

4
src/assets/i18n/en.json5
View File

@@ -678,9 +678,9 @@
"browse.metadata.title.breadcrumbs": "Browse by Title",
"browse.next.button": "Next",
"pagination.next.button": "Next",
"browse.previous.button": "Previous",
"pagination.previous.button": "Previous",
"browse.startsWith.choose_start": "(Choose start)",