From ba1306986f0346bac3cdade794ed11b21c77a494 Mon Sep 17 00:00:00 2001 From: Edi Cziszter Date: Fri, 12 Nov 2021 18:59:40 +0200 Subject: [PATCH] moved formBuilders in dialog module in separate methods --- .../notifications-screen.component.ts | 16 +++--- .../user-profile-screen.component.ts | 19 ++++--- .../add-edit-dictionary-dialog.component.ts | 29 +++++----- ...it-dossier-attribute-dialog.component.html | 4 +- ...edit-dossier-attribute-dialog.component.ts | 25 ++++----- ...-edit-dossier-template-dialog.component.ts | 25 +++++---- ...dd-edit-file-attribute-dialog.component.ts | 26 ++++----- .../user-details/user-details.component.html | 4 +- .../user-details/user-details.component.ts | 53 +++++++++++-------- 9 files changed, 110 insertions(+), 91 deletions(-) diff --git a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts index e6b8f4a2a..8317c64af 100644 --- a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts +++ b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts @@ -20,15 +20,21 @@ export class NotificationsScreenComponent implements OnInit { readonly notificationGroupsValues = NotificationGroupsValues; readonly translations = notificationsTranslations; - formGroup: FormGroup; + formGroup: FormGroup = this._getForm(); constructor( private readonly _toaster: Toaster, private readonly _formBuilder: FormBuilder, private readonly _loadingService: LoadingService, private readonly _notificationPreferencesService: NotificationPreferencesService, - ) { - this.formGroup = this._formBuilder.group({ + ) {} + + async ngOnInit(): Promise { + await this._initializeForm(); + } + + private _getForm(): FormGroup { + return this._formBuilder.group({ inAppNotificationsEnabled: [undefined], emailNotificationsEnabled: [undefined], emailNotificationType: [undefined], @@ -37,10 +43,6 @@ export class NotificationsScreenComponent implements OnInit { }); } - async ngOnInit(): Promise { - await this._initializeForm(); - } - isCategoryActive(category: string) { return this.formGroup.get(`${category}Enabled`).value; } diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts index f1a23936a..772d3d7ea 100644 --- a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts +++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { DomSanitizer } from '@angular/platform-browser'; +import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; import { TranslateService } from '@ngx-translate/core'; import { LoadingService } from '@iqser/common-ui'; import { IProfile } from '@red/domain'; @@ -17,8 +17,8 @@ import { LanguageService } from '../../../../../i18n/language.service'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class UserProfileScreenComponent implements OnInit { - formGroup: FormGroup; - changePasswordUrl: any; + formGroup: FormGroup = this._getForm(); + changePasswordUrl: SafeResourceUrl; translations = languagesTranslations; private _profileModel: IProfile; @@ -34,16 +34,19 @@ export class UserProfileScreenComponent implements OnInit { private readonly _loadingService: LoadingService, ) { this._loadingService.start(); - this.formGroup = this._formBuilder.group({ + + this.changePasswordUrl = this._domSanitizer.bypassSecurityTrustResourceUrl( + `${this._configService.values.OAUTH_URL}/account/password`, + ); + } + + private _getForm(): FormGroup { + return this._formBuilder.group({ email: [undefined, [Validators.required, Validators.email]], firstName: [undefined], lastName: [undefined], language: [undefined], }); - - this.changePasswordUrl = this._domSanitizer.bypassSecurityTrustResourceUrl( - `${this._configService.values.OAUTH_URL}/account/password`, - ); } get languageChanged(): boolean { diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts index 4c8d470b9..914672729 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts @@ -20,8 +20,8 @@ import { HttpStatusCode } from '@angular/common/http'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class AddEditDictionaryDialogComponent extends BaseDialogComponent { - readonly form: FormGroup; readonly dictionary = this._data.dictionary; + readonly form: FormGroup = this._getForm(this.dictionary); readonly canEditLabel$ = this._canEditLabel$; readonly technicalName$: Observable; readonly dialogHeader = this._translateService.instant('add-edit-dictionary.title', { @@ -43,21 +43,24 @@ export class AddEditDictionaryDialogComponent extends BaseDialogComponent { private readonly _data: { readonly dictionary: Dictionary; readonly dossierTemplateId: string }, ) { super(); - this.form = _formBuilder.group({ - label: [this.dictionary?.label, [Validators.required, Validators.minLength(3)]], - description: [this.dictionary?.description], - rank: [this.dictionary?.rank, Validators.required], - hexColor: [this.dictionary?.hexColor, [Validators.required, Validators.minLength(7)]], - hint: [!!this.dictionary?.hint], - addToDictionaryAction: [!!this.dictionary?.addToDictionaryAction], - caseSensitive: [this.dictCaseSensitive], - }); this.hasColor$ = this._colorEmpty$; this.technicalName$ = this.form.get('label').valueChanges.pipe(map(value => this._toTechnicalName(value))); } - get dictCaseSensitive(): boolean { - return this.dictionary ? !this.dictionary.caseInsensitive : false; + private _getForm(dictionary: Dictionary): FormGroup { + return this._formBuilder.group({ + label: [dictionary?.label, [Validators.required, Validators.minLength(3)]], + description: [dictionary?.description], + rank: [dictionary?.rank, Validators.required], + hexColor: [dictionary?.hexColor, [Validators.required, Validators.minLength(7)]], + hint: [!!dictionary?.hint], + addToDictionaryAction: [!!dictionary?.addToDictionaryAction], + caseSensitive: [this.getDictCaseSensitive(dictionary)], + }); + } + + getDictCaseSensitive(dictionary: Dictionary): boolean { + return dictionary ? !dictionary.caseInsensitive : false; } get changed(): boolean { @@ -67,7 +70,7 @@ export class AddEditDictionaryDialogComponent extends BaseDialogComponent { for (const key of Object.keys(this.form.getRawValue())) { if (key === 'caseSensitive') { - if (this.dictCaseSensitive !== this.form.get(key).value) { + if (this.getDictCaseSensitive(this.dictionary) !== this.form.get(key).value) { return true; } } else if (this.dictionary[key] !== this.form.get(key).value) { 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/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html index cfd174677..d02dcb25b 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/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html @@ -8,7 +8,7 @@ class="dialog-header heading-l" > -
+
@@ -35,7 +35,7 @@
-
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/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts index 0a44eb7d0..375762968 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/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts @@ -13,8 +13,8 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; styleUrls: ['./add-edit-dossier-attribute-dialog.component.scss'], }) export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribe implements OnDestroy { - dossierAttributeForm: FormGroup; - dossierAttribute: IDossierAttributeConfig; + dossierAttribute: IDossierAttributeConfig = this.data.dossierAttribute; + form: FormGroup = this._getForm(this.dossierAttribute); readonly translations = dossierAttributeTypesTranslations; readonly typeOptions = Object.keys(DossierAttributeConfigTypes); @@ -28,17 +28,18 @@ export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribe impl readonly data: { readonly dossierAttribute: IDossierAttributeConfig }, ) { super(); - this.dossierAttribute = data.dossierAttribute; + } - this.dossierAttributeForm = this._formBuilder.group({ - label: [this.dossierAttribute?.label, Validators.required], - ...(!!this.dossierAttribute && { + private _getForm(dossierAttribute: IDossierAttributeConfig): FormGroup { + return this._formBuilder.group({ + label: [dossierAttribute?.label, Validators.required], + ...(!!dossierAttribute && { placeholder: { - value: this.dossierAttribute.placeholder, + value: dossierAttribute.placeholder, disabled: true, }, }), - type: [this.dossierAttribute?.type || FileAttributeConfigTypes.TEXT, Validators.required], + type: [dossierAttribute?.type || FileAttributeConfigTypes.TEXT, Validators.required], }); } @@ -47,8 +48,8 @@ export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribe impl return true; } - for (const key of Object.keys(this.dossierAttributeForm.getRawValue())) { - if (this.dossierAttribute[key] !== this.dossierAttributeForm.get(key).value) { + for (const key of Object.keys(this.form.getRawValue())) { + if (this.dossierAttribute[key] !== this.form.get(key).value) { return true; } } @@ -62,7 +63,7 @@ export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribe impl const attribute: IDossierAttributeConfig = { id: this.dossierAttribute?.id, editable: true, - ...this.dossierAttributeForm.getRawValue(), + ...this.form.getRawValue(), }; this._dossierAttributesService.createOrUpdate(attribute).subscribe( @@ -79,7 +80,7 @@ export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribe impl @HostListener('window:keydown.Enter', ['$event']) onEnter(event: KeyboardEvent): void { const node = (event.target as IqserEventTarget).localName; - if (this.dossierAttributeForm.valid && this.changed && node !== 'textarea') { + if (this.form.valid && this.changed && node !== 'textarea') { this.saveDossierAttribute(); } } diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts index 507204c97..b565b5a88 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts @@ -17,7 +17,7 @@ import { HttpStatusCode } from '@angular/common/http'; styleUrls: ['./add-edit-dossier-template-dialog.component.scss'], }) export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent { - form: FormGroup; + form: FormGroup = this._getForm(); hasValidFrom: boolean; hasValidTo: boolean; downloadTypesEnum: DownloadFileType[] = ['ORIGINAL', 'PREVIEW', 'REDACTED']; @@ -38,7 +38,19 @@ export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent { @Inject(MAT_DIALOG_DATA) readonly dossierTemplate: IDossierTemplate, ) { super(); - this.form = this._formBuilder.group({ + this.hasValidFrom = !!this.dossierTemplate?.validFrom; + this.hasValidTo = !!this.dossierTemplate?.validTo; + + this._previousValidFrom = this.form.get('validFrom').value; + this._previousValidTo = this.form.get('validTo').value; + + this.form.valueChanges.subscribe(value => { + this._applyValidityIntervalConstraints(value); + }); + } + + private _getForm(): FormGroup { + return this._formBuilder.group({ name: [this.dossierTemplate?.name, Validators.required], description: [this.dossierTemplate?.description], validFrom: [ @@ -51,15 +63,6 @@ export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent { ], downloadFileTypes: [this.dossierTemplate?.downloadFileTypes || ['PREVIEW', 'REDACTED']], }); - this.hasValidFrom = !!this.dossierTemplate?.validFrom; - this.hasValidTo = !!this.dossierTemplate?.validTo; - - this._previousValidFrom = this.form.get('validFrom').value; - this._previousValidTo = this.form.get('validTo').value; - - this.form.valueChanges.subscribe(value => { - this._applyValidityIntervalConstraints(value); - }); } get changed(): boolean { 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/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts index 1b3e5dd56..9f4e3e5da 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/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts @@ -12,9 +12,9 @@ import { BaseDialogComponent } from '@iqser/common-ui'; styleUrls: ['./add-edit-file-attribute-dialog.component.scss'], }) export class AddEditFileAttributeDialogComponent extends BaseDialogComponent { - form: FormGroup; - fileAttribute: IFileAttributeConfig; - dossierTemplateId: string; + fileAttribute: IFileAttributeConfig = this.data.fileAttribute; + dossierTemplateId: string = this.data.dossierTemplateId; + form: FormGroup = this._getForm(this.fileAttribute); readonly typeOptions = Object.keys(FileAttributeConfigTypes); translations = fileAttributeTypesTranslations; @@ -26,17 +26,17 @@ export class AddEditFileAttributeDialogComponent extends BaseDialogComponent { public data: { fileAttribute: IFileAttributeConfig; dossierTemplateId: string }, ) { super(); - this.fileAttribute = data.fileAttribute; - this.dossierTemplateId = data.dossierTemplateId; + } - this.form = this._formBuilder.group({ - label: [this.fileAttribute?.label, Validators.required], - csvColumnHeader: [this.fileAttribute?.csvColumnHeader], - type: [this.fileAttribute?.type || FileAttributeConfigTypes.TEXT, Validators.required], - readonly: [this.fileAttribute ? !this.fileAttribute.editable : false], - primaryAttribute: [this.fileAttribute?.primaryAttribute], - filterable: [this.fileAttribute?.filterable], - displayedInFileList: [this.fileAttribute?.displayedInFileList], + private _getForm(fileAttribute: IFileAttributeConfig): FormGroup { + return this._formBuilder.group({ + label: [fileAttribute?.label, Validators.required], + csvColumnHeader: [fileAttribute?.csvColumnHeader], + type: [fileAttribute?.type || FileAttributeConfigTypes.TEXT, Validators.required], + readonly: [fileAttribute ? !fileAttribute.editable : false], + primaryAttribute: [fileAttribute?.primaryAttribute], + filterable: [fileAttribute?.filterable], + displayedInFileList: [fileAttribute?.displayedInFileList], }); } 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 99f87d038..75615f9ec 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 @@ -6,7 +6,7 @@ class="dialog-header heading-l" > - +
@@ -41,7 +41,7 @@
- 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 a4941ee7d..997246506 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 @@ -20,7 +20,7 @@ export class UserDetailsComponent implements OnInit { @Output() readonly toggleResetPassword = new EventEmitter(); @Output() readonly closeDialog = new EventEmitter(); - userForm: FormGroup; + form: FormGroup; readonly ROLES = ['RED_USER', 'RED_MANAGER', 'RED_USER_ADMIN', 'RED_ADMIN']; readonly translations = rolesTranslations; private readonly _ROLE_REQUIREMENTS = { RED_MANAGER: 'RED_USER', RED_ADMIN: 'RED_USER_ADMIN' }; @@ -42,8 +42,8 @@ export class UserDetailsComponent implements OnInit { return true; } - for (const key of Object.keys(this.userForm.getRawValue())) { - const keyValue = this.userForm.get(key).value; + 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; @@ -58,7 +58,7 @@ export class UserDetailsComponent implements OnInit { get activeRoles(): string[] { return this.ROLES.reduce((acc, role) => { - if (this.userForm.get(role).value) { + if (this.form.get(role).value) { acc.push(role); } return acc; @@ -81,7 +81,27 @@ export class UserDetailsComponent implements OnInit { } ngOnInit() { - const rolesControls = this.ROLES.reduce( + this._buildForm(); + } + + private _buildForm(): void { + this.form = this._formBuilder.group({ + firstName: [this.user?.firstName, Validators.required], + lastName: [this.user?.lastName, Validators.required], + email: [ + { + value: this.user?.email, + disabled: !!this.user, + }, + [Validators.required, Validators.email], + ], + ...this._rolesControls, + }); + this._setRolesRequirements(); + } + + private get _rolesControls(): any { + return this.ROLES.reduce( (prev, role) => ({ ...prev, [role]: [ @@ -93,24 +113,11 @@ export class UserDetailsComponent implements OnInit { }), {}, ); - this.userForm = this._formBuilder.group({ - firstName: [this.user?.firstName, Validators.required], - lastName: [this.user?.lastName, Validators.required], - email: [ - { - value: this.user?.email, - disabled: !!this.user, - }, - [Validators.required, Validators.email], - ], - ...rolesControls, - }); - this._setRolesRequirements(); } async save() { this._loadingService.start(); - const userData = { ...this.userForm.getRawValue(), roles: this.activeRoles }; + const userData = { ...this.form.getRawValue(), roles: this.activeRoles }; if (!this.user) { await this.userService @@ -141,12 +148,12 @@ export class UserDetailsComponent implements OnInit { private _setRolesRequirements() { for (const key of Object.keys(this._ROLE_REQUIREMENTS)) { - this.userForm.controls[key].valueChanges.subscribe(checked => { + this.form.controls[key].valueChanges.subscribe(checked => { if (checked) { - this.userForm.patchValue({ [this._ROLE_REQUIREMENTS[key]]: true }); - this.userForm.controls[this._ROLE_REQUIREMENTS[key]].disable(); + this.form.patchValue({ [this._ROLE_REQUIREMENTS[key]]: true }); + this.form.controls[this._ROLE_REQUIREMENTS[key]].disable(); } else { - this.userForm.controls[this._ROLE_REQUIREMENTS[key]].enable(); + this.form.controls[this._ROLE_REQUIREMENTS[key]].enable(); } }); }