feat(core): workflow UI refinements

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

@@ -35,7 +35,7 @@
     ></workflow-group>
   </span>
   <ng-container *ngIf="showElseBlock">
-    {{localizedStringMap.elseLbl ? localizedStringMap.elseLbl : 'Else'}}
+    {{ localizedStringMap.elseLbl ? localizedStringMap.elseLbl : 'Else' }}
     <div class="down-arrow">
       <span class="icon-workflow-down-arrow red"></span>
     </div>

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

@@ -25,7 +25,8 @@
   }
 }
 .container {
-  width: 46%;
+  min-width: 46%;
+  max-width: max-content;
   color: rgb(50, 51, 56);
   margin: auto;
   font-size: 24px;

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

@@ -20,7 +20,7 @@ import {
 } from '../classes';
 import {AbstractBaseGroup} from '../classes/nodes';
 import {BuilderService, ElementService, NodeService} from '../classes/services';
-import {ConditionTypes, NodeTypes, EventTypes} from '../enum';
+import {EventTypes, NodeTypes, ValueTypes} from '../enum';
 import {InvalidEntityError} from '../errors/base.error';
 import {
   ActionAddition,
@@ -59,7 +59,7 @@ export class BuilderComponent<E> implements OnInit, OnChanges {
   state: StateMap<RecordOfAnyType> = {};
 
   @Input()
-  localizedStringMap: {[key: string]: string};
+  localizedStringMap: RecordOfAnyType;
 
   @Input()
   diagram = '';
@@ -239,7 +239,7 @@ export class BuilderComponent<E> implements OnInit, OnChanges {
     // TODO: to be refactored
     if (this.eventGroups[0].children?.length) {
       this.showElseBlock =
-        item.element.node.state.get('condition') !== ConditionTypes.Changes;
+        item.element.node.state.get('value') !== ValueTypes.AnyValue;
     }
     this.updateDiagram();
   }

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

@@ -17,8 +17,16 @@
         [popperPlacement]="'bottom'"
         (click)="openPopup(group.nodeType)"
       >
-        <span *ngIf="group.nodeType === types.EVENT">{{localizedStringMap.whenThisHappensLbl ? localizedStringMap.whenThisHappensLbl : 'When this happens'}}</span>
-        <span *ngIf="group.nodeType === types.ACTION">{{localizedStringMap.doThisLbl ? localizedStringMap.doThisLbl : 'Then do this'}}</span>
+        <span *ngIf="group.nodeType === types.EVENT">{{
+          localizedStringMap.whenThisHappensLbl
+            ? localizedStringMap.whenThisHappensLbl
+            : 'When this happens'
+        }}</span>
+        <span *ngIf="group.nodeType === types.ACTION">{{
+          localizedStringMap.doThisLbl
+            ? localizedStringMap.doThisLbl
+            : 'Then do this'
+        }}</span>
       </span>
     </div>
 
@@ -72,14 +80,14 @@
 
   <ng-template #inputs let-nodeWithInput="node">
     <ng-container *ngFor="let input of nodeWithInput.inputs || []">
-      {{
-        (input.prefix.state
-          ? nodeWithInput.node.state.get(input.prefix.state)
-          : input.prefix) || ''
-      }}
       <ng-container
-        *ngIf="!(input.isHidden && input.isHidden(nodeWithInput.node.state))"
+        *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"
@@ -104,15 +112,18 @@
             class="placeholder-text"
             *ngIf="!input.getValueName(nodeWithInput.node.state)"
           >
-            {{ input.placeholder }}</span
-          >
+            {{
+              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>
-      {{
-        (input.suffix?.state
-          ? nodeWithInput.node.state.get(input.suffix?.state)
-          : input.suffix) || ''
-      }}
       <popper-content #inputPopper>
         <ng-container
           *ngIf="
@@ -283,11 +294,19 @@
         id="email-subject"
         autofocus
         (focus)="setFocusKey(emailInput, 'subject')"
-        [placeholder]="localizedStringMap.typeSubjectLbl ? localizedStringMap.typeSubjectLbl : 'Type your subject'"
+        [placeholder]="
+          localizedStringMap.typeSubjectLbl
+            ? localizedStringMap.typeSubjectLbl
+            : 'Type your subject'
+        "
         [(ngModel)]="emailInput.subject"
       />
       <textarea
-        [placeholder]="localizedStringMap.typeEmailLbl ? localizedStringMap.typeEmailLbl : 'Type your email'"
+        [placeholder]="
+          localizedStringMap.typeEmailLbl
+            ? localizedStringMap.typeEmailLbl
+            : 'Type your email'
+        "
         id="email-body"
         class="email-input email-body-input"
         (focus)="setFocusKey(emailInput, 'body')"

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

@@ -9,14 +9,9 @@ import {
   ViewChild,
 } from '@angular/core';
 import {NgxPopperjsContentComponent} from 'ngx-popperjs';
-import {
-  isSelectInput,
-  NodeService,
-  WorkflowElement,
-  WorkflowPrompt,
-} from '../../classes';
+import {isSelectInput, NodeService, WorkflowPrompt} from '../../classes';
 import {AbstractBaseGroup} from '../../classes/nodes';
-import {ConditionTypes, InputTypes, NodeTypes, NUMBER} from '../../enum';
+import {InputTypes, NodeTypes, NUMBER, ValueTypes} from '../../enum';
 import {InvalidEntityError} from '../../errors/base.error';
 import {
   AllowedValues,
@@ -31,7 +26,6 @@ import {
   DateTime,
   EmailInput,
   Select,
-  Constructor,
   DateType,
 } from '../../types/base.types';
 import {IDropdownSettings} from 'ng-multiselect-dropdown';
@@ -68,7 +62,7 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
   nodeType: NodeTypes;
 
   @Input()
-  localizedStringMap: {[key: string]: string};
+  localizedStringMap: RecordOfAnyType;
 
   /* A decorator that tells Angular that the popupTemplate property is an input property. */
   @Input()
@@ -304,7 +298,7 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
         id,
         this.group.isElseGroup,
       ),
-      inputs: this.nodes.mapInputs(node.prompts),
+      inputs: this.nodes.mapInputs(node),
     };
     if (node.type === NodeTypes.EVENT) {
       this.eventAdded.emit({
@@ -433,15 +427,16 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
   ) {
     this.enableActionIcon = true;
     if (
-      input.getIdentifier() === 'ConditionInput' &&
+      (input.getIdentifier() === 'ValueTypeInput' ||
+        input.getIdentifier() === 'ValueInput') &&
       element.node.getIdentifier() === 'OnChangeEvent'
     ) {
-      if ((value as AllowedValuesMap).value === ConditionTypes.Changes) {
+      if ((value as AllowedValuesMap).value === ValueTypes.AnyValue) {
         /**
          * Remove node on changes event
          */
         element.node.elements.splice(-NUMBER.TWO, NUMBER.TWO);
-        element.inputs[1].prefix = '';
+        // element.inputs[1].prefix = '';
         this.enableActionIcon = false;
       } else {
         element.node.elements = [
@@ -487,7 +482,7 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
       element: element,
     });
     this.enableActionIcon =
-      element.node.state.get('condition') !== ConditionTypes.Changes;
+      element.node.state.get('value') !== ValueTypes.AnyValue;
   }
 
   /**

projects/workflows-creator/src/lib/classes/nodes/abstract-list-prompt.class.ts

@@ -1,10 +1,11 @@
+import {BpmnNode} from '../../types';
 import {State} from '../state/state.class';
 import {WorkflowPrompt} from './abstract-prompt.class';
 
 export abstract class WorkflowListPrompt extends WorkflowPrompt {
   abstract listNameField: string;
   abstract listValueField: string;
-  abstract isHidden?: <S>(state: State<S>) => boolean;
+  abstract isHidden?: (node: BpmnNode) => boolean;
   abstract options: <R, S>(state: State<S>) => R[];
 }
 

projects/workflows-creator/src/lib/classes/services/abstract-builder-service.class.ts

@@ -14,7 +14,7 @@ export abstract class BuilderService<E, S extends RecordOfAnyType> {
   ): Promise<string>;
   abstract restore(
     model: string,
-    localizedStringMap: {[key: string]: string},
+    localizedStringMap: RecordOfAnyType,
   ): Promise<{
     actions: ActionWithInput<E>[];
     elseActions: ActionWithInput<E>[];

projects/workflows-creator/src/lib/classes/services/abstract-node-service.class.ts

@@ -1,35 +1,35 @@
 import {WorkflowPrompt} from '..';
 import {NodeTypes} from '../../enum';
-import {Constructor, WorkflowNode} from '../../types/base.types';
+import {RecordOfAnyType, WorkflowNode} from '../../types/base.types';
 import {AbstractBaseGroup} from '../nodes';
 
 export abstract class NodeService<E> {
   abstract getActions(localizedStringMap: {
     [key: string]: string;
   }): WorkflowNode<E>[];
   abstract getEvents(
-    localizedStringMap: {[key: string]: string},
+    localizedStringMap: RecordOfAnyType,
     trigger?: boolean,
   ): WorkflowNode<E>[];
   abstract getGroups(
-    localizedStringMap: {[key: string]: string},
+    localizedStringMap: RecordOfAnyType,
     trigger?: boolean,
     type?: NodeTypes,
     isElseGroup?: boolean,
   ): AbstractBaseGroup<E>[];
   abstract getNodeByName(
-    localizedStringMap: {[key: string]: string},
+    localizedStringMap: RecordOfAnyType,
     name: string,
     groupType: string,
     groupId: string,
     id?: string,
     isElseAction?: boolean,
   ): WorkflowNode<E>;
   abstract getGroupByName(
-    localizedStringMap: {[key: string]: string},
+    localizedStringMap: RecordOfAnyType,
     name: string,
     nodeType: NodeTypes,
     id?: string,
   ): AbstractBaseGroup<E>;
-  abstract mapInputs(prompts: string[]): WorkflowPrompt[];
+  abstract mapInputs(node: WorkflowNode<E>): WorkflowPrompt[];
 }

projects/workflows-creator/src/lib/enum.ts

@@ -24,7 +24,6 @@ export enum InputTypes {
 
 /* Defining the types of conditions that can be used in the application. */
 export enum ConditionTypes {
-  Changes = 'changes',
   ComingIn = 'comingin',
   DueInDays = 'dueindays',
   Equal = 'equal',
@@ -36,11 +35,18 @@ export enum ConditionTypes {
   PastBy = 'pastby',
 }
 
+export enum ValueTypes {
+  Today = 'today',
+  PastToday = 'pasttoday',
+  AnyValue = 'anyValue',
+  Custom = 'customValue',
+}
+
 /* Defining the types of nodes that can be used in the application. */
 export enum NodeTypes {
-  ACTION,
-  EVENT,
-  GROUP,
+  ACTION = 'action',
+  EVENT = 'event',
+  GROUP = 'group',
 }
 
 /* Defining the types of elements that can be used in the application. */
@@ -81,6 +87,7 @@ export enum LocalizedStringKeys {
   WhenThisHappens = 'whenThisHappensLbl',
   DoThis = 'doThisLbl',
   ColumnChanges = 'columnChangesLbl',
+  ChangesTo = 'triggerColumnSuffix',
   OnInterval = 'onIntervalLbl',
   OnAddItem = 'onAddItemLbl',
   ItemCreated = 'itemCreatedLbl',

projects/workflows-creator/src/lib/services/bpmn/builder.service.ts

@@ -216,7 +216,7 @@ export class BpmnBuilderService extends BuilderService<
    *   - description: A string
    *   -
    */
-  async restore(xml: string, localizedStringMap: {[key: string]: string} = {}) {
+  async restore(xml: string, localizedStringMap: RecordOfAnyType = {}) {
     const result = await this.moddle.fromXML(xml);
     this.root = result.rootElement;
     const process = this.root.get('rootElements')[0];
@@ -273,15 +273,15 @@ export class BpmnBuilderService extends BuilderService<
         if (currentNode.type === NodeTypes.ACTION) {
           const nodeWithInput = {
             node: currentNode as BpmnAction,
-            inputs: this.nodes.mapInputs(currentNode.prompts),
+            inputs: this.nodes.mapInputs(currentNode),
           };
           (currentNode as BpmnAction).isElseAction
             ? elseActions.push(nodeWithInput)
             : actions.push(nodeWithInput);
         } else {
           events.push({
             node: currentNode,
-            inputs: this.nodes.mapInputs(currentNode.prompts),
+            inputs: this.nodes.mapInputs(currentNode),
           } as EventWithInput<ModdleElement>);
         }
       }

projects/workflows-creator/src/lib/services/bpmn/node.service.ts

@@ -1,9 +1,5 @@
 import {Inject, Injectable} from '@angular/core';
-import {
-  WorkflowAction,
-  WorkflowEvent,
-  WorkflowPrompt,
-} from '../../classes/nodes';
+import {WorkflowAction, WorkflowEvent} from '../../classes/nodes';
 import {NodeService} from '../../classes/services';
 import {BPMN_INPUTS, BPMN_NODES} from '../../const';
 import {NodeTypes} from '../../enum';
@@ -149,11 +145,11 @@ export class BpmnNodesService<E> extends NodeService<E> {
 
   /**
    * It takes an array of prompts, and returns an array of inputs
-   * @param prompts - typeof WorkflowPrompt[]
+   * @param node - typeof WorkflowNode
    * @returns An array of input instances.
    */
-  mapInputs(prompts: string[]) {
-    return prompts.map(input => {
+  mapInputs(node: WorkflowNode<E>) {
+    return node.prompts.map(input => {
       const inputInstance = this.inputs.find(i => i.getIdentifier() === input);
       if (!inputInstance) {
         throw new InvalidEntityError(input);