+
+
+ (change)="toggleErrorScriptDropdown($event)"
+ data-automation-id="rule-option-checkbox-asynchronous">
{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.IS_ASYNCHRONOUS' | translate }}
-
- {{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.ERROR_SCRIPT' | translate}}:
-
-
- {{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.SELECT_ACTION' | translate}}
-
-
-
+
+
+
+ {{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.NO_SCRIPT' | translate }}
+
+
-
+
+
+
+ data-automation-id="rule-option-checkbox-inheritable">
{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.IS_INHERITABLE' | translate }}
+
+
+
+ formControlName="isDisabled"
+ data-automation-id="rule-option-checkbox-disabled">
{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.DISABLE_RULE' | translate }}
-
diff --git a/projects/aca-folder-rules/src/lib/rule-details/options/rule-options.ui-component.scss b/projects/aca-folder-rules/src/lib/rule-details/options/rule-options.ui-component.scss
index 11783d8b3..34a18c083 100644
--- a/projects/aca-folder-rules/src/lib/rule-details/options/rule-options.ui-component.scss
+++ b/projects/aca-folder-rules/src/lib/rule-details/options/rule-options.ui-component.scss
@@ -1,20 +1,14 @@
-.options-list {
+.aca-rule-options {
display: flex;
- column-gap: 25px;
- padding: 0.75em 0;
+ flex-direction: row;
+ gap: 24px;
- &__rest {
+ &__option {
display: flex;
- flex-wrap: wrap;
- column-gap: 25px;
- }
-}
-
-.select-action {
- margin-left: 5px;
- margin-top: 12px;
-
- span {
- display: block;
+ flex-direction: column;
+ }
+
+ &.read-only .mat-checkbox-inner-container {
+ display: none;
}
}
diff --git a/projects/aca-folder-rules/src/lib/rule-details/options/rule-options.ui-component.spec.ts b/projects/aca-folder-rules/src/lib/rule-details/options/rule-options.ui-component.spec.ts
index 4990e1157..51c4caa6a 100644
--- a/projects/aca-folder-rules/src/lib/rule-details/options/rule-options.ui-component.spec.ts
+++ b/projects/aca-folder-rules/src/lib/rule-details/options/rule-options.ui-component.spec.ts
@@ -23,16 +23,16 @@
* along with Alfresco. If not, see
.
*/
-import { ComponentFixture, TestBed, inject, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
-import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RuleOptionsUiComponent } from './rule-options.ui-component';
import { CoreTestingModule } from '@alfresco/adf-core';
import { By } from '@angular/platform-browser';
describe('RuleOptionsUiComponent', () => {
- let component: RuleOptionsUiComponent;
let fixture: ComponentFixture
;
+ let component: RuleOptionsUiComponent;
const getByDataAutomationId = (dataAutomationId: string): DebugElement =>
fixture.debugElement.query(By.css(`[data-automation-id="${dataAutomationId}"]`));
@@ -41,54 +41,75 @@ describe('RuleOptionsUiComponent', () => {
((getByDataAutomationId(dataAutomationId).nativeElement as HTMLElement).children[0] as HTMLElement).click();
};
- beforeEach(
- waitForAsync(() => {
- TestBed.configureTestingModule({
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
- imports: [FormsModule, ReactiveFormsModule, CoreTestingModule],
- declarations: [RuleOptionsUiComponent]
- }).compileComponents();
- })
- );
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ imports: [FormsModule, ReactiveFormsModule, CoreTestingModule],
+ declarations: [RuleOptionsUiComponent]
+ });
- beforeEach(inject([FormBuilder], (fb: FormBuilder) => {
fixture = TestBed.createComponent(RuleOptionsUiComponent);
component = fixture.componentInstance;
- component.form = fb.group({
- isAsynchronous: [false],
- isInheritable: [false],
- isEnabled: [true],
- errorScript: ['']
+ component.writeValue({
+ isEnabled: true,
+ isInheritable: false,
+ isAsynchronous: false,
+ errorScript: ''
});
- fixture.detectChanges();
- }));
+ });
- it('checkboxes should be falsy by default, selector is disabled', () => {
- expect(component).toBeTruthy();
+ it('should be able to write to the component', () => {
+ fixture.detectChanges();
expect(getByDataAutomationId('rule-option-checkbox-asynchronous').componentInstance.checked).toBeFalsy();
expect(getByDataAutomationId('rule-option-checkbox-inheritable').componentInstance.checked).toBeFalsy();
- expect(getByDataAutomationId('rule-option-checkbox-enabled').componentInstance.checked).toBeFalsy();
+ expect(getByDataAutomationId('rule-option-checkbox-disabled').componentInstance.checked).toBeFalsy();
expect(getByDataAutomationId('rule-option-select-errorScript').componentInstance.disabled).toBeTruthy();
+
+ component.writeValue({
+ isEnabled: false,
+ isInheritable: true,
+ isAsynchronous: true,
+ errorScript: ''
+ });
+ fixture.detectChanges();
+
+ 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();
});
it('should enable selector when async checkbox is truthy', () => {
- toggleMatCheckbox('rule-option-checkbox-asynchronous');
-
fixture.detectChanges();
+ toggleMatCheckbox('rule-option-checkbox-asynchronous');
+ fixture.detectChanges();
+
expect(getByDataAutomationId('rule-option-checkbox-asynchronous').componentInstance.checked).toBeTruthy();
expect(getByDataAutomationId('rule-option-select-errorScript').componentInstance.disabled).toBeFalsy();
});
- it('should hide some fields in preview mode', () => {
- component.preview = true;
+ it('should hide disabled checkbox and unselected checkboxes in read-only mode', () => {
+ component.readOnly = true;
+ fixture.detectChanges();
+
+ expect(getByDataAutomationId('rule-option-checkbox-asynchronous')).toBeFalsy();
+ expect(getByDataAutomationId('rule-option-checkbox-inheritable')).toBeFalsy();
+ expect(getByDataAutomationId('rule-option-checkbox-enabled')).toBeFalsy();
+ expect(getByDataAutomationId('rule-option-select-errorScript')).toBeFalsy();
+
+ component.writeValue({
+ isEnabled: false,
+ isInheritable: true,
+ isAsynchronous: true,
+ errorScript: ''
+ });
fixture.detectChanges();
- expect(getByDataAutomationId('rule-option-checkbox-asynchronous')).toBeTruthy();
expect(getByDataAutomationId('rule-option-checkbox-asynchronous')).toBeTruthy();
expect(getByDataAutomationId('rule-option-checkbox-inheritable')).toBeTruthy();
expect(getByDataAutomationId('rule-option-checkbox-enabled')).toBeFalsy();
- expect(getByDataAutomationId('rule-option-select-errorScript')).toBeFalsy();
+ expect(getByDataAutomationId('rule-option-select-errorScript')).toBeTruthy();
});
});
diff --git a/projects/aca-folder-rules/src/lib/rule-details/options/rule-options.ui-component.ts b/projects/aca-folder-rules/src/lib/rule-details/options/rule-options.ui-component.ts
index de7a28683..8376acb3f 100644
--- a/projects/aca-folder-rules/src/lib/rule-details/options/rule-options.ui-component.ts
+++ b/projects/aca-folder-rules/src/lib/rule-details/options/rule-options.ui-component.ts
@@ -23,20 +23,98 @@
* along with Alfresco. If not, see .
*/
-import { Component, Input } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { Component, forwardRef, HostBinding, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { RuleOptions } from '../../model/rule.model';
@Component({
selector: 'aca-rule-options',
templateUrl: 'rule-options.ui-component.html',
- styleUrls: ['rule-options.ui-component.scss']
+ styleUrls: ['rule-options.ui-component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ host: { class: 'aca-rule-options' },
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ multi: true,
+ useExisting: forwardRef(() => RuleOptionsUiComponent)
+ }
+ ]
})
-export class RuleOptionsUiComponent {
- @Input() form: FormGroup;
- @Input() preview: boolean;
- disableSelector = true;
+export class RuleOptionsUiComponent implements ControlValueAccessor, OnDestroy {
+ form = new FormGroup({
+ isDisabled: new FormControl(),
+ isInheritable: new FormControl(),
+ isAsynchronous: new FormControl(),
+ errorScript: new FormControl()
+ });
- toggleScriptSelector() {
- this.disableSelector = !this.disableSelector;
+ formSubscription = this.form.valueChanges.subscribe((value: any) => {
+ this.onChange({
+ isEnabled: !value.isDisabled,
+ isInheritable: value.isInheritable,
+ isAsynchronous: value.isAsynchronous,
+ errorScript: value.errorScript ?? ''
+ });
+ this.onTouch();
+ });
+
+ @HostBinding('class.read-only')
+ readOnly = false;
+
+ onChange: (options: RuleOptions) => void = () => undefined;
+ onTouch: () => void = () => undefined;
+
+ get isAsynchronousChecked(): boolean {
+ return this.form.get('isAsynchronous').value;
+ }
+ get isInheritableChecked(): boolean {
+ return this.form.get('isInheritable').value;
+ }
+
+ 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) {
+ errorScriptFormControl.enable();
+ } else {
+ errorScriptFormControl.disable();
+ }
+ }
+
+ registerOnChange(fn: () => void) {
+ this.onChange = fn;
+ }
+
+ registerOnTouched(fn: () => void) {
+ this.onTouch = fn;
+ }
+
+ setDisabledState(isDisabled: boolean) {
+ if (isDisabled) {
+ this.form.disable();
+ this.readOnly = true;
+ } else {
+ this.form.enable();
+ this.readOnly = false;
+ }
+ }
+
+ ngOnDestroy() {
+ this.formSubscription.unsubscribe();
+ }
+
+ toggleErrorScriptDropdown(value: MatCheckboxChange) {
+ const formControl: AbstractControl = this.form.get('errorScript');
+ if (value.checked) {
+ formControl.enable();
+ } else {
+ formControl.disable();
+ }
}
}
diff --git a/projects/aca-folder-rules/src/lib/rule-details/rule-details.ui-component.html b/projects/aca-folder-rules/src/lib/rule-details/rule-details.ui-component.html
index b0e4c9c00..2b105e991 100644
--- a/projects/aca-folder-rules/src/lib/rule-details/rule-details.ui-component.html
+++ b/projects/aca-folder-rules/src/lib/rule-details/rule-details.ui-component.html
@@ -1,7 +1,7 @@
-