updated date,date time and time components (#248)

Co-authored-by: mohas22 <[email protected]>
pegasystems · Dec 9, 2024 · 0246b0e · 0246b0e
1 parent e4ab6a9
commit 0246b0e
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 64 deletions.
diff --git a/packages/angular-sdk-components/src/lib/_components/field/date-time/date-time.component.html b/packages/angular-sdk-components/src/lib/_components/field/date-time/date-time.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -12,8 +12,7 @@
           [attr.data-test-id]="testId"
           [placeholder]="placeholder"
           [formControl]="fieldControl"
-          (blur)="fieldOnBlur($event)"
-          (dateTimeChange)="fieldOnDateChange()"
+          (dateTimeChange)="fieldOnDateChange($event)"
           [value]="value$"
           [required]="bRequired$"
         />

diff --git a/packages/angular-sdk-components/src/lib/_components/field/date-time/date-time.component.ts b/packages/angular-sdk-components/src/lib/_components/field/date-time/date-time.component.ts
@@ -12,6 +12,7 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
 import { dateFormatInfoDefault, getDateFormatInfo } from '../../../_helpers/date-format-utils';
 import { PConnFieldProps } from '../../../_types/PConnProps.interface';
 import { handleEvent } from '../../../_helpers/event-util';
+import { format } from '../../../_helpers/formatters';
 
 interface DateTimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
@@ -66,6 +67,7 @@ export class DateTimeComponent implements OnInit, OnDestroy {
   placeholder: string;
   actionsApi: Object;
   propName: string;
+  formattedValue$: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -139,6 +141,12 @@ export class DateTimeComponent implements OnInit, OnDestroy {
       this.cdRef.detectChanges();
     });
 
+    if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+      this.formattedValue$ = format(this.value$, 'datetime', {
+        format: `${this.theDateFormat.dateFormatString} hh:mm a`
+      });
+    }
+
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
     }
@@ -174,19 +182,13 @@ export class DateTimeComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnDateChange() {
-    this.pConn$.clearErrorMessages({
-      property: this.propName
-    });
-  }
-
-  fieldOnBlur(event: any) {
+  fieldOnDateChange(event: any) {
+    // this comes from the date pop up
     if (typeof event.value === 'object') {
       // convert date to pega "date" format
       event.value = event.value?.toISOString();
     }
-    const value = event?.target?.value;
-    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
   }
 
   getErrorMessage() {

diff --git a/packages/angular-sdk-components/src/lib/_components/field/date/date.component.html b/packages/angular-sdk-components/src/lib/_components/field/date/date.component.html
@@ -1,9 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper
-    *ngIf="bVisible$ !== false"
-    name="FieldValueList"
-    [props]="{ label$, value$: getFormattedValue(), displayMode$ }"
-  ></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -21,7 +17,6 @@
           [required]="bRequired$"
           [formControl]="fieldControl"
           (dateChange)="fieldOnDateChange($event)"
-          (blur)="fieldOnBlur($event)"
         />
         <mat-datepicker-toggle matSuffix [for]="pegadate"></mat-datepicker-toggle>
         <mat-datepicker #pegadate [startAt]="value$"></mat-datepicker>

diff --git a/packages/angular-sdk-components/src/lib/_components/field/date/date.component.ts b/packages/angular-sdk-components/src/lib/_components/field/date/date.component.ts
@@ -1,4 +1,3 @@
-/* eslint-disable max-classes-per-file */
 import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, Inject, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -87,6 +86,7 @@ export class DateComponent implements OnInit, OnDestroy {
   theDateFormat = getDateFormatInfo();
   actionsApi: Object;
   propName: string;
+  formattedValue$: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -149,21 +149,7 @@ export class DateComponent implements OnInit, OnDestroy {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as DateProps;
 
-    if (this.configProps$.value != undefined) {
-      let sDateValue: any = '';
-      sDateValue = this.configProps$.value;
-
-      if (sDateValue != '') {
-        if (typeof sDateValue === 'object') {
-          sDateValue = sDateValue.toISOString();
-        } else if (sDateValue.indexOf('/') < 0) {
-          // if we have the "pega" format, then for display, convert to standard format (US)
-          // sDateValue = this.formatDate(sDateValue);
-          sDateValue = this.utils.generateDate(sDateValue, 'Date-Long-Custom-YYYY');
-        }
-        this.value$ = new Date(sDateValue);
-      }
-    }
+    this.value$ = this.configProps$.value;
     this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
@@ -181,6 +167,12 @@ export class DateComponent implements OnInit, OnDestroy {
       this.cdRef.detectChanges();
     });
 
+    if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+      this.formattedValue$ = format(this.value$, 'date', {
+        format: this.theDateFormat.dateFormatString
+      });
+    }
+
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
     }
@@ -215,27 +207,13 @@ export class DateComponent implements OnInit, OnDestroy {
 
   fieldOnDateChange(event: any) {
     // this comes from the date pop up
-    if (typeof event.value === 'object') {
-      // convert date to pega "date" format
-      event.value = event.value?.toISOString();
-    }
-    const value = event?.target?.value;
+    const value = event?.target?.value.format('YYYY-MM-DD');
     handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     this.pConn$.clearErrorMessages({
       property: this.propName
     });
   }
 
-  fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    if (typeof event.value === 'object') {
-      // convert date to pega "date" format
-      event.value = event.value?.toISOString();
-    }
-    const value = event?.target?.value;
-    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
-  }
-
   hasErrors() {
     return this.fieldControl.status === 'INVALID';
   }
@@ -254,10 +232,4 @@ export class DateComponent implements OnInit, OnDestroy {
     }
     return errMessage;
   }
