Merge pull request #2968 from alexandrevryghem/fix-broken-item-mapper-pagination_contribute-7_x

[Port dspace-7_x] Fixed pagination issues on item mapper
2025-10-07 10:04:11 +00:00 · 2024-04-22 12:13:02 -05:00
parent 7a5694347a 7e6f736b2f
commit c794e1ebde
25 changed files with 96 additions and 114 deletions
--- a/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html
+++ b/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html
@@ -37,7 +37,6 @@
            <ng-template ngbNavContent>
              <ds-pagination
                [paginationOptions]="(paginationOptions$ | async)"
-                [pageInfoState]="(objectsSelected$|async)?.payload.pageInfo"
                [collectionSize]="(objectsSelected$|async)?.payload?.totalElements"
                [objects]="(objectsSelected$|async)"
                [showPaginator]="false"
--- a/src/app/access-control/epeople-registry/epeople-registry.component.html
+++ b/src/app/access-control/epeople-registry/epeople-registry.component.html
@@ -45,7 +45,6 @@
      <ds-pagination
        *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(searching$ | async)"
        [paginationOptions]="config"
-        [pageInfoState]="pageInfoState$"
        [collectionSize]="(pageInfoState$ | async)?.totalElements"
        [hideGear]="true"
        [hidePagerWhenSinglePage]="true">
--- a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
+++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
@@ -52,7 +52,6 @@
        <ds-pagination
          *ngIf="(groups | async)?.payload?.totalElements > 0"
          [paginationOptions]="config"
-          [pageInfoState]="(groups | async)?.payload"
          [collectionSize]="(groups | async)?.payload?.totalElements"
          [hideGear]="true"
          [hidePagerWhenSinglePage]="true"
--- a/src/app/access-control/group-registry/group-form/members-list/members-list.component.html
+++ b/src/app/access-control/group-registry/group-form/members-list/members-list.component.html
@@ -5,7 +5,6 @@

  <ds-pagination *ngIf="(ePeopleMembersOfGroup | async)?.totalElements > 0"
                 [paginationOptions]="config"
-                 [pageInfoState]="(ePeopleMembersOfGroup | async)"
                 [collectionSize]="(ePeopleMembersOfGroup | async)?.totalElements"
                 [hideGear]="true"
                 [hidePagerWhenSinglePage]="true">
@@ -86,7 +85,6 @@

  <ds-pagination *ngIf="(ePeopleSearch | async)?.totalElements > 0"
                 [paginationOptions]="configSearch"
-                 [pageInfoState]="(ePeopleSearch | async)"
                 [collectionSize]="(ePeopleSearch | async)?.totalElements"
                 [hideGear]="true"
                 [hidePagerWhenSinglePage]="true">
--- a/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html
+++ b/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html
@@ -5,7 +5,6 @@

  <ds-pagination *ngIf="(subGroups$ | async)?.payload?.totalElements > 0"
                 [paginationOptions]="config"
-                 [pageInfoState]="(subGroups$ | async)?.payload"
                 [collectionSize]="(subGroups$ | async)?.payload?.totalElements"
                 [hideGear]="true"
                 [hidePagerWhenSinglePage]="true">
@@ -84,7 +83,6 @@

  <ds-pagination *ngIf="(searchResults$ | async)?.payload?.totalElements > 0"
                 [paginationOptions]="configSearch"
-                 [pageInfoState]="(searchResults$ | async)?.payload"
                 [collectionSize]="(searchResults$ | async)?.payload?.totalElements"
                 [hideGear]="true"
                 [hidePagerWhenSinglePage]="true">
--- a/src/app/access-control/group-registry/groups-registry.component.html
+++ b/src/app/access-control/group-registry/groups-registry.component.html
@@ -37,7 +37,6 @@
      <ds-pagination
        *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(loading$ | async)"
        [paginationOptions]="config"
-        [pageInfoState]="pageInfoState$"
        [collectionSize]="(pageInfoState$ | async)?.totalElements"
        [hideGear]="true"
        [hidePagerWhenSinglePage]="true">
