feat(core): to handle multi line action inputs

Author: Akanksha Singh

projects/workflows-creator/src/lib/builder/group/group.component.html

@@ -50,19 +50,23 @@
       </span>
     </span>
   </div>
-  <span *ngFor="let node of group.children; let i = index">
+  <div
+    *ngFor="let node of group.children; let i = index"
+    [style.margin-bottom.px]="
+      node.node.noMultiLine ? node.node.noMultiLine * 32 : null
+    "
+  >
     <workflow-node
       [ngClass]="{'last-node': i === group.children.length - 1}"
       [node]="node"
-      [ngClass]="{'last-node': i === group.children.length - 1}"
       [isLast]="i === group.children.length - 1"
       [isFirst]="i === 0"
       [inputTemplate]="inputs"
       [popupTemplate]="nodePopup"
       (add)="openPopup(group.nodeType)"
       (remove)="onNodeRemove(i)"
     ></workflow-node>
-  </span>
+  </div>
 
   <popper-content #nodePopup>
     <div
@@ -81,47 +85,35 @@
       <ng-container
         *ngIf="!(input.isHidden && input.isHidden(nodeWithInput.node))"
       >
-        {{
-          (input.prefix.state
-            ? nodeWithInput.node.state.get(input.prefix.state)
-            : input.prefix) || ''
-        }}
-        <div
-          class="input-text"
-          [popper]="inputPopper"
-          [popperShowOnStart]="false"
-          [popperHideOnClickOutside]="false"
-          [popperHideOnScroll]="true"
-          [popperTrigger]="'none'"
-          [popperPlacement]="'bottom-start'"
-          [popperApplyClass]="'workflow-popper'"
-          (click)="onPoperClick($event, inputPopper)"
-          (mouseover)="showTooltip($event, nodeWithInput, input)"
-          (mouseout)="hideTooltip()"
-        >
-          <span
-            class="value-text"
-            *ngIf="input.getValueName(nodeWithInput.node.state)"
-            title="{{ input.getValueName(nodeWithInput.node.state) }}"
-            (click)="setInput(input, nodeWithInput)"
-            >{{ input.getValueName(nodeWithInput.node.state) }}</span
-          >
-          <span
-            class="placeholder-text"
-            *ngIf="!input.getValueName(nodeWithInput.node.state)"
-          >
-            {{
-              nodeWithInput.node.state.get(input.customPlaceholder?.state) ??
-                input.placeholder
-            }}
-          </span>
-        </div>
-        {{
-          (input.suffix?.state
-            ? nodeWithInput.node.state.get(input.suffix?.state)
-            : input.suffix) || ''
-        }}
+        <ng-container *ngIf="input.nextLine; else inlineInput">
+          <div class="input-next-line">
+            <ng-container
+              *ngTemplateOutlet="
+                renderInput;
+                context: {
+                  input: input,
+                  nodeWithInput: nodeWithInput,
+                  inputPopper: inputPopper
+                }
+              "
+            ></ng-container>
+          </div>
+        </ng-container>
+
+        <ng-template #inlineInput>
+          <ng-container
+            *ngTemplateOutlet="
+              renderInput;
+              context: {
+                input: input,
+                nodeWithInput: nodeWithInput,
+                inputPopper: inputPopper
+              }
+            "
+          ></ng-container>
+        </ng-template>
       </ng-container>
+
       <popper-content #inputPopper>
         <ng-container
           *ngIf="
@@ -154,6 +146,55 @@
     </ng-container>
   </ng-template>
 
