From 9f702ab5c7a945a4eab7c3541fd4f69d70f00285 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Mon, 20 Mar 2023 17:59:46 +0200
Subject: [PATCH] RED-3800: move file attributes stuff to its own module

---
 .../app/modules/admin/admin-routing.module.ts |  6 +-
 .../src/app/modules/admin/admin.module.ts     | 10 +--
 ...ase-dossier-template-screen.component.html |  1 +
 ...ssier-states-listing-screen.component.html | 65 +++++-----------
 ...ssier-states-listing-screen.component.scss |  4 +
 .../active-fields-listing.component.html      |  0
 .../active-fields-listing.component.scss      |  0
 .../active-fields-listing.component.ts        |  0
 ...-edit-file-attribute-dialog.component.html |  0
 ...-edit-file-attribute-dialog.component.scss |  0
 ...dd-edit-file-attribute-dialog.component.ts |  2 +-
 ...butes-configurations-dialog.component.html |  0
 ...ributes-configurations-dialog.component.ts | 15 ++--
 ...ttributes-csv-import-dialog.component.html |  0
 ...ttributes-csv-import-dialog.component.scss |  0
 ...-attributes-csv-import-dialog.component.ts |  2 +-
 ...e-attributes-listing-screen.component.html | 51 ++++---------
 ...ile-attributes-listing-screen.component.ts | 76 +++++++++++++------
 .../file-attributes-listing.module.ts         | 72 ++++++++++++++++++
 .../admin/services/admin-dialog.service.ts    | 18 -----
 20 files changed, 178 insertions(+), 144 deletions(-)
 rename apps/red-ui/src/app/modules/admin/{dialogs/file-attributes-csv-import-dialog => screens/file-attributes-listing}/active-fields-listing/active-fields-listing.component.html (100%)
 rename apps/red-ui/src/app/modules/admin/{dialogs/file-attributes-csv-import-dialog => screens/file-attributes-listing}/active-fields-listing/active-fields-listing.component.scss (100%)
 rename apps/red-ui/src/app/modules/admin/{dialogs/file-attributes-csv-import-dialog => screens/file-attributes-listing}/active-fields-listing/active-fields-listing.component.ts (100%)
 rename apps/red-ui/src/app/modules/admin/{dialogs => screens/file-attributes-listing}/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html (100%)
 rename apps/red-ui/src/app/modules/admin/{dialogs => screens/file-attributes-listing}/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.scss (100%)
 rename apps/red-ui/src/app/modules/admin/{dialogs => screens/file-attributes-listing}/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts (98%)
 rename apps/red-ui/src/app/modules/admin/{dialogs => screens/file-attributes-listing}/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.html (100%)
 rename apps/red-ui/src/app/modules/admin/{dialogs => screens/file-attributes-listing}/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.ts (81%)
 rename apps/red-ui/src/app/modules/admin/{dialogs => screens/file-attributes-listing}/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html (100%)
 rename apps/red-ui/src/app/modules/admin/{dialogs => screens/file-attributes-listing}/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss (100%)
 rename apps/red-ui/src/app/modules/admin/{dialogs => screens/file-attributes-listing}/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts (99%)
 create mode 100644 apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing.module.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 71a10eb67..68703dac6 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
