feat(core): changes condition script for passed by and coming in clauses

projects/workflows-creator/package.json

@@ -6,7 +6,8 @@
     "angular-library"
   ],
   "peerDependencies": {
-    "@popperjs/core": "^2.11.6"
+    "@popperjs/core": "^2.11.6",
+    "ng-multiselect-dropdown": "^0.3.9"
   },
   "scripts": {
     "checkIfNodeModulesExist": "[ -d \"../../node_modules\" ]",

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

@@ -11,7 +11,7 @@
       (add)="openPopup(types.GROUP)"
       (remove)="onGroupRemove(i)"
       (eventAdded)="onEventAdded($event)"
-      (eventRemoved)="onEventRemoved()"
+      (nodeRemoved)="onNodeRemoved()"
       (actionAdded)="onActionAdded($event)"
       (itemChanged)="onItemChanged($event)"
     ></workflow-group>
@@ -30,6 +30,7 @@
       [allColumns]="allColumns"
       (eventAdded)="onEventAdded($event)"
       (eventRemoved)="onEventRemoved()"
+      (nodeRemoved)="onNodeRemoved()"
       (actionAdded)="onActionAdded($event)"
       (itemChanged)="onItemChanged($event)"
     ></workflow-group>

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

@@ -26,7 +26,7 @@
   }
 }
 .container {
-  min-width: 46%;
+  min-width: 52%;
   max-width: max-content;
   color: rgb(50, 51, 56);
   margin: auto;

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

@@ -26,6 +26,7 @@ import {
   ConditionTypes,
   EventTypes,
   LocalizedStringKeys,
+  NUMBER,
   NodeTypes,
   NotificationRecipientTypesEnum,
   ValueTypes,
@@ -48,6 +49,12 @@ import {
 } from '../types';
 import {LocalizationProviderService} from '../services/localization-provider.service';
 import {LocalizationPipe} from '../pipes/localization.pipe';
+import {
+  ReadColumnValue,
+  TriggerWhenColumnChanges,
+} from '../services/bpmn/elements/tasks';
+import {GatewayElement} from '../services/bpmn/elements/gateways';
+
 @Component({
   selector: 'workflow-builder',
   templateUrl: './builder.component.html',
@@ -107,6 +114,7 @@ export class BuilderComponent<E> implements OnInit, OnChanges {
   stateChange = new EventEmitter<StateMap<RecordOfAnyType>>();
   @Output()
   diagramChange = new EventEmitter<Object>();
+
   @Output()
   eventAdded = new EventEmitter<EventAddition<E>>();
   @Output()
@@ -276,7 +284,7 @@ export class BuilderComponent<E> implements OnInit, OnChanges {
     this.updateDiagram();
     this.updateState(event.node, event.newNode.inputs);
     this.elseBlockHidden =
-      !this.eventGroups[0]?.children?.length &&
+      this.eventGroups[0]?.children?.length === 1 &&
       (event.node.getIdentifier() === EventTypes.OnIntervalEvent ||
         event.node.getIdentifier() === EventTypes.OnAddItemEvent);
   }
@@ -295,6 +303,12 @@ export class BuilderComponent<E> implements OnInit, OnChanges {
             events[0].node.state.get('valueType') === ValueTypes.AnyValue)));
     this.updateDiagram();
   }
+
+  onNodeRemoved() {
+    this.updateDiagram();
+    if (this.eventGroups[0]?.children?.length)
+      this.hideNodeElseBlockIfRequired();
+  }
   /**
    * When an action is added, emit an event with the name of the action and the action itself, update
    * the diagram, and update the state of the action
@@ -321,9 +335,31 @@ export class BuilderComponent<E> implements OnInit, OnChanges {
       item: item.element.node,
     });
     this.updateState(item.element.node, item.element.inputs);
-    this.hideElseBlockIfRequired();
+    this.hideNodeElseBlockIfRequired();
     this.updateDiagram();
   }
+  /**
+   * This function checks if the else block should be hidden based on the type and number of events in
+   * the event group.
+   */
+  hideNodeElseBlockIfRequired() {
+    const events = this.eventGroups[0].children;
+    let value = events[0].node.state.get('value');
+    if (typeof value === 'object') {
+      value = value.value;
+    }
+    if (events.length !== 1) {
+      this.elseBlockHidden = false;
+    } else {
+      this.elseBlockHidden =
+        events[0].node.getIdentifier() === EventTypes.OnIntervalEvent ||
+        events[0].node.getIdentifier() === EventTypes.OnAddItemEvent ||
+        (events[0].node.getIdentifier() === EventTypes.OnChangeEvent &&
+          (value === ValueTypes.AnyValue ||
+            events[0].node.state.get('valueType') === ValueTypes.AnyValue));
+    }
+  }
+
   /**
    * "If the type is a group, then get the groups, otherwise throw an error."
    *
@@ -391,6 +427,31 @@ export class BuilderComponent<E> implements OnInit, OnChanges {
     value: AllowedValues | AllowedValuesMap,
     select = false,
   ) {
+    if (
+      (input.getIdentifier() === 'ValueTypeInput' ||
+        input.getIdentifier() === 'ValueInput') &&
+      element.node.getIdentifier() === 'OnChangeEvent'
+    ) {
+      if (
+        ((value as AllowedValuesMap)?.value as AllowedValuesMap)?.value ===
+          ValueTypes.AnyValue ||
+        (value as AllowedValuesMap)?.value === ValueTypes.AnyValue
+      ) {
+        /**
+         * Remove node on changes event
+         */
+        element.node.elements.splice(-NUMBER.TWO, NUMBER.TWO);
+        // element.inputs[1].prefix = '';
+        //this.enableActionIcon = false;
+      } else {
+        element.node.elements = [
+          TriggerWhenColumnChanges.identifier,
+          ReadColumnValue.identifier,
+          GatewayElement.identifier,
+        ];
+      }
+    }
+
     if (select && isSelectInput(input)) {
       element.node.state.change(
         `${input.inputKey}Name`,
@@ -496,9 +557,12 @@ export class BuilderComponent<E> implements OnInit, OnChanges {
             } else {
               valueExists = !!node.node.state.get('value');
             }
-            const valueTypeIsAnyValue =
-              node.node.state.get('valueType') === ValueTypes.AnyValue;
-            isValid = columnExists && (valueExists || valueTypeIsAnyValue);
+            const valueTypeIsSufficient = [
+              ValueTypes.AnyValue,
+              ValueTypes.Today,
+              ValueTypes.PastToday,
+            ].includes(node.node.state.get('valueType'));
+            isValid = columnExists && (valueExists || valueTypeIsSufficient);
             break;
           case EventTypes.OnIntervalEvent:
             const intervalExists = !!node.node.state.get('interval');

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

@@ -383,6 +383,7 @@
     let-appendEmailBody="appendEmailBody"
     let-setFocusKey="setFocusKey"
     let-hide="hide"
+    let-setFocusOutPos="setFocusOutPos"
   >
     <div class="email-template" (document:click)="hide()">
       <input
@@ -391,14 +392,15 @@
         id="email-subject"
         autofocus
         (focus)="setFocusKey(emailInput, 'subject')"
+        (focusout)="setFocusOutPos(emailInput, $event.target.selectionStart)"
         [placeholder]="typeSubjectPlaceholder"
         [(ngModel)]="emailInput.subject"
       />
       <textarea
         [placeholder]="typeEmailPlaceholder"
         id="email-body"
         class="email-input email-body-input"
-        (focus)="setFocusKey(emailInput, 'body')"
+        (focusout)="setFocusOutPos(emailInput, $event.target.selectionStart)"
         [(ngModel)]="emailInput.body"
       ></textarea>
       <div class="auto-populate">
@@ -414,7 +416,7 @@
           (click)="callback(emailInput)"
           [disabled]="!emailInput.subject || !emailInput.body"
         >
-          {{ localizedStringKeys.SetLbl | localization }}
+          {{ setLbl }}
         </button>
       </div>
     </div>

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

@@ -161,7 +161,7 @@ input[type="time"]:focus {
     .value-text {
       display: inline-block;
       overflow: hidden;
-      max-width: 45%;
+      max-width: 15rem;
       text-decoration: inherit;
       text-overflow: ellipsis;
       vertical-align: top;

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

@@ -93,7 +93,7 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
   eventAdded = new EventEmitter<unknown>();
 
   @Output()
-  eventRemoved = new EventEmitter<unknown>();
+  nodeRemoved = new EventEmitter<unknown>();
 
   @Output()
   actionAdded = new EventEmitter<unknown>();
@@ -110,6 +110,7 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
     subject: '',
     body: '',
     focusKey: '',
+    caretPos: 0,
   };
 
   dropdownSettings: IDropdownSettings = {
@@ -142,6 +143,9 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
 
   typeSubjectPlaceholder = '';
   typeEmailPlaceholder = '';
+  doThisLbl = '';
+  whenThisHappensLbl = '';
+  setLbl = '';
 
   localizedStringKeys = LocalizedStringKeys;
 
@@ -216,6 +220,14 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
         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,
     };
   }
 
@@ -229,6 +241,13 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
     if (allowedInputs.includes(input.getIdentifier())) {
       const value = input.getModelValue(nodeWithInput.node.state);
       if (nodeWithInput.node.state.get('email')) {
+        (value as AllowedValuesMap).body = (
+          (value as AllowedValuesMap).body as string
+        ).replace(/\\"/g, '"');
+        (value as AllowedValuesMap).subject = (
+          (value as AllowedValuesMap).subject as string
+        ).replace(/\\"/g, '"');
+
         this.emailInput = value;
       } else {
         switch (nodeWithInput.node.state.get('valueInputType')) {
@@ -269,11 +288,21 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
    */
   appendEmailBody(item: Select, emailInput: EmailInput) {
     if (emailInput.focusKey === 'subject') {
-      emailInput.subject += ` ${item.value}`;
+      emailInput.subject = [
+        emailInput.subject.slice(0, emailInput.caretPos),
+        `${item.value}`,
+        emailInput.subject.slice(emailInput.caretPos),
+      ].join('');
     }
     if (emailInput.focusKey === 'body') {
-      emailInput.body += ` ${item.value}`;
+      emailInput.body = [
+        emailInput.body.slice(0, emailInput.caretPos),
+        `${item.value}`,
+        emailInput.body.slice(emailInput.caretPos),
+      ].join('');
     }
+
+    emailInput.caretPos += `${item.value}`.length;
   }
 
   /**
@@ -286,6 +315,14 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
     emailInput.focusKey = key;
   }
 
+  /**
+   * @emailInput this is the object that contains the email input
+   * @caretPosition pos caret position
+   */
+  setFocusOutPos(emailInput: EmailInput, caretPosition: number) {
+    emailInput.caretPos = caretPosition;
+  }
+
   /**
    * If the type is an action, set the node list to the actions, otherwise if the type is an event, set
    * the node list to the trigger events if there is only one event group and no children, otherwise
@@ -328,6 +365,7 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
       subject: '',
       body: '',
       focusKey: '',
+      caretPos: 0,
     };
     const newNode = {
       node: this.nodes.getNodeByName(
@@ -340,20 +378,20 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
       inputs: this.nodes.mapInputs(node),
     };
     if (node.type === NodeTypes.EVENT) {
-      this.eventAdded.emit({
-        node: node,
-        newNode: newNode,
-      });
       if (newNode.node.getIdentifier() === 'OnIntervalEvent') {
         newNode.node.state.change('valueInputType', 'number');
       }
       this.group.children.push(newNode as EventWithInput<E>);
+      this.eventAdded.emit({
+        node: node,
+        newNode: newNode,
+      });
     } else if (node.type === NodeTypes.ACTION) {
+      this.group.children.push(newNode as ActionWithInput<E>);
       this.actionAdded.emit({
         node: node,
         newNode: newNode,
       });
-      this.group.children.push(newNode as ActionWithInput<E>);
     } else {
       throw new InvalidEntityError('Node');
     }
@@ -365,7 +403,7 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
    */
   onNodeRemove(index: number) {
     this.group.children.splice(index, 1);
-    this.eventRemoved.emit();
+    this.nodeRemoved.emit();
   }
 
   /**
@@ -387,13 +425,24 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
           element,
           input,
           input.setValue(element.node.state, value),
-          input.typeFunction(element.node.state) === InputTypes.List,
+          input.typeFunction(element.node.state) === InputTypes.List ||
+            input.typeFunction(element.node.state) === InputTypes.OptionList,
         );
+        this.clearValues();
       }
       popper.hide();
     };
   }
 
+  private clearValues() {
+    this.emailInput = {
+      subject: '',
+      body: '',
+      focusKey: '',
+      caretPos: 0,
+    };
+  }
+
   /**
    * It hides the previous popper and shows the current popper.
    * @param {MouseEvent} event - MouseEvent - The event that triggered the popper to show.
@@ -655,6 +704,9 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
     element: NodeWithInput<E>,
     input: WorkflowPrompt,
   ) {
+    if (input.inputKey === 'email') {
+      return;
+    }
     const currentIndex = element.inputs.findIndex(
       i => i.getIdentifier() === input.getIdentifier(),
     );

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

@@ -6,6 +6,7 @@
   position: relative;
   .workflow-content {
     flex-grow: 1;
+    height: 3rem;
   }
   .action-icons {
     cursor: pointer;