mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-07 10:04:11 +00:00
117287: Removed method calls returning observables from the pagination component
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
<div class="row">
|
||||
<div *ngIf="!hidePaginationDetail && collectionSize > 0" class="col-auto pagination-info">
|
||||
<span class="align-middle hidden-xs-down">{{ 'pagination.showing.label' | translate }}</span>
|
||||
<span class="align-middle">{{ 'pagination.showing.detail' | translate:(getShowingDetails(collectionSize)|async)}}</span>
|
||||
<span class="align-middle">{{ 'pagination.showing.detail' | translate:(showingDetails$ | async)}}</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div *ngIf="!hideGear" ngbDropdown #paginationControls="ngbDropdown" placement="bottom-right" class="d-inline-block float-right">
|
||||
|
@@ -4,27 +4,33 @@ import {
|
||||
Component,
|
||||
EventEmitter,
|
||||
Input,
|
||||
OnChanges,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
Output,
|
||||
ViewEncapsulation
|
||||
SimpleChanges,
|
||||
ViewEncapsulation,
|
||||
} from '@angular/core';
|
||||
|
||||
import { Observable, of as observableOf, Subscription } from 'rxjs';
|
||||
import { Observable, of as observableOf, Subscription, switchMap } from 'rxjs';
|
||||
|
||||
import { HostWindowService } from '../host-window.service';
|
||||
import { HostWindowState } from '../search/host-window.reducer';
|
||||
import { PaginationComponentOptions } from './pagination-component-options.model';
|
||||
import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
|
||||
import { hasValue } from '../empty.util';
|
||||
import { hasValue, hasValueOperator } from '../empty.util';
|
||||
import { PageInfo } from '../../core/shared/page-info.model';
|
||||
import { PaginationService } from '../../core/pagination/pagination.service';
|
||||
import { map, take } from 'rxjs/operators';
|
||||
import { map, take, startWith } 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';
|
||||
|
||||
interface PaginationDetails {
|
||||
range: string;
|
||||
total: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* The default pagination controls component.
|
||||
*/
|
||||
@@ -36,7 +42,7 @@ import { ViewMode } from '../../core/shared/view-mode.model';
|
||||
changeDetection: ChangeDetectionStrategy.Default,
|
||||
encapsulation: ViewEncapsulation.Emulated
|
||||
})
|
||||
export class PaginationComponent implements OnDestroy, OnInit {
|
||||
export class PaginationComponent implements OnChanges, OnDestroy, OnInit {
|
||||
/**
|
||||
* ViewMode that should be passed to {@link ListableObjectComponentLoaderComponent}.
|
||||
*/
|
||||
@@ -143,11 +149,6 @@ export class PaginationComponent implements OnDestroy, OnInit {
|
||||
*/
|
||||
public currentPageState: number = undefined;
|
||||
|
||||
/**
|
||||
* An observable of HostWindowState type
|
||||
*/
|
||||
public hostWindow: Observable<HostWindowState>;
|
||||
|
||||
/**
|
||||
* ID for the pagination instance. This ID is used in the routing to retrieve the pagination options.
|
||||
* This ID needs to be unique between different pagination components when more than one will be displayed on the same page.
|
||||
@@ -186,6 +187,9 @@ export class PaginationComponent implements OnDestroy, OnInit {
|
||||
public sortField$;
|
||||
public defaultSortField = 'name';
|
||||
|
||||
|
||||
public showingDetails$: Observable<PaginationDetails>;
|
||||
|
||||
/**
|
||||
* Array to track all subscriptions and unsubscribe them onDestroy
|
||||
* @type {Array}
|
||||
@@ -214,6 +218,12 @@ export class PaginationComponent implements OnDestroy, OnInit {
|
||||
this.initializeConfig();
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (changes.collectionSize.currentValue !== changes.collectionSize.previousValue) {
|
||||
this.showingDetails$ = this.getShowingDetails(this.collectionSize);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Method provided by Angular. Invoked when the instance is destroyed.
|
||||
*/
|
||||
@@ -251,19 +261,11 @@ export class PaginationComponent implements OnDestroy, OnInit {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param cdRef
|
||||
* ChangeDetectorRef is a singleton service provided by Angular.
|
||||
* @param route
|
||||
* Route is a singleton service provided by Angular.
|
||||
* @param router
|
||||
* Router is a singleton service provided by Angular.
|
||||
* @param hostWindowService
|
||||
* the HostWindowService singleton.
|
||||
*/
|
||||
constructor(private cdRef: ChangeDetectorRef,
|
||||
private paginationService: PaginationService,
|
||||
public hostWindowService: HostWindowService) {
|
||||
constructor(
|
||||
protected cdRef: ChangeDetectorRef,
|
||||
protected paginationService: PaginationService,
|
||||
public hostWindowService: HostWindowService,
|
||||
) {
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -299,17 +301,6 @@ export class PaginationComponent implements OnDestroy, OnInit {
|
||||
this.emitPaginationChange();
|
||||
}
|
||||
|
||||
/**
|
||||
* Method to change the route to the given sort field
|
||||
*
|
||||
* @param sortField
|
||||
* The sort field being navigated to.
|
||||
*/
|
||||
public doSortFieldChange(field: string) {
|
||||
this.updateParams({ pageId: this.id, page: 1, sortField: field });
|
||||
this.emitPaginationChange();
|
||||
}
|
||||
|
||||
/**
|
||||
* Method to emit a general pagination change event
|
||||
*/
|
||||
@@ -328,13 +319,13 @@ export class PaginationComponent implements OnDestroy, OnInit {
|
||||
/**
|
||||
* Method to get pagination details of the current viewed page.
|
||||
*/
|
||||
public getShowingDetails(collectionSize: number): Observable<any> {
|
||||
let showingDetails = observableOf({ range: null + ' - ' + null, total: null });
|
||||
if (collectionSize) {
|
||||
showingDetails = this.paginationService.getCurrentPagination(this.id, this.paginationOptions).pipe(
|
||||
public getShowingDetails(collectionSize: number): Observable<PaginationDetails> {
|
||||
return observableOf(collectionSize).pipe(
|
||||
hasValueOperator(),
|
||||
switchMap(() => this.paginationService.getCurrentPagination(this.id, this.paginationOptions)),
|
||||
map((currentPaginationOptions) => {
|
||||
let firstItem;
|
||||
let lastItem;
|
||||
let firstItem: number;
|
||||
let lastItem: number;
|
||||
const pageMax = currentPaginationOptions.pageSize * currentPaginationOptions.currentPage;
|
||||
|
||||
firstItem = currentPaginationOptions.pageSize * (currentPaginationOptions.currentPage - 1) + 1;
|
||||
@@ -343,12 +334,17 @@ export class PaginationComponent implements OnDestroy, OnInit {
|
||||
} else {
|
||||
lastItem = collectionSize;
|
||||
}
|
||||
return {range: firstItem + ' - ' + lastItem, total: collectionSize};
|
||||
})
|
||||
return {
|
||||
range: `${firstItem} - ${lastItem}`,
|
||||
total: collectionSize,
|
||||
};
|
||||
}),
|
||||
startWith({
|
||||
range: `${null} - ${null}`,
|
||||
total: null,
|
||||
}),
|
||||
);
|
||||
}
|
||||
return showingDetails;
|
||||
}
|
||||
|
||||
/**
|
||||
* Method to ensure options passed contains the required properties.
|
||||
|
Reference in New Issue
Block a user