Skip to content

Commit 7d53b4a

Browse files
author
Vishal
committed
Removd onBlur & onChange API calls with handleEvent
1 parent 2b31a19 commit 7d53b4a

File tree

18 files changed

+178
-88
lines changed

18 files changed

+178
-88
lines changed

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

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,8 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
7171
hideLabel: boolean;
7272
filteredOptions: Observable<any[]>;
7373
filterValue = '';
74+
actionsApi: Object;
75+
propName: string;
7476

7577
constructor(
7678
private angularPConnect: AngularPConnectService,
@@ -102,7 +104,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
102104

103105
this.filteredOptions = this.fieldControl.valueChanges.pipe(
104106
startWith(''),
105-
map(value => this._filter(value || ''))
107+
map(value => this._filter((value as string) || ''))
106108
);
107109
}
108110

@@ -151,6 +153,9 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
151153

152154
this.setPropertyValuesFromProps();
153155

156+
this.actionsApi = this.pConn$.getActionsApi();
157+
this.propName = this.pConn$.getStateProps().value;
158+
154159
const context = this.pConn$.getContextName();
155160
const { columns, datasource } = this.generateColumnsAndDataSource();
156161

@@ -299,13 +304,14 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
299304
// this works - this.pConn$.setValue( this.componentReference, this.fieldControl.value);
300305
// PConnect wants to use changeHandler for onChange
301306
// this.angularPConnect.changeHandler( this, event);
302-
this.filterValue = (event.target as HTMLInputElement).value;
303-
304-
this.angularPConnectData.actions?.onChange(this, event);
307+
const value = (event.target as HTMLInputElement).value;
308+
this.filterValue = value;
309+
handleEvent(this.actionsApi, 'change', this.propName, value);
305310
}
306311

