From 6924cc17995f88096559cb350daa1b6400a69e02 Mon Sep 17 00:00:00 2001 From: Nicoleta Panaghiu Date: Wed, 12 Jun 2024 15:18:33 +0300 Subject: [PATCH] RED-9321: lazy load watermarks routes. --- .../app/modules/admin/admin-routing.module.ts | 2 +- .../paginator/paginator.component.ts | 3 + .../watermark-screen.component.ts | 36 ++++++++- .../screens/watermark/watermark.module.ts | 78 ------------------- .../screens/watermark/watermark.routes.ts | 34 ++++++++ .../watermarks-listing-screen.component.ts | 23 +++++- 6 files changed, 94 insertions(+), 82 deletions(-) delete mode 100644 apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts create mode 100644 apps/red-ui/src/app/modules/admin/screens/watermark/watermark.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 995d4a02e..5c0755728 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 @@ -104,7 +104,7 @@ const dossierTemplateIdRoutes: IqserRoutes = [ }, { path: 'watermarks', - loadChildren: () => import('./screens/watermark/watermark.module').then(m => m.WatermarkModule), + loadChildren: () => import('./screens/watermark/watermark.routes'), }, { path: 'reports', diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.ts index 02ba06c3b..a215d04b7 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.ts @@ -1,9 +1,12 @@ import { Component, EventEmitter, Output } from '@angular/core'; +import { MatIcon } from '@angular/material/icon'; @Component({ selector: 'redaction-paginator', templateUrl: './paginator.component.html', styleUrls: ['./paginator.component.scss'], + standalone: true, + imports: [MatIcon], }) export class PaginatorComponent { @Output() readonly changePage = new EventEmitter(); diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts index 5e8d8d0b7..e21ab0f17 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts @@ -1,10 +1,18 @@ import { HttpClient } from '@angular/common/http'; import { ChangeDetectorRef, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core'; -import { FormBuilder, FormGroup } from '@angular/forms'; +import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'; import { Router } from '@angular/router'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { environment } from '@environments/environment'; -import { getConfig, IconButtonTypes, IqserPermissionsService, LoadingService, Toaster } from '@iqser/common-ui'; +import { + getConfig, + HasScrollbarDirective, + IconButtonComponent, + IconButtonTypes, + IqserPermissionsService, + LoadingService, + Toaster, +} from '@iqser/common-ui'; import { getCurrentUser } from '@iqser/common-ui/lib/users'; import { AsControl, Debounce, getParam, trackByFactory, UI_ROOT_PATH_FN } from '@iqser/common-ui/lib/utils'; import WebViewer, { WebViewerInstance } from '@pdftron/webviewer'; @@ -31,6 +39,13 @@ import { UserPreferenceService } from '@users/user-preference.service'; import { stampPDFPage } from '@utils/page-stamper'; import { BehaviorSubject, firstValueFrom, Observable, of } from 'rxjs'; import { tap } from 'rxjs/operators'; +import { PaginatorComponent } from '../paginator/paginator.component'; +import { AsyncPipe, NgClass, NgForOf, NgIf } from '@angular/common'; +import { TranslateModule } from '@ngx-translate/core'; +import { MatTooltip } from '@angular/material/tooltip'; +import { MatIcon } from '@angular/material/icon'; +import { MatSlider, MatSliderThumb } from '@angular/material/slider'; +import { ColorPickerModule } from 'ngx-color-picker'; export const DEFAULT_WATERMARK: Partial = { text: 'Watermark', @@ -59,6 +74,23 @@ interface WatermarkForm { @Component({ templateUrl: './watermark-screen.component.html', styleUrls: ['./watermark-screen.component.scss'], + standalone: true, + imports: [ + PaginatorComponent, + NgIf, + IconButtonComponent, + TranslateModule, + AsyncPipe, + ReactiveFormsModule, + HasScrollbarDirective, + NgForOf, + NgClass, + MatTooltip, + MatIcon, + MatSlider, + ColorPickerModule, + MatSliderThumb, + ], }) export class WatermarkScreenComponent implements OnInit { readonly iconButtonTypes = IconButtonTypes; diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts deleted file mode 100644 index 1e9b3370b..000000000 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; -import { WatermarkScreenComponent } from './watermark-screen/watermark-screen.component'; -import { WatermarksListingScreenComponent } from './watermarks-listing/watermarks-listing-screen.component'; -import { - CircleButtonComponent, - CompositeRouteGuard, - HasScrollbarDirective, - IconButtonComponent, - IqserAllowDirective, - IqserHelpModeModule, - IqserListingModule, - IqserRoutes, -} from '@iqser/common-ui'; -import { RedRoleGuard } from '@users/red-role.guard'; -import { WATERMARK_ID } from '@red/domain'; -import { watermarkExistsGuard } from '@guards/watermark-exists.guard'; -import { TranslateModule } from '@ngx-translate/core'; -import { PaginatorComponent } from './paginator/paginator.component'; -import { MatIconModule } from '@angular/material/icon'; -import { ReactiveFormsModule } from '@angular/forms'; -import { MatSliderModule } from '@angular/material/slider'; -import { ColorPickerModule } from 'ngx-color-picker'; -import { MatTooltipModule } from '@angular/material/tooltip'; -import { MatSlideToggleModule } from '@angular/material/slide-toggle'; -import { InitialsAvatarComponent, IqserAuthGuard, IqserUsersModule } from '@iqser/common-ui/lib/users'; - -const routes: IqserRoutes = [ - { - path: '', - component: WatermarksListingScreenComponent, - canActivate: [CompositeRouteGuard], - data: { - routeGuards: [IqserAuthGuard, RedRoleGuard], - }, - }, - { - path: 'create', - component: WatermarkScreenComponent, - canActivate: [CompositeRouteGuard], - data: { - routeGuards: [IqserAuthGuard, RedRoleGuard], - }, - }, - { - path: `:${WATERMARK_ID}`, - component: WatermarkScreenComponent, - canActivate: [CompositeRouteGuard, watermarkExistsGuard()], - data: { - routeGuards: [IqserAuthGuard, RedRoleGuard], - }, - }, -]; - -@NgModule({ - declarations: [WatermarkScreenComponent, WatermarksListingScreenComponent, PaginatorComponent], - imports: [ - RouterModule.forChild(routes), - CommonModule, - IqserUsersModule, - TranslateModule, - IqserListingModule, - IqserHelpModeModule, - MatIconModule, - IconButtonComponent, - ReactiveFormsModule, - MatSliderModule, - ColorPickerModule, - MatSlideToggleModule, - CircleButtonComponent, - HasScrollbarDirective, - IqserAllowDirective, - MatTooltipModule, - InitialsAvatarComponent, - ], -}) -export class WatermarkModule {} diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.routes.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.routes.ts new file mode 100644 index 000000000..2b6bdc34f --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.routes.ts @@ -0,0 +1,34 @@ +import { WatermarksListingScreenComponent } from './watermarks-listing/watermarks-listing-screen.component'; +import { CompositeRouteGuard, IqserRoutes } from '@iqser/common-ui'; +import { IqserAuthGuard } from '@common-ui/users'; +import { RedRoleGuard } from '@users/red-role.guard'; +import { WatermarkScreenComponent } from './watermark-screen/watermark-screen.component'; +import { WATERMARK_ID } from '@red/domain'; +import { watermarkExistsGuard } from '@guards/watermark-exists.guard'; + +export default [ + { + path: '', + component: WatermarksListingScreenComponent, + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [IqserAuthGuard, RedRoleGuard], + }, + }, + { + path: 'create', + component: WatermarkScreenComponent, + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [IqserAuthGuard, RedRoleGuard], + }, + }, + { + path: `:${WATERMARK_ID}`, + component: WatermarkScreenComponent, + canActivate: [CompositeRouteGuard, watermarkExistsGuard()], + data: { + routeGuards: [IqserAuthGuard, RedRoleGuard], + }, + }, +] satisfies IqserRoutes; diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts index d04bd5eda..76ea73e72 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts @@ -1,8 +1,12 @@ import { Component, OnInit } from '@angular/core'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { + CircleButtonComponent, + IconButtonComponent, IconButtonTypes, IConfirmationDialogData, + IqserAllowDirective, + IqserListingModule, IqserPermissionsService, ListingComponent, listingProvidersFactory, @@ -10,18 +14,35 @@ import { TableColumnConfig, Toaster, } from '@iqser/common-ui'; -import { getCurrentUser } from '@iqser/common-ui/lib/users'; +import { getCurrentUser, InitialsAvatarComponent } from '@iqser/common-ui/lib/users'; import { getParam } from '@iqser/common-ui/lib/utils'; import { DOSSIER_TEMPLATE_ID, User, Watermark } from '@red/domain'; import { WatermarkService } from '@services/entity-services/watermark.service'; import { WatermarksMapService } from '@services/entity-services/watermarks-map.service'; import { Roles } from '@users/roles'; import { AdminDialogService } from '../../../services/admin-dialog.service'; +import { TranslateModule } from '@ngx-translate/core'; +import { RouterLink } from '@angular/router'; +import { MatSlideToggle } from '@angular/material/slide-toggle'; +import { AsyncPipe, DatePipe } from '@angular/common'; @Component({ templateUrl: './watermarks-listing-screen.component.html', styleUrls: ['./watermarks-listing-screen.component.scss'], providers: listingProvidersFactory(WatermarksListingScreenComponent), + standalone: true, + imports: [ + IqserListingModule, + TranslateModule, + IconButtonComponent, + IqserAllowDirective, + RouterLink, + MatSlideToggle, + InitialsAvatarComponent, + DatePipe, + CircleButtonComponent, + AsyncPipe, + ], }) export class WatermarksListingScreenComponent extends ListingComponent implements OnInit { readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);