loading component works, wip

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

@@ -79,7 +79,7 @@ const routes = [
 ];
 
 @NgModule({
-    imports: [RouterModule.forRoot(routes)],
+    imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })],
     exports: [RouterModule]
 })
 export class AppRoutingModule {}

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

@@ -1,7 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouteReuseStrategy } from '@angular/router';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
 import { BaseScreenComponent } from './components/base-screen/base-screen.component';
@@ -30,6 +30,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { SharedModule } from './modules/shared/shared.module';
 import { FileUploadDownloadModule } from './modules/upload-download/file-upload-download.module';
 import { UserProfileScreenComponent } from './components/user-profile/user-profile-screen.component';
+import { CustomRouteReuseStrategy } from './modules/projects/services/custom-route-reuse.strategy';
 
 export function HttpLoaderFactory(httpClient: HttpClient) {
     return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
@@ -92,7 +93,8 @@ const components = [AppComponent, LogoComponent, AuthErrorComponent, ToastCompon
                     monthYearA11yLabel: 'YYYY'
                 }
             }
-        }
+        },
+        { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
     ],
     bootstrap: [AppComponent]
 })

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

@@ -1,5 +1,4 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { ProjectListingScreenComponent } from './screens/project-listing-screen/project-listing-screen.component';
 import { CompositeRouteGuard } from '../../guards/composite-route.guard';
@@ -31,7 +30,8 @@ const routes = [
         component: FilePreviewScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard]
+            routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
+            reuse: true
         }
     }
 ];

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

@@ -1,4 +1,4 @@
-<section *ngIf="appStateService.activeFile" [class.fullscreen]="fullScreen">
+<section *ngIf="activeFile" [class.fullscreen]="fullScreen">
     <div class="page-header">
         <div class="flex flex-1">
             <div

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

@@ -77,15 +77,13 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
         private readonly _dialogService: ProjectsDialogService,
         private readonly _router: Router,
         private readonly _notificationService: NotificationService,
-        private readonly _translateService: TranslateService,
         private readonly _annotationProcessingService: AnnotationProcessingService,
         private readonly _annotationDrawService: AnnotationDrawService,
         private readonly _fileActionService: FileActionService,
-        private readonly _manualAnnotationService: ManualAnnotationService,
         private readonly _fileDownloadService: PdfViewerDataService,
         private readonly _formBuilder: FormBuilder,
         private readonly _statusControllerService: StatusControllerService,
-        private readonly ngZone: NgZone,
+        private readonly _ngZone: NgZone,
         private readonly _fileManagementControllerService: FileManagementControllerService
     ) {
         this._activatedRoute.params.subscribe((params) => {
@@ -99,6 +97,13 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
         });
     }
 
+    get activeFile() {
+        // if (this.appStateService.activeFile === undefined && !!this.fileId && !!this.projectId) {
+        this.appStateService.activateFile(this.projectId, this.fileId);
+        // }
+        return this.appStateService.activeFile;
+    }
+
     get annotations(): AnnotationWrapper[] {
         return this.annotationData ? this.annotationData.visibleAnnotations : [];
     }
@@ -262,7 +267,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
     }
 
     openManualAnnotationDialog($event: ManualRedactionEntryWrapper) {
-        this.ngZone.run(() => {
+        this._ngZone.run(() => {
             this.dialogRef = this._dialogService.openManualAnnotationDialog($event, async (response: ManualAnnotationResponse) => {
                 if (response?.annotationId) {
                     const annotation = this.activeViewer.annotManager.getAnnotationById(response.manualRedactionEntryWrapper.rectId);
@@ -545,7 +550,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
     private _openFullScreen() {
         const documentElement = document.documentElement;
         if (documentElement.requestFullscreen) {
-            documentElement.requestFullscreen();
+            documentElement.requestFullscreen().then();
         }
     }
 

apps/red-ui/src/app/modules/projects/services/custom-route-reuse.strategy.ts

@@ -0,0 +1,27 @@
+import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
+
+export class CustomRouteReuseStrategy implements RouteReuseStrategy {
+    handlers: { [key: string]: DetachedRouteHandle } = {};
+
+    shouldDetach(route: ActivatedRouteSnapshot): boolean {
+        return route.routeConfig.path === ':projectId/file/:fileId';
+    }
+
+    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
+        if (handle === null) return;
+        this.handlers[route.url.join('/')] = handle;
+    }
+
+    shouldAttach(route: ActivatedRouteSnapshot): boolean {
+        return !!this.handlers[route.url.join('/')];
+    }
+
+    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
+        console.log(this.handlers[route.url.join('/')]);
+        return this.handlers[route.url.join('/')] as DetachedRouteHandle;
+    }
+
+    shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
+        return future.routeConfig === current.routeConfig;
+    }
+}

apps/red-ui/src/app/state/app-state.service.ts

@@ -327,6 +327,7 @@ export class AppStateService {
     }
 
     activateFile(projectId: string, fileId: string) {
+        if (this._appState.activeProjectId === projectId && this._appState.activeFileId === fileId) return;
         this.activateProject(projectId);
         if (this.activeProject) {
             this._appState.activeFileId = fileId;