Scroll to previous offset rather than index

Changes some auto scrolling behavior in our virtual scrolling tables.
Save the scroll offset before any navigation attempt, rather than
saving the index on click.
Should work for every possible navigation action.

client/src/app/shared/components/list-view-table/list-view-table.component.ts

@@ -10,12 +10,13 @@ import {
     ViewChild,
     ViewEncapsulation
 } from '@angular/core';
+import { NavigationStart, Router } from '@angular/router';
 
 import { columnFactory, createDS, DataSourcePredicate, PblDataSource, PblNgridComponent } from '@pebula/ngrid';
 import { PblColumnDefinition, PblColumnFactory, PblNgridColumnSet } from '@pebula/ngrid/lib/table';
 import { PblNgridDataMatrixRow } from '@pebula/ngrid/target-events';
 import { Observable, Subscription } from 'rxjs';
-import { distinctUntilChanged } from 'rxjs/operators';
+import { distinctUntilChanged, filter } from 'rxjs/operators';
 
 import { OperatorService, Permission } from 'app/core/core-services/operator.service';
 import { StorageService } from 'app/core/core-services/storage.service';
@@ -384,6 +385,7 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
     public constructor(
         private operator: OperatorService,
         vp: ViewportService,
+        router: Router,
         private store: StorageService,
         private cd: ChangeDetectorRef
     ) {
@@ -393,6 +395,12 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
             }
             this.isMobile = mobile;
         });
+
+        this.subs.push(
+            router.events.pipe(filter(event => event instanceof NavigationStart)).subscribe(() => {
+                this.saveScrollOffset();
+            })
+        );
     }
 
     public async ngOnInit(): Promise<void> {
@@ -400,8 +408,9 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
         await this.restoreSearchQuery();
         this.createDataSource();
         this.changeRowHeight();
-        this.scrollToPreviousPosition();
         this.cd.detectChanges();
+        // ngrid exists after the first change detection
+        this.scrollToPreviousPosition();
     }
 
     /**
@@ -600,9 +609,17 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
      * @param key the key of the scroll index
      * @returns the scroll index or 0 if not found
      */
