Support/pnc

packages/angular-sdk-components/src/lib/_bridge/angular-pconnect.ts

@@ -260,16 +260,31 @@ export class AngularPConnectService {
       inComp.bridgeComponentID = theCompID;
     } else {
       returnObject.compID = theCompID;
-      returnObject.unsubscribeFn = theUnsub;
+      returnObject.unsubscribeFn = () => {
+        this.removeFormField(inComp);
+        theUnsub();
+      };
     }
 
     // initialize this components entry in the componentPropsArr
     this.componentPropsArr[theCompID] = {};
 
+    this.addFormField(inComp);
+
     // return object with compID and unsubscribe...
     return returnObject;
   }
 
+  addFormField(inComp) {
+    inComp.pConn$?.addFormField();
+  }
+
+  removeFormField(inComp) {
+    if (inComp.pConn$?.removeFormField) {
+      inComp.pConn$?.removeFormField();
+    }
+  }
+
   // Returns true if the component's entry in ___componentPropsArr___ is
   //  the same as the inCompProps passed in.
   //  As a side effect, update the component's entry in componentPropsArr

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

@@ -301,7 +301,9 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
     // this.angularPConnect.changeHandler( this, event);
     this.filterValue = (event.target as HTMLInputElement).value;
 
-    this.angularPConnectData.actions?.onChange(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'change', propName, this.filterValue);
   }
 
   optionChanged(event: MatAutocompleteSelectedEvent) {

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

@@ -9,8 +9,8 @@ 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 { deleteInstruction, insertInstruction, updateNewInstructions } from '../../../_helpers/instructions-utils';
 import { handleEvent } from '../../../_helpers/event-util';
+import { deleteInstruction, insertInstruction, updateNewInstructions } from '../../../_helpers/instructions-utils';
 
 interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Checkbox here
@@ -234,8 +234,9 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
     if (this.selectionMode === 'multi') {
       this.pConn$.getValidationApi().validate(this.selectedvalues, this.selectionList);
     } else {
-      event.value = event.checked;
-      this.angularPConnectData.actions?.onBlur(this, event);
+      const actionsApi = this.pConn$?.getActionsApi();
+      const propName = (this.pConn$?.getStateProps() as any).value;
+      handleEvent(actionsApi, 'changeNblur', propName, event.checked);
     }
   }
 