--- a/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
+++ b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
@@ -11,7 +11,6 @@
      <ds-pagination
        *ngIf="(bitstreamFormats | async)?.payload?.totalElements > 0"
        [paginationOptions]="pageConfig"
-        [pageInfoState]="(bitstreamFormats | async)?.payload"
        [collectionSize]="(bitstreamFormats | async)?.payload?.totalElements"
        [hideGear]="false"
        [hidePagerWhenSinglePage]="true">
--- a/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
+++ b/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
@@ -16,7 +16,6 @@
        <ds-pagination
          *ngIf="fields?.totalElements > 0"
          [paginationOptions]="config"
-          [pageInfoState]="fields"
          [collectionSize]="fields?.totalElements"
          [hideGear]="false"
          [hidePagerWhenSinglePage]="true">
--- a/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.ts
+++ b/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.ts
@@ -144,7 +144,9 @@ export class CollectionItemMapperComponent implements OnInit {
          this.shouldUpdate$.next(false);
        }
        return this.itemDataService.findListByHref(collectionRD.payload._links.mappedItems.href, Object.assign(options, {
-          sort: this.defaultSortOptions
+          currentPage: options.pagination.currentPage,
+          elementsPerPage: options.pagination.pageSize,
+          sort: this.defaultSortOptions,
        }),!shouldUpdate, false, followLink('owningCollection')).pipe(
          getAllSucceededRemoteData()
        );
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.html
@@ -3,7 +3,6 @@
               [hidePagerWhenSinglePage]="true"
               [hidePaginationDetail]="true"
               [paginationOptions]="options"
-               [pageInfoState]="(objectsRD$ | async)?.payload"
               [collectionSize]="(objectsRD$ | async)?.payload?.totalElements">
  <ng-container *ngIf="!(loading$ | async)">
    <div [id]="bundle.id" class="bundle-bitstreams-list"
--- a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html
+++ b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html
@@ -10,7 +10,6 @@
        <ng-container *ngVar="updates | dsObjectValues as updateValues">
          <ds-pagination
            [paginationOptions]="paginationConfig"
-            [pageInfoState]="(relationshipsRd$ | async)?.payload?.pageInfo"
            [collectionSize]="(relationshipsRd$ | async)?.payload?.totalElements + (this.nbAddedFields$ | async)"
            [hideGear]="true"
            [hidePagerWhenSinglePage]="true">
--- a/src/app/item-page/full/field-components/file-section/full-file-section.component.html
+++ b/src/app/item-page/full/field-components/file-section/full-file-section.component.html
@@ -6,7 +6,6 @@
                           [hideGear]="true"
                           [hidePagerWhenSinglePage]="true"
                           [paginationOptions]="originalOptions"
-                           [pageInfoState]="originals"
                           [collectionSize]="originals?.totalElements"
                           [retainScrollPosition]="true">

@@ -49,7 +48,6 @@
                           [hideGear]="true"
                           [hidePagerWhenSinglePage]="true"
                           [paginationOptions]="licenseOptions"
-                           [pageInfoState]="licenses"
                           [collectionSize]="licenses?.totalElements"
                           [retainScrollPosition]="true">

--- a/src/app/item-page/versions/item-versions.component.html
+++ b/src/app/item-page/versions/item-versions.component.html
@@ -10,7 +10,6 @@
                     [hideGear]="true"
                     [hidePagerWhenSinglePage]="true"
                     [paginationOptions]="options"
-                     [pageInfoState]="versions"
                     [collectionSize]="versions?.totalElements"
                     [retainScrollPosition]="true">
        <table class="table table-striped table-bordered align-middle my-2">
--- a/src/app/process-page/overview/process-overview.component.html
+++ b/src/app/process-page/overview/process-overview.component.html
@@ -17,7 +17,6 @@
    </div>
    <ds-pagination *ngIf="(processesRD$ | async)?.payload?.totalElements > 0"
                   [paginationOptions]="pageConfig"
-                   [pageInfoState]="(processesRD$ | async)?.payload"
                   [collectionSize]="(processesRD$ | async)?.payload?.totalElements"
                   [hideGear]="true"
                   [hidePagerWhenSinglePage]="true">
