From 2fe3ff17918d163d90a1c26651d0d11644e8a4ff Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Tue, 21 Mar 2023 00:34:42 +0200
Subject: [PATCH] RED-3800: create dossier attributes listing module

---
 .../app/modules/admin/admin-routing.module.ts |  5 +-
 .../src/app/modules/admin/admin.module.ts     |  4 --
 ...it-dossier-attribute-dialog.component.html |  1 +
 ...it-dossier-attribute-dialog.component.scss |  5 ++
 ...edit-dossier-attribute-dialog.component.ts | 51 +++++++++++------
 ...r-attributes-listing-screen.component.html | 56 ++++++-------------
 ...ier-attributes-listing-screen.component.ts | 30 ++++++++--
 .../dossier-attributes-listing.module.ts      | 37 ++++++++++++
 .../admin/services/admin-dialog.service.ts    |  6 --
 9 files changed, 122 insertions(+), 73 deletions(-)
 rename apps/red-ui/src/app/modules/admin/{dialogs => screens/dossier-attributes-listing}/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html (99%)
 create mode 100644 apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.scss
 rename apps/red-ui/src/app/modules/admin/{dialogs => screens/dossier-attributes-listing}/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts (79%)
 create mode 100644 apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-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 68703dac6..7492cccfa 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
@@ -8,7 +8,6 @@ import { UserListingScreenComponent } from './screens/user-listing/user-listing-
 import { DigitalSignatureScreenComponent } from './screens/digital-signature/digital-signature-screen.component';
 import { AuditScreenComponent } from './screens/audit/audit-screen.component';
 import { RouterModule } from '@angular/router';
-import { DossierAttributesListingScreenComponent } from './screens/dossier-attributes-listing/dossier-attributes-listing-screen.component';
 import { GeneralConfigScreenComponent } from './screens/general-config/general-config-screen.component';
 import { BaseAdminScreenComponent } from './base-admin-screen/base-admin-screen.component';
 import { BaseDossierTemplateScreenComponent } from './base-dossier-templates-screen/base-dossier-template-screen.component';
@@ -90,7 +89,9 @@ const dossierTemplateIdRoutes: IqserRoutes = [
     },
     {
         path: 'dossier-attributes',
-        component: DossierAttributesListingScreenComponent,
+        component: BaseDossierTemplateScreenComponent,
+        loadChildren: () =>
+            import('./screens/dossier-attributes-listing/dossier-attributes-listing.module').then(m => m.DossierAttributesListingModule),
         canActivate: [CompositeRouteGuard],
         data: {
             routeGuards: [IqserAuthGuard, RedRoleGuard],
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 a1f9839ca..881b9ddc6 100644
--- a/apps/red-ui/src/app/modules/admin/admin.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin.module.ts
@@ -18,8 +18,6 @@ import { AddEditUserDialogComponent } from './dialogs/add-edit-user-dialog/add-e
 import { UsersStatsComponent } from './components/users-stats/users-stats.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';
-import { DossierAttributesListingScreenComponent } from './screens/dossier-attributes-listing/dossier-attributes-listing-screen.component';
 import { AuditService } from './services/audit.service';
 import { DigitalSignatureService } from './services/digital-signature.service';
 import { BaseAdminScreenComponent } from './base-admin-screen/base-admin-screen.component';
@@ -64,7 +62,6 @@ const dialogs = [
     EditColorDialogComponent,
     SmtpAuthDialogComponent,
     AddEditUserDialogComponent,
-    AddEditDossierAttributeDialogComponent,
     UploadDictionaryDialogComponent,
     ConfigureCertificateDialogComponent,
     AuditInfoDialogComponent,
@@ -77,7 +74,6 @@ const screens = [
     DigitalSignatureScreenComponent,
     UserListingScreenComponent,
     GeneralConfigScreenComponent,
-    DossierAttributesListingScreenComponent,
 ];
 
 const components = [
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
similarity index 99%
rename from apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
rename to apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
index 42c9d30b1..c793c3bab 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
@@ -29,6 +29,7 @@
                 </mat-form-field>
             </div>
         </div>
+
         <div class="dialog-actions">
             <iqser-icon-button
                 (action)="save()"
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.scss b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.scss
new file mode 100644
index 000000000..7d861adcf
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.scss
@@ -0,0 +1,5 @@
+@use 'common-mixins';
+
+.dialog-header {
+    @include common-mixins.line-clamp(1);
+}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
similarity index 79%
rename from apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
rename to apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
index a2f77d6a8..6ee8c9116 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
@@ -1,20 +1,36 @@
 import { Component, HostListener, Inject, OnDestroy } from '@angular/core';
-import { UntypedFormGroup, Validators } from '@angular/forms';
+import { ReactiveFormsModule, Validators } from '@angular/forms';
 import { DossierAttributeConfigTypes, FileAttributeConfigTypes, IDossierAttributeConfig } from '@red/domain';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { BaseDialogComponent, IqserEventTarget } from '@iqser/common-ui';
+import { BaseDialogComponent, CircleButtonComponent, IconButtonComponent, IqserEventTarget } from '@iqser/common-ui';
 import { HttpErrorResponse } from '@angular/common/http';
 import { DossierAttributesService } from '@services/entity-services/dossier-attributes.service';
 import { dossierAttributeTypesTranslations } from '@translations/dossier-attribute-types-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
 
 export interface AddEditDossierAttributeDialogData {
     readonly dossierAttribute: IDossierAttributeConfig;
-    dossierTemplateId: string;
+    readonly dossierTemplateId: string;
 }
 
 @Component({
     templateUrl: './add-edit-dossier-attribute-dialog.component.html',
+    styleUrls: ['./add-edit-dossier-attribute-dialog.component.scss'],
+    standalone: true,
+    imports: [
+        TranslateModule,
+        ReactiveFormsModule,
+        NgIf,
+        MatFormFieldModule,
+        MatSelectModule,
+        NgForOf,
+        IconButtonComponent,
+        CircleButtonComponent,
+    ],
 })
 export class AddEditDossierAttributeDialogComponent extends BaseDialogComponent implements OnDestroy {
     readonly dossierAttribute = this.data.dossierAttribute;
@@ -31,7 +47,7 @@ export class AddEditDossierAttributeDialogComponent extends BaseDialogComponent
         @Inject(MAT_DIALOG_DATA) readonly data: AddEditDossierAttributeDialogData,
     ) {
         super(_dialogRef, !!data.dossierAttribute);
-        this.form = this._getForm(this.dossierAttribute);
+        this.form = this.#form;
         this.initialFormValue = this.form.getRawValue();
     }
 
@@ -49,6 +65,20 @@ export class AddEditDossierAttributeDialogComponent extends BaseDialogComponent
         return false;
     }
 
+    get #form() {
+        const dossierAttribute = this.data.dossierAttribute;
+        return this._formBuilder.group({
+            label: [dossierAttribute?.label, Validators.required],
+            ...(!!dossierAttribute && {
+                placeholder: {
+                    value: dossierAttribute.placeholder,
+                    disabled: true,
+                },
+            }),
+            type: [dossierAttribute?.type || FileAttributeConfigTypes.TEXT, Validators.required],
+        });
+    }
+
     async save() {
         this._loadingService.start();
 
@@ -77,17 +107,4 @@ export class AddEditDossierAttributeDialogComponent extends BaseDialogComponent
             await this.save();
         }
     }
-
-    private _getForm(dossierAttribute: IDossierAttributeConfig): UntypedFormGroup {
-        return this._formBuilder.group({
-            label: [dossierAttribute?.label, Validators.required],
-            ...(!!dossierAttribute && {
-                placeholder: {
-                    value: dossierAttribute.placeholder,
-                    disabled: true,
-                },
-            }),
-            type: [dossierAttribute?.type || FileAttributeConfigTypes.TEXT, Validators.required],
-        });
-    }
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
index e72e17e99..0df2332b3 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
@@ -1,42 +1,19 @@
-<section>
-    <div class="page-header">
-        <redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
-
-        <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
-                (noDataAction)="openAddEditAttributeDialog()"
-                [bulkActions]="bulkActions"
-                [headerTemplate]="headerTemplate"
-                [itemSize]="50"
-                [noDataButtonLabel]="'dossier-attributes-listing.no-data.action' | translate"
-                [noDataText]="'dossier-attributes-listing.no-data.title' | translate"
-                [noMatchText]="'dossier-attributes-listing.no-match.title' | translate"
-                [selectionEnabled]="canEditDossierAttributes"
-                [showNoDataButton]="canEditDossierAttributes"
-                [tableColumnConfigs]="tableColumnConfigs"
-                emptyColumnWidth="1fr"
-                noDataIcon="red:attribute"
-            ></iqser-table>
-        </div>
-    </div>
-</section>
+<div class="content-container">
+    <iqser-table
+        (noDataAction)="openAddEditAttributeDialog()"
+        [bulkActions]="bulkActions"
+        [headerTemplate]="headerTemplate"
+        [itemSize]="50"
+        [noDataButtonLabel]="'dossier-attributes-listing.no-data.action' | translate"
+        [noDataText]="'dossier-attributes-listing.no-data.title' | translate"
+        [noMatchText]="'dossier-attributes-listing.no-match.title' | translate"
+        [selectionEnabled]="canEditDossierAttributes"
+        [showNoDataButton]="canEditDossierAttributes"
+        [tableColumnConfigs]="tableColumnConfigs"
+        emptyColumnWidth="1fr"
+        noDataIcon="red:attribute"
+    ></iqser-table>
+</div>
 
 <ng-template #bulkActions>
     <iqser-circle-button
@@ -73,6 +50,7 @@
     </ul>
 </ng-template>
 
+<!--TODO: move to a separate component-->
 <ng-template #tableItemTemplate let-entity="entity">
     <div *ngIf="cast(entity) as attribute">
         <div [matTooltip]="attribute.label" class="cell" matTooltipPosition="above">
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
index 941ffd6e7..52237039e 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import {
     CircleButtonTypes,
+    defaultDialogConfig,
     getCurrentUser,
     getParam,
     IconButtonTypes,
@@ -16,6 +17,11 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DOSSIER_TEMPLATE_ID, DossierAttributeConfig, IDossierAttributeConfig, User } from '@red/domain';
 import { firstValueFrom } from 'rxjs';
 import { PermissionsService } from '@services/permissions.service';
+import { MatDialog } from '@angular/material/dialog';
+import {
+    AddEditDossierAttributeDialogComponent,
+    AddEditDossierAttributeDialogData,
+} from './add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component';
 
 @Component({
     templateUrl: './dossier-attributes-listing-screen.component.html',
@@ -44,13 +50,14 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
         readonly permissionsService: PermissionsService,
         private readonly _loadingService: LoadingService,
         private readonly _dialogService: AdminDialogService,
+        private readonly _dialog: MatDialog,
         private readonly _dossierAttributesService: DossierAttributesService,
     ) {
         super();
     }
 
     async ngOnInit(): Promise<void> {
-        await this._loadData();
+        await this.#loadData();
     }
 
     async openConfirmDeleteAttributeDialog($event: MouseEvent, attributes: DossierAttributeConfig[] = this.listingService.selected) {
@@ -58,17 +65,30 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
             this._loadingService.start();
             const ids = attributes.map(a => a.id);
             await firstValueFrom(this._dossierAttributesService.delete(ids, this.#dossierTemplateId));
-            await this._loadData();
+            await this.#loadData();
         });
     }
 
-    openAddEditAttributeDialog(dossierAttribute?: IDossierAttributeConfig) {
+    async openAddEditAttributeDialog(dossierAttribute?: IDossierAttributeConfig) {
         const dossierTemplateId = this.#dossierTemplateId;
 
-        this._dialogService.openDialog('addEditDossierAttribute', { dossierAttribute, dossierTemplateId }, async () => this._loadData());
+        const ref = this._dialog.open<AddEditDossierAttributeDialogComponent, AddEditDossierAttributeDialogData, boolean>(
+            AddEditDossierAttributeDialogComponent,
+            {
+                ...defaultDialogConfig,
+                autoFocus: true,
+                data: { dossierAttribute, dossierTemplateId },
+            },
+        );
+
+        const result = await firstValueFrom(ref.afterClosed());
+
+        if (result) {
+            await this.#loadData();
+        }
     }
 
-    private async _loadData() {
+    async #loadData() {
         this._loadingService.start();
         await firstValueFrom(this._dossierAttributesService.loadAll(this.#dossierTemplateId));
         this._loadingService.stop();
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing.module.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing.module.ts
new file mode 100644
index 000000000..5729c4cd7
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing.module.ts
@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { DossierAttributesListingScreenComponent } from './dossier-attributes-listing-screen.component';
+import { CommonModule } from '@angular/common';
+import {
+    CircleButtonComponent,
+    IconButtonComponent,
+    InputWithActionComponent,
+    IqserHelpModeModule,
+    IqserListingModule,
+    IqserRoutes,
+} from '@iqser/common-ui';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+const routes: IqserRoutes = [
+    {
+        path: '',
+        component: DossierAttributesListingScreenComponent,
+    },
+];
+
+@NgModule({
+    declarations: [DossierAttributesListingScreenComponent],
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        TranslateModule,
+        CircleButtonComponent,
+        InputWithActionComponent,
+        IconButtonComponent,
+        IqserHelpModeModule,
+        MatTooltipModule,
+        IqserListingModule,
+    ],
+})
+export class DossierAttributesListingModule {}
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 2925a9da5..1700faaa7 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
@@ -5,7 +5,6 @@ import { AddEditCloneDossierTemplateDialogComponent } from '../dialogs/add-edit-
 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 { AddEditDossierAttributeDialogComponent } from '../dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component';
 import {
     ConfirmationDialogComponent,
     ConfirmOptions,
@@ -33,7 +32,6 @@ type DialogType =
     | 'smtpAuthConfig'
     | 'addEditCloneDossierTemplate'
     | 'auditInfo'
-    | 'addEditDossierAttribute'
     | 'uploadDictionary'
     | 'configureCertificate';
 
@@ -64,10 +62,6 @@ export class AdminDialogService extends DialogService<DialogType> {
             component: AddEditCloneDossierTemplateDialogComponent,
             dialogConfig: { width: '900px', autoFocus: true },
         },
-        addEditDossierAttribute: {
-            component: AddEditDossierAttributeDialogComponent,
-            dialogConfig: { autoFocus: true },
-        },
         uploadDictionary: {
             component: UploadDictionaryDialogComponent,
         },