From b4532dab852175b263579dc465cc616d8fd54dac Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Sat, 17 Apr 2021 21:34:27 +0300 Subject: [PATCH] loading component works, wip --- apps/red-ui/src/app/app-routing.module.ts | 2 +- apps/red-ui/src/app/app.module.ts | 6 +++-- .../projects/projects-routing.module.ts | 4 +-- .../file-preview-screen.component.html | 2 +- .../file-preview-screen.component.ts | 15 +++++++---- .../services/custom-route-reuse.strategy.ts | 27 +++++++++++++++++++ .../red-ui/src/app/state/app-state.service.ts | 1 + 7 files changed, 46 insertions(+), 11 deletions(-) create mode 100644 apps/red-ui/src/app/modules/projects/services/custom-route-reuse.strategy.ts diff --git a/apps/red-ui/src/app/app-routing.module.ts b/apps/red-ui/src/app/app-routing.module.ts index aac15bf42..1a7fc7bb3 100644 --- a/apps/red-ui/src/app/app-routing.module.ts +++ b/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 {} diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index d89bb2958..caa2dcbec 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/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] }) diff --git a/apps/red-ui/src/app/modules/projects/projects-routing.module.ts b/apps/red-ui/src/app/modules/projects/projects-routing.module.ts index 2bbe0381d..47885875e 100644 --- a/apps/red-ui/src/app/modules/projects/projects-routing.module.ts +++ b/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 } } ]; diff --git a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html index 2c957ea18..c2f05375e 100644 --- a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html @@ -1,4 +1,4 @@ -
+
{ @@ -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(); } } diff --git a/apps/red-ui/src/app/modules/projects/services/custom-route-reuse.strategy.ts b/apps/red-ui/src/app/modules/projects/services/custom-route-reuse.strategy.ts new file mode 100644 index 000000000..6a67289c2 --- /dev/null +++ b/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; + } +} 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 60d4315a2..a9b131052 100644 --- a/apps/red-ui/src/app/state/app-state.service.ts +++ b/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;