Merge branch 'w2p-117573_remove-observable-function-calls-from-template-7.6' into dspace-8_x

src/app/shared/pagination/pagination.component.ts

@@ -10,9 +10,11 @@ import {
   Component,
   EventEmitter,
   Input,
+  OnChanges,
   OnDestroy,
   OnInit,
   Output,
+  SimpleChanges,
   ViewEncapsulation,
 } from '@angular/core';
 import {
@@ -28,6 +30,8 @@ import {
 } from 'rxjs';
 import {
   map,
+  startWith,
+  switchMap,
   take,
 } from 'rxjs/operators';
 
@@ -40,13 +44,21 @@ import { RemoteData } from '../../core/data/remote-data';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationRouteParams } from '../../core/pagination/pagination-route-params.interface';
 import { ViewMode } from '../../core/shared/view-mode.model';
-import { hasValue } from '../empty.util';
+import {
+  hasValue,
+  hasValueOperator,
+} from '../empty.util';
 import { HostWindowService } from '../host-window.service';
 import { ListableObject } from '../object-collection/shared/listable-object.model';
 import { RSSComponent } from '../rss-feed/rss.component';
 import { EnumKeysPipe } from '../utils/enum-keys-pipe';
 import { PaginationComponentOptions } from './pagination-component-options.model';
 
+interface PaginationDetails {
+  range: string;
+  total: number;
+}
+
 /**
  * The default pagination controls component.
  */
@@ -60,7 +72,7 @@ import { PaginationComponentOptions } from './pagination-component-options.model
   standalone: true,
   imports: [NgIf, NgbDropdownModule, NgFor, NgClass, RSSComponent, NgbPaginationModule, NgbTooltipModule, AsyncPipe, TranslateModule, EnumKeysPipe],
 })
-export class PaginationComponent implements OnDestroy, OnInit {
+export class PaginationComponent implements OnChanges, OnDestroy, OnInit {
   /**
    * ViewMode that should be passed to {@link ListableObjectComponentLoaderComponent}.
    */
@@ -205,6 +217,9 @@ export class PaginationComponent implements OnDestroy, OnInit {
   public sortField$: Observable<string>;
   public defaultSortField = 'name';
 
+
+  public showingDetails$: Observable<PaginationDetails>;
+
   /**
    * Array to track all subscriptions and unsubscribe them onDestroy
    * @type {Array}
@@ -233,6 +248,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.
    */
@@ -270,9 +291,11 @@ export class PaginationComponent implements OnDestroy, OnInit {
     );
   }
 
-  constructor(private cdRef: ChangeDetectorRef,
-              private paginationService: PaginationService,
-              public hostWindowService: HostWindowService) {
+  constructor(
+    protected cdRef: ChangeDetectorRef,
+    protected paginationService: PaginationService,
+    public hostWindowService: HostWindowService,
+  ) {
   }
 
   /**
@@ -326,25 +349,30 @@ 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(
-        map((currentPaginationOptions) => {
-          let lastItem: number;
-          const pageMax = currentPaginationOptions.pageSize * currentPaginationOptions.currentPage;
+  public getShowingDetails(collectionSize: number): Observable<PaginationDetails> {
+    return observableOf(collectionSize).pipe(
+      hasValueOperator(),
+      switchMap(() => this.paginationService.getCurrentPagination(this.id, this.paginationOptions)),
+      map((currentPaginationOptions) => {
+        let lastItem: number;
+        const pageMax = currentPaginationOptions.pageSize * currentPaginationOptions.currentPage;
 
-          const firstItem: number = currentPaginationOptions.pageSize * (currentPaginationOptions.currentPage - 1) + 1;
-          if (collectionSize > pageMax) {
-            lastItem = pageMax;
-          } else {
-            lastItem = collectionSize;
-          }
-          return { range: firstItem + ' - ' + lastItem, total: collectionSize };
-        }),
-      );
-    }
-    return showingDetails;
+        const firstItem: number = currentPaginationOptions.pageSize * (currentPaginationOptions.currentPage - 1) + 1;
+        if (collectionSize > pageMax) {
+          lastItem = pageMax;
+        } else {
+          lastItem = collectionSize;
+        }
+        return {
+          range: `${firstItem} - ${lastItem}`,
+          total: collectionSize,
+        };
+      }),
+      startWith({
+        range: `${null} - ${null}`,
+        total: null,
+      }),
+    );
   }
 
   /**