From be8965b0300c5a32f776c30aba5aa34305e8f1f0 Mon Sep 17 00:00:00 2001 From: Valentin Date: Mon, 24 Jan 2022 23:49:43 +0200 Subject: [PATCH] extended base dialog for 'add edit user dialog' component --- .../add-edit-user-dialog.component.html | 11 ++++--- .../add-edit-user-dialog.component.ts | 32 +++++++++++++++++-- .../user-details/user-details.component.html | 2 +- .../user-details/user-details.component.ts | 32 +++---------------- .../admin/services/admin-dialog.service.ts | 2 +- 5 files changed, 42 insertions(+), 37 deletions(-) diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html index 1f17a0d25..51cae0fa7 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html @@ -1,17 +1,18 @@
- +
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.ts index 30b9e7c21..aadf98a36 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.ts +++ b/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, @Inject(MAT_DIALOG_DATA) readonly user: User) {} + constructor( + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) readonly user: User, + ) { + super(_injector, _dialogRef); + } toggleResetPassword() { this.resettingPassword = !this.resettingPassword; } + + async save(): Promise { + await this._userDetailsComponent.save(); + } + + get changed(): boolean { + return this._userDetailsComponent.changed; + } + + get valid(): boolean { + return this._userDetailsComponent.valid; + } + + closeDialog(event) { + this._dialogRef.close(event); + } } diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html index 75615f9ec..4ca949f7f 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html +++ b/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" > -
+
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts index 0320cf449..c73a6bb82 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts +++ b/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], 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 66efb8fec..6d161fb42 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 @@ -62,7 +62,7 @@ export class AdminDialogService extends DialogService { }, addEditUser: { component: AddEditUserDialogComponent, - dialogConfig: { autoFocus: true, disableClose: false }, + dialogConfig: { autoFocus: true }, }, smtpAuthConfig: { component: SmtpAuthDialogComponent,