moved formBuilders in dialog module in separate methods
This commit is contained in:
Edi Cziszter
parent
d230ab1a5c
commit
ba1306986f
@ -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<void> {
|
||||
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<void> {
|
||||
await this._initializeForm();
|
||||
}
|
||||
|
||||
isCategoryActive(category: string) {
|
||||
return this.formGroup.get(`${category}Enabled`).value;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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<string>;
|
||||
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) {
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
class="dialog-header heading-l"
|
||||
></div>
|
||||
|
||||
<form (submit)="saveDossierAttribute()" [formGroup]="dossierAttributeForm">
|
||||
<form (submit)="saveDossierAttribute()" [formGroup]="form">
|
||||
<div class="dialog-content">
|
||||
<div class="iqser-input-group required w-300">
|
||||
<label translate="add-edit-dossier-attribute.form.label"></label>
|
||||
@ -35,7 +35,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-actions">
|
||||
<button [disabled]="dossierAttributeForm.invalid || !changed" color="primary" mat-flat-button type="submit">
|
||||
<button [disabled]="form.invalid || !changed" color="primary" mat-flat-button type="submit">
|
||||
{{ 'add-edit-dossier-attribute.save' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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],
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
class="dialog-header heading-l"
|
||||
></div>
|
||||
|
||||
<form (submit)="save()" [formGroup]="userForm">
|
||||
<form (submit)="save()" [formGroup]="form">
|
||||
<div class="dialog-content">
|
||||
<div class="iqser-input-group required w-300">
|
||||
<label translate="add-edit-user.form.first-name"></label>
|
||||
@ -41,7 +41,7 @@
|
||||
</div>
|
||||
|
||||
<div class="dialog-actions">
|
||||
<button [disabled]="userForm.invalid || !changed" color="primary" mat-flat-button type="submit">
|
||||
<button [disabled]="form.invalid || !changed" color="primary" mat-flat-button type="submit">
|
||||
{{ (user ? 'add-edit-user.actions.save-changes' : 'add-edit-user.actions.save') | translate }}
|
||||
</button>
|
||||
|
||||
|
||||
@ -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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user