From 5a9e47a614c3954b228df3f41ead4446ee4f8eaf Mon Sep 17 00:00:00 2001 From: Mykyta Maliarchuk Date: Thu, 9 May 2024 07:56:52 +0200 Subject: [PATCH 1/2] [ACS-7573] folder rules fixes --- .../manage-rules.smart-component.scss | 9 +++++ .../rule-action-list.ui-component.scss | 6 ++- .../actions/rule-action.ui-component.html | 2 +- .../actions/rule-action.ui-component.scss | 1 + ...rule-composite-condition.ui-component.html | 5 +-- ...rule-composite-condition.ui-component.scss | 6 +++ ...e-composite-condition.ui-component.spec.ts | 5 ++- .../rule-composite-condition.ui-component.ts | 33 +++++++--------- .../rule-simple-condition.ui-component.html | 8 ++-- .../rule-simple-condition.ui-component.ts | 38 +++++++++---------- .../options/rule-options.ui-component.html | 2 + .../options/rule-options.ui-component.scss | 8 ++++ .../rule-details.ui-component.html | 6 +-- .../rule-details.ui-component.scss | 8 +++- 14 files changed, 84 insertions(+), 53 deletions(-) diff --git a/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss b/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss index 0120a27761..acdb6807e8 100644 --- a/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss +++ b/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss @@ -1,4 +1,13 @@ .aca-manage-rules { + /* stylelint-disable selector-class-pattern */ + .mat-mdc-slide-toggle:is(mat-slide-toggle) .mdc-switch:enabled .mdc-switch__track::after { + background: var(--mdc-switch-selected-track-color); + } + + .mat-mdc-slide-toggle .mdc-switch .mdc-switch__handle::before { + background: var(--mdc-switch-selected-pressed-handle-color); + } + &__actions-bar { padding: 0 30px; display: flex; diff --git a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss index 4f66706f8a..ee287b0fcd 100644 --- a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss +++ b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss @@ -1,6 +1,6 @@ .aca-rule-action-list { &__item { - padding: 4px 8px; + padding: 8px; border-radius: 8px; display: flex; @@ -10,6 +10,10 @@ &:nth-child(2n) { background-color: hsl(0deg, 0%, 95%); + + &:last-of-type { + margin-bottom: 8px; + } } } } diff --git a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.html index c33ba6fcf0..5f315c3a72 100644 --- a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.html +++ b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.html @@ -1,6 +1,6 @@
- + - + @@ -16,9 +16,8 @@ - + {{ 'ACA_FOLDER_RULES.RULE_DETAILS.LOGIC_OPERATORS.AND' | translate }} {{ 'ACA_FOLDER_RULES.RULE_DETAILS.LOGIC_OPERATORS.OR' | translate }} diff --git a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss index c0dc9d56d4..d2af1b9eeb 100644 --- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss +++ b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss @@ -21,6 +21,12 @@ margin: 0.5em 0; } + &__actions { + button:not(:disabled) { + background-color: unset; + } + } + &__row { display: flex; gap: 8px; diff --git a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.spec.ts b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.spec.ts index e9545513df..b05bb2620c 100644 --- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.spec.ts +++ b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.spec.ts @@ -76,7 +76,7 @@ describe('RuleCompositeConditionUiComponent', () => { describe('Read only mode', () => { it('should hide the add buttons in read only mode', () => { - fixture.componentInstance.setDisabledState(true); + fixture.componentInstance.readOnly = true; fixture.detectChanges(); const actionsElement = fixture.debugElement.query(By.css(`[data-automation-id="add-actions"]`)); @@ -85,7 +85,7 @@ describe('RuleCompositeConditionUiComponent', () => { it('should hide the more actions button on the right side of the condition', () => { fixture.componentInstance.writeValue(compositeConditionWithOneGroupMock); - fixture.componentInstance.setDisabledState(true); + fixture.componentInstance.readOnly = true; fixture.detectChanges(); const actionsButtonElements = fixture.debugElement.queryAll(By.css(`[data-automation-id="condition-actions-button"]`)); @@ -95,6 +95,7 @@ describe('RuleCompositeConditionUiComponent', () => { it('should have as many simple condition components as defined in the simpleConditions array', () => { fixture.componentInstance.writeValue(compositeConditionWithThreeConditionMock); + fixture.componentInstance.readOnly = true; fixture.detectChanges(); const simpleConditionComponents = fixture.debugElement.queryAll(By.css(`.aca-rule-simple-condition`)); diff --git a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.ts b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.ts index 20992c7a06..b72f9f1803 100644 --- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.ts +++ b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.ts @@ -68,19 +68,18 @@ export class RuleCompositeConditionUiComponent implements ControlValueAccessor, @HostBinding('class.aca-childCompositeCondition') @Input() childCondition = false; + @Input() + readOnly = false; + + readonly isOrImplemented = false; form = new FormGroup({ inverted: new FormControl(), - booleanMode: new FormControl(), + booleanMode: new FormControl({ value: 'and', disabled: !this.isOrImplemented || this.readOnly }), compositeConditions: new FormArray([]), simpleConditions: new FormArray([]) }); - readonly isOrImplemented = false; - - @Input() - public readOnly = false; - private formSubscription = this.form.valueChanges.subscribe((value: any) => { this.onChange(value); this.onTouch(); @@ -120,16 +119,6 @@ export class RuleCompositeConditionUiComponent implements ControlValueAccessor, this.onTouch = fn; } - setDisabledState(isDisabled: boolean) { - if (isDisabled) { - this.readOnly = true; - this.form.disable(); - } else { - this.readOnly = false; - this.form.enable(); - } - } - isFormControlSimpleCondition(control: FormControl): boolean { // eslint-disable-next-line no-prototype-builtins return control.value.hasOwnProperty('field'); @@ -165,10 +154,16 @@ export class RuleCompositeConditionUiComponent implements ControlValueAccessor, } ngOnChanges(changes: SimpleChanges): void { - const readOnly = changes['readOnly'].currentValue; + const readOnly = changes['readOnly']?.currentValue; + if (readOnly !== undefined && readOnly !== null) { - this.readOnly = readOnly; - this.setDisabledState(readOnly); + if (this.readOnly) { + this.readOnly = true; + this.form.disable(); + } else { + this.readOnly = false; + this.form.enable(); + } } } } diff --git a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html index a2616dfa37..491a066376 100644 --- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html +++ b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html @@ -1,5 +1,5 @@ - + @@ -11,7 +11,8 @@ - + - + diff --git a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.ts b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.ts index 77736b86ba..3bfaa1d8b6 100644 --- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.ts +++ b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.ts @@ -22,7 +22,7 @@ * from Hyland Software. If not, see . */ -import { Component, forwardRef, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, forwardRef, Input, OnDestroy, OnInit, ViewEncapsulation, OnChanges, SimpleChanges } from '@angular/core'; import { AbstractControl, ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; import { RuleSimpleCondition } from '../../model/rule-simple-condition.model'; import { comparatorHiddenForConditionFieldType, RuleConditionField, ruleConditionFields } from './rule-condition-fields'; @@ -76,7 +76,7 @@ const AUTOCOMPLETE_OPTIONS_DEBOUNCE_TIME = 500; } ] }) -export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAccessor, OnDestroy { +export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAccessor, OnChanges, OnDestroy { form = new FormGroup({ field: new FormControl('cm:name'), comparator: new FormControl('equals'), @@ -91,14 +91,8 @@ export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAcces private onDestroy$ = new Subject(); private autoCompleteOptionsSubscription: Subscription; - private _readOnly = false; - @Input() - get readOnly(): boolean { - return this._readOnly; - } - set readOnly(isReadOnly: boolean) { - this.setDisabledState(isReadOnly); - } + + @Input() readOnly = false; private readonly disabledTags = !this.tagService.areTagsEnabled(); private readonly disabledCategories = !this.categoryService.areCategoriesEnabled(); @@ -168,16 +162,6 @@ export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAcces this.onTouch = fn; } - setDisabledState(isDisabled: boolean) { - if (isDisabled) { - this._readOnly = true; - this.form.disable(); - } else { - this._readOnly = false; - this.form.enable(); - } - } - onChangeField() { if (!this.selectedFieldComparators.find((comparator) => comparator.name === this.comparatorControl.value)) { this.comparatorControl.setValue('equals'); @@ -218,6 +202,20 @@ export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAcces }); } + ngOnChanges(changes: SimpleChanges) { + const readOnly = changes['readOnly']?.currentValue; + + if (readOnly !== undefined && readOnly !== null) { + if (this.readOnly) { + this.readOnly = true; + this.form.disable(); + } else { + this.readOnly = false; + this.form.enable(); + } + } + } + private getCategories(categoryName: string) { this.showLoadingSpinner = true; this.categoryService diff --git a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html index d74310729e..ffd0c4213e 100644 --- a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html +++ b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html @@ -11,6 +11,8 @@ {{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.ERROR_SCRIPT' | translate }} div > div:first-child { display: none; } + &.aca-read-only &__error-script-dropdown { + margin-left: -13px; + } + .aca-hide-error-script-dropdown { visibility: hidden; } diff --git a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html index 10b7719071..d8d26a0be6 100644 --- a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html +++ b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html @@ -4,7 +4,7 @@
- +
- +