From 830a876e2d935b65c3d5b8f09a4d181da4bd56bb Mon Sep 17 00:00:00 2001 From: Mykyta Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com> Date: Fri, 10 May 2024 12:07:50 +0200 Subject: [PATCH] [ACS-7573] folder rules fixes (#3836) * [ACS-7573] folder rules fixes * [ACS-7573] cr fix --- .../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 | 4 +- .../rule-composite-condition.ui-component.ts | 41 ++++++++----------- .../rule-simple-condition.ui-component.html | 8 ++-- .../rule-simple-condition.ui-component.ts | 39 ++++++++---------- .../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, 87 insertions(+), 58 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 0120a2776..acdb6807e 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 4f66706f8..ee287b0fc 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 c33ba6fcf..5f315c3a7 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 c0dc9d56d..d2af1b9ee 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 e9545513d..b946f9795 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"]`)); 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 20992c7a0..ef5bbff47 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,18 +68,17 @@ export class RuleCompositeConditionUiComponent implements ControlValueAccessor, @HostBinding('class.aca-childCompositeCondition') @Input() childCondition = false; - - form = new FormGroup({ - inverted: new FormControl(), - booleanMode: new FormControl(), - compositeConditions: new FormArray([]), - simpleConditions: new FormArray([]) - }); + @Input() + readOnly = false; readonly isOrImplemented = false; - @Input() - public readOnly = false; + form = new FormGroup({ + inverted: new FormControl(), + booleanMode: new FormControl({ value: 'and', disabled: !this.isOrImplemented || this.readOnly }), + compositeConditions: new FormArray([]), + simpleConditions: new FormArray([]) + }); private formSubscription = this.form.valueChanges.subscribe((value: any) => { this.onChange(value); @@ -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'); @@ -164,11 +153,17 @@ export class RuleCompositeConditionUiComponent implements ControlValueAccessor, this.formSubscription.unsubscribe(); } - ngOnChanges(changes: SimpleChanges): void { - const readOnly = changes['readOnly'].currentValue; + ngOnChanges(changes: SimpleChanges) { + 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 a2616dfa3..491a06637 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 77736b86b..3f2856a2c 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'), @@ -89,17 +89,10 @@ export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAcces showLoadingSpinner: boolean; + @Input() readOnly = false; + private onDestroy$ = new Subject(); private autoCompleteOptionsSubscription: Subscription; - private _readOnly = false; - @Input() - get readOnly(): boolean { - return this._readOnly; - } - set readOnly(isReadOnly: boolean) { - this.setDisabledState(isReadOnly); - } - private readonly disabledTags = !this.tagService.areTagsEnabled(); private readonly disabledCategories = !this.categoryService.areCategoriesEnabled(); @@ -168,16 +161,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 +201,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 d74310729..ffd0c4213 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 10b771907..d8d26a0be 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 @@
- +
- +