RED-9321: refactored shared and file-upload-download modules.

apps/red-ui/src/app/app.module.ts

@@ -2,7 +2,7 @@ import { APP_BASE_HREF, DatePipe as BaseDatePipe } from '@angular/common';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { ENVIRONMENT_INITIALIZER, ErrorHandler, inject, NgModule } from '@angular/core';
 import { MatDividerModule } from '@angular/material/divider';
-import { MAT_TOOLTIP_DEFAULT_OPTIONS } from '@angular/material/tooltip';
+import { MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltip } from '@angular/material/tooltip';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ServiceWorkerModule } from '@angular/service-worker';
@@ -55,8 +55,6 @@ import { ArchivedDossiersService } from '@services/dossiers/archived-dossiers.se
 import { GlobalErrorHandler } from '@services/global-error-handler.service';
 import { LoggerRulesService } from '@services/logger-rules.service';
 import { DatePipe } from '@shared/pipes/date.pipe';
-import { SharedModule } from '@shared/shared.module';
-import { FileUploadDownloadModule } from '@upload-download/file-upload-download.module';
 import { RedRoleGuard } from '@users/red-role.guard';
 import { UserPreferenceService } from '@users/user-preference.service';
 import { UserService } from '@users/user.service';
@@ -71,7 +69,11 @@ import { PdfViewerModule } from './modules/pdf-viewer/pdf-viewer.module';
 import { ACTIVE_DOSSIERS_SERVICE, ARCHIVED_DOSSIERS_SERVICE } from './tokens';
 import { AuthErrorComponent } from '@components/auth-error/auth-error.component';
 import { provideCustomDateFormatter } from '@shared/custom-date-formatting.provider';
