From 86a84393b51ef401cfdfab1177b8e117a9535713 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Wed, 11 Aug 2021 01:54:00 +0300
Subject: [PATCH] update restore last scrolled position

---
 .../screens/trash/trash-screen.component.ts   | 10 ++--
 .../dossier-listing-screen.component.ts       | 28 +++++-----
 .../dossier-overview-screen.component.html    |  4 +-
 .../dossier-overview-screen.component.ts      | 51 ++++++++-----------
 .../file-preview-screen.component.ts          |  1 -
 .../red-ui/src/app/state/app-state.service.ts |  4 +-
 6 files changed, 44 insertions(+), 54 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
index 2e2da6bce..fc0578ad8 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
-import { PermissionsService } from '@services/permissions.service';
 import { Dossier } from '@redaction/red-ui-http';
 import { LoadingService } from '@services/loading.service';
 import { AppConfigKey, AppConfigService } from '@app-config/app-config.service';
@@ -29,7 +28,7 @@ export class TrashScreenComponent extends ListingComponent<DossierListItem> impl
     readonly circleButtonTypes = CircleButtonTypes;
     readonly tableHeaderLabel = _('trash.table-header.title');
     readonly canRestoreSelected$ = this._canRestoreSelected$;
-    readonly tableColumnConfigs: TableColumnConfig<DossierListItem>[] = [
+    readonly tableColumnConfigs: readonly TableColumnConfig<DossierListItem>[] = [
         {
             label: _('trash.table-col-names.name'),
             sortByKey: 'dossierName'
@@ -51,12 +50,11 @@ export class TrashScreenComponent extends ListingComponent<DossierListItem> impl
     private readonly _deleteRetentionHours = this._appConfigService.getConfig(AppConfigKey.DELETE_RETENTION_HOURS);
 
     constructor(
-        readonly permissionsService: PermissionsService,
         protected readonly _injector: Injector,
-        private readonly _dossiersService: DossiersService,
         private readonly _loadingService: LoadingService,
-        private readonly _adminDialogService: AdminDialogService,
-        private readonly _appConfigService: AppConfigService
+        private readonly _dossiersService: DossiersService,
+        private readonly _appConfigService: AppConfigService,
+        private readonly _adminDialogService: AdminDialogService
     ) {
         super(_injector);
     }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts
index b2f8b92d3..c2ad78238 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { Dossier, DossierTemplateModel } from '@redaction/red-ui-http';
 import { AppStateService } from '@state/app-state.service';
 import { UserService } from '@services/user.service';
@@ -7,11 +7,11 @@ import { groupBy } from '@utils/functions';
 import { TranslateService } from '@ngx-translate/core';
 import { DossierWrapper } from '@state/model/dossier.wrapper';
 import { timer } from 'rxjs';
-import { filter } from 'rxjs/operators';
+import { tap } from 'rxjs/operators';
 import { TranslateChartService } from '@services/translate-chart.service';
 import { RedactionFilterSorter } from '@utils/sorters/redaction-filter-sorter';
 import { StatusSorter } from '@utils/sorters/status-sorter';
-import { NavigationStart, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { DossiersDialogService } from '../../services/dossiers-dialog.service';
 import { OnAttach, OnDetach } from '@utils/custom-route-reuse.strategy';
 import { UserPreferenceService } from '@services/user-preference.service';
@@ -29,8 +29,6 @@ import {
 import { PermissionsService } from '@services/permissions.service';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 
-const isLeavingScreen = event => event instanceof NavigationStart && event.url !== '/main/dossiers';
-
 interface ListItem {
     readonly dossierName: string;
     readonly routerLink: string;
@@ -43,7 +41,10 @@ interface ListItem {
     styleUrls: ['./dossier-listing-screen.component.scss'],
     providers: [...DefaultListingServices]
 })
-export class DossierListingScreenComponent extends ListingComponent<ListItem> implements OnInit, OnDestroy, OnAttach, OnDetach {
+export class DossierListingScreenComponent
+    extends ListingComponent<ListItem>
+    implements OnInit, AfterViewInit, OnDestroy, OnAttach, OnDetach
+{
     readonly itemSize = 85;
     protected readonly _primaryKey = 'dossierName';
     readonly currentUser = this._userService.currentUser;
@@ -77,7 +78,7 @@ export class DossierListingScreenComponent extends ListingComponent<ListItem> im
 
     dossiersChartData: DoughnutChartConfig[] = [];
     documentsChartData: DoughnutChartConfig[] = [];
-    private _lastScrollPosition: number;
+    private _lastScrolledIndex: number;
 
     @ViewChild('needsWorkTemplate', { read: TemplateRef, static: true })
     private readonly _needsWorkTemplate: TemplateRef<any>;
@@ -120,24 +121,25 @@ export class DossierListingScreenComponent extends ListingComponent<ListItem> im
         this.addSubscription = this._appStateService.fileChanged$.subscribe(() => {
             this.calculateData();
         });
+    }
 
-        this.addSubscription = this._router.events.pipe(filter(isLeavingScreen)).subscribe(() => {
-            this._lastScrollPosition = this._scrollViewport.measureScrollOffset('top');
-        });
+    ngAfterViewInit() {
+        this.addSubscription = this._scrollViewport.scrolledIndexChange.pipe(tap(index => (this._lastScrolledIndex = index))).subscribe();
     }
 
     ngOnAttach() {
-        this._scrollViewport.scrollTo({ top: this._lastScrollPosition });
         this._appStateService.reset();
         this._loadEntitiesFromState();
         this.ngOnInit();
+        this.ngAfterViewInit();
+        this._scrollViewport.scrollToIndex(this._lastScrolledIndex, 'smooth');
     }
 
     ngOnDetach(): void {
         this.ngOnDestroy();
     }
 
-    getDossierTemplate(dossierTemplateId: string): DossierTemplateModel {
+    private _getDossierTemplate(dossierTemplateId: string): DossierTemplateModel {
         return this._appStateService.getDossierTemplateById(dossierTemplateId);
     }
 
@@ -184,7 +186,7 @@ export class DossierListingScreenComponent extends ListingComponent<ListItem> im
         return {
             dossierName: dossier.dossierName,
             routerLink: '/main/dossiers/' + dossier.dossierId.toString(),
-            dossierTemplateName: this.getDossierTemplate(dossier.dossierTemplateId).name,
+            dossierTemplateName: this._getDossierTemplate(dossier.dossierTemplateId).name,
             dossier
         };
     }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
index 06ac1f075..f1b1bdaf8 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
@@ -1,4 +1,4 @@
-<section *ngIf="!!activeDossier">
+<section *ngIf="!!currentDossier">
     <redaction-page-header
         [actionConfigs]="actionConfigs"
         [searchPlaceholder]="'dossier-overview.search' | translate"
@@ -6,7 +6,7 @@
     >
         <redaction-file-download-btn
             [disabled]="entitiesService.areSomeSelected$ | async"
-            [dossier]="activeDossier"
+            [dossier]="currentDossier"
             [file]="entitiesService.all$ | async"
             tooltipPosition="below"
         ></redaction-file-download-btn>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
index e5a2ad01c..f962aacb5 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
@@ -1,5 +1,4 @@
 import { ChangeDetectorRef, Component, ElementRef, HostListener, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { NavigationStart, Router } from '@angular/router';
 import { Toaster } from '@services/toaster.service';
 import { AppStateService } from '@state/app-state.service';
 import { FileDropOverlayService } from '@upload-download/services/file-drop-overlay.service';
@@ -12,12 +11,11 @@ import { DossierDetailsComponent } from '../../components/dossier-details/dossie
 import { FileStatusWrapper } from '@models/file/file-status.wrapper';
 import { UserService } from '@services/user.service';
 import { timer } from 'rxjs';
-import { filter } from 'rxjs/operators';
+import { tap } from 'rxjs/operators';
 import { RedactionFilterSorter } from '@utils/sorters/redaction-filter-sorter';
 import { StatusSorter } from '@utils/sorters/status-sorter';
 import { convertFiles, handleFileDrop } from '@utils/file-drop-utils';
 import { DossiersDialogService } from '../../services/dossiers-dialog.service';
-import { DossierWrapper } from '@state/model/dossier.wrapper';
 import { OnAttach, OnDetach } from '@utils/custom-route-reuse.strategy';
 import { AppConfigKey, AppConfigService } from '@app-config/app-config.service';
 import { ActionConfig } from '@shared/components/page-header/models/action-config.model';
@@ -42,8 +40,9 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
     readonly itemSize = 80;
     readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = this._userService.currentUser;
+    currentDossier = this._appStateService.activeDossier;
     readonly tableHeaderLabel = _('dossier-overview.table-header.title');
-    readonly actionConfigs: ActionConfig[] = [
+    readonly actionConfigs: readonly ActionConfig[] = [
         {
             label: this._translateService.instant('dossier-overview.header-actions.edit'),
             action: $event => this.openEditDossierDialog($event),
@@ -51,7 +50,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
             hide: !this.currentUser.isManager
         }
     ];
-    readonly tableColumnConfigs: TableColumnConfig<FileStatusWrapper>[] = [
+    readonly tableColumnConfigs: readonly TableColumnConfig<FileStatusWrapper>[] = [
         {
             label: _('dossier-overview.table-col-names.name'),
             sortByKey: 'filename'
@@ -81,10 +80,10 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
     collapsedDetails = false;
     dossierAttributes: DossierAttributeWithValue[] = [];
     protected readonly _primaryKey = 'filename';
-    private readonly _lastOpenedFileKey = 'Dossier-Recent-' + this.activeDossier.dossierId;
+    private readonly _lastOpenedFileKey = 'Dossier-Recent-' + this.currentDossier.dossierId;
     @ViewChild(DossierDetailsComponent, { static: false })
     private readonly _dossierDetailsComponent: DossierDetailsComponent;
-    private _lastScrollPosition: number;
+    private _lastScrolledIndex: number;
     @ViewChild('needsWorkTemplate', { read: TemplateRef, static: true })
     private readonly _needsWorkTemplate: TemplateRef<any>;
     @ViewChild('fileInput') private readonly _fileInput: ElementRef;
@@ -92,7 +91,6 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
     private readonly _scrollViewport: CdkVirtualScrollViewport;
 
     constructor(
-        private readonly _router: Router,
         private readonly _toaster: Toaster,
         protected readonly _injector: Injector,
         private readonly _userService: UserService,
@@ -113,10 +111,6 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         this._loadEntitiesFromState();
     }
 
-    get activeDossier(): DossierWrapper {
-        return this._appStateService.activeDossier;
-    }
-
     get checkedRequiredFilters() {
         return this.filterService.getGroup('quickFilters')?.filters.filter(f => f.required && f.checked);
     }
@@ -145,15 +139,11 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
                 this.calculateData();
             });
 
-            this.addSubscription = this._router.events
-                .pipe(filter(event => event instanceof NavigationStart))
-                .subscribe((event: NavigationStart) => {
-                    if (!event.url.endsWith(this._appStateService.activeDossierId)) {
-                        this._lastScrollPosition = this._scrollViewport.measureScrollOffset('top');
-                    }
-                });
+            this.addSubscription = this._scrollViewport.scrolledIndexChange
+                .pipe(tap(index => (this._lastScrolledIndex = index)))
+                .subscribe();
 
-            this.dossierAttributes = await this._dossierAttributesService.getValues(this.activeDossier);
+            this.dossierAttributes = await this._dossierAttributesService.getValues(this.currentDossier);
             this.searchService.setSearchKey('searchField');
         } catch (e) {
         } finally {
@@ -170,7 +160,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         await this._appStateService.reloadActiveDossierFiles();
         this._loadEntitiesFromState();
         await this.ngOnInit();
-        this._scrollViewport.scrollTo({ top: this._lastScrollPosition });
+        this._scrollViewport.scrollToIndex(this._lastScrolledIndex, 'smooth');
     }
 
     ngOnDetach() {
@@ -188,7 +178,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
     }
 
     reloadDossiers() {
-        this._appStateService.getFiles(this.activeDossier, false).then(() => {
+        this._appStateService.getFiles(this.currentDossier, false).then(() => {
             this.calculateData();
         });
     }
@@ -205,7 +195,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
 
     @HostListener('drop', ['$event'])
     onDrop(event: DragEvent) {
-        handleFileDrop(event, this.activeDossier, this._uploadFiles.bind(this));
+        handleFileDrop(event, this.currentDossier, this._uploadFiles.bind(this));
     }
 
     @HostListener('dragover', ['$event'])
@@ -215,13 +205,13 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
     }
 
     async uploadFiles(files: File[] | FileList) {
-        await this._uploadFiles(convertFiles(files, this.activeDossier));
+        await this._uploadFiles(convertFiles(files, this.currentDossier));
         this._fileInput.nativeElement.value = null;
     }
 
     fileLink(fileStatus: FileStatusWrapper) {
         return this.permissionsService.canOpenFile(fileStatus)
-            ? [`/main/dossiers/${this.activeDossier.dossierId}/file/${fileStatus.fileId}`]
+            ? [`/main/dossiers/${this.currentDossier.dossierId}/file/${fileStatus.fileId}`]
             : [];
     }
 
@@ -232,7 +222,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
 
     openEditDossierDialog($event: MouseEvent) {
         this._dialogService.openDialog('editDossier', $event, {
-            dossierWrapper: this.activeDossier
+            dossierWrapper: this.currentDossier
         });
     }
 
@@ -241,7 +231,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
             'editDossier',
             null,
             {
-                dossierWrapper: this.activeDossier,
+                dossierWrapper: this.currentDossier,
                 section: 'members'
             },
             () => this.reloadDossiers()
@@ -249,7 +239,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
     }
 
     openDossierDictionaryDialog() {
-        this._dialogService.openDialog('dossierDictionary', null, this.activeDossier, () => {
+        this._dialogService.openDialog('dossierDictionary', null, this.currentDossier, () => {
             this.reloadDossiers();
         });
     }
@@ -262,7 +252,8 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         moment(file.lastUpdated).add(this._appConfigService.getConfig(AppConfigKey.RECENT_PERIOD_IN_HOURS), 'hours').isAfter(moment());
 
     private _loadEntitiesFromState() {
-        if (this.activeDossier) this.entitiesService.setEntities(this.activeDossier.files);
+        this.currentDossier = this._appStateService.activeDossier;
+        if (this.currentDossier) this.entitiesService.setEntities(this.currentDossier.files);
     }
 
     private async _uploadFiles(files: FileUploadModel[]) {
@@ -271,7 +262,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
     }
 
     private _computeAllFilters() {
-        if (!this.activeDossier) return;
+        if (!this.currentDossier) return;
 
         const allDistinctFileStatusWrapper = new Set<string>();
         const allDistinctPeople = new Set<string>();
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
index 8b47c36c3..fed9c22ca 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
@@ -40,7 +40,6 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f'];
 
 @Component({
-    selector: 'redaction-file-preview-screen',
     templateUrl: './file-preview-screen.component.html',
     styleUrls: ['./file-preview-screen.component.scss']
 })
diff --git a/apps/red-ui/src/app/state/app-state.service.ts b/apps/red-ui/src/app/state/app-state.service.ts
index 0c0acec63..88b8d674b 100644
--- a/apps/red-ui/src/app/state/app-state.service.ts
+++ b/apps/red-ui/src/app/state/app-state.service.ts
@@ -41,8 +41,8 @@ export interface AppState {
     providedIn: 'root'
 })
 export class AppStateService {
-    fileChanged$ = new Subject<FileStatusWrapper>();
-    fileReanalysed$ = new Subject<FileStatusWrapper>();
+    readonly fileChanged$ = new Subject<FileStatusWrapper>();
+    readonly fileReanalysed$ = new Subject<FileStatusWrapper>();
     private _appState: AppState;
 
     constructor(