#4525 Improved Scroll Position Handling in Goods In List and Remission Preview Page

apps/page/goods-in/src/lib/goods-in-list/goods-in-list.component.ts

@@ -22,6 +22,7 @@ import { debounceTime, first, map, shareReplay, takeUntil, tap } from 'rxjs/oper
 import { GoodsInListItemComponent } from './goods-in-list-item/goods-in-list-item.component';
 import { GoodsInListStore } from './goods-in-list.store';
 import { PickupShelfInNavigationService } from '@shared/services';
+import { CacheService } from '@core/cache';
 
 @Component({
   selector: 'page-goods-in-list',
@@ -60,20 +61,21 @@ export class GoodsInListComponent implements OnInit, AfterViewInit, OnDestroy {
 
   private _onDestroy$ = new Subject();
 
+  private readonly SCROLL_POSITION_TOKEN = 'GOODS_IN_LIST_SCROLL_POSITION';
+
   constructor(
     private _breadcrumb: BreadcrumbService,
     private _domainOmsService: DomainOmsService,
     public store: GoodsInListStore,
     private _router: Router,
     private _route: ActivatedRoute,
-    private readonly _config: Config
+    private readonly _config: Config,
+    private _cache: CacheService
   ) {}
 
   ngOnInit() {
     this.store.setTake(Number(this._route.snapshot.queryParams.take ?? 25));
     this._route.queryParams.pipe(takeUntil(this._onDestroy$), debounceTime(0)).subscribe(async (params) => {
-      const scrollPos = Number(params.scroll_position ?? 0);
-
       // Initial Search - Always Search If No Params Are Set
       if (
         (Object.keys(params).length === 0 || this.store.results.length === 0) &&
@@ -82,7 +84,8 @@ export class GoodsInListComponent implements OnInit, AfterViewInit, OnDestroy {
         this.store.search({
           cb: () => {
             setTimeout(() => {
-              this.scrollContainer?.scrollTo(scrollPos);
+              this.scrollContainer?.scrollTo(this._getScrollPositionFromCache());
+              this._removeScrollPositionFromCache();
             }, 0);
           },
         });
@@ -101,7 +104,8 @@ export class GoodsInListComponent implements OnInit, AfterViewInit, OnDestroy {
         this.store.search({
           cb: () => {
             setTimeout(() => {
-              this.scrollContainer?.scrollTo(scrollPos);
+              this.scrollContainer?.scrollTo(this._getScrollPositionFromCache());
+              this._removeScrollPositionFromCache();
             }, 0);
           },
         });
@@ -117,12 +121,13 @@ export class GoodsInListComponent implements OnInit, AfterViewInit, OnDestroy {
     this._onDestroy$.next();
     this._onDestroy$.complete();
 
+    this._addScrollPositionToCache();
+
     this.updateBreadcrumb(this.store.filter.getQueryParams());
   }
 
   cleanupQueryParams(params: Record<string, string> = {}) {
     const clean = { ...params };
-    delete clean['scroll_position'];
     delete clean['take'];
     delete clean['view'];
 
@@ -143,6 +148,21 @@ export class GoodsInListComponent implements OnInit, AfterViewInit, OnDestroy {
     this.listItems.changes.pipe(takeUntil(this._onDestroy$)).subscribe(() => this.registerEditSscDisabled());
   }
 
+  private _removeScrollPositionFromCache(): void {
+    this._cache.delete({ processId: this._config.get('process.ids.goodsIn'), token: this.SCROLL_POSITION_TOKEN });
+  }
+
+  private _addScrollPositionToCache(): void {
+    this._cache.set<number>(
+      { processId: this._config.get('process.ids.goodsIn'), token: this.SCROLL_POSITION_TOKEN },
+      this.scrollContainer?.scrollPos
+    );
+  }
+
+  private _getScrollPositionFromCache(): number {
+    return this._cache.get<number>({ processId: this._config.get('process.ids.goodsIn'), token: this.SCROLL_POSITION_TOKEN });
+  }
+
   navigateToDetails(orderItem: OrderItemListItemDTO) {
     if (this.editSsc) {
       return;
@@ -184,7 +204,6 @@ export class GoodsInListComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   async updateBreadcrumb(queryParams: Record<string, string> | Params = this.store.filter?.getQueryParams()) {
-    const scroll_position = this.scrollContainer?.scrollPos;
     const take = this._route?.snapshot?.queryParams?.take;
 
     if (queryParams) {
@@ -192,7 +211,7 @@ export class GoodsInListComponent implements OnInit, AfterViewInit, OnDestroy {
         .getBreadcrumbsByKeyAndTags$(this._config.get('process.ids.goodsIn'), ['goods-in', 'list'])
         .pipe(first())
         .toPromise();
-      const params = { ...queryParams, scroll_position, take };
+      const params = { ...queryParams, take };
 
       for (const crumb of crumbs) {
         this._breadcrumb.patchBreadcrumb(crumb.id, {

apps/page/goods-in/src/lib/goods-in-remission-preview/goods-in-remission-preview.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { KeyValueDTOOfStringAndString, OrderItemListItemDTO } from '@swagger/oms';
 import { UiErrorModalComponent, UiModalService } from '@ui/modal';
@@ -10,6 +10,7 @@ import { GoodsInRemissionPreviewStore } from './goods-in-remission-preview.store
 import { Config } from '@core/config';
 import { ToasterService } from '@shared/shell';
 import { PickupShelfInNavigationService } from '@shared/services';
+import { CacheService } from '@core/cache';
 
 @Component({
   selector: 'page-goods-in-remission-preview',
@@ -22,8 +23,6 @@ export class GoodsInRemissionPreviewComponent implements OnInit, OnDestroy {
   private _pickupShelfInNavigationService = inject(PickupShelfInNavigationService);
   @ViewChild(UiScrollContainerComponent) scrollContainer: UiScrollContainerComponent;
 
-  private _scrollPosition: number;
-
   items$ = this._store.results$;
 
   itemLength$ = this.items$.pipe(map((items) => items?.length));
@@ -52,14 +51,16 @@ export class GoodsInRemissionPreviewComponent implements OnInit, OnDestroy {
   byCompartmentCodeFn = (item: OrderItemListItemDTO) =>
     !!item.compartmentInfo ? `${item.compartmentCode}_${item.compartmentInfo}` : item.compartmentCode;
 
+  private readonly SCROLL_POSITION_TOKEN = 'REMISSION_PREVIEW_SCROLL_POSITION';
+
   constructor(
     private _breadcrumb: BreadcrumbService,
     private _store: GoodsInRemissionPreviewStore,
-    private _route: ActivatedRoute,
     private _router: Router,
     private _modal: UiModalService,
     private _config: Config,
-    private _toast: ToasterService
+    private _toast: ToasterService,
+    private _cache: CacheService
   ) {}
 
   ngOnInit(): void {
@@ -71,9 +72,25 @@ export class GoodsInRemissionPreviewComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this._onDestroy$.next();
     this._onDestroy$.complete();
+    this._addScrollPositionToCache();
     this.updateBreadcrumb();
   }
 
+  private _removeScrollPositionFromCache(): void {
+    this._cache.delete({ processId: this._config.get('process.ids.goodsIn'), token: this.SCROLL_POSITION_TOKEN });
+  }
+
+  private _addScrollPositionToCache(): void {
+    this._cache.set<number>(
+      { processId: this._config.get('process.ids.goodsIn'), token: this.SCROLL_POSITION_TOKEN },
+      this.scrollContainer?.scrollPos
+    );
+  }
+
+  private _getScrollPositionFromCache(): number {
+    return this._cache.get<number>({ processId: this._config.get('process.ids.goodsIn'), token: this.SCROLL_POSITION_TOKEN });
+  }
+
   async createBreadcrumb() {
     await this._breadcrumb.addOrUpdateBreadcrumbIfNotExists({
       key: this._config.get('process.ids.goodsIn'),
@@ -93,7 +110,6 @@ export class GoodsInRemissionPreviewComponent implements OnInit, OnDestroy {
     for (const crumb of crumbs) {
       this._breadcrumb.patchBreadcrumb(crumb.id, {
         name: crumb.name,
-        params: { scroll_position: this.scrollContainer?.scrollPos },
       });
     }
   }
@@ -133,14 +149,11 @@ export class GoodsInRemissionPreviewComponent implements OnInit, OnDestroy {
       this._store.searchResult$.pipe(takeUntil(this._onDestroy$)).subscribe(async (result) => {
         await this.createBreadcrumb();
 
-        if (this._scrollPosition) {
-          this.scrollContainer?.scrollTo(Number(this._scrollPosition ?? 0));
-          this._scrollPosition = undefined;
-        }
+        this.scrollContainer?.scrollTo(this._getScrollPositionFromCache() ?? 0);
+        this._removeScrollPositionFromCache();
       });
     }
 
-    this._scrollPosition = this._route.snapshot.queryParams?.scroll_position;
     this._store.search();
   }