+  <ng-template
+    #renderInput
+    let-input="input"
+    let-nodeWithInput="nodeWithInput"
+    let-inputPopper="inputPopper"
+  >
+    {{
+      (input.prefix?.state
+        ? nodeWithInput.node.state.get(input.prefix.state)
+        : input.prefix) || ''
+    }}
+    <div
+      class="input-text"
+      [popper]="inputPopper"
+      [popperShowOnStart]="false"
+      [popperHideOnClickOutside]="false"
+      [popperHideOnScroll]="true"
+      [popperTrigger]="'none'"
+      [popperPlacement]="'bottom-start'"
+      [popperApplyClass]="'workflow-popper'"
+      (click)="onPoperClick($event, inputPopper)"
+      (mouseover)="showTooltip($event, nodeWithInput, input)"
+      (mouseout)="hideTooltip()"
+    >
+      <span
+        class="value-text"
+        *ngIf="input.getValueName(nodeWithInput.node.state)"
+        title="{{ input.getValueName(nodeWithInput.node.state) }}"
+        (click)="setInput(input, nodeWithInput)"
+      >
+        {{ input.getValueName(nodeWithInput.node.state) }}
+      </span>
+      <span
+        class="placeholder-text"
+        *ngIf="!input.getValueName(nodeWithInput.node.state)"
+      >
+        {{
+          nodeWithInput.node.state.get(input.customPlaceholder?.state) ??
+            input.placeholder
+        }}
+      </span>
+    </div>
+    {{
+      (input.suffix?.state
+        ? nodeWithInput.node.state.get(input.suffix?.state)
+        : input.suffix) || ''
+    }}
+  </ng-template>
+
   <ng-template
     #textTemplate
     let-callback="callback"

projects/workflows-creator/src/lib/builder/group/group.component.scss

@@ -58,6 +58,10 @@
       }
     }
   }