@@ -3,7 +3,6 @@ import { CompositeRouteGuard, IqserAuthGuard, IqserPermissionsGuard, IqserRoutes
 import { RedRoleGuard } from '@users/red-role.guard';
 import { EntitiesListingScreenComponent } from './screens/entities-listing/entities-listing-screen.component';
 import { PendingChangesGuard } from '@guards/can-deactivate.guard';
-import { FileAttributesListingScreenComponent } from './screens/file-attributes-listing/file-attributes-listing-screen.component';
 import { DefaultColorsScreenComponent } from './screens/default-colors/default-colors-screen.component';
 import { UserListingScreenComponent } from './screens/user-listing/user-listing-screen.component';
 import { DigitalSignatureScreenComponent } from './screens/digital-signature/digital-signature-screen.component';
@@ -64,7 +63,9 @@ const dossierTemplateIdRoutes: IqserRoutes = [
     },
     {
         path: 'file-attributes',
-        component: FileAttributesListingScreenComponent,
+        component: BaseDossierTemplateScreenComponent,
+        loadChildren: () =>
+            import('./screens/file-attributes-listing/file-attributes-listing.module').then(m => m.FileAttributesListingModule),
         canActivate: [CompositeRouteGuard],
         data: {
             routeGuards: [IqserAuthGuard, RedRoleGuard],
@@ -97,6 +98,7 @@ const dossierTemplateIdRoutes: IqserRoutes = [
     },
     {
         path: 'dossier-states',
+        component: BaseDossierTemplateScreenComponent,
         loadChildren: () =>
             import('./screens/dossier-states-listing/dossier-states-listing.module').then(m => m.DossierStatesListingModule),
         canActivate: [CompositeRouteGuard],
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 215a8529b..edecbf01c 100644
--- a/apps/red-ui/src/app/modules/admin/admin.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin.module.ts
@@ -6,10 +6,9 @@ import { AuditScreenComponent } from './screens/audit/audit-screen.component';
 import { DefaultColorsScreenComponent } from './screens/default-colors/default-colors-screen.component';
 import { EntitiesListingScreenComponent } from './screens/entities-listing/entities-listing-screen.component';
 import { DigitalSignatureScreenComponent } from './screens/digital-signature/digital-signature-screen.component';
-import { FileAttributesListingScreenComponent } from './screens/file-attributes-listing/file-attributes-listing-screen.component';
 import { UserListingScreenComponent } from './screens/user-listing/user-listing-screen.component';
 import { DossierTemplateBreadcrumbsComponent } from './shared/components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component';
-import { AddEditFileAttributeDialogComponent } from './dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component';
+import { AddEditFileAttributeDialogComponent } from './screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component';
 import { AddEditCloneDossierTemplateDialogComponent } from './dialogs/add-edit-dossier-template-dialog/add-edit-clone-dossier-template-dialog.component';
 import { AddEntityDialogComponent } from './dialogs/add-entity-dialog/add-entity-dialog.component';
 import { EditColorDialogComponent } from './dialogs/edit-color-dialog/edit-color-dialog.component';
@@ -18,8 +17,6 @@ import { GeneralConfigScreenComponent } from './screens/general-config/general-c
 import { SmtpAuthDialogComponent } from './dialogs/smtp-auth-dialog/smtp-auth-dialog.component';
 import { AddEditUserDialogComponent } from './dialogs/add-edit-user-dialog/add-edit-user-dialog.component';
 import { UsersStatsComponent } from './components/users-stats/users-stats.component';
-import { FileAttributesCsvImportDialogComponent } from './dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component';
-import { ActiveFieldsListingComponent } from './dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component';
 import { ResetPasswordComponent } from './dialogs/add-edit-user-dialog/reset-password/reset-password.component';
 import { UserDetailsComponent } from './dialogs/add-edit-user-dialog/user-details/user-details.component';
 import { AddEditDossierAttributeDialogComponent } from './dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component';
@@ -32,7 +29,6 @@ import { SmtpConfigService } from './services/smtp-config.service';
 import { UploadDictionaryDialogComponent } from './dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component';
 import { GeneralConfigFormComponent } from './screens/general-config/general-config-form/general-config-form.component';
 import { SmtpFormComponent } from './screens/general-config/smtp-form/smtp-form.component';
-import { FileAttributesConfigurationsDialogComponent } from './dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component';
 import { BaseDossierTemplateScreenComponent } from './base-dossier-templates-screen/base-dossier-template-screen.component';
 import { A11yModule } from '@angular/cdk/a11y';
 import { BaseEntityScreenComponent } from './base-entity-screen/base-entity-screen.component';
@@ -70,8 +66,6 @@ const dialogs = [
     EditColorDialogComponent,
     SmtpAuthDialogComponent,
     AddEditUserDialogComponent,
-    FileAttributesConfigurationsDialogComponent,
-    FileAttributesCsvImportDialogComponent,
     AddEditDossierAttributeDialogComponent,
     UploadDictionaryDialogComponent,
     ConfigureCertificateDialogComponent,
@@ -83,7 +77,6 @@ const screens = [
     DefaultColorsScreenComponent,
     EntitiesListingScreenComponent,
     DigitalSignatureScreenComponent,
-    FileAttributesListingScreenComponent,
     UserListingScreenComponent,
     GeneralConfigScreenComponent,
     DossierAttributesListingScreenComponent,
@@ -91,7 +84,6 @@ const screens = [
 
 const components = [
     UsersStatsComponent,
-    ActiveFieldsListingComponent,
     ResetPasswordComponent,
     UserDetailsComponent,
     BaseAdminScreenComponent,
diff --git a/apps/red-ui/src/app/modules/admin/base-dossier-templates-screen/base-dossier-template-screen.component.html b/apps/red-ui/src/app/modules/admin/base-dossier-templates-screen/base-dossier-template-screen.component.html
index ee08d19cc..84f9dc06e 100644
--- a/apps/red-ui/src/app/modules/admin/base-dossier-templates-screen/base-dossier-template-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/base-dossier-templates-screen/base-dossier-template-screen.component.html
@@ -10,6 +10,7 @@
             <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
+                buttonId="close-view-btn"
                 icon="iqser:close"
                 tooltipPosition="below"
             ></iqser-circle-button>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.html
index 92bc9e700..f87e63f8b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.html
@@ -1,48 +1,25 @@
-<section>
-    <div class="page-header">
-        <redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
+<div class="content-container">
+    <iqser-table
+        [headerTemplate]="headerTemplate"
+        [itemSize]="80"
+        [noDataText]="'dossier-states-listing.no-data.title' | translate"
+        [noMatchText]="'dossier-states-listing.no-match.title' | translate"
+        [tableColumnConfigs]="tableColumnConfigs"
+        emptyColumnWidth="1fr"
+        noDataIcon="red:attribute"
+    ></iqser-table>
+</div>
 
-        <div class="actions flex-1">
-            <redaction-dossier-template-actions></redaction-dossier-template-actions>
-
-            <iqser-circle-button
-                [routerLink]="['../..']"
-                [tooltip]="'common.close' | translate"
-                icon="iqser:close"
-                tooltipPosition="below"
-            ></iqser-circle-button>
-        </div>
-    </div>
-
-    <div class="content-inner">
-        <div class="overlay-shadow"></div>
-
-        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
-
-        <div class="content-container">
-            <iqser-table
-                [headerTemplate]="headerTemplate"
-                [itemSize]="80"
-                [noDataText]="'dossier-states-listing.no-data.title' | translate"
-                [noMatchText]="'dossier-states-listing.no-match.title' | translate"
-                [tableColumnConfigs]="tableColumnConfigs"
-                emptyColumnWidth="1fr"
-                noDataIcon="red:attribute"
-            ></iqser-table>
-        </div>
-
-        <div class="right-container">
-            <redaction-donut-chart
-                *ngIf="chartConfig$ | async as chartConfig"
-                [config]="chartConfig"
-                [radius]="80"
-                [strokeWidth]="15"
-                [subtitles]="['dossier-states-listing.chart.dossier-states' | translate : { count: chartConfig.length }]"
-                [totalType]="'simpleLabel'"
-            ></redaction-donut-chart>
-        </div>
-    </div>
-</section>
+<div class="right-container">
+    <redaction-donut-chart
+        *ngIf="chartConfig$ | async as chartConfig"
+        [config]="chartConfig"
+        [radius]="80"
+        [strokeWidth]="15"
+        [subtitles]="['dossier-states-listing.chart.dossier-states' | translate : { count: chartConfig.length }]"
+        [totalType]="'simpleLabel'"
+    ></redaction-donut-chart>
+</div>
 
 <ng-template #headerTemplate>
     <div class="table-header-actions">
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.scss
index 9c456907d..a1aa8713e 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.scss
@@ -1,3 +1,7 @@
+:host {
+    flex-direction: row !important;
+}
+
 .right-container {
     padding: 50px 26px 0;
     width: 250px;
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/active-fields-listing/active-fields-listing.component.html
similarity index 100%
rename from apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
rename to apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/active-fields-listing/active-fields-listing.component.html
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/active-fields-listing/active-fields-listing.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
rename to apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/active-fields-listing/active-fields-listing.component.scss
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/active-fields-listing/active-fields-listing.component.ts
similarity index 100%
rename from apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
rename to apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/active-fields-listing/active-fields-listing.component.ts
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
similarity index 100%
rename from apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
rename to apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.scss
rename to apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.scss
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
similarity index 98%
rename from apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
rename to apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
index 4c83ffc7c..6d2a89186 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
@@ -30,7 +30,7 @@ export class AddEditFileAttributeDialogComponent extends BaseDialogComponent {
     };
 
     constructor(
-        protected readonly _dialogRef: MatDialogRef<AddEditFileAttributeDialogComponent>,
+        protected readonly _dialogRef: MatDialogRef<AddEditFileAttributeDialogComponent, IFileAttributeConfig>,
         @Inject(MAT_DIALOG_DATA) readonly data: AddEditFileAttributeDialogData,
     ) {
         super(_dialogRef, !!data.fileAttribute);
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.html
similarity index 100%
rename from apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.html
rename to apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.html
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.ts
similarity index 81%
rename from apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.ts
rename to apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.ts
index 1d2d34bcb..97a94b1f2 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { UntypedFormGroup, Validators } from '@angular/forms';
+import { Validators } from '@angular/forms';
 import { FileAttributeEncodingTypes, IFileAttributesConfig } from '@red/domain';
 import { fileAttributeEncodingTypesTranslations } from '@translations/file-attribute-encoding-types-translations';
 import { BaseDialogComponent } from '@iqser/common-ui';
@@ -12,12 +12,9 @@ import { BaseDialogComponent } from '@iqser/common-ui';
 export class FileAttributesConfigurationsDialogComponent extends BaseDialogComponent {
     readonly encodingTypeOptions = Object.keys(FileAttributeEncodingTypes);
     readonly translations = fileAttributeEncodingTypesTranslations;
-    readonly #configuration = this._data.config;
+    readonly #configuration = inject<IFileAttributesConfig>(MAT_DIALOG_DATA);
 
-    constructor(
-        protected readonly _dialogRef: MatDialogRef<FileAttributesConfigurationsDialogComponent>,
-        @Inject(MAT_DIALOG_DATA) private readonly _data: { config: IFileAttributesConfig; dossierTemplateId: string },
-    ) {
+    constructor(protected readonly _dialogRef: MatDialogRef<FileAttributesConfigurationsDialogComponent, IFileAttributesConfig>) {
         super(_dialogRef, true);
         this.form = this.#getForm();
         this.initialFormValue = this.form.getRawValue();
@@ -39,7 +36,7 @@ export class FileAttributesConfigurationsDialogComponent extends BaseDialogCompo
         this._dialogRef.close(this.#getConfiguration());
     }
 
-    #getConfiguration() {
+    #getConfiguration(): IFileAttributesConfig {
         const supportCsvMapping = this.form.get('supportCsvMapping').value;
         if (supportCsvMapping) {
             return {
@@ -56,7 +53,7 @@ export class FileAttributesConfigurationsDialogComponent extends BaseDialogCompo
         };
     }
 
-    #getForm(): UntypedFormGroup {
+    #getForm() {
         return this._formBuilder.group({
             supportCsvMapping: [!!this.#configuration.filenameMappingColumnHeaderName],
             keyColumn: [this.#configuration.filenameMappingColumnHeaderName || '', [Validators.required]],
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
similarity index 100%
rename from apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
rename to apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
rename to apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
similarity index 99%
rename from apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
rename to apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
index f84139d14..bac130bfe 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
@@ -10,7 +10,7 @@ import { FileAttributeConfig, FileAttributeConfigTypes, FileAttributeEncodingTyp
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
 import { fileAttributeEncodingTypesTranslations } from '@translations/file-attribute-encoding-types-translations';
 
-interface IFileAttributesCSVImportData {
+export interface IFileAttributesCSVImportData {
     readonly csv: File;
     readonly dossierTemplateId: string;
     readonly existingConfiguration: IFileAttributesConfig;
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index f1f991fc8..d563cb36a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -1,41 +1,18 @@
-<section>
-    <div class="page-header">
-        <redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
+<div class="content-container">
+    <iqser-table
+        [bulkActions]="bulkActions"
+        [headerTemplate]="headerTemplate"
+        [itemSize]="80"
+        [noDataText]="'file-attributes-listing.no-data.title' | translate"
+        [noMatchText]="'file-attributes-listing.no-match.title' | translate"
+        [selectionEnabled]="permissionsService.canEditGlobalFileAttributes()"
+        [tableColumnConfigs]="tableColumnConfigs"
+        emptyColumnWidth="1fr"
+        noDataIcon="red:attribute"
+    ></iqser-table>
+</div>
 
-        <div class="actions flex-1">
-            <redaction-dossier-template-actions></redaction-dossier-template-actions>
-
-            <iqser-circle-button
-                [routerLink]="['../..']"
-                [tooltip]="'common.close' | translate"
-                icon="iqser:close"
-                tooltipPosition="below"
-            ></iqser-circle-button>
-        </div>
-    </div>
-
-    <div class="content-inner">
-        <div class="overlay-shadow"></div>
-
-        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
-
-        <div class="content-container">
-            <iqser-table
-                [bulkActions]="bulkActions"
-                [headerTemplate]="headerTemplate"
-                [itemSize]="80"
-                [noDataText]="'file-attributes-listing.no-data.title' | translate"
-                [noMatchText]="'file-attributes-listing.no-match.title' | translate"
-                [selectionEnabled]="permissionsService.canEditGlobalFileAttributes()"
-                [tableColumnConfigs]="tableColumnConfigs"
-                emptyColumnWidth="1fr"
-                noDataIcon="red:attribute"
-            ></iqser-table>
-        </div>
-
-        <div class="right-container"></div>
-    </div>
-</section>
+<div class="right-container"></div>
 
 <ng-template #impactedTemplates let-data="data">
     <ul class="templates-container flex">
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
index 337cf6b2b..86084ba5b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
@@ -1,10 +1,12 @@
-import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { AdminDialogService } from '../../services/admin-dialog.service';
 import {
     CircleButtonTypes,
+    defaultDialogConfig,
     getCurrentUser,
     getParam,
     IconButtonTypes,
+    largeDialogConfig,
     ListingComponent,
     listingProvidersFactory,
     LoadingService,
@@ -20,11 +22,20 @@ import { firstValueFrom } from 'rxjs';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { PermissionsService } from '@services/permissions.service';
 import { ROLES } from '@users/roles';
+import { MatDialog } from '@angular/material/dialog';
+import {
+    AddEditFileAttributeDialogComponent,
+    AddEditFileAttributeDialogData,
+} from './add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component';
+import {
+    FileAttributesCsvImportDialogComponent,
+    IFileAttributesCSVImportData,
+} from './file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component';
+import { FileAttributesConfigurationsDialogComponent } from './file-attributes-configurations-dialog/file-attributes-configurations-dialog.component';
 
 @Component({
     templateUrl: './file-attributes-listing-screen.component.html',
     styleUrls: ['./file-attributes-listing-screen.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
     providers: listingProvidersFactory(FileAttributesListingScreenComponent),
 })
 export class FileAttributesListingScreenComponent extends ListingComponent<FileAttributeConfig> implements OnInit, OnDestroy {
@@ -58,6 +69,7 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
         private readonly _toaster: Toaster,
         private readonly _loadingService: LoadingService,
         private readonly _dialogService: AdminDialogService,
+        private readonly _dialog: MatDialog,
         private readonly _fileAttributesService: FileAttributesService,
         private readonly _dossierTemplatesService: DossierTemplatesService,
     ) {
@@ -76,16 +88,25 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
         await this.#loadData();
     }
 
-    openAddEditAttributeDialog(fileAttribute?: IFileAttributeConfig) {
+    async openAddEditAttributeDialog(fileAttribute?: IFileAttributeConfig) {
         const data = {
             fileAttribute,
             dossierTemplateId: this.#dossierTemplateId,
             numberOfDisplayedAttrs: this._numberOfDisplayedAttrs,
             numberOfFilterableAttrs: this._numberOfFilterableAttrs,
         };
-        this._dialogService.openDialog('addEditFileAttribute', data, (newValue: IFileAttributeConfig) => {
-            this._loadingService.loadWhile(this.#createNewFileAttributeAndRefreshView(newValue));
-        });
+
+        const ref = this._dialog.open<AddEditFileAttributeDialogComponent, AddEditFileAttributeDialogData, IFileAttributeConfig>(
+            AddEditFileAttributeDialogComponent,
+            {
+                ...defaultDialogConfig,
+                autoFocus: true,
+                data,
+            },
+        );
+
+        const result = await firstValueFrom(ref.afterClosed());
+        this._loadingService.loadWhile(this.#createNewFileAttributeAndRefreshView(result));
     }
 
     async openConfirmDeleteAttributeDialog(attributes: FileAttributeConfig[] = this.listingService.selected): Promise<void> {
@@ -98,32 +119,41 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
         });
     }
 
-    importCSV(files: FileList | File[]) {
+    async importCSV(files: FileList | File[]) {
         const csv = files[0];
         this._fileInput.nativeElement.value = null;
 
-        this._dialogService.openDialog(
-            'importFileAttributes',
+        const ref = this._dialog.open<FileAttributesCsvImportDialogComponent, IFileAttributesCSVImportData>(
+            FileAttributesCsvImportDialogComponent,
             {
-                csv,
-                dossierTemplateId: this.#dossierTemplateId,
-                existingConfiguration: this.#existingConfiguration,
+                ...largeDialogConfig,
+                disableClose: false,
+                data: {
+                    csv,
+                    dossierTemplateId: this.#dossierTemplateId,
+                    existingConfiguration: this.#existingConfiguration,
+                },
             },
-            async () => this.#loadData(),
         );
+
+        await firstValueFrom(ref.afterClosed());
+        await this.#loadData();
     }
 
-    openConfigurationsDialog() {
-        const ref = this._dialogService.openDialog('fileAttributesConfigurations', {
-            config: this.#existingConfiguration,
-            dossierTemplateId: this.#dossierTemplateId,
-        });
+    async openConfigurationsDialog() {
+        const ref = this._dialog.open<FileAttributesConfigurationsDialogComponent, IFileAttributesConfig, IFileAttributesConfig>(
+            FileAttributesConfigurationsDialogComponent,
+            {
+                ...defaultDialogConfig,
+                data: this.#existingConfiguration,
+            },
+        );
 
-        ref.afterClosed().subscribe(async (configuration: IFileAttributesConfig) => {
-            if (configuration) {
-                await this.#setConfigAndLoadData(configuration);
-            }
-        });
+        const configuration = await firstValueFrom(ref.afterClosed());
+
+        if (configuration) {
+            await this.#setConfigAndLoadData(configuration);
+        }
     }
 
     async #setConfigAndLoadData(configuration: IFileAttributesConfig) {
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing.module.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing.module.ts
new file mode 100644
index 000000000..5267ba3a5
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing.module.ts
@@ -0,0 +1,72 @@
+import { NgModule } from '@angular/core';
+import { FileAttributesListingScreenComponent } from './file-attributes-listing-screen.component';
+import { RouterModule } from '@angular/router';
+import {
+    ChevronButtonComponent,
+    CircleButtonComponent,
+    EditableInputComponent,
+    IconButtonComponent,
+    InputWithActionComponent,
+    IqserAllowDirective,
+    IqserHelpModeModule,
+    IqserListingModule,
+    IqserRoutes,
+    RoundCheckboxComponent,
+} from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ActiveFieldsListingComponent } from './active-fields-listing/active-fields-listing.component';
+import { FileAttributesCsvImportDialogComponent } from './file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
+import { FileAttributesConfigurationsDialogComponent } from './file-attributes-configurations-dialog/file-attributes-configurations-dialog.component';
+
+const routes: IqserRoutes = [
+    {
+        path: '',
+        component: FileAttributesListingScreenComponent,
+    },
+];
+
+@NgModule({
+    declarations: [
+        FileAttributesListingScreenComponent,
+        ActiveFieldsListingComponent,
+        FileAttributesCsvImportDialogComponent,
+        FileAttributesConfigurationsDialogComponent,
+    ],
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        IqserListingModule,
+        TranslateModule,
+        CircleButtonComponent,
+        InputWithActionComponent,
+        IqserHelpModeModule,
+        IqserAllowDirective,
+        IconButtonComponent,
+        MatIconModule,
+        MatTooltipModule,
+        RoundCheckboxComponent,
+        MatFormFieldModule,
+        MatAutocompleteModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        MatSelectModule,
+        MatDialogModule,
+        MatMenuModule,
+        ChevronButtonComponent,
+        EditableInputComponent,
+        FormsModule,
+        MatSlideToggleModule,
+    ],
+})
+export class FileAttributesListingModule {}
diff --git a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
index 13be04637..2925a9da5 100644
--- a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
@@ -1,12 +1,10 @@
 import { Injectable, TemplateRef } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { AddEditFileAttributeDialogComponent } from '../dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component';
 import { AddEntityDialogComponent } from '../dialogs/add-entity-dialog/add-entity-dialog.component';
 import { AddEditCloneDossierTemplateDialogComponent } from '../dialogs/add-edit-dossier-template-dialog/add-edit-clone-dossier-template-dialog.component';
 import { EditColorDialogComponent } from '../dialogs/edit-color-dialog/edit-color-dialog.component';
 import { SmtpAuthDialogComponent } from '../dialogs/smtp-auth-dialog/smtp-auth-dialog.component';
 import { AddEditUserDialogComponent } from '../dialogs/add-edit-user-dialog/add-edit-user-dialog.component';
-import { FileAttributesCsvImportDialogComponent } from '../dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component';
 import { AddEditDossierAttributeDialogComponent } from '../dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component';
 import {
     ConfirmationDialogComponent,
@@ -14,12 +12,10 @@ import {
     DialogConfig,
     DialogService,
     IConfirmationDialogData,
-    largeDialogConfig,
     LoadingService,
     TitleColors,
 } from '@iqser/common-ui';
 import { UploadDictionaryDialogComponent } from '../dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component';
-import { FileAttributesConfigurationsDialogComponent } from '../dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { firstValueFrom, forkJoin } from 'rxjs';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
@@ -33,9 +29,6 @@ type DialogType =
     | 'confirm'
     | 'addEntity'
     | 'editColor'
-    | 'addEditFileAttribute'
-    | 'importFileAttributes'
-    | 'fileAttributesConfigurations'
     | 'addEditUser'
     | 'smtpAuthConfig'
     | 'addEditCloneDossierTemplate'
@@ -59,17 +52,6 @@ export class AdminDialogService extends DialogService<DialogType> {
             component: EditColorDialogComponent,
             dialogConfig: { autoFocus: true },
         },
-        addEditFileAttribute: {
-            component: AddEditFileAttributeDialogComponent,
-            dialogConfig: { autoFocus: true },
-        },
-        fileAttributesConfigurations: {
-            component: FileAttributesConfigurationsDialogComponent,
-        },
-        importFileAttributes: {
-            component: FileAttributesCsvImportDialogComponent,
-            dialogConfig: { ...largeDialogConfig, ...{ disableClose: false } },
-        },
         addEditUser: {
             component: AddEditUserDialogComponent,
             dialogConfig: { autoFocus: true },