fix(core): fetch correct date when giving input with keyboard (#57)

GH-56

Author: arpit1503khanna

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

@@ -65,9 +65,7 @@ export class BuilderComponent<E> implements OnInit, OnChanges {
     private readonly elements: ElementService<E>,
     private readonly cdr: ChangeDetectorRef,
     private readonly localizationSvc: LocalizationProviderService,
-  ) {
-    
-  }
+  ) {}
   private _state: StateMap<RecordOfAnyType> = {};
   public get state(): StateMap<RecordOfAnyType> {
     return this._state;

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

@@ -271,15 +271,32 @@
     let-nodeWithInput="nodeWithInput"
     let-hide="hide"
   >
-    <input
-      type="date"
-      [(ngModel)]="date"
-      (input)="
-        callback(getLibraryValue(nodeWithInput.node, $event, inputType.Date))
-      "
-      (click)="$event.stopPropagation()"
-      (document:click)="hide()"
-    />
+    <div class="date-picker" (document:click)="hide()">
+      <div>
+        <input
+          class="date-input"
+          type="date"
+          [(ngModel)]="date"
+          (click)="$event.stopPropagation()"
+        />
+      </div>
+      <div>
+        <button
+          class="close-button"
+          (click)="
+            callback(
+              getLibraryValue(
+                nodeWithInput.node,
+                {target: {value: date}},
+                inputType.Date
+              )
+            )
+          "
+        >
+          Set
+        </button>
+      </div>
+    </div>
   </ng-template>
 
   <ng-template
@@ -299,7 +316,7 @@
         </div>
         <div>
           <button
-            class="close-btn"
+            class="close-button"
             (click)="
               callback(
                 getLibraryValue(
@@ -354,7 +371,7 @@
       </div>
       <div class="set-email-btn">
         <button
-          class="close-btn"
+          class="close-button"
           (click)="callback(emailInput)"
           [disabled]="!emailInput.subject || !emailInput.body"
         >

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

@@ -304,3 +304,21 @@ input[type="time"]:focus {
     font-size: 12px;
   }
 }
+
+.date-picker{
+  display: flex;
+  margin: 5px;
+  .date-input{
+    margin-right: 10px;
+  }
+  .close-button {
+    @include theme;
+    height: 35px;
+    padding: 0 10px;
+    margin-top: 0px;
+    border: 0;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 12px;
+  }
+}

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

@@ -99,8 +99,7 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
   @Output()
   itemChanged = new EventEmitter<unknown>();
 
-  date: DateType = {month: 0, day: 0, year: 0};
-
+  date: string = '';
   dateTime: any = {
     date: '',
     time: '',
@@ -322,6 +321,7 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
       date: '',
       time: '',
     };
+    this.date = '';
     const newNode = {
       node: this.nodes.getNodeByName(
         node.getIdentifier(),

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

@@ -223,11 +223,7 @@ export abstract class WorkflowPrompt {
       }
       case InputTypes.Date: {
         const dateString = state.get(this.inputKey);
-        return {
-          month: moment(dateString).month() + 1,
-          day: moment(dateString).date(),
-          year: moment(dateString).year(),
-        };
+        return moment(dateString).format('YYYY-MM-DD');
       }
       case InputTypes.DateTime: {
         const dateString = moment(state.get(this.inputKey))?.format(

projects/workflows-element/package.json

@@ -17,5 +17,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "hash": "eda00eb65b3f01c290e8577ac9b4d2f18c655283559e3b0f74362492c63483c5"
+  "hash": "90788b80097a03917ae5eb70f77bc7f6b74ac194fe063243573f2f673458f1d8"
 }