From 01b626d3e7e57672dce742ba66ffa5f631813943 Mon Sep 17 00:00:00 2001
From: Sean <sean.f.t.engelhardt@gmail.com>
Date: Fri, 6 Dec 2019 13:43:09 +0100
Subject: [PATCH] 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.
---
 .../list-view-table.component.ts              | 40 ++++++++++++-------
 .../agenda-list/agenda-list.component.html    |  7 +---
 .../assignment-list.component.html            |  7 +---
 client/src/app/site/base/base-list-view.ts    | 10 -----
 .../category-list.component.html              |  6 +--
 .../motion-block-list.component.html          | 14 +++----
 .../motion-list/motion-list.component.html    |  7 +---
 .../workflow-list.component.html              |  7 +---
 .../user-list/user-list.component.html        | 11 ++---
 9 files changed, 41 insertions(+), 68 deletions(-)

diff --git a/client/src/app/shared/components/list-view-table/list-view-table.component.ts b/client/src/app/shared/components/list-view-table/list-view-table.component.ts
index 8a71f18dd..7f42f65e8 100644
--- a/client/src/app/shared/components/list-view-table/list-view-table.component.ts
+++ b/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);
         }
     }
 
diff --git a/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html b/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html
index 38130cc90..597f3f099 100644
--- a/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html
+++ b/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">
diff --git a/client/src/app/site/assignments/components/assignment-list/assignment-list.component.html b/client/src/app/site/assignments/components/assignment-list/assignment-list.component.html
index 6c57a1fff..2ec1f0693 100644
--- a/client/src/app/site/assignments/components/assignment-list/assignment-list.component.html
+++ b/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() }}
diff --git a/client/src/app/site/base/base-list-view.ts b/client/src/app/site/base/base-list-view.ts
index dc5231326..e20ebbf73 100644
--- a/client/src/app/site/base/base-list-view.ts
+++ b/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);
-    }
 }
diff --git a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html b/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html
index 31a947072..6b6425c16 100644
--- a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html
+++ b/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>
 
diff --git a/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html b/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html
index 82e1ae63f..438d82e59 100644
--- a/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html
+++ b/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>
diff --git a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html b/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html
index 12fbf26e4..d2c4b56b1 100644
--- a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html
+++ b/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 -->
diff --git a/client/src/app/site/motions/modules/motion-workflow/components/workflow-list/workflow-list.component.html b/client/src/app/site/motions/modules/motion-workflow/components/workflow-list/workflow-list.component.html
index 279ccdb05..5961d3d46 100644
--- a/client/src/app/site/motions/modules/motion-workflow/components/workflow-list/workflow-list.component.html
+++ b/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>
 
diff --git a/client/src/app/site/users/components/user-list/user-list.component.html b/client/src/app/site/users/components/user-list/user-list.component.html
index 71654dfa0..08fce0fca 100644
--- a/client/src/app/site/users/components/user-list/user-list.component.html
+++ b/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>