[ACS-7573] folder rules fixes (#3836)

* [ACS-7573] folder rules fixes * [ACS-7573] cr fix
2025-07-24 17:31:52 +00:00 · 2024-05-10 12:07:50 +02:00
parent 9c5a24053b
commit 830a876e2d
14 changed files with 87 additions and 58 deletions
--- 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;
--- 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;
+      }
    }
  }
 }
--- 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 @@
 <form class="aca-rule-action__form" [formGroup]="form">

-  <mat-form-field class="aca-rule-action-full-width">
+  <mat-form-field class="aca-rule-action-full-width" appearance="outline" subscriptSizing="dynamic">
    <mat-select
      formControlName="actionDefinitionId"
      data-automation-id="rule-action-select"
--- a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss
@@ -9,6 +9,7 @@

      .adf-property-list {
        padding: 8px;
+        background: unset;
      }

      .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
--- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.html
+++ b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.html
@@ -7,7 +7,7 @@
    class="aca-rule-composite-condition__form__row"
    *ngFor="let control of conditionFormControls; let i = index">

-    <mat-form-field *ngIf="i === 0">
+    <mat-form-field *ngIf="i === 0" appearance="outline" subscriptSizing="dynamic">
      <mat-select
        [formControl]="invertedControl"
        [disabled]="readOnly">
@@ -16,9 +16,8 @@
      </mat-select>
    </mat-form-field>

-    <mat-form-field *ngIf="i > 0">
+    <mat-form-field *ngIf="i > 0" appearance="outline" subscriptSizing="dynamic">
      <mat-select
-        [disabled]="!isOrImplemented || i > 1 || readOnly"
        [formControl]="booleanModeControl">
        <mat-option value="and">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LOGIC_OPERATORS.AND' | translate }}</mat-option>
        <mat-option value="or">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LOGIC_OPERATORS.OR' | translate }}</mat-option>
--- 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;
--- 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"]`));

--- 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();
+      }
    }
  }
 }
--- 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 @@
 <form class="aca-rule-simple-condition__form" [formGroup]="form">
-  <mat-form-field class="aca-rule-simple-condition__form__field-input">
+  <mat-form-field class="aca-rule-simple-condition__form__field-input" appearance="outline" subscriptSizing="dynamic">
    <mat-select formControlName="field" data-automation-id="field-select"
      (selectionChange)="onChangeField()">
      <mat-option *ngIf="!isSelectedFieldKnown" [value]="selectedField.name" data-automation-id="unknown-field-option">
@@ -11,7 +11,8 @@
    </mat-select>
  </mat-form-field>

-  <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__comparator-input" [class]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
+  <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__comparator-input" subscriptSizing="dynamic"
+                  [class]="{ 'aca-hidden': isComparatorHidden }" appearance="outline" data-automation-id="comparator-form-field">
    <mat-select formControlName="comparator" data-automation-id="comparator-select">
      <mat-option
        *ngFor="let comparator of selectedFieldComparators"
@@ -21,7 +22,8 @@
    </mat-select>
  </mat-form-field>

-  <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__parameter-input" [ngSwitch]="selectedField.type">
+  <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__parameter-input"
+                  subscriptSizing="dynamic" appearance="outline" [ngSwitch]="selectedField.type">
    <mat-select formControlName="parameter" data-automation-id="simple-condition-value-select" *ngSwitchCase="'mimeType'">
      <mat-option *ngFor="let mimeType of mimeTypes"
        [value]="mimeType.value">
--- 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 <http://www.gnu.org/licenses/>.
 */

-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<void>();
  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
--- 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 @@
    <mat-form-field
      data-automation-id="rule-option-form-field-errorScript"
      floatLabel="always"
+      appearance="outline"
+      class="aca-rule-options__error-script-dropdown"
      [ngClass]="{ 'aca-hide-error-script-dropdown': hideErrorScriptDropdown }">
      <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.ERROR_SCRIPT' | translate }}</mat-label>
      <mat-select
--- a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss
@@ -8,10 +8,18 @@
    flex-direction: column;
  }

+  &__error-script-dropdown {
+    margin-top: 4px;
+  }
+
  &.aca-read-only &__checkbox > div > div:first-child {
    display: none;
  }

+  &.aca-read-only &__error-script-dropdown {
+    margin-left: -13px;
+  }
+
  .aca-hide-error-script-dropdown {
    visibility: hidden;
  }
--- 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 @@
    <div class="aca-rule-details__form__row">
      <label for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
      <div>
-        <mat-form-field floatLabel='auto' class="aca-rule-details__form__row__field">
+        <mat-form-field appearance="outline" floatLabel='auto' class="aca-rule-details__form__row__field">
          <input
            id="rule-details-name-input"
            matInput type="text" formControlName="name" data-automation-id="rule-details-name-input"
@@ -17,7 +17,7 @@
    <div class="aca-rule-details__form__row aca-rule-details__form__description">
      <label for="rule-details-description-textarea">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.DESCRIPTION' | translate }}</label>
      <div>
-        <mat-form-field floatLabel='auto' class="aca-rule-details__form__row__field">
+        <mat-form-field floatLabel='auto' appearance="outline" class="aca-rule-details__form__row__field">
        <textarea
          class="aca-rule-details__form__row__field__textarea"
          id="rule-details-description-textarea"
@@ -38,7 +38,7 @@
  </div>

  <div class="aca-rule-details__form__conditions">
-    <aca-rule-composite-condition formControlName="conditions"></aca-rule-composite-condition>
+    <aca-rule-composite-condition [readOnly]="readOnly" formControlName="conditions"></aca-rule-composite-condition>
    <mat-error class="aca-rule-details-error" *ngIf="conditions.hasError('ruleCompositeConditionInvalid')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.RULE_COMPOSITE_CONDITION_INVALID' | translate }}</mat-error>
  </div>

--- a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
@@ -69,7 +69,13 @@

    /* stylelint-disable selector-class-pattern */
    &.aca-read-only,
-    .mat-mdc-form-field-disabled {
+    .mat-form-field-disabled {
+      .mdc-notched-outline__leading,
+      .mdc-notched-outline__trailing,
+      .mdc-notched-outline__notch {
+        border: none;
+      }
+
      .mdc-line-ripple {
        &::before,
        &::after {