307-
optionChanged(event: MatAutocompleteSelectedEvent) {
308-
this.angularPConnectData.actions?.onChange(this, event);
312+
optionChanged(event: any) {
313+
const value = (event.target as HTMLInputElement).value;
314+
handleEvent(this.actionsApi, 'change', this.propName, value);
309315
}
310316

311317
fieldOnBlur(event: Event) {
@@ -315,11 +321,8 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
315321
const index = this.options$?.findIndex(element => element.value === el.value);
316322
key = index > -1 ? (key = this.options$[index].key) : el.value;
317323
}
318-
319324
const value = key;
320-
const actionsApi = this.pConn$?.getActionsApi();
321-
const propName = this.pConn$?.getStateProps().value;
322-
handleEvent(actionsApi, 'changeNblur', propName, value);
325+
handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
323326
if (this.configProps$?.onRecordChange) {
324327
el.value = value;
325328
this.configProps$.onRecordChange(event);

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
6969
selectedvalues: any;
7070
referenceList: string;
7171
listOfCheckboxes: any[] = [];
72-
actionsApi: any;
73-
propName: any;
72+
actionsApi: Object;
73+
propName: string;
7474

7575
fieldControl = new FormControl('', null);
7676

@@ -225,16 +225,17 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
225225

226226
fieldOnChange(event: any) {
227227
event.value = event.checked;
228-
229228
handleEvent(this.actionsApi, 'changeNblur', this.propName, event.checked);
229+
this.pConn$.clearErrorMessages({
230+
property: this.propName
231+
});
230232
}
231233

232234
fieldOnBlur(event: any) {
233235
if (this.selectionMode === 'multi') {
234236
this.pConn$.getValidationApi().validate(this.selectedvalues, this.selectionList);
235237
} else {
236-
event.value = event.checked;
237-
this.angularPConnectData.actions?.onBlur(this, event);
238+
this.pConn$.getValidationApi().validate(event.target.checked);
238239
}
239240
}
240241

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

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { Utils } from '../../../_helpers/utils';
1111
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
1212
import { dateFormatInfoDefault, getDateFormatInfo } from '../../../_helpers/date-format-utils';
1313
import { PConnFieldProps } from '../../../_types/PConnProps.interface';
14+
import { handleEvent } from '../../../_helpers/event-util';
1415

1516
interface DateTimeProps extends PConnFieldProps {
1617
// If any, enter additional props that only exist on DateTime here
@@ -63,6 +64,8 @@ export class DateTimeComponent implements OnInit, OnDestroy {
6364
// and then update, as needed, based on locale, etc.
6465
theDateFormat = getDateFormatInfo();
6566
placeholder: string;
67+
actionsApi: Object;
68+
propName: string;
6669

6770
constructor(
6871
private angularPConnect: AngularPConnectService,
@@ -157,6 +160,9 @@ export class DateTimeComponent implements OnInit, OnDestroy {
157160

158161
this.componentReference = this.pConn$.getStateProps().value;
159162

163+
this.actionsApi = this.pConn$.getActionsApi();
164+
this.propName = this.pConn$.getStateProps().value;
165+
160166
// trigger display of error message with field control
161167
if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
162168
const timer = interval(100).subscribe(() => {
@@ -169,21 +175,18 @@ export class DateTimeComponent implements OnInit, OnDestroy {
169175
}
170176

171177
fieldOnDateChange(event: any) {
172-
// this comes from the date pop up
173-
if (typeof event.value === 'object') {
174-
// convert date to pega "date" format
175-
event.value = event.value?.toISOString();
176-
}
177-
this.angularPConnectData.actions?.onChange(this, { value: event.value });
178+
this.pConn$.clearErrorMessages({
179+
property: this.propName
180+
});
178181
}
179182

180183
fieldOnBlur(event: any) {
181184
if (typeof event.value === 'object') {
182185
// convert date to pega "date" format
183186
event.value = event.value?.toISOString();
184187
}
185-
186-
this.angularPConnectData.actions?.onBlur(this, event);
188+
const value = event?.target?.value;
189+
handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
187190
}
188191

189192
getErrorMessage() {

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
1515
import { dateFormatInfoDefault, getDateFormatInfo } from '../../../_helpers/date-format-utils';
1616
import { PConnFieldProps } from '../../../_types/PConnProps.interface';
1717
import { format } from '../../../_helpers/formatters';
18+
import { handleEvent } from '../../../_helpers/event-util';
1819

1920
interface DateProps extends PConnFieldProps {
2021
// If any, enter additional props that only exist on Date here
@@ -84,6 +85,8 @@ export class DateComponent implements OnInit, OnDestroy {
8485
dateFormatInfo = dateFormatInfoDefault;
8586
// and then update, as needed, based on locale, etc.
8687
theDateFormat = getDateFormatInfo();
88+
actionsApi: Object;
89+
propName: string;
8790

8891
constructor(
8992
private angularPConnect: AngularPConnectService,
@@ -167,6 +170,9 @@ export class DateComponent implements OnInit, OnDestroy {
167170
this.helperText = this.configProps$.helperText;
168171
this.placeholder = this.configProps$.placeholder || '';
169172

173+
this.actionsApi = this.pConn$.getActionsApi();
174+
this.propName = this.pConn$.getStateProps().value;
175+
170176
// timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
171177
setTimeout(() => {
172178
if (this.configProps$.required != null) {
@@ -213,7 +219,11 @@ export class DateComponent implements OnInit, OnDestroy {
213219
// convert date to pega "date" format
214220
event.value = event.value?.toISOString();
215221
}
216-
this.angularPConnectData.actions?.onChange(this, { value: event.value });
222+
const value = event?.target?.value;
223+
handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
224+
this.pConn$.clearErrorMessages({
225+
property: this.propName
226+
});
217227
}
218228

219229
fieldOnBlur(event: any) {
@@ -222,7 +232,8 @@ export class DateComponent implements OnInit, OnDestroy {
222232
// convert date to pega "date" format
223233
event.value = event.value?.toISOString();
224234
}
225-
this.angularPConnectData.actions?.onBlur(this, { value: event.value });
235+
const value = event?.target?.value;
236+
handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
226237
}
227238

228239
hasErrors() {

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

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@ export class DropdownComponent implements OnInit, OnDestroy {
6161
localeName = '';
6262
localePath = '';
6363
localizedValue = '';
64+
actionsApi: Object;
65+
propName: string;
6466

6567
constructor(
6668
private angularPConnect: AngularPConnectService,
@@ -166,9 +168,10 @@ export class DropdownComponent implements OnInit, OnDestroy {
166168
this.value$ = 'Select';
167169
}
168170

169-
const propName = this.pConn$.getStateProps().value;
171+
this.actionsApi = this.pConn$.getActionsApi();
172+
this.propName = this.pConn$.getStateProps().value;
170173
const className = this.pConn$.getCaseInfo().getClassName();
171-
const refName = propName?.slice(propName.lastIndexOf('.') + 1);
174+
const refName = this.propName?.slice(this.propName.lastIndexOf('.') + 1);
172175

173176
this.fieldMetadata = this.configProps$.fieldMetadata;
174177
const metaData = Array.isArray(this.fieldMetadata) ? this.fieldMetadata.filter(field => field?.classID === className)[0] : this.fieldMetadata;
@@ -201,20 +204,20 @@ export class DropdownComponent implements OnInit, OnDestroy {
201204
}
202205

203206
fieldOnChange(event: any) {
204-
if (event?.value === 'Select') {
207+
if (event?.value === 'Select') {
205208
event.value = '';
206209
}
207-
const actionsApi = this.pConn$?.getActionsApi();
208-
const propName = this.pConn$?.getStateProps().value;
209-
handleEvent(actionsApi, 'changeNblur', propName, event.value);
210+
handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
210211
if (this.configProps$?.onRecordChange) {
211212
this.configProps$.onRecordChange(event);
212213
}
214+
this.pConn$.clearErrorMessages({
215+
property: this.propName
216+
});
213217
}
214218

215219
fieldOnBlur(event: any) {
216-
// PConnect wants to use eventHandler for onBlur
217-
this.angularPConnectData.actions?.onBlur(this, event);
220+
handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
218221
}
219222

220223
getLocalizedOptionValue(opt: IOption) {

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/an
88
import { Utils } from '../../../_helpers/utils';
99
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
1010
import { PConnFieldProps } from '../../../_types/PConnProps.interface';
11+
import { handleEvent } from '../../../_helpers/event-util';
1112

1213
interface EmailProps extends PConnFieldProps {
1314
// If any, enter additional props that only exist on Email here
@@ -43,6 +44,8 @@ export class EmailComponent implements OnInit, OnDestroy {
4344
placeholder: string;
4445

4546
fieldControl = new FormControl('', null);
47+
actionsApi: Object;
48+
propName: string;
4649

4750
constructor(
4851
private angularPConnect: AngularPConnectService,
@@ -139,6 +142,9 @@ export class EmailComponent implements OnInit, OnDestroy {
139142
this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
140143
}
141144

145+
this.actionsApi = this.pConn$.getActionsApi();
146+
this.propName = this.pConn$.getStateProps().value;
147+
142148
this.componentReference = this.pConn$.getStateProps().value;
143149

144150
// trigger display of error message with field control
@@ -153,12 +159,16 @@ export class EmailComponent implements OnInit, OnDestroy {
153159
}
154160

155161
fieldOnChange(event: any) {
156-
this.angularPConnectData.actions?.onChange(this, event);
162+
let value = event?.target?.value;
163+
handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
164+
this.pConn$.clearErrorMessages({
165+
property: this.propName
166+
});
157167
}
158168

159169
fieldOnBlur(event: any) {
160-
// PConnect wants to use eventHandler for onBlur
161-
this.angularPConnectData.actions?.onBlur(this, event);
170+
let value = event?.target?.value;
171+
handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
162172
}
163173

164174
getErrorMessage() {

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/an
88
import { Utils } from '../../../_helpers/utils';
99
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
1010
import { PConnFieldProps } from '../../../_types/PConnProps.interface';
11+
import { handleEvent } from '../../../_helpers/event-util';
1112

1213
interface IntegerProps extends PConnFieldProps {
1314
// If any, enter additional props that only exist on Integer here
@@ -43,6 +44,8 @@ export class IntegerComponent implements OnInit, OnDestroy {
4344
placeholder: string;
4445

4546
fieldControl = new FormControl<number | null>(null, null);
47+
actionsApi: Object;
48+
propName: string;
4649

4750
constructor(
4851
private angularPConnect: AngularPConnectService,
@@ -115,6 +118,9 @@ export class IntegerComponent implements OnInit, OnDestroy {
115118
this.helperText = this.configProps$.helperText;
116119
this.placeholder = this.configProps$.placeholder || '';
117120

121+
this.actionsApi = this.pConn$.getActionsApi();
122+
this.propName = this.pConn$.getStateProps().value;
123+
118124
// timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
119125
setTimeout(() => {
120126
if (this.configProps$.required != null) {
@@ -156,12 +162,14 @@ export class IntegerComponent implements OnInit, OnDestroy {
156162
}
157163

158164
fieldOnChange(event: any) {
159-
this.angularPConnectData.actions?.onChange(this, event);
165+
this.pConn$.clearErrorMessages({
166+
property: this.propName
167+
});
160168
}
161169

162170
fieldOnBlur(event: any) {
163-
// PConnect wants to use eventHandler for onBlur
164-
this.angularPConnectData.actions?.onBlur(this, event);
171+
const value = event?.target?.value;
172+
handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
165173
}
166174

167175
getErrorMessage() {

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
1313
import { Utils } from '../../../_helpers/utils';
1414
import { doSearch, getDisplayFieldsMetaData, getGroupDataForItemsTree, preProcessColumns } from './utils';
1515
import { deleteInstruction, insertInstruction } from '../../../_helpers/instructions-utils';
16+
import { handleEvent } from '../../../_helpers/event-util';
1617

1718
@Component({
1819
selector: 'app-multiselect',
@@ -73,6 +74,8 @@ export class MultiselectComponent implements OnInit, OnDestroy {
7374
dataApiObj: any;
7475
itemsTree: any[] = [];
7576
trigger: any;
77+
actionsApi: Object;
78+
propName: string;
7679

7780
constructor(
7881
private angularPConnect: AngularPConnectService,
@@ -212,6 +215,9 @@ export class MultiselectComponent implements OnInit, OnDestroy {
212215
this.fieldControl.enable();
213216
}
214217

218+
this.actionsApi = this.pConn$.getActionsApi();
219+
this.propName = this.pConn$.getStateProps().value;
220+
215221
if (this.listType !== 'associated') {
216222
PCore.getDataApi()
217223
?.init(dataConfig, contextName)
@@ -285,8 +291,10 @@ export class MultiselectComponent implements OnInit, OnDestroy {
285291
this.getCaseListBasedOnParams(this.value$, '', [...this.selectedItems], [...this.itemsTree], true);
286292
}
287293

288-
optionChanged(event: MatAutocompleteSelectedEvent) {
289-
this.angularPConnectData.actions?.onChange(this, event);
294+
optionChanged(event: any) {
295+
let value = event?.target?.value;
296+
value = value?.substring(1);
297+
handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
290298
}
291299

292300
optionClicked = (event: Event, data: any): void => {

0 commit comments

Comments
 (0)