Skip to content

Commit 0246b0e

Browse files
samhere06mohas22
samhere06
and
mohas22
authored
updated date,date time and time components (#248)
Co-authored-by: mohas22 <[email protected]>
1 parent e4ab6a9 commit 0246b0e

File tree

9 files changed

+48
-64
lines changed

9 files changed

+48
-64
lines changed

‎packages/angular-sdk-components/src/lib/_components/field/date-time/date-time.component.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div *ngIf="displayMode$; else noDisplayMode">
2-
<component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
2+
<component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue$, displayMode$ }"></component-mapper>
33
</div>
44
<ng-template #noDisplayMode>
55
<div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -12,8 +12,7 @@
1212
[attr.data-test-id]="testId"
1313
[placeholder]="placeholder"
1414
[formControl]="fieldControl"
15-
(blur)="fieldOnBlur($event)"
16-
(dateTimeChange)="fieldOnDateChange()"
15+
(dateTimeChange)="fieldOnDateChange($event)"
1716
[value]="value$"
1817
[required]="bRequired$"
1918
/>

‎packages/angular-sdk-components/src/lib/_components/field/date-time/date-time.component.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
1212
import { dateFormatInfoDefault, getDateFormatInfo } from '../../../_helpers/date-format-utils';
1313
import { PConnFieldProps } from '../../../_types/PConnProps.interface';
1414
import { handleEvent } from '../../../_helpers/event-util';
15+
import { format } from '../../../_helpers/formatters';
1516

1617
interface DateTimeProps extends PConnFieldProps {
1718
// If any, enter additional props that only exist on DateTime here
@@ -66,6 +67,7 @@ export class DateTimeComponent implements OnInit, OnDestroy {
6667
placeholder: string;
6768
actionsApi: Object;
6869
propName: string;
70+
formattedValue$: any;
6971

7072
constructor(
7173
private angularPConnect: AngularPConnectService,
@@ -139,6 +141,12 @@ export class DateTimeComponent implements OnInit, OnDestroy {
139141
this.cdRef.detectChanges();
140142
});
141143

144+
if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
145+
this.formattedValue$ = format(this.value$, 'datetime', {
146+
format: `${this.theDateFormat.dateFormatString} hh:mm a`
147+
});
148+
}
149+
142150
if (this.configProps$.visibility != null) {
143151
this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
144152
}
@@ -174,19 +182,13 @@ export class DateTimeComponent implements OnInit, OnDestroy {
174182
}
175183
}
176184

177-
fieldOnDateChange() {
178-
this.pConn$.clearErrorMessages({
179-
property: this.propName
180-
});
181-
}
182-
183-
fieldOnBlur(event: any) {
185+
fieldOnDateChange(event: any) {
186+
// this comes from the date pop up
184187
if (typeof event.value === 'object') {
185188
// convert date to pega "date" format
186189
event.value = event.value?.toISOString();
187190
}
188-
const value = event?.target?.value;
189-
handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
191+
handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
190192
}
191193

192194
getErrorMessage() {

‎packages/angular-sdk-components/src/lib/_components/field/date/date.component.html‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
<div *ngIf="displayMode$; else noDisplayMode">
2-
<component-mapper
3-
*ngIf="bVisible$ !== false"
4-
name="FieldValueList"
5-
[props]="{ label$, value$: getFormattedValue(), displayMode$ }"
6-
></component-mapper>
2+
<component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue$, displayMode$ }"></component-mapper>
73
</div>
84
<ng-template #noDisplayMode>
95
<div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -21,7 +17,6 @@
2117
[required]="bRequired$"
2218
[formControl]="fieldControl"
2319
(dateChange)="fieldOnDateChange($event)"
24-
(blur)="fieldOnBlur($event)"
2520
/>
2621
<mat-datepicker-toggle matSuffix [for]="pegadate"></mat-datepicker-toggle>
2722
<mat-datepicker #pegadate [startAt]="value$"></mat-datepicker>

‎packages/angular-sdk-components/src/lib/_components/field/date/date.component.ts‎

Lines changed: 9 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* eslint-disable max-classes-per-file */
21
import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, Inject, OnDestroy } from '@angular/core';
32
import { CommonModule } from '@angular/common';
43
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -87,6 +86,7 @@ export class DateComponent implements OnInit, OnDestroy {
8786
theDateFormat = getDateFormatInfo();
8887
actionsApi: Object;
8988
propName: string;
89+
formattedValue$: any;
9090

9191
constructor(
9292
private angularPConnect: AngularPConnectService,
@@ -149,21 +149,7 @@ export class DateComponent implements OnInit, OnDestroy {
149149
// moved this from ngOnInit() and call this from there instead...
150150
this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as DateProps;
151151

152-
if (this.configProps$.value != undefined) {
153-
let sDateValue: any = '';
154-
sDateValue = this.configProps$.value;
155-
156-
if (sDateValue != '') {
157-
if (typeof sDateValue === 'object') {
158-
sDateValue = sDateValue.toISOString();
159-
} else if (sDateValue.indexOf('/') < 0) {
160-
// if we have the "pega" format, then for display, convert to standard format (US)
161-
// sDateValue = this.formatDate(sDateValue);
162-
sDateValue = this.utils.generateDate(sDateValue, 'Date-Long-Custom-YYYY');
163-
}
164-
this.value$ = new Date(sDateValue);
165-
}
166-
}
152+
this.value$ = this.configProps$.value;
167153
this.testId = this.configProps$.testId;
168154
this.label$ = this.configProps$.label;
169155
this.displayMode$ = this.configProps$.displayMode;
@@ -181,6 +167,12 @@ export class DateComponent implements OnInit, OnDestroy {
181167
this.cdRef.detectChanges();
182168
});
183169

170+
if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
171+
this.formattedValue$ = format(this.value$, 'date', {
172+
format: this.theDateFormat.dateFormatString
173+
});
174+
}
175+
184176
if (this.configProps$.visibility != null) {
185177
this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
186178
}
@@ -215,27 +207,13 @@ export class DateComponent implements OnInit, OnDestroy {
215207

216208
fieldOnDateChange(event: any) {
217209
// this comes from the date pop up
218-
if (typeof event.value === 'object') {
219-
// convert date to pega "date" format
220-
event.value = event.value?.toISOString();
221-
}
222-
const value = event?.target?.value;
210+
const value = event?.target?.value.format('YYYY-MM-DD');
223211
handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
224212
this.pConn$.clearErrorMessages({
225213
property: this.propName
226214
});
227215
}
228216

229-
fieldOnBlur(event: any) {
230-
// PConnect wants to use eventHandler for onBlur
231-
if (typeof event.value === 'object') {
232-
// convert date to pega "date" format
233-
event.value = event.value?.toISOString();
234-
}
235-
const value = event?.target?.value;
236-
handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
237-
}
238-
239217
hasErrors() {
240218
return this.fieldControl.status === 'INVALID';
241219
}
@@ -254,10 +232,4 @@ export class DateComponent implements OnInit, OnDestroy {
254232
}
255233
return errMessage;
256234
}
257-
258-
getFormattedValue() {
259-
return format(this.value$, 'date', {
260-
format: this.theDateFormat.dateFormatString
261-
});
262-
}
263235
}

