state management improvemenets

apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts

@@ -20,18 +20,19 @@ import { filter, 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 { NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { FilterComponent } from '../../../shared/components/filter/filter.component';
 import { ProjectsDialogService } from '../../services/projects-dialog.service';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { BaseListingComponent } from '../../../shared/base/base-listing.component';
+import { OnAttach, OnDetach } from '../../../../utils/custom-route-reuse.strategy';
 
 @Component({
     selector: 'redaction-project-listing-screen',
     templateUrl: './project-listing-screen.component.html',
     styleUrls: ['./project-listing-screen.component.scss']
 })
-export class ProjectListingScreenComponent extends BaseListingComponent<ProjectWrapper> implements OnInit, OnDestroy {
+export class ProjectListingScreenComponent extends BaseListingComponent<ProjectWrapper> implements OnInit, OnDestroy, OnAttach, OnDetach {
     protected readonly _searchKey = 'name';
     protected readonly _sortKey = 'project-listing';
 
@@ -59,6 +60,9 @@ export class ProjectListingScreenComponent extends BaseListingComponent<ProjectW
     @ViewChild('needsWorkFilter') private _needsWorkFilterComponent: FilterComponent;
     @ViewChild('ruleSetFilter') private _ruleSetFilterComponent: FilterComponent;
 
+    private _routerEventsScrollPositionSub: Subscription;
+    private _fileChangedSub: Subscription;
+
     constructor(
         public readonly userService: UserService,
         public readonly translateChartService: TranslateChartService,
@@ -75,6 +79,8 @@ export class ProjectListingScreenComponent extends BaseListingComponent<ProjectW
     }
 
     public ngOnInit(): void {
+        this._calculateData();
+
         this._projectAutoUpdateTimer = timer(0, 10000)
             .pipe(
                 tap(async () => {
@@ -83,23 +89,35 @@ export class ProjectListingScreenComponent extends BaseListingComponent<ProjectW
                 })
             )
             .subscribe();
-        this._calculateData();
-        this._appStateService.fileChanged.subscribe(() => {
+
+        this._fileChangedSub = this._appStateService.fileChanged.subscribe(() => {
             this._calculateData();
         });
 
-        this._router.events.pipe(filter((events) => events instanceof NavigationStart || events instanceof NavigationEnd)).subscribe((event) => {
-            if (event instanceof NavigationStart && event.url !== '/main/projects') {
-                this._lastScrollPosition = this._scrollBar.getOffsetToRenderedContentStart() + this._scrollBar.getRenderedRange().end;
-            }
-            if (event instanceof NavigationEnd && event.url === '/main/projects') {
-                this._scrollBar.scrollTo({ top: this._lastScrollPosition });
-            }
-        });
+        this._routerEventsScrollPositionSub = this._router.events
+            .pipe(filter((events) => events instanceof NavigationStart || events instanceof NavigationEnd))
+            .subscribe((event) => {
+                if (event instanceof NavigationStart && event.url !== '/main/projects') {
+                    this._lastScrollPosition = this._scrollBar.measureScrollOffset('top');
+                }
+            });
+    }
+
+    ngOnAttach(previousRoute: ActivatedRouteSnapshot) {
+        this._appStateService.reset();
+        this._loadEntitiesFromState();
+        this.ngOnInit();
+        this._scrollBar.scrollTo({ top: this._lastScrollPosition });
+    }
+
+    ngOnDetach() {
+        this.ngOnDestroy();
     }
 
     ngOnDestroy(): void {
         this._projectAutoUpdateTimer.unsubscribe();
+        this._routerEventsScrollPositionSub.unsubscribe();
+        this._fileChangedSub.unsubscribe();
     }
 
     private _loadEntitiesFromState() {

apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts

@@ -1,5 +1,5 @@
 import { Component, HostListener, Injector, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { NotificationService, NotificationType } from '../../../../services/notification.service';
 import { AppStateService } from '../../../../state/app-state.service';
 import { FileDropOverlayService } from '../../../upload-download/services/file-drop-overlay.service';
@@ -26,13 +26,14 @@ import { ProjectsDialogService } from '../../services/projects-dialog.service';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { BaseListingComponent } from '../../../shared/base/base-listing.component';
 import { ProjectWrapper } from '../../../../state/model/project.wrapper';
+import { OnAttach, OnDetach } from '../../../../utils/custom-route-reuse.strategy';
 
 @Component({
     selector: 'redaction-project-overview-screen',
     templateUrl: './project-overview-screen.component.html',
     styleUrls: ['./project-overview-screen.component.scss']
 })
-export class ProjectOverviewScreenComponent extends BaseListingComponent<FileStatusWrapper> implements OnInit, OnDestroy {
+export class ProjectOverviewScreenComponent extends BaseListingComponent<FileStatusWrapper> implements OnInit, OnDestroy, OnDetach, OnAttach {
     protected readonly _searchKey = 'filename';
     protected readonly _selectionKey = 'fileId';
     protected readonly _sortKey = 'project-overview';
@@ -58,6 +59,8 @@ export class ProjectOverviewScreenComponent extends BaseListingComponent<FileSta
     @ViewChild('statusFilter') private _statusFilterComponent: FilterComponent;
     @ViewChild('peopleFilter') private _peopleFilterComponent: FilterComponent;
     @ViewChild('needsWorkFilter') private _needsWorkFilterComponent: FilterComponent;
+    private _routerEventsScrollPositionSub: Subscription;
+    private _fileChangedSub: Subscription;
 
     constructor(
         public readonly userService: UserService,
@@ -74,13 +77,13 @@ export class ProjectOverviewScreenComponent extends BaseListingComponent<FileSta
     ) {
         super(_injector);
         this._loadEntitiesFromState();
-
-        this._appStateService.fileChanged.subscribe(() => {
-            this.calculateData();
-        });
     }
 
     ngOnInit(): void {
+        this._fileDropOverlayService.initFileDropHandling();
+
+        this.calculateData();
+
         this._filesAutoUpdateTimer = timer(0, 7500)
             .pipe(
                 tap(async () => {
@@ -89,23 +92,36 @@ export class ProjectOverviewScreenComponent extends BaseListingComponent<FileSta
                 })
             )
             .subscribe();
-        this._fileDropOverlayService.initFileDropHandling();
-        this.calculateData();
 
-        this._router.events.pipe(filter((events) => events instanceof NavigationStart || events instanceof NavigationEnd)).subscribe((event) => {
-            if (event instanceof NavigationStart && !event.url.endsWith(this._appStateService.activeProjectId)) {
-                this._lastScrollPosition = this._scrollBar.getOffsetToRenderedContentStart() + this._scrollBar.getRenderedRange().end;
-            }
-
-            if (event instanceof NavigationEnd && event.url.endsWith(this._appStateService.activeProjectId)) {
-                this._scrollBar.scrollTo({ top: this._lastScrollPosition });
-            }
+        this._fileChangedSub = this._appStateService.fileChanged.subscribe(() => {
+            this.calculateData();
         });
+
+        this._routerEventsScrollPositionSub = this._router.events
+            .pipe(filter((events) => events instanceof NavigationStart || events instanceof NavigationEnd))
+            .subscribe((event) => {
+                if (event instanceof NavigationStart && !event.url.endsWith(this._appStateService.activeProjectId)) {
+                    this._lastScrollPosition = this._scrollBar.measureScrollOffset('top');
+                    console.log('file list: ', this._lastScrollPosition);
+                }
+            });
     }
 
     ngOnDestroy(): void {
         this._fileDropOverlayService.cleanupFileDropHandling();
         this._filesAutoUpdateTimer.unsubscribe();
+        this._fileChangedSub.unsubscribe();
+        this._routerEventsScrollPositionSub.unsubscribe();
+    }
+
+    ngOnAttach(previousRoute: ActivatedRouteSnapshot) {
+        this._loadEntitiesFromState();
+        this.ngOnInit();
+        this._scrollBar.scrollTo({ top: this._lastScrollPosition });
+    }
+
+    ngOnDetach() {
+        this.ngOnDestroy();
     }
 
     public get activeProject(): ProjectWrapper {

apps/red-ui/src/assets/config/config.json

@@ -1,6 +1,6 @@
 {
     "OAUTH_URL": "https://redkc-staging.iqser.cloud/auth/realms/redaction",
-    "API_URL": "https://timo-redaction-dev.iqser.cloud/redaction-api",
+    "API_URL": "https://redapi-staging.iqser.cloud",
     "OAUTH_CLIENT_ID": "redaction",
     "BACKEND_APP_VERSION": "4.4.40",
     "FRONTEND_APP_VERSION": "1.1",