diff --git a/packages/angular-sdk-components/src/lib/_components/field/auto-complete/auto-complete.component.ts b/packages/angular-sdk-components/src/lib/_components/field/auto-complete/auto-complete.component.ts index 6ec63968..fe116067 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/auto-complete/auto-complete.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/auto-complete/auto-complete.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } fr import { CommonModule } from '@angular/common'; import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; import { MatOptionModule } from '@angular/material/core'; -import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; +import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; import { interval, Observable } from 'rxjs'; @@ -71,6 +71,8 @@ export class AutoCompleteComponent implements OnInit, OnDestroy { hideLabel: boolean; filteredOptions: Observable; filterValue = ''; + actionsApi: Object; + propName: string; constructor( private angularPConnect: AngularPConnectService, @@ -102,7 +104,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy { this.filteredOptions = this.fieldControl.valueChanges.pipe( startWith(''), - map(value => this._filter(value || '')) + map(value => this._filter((value as string) || '')) ); } @@ -151,6 +153,9 @@ export class AutoCompleteComponent implements OnInit, OnDestroy { this.setPropertyValuesFromProps(); + this.actionsApi = this.pConn$.getActionsApi(); + this.propName = this.pConn$.getStateProps().value; + const context = this.pConn$.getContextName(); const { columns, datasource } = this.generateColumnsAndDataSource(); @@ -299,13 +304,14 @@ export class AutoCompleteComponent implements OnInit, OnDestroy { // this works - this.pConn$.setValue( this.componentReference, this.fieldControl.value); // PConnect wants to use changeHandler for onChange // this.angularPConnect.changeHandler( this, event); - this.filterValue = (event.target as HTMLInputElement).value; - - this.angularPConnectData.actions?.onChange(this, event); + const value = (event.target as HTMLInputElement).value; + this.filterValue = value; + handleEvent(this.actionsApi, 'change', this.propName, value); } - optionChanged(event: MatAutocompleteSelectedEvent) { - this.angularPConnectData.actions?.onChange(this, event); + optionChanged(event: any) { + const value = (event.target as HTMLInputElement).value; + handleEvent(this.actionsApi, 'change', this.propName, value); } fieldOnBlur(event: Event) { @@ -315,11 +321,8 @@ export class AutoCompleteComponent implements OnInit, OnDestroy { const index = this.options$?.findIndex(element => element.value === el.value); key = index > -1 ? (key = this.options$[index].key) : el.value; } - const value = key; - const actionsApi = this.pConn$?.getActionsApi(); - const propName = this.pConn$?.getStateProps().value; - handleEvent(actionsApi, 'changeNblur', propName, value); + handleEvent(this.actionsApi, 'changeNblur', this.propName, value); if (this.configProps$?.onRecordChange) { el.value = value; this.configProps$.onRecordChange(event); diff --git a/packages/angular-sdk-components/src/lib/_components/field/check-box/check-box.component.ts b/packages/angular-sdk-components/src/lib/_components/field/check-box/check-box.component.ts index 5164f309..d88f869b 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/check-box/check-box.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/check-box/check-box.component.ts @@ -69,8 +69,8 @@ export class CheckBoxComponent implements OnInit, OnDestroy { selectedvalues: any; referenceList: string; listOfCheckboxes: any[] = []; - actionsApi: any; - propName: any; + actionsApi: Object; + propName: string; fieldControl = new FormControl('', null); @@ -225,16 +225,17 @@ export class CheckBoxComponent implements OnInit, OnDestroy { fieldOnChange(event: any) { event.value = event.checked; - handleEvent(this.actionsApi, 'changeNblur', this.propName, event.checked); + this.pConn$.clearErrorMessages({ + property: this.propName + }); } fieldOnBlur(event: any) { if (this.selectionMode === 'multi') { this.pConn$.getValidationApi().validate(this.selectedvalues, this.selectionList); } else { - event.value = event.checked; - this.angularPConnectData.actions?.onBlur(this, event); + this.pConn$.getValidationApi().validate(event.target.checked); } } 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 737ada2e..e36d0bbe 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 @@ -13,7 +13,7 @@ [placeholder]="placeholder" [formControl]="fieldControl" (blur)="fieldOnBlur($event)" - (dateTimeChange)="fieldOnDateChange($event)" + (dateTimeChange)="fieldOnDateChange()" [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 95d7b840..b31c6cbc 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 @@ -11,6 +11,7 @@ import { Utils } from '../../../_helpers/utils'; import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component'; import { dateFormatInfoDefault, getDateFormatInfo } from '../../../_helpers/date-format-utils'; import { PConnFieldProps } from '../../../_types/PConnProps.interface'; +import { handleEvent } from '../../../_helpers/event-util'; interface DateTimeProps extends PConnFieldProps { // If any, enter additional props that only exist on DateTime here @@ -63,6 +64,8 @@ export class DateTimeComponent implements OnInit, OnDestroy { // and then update, as needed, based on locale, etc. theDateFormat = getDateFormatInfo(); placeholder: string; + actionsApi: Object; + propName: string; constructor( private angularPConnect: AngularPConnectService, @@ -157,6 +160,9 @@ export class DateTimeComponent implements OnInit, OnDestroy { this.componentReference = this.pConn$.getStateProps().value; + this.actionsApi = this.pConn$.getActionsApi(); + this.propName = this.pConn$.getStateProps().value; + // trigger display of error message with field control if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') { const timer = interval(100).subscribe(() => { @@ -168,13 +174,10 @@ export class DateTimeComponent 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(); - } - this.angularPConnectData.actions?.onChange(this, { value: event.value }); + fieldOnDateChange() { + this.pConn$.clearErrorMessages({ + property: this.propName + }); } fieldOnBlur(event: any) { @@ -182,8 +185,8 @@ export class DateTimeComponent implements OnInit, OnDestroy { // convert date to pega "date" format event.value = event.value?.toISOString(); } - - this.angularPConnectData.actions?.onBlur(this, event); + const value = event?.target?.value; + handleEvent(this.actionsApi, 'changeNblur', this.propName, value); } getErrorMessage() { 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 ed371818..8f2c5f6a 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 @@ -15,6 +15,7 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp import { dateFormatInfoDefault, getDateFormatInfo } from '../../../_helpers/date-format-utils'; import { PConnFieldProps } from '../../../_types/PConnProps.interface'; import { format } from '../../../_helpers/formatters'; +import { handleEvent } from '../../../_helpers/event-util'; interface DateProps extends PConnFieldProps { // If any, enter additional props that only exist on Date here @@ -84,6 +85,8 @@ export class DateComponent implements OnInit, OnDestroy { dateFormatInfo = dateFormatInfoDefault; // and then update, as needed, based on locale, etc. theDateFormat = getDateFormatInfo(); + actionsApi: Object; + propName: string; constructor( private angularPConnect: AngularPConnectService, @@ -167,6 +170,9 @@ export class DateComponent implements OnInit, OnDestroy { this.helperText = this.configProps$.helperText; this.placeholder = this.configProps$.placeholder || ''; + this.actionsApi = this.pConn$.getActionsApi(); + this.propName = this.pConn$.getStateProps().value; + // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError setTimeout(() => { if (this.configProps$.required != null) { @@ -213,7 +219,11 @@ export class DateComponent implements OnInit, OnDestroy { // convert date to pega "date" format event.value = event.value?.toISOString(); } - this.angularPConnectData.actions?.onChange(this, { value: event.value }); + const value = event?.target?.value; + handleEvent(this.actionsApi, 'changeNblur', this.propName, value); + this.pConn$.clearErrorMessages({ + property: this.propName + }); } fieldOnBlur(event: any) { @@ -222,7 +232,8 @@ export class DateComponent implements OnInit, OnDestroy { // convert date to pega "date" format event.value = event.value?.toISOString(); } - this.angularPConnectData.actions?.onBlur(this, { value: event.value }); + const value = event?.target?.value; + handleEvent(this.actionsApi, 'changeNblur', this.propName, value); } hasErrors() { diff --git a/packages/angular-sdk-components/src/lib/_components/field/dropdown/dropdown.component.ts b/packages/angular-sdk-components/src/lib/_components/field/dropdown/dropdown.component.ts index 4d24533d..66073ede 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/dropdown/dropdown.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/dropdown/dropdown.component.ts @@ -61,6 +61,8 @@ export class DropdownComponent implements OnInit, OnDestroy { localeName = ''; localePath = ''; localizedValue = ''; + actionsApi: Object; + propName: string; constructor( private angularPConnect: AngularPConnectService, @@ -166,9 +168,10 @@ export class DropdownComponent implements OnInit, OnDestroy { this.value$ = 'Select'; } - const propName = this.pConn$.getStateProps().value; + this.actionsApi = this.pConn$.getActionsApi(); + this.propName = this.pConn$.getStateProps().value; const className = this.pConn$.getCaseInfo().getClassName(); - const refName = propName?.slice(propName.lastIndexOf('.') + 1); + const refName = this.propName?.slice(this.propName.lastIndexOf('.') + 1); this.fieldMetadata = this.configProps$.fieldMetadata; const metaData = Array.isArray(this.fieldMetadata) ? this.fieldMetadata.filter(field => field?.classID === className)[0] : this.fieldMetadata; @@ -204,17 +207,13 @@ export class DropdownComponent implements OnInit, OnDestroy { if (event?.value === 'Select') { event.value = ''; } - const actionsApi = this.pConn$?.getActionsApi(); - const propName = this.pConn$?.getStateProps().value; - handleEvent(actionsApi, 'changeNblur', propName, event.value); + handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value); if (this.configProps$?.onRecordChange) { this.configProps$.onRecordChange(event); } - } - - fieldOnBlur(event: any) { - // PConnect wants to use eventHandler for onBlur - this.angularPConnectData.actions?.onBlur(this, event); + this.pConn$.clearErrorMessages({ + property: this.propName + }); } getLocalizedOptionValue(opt: IOption) { diff --git a/packages/angular-sdk-components/src/lib/_components/field/email/email.component.ts b/packages/angular-sdk-components/src/lib/_components/field/email/email.component.ts index e0e096e7..7597c8b5 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/email/email.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/email/email.component.ts @@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/an 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'; interface EmailProps extends PConnFieldProps { // If any, enter additional props that only exist on Email here @@ -43,6 +44,8 @@ export class EmailComponent implements OnInit, OnDestroy { placeholder: string; fieldControl = new FormControl('', null); + actionsApi: Object; + propName: string; constructor( private angularPConnect: AngularPConnectService, @@ -139,6 +142,9 @@ export class EmailComponent implements OnInit, OnDestroy { this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly); } + this.actionsApi = this.pConn$.getActionsApi(); + this.propName = this.pConn$.getStateProps().value; + this.componentReference = this.pConn$.getStateProps().value; // trigger display of error message with field control @@ -153,12 +159,16 @@ export class EmailComponent implements OnInit, OnDestroy { } fieldOnChange(event: any) { - this.angularPConnectData.actions?.onChange(this, event); + const value = event?.target?.value; + handleEvent(this.actionsApi, 'changeNblur', this.propName, value); + this.pConn$.clearErrorMessages({ + property: this.propName + }); } fieldOnBlur(event: any) { - // PConnect wants to use eventHandler for onBlur - this.angularPConnectData.actions?.onBlur(this, event); + const value = event?.target?.value; + handleEvent(this.actionsApi, 'changeNblur', this.propName, value); } getErrorMessage() { diff --git a/packages/angular-sdk-components/src/lib/_components/field/integer/integer.component.html b/packages/angular-sdk-components/src/lib/_components/field/integer/integer.component.html index 5b5b0133..2d4c9a90 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/integer/integer.component.html +++ b/packages/angular-sdk-components/src/lib/_components/field/integer/integer.component.html @@ -15,7 +15,7 @@ [required]="bRequired$" [formControl]="fieldControl" [attr.data-test-id]="testId" - (change)="fieldOnChange($event)" + (change)="fieldOnChange()" (blur)="fieldOnBlur($event)" /> {{ getErrorMessage() }} diff --git a/packages/angular-sdk-components/src/lib/_components/field/integer/integer.component.ts b/packages/angular-sdk-components/src/lib/_components/field/integer/integer.component.ts index bc0f0225..74cc4d16 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/integer/integer.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/integer/integer.component.ts @@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/an 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'; interface IntegerProps extends PConnFieldProps { // If any, enter additional props that only exist on Integer here @@ -43,6 +44,8 @@ export class IntegerComponent implements OnInit, OnDestroy { placeholder: string; fieldControl = new FormControl(null, null); + actionsApi: Object; + propName: string; constructor( private angularPConnect: AngularPConnectService, @@ -115,6 +118,9 @@ export class IntegerComponent implements OnInit, OnDestroy { this.helperText = this.configProps$.helperText; this.placeholder = this.configProps$.placeholder || ''; + this.actionsApi = this.pConn$.getActionsApi(); + this.propName = this.pConn$.getStateProps().value; + // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError setTimeout(() => { if (this.configProps$.required != null) { @@ -155,13 +161,15 @@ export class IntegerComponent implements OnInit, OnDestroy { } } - fieldOnChange(event: any) { - this.angularPConnectData.actions?.onChange(this, event); + fieldOnChange() { + this.pConn$.clearErrorMessages({ + property: this.propName + }); } fieldOnBlur(event: any) { - // PConnect wants to use eventHandler for onBlur - this.angularPConnectData.actions?.onBlur(this, event); + const value = event?.target?.value; + handleEvent(this.actionsApi, 'changeNblur', this.propName, value); } getErrorMessage() { diff --git a/packages/angular-sdk-components/src/lib/_components/field/multiselect/multiselect.component.ts b/packages/angular-sdk-components/src/lib/_components/field/multiselect/multiselect.component.ts index ebc7ddb3..9c58f998 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/multiselect/multiselect.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/multiselect/multiselect.component.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core'; import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; -import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; +import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { MatChipsModule } from '@angular/material/chips'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatOptionModule } from '@angular/material/core'; @@ -13,6 +13,7 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp import { Utils } from '../../../_helpers/utils'; import { doSearch, getDisplayFieldsMetaData, getGroupDataForItemsTree, preProcessColumns } from './utils'; import { deleteInstruction, insertInstruction } from '../../../_helpers/instructions-utils'; +import { handleEvent } from '../../../_helpers/event-util'; @Component({ selector: 'app-multiselect', @@ -73,6 +74,8 @@ export class MultiselectComponent implements OnInit, OnDestroy { dataApiObj: any; itemsTree: any[] = []; trigger: any; + actionsApi: Object; + propName: string; constructor( private angularPConnect: AngularPConnectService, @@ -212,6 +215,9 @@ export class MultiselectComponent implements OnInit, OnDestroy { this.fieldControl.enable(); } + this.actionsApi = this.pConn$.getActionsApi(); + this.propName = this.pConn$.getStateProps().value; + if (this.listType !== 'associated') { PCore.getDataApi() ?.init(dataConfig, contextName) @@ -285,8 +291,10 @@ export class MultiselectComponent implements OnInit, OnDestroy { this.getCaseListBasedOnParams(this.value$, '', [...this.selectedItems], [...this.itemsTree], true); } - optionChanged(event: MatAutocompleteSelectedEvent) { - this.angularPConnectData.actions?.onChange(this, event); + optionChanged(event: any) { + let value = event?.target?.value; + value = value?.substring(1); + handleEvent(this.actionsApi, 'changeNblur', this.propName, value); } optionClicked = (event: Event, data: any): void => { diff --git a/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.html b/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.html index 0bb9a409..512ccd23 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.html +++ b/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.html @@ -26,7 +26,7 @@ [required]="bRequired$" [formControl]="fieldControl" [attr.data-test-id]="testId" - (change)="fieldOnChange($event)" + (change)="fieldOnChange()" (blur)="fieldOnBlur($event)" [readonly]="bReadonly$" [value]="value$" diff --git a/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.ts b/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.ts index 1fd7628c..6aedde22 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.ts @@ -51,6 +51,8 @@ export class PercentageComponent implements OnInit, OnDestroy { inputMode: any; decimalPrecision: number | undefined; fieldControl = new FormControl(null, null); + actionsApi: Object; + propName: string; constructor( private angularPConnect: AngularPConnectService, @@ -125,6 +127,9 @@ export class PercentageComponent implements OnInit, OnDestroy { this.currDec = theSymbols.theDecimalIndicator || '2'; this.currSep = showGroupSeparators ? theSymbols.theDigitGroupSeparator : ''; + this.actionsApi = this.pConn$.getActionsApi(); + this.propName = this.pConn$.getStateProps().value; + // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError setTimeout(() => { if (this.configProps$.required != null) { @@ -166,13 +171,13 @@ export class PercentageComponent implements OnInit, OnDestroy { } } - fieldOnChange(event: any) { - this.angularPConnectData.actions?.onChange(this, event); + fieldOnChange() { + this.pConn$.clearErrorMessages({ + property: this.propName + }); } fieldOnBlur(event: any) { - const actionsApi = this.pConn$?.getActionsApi(); - const propName = this.pConn$?.getStateProps()?.value; let value = event?.target?.value; value = value ? value.replace(/%/g, '') : ''; if (this.currSep === '.') { @@ -181,7 +186,7 @@ export class PercentageComponent implements OnInit, OnDestroy { } else { value = value.replace(/,/g, ''); } - handleEvent(actionsApi, 'changeNblur', propName, value); + handleEvent(this.actionsApi, 'changeNblur', this.propName, value); } getErrorMessage() { diff --git a/packages/angular-sdk-components/src/lib/_components/field/phone/phone.component.html b/packages/angular-sdk-components/src/lib/_components/field/phone/phone.component.html index ccd8419d..1783fc5e 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/phone/phone.component.html +++ b/packages/angular-sdk-components/src/lib/_components/field/phone/phone.component.html @@ -12,7 +12,7 @@ [enablePlaceholder]="true" [enableSearch]="true" (change)="fieldOnChange()" - (blur)="fieldOnBlur($event)" + (blur)="fieldOnBlur()" > {{ label$ }} diff --git a/packages/angular-sdk-components/src/lib/_components/field/phone/phone.component.ts b/packages/angular-sdk-components/src/lib/_components/field/phone/phone.component.ts index 39febd9e..3314b386 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/phone/phone.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/phone/phone.component.ts @@ -50,6 +50,9 @@ export class PhoneComponent implements OnInit, OnDestroy { phone: new FormControl(null) }); + actionsApi: Object; + propName: string; + constructor( private angularPConnect: AngularPConnectService, private cdRef: ChangeDetectorRef, @@ -117,6 +120,9 @@ export class PhoneComponent implements OnInit, OnDestroy { } this.helperText = this.configProps$.helperText; + this.actionsApi = this.pConn$.getActionsApi(); + this.propName = this.pConn$.getStateProps().value; + // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError setTimeout(() => { if (this.configProps$.required != null) { @@ -159,27 +165,18 @@ export class PhoneComponent implements OnInit, OnDestroy { } } + fieldOnBlur() { + // 'blur' isn't getting fired + } + fieldOnChange() { if (this.formGroup$.controls[this.controlName$].value) { - const actionsApi = this.pConn$?.getActionsApi(); - const propName = this.pConn$?.getStateProps().value; const value = this.formGroup$.controls[this.controlName$].value; - const eventObj = { - target: { - value - } - }; this.afterBlur = true; - this.angularPConnectData.actions?.onChange(this, eventObj); - handleEvent(actionsApi, 'blur', propName, value); + handleEvent(this.actionsApi, 'changeNblur', this.propName, value); } } - fieldOnBlur(event: any) { - // PConnect wants to use eventHandler for onBlur - this.angularPConnectData.actions?.onBlur(this, event); - } - getErrorMessage() { let errMessage = ''; diff --git a/packages/angular-sdk-components/src/lib/_components/field/radio-buttons/radio-buttons.component.ts b/packages/angular-sdk-components/src/lib/_components/field/radio-buttons/radio-buttons.component.ts index f03ac7a0..e5730881 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/radio-buttons/radio-buttons.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/radio-buttons/radio-buttons.component.ts @@ -9,6 +9,7 @@ import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/an 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'; interface IOption { key: string; @@ -60,6 +61,8 @@ export class RadioButtonsComponent implements OnInit, OnDestroy { localeName = ''; localePath = ''; localizedValue = ''; + actionsApi: Object; + propName: string; constructor( private angularPConnect: AngularPConnectService, @@ -168,9 +171,11 @@ export class RadioButtonsComponent implements OnInit, OnDestroy { this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject()); - const propName = this.pConn$.getStateProps().value; + this.actionsApi = this.pConn$.getActionsApi(); + this.propName = this.pConn$.getStateProps().value; + const className = this.pConn$.getCaseInfo().getClassName(); - const refName = propName?.slice(propName.lastIndexOf('.') + 1); + const refName = this.propName?.slice(this.propName.lastIndexOf('.') + 1); this.fieldMetadata = this.configProps$.fieldMetadata; const metaData = Array.isArray(this.fieldMetadata) ? this.fieldMetadata.filter(field => field?.classID === className)[0] : this.fieldMetadata; @@ -203,12 +208,7 @@ export class RadioButtonsComponent implements OnInit, OnDestroy { } fieldOnChange(event: any) { - this.angularPConnectData.actions?.onChange(this, event); - } - - fieldOnBlur(event: any) { - // PConnect wants to use eventHandler for onBlur - this.angularPConnectData.actions?.onBlur(this, event); + handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value); } getLocalizedOptionValue(opt: IOption) { diff --git a/packages/angular-sdk-components/src/lib/_components/field/rich-text/rich-text.component.ts b/packages/angular-sdk-components/src/lib/_components/field/rich-text/rich-text.component.ts index 6a8fb715..8eef19f2 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/rich-text/rich-text.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/rich-text/rich-text.component.ts @@ -40,6 +40,8 @@ export class RichTextComponent implements OnInit, OnDestroy { info: any; error: boolean; status: any; + actionsApi: Object; + propName: string; constructor( private angularPConnect: AngularPConnectService, @@ -94,6 +96,9 @@ export class RichTextComponent implements OnInit, OnDestroy { this.info = stateProps?.validatemessage || this.configProps$.helperText; this.error = stateProps?.status === 'error'; + this.actionsApi = this.pConn$.getActionsApi(); + this.propName = this.pConn$.getStateProps().value; + if (this.configProps$.required != null) { this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required); } @@ -113,7 +118,7 @@ export class RichTextComponent implements OnInit, OnDestroy { fieldOnChange() { if (this.status === 'error') { - const property = this.pConn$.getStateProps().value; + const property = this.propName; this.pConn$.clearErrorMessages({ property, category: '', @@ -123,9 +128,6 @@ export class RichTextComponent implements OnInit, OnDestroy { } fieldOnBlur(editorValue: any) { - // PConnect wants to use eventHandler for onBlur - const actionsApi = this.pConn$?.getActionsApi(); - const propName = this.pConn$?.getStateProps()?.value; - handleEvent(actionsApi, 'changeNblur', propName, editorValue); + handleEvent(this.actionsApi, 'changeNblur', this.propName, editorValue); } } diff --git a/packages/angular-sdk-components/src/lib/_components/field/text-area/text-area.component.html b/packages/angular-sdk-components/src/lib/_components/field/text-area/text-area.component.html index 342fb5c8..7bb29323 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/text-area/text-area.component.html +++ b/packages/angular-sdk-components/src/lib/_components/field/text-area/text-area.component.html @@ -16,7 +16,8 @@ [required]="bRequired$" [disabled]="bDisabled$" [formControl]="fieldControl" - (change)="fieldOnChange($event)" + (change)="fieldOnChange()" + (blur)="fieldOnBlur($event)" > {{ getErrorMessage() }} diff --git a/packages/angular-sdk-components/src/lib/_components/field/text-area/text-area.component.ts b/packages/angular-sdk-components/src/lib/_components/field/text-area/text-area.component.ts index c7be14ae..4d520802 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/text-area/text-area.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/text-area/text-area.component.ts @@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/an 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'; interface TextAreaProps extends PConnFieldProps { // If any, enter additional props that only exist on TextArea here @@ -44,6 +45,8 @@ export class TextAreaComponent implements OnInit, OnDestroy { helperText: string; fieldControl = new FormControl('', null); + actionsApi: Object; + propName: string; constructor( private angularPConnect: AngularPConnectService, @@ -113,6 +116,9 @@ export class TextAreaComponent implements OnInit, OnDestroy { this.label$ = this.configProps$.label; this.helperText = this.configProps$.helperText; + this.actionsApi = this.pConn$.getActionsApi(); + this.propName = this.pConn$.getStateProps().value; + // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError setTimeout(() => { if (this.configProps$.required != null) { @@ -153,14 +159,15 @@ export class TextAreaComponent implements OnInit, OnDestroy { } } - fieldOnChange(event: any) { - // PConnect wants to use changeHandler for onChange - this.angularPConnectData.actions?.onChange(this, event); + fieldOnChange() { + this.pConn$.clearErrorMessages({ + property: this.propName + }); } fieldOnBlur(event: any) { - // PConnect wants to use eventHandler for onBlur - this.angularPConnectData.actions?.onBlur(this, event); + const value = event?.target?.value; + handleEvent(this.actionsApi, 'changeNblur', this.propName, value); } getErrorMessage() { diff --git a/packages/angular-sdk-components/src/lib/_components/field/text-input/text-input.component.html b/packages/angular-sdk-components/src/lib/_components/field/text-input/text-input.component.html index 5b6a4e66..92b26ed3 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/text-input/text-input.component.html +++ b/packages/angular-sdk-components/src/lib/_components/field/text-input/text-input.component.html @@ -14,7 +14,7 @@ [required]="bRequired$" [attr.data-test-id]="testId" [formControl]="fieldControl" - (change)="fieldOnChange($event)" + (change)="fieldOnChange()" (blur)="fieldOnBlur($event)" /> {{ getErrorMessage() }} diff --git a/packages/angular-sdk-components/src/lib/_components/field/text-input/text-input.component.ts b/packages/angular-sdk-components/src/lib/_components/field/text-input/text-input.component.ts index 234d7a75..cde1b044 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/text-input/text-input.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/text-input/text-input.component.ts @@ -8,6 +8,7 @@ import { AngularPConnectService, AngularPConnectData } from '../../../_bridge/an 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'; interface TextInputProps extends PConnFieldProps { // If any, enter additional props that only exist on TextInput here @@ -44,6 +45,8 @@ export class TextInputComponent implements OnInit, OnDestroy { placeholder: string; fieldControl = new FormControl('', null); + actionsApi: Object; + propName: string; constructor( private angularPConnect: AngularPConnectService, @@ -115,6 +118,9 @@ export class TextInputComponent implements OnInit, OnDestroy { this.componentReference = this.pConn$.getStateProps().value; + this.actionsApi = this.pConn$.getActionsApi(); + this.propName = this.pConn$.getStateProps().value; + if (this.configProps$.visibility != null) { this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility); } @@ -155,13 +161,15 @@ export class TextInputComponent implements OnInit, OnDestroy { } } - fieldOnChange(event: any) { - this.angularPConnectData.actions?.onChange(this, event); + fieldOnChange() { + this.pConn$.clearErrorMessages({ + property: this.propName + }); } fieldOnBlur(event: any) { - // PConnect wants to use eventHandler for onBlur - this.angularPConnectData.actions?.onBlur(this, event); + const value = event?.target?.value; + handleEvent(this.actionsApi, 'changeNblur', this.propName, value); } getErrorMessage() { 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 7850cb4b..878ba6d3 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 @@ -14,7 +14,7 @@ [required]="bRequired$" [attr.data-test-id]="testId" [formControl]="fieldControl" - (change)="fieldOnChange($event)" + (change)="fieldOnChange()" (blur)="fieldOnBlur($event)" /> {{ getErrorMessage() }} 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 888e6137..47d137d2 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 @@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/an 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'; interface TimeProps extends PConnFieldProps { // If any, enter additional props that only exist on Time here @@ -43,6 +44,8 @@ export class TimeComponent implements OnInit, OnDestroy { placeholder: string; fieldControl = new FormControl('', null); + actionsApi: Object; + propName: string; constructor( private angularPConnect: AngularPConnectService, @@ -111,6 +114,9 @@ export class TimeComponent implements OnInit, OnDestroy { this.helperText = this.configProps$.helperText; this.placeholder = this.configProps$.placeholder || ''; + this.actionsApi = this.pConn$.getActionsApi(); + this.propName = this.pConn$.getStateProps().value; + // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError setTimeout(() => { if (this.configProps$.required != null) { @@ -151,15 +157,15 @@ export class TimeComponent implements OnInit, OnDestroy { } } - fieldOnChange(event: any) { - event.value = event.target.value; - this.angularPConnectData.actions?.onChange(this, event); + fieldOnChange() { + this.pConn$.clearErrorMessages({ + property: this.propName + }); } fieldOnBlur(event: any) { - // PConnect wants to use eventHandler for onBlur - event.value = event.target.value; - this.angularPConnectData.actions?.onBlur(this, event); + const value = event?.target?.value; + handleEvent(this.actionsApi, 'changeNblur', this.propName, value); } getErrorMessage() { diff --git a/packages/angular-sdk-components/src/lib/_components/field/url/url.component.html b/packages/angular-sdk-components/src/lib/_components/field/url/url.component.html index 2be1bf5a..55eea1a5 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/url/url.component.html +++ b/packages/angular-sdk-components/src/lib/_components/field/url/url.component.html @@ -14,7 +14,7 @@ [required]="bRequired$" [attr.data-test-id]="testId" [formControl]="fieldControl" - (change)="fieldOnChange($event)" + (change)="fieldOnChange()" (blur)="fieldOnBlur($event)" /> {{ getErrorMessage() }} diff --git a/packages/angular-sdk-components/src/lib/_components/field/url/url.component.ts b/packages/angular-sdk-components/src/lib/_components/field/url/url.component.ts index caacb932..48d120eb 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/url/url.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/url/url.component.ts @@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/an 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'; interface URLProps extends PConnFieldProps { // If any, enter additional props that only exist on URL here @@ -43,6 +44,8 @@ export class UrlComponent implements OnInit, OnDestroy { placeholder: string; fieldControl = new FormControl('', null); + actionsApi: Object; + propName: string; constructor( private angularPConnect: AngularPConnectService, @@ -113,6 +116,9 @@ export class UrlComponent implements OnInit, OnDestroy { this.helperText = this.configProps$.helperText; this.placeholder = this.configProps$.placeholder || ''; + this.actionsApi = this.pConn$.getActionsApi(); + this.propName = this.pConn$.getStateProps().value; + // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError setTimeout(() => { if (this.configProps$.required != null) { @@ -153,13 +159,15 @@ export class UrlComponent implements OnInit, OnDestroy { } } - fieldOnChange(event: any) { - this.angularPConnectData.actions?.onChange(this, event); + fieldOnChange() { + this.pConn$.clearErrorMessages({ + property: this.propName + }); } fieldOnBlur(event: any) { - // PConnect wants to use eventHandler for onBlur - this.angularPConnectData.actions?.onBlur(this, event); + const value = event?.target?.value; + handleEvent(this.actionsApi, 'changeNblur', this.propName, value); } getErrorMessage() { diff --git a/packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.ts b/packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.ts index de4c4024..cb72f86e 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.ts @@ -11,6 +11,7 @@ import { Utils } from '../../../_helpers/utils'; import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component'; import { PConnFieldProps } from '../../../_types/PConnProps.interface'; import { map, Observable, startWith } from 'rxjs'; +import { handleEvent } from '../../../_helpers/event-util'; const OPERATORS_DP = 'D_pyGetOperatorsForCurrentApplication'; const DROPDOWN_LIST = 'Drop-down list'; @@ -63,6 +64,8 @@ export class UserReferenceComponent implements OnInit, OnDestroy { filterValue = ''; fieldControl = new FormControl('', null); + actionsApi: Object; + propName: string; constructor( private angularPConnect: AngularPConnectService, @@ -150,6 +153,9 @@ export class UserReferenceComponent implements OnInit, OnDestroy { const { readOnly, required } = props; [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true')); + this.actionsApi = this.pConn$.getActionsApi(); + this.propName = this.pConn$.getStateProps().value; + const isUserNameAvailable = user => { return typeof user === 'object' && user !== null && user.userName; }; @@ -195,7 +201,8 @@ export class UserReferenceComponent implements OnInit, OnDestroy { if (event?.target) { this.filterValue = (event.target as HTMLInputElement).value; } - this.angularPConnectData.actions?.onChange(this, event); + const value = event?.target?.value; + handleEvent(this.actionsApi, 'change', this.propName, value); } fieldOnBlur(event: any) { @@ -205,11 +212,10 @@ export class UserReferenceComponent implements OnInit, OnDestroy { key = index > -1 ? (key = this.options$[index].key) : event.target.value; } - const eve = { + const value = { value: key }; - // PConnect wants to use eventHandler for onBlur - this.angularPConnectData.actions?.onChange(this, eve); + handleEvent(this.actionsApi, 'changeNblur', this.propName, value); } getErrorMessage() {