fix(core): fix the invalid date issue when no time is selected for da…

…te/time column
sourcefuse · Feb 14, 2024 · 44617ec · 44617ec
1 parent e1ec256
commit 44617ec
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 19 deletions.
diff --git a/projects/workflows-creator/src/lib/builder/group/group.component.html b/projects/workflows-creator/src/lib/builder/group/group.component.html
@@ -164,15 +164,20 @@
     let-nodeWithInput="nodeWithInput"
     let-hide="hide"
   >
-    <div (document:click)="hide()">
+    <div (document:click)="handleDocumentClick($event)" >
       <input
         type="text"
         class="text-input"
         autofocus
         value="{{ input.setValueName(nodeWithInput.node.state) }}"
         (focusout)="callback($event.target)"
+        (mousedown)="handleMouseDown($event)"
+        (mouseup)="handleMouseUp()"
+        (mouseleave)="handleMouseLeave($event)"
+        placeholder="Enter the text here"
       />
     </div>
+
   </ng-template>
 
   <ng-template
@@ -235,7 +240,7 @@
         [closeOnSelect]="false"
         (blur)="
           callback(
-            getLibraryValue($event, inputType.People, {
+            getLibraryValue(nodeWithInput.node,$event, inputType.People, {
               list: list,
               key: 'value'
             })
@@ -266,7 +271,7 @@
     <input
       type="date"
       [(ngModel)]="date"
-      (input)="callback(getLibraryValue($event, inputType.Date))"
+      (input)="callback(getLibraryValue(nodeWithInput.node,$event, inputType.Date))"
       (click)="$event.stopPropagation()"
       (document:click)="hide()"
     />
@@ -285,21 +290,21 @@
           <input type="date" [(ngModel)]="dateTime.date" />
         </div>
         <div class="time-input">
-          <input type="time" [(ngModel)]="dateTime.time" />
+          <input type="time" [(ngModel)]="dateTime.time"  />
         </div>
         <div>
           <button
             class="close-btn"
             (click)="
               callback(
-                getLibraryValue({target: {value: dateTime}}, inputType.DateTime)
+                getLibraryValue(nodeWithInput.node,{target: {value: dateTime}}, inputType.DateTime)
               )
             "
-            [disabled]="!dateTime.date || !dateTime.time"
+            [disabled]="!dateTime.date"
           >
             Set
           </button>
-        </div>
+                  </div>
       </div>
     </div>
   </ng-template>

diff --git a/projects/workflows-creator/src/lib/builder/group/group.component.ts b/projects/workflows-creator/src/lib/builder/group/group.component.ts
@@ -1,6 +1,7 @@
 import {
   AfterViewInit,
   Component,
+  ElementRef,
   EventEmitter,
   Input,
   OnInit,
@@ -22,6 +23,7 @@ import {InvalidEntityError} from '../../errors/base.error';
 import {
   AllowedValues,
   AllowedValuesMap,
+  BpmnNode,
   NodeWithInput,
   RecordOfAnyType,
   WorkflowNode,
@@ -58,9 +60,10 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
   constructor(
     private readonly nodes: NodeService<E>,
     private readonly localizationSvc: LocalizationProviderService,
+    // private elementRef:ElementRef
   ) {}
   public inputType = InputTypes;
-
+  private isMouseDown: boolean = false;
   @Input()
   group: AbstractBaseGroup<E>;
 
@@ -99,10 +102,14 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
   itemChanged = new EventEmitter<unknown>();
 
   date: DateType = {month: 0, day: 0, year: 0};
-  dateTime: DateTime = {
-    date: {month: 0, day: 0, year: 0},
-    time: {hour: null, minute: null},
-  };
+  // dateTime: DateTime = {
+  //   date: {month: 0, day: 0, year: 0},
+  //   time: {hour: 0, minute: 0},
+  // };
+  dateTime:any={
+    date:"",
+    time:""
+  }
   emailInput: EmailInput = {
     subject: '',
     body: '',
@@ -316,6 +323,10 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
     groupId: string,
     id?: string,
   ) {
+    this.dateTime={
+      date:"",
+      time:""
+    }
     const newNode = {
       node: this.nodes.getNodeByName(
         node.getIdentifier(),
@@ -388,6 +399,7 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
    * component that you want to show/hide.
    */
   onPoperClick(event: MouseEvent, popper: NgxPopperjsContentComponent) {
+    this.hidePopper()
     this.prevPopperRef?.hide();
     this.prevPopperRef = popper;
     event.preventDefault();
@@ -515,7 +527,9 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
     this.selectedItems = [];
   }
 
-  getLibraryValue($event: any, type: string, metaObj: RecordOfAnyType) {
+
+  getLibraryValue(node:BpmnNode,$event: any, type: string, metaObj: RecordOfAnyType) {
+  //  console.log(moment().format("HH:mm")) 
     const value = $event.target?.value ?? $event;
     switch (type) {
       case InputTypes.People:
@@ -536,16 +550,53 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
       }
       case InputTypes.DateTime:
         if (value) {
+          // console.log(value)
+          // {
+          //   date: {month: 0, day: 0, year: 0},
+          //   time: {hour: null, minute: null},
+          // };
+          // const defaultTime="9:00"
+          // const defaultTime=node.state.get("defaultTime")??"9:00"
+
+          // const defaultDate=node.state.get("defaultDate")??""
+          // this.dateTime.time =defaultTime 
+          // value.time=!([value.time.hour, value.time.min].every(item=>item===null))?value.time: defaultTime;
+          // if(typeof value.time==='object'){
+          //   value.time=`${value.time.hour}:${value.time.minute}`
+          // }
+          // value.time=typeof value.time=='object' ?defaultTime:value.time
+
+          // let newTime
+          // if(typeof (value.time)==='object'){
+          //   value.time=defaultTime
+          // }
+          if(this.dateTime.time===""){
+            this.dateTime.time=node.state.get("defaultTime")??"9:00";
+          }
+          // else{
+          //   newTime=value.time
+          // }
           const dateObj = moment(`${value.date} ${value.time}`);
+          // this.dateTime={
+          //   date: {
+          //     day: isNaN(dateObj.date())?1:dateObj.date(),
+          //     month: isNaN(dateObj.month())?2:(dateObj.month()+1),
+          //     year: isNaN(dateObj.year())?2022:dateObj.year(),
+          //   },
+          //   time: {
+          //     hour: isNaN(dateObj.hour())? 6:dateObj.hour(),
+          //     minute: isNaN(dateObj.minute())?10: dateObj.minute(),
+          //   },
+          // };
           return {
             date: {
               day: dateObj.date(),
-              month: dateObj.month() + 1,
+              month: (dateObj.month()+1),
               year: dateObj.year(),
             },
             time: {
-              hour: dateObj.hour(),
-              minute: dateObj.minute(),
+              hour:dateObj.hour(),
+              minute:dateObj.minute(),
             },
           };
         }
@@ -554,6 +605,34 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
     return;
   }
 
+  handleMouseDown(event: MouseEvent): void {
+    this.isMouseDown = true;
+  }
+
+  handleMouseUp(): void {
+    this.isMouseDown = false;
+  }
+
+  handleMouseLeave(event: MouseEvent): void {
+    this.isMouseDown = false;
+  }
+
+  handleDocumentClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+
+    // Check if the click is outside the input element and not part of a drag
+    if (!this.isMouseDown) {
+      // If not a drag and click outside the input, hide the input box
+      this.hidePopper();
+    }
+  }
+
+  // isDescendantOfInput(target: HTMLElement): boolean {
+  //   const inputElement = this.elementRef.nativeElement.querySelector('.text-input');
+
+  //   return inputElement && inputElement.contains(target);
+  // }
+
   /**
    * It removes all the inputs that come after the current input
    * @param element - NodeWithInput<E>

diff --git a/projects/workflows-creator/src/lib/types/base.types.ts b/projects/workflows-creator/src/lib/types/base.types.ts
@@ -139,7 +139,7 @@ export type Select = {
  * @property day - The day of the month.
  * @property year - The year of the date.
  */
-export type DateType = {month: 0; day: 0; year: 0};
+export type DateType = {month: number; day: number; year: number};
 
 /**
  * `DateTime` is an object with a `date` property of type `DateType` and a `time` property of type
@@ -149,7 +149,7 @@ export type DateType = {month: 0; day: 0; year: 0};
  */
 export type DateTime = {
   date: DateType;
-  time: {hour: null; minute: null};
+  time: {hour: number; minute: number};
 };
 
 /**

diff --git a/projects/workflows-element/package.json b/projects/workflows-element/package.json
@@ -17,5 +17,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "hash": "7c91307fa0c8a1ecbe458304cc791f4a31ed7b8763112f2eb09bf1a6b5768b58"
+  "hash": "c1e7f91d2afbeb3b2173af5e7dc37ff2594b45939f490e3b93e7e50f62820e71"
 }