file preview as lazy loaded module

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

@@ -1,9 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { SearchScreenComponent } from './screens/search-screen/search-screen.component';
-import { FilePreviewScreenComponent } from './screens/file-preview-screen/file-preview-screen.component';
-import { FilePreviewGuard } from '../../guards/file-preview.guard';
-import { DossierFilesGuard } from '../../guards/dossier-files-guard';
+import { FilePreviewGuard } from '@guards/file-preview.guard';
+import { DossierFilesGuard } from '@guards/dossier-files-guard';
 import { GoBackGuard } from '@guards/go-back-guard.service';
 import { CompositeRouteGuard } from '@iqser/common-ui';
 
@@ -25,13 +24,12 @@ const routes: Routes = [
     },
     {
         path: ':dossierId/file/:fileId',
-        component: FilePreviewScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
             routeGuards: [DossierFilesGuard, FilePreviewGuard],
-            reuse: true,
         },
         canDeactivate: [FilePreviewGuard],
+        loadChildren: () => import('./screens/file-preview-screen/file-preview.module').then(m => m.FilePreviewModule),
     },
     {
         path: '',

apps/red-ui/src/app/modules/dossier/dossiers.module.ts

@@ -1,19 +1,11 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FilePreviewScreenComponent } from './screens/file-preview-screen/file-preview-screen.component';
 import { AddDossierDialogComponent } from './dialogs/add-dossier-dialog/add-dossier-dialog.component';
 import { AssignReviewerApproverDialogComponent } from './dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component';
 import { ManualAnnotationDialogComponent } from './dialogs/manual-redaction-dialog/manual-annotation-dialog.component';
 import { ForceRedactionDialogComponent } from './dialogs/force-redaction-dialog/force-redaction-dialog.component';
 import { RemoveAnnotationsDialogComponent } from './dialogs/remove-annotations-dialog/remove-annotations-dialog.component';
 import { DocumentInfoDialogComponent } from './dialogs/document-info-dialog/document-info-dialog.component';
-import { PdfViewerComponent } from './components/pdf-viewer/pdf-viewer.component';
-import { CommentsComponent } from './components/comments/comments.component';
-import { PageIndicatorComponent } from './components/page-indicator/page-indicator.component';
-import { AnnotationActionsComponent } from './components/annotation-actions/annotation-actions.component';
-import { TypeAnnotationIconComponent } from './components/type-annotation-icon/type-annotation-icon.component';
-import { DocumentInfoComponent } from './components/document-info/document-info.component';
-import { FileWorkloadComponent } from './components/file-workload/file-workload.component';
 import { SharedModule } from '@shared/shared.module';
 import { DossiersRoutingModule } from './dossiers-routing.module';
 import { FileUploadDownloadModule } from '@upload-download/file-upload-download.module';
@@ -29,13 +21,10 @@ import { EditDossierDownloadPackageComponent } from './dialogs/edit-dossier-dial
 import { EditDossierDictionaryComponent } from './dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component';
 import { TeamMembersManagerComponent } from './components/team-members-manager/team-members-manager.component';
 import { ChangeLegalBasisDialogComponent } from './dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component';
-import { PageExclusionComponent } from './components/page-exclusion/page-exclusion.component';
 import { RecategorizeImageDialogComponent } from './dialogs/recategorize-image-dialog/recategorize-image-dialog.component';
 import { EditDossierAttributesComponent } from './dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component';
 import { SearchScreenComponent } from './screens/search-screen/search-screen.component';
 import { EditDossierDeletedDocumentsComponent } from './dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component';
-import { AnnotationsListComponent } from './components/file-workload/components/annotations-list/annotations-list.component';
-import { AnnotationSourceComponent } from './components/file-workload/components/annotation-source/annotation-source.component';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { SharedDossiersModule } from './shared/shared-dossiers.module';
 import { ResizeAnnotationDialogComponent } from './dialogs/resize-annotation-dialog/resize-annotation-dialog.component';
@@ -43,7 +32,7 @@ import { BreadcrumbsService } from '@services/breadcrumbs.service';
 import { of } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
 