+  .input-next-line {
+    display: block;
+    height: 5px;
+  }
 
   .input-text {
     cursor: pointer;
@@ -66,7 +70,6 @@
     text-decoration: inherit;
     .placeholder-text {
       color: $placeholder-color;
-      text-transform: lowercase;
     }
     .value-text {
       display: inline-block;

projects/workflows-creator/src/lib/builder/group/group.component.ts

@@ -190,36 +190,29 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
    * use the default template
    */
   ngAfterViewInit() {
+    // Create a base template map with defaults
+    const baseTemplateMap = {
+      [InputTypes.Boolean]: this.listTemplate,
+      [InputTypes.List]: this.listTemplate,
+      [InputTypes.Text]: this.textTemplate,
+      [InputTypes.Number]: this.numberTemplate,
+      [InputTypes.Percentage]: this.numberTemplate,
+      [InputTypes.Date]: this.dateTemplate,
+      [InputTypes.DateTime]: this.dateTimeTemplate,
+      [InputTypes.People]: this.searchableDropdownTemplate,
+      [InputTypes.Interval]: this.listTemplate,
+      [InputTypes.Email]: this.emailTemplate,
+      [InputTypes.OptionList]: this.listTemplate,
+      [InputTypes.Stepper]: this.listTemplate,
+      [InputTypes.IntervalDate]: this.listTemplate,
+      [InputTypes.IntervalTime]: this.listTemplate,
+    };
+
+    // Merge consumer's custom templates with base templates
+    // Consumer templates take priority, base templates are fallbacks
     this.templateMap = {
-      [InputTypes.Boolean]:
-        this.templateMap?.[InputTypes.Boolean] || this.listTemplate,
-      [InputTypes.List]:
-        this.templateMap?.[InputTypes.List] || this.listTemplate,
-      [InputTypes.Text]:
-        this.templateMap?.[InputTypes.Text] || this.textTemplate,
-      [InputTypes.Number]:
-        this.templateMap?.[InputTypes.Number] || this.numberTemplate,
-      [InputTypes.Percentage]:
-        this.templateMap?.[InputTypes.Percentage] || this.numberTemplate,
-      [InputTypes.Date]:
-        this.templateMap?.[InputTypes.Date] || this.dateTemplate,
-      [InputTypes.DateTime]:
-        this.templateMap?.[InputTypes.DateTime] || this.dateTimeTemplate,
-      [InputTypes.People]:
-        this.templateMap?.[InputTypes.People] ||
-        this.searchableDropdownTemplate,
-      [InputTypes.Interval]:
-        this.templateMap?.[InputTypes.Interval] || this.listTemplate,
-      [InputTypes.Email]:
-        this.templateMap?.[InputTypes.Email] || this.emailTemplate,
-      [InputTypes.OptionList]:
-        this.templateMap?.[InputTypes.OptionList] || this.listTemplate,
-      [InputTypes.Stepper]:
-        this.templateMap?.[InputTypes.Stepper] || this.listTemplate,
-      [InputTypes.IntervalDate]:
-        this.templateMap?.[InputTypes.IntervalDate] || this.listTemplate,
-      [InputTypes.IntervalTime]:
-        this.templateMap?.[InputTypes.IntervalTime] || this.listTemplate,
+      ...baseTemplateMap,
+      ...this.templateMap, // Consumer's custom templates override defaults
     };
   }
 

projects/workflows-creator/src/lib/builder/tooltip-render/tooltip-render.component.ts

@@ -1,17 +1,13 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input} from '@angular/core';
 
 @Component({
   selector: 'workflow-tooltip-render',
   templateUrl: './tooltip-render.component.html',
   styleUrls: ['./tooltip-render.component.scss'],
 })
-export class TooltipRenderComponent implements OnInit {
+export class TooltipRenderComponent {
   @Input() showsTooltip = true;
   @Input() tooltipText = 'Default tooltip text';
   @Input() topPosition = 215;
   @Input() leftPosition = 400;
-
-  constructor() {}
-
-  ngOnInit(): void {}
 }

projects/workflows-creator/src/lib/services/statement/inputs/column.input.ts

@@ -9,7 +9,7 @@ export class ColumnInput extends WorkflowPrompt {
   inputKey = 'column';
   listNameField = 'text';
   listValueField = 'value';
-  placeholder = 'Column';
+  placeholder = 'column';
   options = <S extends RecordOfAnyType>(state: State<S>) =>
     state.get('columns');
   static identifier = 'ColumnInput';

projects/workflows-creator/src/lib/services/statement/inputs/criteria.input.ts

@@ -9,7 +9,7 @@ export class CriteriaInput extends WorkflowPrompt {
   inputKey = 'column';
   listNameField = 'text';
   listValueField = 'value';
-  placeholder = 'Criteria';
+  placeholder = 'criteria';
   options = <S extends RecordOfAnyType>(state: State<S>) =>
     state.get('columns');
   static identifier = 'CriteriaInput';

projects/workflows-creator/src/lib/services/statement/inputs/email.input.ts

@@ -9,7 +9,7 @@ export class EmailDataInput extends WorkflowPrompt {
   suffix = '';
   typeFunction = () => InputTypes.Email;
   inputKey = 'email';
-  placeholder = 'Email';
+  placeholder = 'email';
   static identifier = 'EmailDataInput';
 
   getIdentifier(): string {

projects/workflows-creator/src/lib/services/statement/inputs/interval.input.ts

@@ -9,7 +9,7 @@ export class IntervalInput extends WorkflowPrompt {
   inputKey = 'interval';
   listNameField = 'text';
   listValueField = 'value';
-  placeholder = 'Interval';
+  placeholder = 'interval';
   options = <S extends RecordOfAnyType>(state: State<S>) =>
     state.get('intervalList');
   static identifier = 'IntervalInput';

projects/workflows-creator/src/lib/services/statement/inputs/value.input.ts

@@ -14,7 +14,7 @@ export class ValueInput extends WorkflowListPrompt {
   inputKey = 'value';
   listNameField = 'text';
   listValueField = 'value';
-  placeholder = 'Something';
+  placeholder = 'something';
   customPlaceholder: string | {state: string} = {state: 'valuePlaceholder'};
 
   isHidden = (node: BpmnNode) => {

projects/workflows-creator/src/lib/services/statement/inputs/valuetype.input.ts

@@ -9,7 +9,7 @@ export class ValueTypeInput extends WorkflowListPrompt {
   inputKey = 'valueType';
   listNameField = 'text';
   listValueField = 'value';
-  placeholder = 'Something';
+  placeholder = 'something';
 
   options = <S extends RecordOfAnyType>(state: State<S>) =>
     state.get('valueTypes') as [];