From 303a86268b8e9859783726c422ddd652075a7ced Mon Sep 17 00:00:00 2001 From: DominikIwanek <141320833+DominikIwanek@users.noreply.github.com> Date: Wed, 30 Aug 2023 12:32:18 +0200 Subject: [PATCH] [ACS-5284] - updating a folder rule options has no effect when multiple rules exist and clicking between them (#3409) * [ACS-5284] - updating a folder rule options has no effect when multiple rules exist and clicking between them --- .../manage-rules.smart-component.html | 1 + .../options/rule-options.ui-component.scss | 2 +- .../options/rule-options.ui-component.spec.ts | 48 +++++++++++++++- .../options/rule-options.ui-component.ts | 55 +++++++++---------- 4 files changed, 72 insertions(+), 34 deletions(-) diff --git a/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.html b/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.html index 6e81bfb210..a2b38e9c7a 100644 --- a/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.html +++ b/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.html @@ -106,6 +106,7 @@

{{ (folderInfo$ | async).name }}:{{'ACA_FOLDER_RULES.
{ ((getByDataAutomationId(dataAutomationId).nativeElement as HTMLElement).children[0] as HTMLElement).click(); }; + const testErrorScriptFormFieldVisibility = (isVisible: boolean) => { + if (isVisible) { + expect((getByDataAutomationId('rule-option-form-field-errorScript').nativeElement as HTMLElement).classList).not.toContain( + 'hide-error-script-dropdown' + ); + } else { + expect((getByDataAutomationId('rule-option-form-field-errorScript').nativeElement as HTMLElement).classList).toContain( + 'hide-error-script-dropdown' + ); + } + }; + beforeEach(() => { TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], @@ -66,7 +78,7 @@ describe('RuleOptionsUiComponent', () => { expect(getByDataAutomationId('rule-option-checkbox-asynchronous').componentInstance.checked).toBeFalsy(); expect(getByDataAutomationId('rule-option-checkbox-inheritable').componentInstance.checked).toBeFalsy(); expect(getByDataAutomationId('rule-option-checkbox-disabled').componentInstance.checked).toBeFalsy(); - expect(getByDataAutomationId('rule-option-select-errorScript').componentInstance.disabled).toBeTruthy(); + testErrorScriptFormFieldVisibility(false); component.writeValue({ isEnabled: false, @@ -79,7 +91,7 @@ describe('RuleOptionsUiComponent', () => { expect(getByDataAutomationId('rule-option-checkbox-asynchronous').componentInstance.checked).toBeTruthy(); expect(getByDataAutomationId('rule-option-checkbox-inheritable').componentInstance.checked).toBeTruthy(); expect(getByDataAutomationId('rule-option-checkbox-disabled').componentInstance.checked).toBeTruthy(); - expect(getByDataAutomationId('rule-option-select-errorScript').componentInstance.disabled).toBeFalsy(); + testErrorScriptFormFieldVisibility(true); }); it('should enable selector when async checkbox is truthy', () => { @@ -122,6 +134,7 @@ describe('RuleOptionsUiComponent', () => { errorScript: '' }); component.errorScriptConstraint = errorScriptConstraintMock; + component.ngOnChanges({ errorScriptConstraint: {} as SimpleChange }); fixture.detectChanges(); (getByDataAutomationId('rule-option-select-errorScript').nativeElement as HTMLElement).click(); @@ -149,4 +162,33 @@ describe('RuleOptionsUiComponent', () => { expect(matFormField).not.toBeNull(); expect(matFormField.componentInstance['floatLabel']).toBe('always'); }); + + it('should properly update formFields on only isAsynchronous and errorScript changes', () => { + fixture.detectChanges(); + component.writeValue({ + isEnabled: false, + isInheritable: true, + isAsynchronous: true, + errorScript: '1234' + }); + fixture.detectChanges(); + + expect(getByDataAutomationId('rule-option-checkbox-asynchronous').componentInstance.checked).toBeTrue(); + expect(getByDataAutomationId('rule-option-checkbox-inheritable').componentInstance.checked).toBeTrue(); + expect(getByDataAutomationId('rule-option-checkbox-disabled').componentInstance.checked).toBeTrue(); + expect(getByDataAutomationId('rule-option-select-errorScript').componentInstance.value).toEqual('1234'); + + component.writeValue({ + isEnabled: false, + isInheritable: true, + isAsynchronous: false, + errorScript: '' + }); + fixture.detectChanges(); + + expect(getByDataAutomationId('rule-option-checkbox-asynchronous').componentInstance.checked).toBeFalse(); + expect(getByDataAutomationId('rule-option-checkbox-inheritable').componentInstance.checked).toBeTrue(); + expect(getByDataAutomationId('rule-option-checkbox-disabled').componentInstance.checked).toBeTrue(); + testErrorScriptFormFieldVisibility(false); + }); }); diff --git a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.ts b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.ts index 83caa9b8e3..e127c1870d 100644 --- a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.ts +++ b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.ts @@ -22,8 +22,8 @@ * from Hyland Software. If not, see . */ -import { Component, forwardRef, HostBinding, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { AbstractControl, ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; +import { Component, forwardRef, HostBinding, Input, OnChanges, OnDestroy, SimpleChanges, ViewEncapsulation } from '@angular/core'; +import { ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox'; import { RuleOptions } from '../../model/rule.model'; import { ActionParameterConstraint, ConstraintValue } from '../../model/action-parameter-constraint.model'; @@ -48,7 +48,7 @@ import { MatSelectModule } from '@angular/material/select'; } ] }) -export class RuleOptionsUiComponent implements ControlValueAccessor, OnInit, OnDestroy { +export class RuleOptionsUiComponent implements ControlValueAccessor, OnChanges, OnDestroy { form = new FormGroup({ isDisabled: new FormControl(), isInheritable: new FormControl(), @@ -57,13 +57,14 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnInit, OnD }); formSubscription = this.form.valueChanges.subscribe((value: any) => { + const formValue = { ...this.form.value, ...value }; this.isAsynchronousChecked = value.isAsynchronous; this.isInheritableChecked = value.isInheritable; this.onChange({ - isEnabled: !value.isDisabled, - isInheritable: value.isInheritable, - isAsynchronous: value.isAsynchronous, - errorScript: value.errorScript ?? '' + isEnabled: !formValue.isDisabled, + isInheritable: formValue.isInheritable, + isAsynchronous: formValue.isAsynchronous, + errorScript: formValue.errorScript ?? '' }); this.onTouch(); }); @@ -85,19 +86,18 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnInit, OnD errorScriptOptions: ConstraintValue[] = []; writeValue(options: RuleOptions) { - const isAsynchronousFormControl = this.form.get('isAsynchronous'); - const errorScriptFormControl = this.form.get('errorScript'); - this.form.get('isDisabled').setValue(!options.isEnabled); - this.form.get('isInheritable').setValue(options.isInheritable); - this.form.get('isAsynchronous').setValue(options.isAsynchronous); - errorScriptFormControl.setValue(options.errorScript ?? ''); - if (isAsynchronousFormControl.value) { - this.hideErrorScriptDropdown = false; - errorScriptFormControl.enable(); - } else { - this.hideErrorScriptDropdown = true; - errorScriptFormControl.disable(); - } + this.form.setValue( + { + isDisabled: !options.isEnabled, + isAsynchronous: options.isAsynchronous, + isInheritable: options.isInheritable, + errorScript: options.errorScript ?? '' + }, + { emitEvent: false } + ); + this.isAsynchronousChecked = options.isAsynchronous; + this.isInheritableChecked = options.isInheritable; + this.hideErrorScriptDropdown = !this.isAsynchronousChecked; } registerOnChange(fn: () => void) { @@ -118,8 +118,10 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnInit, OnD } } - ngOnInit(): void { - this.errorScriptOptions = this.errorScriptConstraint?.constraints ?? []; + ngOnChanges(changes: SimpleChanges): void { + if (changes['errorScriptConstraint']) { + this.errorScriptOptions = this.errorScriptConstraint?.constraints ?? []; + } } ngOnDestroy() { @@ -127,13 +129,6 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnInit, OnD } toggleErrorScriptDropdown(value: MatCheckboxChange) { - const formControl: AbstractControl = this.form.get('errorScript'); - if (value.checked) { - this.hideErrorScriptDropdown = false; - formControl.enable(); - } else { - this.hideErrorScriptDropdown = true; - formControl.disable(); - } + this.hideErrorScriptDropdown = !value.checked; } }