Merge pull request DSpace#1777 from atmire/w2p-93665_fix-pagintion-in-metadata-browse-links

Fix pagination in metadata browse links

Author: tdonohue

src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts

@@ -18,6 +18,8 @@ import { BrowseByDataType, rendersBrowseBy } from '../browse-by-switcher/browse-
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { map } from 'rxjs/operators';
 
+export const BBM_PAGINATION_ID = 'bbm';
+
 @Component({
   selector: 'ds-browse-by-metadata-page',
   styleUrls: ['./browse-by-metadata-page.component.scss'],
@@ -50,7 +52,7 @@ export class BrowseByMetadataPageComponent implements OnInit {
    * The pagination config used to display the values
    */
   paginationConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-    id: 'bbm',
+    id: BBM_PAGINATION_ID,
     currentPage: 1,
     pageSize: 20
   });

src/app/shared/browse-by/browse-by.component.spec.ts

@@ -240,10 +240,12 @@ describe('BrowseByComponent', () => {
   });
   describe('back', () => {
     it('should navigate back to the main browse page', () => {
+      const id = 'test-pagination';
       comp.back();
-      expect(paginationService.updateRoute).toHaveBeenCalledWith('test-pagination', {page: 1}, {
+      expect(paginationService.updateRoute).toHaveBeenCalledWith(id, {page: 1}, {
         value: null,
-        startsWith: null
+        startsWith: null,
+        [id + '.return']: null
       });
     });
   });

src/app/shared/browse-by/browse-by.component.ts

@@ -1,10 +1,10 @@
-import { Component, EventEmitter, Injector, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Injector, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list.model';
 import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 import { fadeIn, fadeInOut } from '../animations/fade';
-import { combineLatest as observableCombineLatest, Observable } from 'rxjs';
+import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
 import { ListableObject } from '../object-collection/shared/listable-object.model';
 import { getStartsWithComponent, StartsWithType } from '../starts-with/starts-with-decorator';
 import { PaginationService } from '../../core/pagination/pagination.service';
@@ -25,7 +25,7 @@ import { hasValue } from '../empty.util';
 /**
  * Component to display a browse-by page for any ListableObject
  */
-export class BrowseByComponent implements OnInit {
+export class BrowseByComponent implements OnInit, OnDestroy {
 
   /**
    * ViewMode that should be passed to {@link ListableObjectComponentLoaderComponent}.
@@ -112,6 +112,16 @@ export class BrowseByComponent implements OnInit {
    */
   shouldDisplayResetButton$: Observable<boolean>;
 
+  /**
+   * Page number of the previous page
+   */
+  previousPage$ = new BehaviorSubject<string>('1');
+
+  /**
+   * Subscription that has to be unsubscribed from on destroy
+   */
+  sub: Subscription;
+
   public constructor(private injector: Injector,
                      protected paginationService: PaginationService,
                      private routeService: RouteService,
@@ -171,9 +181,20 @@ export class BrowseByComponent implements OnInit {
     this.shouldDisplayResetButton$ = observableCombineLatest([startsWith$, value$]).pipe(
       map(([startsWith, value]) => hasValue(startsWith) || hasValue(value))
     );
+    this.sub = this.routeService.getQueryParameterValue(this.paginationConfig.id + '.return').subscribe(this.previousPage$);
   }
 
+  /**
+   * Navigate back to the previous browse by page
+   */
   back() {
-    this.paginationService.updateRoute(this.paginationConfig.id, {page: 1}, {value: null, startsWith: null});
+    const page = +this.previousPage$.value > 1 ? +this.previousPage$.value : 1;
+    this.paginationService.updateRoute(this.paginationConfig.id, {page: page}, {[this.paginationConfig.id + '.return']: null, value: null, startsWith: null});
+  }
+
+  ngOnDestroy(): void {
+    if (this.sub) {
+      this.sub.unsubscribe();
+    }
   }
 }

src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html

@@ -1,5 +1,5 @@
 <div class="d-flex flex-row">
-    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="[]" [queryParams]="getQueryParams()" [queryParamsHandling]="'merge'" class="lead">
+    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="[]" [queryParams]="queryParams$ | async" [queryParamsHandling]="'merge'" class="lead">
         {{object.value}}
     </a>
     <span *ngIf="linkType == linkTypes.None" class="lead">

src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.spec.ts

@@ -4,7 +4,9 @@ import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../utils/truncate.pipe';
 import { BrowseEntryListElementComponent } from './browse-entry-list-element.component';
 import { BrowseEntry } from '../../../core/shared/browse-entry.model';
-
+import { PaginationService } from '../../../core/pagination/pagination.service';
+import { RouteService } from '../../../core/services/route.service';
+import { of as observableOf } from 'rxjs';
 let browseEntryListElementComponent: BrowseEntryListElementComponent;
 let fixture: ComponentFixture<BrowseEntryListElementComponent>;
 
@@ -13,12 +15,28 @@ const mockValue: BrowseEntry = Object.assign(new BrowseEntry(), {
   value: 'De Langhe Kristof'
 });
 
-describe('MetadataListElementComponent', () => {
+let paginationService;
+let routeService;
+const pageParam = 'bbm.page';
+
+function init() {
+  paginationService = jasmine.createSpyObj('paginationService', {
+    getPageParam: pageParam
+  });
+
+  routeService = jasmine.createSpyObj('routeService', {
+    getQueryParameterValue: observableOf('1')
+  });
+}
+describe('BrowseEntryListElementComponent', () => {
   beforeEach(waitForAsync(() => {
+    init();
     TestBed.configureTestingModule({
       declarations: [BrowseEntryListElementComponent, TruncatePipe],
       providers: [
-        { provide: 'objectElementProvider', useValue: { mockValue } }
+        { provide: 'objectElementProvider', useValue: { mockValue } },
+        {provide: PaginationService, useValue: paginationService},
+        {provide: RouteService, useValue: routeService},
       ],
 
       schemas: [NO_ERRORS_SCHEMA]

src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.ts

@@ -1,9 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 import { BrowseEntry } from '../../../core/shared/browse-entry.model';
 import { ViewMode } from '../../../core/shared/view-mode.model';
 import { listableObjectComponent } from '../../object-collection/shared/listable-object/listable-object.decorator';
+import { PaginationService } from '../../../core/pagination/pagination.service';
+import { Params } from '@angular/router';
+import { BBM_PAGINATION_ID } from '../../../browse-by/browse-by-metadata-page/browse-by-metadata-page.component';
+import { RouteService } from 'src/app/core/services/route.service';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'ds-browse-entry-list-element',
@@ -15,16 +21,35 @@ import { listableObjectComponent } from '../../object-collection/shared/listable
  * This component is automatically used to create a list view for BrowseEntry objects when used in ObjectCollectionComponent
  */
 @listableObjectComponent(BrowseEntry, ViewMode.ListElement)
-export class BrowseEntryListElementComponent extends AbstractListableElementComponent<BrowseEntry> {
+export class BrowseEntryListElementComponent extends AbstractListableElementComponent<BrowseEntry> implements OnInit {
+  /**
+   * Emits the query parameters for the link of this browse entry list element
+   */
+  queryParams$: Observable<Params>;
+
+  constructor(private paginationService: PaginationService, private routeService: RouteService) {
+    super();
+  }
+
+  ngOnInit() {
+    this.queryParams$ = this.getQueryParams();
+  }
 
   /**
    * Get the query params to access the item page of this browse entry.
    */
-  public getQueryParams(): {[param: string]: any} {
-    return {
-      value: this.object.value,
-      authority: !!this.object.authority ? this.object.authority : undefined,
-      startsWith: undefined,
-    };
+  private getQueryParams(): Observable<Params> {
+    const pageParamName = this.paginationService.getPageParam(BBM_PAGINATION_ID);
+    return this.routeService.getQueryParameterValue(pageParamName).pipe(
+      map((currentPage) => {
+        return {
+          value: this.object.value,
+          authority: !!this.object.authority ? this.object.authority : undefined,
+          startsWith: undefined,
+          [pageParamName]: null,
+          [BBM_PAGINATION_ID + '.return']: currentPage
+        };
+      })
+    );
   }
 }