From 0246b0ecaa7e8d114e83f0168b62676f02142fd7 Mon Sep 17 00:00:00 2001 From: samhere06 <118881732+samhere06@users.noreply.github.com> Date: Mon, 9 Dec 2024 18:31:27 +0530 Subject: [PATCH] updated date,date time and time components (#248) Co-authored-by: mohas22 --- .../field/date-time/date-time.component.html | 5 +- .../field/date-time/date-time.component.ts | 20 ++++---- .../field/date/date.component.html | 7 +-- .../_components/field/date/date.component.ts | 46 ++++--------------- .../field/time/time.component.html | 2 +- .../_components/field/time/time.component.ts | 8 ++++ .../src/lib/_helpers/formatters/common.ts | 5 +- .../src/lib/_helpers/formatters/date.ts | 6 +-- .../src/lib/_helpers/formatters/index.ts | 13 +++++- 9 files changed, 48 insertions(+), 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 index e36d0bbe..6d083377 100644 --- 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 @@
- +
@@ -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 index b31c6cbc..492ec3c2 100644 --- 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 index 860bc060..d9dd19bf 100644 --- 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 @@
- +
@@ -21,7 +17,6 @@ [required]="bRequired$" [formControl]="fieldControl" (dateChange)="fieldOnDateChange($event)" - (blur)="fieldOnBlur($event)" /> 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 index 8f2c5f6a..0242b9ff 100644 --- 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 index 878ba6d3..d2c64cc1 100644 --- 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 @@
- +
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 index 47d137d2..ed6263ed 100644 --- 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 index e2275278..e5aa98a7 100644 --- 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 index 684bdc4e..a2d0bc75 100644 --- 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 index 69b85583..5017ff9f 100644 --- 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; }