Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-9321: lazy load entities routes, standalone components.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-06-11 20:32:06 +03:00 committed by Dan Percic
parent 9409261f3b
commit cf6b7b4d24
11 changed files with 116 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/modules/admin/admin-routing.module.ts
View File

@ -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'),
},
];

2
apps/red-ui/src/app/modules/admin/admin.module.ts
View File

@ -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 {}

50
apps/red-ui/src/app/modules/admin/screens/entities/entities.module.ts
View File

@ -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 {}

28
apps/red-ui/src/app/modules/admin/screens/entities/entities.routes.ts Normal file
View File

@ -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;

3
apps/red-ui/src/app/modules/admin/screens/entities/screens/dictionary/dictionary-screen.component.ts
View File

@ -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<User>();

16
apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.ts
View File

@ -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;

4
apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts
View File

@ -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 {}

31
apps/red-ui/src/app/modules/shared/components/add-edit-entity/add-edit-entity.component.ts
View File

@ -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;

29
apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
View File

@ -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[] = [];

9
apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
View File

@ -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<string>();
@ -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();
}

7
apps/red-ui/src/app/modules/shared/shared.module.ts
View File

@ -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,