Merge branch 'w2p-133535_fix-preserve-scroll-position_contribute-7.6' into w2p-133535_fix-preserve-scroll-position_contribute-9.x-v2

Author: Wout-atmire

src/app/core/pagination/pagination.service.spec.ts

@@ -8,12 +8,15 @@ import {
 } from '../cache/models/sort-options.model';
 import { FindListOptions } from '../data/find-list-options.model';
 import { PaginationService } from './pagination.service';
+import { ScrollService } from '../scroll/scroll.service';
+import { ScrollServiceStub } from '../../shared/testing/scroll-service.stub';
 
 
 describe('PaginationService', () => {
   let service: PaginationService;
   let router;
   let routeService;
+  let scrollService: ScrollService;
 
   const defaultPagination = new PaginationComponentOptions();
   const defaultSort = new SortOptions('dc.title', SortDirection.ASC);
@@ -39,8 +42,9 @@ describe('PaginationService', () => {
         return of(value);
       },
     };
+    scrollService = new ScrollServiceStub() as any;
 
-    service = new PaginationService(routeService, router);
+    service = new PaginationService(routeService, router, scrollService);
   });
 
   describe('getCurrentPagination', () => {
@@ -73,7 +77,7 @@ describe('PaginationService', () => {
           return of(value);
         },
       };
-      service = new PaginationService(routeService, router);
+      service = new PaginationService(routeService, router, scrollService);
 
       service.getCurrentSort('test-id', defaultSort).subscribe((currentSort) => {
         expect(currentSort).toEqual(defaultSort);
@@ -97,7 +101,7 @@ describe('PaginationService', () => {
       spyOn(service, 'updateRoute');
       service.resetPage('test');
 
-      expect(service.updateRoute).toHaveBeenCalledWith('test', { page: 1 });
+      expect(service.updateRoute).toHaveBeenCalledWith('test', { page: 1 }, undefined, undefined);
     });
   });
 

src/app/core/pagination/pagination.service.ts

@@ -1,11 +1,11 @@
-import { Injectable } from '@angular/core';
+import { Injectable, InjectionToken } from '@angular/core';
 import {
   NavigationExtras,
   Router,
 } from '@angular/router';
 import {
   combineLatest as observableCombineLatest,
-  Observable,
+  Observable, BehaviorSubject,
 } from 'rxjs';
 import {
   filter,
@@ -28,6 +28,9 @@ import {
 import { FindListOptions } from '../data/find-list-options.model';
 import { RouteService } from '../services/route.service';
 import { PaginationRouteParams } from './pagination-route-params.interface';
+import { ScrollService } from '../scroll/scroll.service';
+
+export const RETAIN_SCROLL_POSITION: InjectionToken<BehaviorSubject<any>> = new InjectionToken<boolean>('retainScrollPosition');
 
 @Injectable({
   providedIn: 'root',
@@ -53,6 +56,7 @@ export class PaginationService {
 
   constructor(protected routeService: RouteService,
               protected router: Router,
+              protected scrollService: ScrollService,
   ) {
   }
 
@@ -124,9 +128,10 @@ export class PaginationService {
   /**
    * Reset the current page for the provided pagination ID to 1.
    * @param paginationId - The pagination id for which to reset the page
+   * @param retainScrollPosition - Scroll to the pagination component after updating the route instead of the top of the page
    */
-  resetPage(paginationId: string) {
-    this.updateRoute(paginationId, { page: 1 });
+  resetPage(paginationId: string, retainScrollPosition?: boolean): void {
+    this.updateRoute(paginationId, { page: 1 }, undefined, retainScrollPosition);
   }
 
 
@@ -155,7 +160,7 @@ export class PaginationService {
    * @param url - The url to navigate to
    * @param params - The page related params to update in the route
    * @param extraParams - Addition params unrelated to the pagination that need to be added to the route
-   * @param retainScrollPosition - Scroll to the pagination component after updating the route instead of the top of the page
+   * @param retainScrollPosition - Scroll to the active fragment after updating the route instead of the top of the page
    * @param navigationExtras - Extra parameters to pass on to `router.navigate`. Can be used to override values set by this service.
    */
   updateRouteWithUrl(
@@ -170,16 +175,26 @@ export class PaginationService {
       const currentParametersWithIdName = this.getParametersWithIdName(paginationId, currentFindListOptions);
       const parametersWithIdName = this.getParametersWithIdName(paginationId, params);
       if (isNotEmpty(difference(parametersWithIdName, currentParametersWithIdName)) || isNotEmpty(extraParams) || isNotEmpty(this.clearParams)) {
-        const queryParams = Object.assign({}, this.clearParams, currentParametersWithIdName,
-          parametersWithIdName, extraParams);
+        const queryParams = Object.assign({}, currentParametersWithIdName,
+          parametersWithIdName, extraParams, this.clearParams);
         if (retainScrollPosition) {
+          // By navigating to a non-existing ID, like "prevent-scroll", the browser won't perform any scroll operations
+          const fragment: string = this.scrollService.activeFragment ?? 'prevent-scroll';
+          this.scrollService.setFragment(fragment);
           this.router.navigate(url, {
             queryParams: queryParams,
             queryParamsHandling: 'merge',
-            fragment: `p-${paginationId}`,
+            fragment: fragment,
             ...navigationExtras,
+          }).then((success: boolean) => {
+            setTimeout(() => {
+              if (success) {
+                this.scrollService.scrollToActiveFragment();
+              }
+            });
           });
         } else {
+          this.scrollService.setFragment(null);
           this.router.navigate(url, {
             queryParams: queryParams,
             queryParamsHandling: 'merge',
@@ -230,16 +245,16 @@ export class PaginationService {
 
   private getParametersWithIdName(paginationId: string, params: PaginationRouteParams) {
     const paramsWithIdName = {};
-    if (hasValue(params.page)) {
+    if (hasValue(params?.page)) {
       paramsWithIdName[`${paginationId}.page`] = `${params.page}`;
     }
-    if (hasValue(params.pageSize)) {
+    if (hasValue(params?.pageSize)) {
       paramsWithIdName[`${paginationId}.rpp`] = `${params.pageSize}`;
     }
-    if (hasValue(params.sortField)) {
+    if (hasValue(params?.sortField)) {
       paramsWithIdName[`${paginationId}.sf`] = `${params.sortField}`;
     }
-    if (hasValue(params.sortDirection)) {
+    if (hasValue(params?.sortDirection)) {
       paramsWithIdName[`${paginationId}.sd`] = `${params.sortDirection}`;
     }
     return paramsWithIdName;

src/app/core/scroll/scroll.service.ts

@@ -0,0 +1,38 @@
+import { Inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+/**
+ * Service used to scroll to a specific fragment/ID on the page
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class ScrollService {
+
+  activeFragment: string | null = null;
+
+  constructor(
+    @Inject(DOCUMENT) protected document: Document,
+  ) {
+  }
+
+  /**
+   * Sets the fragment/ID that the user should jump to when the route is refreshed
+   *
+   * @param fragment The fragment/ID
+   */
+  setFragment(fragment: string): void {
+    this.activeFragment = fragment;
+  }
+
+  /**
+   * Scrolls to the active fragment/ID if it exists
+   */
+  scrollToActiveFragment(): void {
+    if (this.activeFragment) {
+      this.document.getElementById(this.activeFragment)?.scrollIntoView({
+        block: 'start',
+      });
+    }
+  }
+}

src/app/core/shared/search/search.service.spec.ts

@@ -98,13 +98,21 @@ describe('SearchService', () => {
     it('should call the navigate method on the Router with view mode list parameter as a parameter when setViewMode is called', () => {
       service.setViewMode(ViewMode.ListElement);
 
-      expect(paginationService.updateRouteWithUrl).toHaveBeenCalledWith('test-id', ['/search'], { page: 1 }, { view: ViewMode.ListElement });
+      expect(paginationService.updateRouteWithUrl).toHaveBeenCalledWith('test-id', ['/search'], { page: 1 }, { view: ViewMode.ListElement },
+        undefined,
+      );
     });
 
     it('should call the navigate method on the Router with view mode grid parameter as a parameter when setViewMode is called', () => {
       service.setViewMode(ViewMode.GridElement);
 
-      expect(paginationService.updateRouteWithUrl).toHaveBeenCalledWith('test-id', ['/search'], { page: 1 }, { view: ViewMode.GridElement });
+      expect(paginationService.updateRouteWithUrl).toHaveBeenCalledWith(
+        'page-id',
+        ['/search'],
+        { page: 1 },
+        { view: ViewMode.GridElement },
+        undefined,
+      );
     });
   });
 

src/app/core/shared/search/search.service.ts

@@ -355,7 +355,7 @@ export class SearchService {
    * @param {ViewMode} viewMode Mode to switch to
    * @param {string[]} searchLinkParts
    */
-  setViewMode(viewMode: ViewMode, searchLinkParts?: string[]) {
+  setViewMode(viewMode: ViewMode, searchLinkParts?: string[], retainScrollPosition?: boolean) {
     this.paginationService.getCurrentPagination(this.searchConfigurationService.paginationID, new PaginationComponentOptions()).pipe(take(1))
       .subscribe((config) => {
         let pageParams = { page: 1 };
@@ -365,7 +365,7 @@ export class SearchService {
         } else if (config.pageSize === 1) {
           pageParams = Object.assign(pageParams, { pageSize: 10 });
         }
-        this.paginationService.updateRouteWithUrl(this.searchConfigurationService.paginationID, hasValue(searchLinkParts) ? searchLinkParts : [this.getSearchLink()], pageParams, queryParams);
+        this.paginationService.updateRouteWithUrl(this.searchConfigurationService.paginationID, hasValue(searchLinkParts) ? searchLinkParts : [this.getSearchLink()], pageParams, queryParams, retainScrollPosition);
       });
   }
 

src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html

@@ -26,6 +26,7 @@ <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relat
             [item]="item"
             [isEditRelationship]="isEditRelationship"
             [toRemove]="toRemove"
+            [retainScrollPosition]="true"
             (selectObject)="select($event)"
             (deselectObject)="deselect($event)"
             (resultFound)="setTotalInternals($event.pageInfo.totalElements)"
@@ -47,6 +48,7 @@ <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relat
               [context]="context"
               [query]="query"
               [externalSource]="source"
+              [retainScrollPosition]="true"
               (importedObject)="imported($event)"
               class="d-block pt-3">
             </ds-dynamic-lookup-relation-external-source-tab>
@@ -62,6 +64,7 @@ <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relat
               [listId]="listId"
               [relationshipType]="relationshipOptions.relationshipType"
               [repeatable]="repeatable"
+              [retainScrollPosition]="true"
               [context]="context"
               (selectObject)="select($event)"
               (deselectObject)="deselect($event)"

src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts

@@ -1,4 +1,3 @@
-import { AsyncPipe } from '@angular/common';
 import {
   Component,
   EventEmitter,
@@ -40,10 +39,6 @@ import { DSpaceObject } from '../../../../../core/shared/dspace-object.model';
 import { ExternalSource } from '../../../../../core/shared/external-source.model';
 import { Item } from '../../../../../core/shared/item.model';
 import { RelationshipType } from '../../../../../core/shared/item-relationships/relationship-type.model';
-import {
-  getAllSucceededRemoteDataPayload,
-  getFirstSucceededRemoteDataPayload,
-} from '../../../../../core/shared/operators';
 import { SearchConfigurationService } from '../../../../../core/shared/search/search-configuration.service';
 import { SEARCH_CONFIG_SERVICE } from '../../../../../my-dspace-page/my-dspace-configuration.service';
 import { BtnDisabledDirective } from '../../../../btn-disabled.directive';
@@ -57,14 +52,16 @@ import { ListableObject } from '../../../../object-collection/shared/listable-ob
 import { SelectableListState } from '../../../../object-list/selectable-list/selectable-list.reducer';
 import { SelectableListService } from '../../../../object-list/selectable-list/selectable-list.service';
 import { SearchResult } from '../../../../search/models/search-result.model';
-import { followLink } from '../../../../utils/follow-link-config.model';
 import { RelationshipOptions } from '../../models/relationship-options.model';
 import { ThemedDynamicLookupRelationExternalSourceTabComponent } from './external-source-tab/themed-dynamic-lookup-relation-external-source-tab.component';
 import {
   AddRelationshipAction,
   RemoveRelationshipAction,
   UpdateRelationshipNameVariantAction,
 } from './relationship.actions';
+import { getAllSucceededRemoteDataPayload } from '../../../../../core/shared/operators';
+import { followLink } from '../../../../utils/follow-link-config.model';
+import { PaginationService } from '../../../../../core/pagination/pagination.service';
 import { ThemedDynamicLookupRelationSearchTabComponent } from './search-tab/themed-dynamic-lookup-relation-search-tab.component';
 import { DsDynamicLookupRelationSelectionTabComponent } from './selection-tab/dynamic-lookup-relation-selection-tab.component';
 
@@ -209,15 +206,16 @@ export class DsDynamicLookupRelationModalComponent implements OnInit, OnDestroy
 
   constructor(
     public modal: NgbActiveModal,
-    private selectableListService: SelectableListService,
-    private relationshipService: RelationshipDataService,
-    private externalSourceService: ExternalSourceDataService,
-    private lookupRelationService: LookupRelationService,
-    private searchConfigService: SearchConfigurationService,
-    private rdbService: RemoteDataBuildService,
-    private zone: NgZone,
-    private store: Store<AppState>,
-    private router: Router,
+    protected selectableListService: SelectableListService,
+    protected relationshipService: RelationshipDataService,
+    protected externalSourceService: ExternalSourceDataService,
+    protected lookupRelationService: LookupRelationService,
+    protected searchConfigService: SearchConfigurationService,
+    protected rdbService: RemoteDataBuildService,
+    protected zone: NgZone,
+    protected store: Store<AppState>,
+    protected router: Router,
+    protected paginationService: PaginationService,
   ) {
 
   }
@@ -366,7 +364,10 @@ export class DsDynamicLookupRelationModalComponent implements OnInit, OnDestroy
   }
 
   ngOnDestroy() {
-    this.router.navigate([], {});
+    this.paginationService.clearPagination(this.searchConfigService.paginationID);
+    this.paginationService.updateRoute(this.searchConfigService.paginationID, undefined, undefined, true, {
+      queryParamsHandling: '',
+    });
     Object.values(this.subMap).forEach((subscription) => subscription.unsubscribe());
   }
 

src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.html

@@ -1,11 +1,12 @@
 <div class="row">
   <div class="col-4">
     <h3>{{ 'submission.sections.describe.relationship-lookup.selection-tab.settings' | translate}}</h3>
-    <ds-page-size-selector></ds-page-size-selector>
+    <ds-page-size-selector [retainScrollPosition]="retainScrollPosition"></ds-page-size-selector>
   </div>
   <div class="col-8">
     <ds-search-form [query]="(searchConfigService.paginatedSearchOptions | async)?.query"
       [inPlaceSearch]="true"
+      [retainScrollPosition]="retainScrollPosition"
       [searchPlaceholder]="'submission.sections.describe.relationship-lookup.selection-tab.search-form.placeholder' | translate">
     </ds-search-form>
     <div>
@@ -20,6 +21,7 @@ <h3>{{ 'submission.sections.describe.relationship-lookup.selection-tab.title.' +
             [context]="context"
             [importable]="true"
             [importConfig]="importConfig"
+            [retainScrollPosition]="retainScrollPosition"
             (importObject)="import($event)">
           </ds-viewable-collection>
         }

src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.ts

@@ -126,6 +126,12 @@ export class DsDynamicLookupRelationExternalSourceTabComponent implements OnInit
   @Input() query: string;
 
   @Input() repeatable: boolean;
+
+  /**
+   * Should scroll to the pagination component after updating the route instead of the top of the page
+   */
+  @Input() retainScrollPosition = false;
+
   /**
    * Emit an event when an object has been imported (or selected from similar local entries)
    */
@@ -234,6 +240,7 @@ export class DsDynamicLookupRelationExternalSourceTabComponent implements OnInit
       modalComp.relationship = this.relationship;
       modalComp.label = this.label;
       modalComp.relatedEntityType = this.relatedEntityType;
+      modalComp.retainScrollPosition = this.retainScrollPosition;
     }));
 
     this.subs.push(modalComp$.pipe(

src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/external-source-entry-import-modal/external-source-entry-import-modal.component.html

@@ -29,6 +29,7 @@ <h5 class="fw-bold">{{ (labelPrefix + 'entities' | translate) }}</h5>
         [selectionConfig]="{ repeatable: false, listId: entityListId }"
         [linkType]="linkTypes.ExternalLink"
         [context]="context"
+        [retainScrollPosition]="retainScrollPosition"
         (deselectObject)="deselectEntity()"
         (selectObject)="selectEntity($event)">
       </ds-search-results>