--- a/src/app/shared/object-detail/object-detail.component.html
+++ b/src/app/shared/object-detail/object-detail.component.html
@@ -1,6 +1,5 @@
 <ds-pagination
  [paginationOptions]="config"
-  [pageInfoState]="objects?.payload"
  [collectionSize]="objects?.payload?.totalElements"
  [sortOptions]="sortConfig"
  [objects]="objects"
--- a/src/app/shared/object-grid/object-grid.component.html
+++ b/src/app/shared/object-grid/object-grid.component.html
@@ -1,6 +1,5 @@
 <ds-pagination
  [paginationOptions]="config"
-  [pageInfoState]="objects?.payload"
  [collectionSize]="objects?.payload?.totalElements"
  [sortOptions]="sortConfig"
  [hideGear]="hideGear"
--- a/src/app/shared/object-list/object-list.component.html
+++ b/src/app/shared/object-list/object-list.component.html
@@ -1,6 +1,5 @@
 <ds-pagination
        [paginationOptions]="config"
-        [pageInfoState]="objects?.payload"
        [collectionSize]="objects?.payload?.totalElements"
        [objects]="objects"
        [sortOptions]="sortConfig"
--- a/src/app/shared/object-select/collection-select/collection-select.component.html
+++ b/src/app/shared/object-select/collection-select/collection-select.component.html
@@ -3,7 +3,6 @@
    *ngIf="collectionsRD?.payload?.totalElements > 0 || collectionsRD?.payload?.page?.length > 0"
    [paginationOptions]="paginationOptions"
    [sortOptions]="sortOptions"
-    [pageInfoState]="collectionsRD?.payload"
    [collectionSize]="collectionsRD?.payload?.totalElements"
    [hidePagerWhenSinglePage]="true"
    [hideGear]="true">
@@ -16,9 +15,9 @@
          </tr>
        </thead>
        <tbody>
-          <tr *ngFor="let collection of collectionsRD?.payload?.page">
-            <td><input #selectCollectionBtn [attr.aria-label]="(selectCollectionBtn.checked ? 'collection.select.table.deselect' : 'collection.select.table.select') | translate" class="collection-checkbox" [ngModel]="getSelected(collection.id) | async" (change)="switch(collection.id)" type="checkbox" name="{{collection.id}}"></td>
-            <td><a [routerLink]="['/collections', collection.id]">{{ dsoNameService.getName(collection) }}</a></td>
+          <tr *ngFor="let selectCollection of selectCollections$ | async">
+            <td><input #selectCollectionBtn [attr.aria-label]="(selectCollectionBtn.checked ? 'collection.select.table.deselect' : 'collection.select.table.select') | translate" [disabled]="(selectCollection.canSelect$ | async) === false" class="collection-checkbox" [ngModel]="selectCollection.selected$ | async" (change)="switch(selectCollection.dso.id)" type="checkbox" name="{{selectCollection.dso.id}}"></td>
+            <td><a [routerLink]="selectCollection.route">{{ dsoNameService.getName(selectCollection.dso) }}</a></td>
          </tr>
        </tbody>
      </table>
--- a/src/app/shared/object-select/collection-select/collection-select.component.ts
+++ b/src/app/shared/object-select/collection-select/collection-select.component.ts
@@ -1,10 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Collection } from '../../../core/shared/collection.model';
 import { ObjectSelectComponent } from '../object-select/object-select.component';
-import { isNotEmpty } from '../../empty.util';
-import { ObjectSelectService } from '../object-select.service';
-import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
-import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
+import { isNotEmpty, hasValueOperator } from '../../empty.util';
+import { Observable } from 'rxjs';
+import { DSpaceObjectSelect } from '../object-select.model';
+import { getAllSucceededRemoteDataPayload } from '../../../core/shared/operators';
+import { map } from 'rxjs/operators';
+import { PaginatedList } from '../../../core/data/paginated-list.model';
+import { getCollectionPageRoute } from '../../../collection-page/collection-page-routing-paths';