-
-  getFormattedValue() {
-    return format(this.value$, 'date', {
-      format: this.theDateFormat.dateFormatString
-    });
-  }
 }
diff --git a/packages/angular-sdk-components/src/lib/_components/field/time/time.component.html b/packages/angular-sdk-components/src/lib/_components/field/time/time.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">

diff --git a/packages/angular-sdk-components/src/lib/_components/field/time/time.component.ts b/packages/angular-sdk-components/src/lib/_components/field/time/time.component.ts
@@ -9,6 +9,7 @@ import { Utils } from '../../../_helpers/utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 import { PConnFieldProps } from '../../../_types/PConnProps.interface';
 import { handleEvent } from '../../../_helpers/event-util';
+import { format } from '../../../_helpers/formatters';
 
 interface TimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Time here
@@ -46,6 +47,7 @@ export class TimeComponent implements OnInit, OnDestroy {
   fieldControl = new FormControl('', null);
   actionsApi: Object;
   propName: string;
+  formattedValue$: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -125,6 +127,12 @@ export class TimeComponent implements OnInit, OnDestroy {
       this.cdRef.detectChanges();
     });
 
+    if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+      this.formattedValue$ = format(this.value$, 'timeonly', {
+        format: 'hh:mm a'
+      });
+    }
+
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
     }

diff --git a/packages/angular-sdk-components/src/lib/_helpers/formatters/common.ts b/packages/angular-sdk-components/src/lib/_helpers/formatters/common.ts
@@ -7,7 +7,6 @@ export function getLocale(locale: string = '') {
   return Intl.DateTimeFormat().resolvedOptions().locale;
 }
 
-export function getCurrentTimezone(timezone: string = 'America/New_York') {
-  if (timezone) return timezone;
-  return PCore?.getLocaleUtils?.().getTimeZoneInUse?.();
+export function getCurrentTimezone() {
+  return PCore?.getEnvironmentInfo?.().getTimeZone?.();
 }
diff --git a/packages/angular-sdk-components/src/lib/_helpers/formatters/date.ts b/packages/angular-sdk-components/src/lib/_helpers/formatters/date.ts
@@ -37,7 +37,7 @@ function TimeFormatter(value, options) {
     tempDate.setHours(hours);
     tempDate.setMinutes(minutes);
     tempDate.setSeconds(seconds);
-    return tempDate.toLocaleTimeString(locale);
+    return tempDate.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' });
   }
   return DateFormatter(value, options);
 }
@@ -53,9 +53,9 @@ export default {
   'DateTime-Since': value => DateFormatter(value, { type: 'fromNow' }),
   'Time-Only': (value, options) =>
     TimeFormatter(value, {
-      ...options,
       type: 'customFormat',
-      format: 'hh:mm:ss A'
+      format: 'hh:mm:ss A',
+      ...options
     }),
   convertToTimezone: (value, options) => {
     return value && options && options.timezone

diff --git a/packages/angular-sdk-components/src/lib/_helpers/formatters/index.ts b/packages/angular-sdk-components/src/lib/_helpers/formatters/index.ts
@@ -10,8 +10,6 @@ export default {
 };
 
 function getDateObject(text): Date {
-  if (text instanceof Date) return text;
-
   // TODO - cleanup formatters util functions as DX APIs are returning values per ISO std now.
   const timeStamp = text.replace(/-/g, '');
   const isDateTime = timeStamp.indexOf('GMT') !== -1;
@@ -127,6 +125,17 @@ export function format(value, type, options = {}): string {
       break;
     }
 
+    case 'timeonly': {
+      const defaultOptions = {
+        locale: getLocale(),
+        format: 'hh:mm A',
+        timezone: getCurrentTimezone()
+      };
+      const params = { ...defaultOptions, ...options };
+      formattedValue = DateFormatter['Time-Only'](value, params);
+      break;
+    }
+
     default:
       formattedValue = value;
   }