‎packages/angular-sdk-components/src/lib/_components/field/time/time.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div *ngIf="displayMode$; else noDisplayMode">
2-
<component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
2+
<component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue$, displayMode$ }"></component-mapper>
33
</div>
44
<ng-template #noDisplayMode>
55
<div *ngIf="!bReadonly$ && bHasForm$; else noEdit">

‎packages/angular-sdk-components/src/lib/_components/field/time/time.component.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { Utils } from '../../../_helpers/utils';
99
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
1010
import { PConnFieldProps } from '../../../_types/PConnProps.interface';
1111
import { handleEvent } from '../../../_helpers/event-util';
12+
import { format } from '../../../_helpers/formatters';
1213

1314
interface TimeProps extends PConnFieldProps {
1415
// If any, enter additional props that only exist on Time here
@@ -46,6 +47,7 @@ export class TimeComponent implements OnInit, OnDestroy {
4647
fieldControl = new FormControl('', null);
4748
actionsApi: Object;
4849
propName: string;
50+
formattedValue$: any;
4951

5052
constructor(
5153
private angularPConnect: AngularPConnectService,
@@ -125,6 +127,12 @@ export class TimeComponent implements OnInit, OnDestroy {
125127
this.cdRef.detectChanges();
126128
});
127129

130+
if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
131+
this.formattedValue$ = format(this.value$, 'timeonly', {
132+
format: 'hh:mm a'
133+
});
134+
}
135+
128136
if (this.configProps$.visibility != null) {
129137
this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
130138
}

‎packages/angular-sdk-components/src/lib/_helpers/formatters/common.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ export function getLocale(locale: string = '') {
77
return Intl.DateTimeFormat().resolvedOptions().locale;
88
}
99

10-
export function getCurrentTimezone(timezone: string = 'America/New_York') {
11-
if (timezone) return timezone;
12-
return PCore?.getLocaleUtils?.().getTimeZoneInUse?.();
10+
export function getCurrentTimezone() {
11+
return PCore?.getEnvironmentInfo?.().getTimeZone?.();
1312
}

‎packages/angular-sdk-components/src/lib/_helpers/formatters/date.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function TimeFormatter(value, options) {
3737
tempDate.setHours(hours);
3838
tempDate.setMinutes(minutes);
3939
tempDate.setSeconds(seconds);
40-
return tempDate.toLocaleTimeString(locale);
40+
return tempDate.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' });
4141
}
4242
return DateFormatter(value, options);
4343
}
@@ -53,9 +53,9 @@ export default {
5353
'DateTime-Since': value => DateFormatter(value, { type: 'fromNow' }),
5454
'Time-Only': (value, options) =>
5555
TimeFormatter(value, {
56-
...options,
5756
type: 'customFormat',
58-
format: 'hh:mm:ss A'
57+
format: 'hh:mm:ss A',
58+
...options
5959
}),
6060
convertToTimezone: (value, options) => {
6161
return value && options && options.timezone

‎packages/angular-sdk-components/src/lib/_helpers/formatters/index.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ export default {
1010
};
1111

1212
function getDateObject(text): Date {
13-
if (text instanceof Date) return text;
14-
1513
// TODO - cleanup formatters util functions as DX APIs are returning values per ISO std now.
1614
const timeStamp = text.replace(/-/g, '');
1715
const isDateTime = timeStamp.indexOf('GMT') !== -1;
@@ -127,6 +125,17 @@ export function format(value, type, options = {}): string {
127125
break;
128126
}
129127

128+
case 'timeonly': {
129+
const defaultOptions = {
130+
locale: getLocale(),
131+
format: 'hh:mm A',
132+
timezone: getCurrentTimezone()
133+
};
134+
const params = { ...defaultOptions, ...options };
135+
formattedValue = DateFormatter['Time-Only'](value, params);
136+
break;
137+
}
138+
130139
default:
131140
formattedValue = value;
132141
}

0 commit comments

Comments
 (0)