From cf6b7b4d24896fa2685e0d1e097e8147ad11ece5 Mon Sep 17 00:00:00 2001 From: Nicoleta Panaghiu Date: Tue, 11 Jun 2024 20:32:06 +0300 Subject: [PATCH] RED-9321: lazy load entities routes, standalone components. --- .../app/modules/admin/admin-routing.module.ts | 2 +- .../src/app/modules/admin/admin.module.ts | 2 + .../admin/screens/entities/entities.module.ts | 50 ------------------- .../admin/screens/entities/entities.routes.ts | 28 +++++++++++ .../dictionary/dictionary-screen.component.ts | 3 ++ .../entity-info/entity-info.component.ts | 16 +++++- .../shared-dossiers/shared-dossiers.module.ts | 4 +- .../add-edit-entity.component.ts | 31 +++++++++++- .../dictionary-manager.component.ts | 29 ++++++++++- .../components/editor/editor.component.ts | 9 +++- .../src/app/modules/shared/shared.module.ts | 7 +-- 11 files changed, 116 insertions(+), 65 deletions(-) delete mode 100644 apps/red-ui/src/app/modules/admin/screens/entities/entities.module.ts create mode 100644 apps/red-ui/src/app/modules/admin/screens/entities/entities.routes.ts diff --git a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts index d393bad31..995d4a02e 100644 --- a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts +++ b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts @@ -34,12 +34,12 @@ const entityRoutes: IqserRoutes = [ }, { path: `:${ENTITY_TYPE}`, - loadChildren: () => import('./screens/entities/entities.module').then(m => m.EntitiesModule), component: BaseEntityScreenComponent, canActivate: [CompositeRouteGuard, entityExistsGuard()], data: { routeGuards: [IqserAuthGuard, RedRoleGuard], }, + loadChildren: () => import('./screens/entities/entities.routes'), }, ]; diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts index 8b5b705ad..946cba067 100644 --- a/apps/red-ui/src/app/modules/admin/admin.module.ts +++ b/apps/red-ui/src/app/modules/admin/admin.module.ts @@ -60,6 +60,7 @@ import { AddCloneDossierTemplateDialogComponent } from './dialogs/add-clone-doss import { ComponentMappingsScreenComponent } from './screens/component-mappings/component-mappings-screen.component'; import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component'; import { NamePipe } from '@common-ui/users/name.pipe'; +import { AddEditEntityComponent } from '@shared/components/add-edit-entity/add-edit-entity.component'; const dialogs = [ AddCloneDossierTemplateDialogComponent, @@ -132,6 +133,7 @@ const components = [ InitialsAvatarComponent, UploadFileComponent, NamePipe, + AddEditEntityComponent, ], }) export class AdminModule {} diff --git a/apps/red-ui/src/app/modules/admin/screens/entities/entities.module.ts b/apps/red-ui/src/app/modules/admin/screens/entities/entities.module.ts deleted file mode 100644 index 5eeddef83..000000000 --- a/apps/red-ui/src/app/modules/admin/screens/entities/entities.module.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { RouterModule, Routes } from '@angular/router'; -import { SharedModule } from '@shared/shared.module'; -import { DictionaryScreenComponent } from './screens/dictionary/dictionary-screen.component'; -import { PendingChangesGuard } from '@guards/can-deactivate.guard'; -import { EntityInfoComponent } from './screens/entity-info/entity-info.component'; -import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor'; -import { TranslateModule } from '@ngx-translate/core'; -import { HasScrollbarDirective, IconButtonComponent, IqserDenyDirective, IqserHelpModeModule } from '@iqser/common-ui'; - -const routes: Routes = [ - { path: '', redirectTo: 'info', pathMatch: 'full' }, - { - path: 'info', - component: EntityInfoComponent, - canDeactivate: [PendingChangesGuard], - }, - { - path: 'dictionary', - component: DictionaryScreenComponent, - canDeactivate: [PendingChangesGuard], - }, - { - path: 'false-positive', - component: DictionaryScreenComponent, - canDeactivate: [PendingChangesGuard], - }, - { - path: 'false-recommendations', - component: DictionaryScreenComponent, - canDeactivate: [PendingChangesGuard], - }, -]; - -@NgModule({ - declarations: [DictionaryScreenComponent, EntityInfoComponent], - imports: [ - RouterModule.forChild(routes), - CommonModule, - SharedModule, - MonacoEditorModule, - TranslateModule, - IqserHelpModeModule, - IconButtonComponent, - HasScrollbarDirective, - IqserDenyDirective, - ], -}) -export class EntitiesModule {} diff --git a/apps/red-ui/src/app/modules/admin/screens/entities/entities.routes.ts b/apps/red-ui/src/app/modules/admin/screens/entities/entities.routes.ts new file mode 100644 index 000000000..fe15bc760 --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/screens/entities/entities.routes.ts @@ -0,0 +1,28 @@ +import { IqserRoutes } from '@iqser/common-ui'; +import { EntityInfoComponent } from './screens/entity-info/entity-info.component'; +import { PendingChangesGuard } from '@guards/can-deactivate.guard'; +import { DictionaryScreenComponent } from './screens/dictionary/dictionary-screen.component'; + +export default [ + { path: '', redirectTo: 'info', pathMatch: 'full' }, + { + path: 'info', + component: EntityInfoComponent, + canDeactivate: [PendingChangesGuard], + }, + { + path: 'dictionary', + component: DictionaryScreenComponent, + canDeactivate: [PendingChangesGuard], + }, + { + path: 'false-positive', + component: DictionaryScreenComponent, + canDeactivate: [PendingChangesGuard], + }, + { + path: 'false-recommendations', + component: DictionaryScreenComponent, + canDeactivate: [PendingChangesGuard], + }, +] satisfies IqserRoutes; diff --git a/apps/red-ui/src/app/modules/admin/screens/entities/screens/dictionary/dictionary-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/entities/screens/dictionary/dictionary-screen.component.ts index 5aed219a5..e0aed0529 100644 --- a/apps/red-ui/src/app/modules/admin/screens/entities/screens/dictionary/dictionary-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/entities/screens/dictionary/dictionary-screen.component.ts @@ -10,11 +10,14 @@ import { Roles } from '@users/roles'; import { NGXLogger } from 'ngx-logger'; import { getCurrentUser } from '@iqser/common-ui/lib/users'; import { getParam, List } from '@iqser/common-ui/lib/utils'; +import { AsyncPipe } from '@angular/common'; @Component({ templateUrl: './dictionary-screen.component.html', styleUrls: ['./dictionary-screen.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [AsyncPipe, DictionaryManagerComponent], }) export class DictionaryScreenComponent implements OnInit { protected readonly currentUser = getCurrentUser(); diff --git a/apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.ts b/apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.ts index 652c7b7a8..7577e8905 100644 --- a/apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, HostListener, ViewChild } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { getConfig, IconButtonTypes } from '@iqser/common-ui'; +import { getConfig, HasScrollbarDirective, IconButtonComponent, IconButtonTypes, IqserHelpModeModule } from '@iqser/common-ui'; import { IqserEventTarget } from '@iqser/common-ui/lib/utils'; import { Dictionary, DOSSIER_TEMPLATE_ID, ENTITY_TYPE } from '@red/domain'; import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service'; @@ -8,12 +8,26 @@ import { PermissionsService } from '@services/permissions.service'; import { AddEditEntityComponent } from '@shared/components/add-edit-entity/add-edit-entity.component'; import { getCurrentUser } from '@users/user.service'; import { Observable } from 'rxjs'; +import { MatIcon } from '@angular/material/icon'; +import { AsyncPipe, NgIf } from '@angular/common'; +import { TranslateModule } from '@ngx-translate/core'; @Component({ selector: 'redaction-entity-info', templateUrl: './entity-info.component.html', styleUrls: ['./entity-info.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + HasScrollbarDirective, + MatIcon, + NgIf, + TranslateModule, + AsyncPipe, + IconButtonComponent, + IqserHelpModeModule, + AddEditEntityComponent, + ], }) export class EntityInfoComponent { @ViewChild(AddEditEntityComponent) private readonly _addEditEntityComponent: AddEditEntityComponent; diff --git a/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts b/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts index 0d7dfab4c..008069e90 100644 --- a/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts +++ b/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts @@ -1,6 +1,5 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { FileActionsComponent } from './components/file-actions/file-actions.component'; import { SharedModule } from '@shared/shared.module'; import { EditDossierDialogComponent } from './dialogs/edit-dossier-dialog/edit-dossier-dialog.component'; import { AssignReviewerApproverDialogComponent } from './dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component'; @@ -9,7 +8,6 @@ import { EditDossierDownloadPackageComponent } from './dialogs/edit-dossier-dial import { EditDossierDictionaryComponent } from './dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component'; import { EditDossierAttributesComponent } from './dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component'; import { EditDossierTeamComponent } from './dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component'; -import { DateColumnComponent } from './components/date-column/date-column.component'; import { FileAssignService } from './services/file-assign.service'; import { CircleButtonComponent, @@ -36,6 +34,7 @@ import { LongPressDirective } from '@shared/directives/long-press.directive'; import { FileDownloadBtnComponent } from '@shared/components/buttons/file-download-btn/file-download-btn.component'; import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component'; import { NamePipe } from '@common-ui/users/name.pipe'; +import { DictionaryManagerComponent } from '@shared/components/dictionary-manager/dictionary-manager.component'; const components = [ EditDossierGeneralInfoComponent, @@ -79,6 +78,7 @@ const dialogs = [EditDossierDialogComponent, AssignReviewerApproverDialogCompone AnnotationIconComponent, InitialsAvatarComponent, NamePipe, + DictionaryManagerComponent, ], }) export class SharedDossiersModule {} diff --git a/apps/red-ui/src/app/modules/shared/components/add-edit-entity/add-edit-entity.component.ts b/apps/red-ui/src/app/modules/shared/components/add-edit-entity/add-edit-entity.component.ts index 038d22131..7ff945916 100644 --- a/apps/red-ui/src/app/modules/shared/components/add-edit-entity/add-edit-entity.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/add-edit-entity/add-edit-entity.component.ts @@ -1,13 +1,22 @@ import { booleanAttribute, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'; -import { FormGroup, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; +import { FormGroup, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; -import { BaseFormComponent, getConfig, LoadingService, Toaster } from '@iqser/common-ui'; +import { BaseFormComponent, getConfig, HasScrollbarDirective, LoadingService, RoundCheckboxComponent, Toaster } from '@iqser/common-ui'; import { Dictionary, IDictionary } from '@red/domain'; import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service'; import { DictionaryService } from '@services/entity-services/dictionary.service'; import { toSnakeCase } from '@utils/functions'; import { Observable } from 'rxjs'; import { map, startWith } from 'rxjs/operators'; +import { AsyncPipe, NgForOf, NgIf } from '@angular/common'; +import { TranslateModule } from '@ngx-translate/core'; +import { ColorPickerModule } from 'ngx-color-picker'; +import { MatIcon } from '@angular/material/icon'; +import { MatButtonToggle, MatButtonToggleGroup } from '@angular/material/button-toggle'; +import { MatFormField } from '@angular/material/form-field'; +import { MatSelect } from '@angular/material/select'; +import { MatSlideToggle } from '@angular/material/slide-toggle'; +import { MatCheckbox } from '@angular/material/checkbox'; const REDACTION_FIELDS = ['defaultReason']; @@ -23,6 +32,24 @@ interface Color { selector: 'redaction-add-edit-entity', templateUrl: './add-edit-entity.component.html', styleUrls: ['./add-edit-entity.component.scss'], + standalone: true, + imports: [ + RoundCheckboxComponent, + NgIf, + ReactiveFormsModule, + NgForOf, + TranslateModule, + ColorPickerModule, + MatIcon, + AsyncPipe, + MatButtonToggleGroup, + MatButtonToggle, + MatFormField, + MatSelect, + HasScrollbarDirective, + MatSlideToggle, + MatCheckbox, + ], }) export class AddEditEntityComponent extends BaseFormComponent implements OnInit { @Input({ required: true }) dossierTemplateId: string; diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts index 66cdc3fc6..04a995521 100644 --- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts @@ -1,5 +1,5 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'; -import { IconButtonTypes, LoadingService } from '@iqser/common-ui'; +import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, LoadingService } from '@iqser/common-ui'; import { Dictionary, DictionaryEntryType, DictionaryEntryTypes, DictionaryType, Dossier, DossierTemplate, IDictionary } from '@red/domain'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { DictionaryService } from '@services/entity-services/dictionary.service'; @@ -12,6 +12,16 @@ import { Debounce, List } from '@iqser/common-ui/lib/utils'; import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration; import FindMatch = monaco.editor.FindMatch; import { firstValueFrom } from 'rxjs'; +import { MatIcon } from '@angular/material/icon'; +import { NgForOf, NgIf } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { TranslateModule } from '@ngx-translate/core'; +import { MatTooltip } from '@angular/material/tooltip'; +import { MatCheckbox } from '@angular/material/checkbox'; +import { MatFormField } from '@angular/material/form-field'; +import { MatOption, MatSelect } from '@angular/material/select'; +import { MatDivider } from '@angular/material/divider'; +import { SharedModule } from '@shared/shared.module'; const COMPARE_ENTRIES_ERROR = 'compare-entries-error'; const SMOOTH_SCROLL = 0; @@ -25,6 +35,23 @@ const HELP_MODE_KEYS = { selector: 'redaction-dictionary-manager', templateUrl: './dictionary-manager.component.html', styleUrls: ['./dictionary-manager.component.scss'], + standalone: true, + imports: [ + MatIcon, + NgIf, + FormsModule, + TranslateModule, + CircleButtonComponent, + MatTooltip, + MatCheckbox, + MatFormField, + MatSelect, + MatOption, + MatDivider, + NgForOf, + IconButtonComponent, + EditorComponent, + ], }) export class DictionaryManagerComponent implements OnChanges, OnInit { private _searchDecorations: string[] = []; diff --git a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts index e15b60cc3..ffd19b7d1 100644 --- a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts @@ -11,6 +11,9 @@ import IDiffEditor = monaco.editor.IDiffEditor; import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration; import ILineChange = monaco.editor.ILineChange; import IEditorMouseEvent = monaco.editor.IEditorMouseEvent; +import { MonacoEditorModule, MonacoStandaloneCodeEditor, MonacoStandaloneDiffEditor } from '@materia-ui/ngx-monaco-editor'; +import { FormsModule } from '@angular/forms'; +import { NgIf } from '@angular/common'; const MIN_WORD_LENGTH = 2; const lineChangeToDecoration = ({ originalEndLineNumber, originalStartLineNumber }: ILineChange) => @@ -28,6 +31,8 @@ const notZero = (lineChange: ILineChange) => lineChange.originalEndLineNumber != selector: 'redaction-editor', templateUrl: './editor.component.html', styleUrls: ['./editor.component.scss'], + standalone: true, + imports: [MonacoEditorModule, FormsModule, NgIf], }) export class EditorComponent implements OnInit, OnChanges { #initialEntriesSet = new Set(); @@ -107,7 +112,7 @@ export class EditorComponent implements OnInit, OnChanges { }; } - onDiffEditorInit(editor: IDiffEditor): void { + onDiffEditorInit(editor: MonacoStandaloneDiffEditor): void { this._diffEditor = editor; this.codeEditor = editor.getModifiedEditor(); this.#addMarginButtons(); @@ -120,7 +125,7 @@ export class EditorComponent implements OnInit, OnChanges { this.#setTheme(); } - onCodeEditorInit(editor: ICodeEditor): void { + onCodeEditorInit(editor: MonacoStandaloneCodeEditor): void { this.codeEditor = editor; this.#setTheme(); } diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts index a1c4cc4dd..1cfd6c52e 100644 --- a/apps/red-ui/src/app/modules/shared/shared.module.ts +++ b/apps/red-ui/src/app/modules/shared/shared.module.ts @@ -17,10 +17,8 @@ import { StopPropagationDirective, } from '@iqser/common-ui'; import { NavigateLastDossiersScreenDirective } from './directives/navigate-last-dossiers-screen.directive'; -import { DictionaryManagerComponent } from './components/dictionary-manager/dictionary-manager.component'; import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor'; import { DatePipe } from './pipes/date.pipe'; -import { EditorComponent } from './components/editor/editor.component'; import { DossierStateComponent } from './components/dossier-state/dossier-state.component'; import { DossierNameColumnComponent } from './components/dossier-name-column/dossier-name-column.component'; import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core'; @@ -29,7 +27,6 @@ import { TranslateModule } from '@ngx-translate/core'; import { RouterModule } from '@angular/router'; import { AddDossierDialogComponent } from './dialogs/add-dossier-dialog/add-dossier-dialog.component'; import { SharedDialogService } from './services/dialog.service'; -import { AddEditEntityComponent } from './components/add-edit-entity/add-edit-entity.component'; import { ColorPickerModule } from 'ngx-color-picker'; import { WatermarkSelectorComponent } from './components/dossier-watermark-selector/watermark-selector.component'; import { CustomDateAdapter } from '@shared/CustomDateAdapter'; @@ -40,13 +37,11 @@ import { FileAttributeComponent } from '../dossier-overview/components/file-attr import { MatDividerModule } from '@angular/material/divider'; const components = [ - DictionaryManagerComponent, DossierStateComponent, DossierNameColumnComponent, DossiersTypeSwitchComponent, AddDossierDialogComponent, WatermarkSelectorComponent, - AddEditEntityComponent, ]; const utils = [DatePipe, NavigateLastDossiersScreenDirective]; @@ -58,7 +53,7 @@ const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, Rea const deleteThisWhenAllComponentsAreStandalone = [DonutChartComponent, FileAttributeComponent]; @NgModule({ - declarations: [...components, ...utils, EditorComponent], + declarations: [...components, ...utils], imports: [ CommonModule, ...modules,