-    public async getScrollIndex(key: string): Promise<number> {
-        const scrollIndex = await this.store.get<number>(`scroll_${key}`);
-        return scrollIndex ? scrollIndex : 0;
+    private async getScrollOffset(key: string): Promise<number> {
+        const scrollOffset = await this.store.get<number>(`scroll_${key}`);
+        return scrollOffset ? scrollOffset : 0;
+    }
+
+    /**
+     * Store the scroll offset
+     */
+    private saveScrollOffset(): void {
+        const offset = this.ngrid.viewport.measureScrollOffset();
+        this.store.set(`scroll_${this.listStorageKey}`, offset);
     }
 
     /**
@@ -626,18 +643,11 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
 
     /**
      * Automatically scrolls to a stored scroll position
-     *
-     * TODO: Only the position will be stored, not the item.
-     *       Changing the filtering and sorting will confuse the order
-     *
-     * TODO: getScrollIndex is not supported by virtual scrolling with the `vScrollAuto` directive.
-     * Furthermore, dynamic assigning the amount of pixels in vScrollFixed
-     * does not work, tying the tables to the same hight.
      */
-    public async scrollToPreviousPosition(): Promise<void> {
+    private async scrollToPreviousPosition(): Promise<void> {
         if (this.ngrid) {
-            const scrollIndex = await this.getScrollIndex(this.listStorageKey);
-            this.ngrid.viewport.scrollToIndex(scrollIndex);
+            const scrollIndex = await this.getScrollOffset(this.listStorageKey);
+            this.ngrid.viewport.scrollToOffset(scrollIndex);
         }
     }
 

client/src/app/site/agenda/components/agenda-list/agenda-list.component.html

@@ -29,12 +29,7 @@
 >
     <!-- Title column -->
     <div *pblNgridCellDef="'title'; row as item; rowContext as rowContext" class="cell-slot fill">
-        <a
-            class="detail-link"
-            (click)="saveScrollIndex('agenda', rowContext.identity)"
-            [routerLink]="getDetailUrl(item)"
-            *ngIf="!isMultiSelect"
-        ></a>
+        <a class="detail-link" [routerLink]="getDetailUrl(item)" *ngIf="!isMultiSelect"></a>
         <div [ngStyle]="{ 'margin-left': item.level * 25 + 'px' }" class="innerTable">
             <os-icon-container [noWrap]="true" [icon]="item.closed ? 'check' : null" size="large">
                 <div class="ellipsis-overflow">

client/src/app/site/assignments/components/assignment-list/assignment-list.component.html

@@ -33,12 +33,7 @@
 >
     <!-- Title -->
     <div *pblNgridCellDef="'title'; row as assignment; rowContext as rowContext" class="cell-slot fill">
-        <a
-            class="detail-link"
-            (click)="saveScrollIndex('assignments', rowContext.identity)"
-            [routerLink]="assignment.id"
-            *ngIf="!isMultiSelect"
-        ></a>
+        <a class="detail-link" [routerLink]="assignment.id" *ngIf="!isMultiSelect"></a>
         <div>
             <div class="title-line ellipsis-overflow">
                 {{ assignment.getListTitle() }}

client/src/app/site/base/base-list-view.ts

@@ -106,14 +106,4 @@ export abstract class BaseListViewComponent<V extends BaseViewModel> extends Bas
     public get isMultiSelect(): boolean {
         return this._multiSelectMode;
     }
-
-    /**
-     * Saves the scroll index in the storage
-     *
-     * @param key
-     * @param index
-     */
-    public saveScrollIndex(key: string, index: number): void {
-        this.storage.set(`scroll_${key}`, index);
-    }
 }

client/src/app/site/motions/modules/category/components/category-list/category-list.component.html

@@ -25,11 +25,7 @@
 >
     <!-- Title -->
     <div *pblNgridCellDef="'title'; row as category; rowContext as rowContext" class="cell-slot fill">
-        <a
-            class="detail-link"
-            [routerLink]="category.id"
-            (click)="saveScrollIndex('category', rowContext.identity)"
-        ></a>
+        <a class="detail-link" [routerLink]="category.id"></a>
         <div [style.margin-left]="getMargin(category)">{{ category.prefixedName }}</div>
     </div>
 

client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html

@@ -18,14 +18,14 @@
 >
     <!-- Title column -->
     <div *pblNgridCellDef="'title'; value as title; row as block; rowContext as rowContext" class="cell-slot fill">
-        <a
-            class="detail-link"
-            (click)="saveScrollIndex('motionBlock', rowContext.identity)"
-            [routerLink]="block.id"
-            *ngIf="!isMultiSelect"
-        ></a>
+        <a class="detail-link" [routerLink]="block.id" *ngIf="!isMultiSelect"></a>
         <div class="innerTable">
-            <os-icon-container [noWrap]="true" [icon]="block.internal ? 'lock' : null" size="large" [matTooltip]="Internal">
+            <os-icon-container
+                [noWrap]="true"
+                [icon]="block.internal ? 'lock' : null"
+                size="large"
+                [matTooltip]="Internal"
+            >
                 <div class="ellipsis-overflow">
                     {{ title }}
                 </div>

client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html

@@ -63,12 +63,7 @@
 
         <!-- Title -->
         <div *pblNgridCellDef="'title'; row as motion; rowContext as rowContext" class="cell-slot fill">
-            <a
-                class="detail-link"
-                (click)="saveScrollIndex('motion', rowContext.identity)"
-                [routerLink]="motion.id"
-                *ngIf="!isMultiSelect"
-            ></a>
+            <a class="detail-link" [routerLink]="motion.id" *ngIf="!isMultiSelect"></a>
             <div class="column-title innerTable">
                 <div class="title-line ellipsis-overflow">
                     <!-- Is Favorite -->

client/src/app/site/motions/modules/motion-workflow/components/workflow-list/workflow-list.component.html

@@ -15,12 +15,7 @@
 >
     <!-- Name column -->
     <div *pblNgridCellDef="'name'; value as name; row as workflow; rowContext as rowContext" class="cell-slot fill">
-        <a
-            class="detail-link"
-            (click)="saveScrollIndex('workflow', rowContext.identity)"
-            [routerLink]="workflow.id"
-            *ngIf="!isMultiSelect"
-        ></a>
+        <a class="detail-link" [routerLink]="workflow.id" *ngIf="!isMultiSelect"></a>
         <div>{{ name | translate }}</div>
     </div>
 

client/src/app/site/users/components/user-list/user-list.component.html

@@ -29,12 +29,7 @@
 >
     <!-- Name column -->
     <div *pblNgridCellDef="'short_name'; value as name; row as user; rowContext as rowContext" class="cell-slot fill">
-        <a
-            class="detail-link"
-            (click)="saveScrollIndex('user', rowContext.identity)"
-            [routerLink]="user.id"
-            *ngIf="!isMultiSelect"
-        ></a>
+        <a class="detail-link" [routerLink]="user.id" *ngIf="!isMultiSelect"></a>
         <div class="nameCell">
             <span>{{ name }}</span>
         </div>
@@ -89,7 +84,9 @@
                 comment
             </mat-icon>
 
-            <os-icon-container *ngIf="user.isSamlUser" icon="device_hub"><span translate>Is SAML user</span></os-icon-container>
+            <os-icon-container *ngIf="user.isSamlUser" icon="device_hub"
+                ><span translate>Is SAML user</span></os-icon-container
+            >
         </div>
     </div>