fix(core): reset the date,datetime column when another column is selected (#75)

GH-74

Author: arpit1503khanna

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

@@ -460,16 +460,16 @@ export class BuilderComponent<E> implements OnInit, OnChanges {
           case EventTypes.OnValueEvent:
           case ActionTypes.ChangeColumnValueAction:
             const columnExists = !!node.node.state.get('column');
-              let valueExists = false;
-              if (typeof node.node.state.get('value') !== 'undefined') {
-                valueExists = true;
-              } else if (
-                node.node.state.get('condition') === ConditionTypes.PastToday
-              ) {
-                valueExists = true;
-              } else {
-                valueExists = !!node.node.state.get('value');
-              }
+            let valueExists = false;
+            if (typeof node.node.state.get('value') !== 'undefined') {
+              valueExists = true;
+            } else if (
+              node.node.state.get('condition') === ConditionTypes.PastToday
+            ) {
+              valueExists = true;
+            } else {
+              valueExists = !!node.node.state.get('value');
+            }
             const valueTypeIsAnyValue =
               node.node.state.get('valueType') === ValueTypes.AnyValue;
             isValid = columnExists && (valueExists || valueTypeIsAnyValue);

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

@@ -277,7 +277,8 @@
         <input
           class="date-input"
           type="date"
-          [(ngModel)]="date"
+          [(ngModel)]="input.getModelValue(nodeWithInput.node.state) || date"
+          (ngModelChange)="updateSecondVariable($event, inputType.date)"
           (click)="$event.stopPropagation()"
           min="0000-01-01"
           max="9999-12-31"
@@ -321,10 +322,36 @@
     <div class="date-time-picker" (document:click)="hide()">
       <div class="time-picker">
         <div class="date-input">
-          <input type="date" [(ngModel)]="dateTime.date" />
+          <input
+            type="date"
+            [(ngModel)]="
+              input.getModelValue(nodeWithInput.node.state).date ||
+              dateTime.date
+            "
+            (ngModelChange)="
+              updateSecondVariable(
+                $event,
+                inputType.dateTime,
+                dateTimeFields.date
+              )
+            "
+          />
         </div>
         <div class="time-input">
-          <input type="time" [(ngModel)]="dateTime.time" />
+          <input
+            type="time"
+            [(ngModel)]="
+              input.getModelValue(nodeWithInput.node.state).time ||
+              dateTime.time
+            "
+            (ngModelChange)="
+              updateSecondVariable(
+                $event,
+                inputType.dateTime,
+                dateTimeFields.time
+              )
+            "
+          />
         </div>
         <div>
           <button

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

@@ -12,6 +12,7 @@ import {NgxPopperjsContentComponent} from 'ngx-popperjs';
 import {isSelectInput, NodeService, WorkflowPrompt} from '../../classes';
 import {AbstractBaseGroup} from '../../classes/nodes';
 import {
+  DateTimeFields,
   InputTypes,
   LocalizedStringKeys,
   NodeTypes,
@@ -61,6 +62,7 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
     private readonly localizationSvc: LocalizationProviderService,
   ) {}
   public inputType = InputTypes;
+  public dateTimeFields = DateTimeFields;
   private isMouseDown: boolean = false;
   @Input()
   group: AbstractBaseGroup<E>;
@@ -322,6 +324,11 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
       time: '',
     };
     this.date = '';
+    this.emailInput = {
+      subject: '',
+      body: '',
+      focusKey: '',
+    };
     const newNode = {
       node: this.nodes.getNodeByName(
         node.getIdentifier(),
@@ -528,6 +535,11 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
     metaObj: RecordOfAnyType,
   ) {
     const value = $event.target?.value ?? $event;
+    this.dateTime = {
+      date: '',
+      time: '',
+    };
+    this.date = '';
     switch (type) {
       case InputTypes.People:
         const selectedIds = metaObj.list.filter((item: {id: any}) =>
@@ -547,8 +559,8 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
       }
       case InputTypes.DateTime:
         if (value) {
-          if (this.dateTime.time === '') {
-            this.dateTime.time = node.state.get('defaultTime') ?? '9:00';
+          if (value.time === '') {
+            value.time = node.state.get('defaultTime') ?? '9:00';
           }
           const dateObj = moment(`${value.date} ${value.time}`);
           return {
@@ -614,6 +626,26 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
       callback(response);
     }
   }
+
+  updateSecondVariable(
+    event: any,
+    inputType: InputTypes,
+    dateTimeField?: string,
+  ) {
+    //if inputType->dateTime
+    switch (inputType) {
+      case InputTypes.DateTime:
+        if (dateTimeField == 'date') {
+          this.dateTime.date = event;
+        } else {
+          this.dateTime.time = event;
+        }
+        break;
+      case InputTypes.Date:
+        this.date = event;
+    }
+  }
+
   /**
    * It removes all the inputs that come after the current input
    * @param element - NodeWithInput<E>

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

@@ -222,10 +222,19 @@ export abstract class WorkflowPrompt {
         });
       }
       case InputTypes.Date: {
+        if (!state.get(this.inputKey)) {
+          return '';
+        }
         const dateString = state.get(this.inputKey);
         return moment(dateString).format('YYYY-MM-DD');
       }
       case InputTypes.DateTime: {
+        if (!state.get(this.inputKey)) {
+          return {
+            date: null,
+            time: null,
+          };
+        }
         const dateString = moment(state.get(this.inputKey))?.format(
           DATE_TIME_FORMAT,
         );

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

@@ -106,3 +106,8 @@ export enum LocalizedStringKeys {
   SelectColumnTooltip = 'selectColumnTooltip',
   SetLbl = 'setLbl',
 }
+
+export enum DateTimeFields {
+  Date = 'date',
+  Time = 'time',
+}

projects/workflows-element/package.json

@@ -17,5 +17,6 @@
     "access": "public",
     "directory": "dist"
   },
-  "hash": "52e16f7339ae099b920d5eba85c8551b9ac2178d0fdb8c34eb6eb6de8aa96685"
+  "hash": "3c1458420fa687bd8cf740b4ec3efc6aed003c8e1ce99c465f3d467a95c9ac90"
 }
+