diff --git a/apps/red-ui/src/app/modules/admin/shared/components/add-edit-entity/add-edit-entity.component.ts b/apps/red-ui/src/app/modules/admin/shared/components/add-edit-entity/add-edit-entity.component.ts
index 25edfe741..e707b56e5 100644
--- a/apps/red-ui/src/app/modules/admin/shared/components/add-edit-entity/add-edit-entity.component.ts
+++ b/apps/red-ui/src/app/modules/admin/shared/components/add-edit-entity/add-edit-entity.component.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
import { Dictionary, IDictionary } from '@red/domain';
-import { FormControl, FormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { map, startWith } from 'rxjs/operators';
import { firstValueFrom, Observable } from 'rxjs';
import { toSnakeCase } from '@utils/functions';
@@ -8,7 +8,7 @@ import { DictionariesMapService } from '@services/entity-services/dictionaries-m
import { PermissionsService } from '@services/permissions.service';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { DictionaryService } from '@services/entity-services/dictionary.service';
-import { LoadingService, Toaster } from '@iqser/common-ui';
+import { BaseFormComponent, LoadingService, Toaster } from '@iqser/common-ui';
const REDACTION_FIELDS = ['defaultReason', 'caseSensitive', 'addToDictionaryAction'];
@@ -18,10 +18,9 @@ const REDACTION_FIELDS = ['defaultReason', 'caseSensitive', 'addToDictionaryActi
styleUrls: ['./add-edit-entity.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class AddEditEntityComponent implements OnInit, OnChanges {
+export class AddEditEntityComponent extends BaseFormComponent implements OnInit {
@Input() dossierTemplateId: string;
@Input() entity: Dictionary;
- @Input() form: FormGroup;
hasHexColor$: Observable;
hasRecommendationHexColor$: Observable;
@@ -33,36 +32,68 @@ export class AddEditEntityComponent implements OnInit, OnChanges {
private readonly _dictionaryService: DictionaryService,
private readonly _toaster: Toaster,
private readonly _loadingService: LoadingService,
- ) {}
-
- ngOnInit() {
- this.hasHexColor$ = this._colorEmpty$('hexColor');
- this.hasRecommendationHexColor$ = this._colorEmpty$('recommendationHexColor');
- this.technicalName$ = this.form.get('label').valueChanges.pipe(map((value: string) => this._toTechnicalName(value)));
+ private readonly _formBuilder: FormBuilder,
+ private readonly _changeRef: ChangeDetectorRef,
+ ) {
+ super();
}
- ngOnChanges(changes: SimpleChanges) {
- if (changes.form) {
- this.form.get('hint').valueChanges.subscribe(isHint => {
- if (isHint) {
- REDACTION_FIELDS.forEach(field => this.form.removeControl(field));
- } else {
- this.form.addControl('addToDictionaryAction', new FormControl(this.entity?.addToDictionaryAction));
- this.form.addControl('caseSensitive', new FormControl(!this.entity?.caseInsensitive));
- this.form.addControl('defaultReason', new FormControl({ value: null, disabled: true }));
- }
+ revert(): void {
+ this.form.patchValue(this.initialFormValue);
+ }
+
+ private _initializeForm(): void {
+ const controlsConfig = {
+ type: [this.entity?.type],
+ label: [this.entity?.label, [Validators.required, Validators.minLength(3)]],
+ description: [this.entity?.description],
+ rank: [this.entity?.rank, Validators.required],
+ hexColor: [this.entity?.hexColor, [Validators.required, Validators.minLength(7)]],
+ recommendationHexColor: [this.entity?.recommendationHexColor, [Validators.required, Validators.minLength(7)]],
+ hint: [!!this.entity?.hint],
+ hasDictionary: [!!this.entity?.hasDictionary],
+ };
+
+ if (!this.entity?.hint) {
+ Object.assign(controlsConfig, {
+ defaultReason: [{ value: null, disabled: true }],
+ caseSensitive: [this.entity ? !this.entity.caseInsensitive : false],
+ addToDictionaryAction: [this.entity?.addToDictionaryAction],
});
-
- if (!this.entity) {
- this.form.get('label').valueChanges.subscribe((label: string) => {
- this.form.get('type').setValue(this._toTechnicalName(label));
- });
- }
-
- if (!this._permissionsService.canEditEntities()) {
- this.form.disable();
- }
}
+ const form = this._formBuilder.group(controlsConfig);
+
+ this.hasHexColor$ = this._colorEmpty$(form, 'hexColor');
+ this.hasRecommendationHexColor$ = this._colorEmpty$(form, 'recommendationHexColor');
+ this.technicalName$ = form.get('label').valueChanges.pipe(map((value: string) => this._toTechnicalName(value)));
+
+ form.get('hint').valueChanges.subscribe(isHint => {
+ if (isHint) {
+ REDACTION_FIELDS.forEach(field => form.removeControl(field));
+ } else {
+ form.addControl('addToDictionaryAction', new FormControl(this.entity?.addToDictionaryAction));
+ form.addControl('caseSensitive', new FormControl(!this.entity?.caseInsensitive));
+ form.addControl('defaultReason', new FormControl({ value: null, disabled: true }));
+ }
+ });
+
+ if (!this.entity) {
+ form.get('label').valueChanges.subscribe((label: string) => {
+ form.get('type').setValue(this._toTechnicalName(label));
+ });
+ }
+
+ if (!this._permissionsService.canEditEntities()) {
+ form.disable();
+ }
+
+ this.initialFormValue = form.getRawValue();
+
+ this.form = form;
+ }
+
+ ngOnInit() {
+ this._initializeForm();
}
async save(): Promise {
@@ -79,6 +110,8 @@ export class AddEditEntityComponent implements OnInit, OnChanges {
await firstValueFrom(this._dictionaryService.addDictionary({ ...dictionary, dossierTemplateId: this.dossierTemplateId }));
this._toaster.success(_('add-edit-entity.success.create'));
}
+ this.initialFormValue = this.form.getRawValue();
+ this._changeRef.markForCheck();
this._loadingService.stop();
} catch (e) {
this._loadingService.stop();
@@ -97,9 +130,9 @@ export class AddEditEntityComponent implements OnInit, OnChanges {
return technicalName;
}
- private _colorEmpty$(field: string) {
- return this.form.get(field).valueChanges.pipe(
- startWith(this.form.get(field).value),
+ private _colorEmpty$(form: FormGroup, field: string) {
+ return form.get(field).valueChanges.pipe(
+ startWith(form.get(field).value),
map((value: string) => !value || value?.length === 0),
);
}