packages/angular-sdk-components/src/lib/_components/field/currency/currency.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 { getCurrencyCharacters } from '../../../_helpers/currency-utils';
+import { handleEvent } from '../../../_helpers/event-util';
 import { PConnFieldProps } from '../../../_types/PConnProps.interface';
 
 interface CurrrencyProps extends PConnFieldProps {
@@ -175,7 +176,9 @@ export class CurrencyComponent implements OnInit, OnDestroy {
   fieldOnBlur(event: any) {
     // PConnect wants to use eventHandler for onBlur
 
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

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

@@ -202,10 +202,9 @@ export class DateTimeComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    if (event.target.value) event.value = event.target.value;
-
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

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

@@ -13,8 +13,9 @@ import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/an
 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';
 import { format } from '../../../_helpers/formatters';
+import { PConnFieldProps } from '../../../_types/PConnProps.interface';
 
 interface DateProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Date here
@@ -222,7 +223,9 @@ 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 actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.value);
   }
 
   hasErrors() {

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

@@ -5,12 +5,47 @@ import { MatOptionModule } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { interval } from 'rxjs';
+import isEqual from 'fast-deep-equal';
 import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
+import { DatapageService } from '../../../_services/datapage.service';
 import { Utils } from '../../../_helpers/utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 import { handleEvent } from '../../../_helpers/event-util';
 import { PConnFieldProps } from '../../../_types/PConnProps.interface';
 
+function flattenParameters(params = {}) {
+  const flatParams = {};
+  Object.keys(params).forEach(key => {
+    const { name, value: theVal } = params[key];
+    flatParams[name] = theVal;
+  });
+
+  return flatParams;
+}
+
+function preProcessColumns(columnList) {
+  return columnList.map(col => {
+    const tempColObj = { ...col };
+    tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
+    return tempColObj;
+  });
+}
+
+function getDisplayFieldsMetaData(columnList) {
+  const displayColumns = columnList.filter(col => col.display === 'true');
+  const metaDataObj: any = { key: '', primary: '', secondary: [] };
+  const keyCol = columnList.filter(col => col.key === 'true');
+  metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
+  for (let index = 0; index < displayColumns.length; index += 1) {
+    if (displayColumns[index].primary === 'true') {
+      metaDataObj.primary = displayColumns[index].value;
+    } else {
+      metaDataObj.secondary.push(displayColumns[index].value);
+    }
+  }
+  return metaDataObj;
+}
+
 interface IOption {
   key: string;
   value: string;
@@ -22,6 +57,11 @@ interface DropdownProps extends PConnFieldProps {
   datasource?: any[];
   onRecordChange?: any;
   fieldMetadata?: any;
+  listType?: string;
+  columns?: any[];
+  deferDatasource?: boolean;
+  datasourceMetadata?: any;
+  parameters?: any;
 }
 
 @Component({
@@ -53,7 +93,7 @@ export class DropdownComponent implements OnInit, OnDestroy {
   testId = '';
   helperText: string;
   hideLabel: any;
-
+  theDatasource: any[] | null;
   fieldControl = new FormControl('', null);
   fieldMetadata: any[];
   localeContext = '';
@@ -65,7 +105,8 @@ export class DropdownComponent implements OnInit, OnDestroy {
   constructor(
     private angularPConnect: AngularPConnectService,
     private cdRef: ChangeDetectorRef,
-    private utils: Utils
+    private utils: Utils,
+    private dataPageService: DatapageService
   ) {}
 
   ngOnInit(): void {
@@ -76,8 +117,9 @@ export class DropdownComponent implements OnInit, OnDestroy {
     // Then, continue on with other initialization
 
     // call updateSelf when initializing
-    // this.updateSelf();
     this.checkAndUpdate();
+    // this should get called afer checkAndUpdate
+    this.getDatapageData();
 
     if (this.formGroup$) {
       // add control to formGroup
@@ -120,7 +162,6 @@ export class DropdownComponent implements OnInit, OnDestroy {
   updateSelf(): void {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as DropdownProps;
-
     if (this.configProps$.value != undefined) {
       this.value$ = this.configProps$.value;
     }
@@ -130,6 +171,7 @@ export class DropdownComponent implements OnInit, OnDestroy {
     this.label$ = this.configProps$.label;
     this.helperText = this.configProps$.helperText;
     this.hideLabel = this.configProps$.hideLabel;
+    const datasource = this.configProps$.datasource;
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {
@@ -138,6 +180,11 @@ export class DropdownComponent implements OnInit, OnDestroy {
       this.cdRef.detectChanges();
     });
 
+    if (!isEqual(datasource, this.theDatasource)) {
+      // inbound datasource is different, so update theDatasource
+      this.theDatasource = datasource || null;
+    }
+
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
     }
@@ -159,14 +206,16 @@ export class DropdownComponent implements OnInit, OnDestroy {
 
     this.componentReference = (this.pConn$.getStateProps() as any).value;
 
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
-    const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
-    optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
-    this.options$ = optionsList;
     if (this.value$ === '' && !this.bReadonly$) {
       this.value$ = 'Select';
     }
 
+    if (this.theDatasource) {
+      const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
+      optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
+      this.options$ = optionsList;
+    }
+
     const propName = (this.pConn$.getStateProps() as any).value;
     const className = this.pConn$.getCaseInfo().getClassName();
     const refName = propName?.slice(propName.lastIndexOf('.') + 1);
@@ -198,6 +247,70 @@ export class DropdownComponent implements OnInit, OnDestroy {
     }
   }
 
+  getDatapageData() {
+    const configProps = this.pConn$.getConfigProps() as DropdownProps;
+    let { listType, parameters, datasource = [], columns = [] } = configProps;
+    const { deferDatasource, datasourceMetadata } = configProps;
+    const context = this.pConn$.getContextName();
+    if (deferDatasource && datasourceMetadata?.datasource?.name) {
+      listType = 'datapage';
+      datasource = datasourceMetadata.datasource.name;
+      const { parameters: dataSourceParameters, propertyForDisplayText, propertyForValue } = datasourceMetadata.datasource;
+      parameters = flattenParameters(dataSourceParameters);
+      const displayProp = propertyForDisplayText?.startsWith('@P') ? propertyForDisplayText.substring(3) : propertyForDisplayText;
+      const valueProp = propertyForValue?.startsWith('@P') ? propertyForValue.substring(3) : propertyForValue;
+      columns = [
+        {
+          key: 'true',
+          setProperty: 'Associated property',
+          value: valueProp
+        },
+        {
+          display: 'true',
+          primary: 'true',
+          useForSearch: true,
+          value: displayProp
+        }
+      ];
+    }
+
+    columns = preProcessColumns(columns) || [];
+    if (!this.displayMode$ && listType !== 'associated' && typeof datasource === 'string') {
+      this.getData(datasource, parameters, columns, context, listType);
+    }
+  }
+
+  getData(dataSource, parameters, columns, context, listType) {
+    const dataConfig: any = {
+      columns,
+      dataSource,
+      deferDatasource: true,
+      listType,
+      parameters,
+      matchPosition: 'contains',
+      maxResultsDisplay: '5000',
+      cacheLifeSpan: 'form'
+    };
+    PCore.getDataApi()
+      .init(dataConfig, context)
+      .then((dataApiObj: any) => {
+        const optionsData: any[] = [];
+        const displayColumn = getDisplayFieldsMetaData(columns);
+        dataApiObj.fetchData('').then(response => {
+          response.data?.forEach(element => {
+            const val = element[displayColumn.primary]?.toString();
+            const obj = {
+              key: element[displayColumn.key] || element.pyGUID,
+              value: val
+            };
+            optionsData.push(obj);
+          });
+          optionsData?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
+          this.options$ = optionsData;
+        });
+      });
+  }
+
   isSelected(buttonValue: string): boolean {
     return this.value$ === buttonValue;
   }
@@ -214,11 +327,6 @@ export class DropdownComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
-  }
-
   getLocalizedOptionValue(opt: IOption) {
     return this.pConn$.getLocalizedValue(
       opt.value,

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

@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { Utils } from '../../../_helpers/utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { handleEvent } from '../../../_helpers/event-util';
 import { PConnFieldProps } from '../../../_types/PConnProps.interface';
 
 interface EmailProps extends PConnFieldProps {
@@ -157,8 +158,9 @@ export class EmailComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

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

@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { Utils } from '../../../_helpers/utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { handleEvent } from '../../../_helpers/event-util';
 import { PConnFieldProps } from '../../../_types/PConnProps.interface';
 
 interface IntegerProps extends PConnFieldProps {
@@ -160,8 +161,9 @@ export class IntegerComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {