extended base dialog for 'add edit user dialog' component

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html

@@ -1,17 +1,18 @@
 <section class="dialog">
     <redaction-user-details
-        (closeDialog)="dialogRef.close($event)"
+        (closeDialog)="closeDialog($event)"
+        (cancel)="close()"
         (toggleResetPassword)="toggleResetPassword()"
-        *ngIf="!resettingPassword"
+        [hidden]="resettingPassword"
         [user]="user"
     ></redaction-user-details>
 
     <redaction-reset-password
-        (close)="dialogRef.close($event)"
+        (close)="closeDialog($event)"
         (toggleResetPassword)="toggleResetPassword()"
-        *ngIf="resettingPassword"
+        [hidden]="!resettingPassword"
         [user]="user"
     ></redaction-reset-password>
 
-    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" (action)="close()"></iqser-circle-button>
 </section>

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.ts

@@ -1,18 +1,44 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, Injector, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { User } from '@red/domain';
+import { UserDetailsComponent } from './user-details/user-details.component';
+import { BaseDialogComponent } from '../../../../../../../../libs/common-ui/src';
 
 @Component({
     selector: 'redaction-add-edit-user-dialog',
     templateUrl: './add-edit-user-dialog.component.html',
     styleUrls: ['./add-edit-user-dialog.component.scss'],
 })
-export class AddEditUserDialogComponent {
+export class AddEditUserDialogComponent extends BaseDialogComponent {
+    @ViewChild(UserDetailsComponent) private readonly _userDetailsComponent: UserDetailsComponent;
+
     resettingPassword = false;
 
-    constructor(readonly dialogRef: MatDialogRef<AddEditUserDialogComponent>, @Inject(MAT_DIALOG_DATA) readonly user: User) {}
+    constructor(
+        protected readonly _injector: Injector,
+        protected readonly _dialogRef: MatDialogRef<AddEditUserDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) readonly user: User,
+    ) {
+        super(_injector, _dialogRef);
+    }
 
     toggleResetPassword() {
         this.resettingPassword = !this.resettingPassword;
     }
+
+    async save(): Promise<void> {
+        await this._userDetailsComponent.save();
+    }
+
+    get changed(): boolean {
+        return this._userDetailsComponent.changed;
+    }
+
+    get valid(): boolean {
+        return this._userDetailsComponent.valid;
+    }
+
+    closeDialog(event) {
+        this._dialogRef.close(event);
+    }
 }

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html

@@ -53,6 +53,6 @@
             icon="iqser:trash"
         ></iqser-icon-button>
 
-        <div class="all-caps-label cancel" mat-dialog-close translate="add-edit-user.actions.cancel"></div>
+        <div class="all-caps-label cancel" translate="add-edit-user.actions.cancel" (click)="cancel.emit()"></div>
     </div>
 </form>

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts

@@ -1,28 +1,29 @@
 import { Component, EventEmitter, Input, OnChanges, OnDestroy, Output } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AdminDialogService } from '../../../services/admin-dialog.service';
-import { AutoUnsubscribe, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
+import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
 import { rolesTranslations } from '../../../../../translations/roles-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { User } from '@red/domain';
 import { UserService } from '@services/user.service';
 import { HttpStatusCode } from '@angular/common/http';
+import { BaseFormComponent } from '../../../../../../../../../libs/common-ui/src/lib/form/base-form.component';
 
 @Component({
     selector: 'redaction-user-details',
     templateUrl: './user-details.component.html',
     styleUrls: ['./user-details.component.scss'],
 })
-export class UserDetailsComponent extends AutoUnsubscribe implements OnChanges, OnDestroy {
+export class UserDetailsComponent extends BaseFormComponent implements OnChanges, OnDestroy {
     readonly iconButtonTypes = IconButtonTypes;
 
     @Input() user: User;
     @Output() readonly toggleResetPassword = new EventEmitter();
     @Output() readonly closeDialog = new EventEmitter();
+    @Output() readonly cancel = new EventEmitter();
 
     readonly ROLES = ['RED_USER', 'RED_MANAGER', 'RED_USER_ADMIN', 'RED_ADMIN'];
     readonly translations = rolesTranslations;
-    form: FormGroup;
     private readonly _ROLE_REQUIREMENTS = { RED_MANAGER: 'RED_USER', RED_ADMIN: 'RED_USER_ADMIN' };
 
     constructor(
@@ -35,29 +36,6 @@ export class UserDetailsComponent extends AutoUnsubscribe implements OnChanges,
         super();
     }
 
-    get changed(): boolean {
-        if (!this.user) {
-            return true;
-        }
-
-        if (this.user.roles.length !== this.activeRoles.length) {
-            return true;
-        }
-
-        for (const key of Object.keys(this.form.getRawValue())) {
-            const keyValue = this.form.get(key).value;
-            if (key.startsWith('RED_')) {
-                if (this.user.roles.includes(key) !== keyValue) {
-                    return true;
-                }
-            } else if (this.user[key] !== keyValue) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
     get activeRoles(): string[] {
         return this.ROLES.reduce((acc, role) => {
             if (this.form.get(role).value) {
@@ -85,6 +63,7 @@ export class UserDetailsComponent extends AutoUnsubscribe implements OnChanges,
     ngOnChanges() {
         this.form = this._getForm();
         this._setRolesRequirements();
+        this.initialFormValue = this.form.getRawValue();
     }
 
     shouldBeDisabled(role: string): boolean {
@@ -134,7 +113,6 @@ export class UserDetailsComponent extends AutoUnsubscribe implements OnChanges,
     }
 
     private _getForm(): FormGroup {
-        console.log(this.user);
         return this._formBuilder.group({
             firstName: [this.user?.firstName, Validators.required],
             lastName: [this.user?.lastName, Validators.required],

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

@@ -62,7 +62,7 @@ export class AdminDialogService extends DialogService<DialogType> {
         },
         addEditUser: {
             component: AddEditUserDialogComponent,
-            dialogConfig: { autoFocus: true, disableClose: false },
+            dialogConfig: { autoFocus: true },
         },
         smtpAuthConfig: {
             component: SmtpAuthDialogComponent,