reworked route reuse

apps/red-ui/src/app/app-routing.module.ts

@@ -5,11 +5,12 @@ import { CompositeRouteGuard } from './guards/composite-route.guard';
 import { RedRoleGuard } from './modules/auth/red-role.guard';
 import { HtmlDebugScreenComponent } from './components/html-debug-screen/html-debug-screen.component';
 import { BaseScreenComponent } from './components/base-screen/base-screen.component';
-import { RouterModule } from '@angular/router';
+import { RouteReuseStrategy, RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { DownloadsListScreenComponent } from './components/downloads-list-screen/downloads-list-screen.component';
 import { AppStateGuard } from './state/app-state.guard';
 import { UserProfileScreenComponent } from './components/user-profile/user-profile-screen.component';
+import { CustomRouteReuseStrategy } from './utils/custom-route-reuse.strategy';
 
 const routes = [
     {
@@ -80,6 +81,7 @@ const routes = [
 
 @NgModule({
     imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })],
+    providers: [{ provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }],
     exports: [RouterModule]
 })
 export class AppRoutingModule {}

apps/red-ui/src/app/app.module.ts

@@ -93,8 +93,7 @@ const components = [AppComponent, LogoComponent, AuthErrorComponent, ToastCompon
                     monthYearA11yLabel: 'YYYY'
                 }
             }
-        },
-        { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
+        }
     ],
     bootstrap: [AppComponent]
 })

apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.html

@@ -141,7 +141,7 @@
             <mat-slide-toggle
                 (click)="toggleAnalysis($event)"
                 [disabled]="!permissionsService.isManager()"
-                [checked]="!fileStatus.isExcluded"
+                [checked]="!fileStatus?.isExcluded"
                 [matTooltip]="toggleTooltip | translate"
                 [matTooltipPosition]="tooltipPosition"
                 [class.mr-24]="screen === 'project-overview'"

apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.ts

@@ -4,7 +4,6 @@ import { FileStatusWrapper } from '../../../../models/file/file-status.wrapper';
 import { AppStateService } from '../../../../state/app-state.service';
 import { FileActionService } from '../../services/file-action.service';
 import { ProjectsDialogService } from '../../services/projects-dialog.service';
-import { TooltipPosition } from '@angular/material/tooltip';
 
 @Component({
     selector: 'redaction-file-actions',

apps/red-ui/src/app/modules/projects/projects-routing.module.ts

@@ -32,8 +32,8 @@ const routes = [
         component: FilePreviewScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard]
-            // reuse: true
+            routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
+            reuse: false // TODO ROUTE REUSE FOR file
         }
     }
 ];

apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html

@@ -194,6 +194,7 @@
         <div class="content-container">
             <div class="overlay-shadow"></div>
             <redaction-pdf-viewer
+                *ngIf="displayPDFViewer"
                 (keyUp)="handleKeyEvent($event)"
                 (annotationSelected)="handleAnnotationSelected($event)"
                 (manualAnnotationRequested)="openManualAnnotationDialog($event)"

apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.ts

@@ -28,6 +28,7 @@ import { download } from '../../../../utils/file-download-utils';
 import { ViewMode } from '../../../../models/file/view-mode';
 import { FileWorkloadComponent } from '../../components/file-workload/file-workload.component';
 import { ProjectsDialogService } from '../../services/projects-dialog.service';
+import { ReuseAwareRoute } from '../../../../utils/custom-route-reuse.strategy';
 
 const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f'];
 
@@ -36,7 +37,7 @@ const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f'];
     templateUrl: './file-preview-screen.component.html',
     styleUrls: ['./file-preview-screen.component.scss']
 })
-export class FilePreviewScreenComponent implements OnInit, OnDestroy {
+export class FilePreviewScreenComponent implements OnInit, OnDestroy, ReuseAwareRoute {
     public dialogRef: MatDialogRef<any>;
     public viewMode: ViewMode = 'STANDARD';
     public fullScreen = false;
@@ -56,6 +57,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
     filesAutoUpdateTimer: Subscription;
     fileReanalysedSubscription: Subscription;
     hideSkipped = false;
+    displayPDFViewer = false;
     public viewDocumentInfo = false;
     private _instance: WebViewerInstance;
 
@@ -165,7 +167,21 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
         this._updateCanPerformActions();
     }
 
+    // TODO POC
+    onRouteReuse() {
+        // primitive route reuse mechanic to trigger code on reuse, in this case reload PDF Viewer,
+        // we would still need to first store some state-related data and the restore it to the new instance
+        // for example page
+        console.log('testing route reuse ... ');
+        this.displayPDFViewer = false;
+        setTimeout(() => {
+            this.displayPDFViewer = true;
+        });
+    }
+
     ngOnInit(): void {
+        this.displayPDFViewer = true;
+
         document.documentElement.addEventListener('fullscreenchange', (event) => {
             if (!document.fullscreenElement) {
                 this.fullScreen = false;

apps/red-ui/src/app/modules/shared/base/base-listing.component.ts

@@ -118,7 +118,7 @@ export class BaseListingComponent<T = any> {
     }
 
     public resetFilters() {
-        for (const filterComponent of this.filterComponents) {
+        for (const filterComponent of this.filterComponents.filter((f) => !!f)) {
             filterComponent.deactivateAllFilters();
         }
         this.filtersChanged();
@@ -126,7 +126,10 @@ export class BaseListingComponent<T = any> {
     }
 
     public get hasActiveFilters() {
-        return this.filterComponents.reduce((prev, component) => prev || component?.hasActiveFilters, false) || this.searchForm.get('query').value;
+        return (
+            this.filterComponents.filter((f) => !!f).reduce((prev, component) => prev || component?.hasActiveFilters, false) ||
+            this.searchForm.get('query').value
+        );
     }
 
     // Selection

apps/red-ui/src/app/utils/custom-route-reuse.strategy.ts

@@ -1,26 +1,50 @@
 import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
+import { debounce } from './debounce';
 
 export class CustomRouteReuseStrategy implements RouteReuseStrategy {
     private _handlers: { [key: string]: DetachedRouteHandle } = {};
 
     shouldDetach(route: ActivatedRouteSnapshot): boolean {
-        return !!route.routeConfig.data?.reuse;
+        return !!route.routeConfig.data?.reuse && !!this._getKey(route);
     }
 
     store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
         if (handle === null) return;
-        this._handlers[route.toString()] = handle;
+        this._handlers[this._getKey(route)] = handle;
     }
 
     shouldAttach(route: ActivatedRouteSnapshot): boolean {
-        return !!this._handlers[route.toString()];
+        return !!this._handlers[this._getKey(route)];
     }
 
     retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
-        return this._handlers[route.toString()] as DetachedRouteHandle;
+        const key = this._getKey(route);
+        const element: any = this._handlers[key];
+
+        if (element?.componentRef?.instance?.onRouteReuse) {
+            this._reuseRoute(element.componentRef?.instance);
+        }
+
+        return element as DetachedRouteHandle;
     }
 
     shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
-        return future.routeConfig === current.routeConfig;
+        return this._getKey(future) === this._getKey(current);
+    }
+
+    private _getKey(route: ActivatedRouteSnapshot): string {
+        return route.pathFromRoot
+            .map((el: ActivatedRouteSnapshot) => (el.routeConfig ? el.routeConfig.path + JSON.stringify(el.params) : ''))
+            .filter((str) => str.length > 0)
+            .join('');
+    }
+
+    @debounce()
+    private _reuseRoute(instance: any) {
+        instance.onRouteReuse();
     }
 }
+
+export interface ReuseAwareRoute {
+    onRouteReuse();
+}