-import { provideHelpMode } from '@iqser/common-ui';
+import { provideHelpMode } from '@iqser/common-ui/lib/help-mode/utils/help-mode.provider';
+import { MatMenu, MatMenuContent, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { MatIcon } from '@angular/material/icon';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { IconsModule } from './modules/icons/icons.module';
 
 export const appModuleFactory = (config: AppConfig) => {
     @NgModule({
@@ -93,8 +95,6 @@ export const appModuleFactory = (config: AppConfig) => {
         imports: [
             BrowserModule,
             BrowserAnimationsModule,
-            SharedModule,
-            FileUploadDownloadModule,
             AppRoutingModule,
             MonacoEditorModule,
             CommonUiModule.forRoot({
@@ -191,6 +191,14 @@ export const appModuleFactory = (config: AppConfig) => {
             InitialsAvatarComponent,
             HelpModeComponent,
             HelpButtonComponent,
+            MatMenuTrigger,
+            MatMenuItem,
+            MatIcon,
+            MatMenu,
+            MatMenuContent,
+            MatTooltip,
+            MatProgressSpinner,
+            IconsModule,
         ],
         providers: [
             {

apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts

@@ -1,8 +1,19 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { Validators } from '@angular/forms';
+import { ReactiveFormsModule, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
-import { BaseDialogComponent, getConfig, IconButtonTypes, IqserPermissionsService, SaveOptions } from '@iqser/common-ui';
+import {
+    BaseDialogComponent,
+    CircleButtonComponent,
+    getConfig,
+    HasScrollbarDirective,
+    HelpButtonComponent,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserDenyDirective,
+    IqserPermissionsService,
+    SaveOptions,
+} from '@iqser/common-ui';
 import { DOSSIER_TEMPLATE_ID, DownloadFileType, IDossierRequest, IDossierTemplate, IReportTemplate } from '@red/domain';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
@@ -12,6 +23,16 @@ import { Roles } from '@users/roles';
 import dayjs from 'dayjs';
 import { firstValueFrom } from 'rxjs';
 import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service';
+import { NgForOf, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatFormField, MatSuffix } from '@angular/material/form-field';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
+import { WatermarkSelectorComponent } from '@shared/components/dossier-watermark-selector/watermark-selector.component';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatIcon } from '@angular/material/icon';
+import { SelectComponent } from '@shared/components/select/select.component';
 
 interface DialogData {
     readonly dossierTemplateId?: string;
@@ -20,6 +41,28 @@ interface DialogData {
 @Component({
     templateUrl: './add-dossier-dialog.component.html',
     styleUrls: ['./add-dossier-dialog.component.scss'],
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        NgIf,
+        TranslateModule,
+        MatFormField,
+        MatSelect,
+        MatOption,
+        NgForOf,
+        MatTooltip,
+        HasScrollbarDirective,
+        WatermarkSelectorComponent,
+        MatCheckbox,
+        MatDatepickerModule,
+        MatIcon,
+        SelectComponent,
+        IqserDenyDirective,
+        IconButtonComponent,
+        HelpButtonComponent,
+        CircleButtonComponent,
+        MatSuffix,
+    ],
 })
 export class AddDossierDialogComponent extends BaseDialogComponent implements OnInit {
     readonly config = getConfig();

apps/red-ui/src/app/modules/shared/directives/navigate-last-dossiers-screen.directive.ts

@@ -3,6 +3,7 @@ import { RouterHistoryService } from '@services/router-history.service';
 
 @Directive({
     selector: '[redactionNavigateLastDossiersScreen]',
+    standalone: true,
 })
 export class NavigateLastDossiersScreenDirective {
     constructor(private readonly _routerHistoryService: RouterHistoryService) {}

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

@@ -1,66 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { MatConfigModule } from '../mat-config/mat-config.module';
-import { IconsModule } from '../icons/icons.module';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { DonutChartComponent } from './components/donut-chart/donut-chart.component';
-import {
-    CircleButtonComponent,
-    DynamicInputComponent,
-    HasScrollbarDirective,
-    HelpButtonComponent,
-    IconButtonComponent,
-    IqserAllowDirective,
-    IqserDenyDirective,
-    RoundCheckboxComponent,
-    StopPropagationDirective,
-} from '@iqser/common-ui';
-import { NavigateLastDossiersScreenDirective } from './directives/navigate-last-dossiers-screen.directive';
-import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
-import { TranslateModule } from '@ngx-translate/core';
-import { RouterModule } from '@angular/router';
-import { AddDossierDialogComponent } from './dialogs/add-dossier-dialog/add-dossier-dialog.component';
-import { ColorPickerModule } from 'ngx-color-picker';
-import { WatermarkSelectorComponent } from './components/dossier-watermark-selector/watermark-selector.component';
-import { IqserUsersModule } from '@iqser/common-ui/lib/users';
-import { SmallChipComponent } from '@iqser/common-ui/lib/shared';
-import { SelectComponent } from '@shared/components/select/select.component';
-import { FileAttributeComponent } from '../dossier-overview/components/file-attribute/file-attribute.component';
-import { MatDividerModule } from '@angular/material/divider';
-
-const components = [AddDossierDialogComponent];
-
-const utils = [NavigateLastDossiersScreenDirective];
-
-const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule, ColorPickerModule];
-
-const deleteThisWhenAllComponentsAreStandalone = [DonutChartComponent, FileAttributeComponent];
-
-@NgModule({
-    declarations: [...components, ...utils],
-    imports: [
-        CommonModule,
-        ...modules,
-        MonacoEditorModule,
-        TranslateModule,
-        RouterModule,
-        IqserUsersModule,
-        ...deleteThisWhenAllComponentsAreStandalone,
-        CircleButtonComponent,
-        IconButtonComponent,
-        SmallChipComponent,
-        StopPropagationDirective,
-        HasScrollbarDirective,
-        IqserAllowDirective,
-        IqserDenyDirective,
-        SelectComponent,
-        RoundCheckboxComponent,
-        DynamicInputComponent,
-        MatDividerModule,
-        WatermarkSelectorComponent,
-        HelpButtonComponent,
-    ],
-    exports: [...modules, ...components, ...utils, ...deleteThisWhenAllComponentsAreStandalone],
-})
-export class SharedModule {}

apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.ts

@@ -1,15 +1,19 @@
 import { Component, Inject } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { DetailsRadioOption, IconButtonTypes } from '@iqser/common-ui';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { DetailsRadioComponent, DetailsRadioOption, IconButtonComponent, IconButtonTypes } from '@iqser/common-ui';
+import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { OverwriteFileOption, OverwriteFileOptions } from '@red/domain';
+import { NgIf } from '@angular/common';
+import { MatCheckbox } from '@angular/material/checkbox';
 
 @Component({
     selector: 'redaction-overwrite-files-dialog',
     templateUrl: './overwrite-files-dialog.component.html',
     styleUrls: ['./overwrite-files-dialog.component.scss'],
+    standalone: true,
+    imports: [NgIf, TranslateModule, ReactiveFormsModule, DetailsRadioComponent, MatCheckbox, IconButtonComponent],
 })
 export class OverwriteFilesDialogComponent {
     readonly iconButtonTypes = IconButtonTypes;

apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.ts

@@ -6,9 +6,13 @@ import { ActiveDossiersService } from '@services/dossiers/active-dossiers.servic
 import { handleFileDrop } from '@utils/file-drop-utils';
 import { FileUploadModel } from '@upload-download/model/file-upload.model';
 import { DOSSIER_ID } from '../../../tokens';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     templateUrl: './file-drop.component.html',
+    standalone: true,
+    imports: [MatIcon, TranslateModule],
 })
 export class FileDropComponent {
     constructor(

apps/red-ui/src/app/modules/upload-download/file-upload-download.module.ts

@@ -1,30 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FileDropComponent } from './file-drop/file-drop.component';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { UploadStatusOverlayComponent } from './upload-status-overlay/upload-status-overlay.component';
-import { SharedModule } from '@shared/shared.module';
-import { OverwriteFilesDialogComponent } from './dialogs/overwrite-files-dialog/overwrite-files-dialog.component';
-import { FileUploadService } from './services/file-upload.service';
-import { FileDownloadService } from './services/file-download.service';
-import { StatusOverlayService } from './services/status-overlay.service';
-import { FileDropOverlayService } from './services/file-drop-overlay.service';
-import { UploadDownloadDialogService } from './services/upload-download-dialog.service';
-import { TranslateModule } from '@ngx-translate/core';
-import { CircleButtonComponent, DetailsRadioComponent, IconButtonComponent } from '@iqser/common-ui';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        SharedModule,
-        OverlayModule,
-        TranslateModule,
-        CircleButtonComponent,
-        IconButtonComponent,
-        DetailsRadioComponent,
-    ],
-    declarations: [FileDropComponent, UploadStatusOverlayComponent, OverwriteFilesDialogComponent],
-    providers: [UploadDownloadDialogService, FileUploadService, FileDownloadService, StatusOverlayService, FileDropOverlayService],
-    exports: [FileDropComponent, UploadStatusOverlayComponent],
-})
-export class FileUploadDownloadModule {}

apps/red-ui/src/app/modules/upload-download/services/file-download.service.ts

@@ -8,13 +8,16 @@ import { NGXLogger } from 'ngx-logger';
 import { mapEach } from '@iqser/common-ui/lib/utils';
 import { TenantsService } from '@iqser/common-ui/lib/tenants';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class FileDownloadService extends EntitiesService<IDownloadStatus, DownloadStatus> {
     protected readonly _defaultModelPath = 'async/download';
     protected readonly _entityClass = DownloadStatus;
     protected readonly _tenantsService = inject(TenantsService);
 
-    constructor(private readonly _configService: ConfigService, private readonly _logger: NGXLogger) {
+    constructor(
+        private readonly _configService: ConfigService,
+        private readonly _logger: NGXLogger,
+    ) {
         super();
     }
 

apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts

@@ -5,13 +5,16 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import { DOSSIER_ID } from '../../../tokens';
 import { BehaviorSubject } from 'rxjs';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class FileDropOverlayService {
     readonly #dropOverlayRef: OverlayRef;
     readonly #importingRedactions$ = new BehaviorSubject(false);
     #dossierId: string;
 
-    constructor(private readonly _overlay: Overlay, private readonly _injector: Injector) {
+    constructor(
+        private readonly _overlay: Overlay,
+        private readonly _injector: Injector,
+    ) {
         this.#dropOverlayRef = this._overlay.create({
             height: '100vh',
             width: '100vw',

apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts

@@ -21,7 +21,7 @@ export interface ActiveUpload {
     fileUploadModel: FileUploadModel;
 }
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class FileUploadService extends GenericService<IFileUploadResult> implements OnDestroy {
     static readonly MAX_PARALLEL_UPLOADS = 5;
     #pendingUploads: FileUploadModel[] = [];

apps/red-ui/src/app/modules/upload-download/services/status-overlay.service.ts

@@ -3,11 +3,14 @@ import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { UploadStatusOverlayComponent } from '../upload-status-overlay/upload-status-overlay.component';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class StatusOverlayService {
     private readonly _uploadStatusOverlayRef: OverlayRef;
 
-    constructor(private readonly _overlay: Overlay, private readonly _injector: Injector) {
+    constructor(
+        private readonly _overlay: Overlay,
+        private readonly _injector: Injector,
+    ) {
         this._uploadStatusOverlayRef = this._overlay.create();
     }
 

apps/red-ui/src/app/modules/upload-download/services/upload-download-dialog.service.ts

@@ -10,7 +10,7 @@ const dialogConfig = {
     autoFocus: false,
 };
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class UploadDownloadDialogService {
     constructor(private readonly _dialog: MatDialog) {}
 

apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts

@@ -2,11 +2,19 @@ import { OverlayRef } from '@angular/cdk/overlay';
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FileUploadModel } from '../model/file-upload.model';
 import { FileUploadService } from '../services/file-upload.service';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { CircleButtonComponent } from '@iqser/common-ui';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatProgressBar } from '@angular/material/progress-bar';
 
 @Component({
     selector: 'redaction-upload-status-overlay',
     templateUrl: './upload-status-overlay.component.html',
     styleUrls: ['./upload-status-overlay.component.scss'],
+    standalone: true,
+    imports: [MatIcon, TranslateModule, CircleButtonComponent, NgForOf, MatTooltip, NgIf, MatProgressBar],
 })
 export class UploadStatusOverlayComponent implements OnInit {
     collapsed = true;