@Component({
  selector: 'ds-collection-select',
@@ -15,21 +18,29 @@ import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 /**
 * A component used to select collections from a specific list and returning the UUIDs of the selected collections
 */
-export class CollectionSelectComponent extends ObjectSelectComponent<Collection> {
+export class CollectionSelectComponent extends ObjectSelectComponent<Collection> implements OnInit {

-  constructor(
-    protected objectSelectService: ObjectSelectService,
-    protected authorizationService: AuthorizationDataService,
-    public dsoNameService: DSONameService,
-  ) {
-    super(objectSelectService, authorizationService);
-  }
+  /**
+   * Collection of all the data that is used to display the {@link Collection} in the HTML.
+   * By collecting this data here it doesn't need to be recalculated on evey change detection.
+   */
+  selectCollections$: Observable<DSpaceObjectSelect<Collection>[]>;

  ngOnInit(): void {
    super.ngOnInit();
    if (!isNotEmpty(this.confirmButton)) {
      this.confirmButton = 'collection.select.confirm';
    }
+    this.selectCollections$ = this.dsoRD$.pipe(
+      hasValueOperator(),
+      getAllSucceededRemoteDataPayload(),
+      map((collections: PaginatedList<Collection>) => collections.page.map((collection: Collection) => Object.assign(new DSpaceObjectSelect<Collection>(), {
+        dso: collection,
+        canSelect$: this.canSelect(collection),
+        selected$: this.getSelected(collection.id),
+        route: getCollectionPageRoute(collection.id),
+      } as DSpaceObjectSelect<Collection>))),
+    );
  }

 }
--- a/src/app/shared/object-select/item-select/item-select.component.html
+++ b/src/app/shared/object-select/item-select/item-select.component.html
@@ -3,7 +3,6 @@
    *ngIf="itemsRD?.payload?.totalElements > 0"
    [paginationOptions]="paginationOptions"
    [sortOptions]="sortOptions"
-    [pageInfoState]="itemsRD?.payload"
    [collectionSize]="itemsRD?.payload?.totalElements"
    [hidePagerWhenSinglePage]="true"
    [hideGear]="true">
@@ -18,17 +17,17 @@
        </tr>
        </thead>
        <tbody>
-        <tr *ngFor="let item of itemsRD?.payload?.page">
-          <td><input #selectItemBtn [attr.aria-label]="(selectItemBtn.checked ? 'item.select.table.deselect' : 'item.select.table.select') | translate" [disabled]="!(canSelect(item) | async)" class="item-checkbox" [ngModel]="getSelected(item.id) | async" (change)="switch(item.id)" type="checkbox" name="{{item.id}}"></td>
+        <tr *ngFor="let selectItem of selectItems$ | async">
+          <td><input #selectItemBtn [attr.aria-label]="(selectItemBtn.checked ? 'item.select.table.deselect' : 'item.select.table.select') | translate" [disabled]="(selectItem.canSelect$ | async) === false" class="item-checkbox" [ngModel]="selectItem.selected$ | async" (change)="switch(selectItem.dso.id)" type="checkbox" name="{{selectItem.dso.id}}"></td>
          <td *ngIf="!hideCollection">
-            <span *ngVar="(item.owningCollection | async)?.payload as collection">
+            <span *ngVar="(selectItem.dso.owningCollection | async)?.payload as collection">
              <a *ngIf="collection" [routerLink]="['/collections', collection?.id]">
                {{ dsoNameService.getName(collection) }}
              </a>
            </span>
          </td>
-          <td><span *ngIf="item.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])">{{item.firstMetadataValue(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])}}</span></td>
-          <td><a [routerLink]="[(itemPageRoutes$ | async)[item.id]]">{{ dsoNameService.getName(item) }}</a></td>
+          <td><span *ngIf="selectItem.dso.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])">{{selectItem.dso.firstMetadataValue(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])}}</span></td>
+          <td><a [routerLink]="selectItem.route">{{ dsoNameService.getName(selectItem.dso) }}</a></td>
        </tr>
        </tbody>
      </table>
--- a/src/app/shared/object-select/item-select/item-select.component.spec.ts
+++ b/src/app/shared/object-select/item-select/item-select.component.spec.ts
@@ -184,15 +184,16 @@ describe('ItemSelectComponent', () => {
    beforeEach(() => {
      comp.featureId = FeatureID.CanManageMappings;
      spyOn(authorizationDataService, 'isAuthorized').and.returnValue(of(false));
+      comp.ngOnInit();
    });

-    it('should disable the checkbox', waitForAsync(() => {
+    it('should disable the checkbox', waitForAsync(async () => {
      fixture.detectChanges();
-      fixture.whenStable().then(() => {
-        const checkbox = fixture.debugElement.query(By.css('input.item-checkbox')).nativeElement;
-        expect(authorizationDataService.isAuthorized).toHaveBeenCalled();
-        expect(checkbox.disabled).toBeTrue();
-      });
+      await fixture.whenStable();
+
+      const checkbox = fixture.debugElement.query(By.css('input.item-checkbox')).nativeElement;
+      expect(authorizationDataService.isAuthorized).toHaveBeenCalled();
+      expect(checkbox.disabled).toBeTrue();
    }));
  });
 });
--- a/src/app/shared/object-select/item-select/item-select.component.ts
+++ b/src/app/shared/object-select/item-select/item-select.component.ts
@@ -1,14 +1,13 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Item } from '../../../core/shared/item.model';
-import { ObjectSelectService } from '../object-select.service';
 import { ObjectSelectComponent } from '../object-select/object-select.component';
 import { hasValueOperator, isNotEmpty } from '../../empty.util';
 import { Observable } from 'rxjs';
 import { getAllSucceededRemoteDataPayload } from '../../../core/shared/operators';
 import { map } from 'rxjs/operators';
 import { getItemPageRoute } from '../../../item-page/item-page-routing-paths';
-import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
-import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
+import { PaginatedList } from '../../../core/data/paginated-list.model';
+import { DSpaceObjectSelect } from '../object-select.model';

@Component({
  selector: 'ds-item-select',
@@ -18,7 +17,7 @@ import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 /**
 * A component used to select items from a specific list and returning the UUIDs of the selected items
 */
-export class ItemSelectComponent extends ObjectSelectComponent<Item> {
+export class ItemSelectComponent extends ObjectSelectComponent<Item> implements OnInit {

  /**
   * Whether or not to hide the collection column
@@ -27,35 +26,25 @@ export class ItemSelectComponent extends ObjectSelectComponent<Item> {
  hideCollection = false;

  /**
-   * The routes to the items their pages
-   * Key: Item ID
-   * Value: Route to item page
+   * Collection of all the data that is used to display the {@link Item} in the HTML.
+   * By collecting this data here it doesn't need to be recalculated on evey change detection.
   */
-  itemPageRoutes$: Observable<{
-    [itemId: string]: string
-  }>;
-
-  constructor(
-    protected objectSelectService: ObjectSelectService,
-    protected authorizationService: AuthorizationDataService,
-    public dsoNameService: DSONameService,
-  ) {
-    super(objectSelectService, authorizationService);
-  }
+  selectItems$: Observable<DSpaceObjectSelect<Item>[]>;

  ngOnInit(): void {
    super.ngOnInit();
    if (!isNotEmpty(this.confirmButton)) {
      this.confirmButton = 'item.select.confirm';
    }
-    this.itemPageRoutes$ = this.dsoRD$.pipe(
+    this.selectItems$ = this.dsoRD$.pipe(
      hasValueOperator(),
      getAllSucceededRemoteDataPayload(),
-      map((items) => {
-        const itemPageRoutes = {};
-        items.page.forEach((item) => itemPageRoutes[item.uuid] = getItemPageRoute(item));
-        return itemPageRoutes;
-      })
+      map((items: PaginatedList<Item>) => items.page.map((item: Item) => Object.assign(new DSpaceObjectSelect<Item>(), {
+        dso: item,
+        canSelect$: this.canSelect(item),
+        selected$: this.getSelected(item.id),
+        route: getItemPageRoute(item),
+      } as DSpaceObjectSelect<Item>))),
    );
  }

--- a/src/app/shared/object-select/object-select.model.ts
+++ b/src/app/shared/object-select/object-select.model.ts
@@ -0,0 +1,29 @@
+import { Observable } from 'rxjs';
+import { DSpaceObject } from '../../core/shared/dspace-object.model';
+
+/**
+ * Class used to collect all the data that that is used by the {@link ObjectSelectComponent} in the HTML.
+ */
+export class DSpaceObjectSelect<T extends DSpaceObject> {
+
+  /**
+   * The {@link DSpaceObject} to display
+   */
+  dso: T;
+
+  /**
+   * Whether the {@link DSpaceObject} can be selected
+   */
+  canSelect$: Observable<boolean>;
+
+  /**
+   * Whether the {@link DSpaceObject} is selected
+   */
+  selected$: Observable<boolean>;
+
+  /**
+   * The {@link DSpaceObject}'s route
+   */
+  route: string;
+
+}
--- a/src/app/shared/object-select/object-select/object-select.component.ts
+++ b/src/app/shared/object-select/object-select/object-select.component.ts
@@ -9,6 +9,7 @@ import { SortOptions } from '../../../core/cache/models/sort-options.model';
 import { FeatureID } from '../../../core/data/feature-authorization/feature-id';
 import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';

 /**
 * An abstract component used to select DSpaceObjects from a specific list and returning the UUIDs of the selected DSpaceObjects
@@ -17,7 +18,7 @@ import { DSpaceObject } from '../../../core/shared/dspace-object.model';
  selector: 'ds-object-select-abstract',
  template: ''
 })
-export abstract class ObjectSelectComponent<TDomain> implements OnInit, OnDestroy {
+export abstract class ObjectSelectComponent<TDomain extends DSpaceObject> implements OnInit, OnDestroy {

  /**
   * A unique key used for the object select service
@@ -88,8 +89,11 @@ export abstract class ObjectSelectComponent<TDomain> implements OnInit, OnDestro
   */
  selectedIds$: Observable<string[]>;

-  constructor(protected objectSelectService: ObjectSelectService,
-              protected authorizationService: AuthorizationDataService) {
+  constructor(
+    protected objectSelectService: ObjectSelectService,
+    protected authorizationService: AuthorizationDataService,
+    public dsoNameService: DSONameService,
+  ) {
  }

  ngOnInit(): void {
--- a/src/app/shared/pagination/pagination.component.ts
+++ b/src/app/shared/pagination/pagination.component.ts
@@ -13,11 +13,9 @@ import {
 import { Observable, of as observableOf, Subscription } 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 { PageInfo } from '../../core/shared/page-info.model';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { map, take } from 'rxjs/operators';
 import { RemoteData } from '../../core/data/remote-data';
@@ -47,11 +45,6 @@ export class PaginationComponent implements OnDestroy, OnInit {
   */
  @Input() collectionSize: number;

-  /**
-   * Page state of a Remote paginated objects.
-   */
-  @Input() pageInfoState: Observable<PageInfo> = undefined;
-
  /**
   * Configuration for the NgbPagination component.
   */
@@ -136,18 +129,13 @@ export class PaginationComponent implements OnDestroy, OnInit {
  /**
   * Current page.
   */
-  public currentPage$;
+  public currentPage$: Observable<number>;

  /**
   * Current page in the state of a Remote paginated objects.
   */
  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.
@@ -237,7 +225,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
      map((currentPagination) => currentPagination.pageSize)
    );

-    let sortOptions;
+    let sortOptions: SortOptions;
    if (this.sortOptions) {
      sortOptions = this.sortOptions;
    } else {
@@ -251,16 +239,6 @@ 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) {
@@ -299,17 +277,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
   */
@@ -333,8 +300,8 @@ export class PaginationComponent implements OnDestroy, OnInit {
    if (collectionSize) {
      showingDetails = this.paginationService.getCurrentPagination(this.id, this.paginationOptions).pipe(
        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;