-const screens = [FilePreviewScreenComponent, SearchScreenComponent];
+const screens = [SearchScreenComponent];
 
 const dialogs = [
     AddDossierDialogComponent,
@@ -59,22 +48,12 @@ const dialogs = [
 ];
 
 const components = [
-    PdfViewerComponent,
-    CommentsComponent,
-    PageIndicatorComponent,
-    AnnotationActionsComponent,
-    TypeAnnotationIconComponent,
-    DocumentInfoComponent,
-    FileWorkloadComponent,
     EditDossierGeneralInfoComponent,
     EditDossierDownloadPackageComponent,
     EditDossierDictionaryComponent,
     EditDossierAttributesComponent,
     TeamMembersManagerComponent,
-    PageExclusionComponent,
     EditDossierDeletedDocumentsComponent,
-    AnnotationsListComponent,
-    AnnotationSourceComponent,
 
     ...screens,
     ...dialogs,

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html

@@ -32,7 +32,7 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="annotationActionsService.changeLegalBasis($event, annotations,  file, annotationsChanged)"
+            (action)="annotationActionsService.changeLegalBasis($event, annotations, file, annotationsChanged)"
             *ngIf="annotationPermissions.canChangeLegalBasis"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.edit-reason.label' | translate"
@@ -41,7 +41,7 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="annotationActionsService.convertRecommendationToAnnotation($event, annotations,  file,annotationsChanged)"
+            (action)="annotationActionsService.convertRecommendationToAnnotation($event, annotations, file, annotationsChanged)"
             *ngIf="annotationPermissions.canAcceptRecommendation"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.accept-recommendation.label' | translate"
@@ -50,7 +50,7 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="annotationActionsService.acceptSuggestion($event, annotations,  file,annotationsChanged)"
+            (action)="annotationActionsService.acceptSuggestion($event, annotations, file, annotationsChanged)"
             *ngIf="annotationPermissions.canAcceptSuggestion"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.accept-suggestion.label' | translate"
@@ -59,7 +59,7 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="annotationActionsService.undoDirectAction($event, annotations, file,annotationsChanged)"
+            (action)="annotationActionsService.undoDirectAction($event, annotations, file, annotationsChanged)"
             *ngIf="annotationPermissions.canUndo"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.undo' | translate"
@@ -68,7 +68,7 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="annotationActionsService.rejectSuggestion($event, annotations,  file,annotationsChanged)"
+            (action)="annotationActionsService.rejectSuggestion($event, annotations, file, annotationsChanged)"
             *ngIf="annotationPermissions.canRejectSuggestion"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.reject-suggestion' | translate"
@@ -77,7 +77,7 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="annotationActionsService.recategorizeImages($event, annotations,  file,annotationsChanged)"
+            (action)="annotationActionsService.recategorizeImages($event, annotations, file, annotationsChanged)"
             *ngIf="annotationPermissions.canRecategorizeImage"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.recategorize-image' | translate"
@@ -86,7 +86,7 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="annotationActionsService.forceRedaction($event, annotations,  file,annotationsChanged)"
+            (action)="annotationActionsService.forceRedaction($event, annotations, file, annotationsChanged)"
             *ngIf="annotationPermissions.canForceRedaction"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.force-redaction.label' | translate"

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.scss

@@ -1,4 +1,4 @@
-@use 'variables';
+@use 'apps/red-ui/src/assets/styles/variables';
 
 .annotation-actions {
     display: none;

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts

@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { PermissionsService } from '@services/permissions.service';
 import { AnnotationPermissions } from '@models/file/annotation.permissions';
-import { AnnotationActionsService } from '../../services/annotation-actions.service';
+import { AnnotationActionsService } from '../../../../services/annotation-actions.service';
 import { WebViewerInstance } from '@pdftron/webviewer';
 import { UserService } from '@services/user.service';
 import { Dossier, File } from '@red/domain';

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-source/annotation-source.component.scss

@@ -1,4 +1,4 @@
-@use 'variables';
+@use '../../../../../../../assets/styles/variables';
 
 .popover {
     width: 260px;

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.scss

@@ -1,4 +1,4 @@
-@use 'variables';
+@use '../../../../../../../assets/styles/variables';
 
 :host {
     width: 100%;

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/comments/comments.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, ViewChild } from '@angular/core';
 import { File, IComment } from '@red/domain';
-import { ManualAnnotationService } from '../../services/manual-annotation.service';
+import { ManualAnnotationService } from '../../../../services/manual-annotation.service';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { UserService } from '@services/user.service';
 import { PermissionsService } from '@services/permissions.service';

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/document-info/document-info.component.scss

@@ -1,5 +1,5 @@
-@use 'variables';
-@use 'common-mixins';
+@use 'apps/red-ui/src/assets/styles/variables';
+@use 'libs/common-ui/src/assets/styles/common-mixins';
 
 :host {
     display: block;

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/document-info/document-info.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { File, IFileAttributesConfig } from '@red/domain';
-import { DossiersDialogService } from '../../services/dossiers-dialog.service';
+import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
 import { AutoUnsubscribe } from '@iqser/common-ui';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
 import { DossiersService } from '@services/entity-services/dossiers.service';

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.scss

@@ -1,5 +1,5 @@
-@use 'variables';
-@use 'common-mixins';
+@use 'apps/red-ui/src/assets/styles/variables';
+@use 'libs/common-ui/src/assets/styles/common-mixins';
 
 .read-only {
     padding: 13px 16px;

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.ts

@@ -11,7 +11,7 @@ import {
     ViewChild,
 } from '@angular/core';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
-import { AnnotationProcessingService } from '../../services/annotation-processing.service';
+import { AnnotationProcessingService } from '../../../../services/annotation-processing.service';
 import { MatDialogRef, MatDialogState } from '@angular/material/dialog';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { CircleButtonTypes, Debounce, FilterService, IconButtonTypes, INestedFilter, IqserEventTarget, Required } from '@iqser/common-ui';
@@ -20,7 +20,7 @@ import { WebViewerInstance } from '@pdftron/webviewer';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { File, IViewedPage } from '@red/domain';
-import { ExcludedPagesService } from '../../screens/file-preview-screen/services/excluded-pages.service';
+import { ExcludedPagesService } from '../../services/excluded-pages.service';
 
 const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape'];
 const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/page-exclusion/page-exclusion.component.scss

@@ -1,5 +1,5 @@
-@use 'variables';
-@use 'common-mixins';
+@use 'apps/red-ui/src/assets/styles/variables';
+@use 'libs/common-ui/src/assets/styles/common-mixins';
 
 :host {
     height: 100%;

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/page-exclusion/page-exclusion.component.ts

@@ -4,7 +4,7 @@ import { InputWithActionComponent, LoadingService, Toaster } from '@iqser/common
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { File, IPageRange } from '@red/domain';
 import { ReanalysisService } from '@services/reanalysis.service';
-import { ExcludedPagesService } from '../../screens/file-preview-screen/services/excluded-pages.service';
+import { ExcludedPagesService } from '../../services/excluded-pages.service';
 
 @Component({
     selector: 'redaction-page-exclusion',

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/page-indicator/page-indicator.component.scss

@@ -1,4 +1,4 @@
-@use 'variables';
+@use 'apps/red-ui/src/assets/styles/variables';
 
 .page-wrapper {
     color: variables.$accent;

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.scss

@@ -1,4 +1,4 @@
-@use 'variables';
+@use 'apps/red-ui/src/assets/styles/variables';
 
 .page {
     display: flex;

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts

@@ -20,20 +20,20 @@ import {
     ManualRedactionEntryWrapper,
 } from '@models/file/manual-redaction-entry.wrapper';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
-import { ManualAnnotationService } from '../../services/manual-annotation.service';
+import { ManualAnnotationService } from '../../../../services/manual-annotation.service';
 import { environment } from '@environments/environment';
-import { AnnotationDrawService } from '../../services/annotation-draw.service';
-import { AnnotationActionsService } from '../../services/annotation-actions.service';
+import { AnnotationDrawService } from '../../../../services/annotation-draw.service';
+import { AnnotationActionsService } from '../../../../services/annotation-actions.service';
 import { UserPreferenceService } from '@services/user-preference.service';
-import { BASE_HREF } from '../../../../tokens';
+import { BASE_HREF } from '../../../../../../tokens';
 import { ConfigService } from '@services/config.service';
 import { ConfirmationDialogInput, LoadingService } from '@iqser/common-ui';
-import { DossiersDialogService } from '../../services/dossiers-dialog.service';
-import { loadCompareDocumentWrapper } from '../../utils/compare-mode.utils';
-import { PdfViewerUtils } from '../../utils/pdf-viewer.utils';
+import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
+import { loadCompareDocumentWrapper } from '../../../../utils/compare-mode.utils';
+import { PdfViewerUtils } from '../../../../utils/pdf-viewer.utils';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ActivatedRoute } from '@angular/router';
-import { toPosition } from '../../utils/pdf-calculation.utils';
+import { toPosition } from '../../../../utils/pdf-calculation.utils';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 import Tools = Core.Tools;
 import TextTool = Tools.TextTool;

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

@@ -12,7 +12,7 @@ import {
 import { ActivatedRoute, ActivatedRouteSnapshot, NavigationExtras, Router } from '@angular/router';
 import { AppStateService } from '@state/app-state.service';
 import { Core, WebViewerInstance } from '@pdftron/webviewer';
-import { PdfViewerComponent } from '../../components/pdf-viewer/pdf-viewer.component';
+import { PdfViewerComponent } from './components/pdf-viewer/pdf-viewer.component';
 import {
     AutoUnsubscribe,
     CircleButtonTypes,
@@ -40,7 +40,7 @@ import { UserPreferenceService } from '@services/user-preference.service';
 import { UserService } from '@services/user.service';
 import { PdfViewerDataService } from '../../services/pdf-viewer-data.service';
 import { download } from '@utils/file-download-utils';
-import { FileWorkloadComponent } from '../../components/file-workload/file-workload.component';
+import { FileWorkloadComponent } from './components/file-workload/file-workload.component';
 import { DossiersDialogService } from '../../services/dossiers-dialog.service';
 import { clearStamps, stampPDFPage } from '@utils/page-stamper';
 import { TranslateService } from '@ngx-translate/core';

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts

@@ -0,0 +1,54 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IqserIconsModule } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterModule, Routes } from '@angular/router';
+import { SharedModule } from '@shared/shared.module';
+import { SharedDossiersModule } from '../../shared/shared-dossiers.module';
+import { FilePreviewScreenComponent } from './file-preview-screen.component';
+import { FileWorkloadComponent } from './components/file-workload/file-workload.component';
+import { AnnotationSourceComponent } from './components/annotation-source/annotation-source.component';
+import { AnnotationsListComponent } from './components/annotations-list/annotations-list.component';
+import { PageIndicatorComponent } from './components/page-indicator/page-indicator.component';
+import { PageExclusionComponent } from './components/page-exclusion/page-exclusion.component';
+import { PdfViewerComponent } from './components/pdf-viewer/pdf-viewer.component';
+import { AnnotationActionsComponent } from './components/annotation-actions/annotation-actions.component';
+import { CommentsComponent } from './components/comments/comments.component';
+import { DocumentInfoComponent } from './components/document-info/document-info.component';
+import { TypeAnnotationIconComponent } from './components/type-annotation-icon/type-annotation-icon.component';
+import { OverlayModule } from '@angular/cdk/overlay';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: FilePreviewScreenComponent,
+        pathMatch: 'full',
+        data: { reuse: true },
+    },
+];
+
+@NgModule({
+    declarations: [
+        FilePreviewScreenComponent,
+        FileWorkloadComponent,
+        AnnotationSourceComponent,
+        AnnotationsListComponent,
+        PageIndicatorComponent,
+        PageExclusionComponent,
+        PdfViewerComponent,
+        AnnotationActionsComponent,
+        CommentsComponent,
+        DocumentInfoComponent,
+        TypeAnnotationIconComponent,
+    ],
+    imports: [
+        RouterModule.forChild(routes),
+        CommonModule,
+        SharedModule,
+        SharedDossiersModule,
+        IqserIconsModule,
+        TranslateModule,
+        OverlayModule,
+    ],
+})
+export class FilePreviewModule {}