[ACS-6211] Resolved UI alignment issue in create rule dialog

Alfresco · Nov 17, 2023 · 2b600d0 · 2b600d0
1 parent 4ce4b82
commit 2b600d0
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 12 deletions.
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
@@ -1,6 +1,6 @@
 <form class="aca-rule-action__form" [formGroup]="form">
 
-  <mat-form-field>
+  <mat-form-field class="aca-rule-action-full-width">
     <mat-select
       formControlName="actionDefinitionId"
       data-automation-id="rule-action-select"
@@ -14,9 +14,10 @@
   </mat-form-field>
 
   <adf-card-view
+    *ngIf="cardViewItems?.length > 0"
     data-automation-id="rule-action-card-view"
     [properties]="cardViewItems"
-    [ngClass]="{ 'aca-rule-action-full-width': isFullWidth }"
+    class="aca-rule-action-full-width"
     [editable]="!readOnly">
   </adf-card-view>
 

diff --git 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
@@ -10,6 +10,6 @@
   }
 
   &-full-width {
-    width: 100%;
+    flex: 1;
   }
 }
diff --git a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.ts b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.ts
@@ -78,12 +78,14 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
   get parameterConstraints(): ActionParameterConstraint[] {
     return this._parameterConstraints;
   }
+
   set parameterConstraints(value) {
-    this._parameterConstraints = value.map((obj) => ({ ...obj, constraints: this.parseConstraintsToSelectOptions(obj.constraints) }));
+    this._parameterConstraints = value.map((obj) => ({
+      ...obj,
+      constraints: this.parseConstraintsToSelectOptions(obj.constraints)
+    }));
   }
 
-  isFullWidth = false;
-
   form = new FormGroup({
     actionDefinitionId: new FormControl('', Validators.required)
   });
@@ -100,10 +102,6 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
     return this.actionDefinitions.find((actionDefinition: ActionDefinitionTransformed) => actionDefinition.id === this.selectedActionDefinitionId);
   }
 
-  get cardViewStyle() {
-    return this.isFullWidth ? { width: '100%' } : {};
-  }
-
   onChange: (action: RuleAction) => void = () => undefined;
   onTouch: () => void = () => undefined;
 
@@ -171,7 +169,6 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
 
   setCardViewProperties() {
     this.cardViewItems = (this.selectedActionDefinition?.parameterDefinitions ?? []).map((paramDef) => {
-      this.isFullWidth = false;
       const constraintsForDropdownBox = this._parameterConstraints.find((obj) => obj.name === paramDef.name);
       const cardViewPropertiesModel = {
         label: paramDef.displayLabel + (paramDef.mandatory ? ' *' : ''),
@@ -208,7 +205,6 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
         //  falls through
         default:
           if (constraintsForDropdownBox && !this.readOnly) {
-            this.isFullWidth = true;
             return new CardViewSelectItemModel({
               ...cardViewPropertiesModel,
               value: (this.parameters[paramDef.name] as string) ?? '',