@pega/angular-sdk-overrides 23.1.10 → 24.2.10

package/lib/field/url/url.component.ts

@@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface URLProps extends PConnFieldProps {
   // If any, enter additional props that only exist on URL here
@@ -36,12 +37,15 @@ export class UrlComponent implements OnInit, OnDestroy {
   bVisible$ = true;
   displayMode$?: string = '';
   controlName$: string;
+  testId = '';
   bHasForm$ = true;
   componentReference = '';
   helperText: string;
   placeholder: string;
 
   fieldControl = new FormControl('', null);
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -106,11 +110,15 @@ export class UrlComponent implements OnInit, OnDestroy {
       this.value$ = this.configProps$.value;
     }
 
+    this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
     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) {
@@ -138,7 +146,7 @@ export class UrlComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -151,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() {

package/lib/field/user-reference/user-reference.component.html

@@ -1,48 +1,45 @@
 <div class="psdk-user-reference">
-  <div *ngIf="type === 'operator'">
-    <component-mapper name="Operator" [props]="{ pConn$ }"></component-mapper>
-  </div>
-  <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
-    <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
-      <mat-select
-        [value]="value$"
-        [required]="bRequired$"
-        [formControl]="fieldControl"
-        [attr.data-test-id]="testId"
-        (selectionChange)="fieldOnChange($event)"
-      >
-        <mat-option *ngFor="let opt of options$" [value]="opt.key">
-          {{ opt.value }}
-        </mat-option>
-      </mat-select>
-      <mat-label>{{ label$ }}</mat-label>
-      <mat-error *ngIf="fieldControl.invalid">
-        {{ getErrorMessage() }}
-      </mat-error>
-    </mat-form-field>
-  </div>
-  <div [formGroup]="formGroup$" *ngIf="type === 'searchbox'">
-    <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
-      <mat-label>{{ label$ }}</mat-label>
-      <input
-        matInput
-        [placeholder]="placeholder"
-        [formControl]="fieldControl"
-        [value]="value$"
-        [required]="bRequired$"
-        [matAutocomplete]="auto"
-        [attr.data-test-id]="testId"
-        (change)="fieldOnChange($event)"
-        (blur)="fieldOnBlur($event)"
-      />
-      <mat-autocomplete #auto="matAutocomplete">
-        <mat-option *ngFor="let opt of options$" [value]="opt.value">
-          <span>{{ opt.value }}</span>
-        </mat-option>
-      </mat-autocomplete>
-      <mat-error *ngIf="fieldControl.invalid">
-        {{ getErrorMessage() }}
-      </mat-error>
-    </mat-form-field>
+  <div *ngIf="displayMode$; else noDisplayMode">
+    <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
   </div>
+  <ng-template #noDisplayMode>
+    <div *ngIf="type === 'operator'">
+      <component-mapper name="Operator" [props]="{ pConn$ }"></component-mapper>
+    </div>
+    <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+        <mat-select [required]="bRequired$" [formControl]="fieldControl" [attr.data-test-id]="testId" (selectionChange)="fieldOnChange($event)">
+          <mat-option *ngFor="let opt of options$" [value]="opt.key">
+            {{ opt.value }}
+          </mat-option>
+        </mat-select>
+        <mat-label>{{ label$ }}</mat-label>
+        <mat-error *ngIf="fieldControl.invalid">
+          {{ getErrorMessage() }}
+        </mat-error>
+      </mat-form-field>
+    </div>
+    <div [formGroup]="formGroup$" *ngIf="type === 'searchbox'">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+        <mat-label>{{ label$ }}</mat-label>
+        <input
+          matInput
+          [placeholder]="placeholder"
+          [formControl]="fieldControl"
+          [required]="bRequired$"
+          [matAutocomplete]="auto"
+          [attr.data-test-id]="testId"
+          (blur)="fieldOnBlur($event)"
+        />
+        <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption (optionSelected)="optionChanged($event)">
+          <mat-option *ngFor="let opt of filteredOptions | async" [value]="opt.value">
+            <span>{{ opt.value }}</span>
+          </mat-option>
+        </mat-autocomplete>
+        <mat-error *ngIf="fieldControl.invalid">
+          {{ getErrorMessage() }}
+        </mat-error>
+      </mat-form-field>
+    </div>
+  </ng-template>
 </div>

package/lib/field/user-reference/user-reference.component.ts

@@ -10,6 +10,8 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { map, Observable, startWith } from 'rxjs';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 const OPERATORS_DP = 'D_pyGetOperatorsForCurrentApplication';
 const DROPDOWN_LIST = 'Drop-down list';
@@ -21,6 +23,7 @@ interface UserReferenceProps extends Omit<PConnFieldProps, 'value'> {
   value?: any;
   showAsFormattedText?: boolean;
   additionalProps?: object;
+  onRecordChange?: any;
 }
 
 @Component({
@@ -57,27 +60,38 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   testId: string;
   helperText: string;
   placeholder: string;
+  displayMode$?: string;
+  filteredOptions: Observable<any[]>;
+  filterValue = '';
 
   fieldControl = new FormControl('', null);
+  actionsApi: Object;
+  propName: string;
+  onRecordChange: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
     private utils: Utils
   ) {}
 
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 
     this.controlName$ = this.angularPConnect.getComponentID(this);
 
-    this.checkAndUpdate();
+    await this.checkAndUpdate();
 
     if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
-      this.fieldControl.setValue(this.value$);
+      this.fieldControl.setValue(this.getValue(this.value$));
     }
+
+    this.filteredOptions = this.fieldControl.valueChanges.pipe(
+      startWith(this.getValue(this.value$) || ''),
+      map(value => this._filter(value || ''))
+    );
   }
 
   ngOnDestroy() {
@@ -105,44 +119,67 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   }
 
   // Callback passed when subscribing to store change
-  onStateChange() {
-    this.checkAndUpdate();
+  async onStateChange() {
+    await this.checkAndUpdate();
+  }
+
+  private _filter(value: string): string[] {
+    const filterVal = (value || this.filterValue).toLowerCase();
+    return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal));
   }
 
-  checkAndUpdate() {
+  isUserNameAvailable = user => {
+    return typeof user === 'object' && user !== null && user.userName;
+  };
+
+  getUserName = user => {
+    return user.userName;
+  };
+
+  getValue = user => {
+    if (this.displayAs$ === DROPDOWN_LIST) {
+      return this.utils.getUserId(user) || this.getUserName(user);
+    }
+    return this.isUserNameAvailable(user) ? this.getUserName(user) : this.utils.getUserId(user);
+  };
+
+  async checkAndUpdate() {
     // Should always check the bridge to see if the component should
     // update itself (re-render)
     const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
 
     // ONLY call updateSelf when the component should update
     if (bUpdateSelf) {
-      this.updateSelf();
+      await this.updateSelf();
     }
   }
 
-  updateSelf() {
+  async updateSelf() {
     const props = this.pConn$.getConfigProps() as UserReferenceProps;
     this.testId = props.testId;
+    this.onRecordChange = props?.onRecordChange;
 
-    const { label, displayAs, value, showAsFormattedText, helperText, placeholder } = props;
+    const { label, displayAs, value, showAsFormattedText, helperText, placeholder, displayMode } = props;
 
     this.label$ = label;
     this.showAsFormattedText$ = showAsFormattedText;
     this.displayAs$ = displayAs;
     this.helperText = helperText;
     this.placeholder = placeholder || '';
+    this.displayMode$ = displayMode;
+
+    this.value$ = this.pConn$.getConfigProps()?.value;
 
     const { readOnly, required } = props;
     [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
 
-    const isUserNameAvailable = user => {
-      return typeof user === 'object' && user !== null && user.userName;
-    };
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
 
     this.userID$ = this.utils.getUserId(value);
 
     if (this.userID$ && this.bReadonly$ && this.showAsFormattedText$) {
-      if (isUserNameAvailable(value)) {
+      if (this.isUserNameAvailable(value)) {
         this.userName$ = value.userName;
       } else {
         // if same user ref field is referred in view as editable & readonly formatted text
@@ -158,18 +195,18 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
       const queryPayload = {
         dataViewName: OPERATORS_DP
       };
-      PCore.getRestClient()
-        .invokeRestApi('getListData', { queryPayload } as any, '') // 3rd arg empty string until typedef marked correctly
-        .then((resp: any) => {
+      try {
+        const resp = await PCore.getRestClient().invokeRestApi('getListData', { queryPayload }, ''); // 3rd arg empty string until typedef marked correctly
+        if (resp?.data) {
           const ddDataSource = resp.data.data.map(listItem => ({
             key: listItem.pyUserIdentifier,
             value: listItem.pyUserName
           }));
           this.options$ = ddDataSource;
-        })
-        .catch(err => {
-          console.log(err);
-        });
+        }
+      } catch (error) {
+        console.log(error);
+      }
     }
   }
 
@@ -177,7 +214,16 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     if (event?.value === 'Select') {
       event.value = '';
     }
-    this.angularPConnectData.actions?.onChange(this, event);
+    if (event?.target) {
+      this.filterValue = (event.target as HTMLInputElement).value;
+    }
+    const value = event?.value;
+    handleEvent(this.actionsApi, 'change', this.propName, value);
+  }
+
+  optionChanged(event: any) {
+    const value = event?.option?.value;
+    handleEvent(this.actionsApi, 'change', this.propName, value);
   }
 
   fieldOnBlur(event: any) {
@@ -186,12 +232,12 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
       const index = this.options$?.findIndex(element => element.value === event.target.value);
       key = index > -1 ? (key = this.options$[index].key) : event.target.value;
     }
-
-    const eve = {
-      value: key
-    };
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onChange(this, eve);
+    const value = key;
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    if (this.onRecordChange) {
+      event.target.value = value;
+      this.onRecordChange(event);
+    }
   }
 
   getErrorMessage() {

package/lib/infra/Containers/base-components/flow-container-base.component.ts

@@ -0,0 +1,22 @@
+import { Injector } from '@angular/core';
+import { getPConnectOfActiveContainerItem } from './helper';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+
+export class FlowContainerBaseComponent {
+  // For interaction with AngularPConnect
+  protected angularPConnectData: AngularPConnectData = {};
+  protected angularPConnect;
+
+  constructor(injector: Injector) {
+    this.angularPConnect = injector.get(AngularPConnectService);
+  }
+
+  getPConnectOfActiveContainerItem(parentPConnect) {
+    const routingInfo = this.angularPConnect.getComponentProp(this, 'routingInfo');
+    const isAssignmentView = this.angularPConnect.getComponentProp(this, 'isAssignmentView');
+    return getPConnectOfActiveContainerItem(routingInfo, {
+      isAssignmentView,
+      parentPConnect
+    });
+  }
+}

package/lib/infra/Containers/base-components/helper.ts

@@ -0,0 +1,89 @@
+const processRootViewDetails = (rootView, containerItem, options) => {
+  const {
+    config: { context: viewContext, name: viewName }
+  } = rootView;
+  const { context: containerContext } = containerItem;
+  const { parentPConnect } = options;
+  let resolvedViewName = viewName;
+  let resolvedViewContext = viewContext;
+
+  const isAnnotedViewName = PCore.getAnnotationUtils().isProperty(viewName);
+  const isAnnotedViewContext = PCore.getAnnotationUtils().isProperty(viewContext);
+
+  // resolving annoted view context
+  if (isAnnotedViewContext) {
+    const viewContextProperty = PCore.getAnnotationUtils().getPropertyName(viewContext);
+    resolvedViewContext = PCore.getStoreValue(
+      `.${viewContextProperty}`,
+      viewContextProperty.startsWith('.') ? parentPConnect.getPageReference() : '',
+      containerContext
+    );
+  }
+
+  if (!resolvedViewContext) {
+    resolvedViewContext = parentPConnect.getPageReference();
+  }
+
+  // resolving annoted view name
+  if (isAnnotedViewName) {
+    const viewNameProperty = PCore.getAnnotationUtils().getPropertyName(viewName);
+    resolvedViewName = PCore.getStoreValue(`.${viewNameProperty}`, resolvedViewContext, containerContext);
+  }
+
+  /* Special case where context and viewname are dynamic values
+    Use case - split for each shape
+    Ex - (caseInfo.content.SCRequestWorkQueues[1]):context --> .pyViewName:viewName
+  */
+  if (isAnnotedViewName && isAnnotedViewContext && resolvedViewName !== '') {
+    /* Allow context processor to resolve view and context when both are dynamic */
+    resolvedViewName = viewName;
+    resolvedViewContext = viewContext;
+  }
+
+  return {
+    viewName: resolvedViewName,
+    viewContext: resolvedViewContext
+  };
+};
+
+export const getPConnectOfActiveContainerItem = (containerInfo, options) => {
+  const { accessedOrder, items } = containerInfo;
+  const { isAssignmentView = false, parentPConnect } = options;
+  const containerName = parentPConnect.getContainerName();
+  const { CONTAINER_NAMES } = PCore.getContainerUtils();
+  const { CREATE_DETAILS_VIEW_NAME } = PCore.getConstants();
+
+  if (accessedOrder && items) {
+    const activeContainerItemKey = accessedOrder[accessedOrder.length - 1];
+
+    if (items[activeContainerItemKey] && items[activeContainerItemKey].view && Object.keys(items[activeContainerItemKey].view).length > 0) {
+      const activeContainerItem = items[activeContainerItemKey];
+      const target = activeContainerItemKey.substring(0, activeContainerItemKey.lastIndexOf('_'));
+
+      const { view: rootView, context } = activeContainerItem;
+      const { viewName, viewContext } = processRootViewDetails(rootView, activeContainerItem, { parentPConnect });
+
+      if (!viewName) return null;
+
+      const config = {
+        meta: rootView,
+        options: {
+          context,
+          pageReference: viewContext || parentPConnect.getPageReference(),
+          containerName,
+          containerItemID: activeContainerItemKey,
+          parentPageReference: parentPConnect.getPageReference(),
+          hasForm:
+            isAssignmentView ||
+            containerName === CONTAINER_NAMES.WORKAREA ||
+            containerName === CONTAINER_NAMES.MODAL ||
+            viewName === CREATE_DETAILS_VIEW_NAME,
+          target
+        }
+      };
+
+      return PCore.createPConnect(config).getPConnect();
+    }
+  }
+  return null;
+};

package/lib/infra/Containers/flow-container/flow-container.component.html

@@ -8,21 +8,26 @@
     </div>
     <div *ngIf="todo_showTodo$">
       <component-mapper
+        *ngIf="pConnectOfActiveContainerItem"
         name="Todo"
         [props]="{
-          pConn$: todo_pConn$,
+          pConn$: pConnectOfActiveContainerItem,
           caseInfoID$: todo_caseInfoID$,
           datasource$: todo_datasource$,
           showTodoList$: todo_showTodoList$,
           headerText$: todo_headerText$,
           type$: 'TODO',
           context$: todo_context$,
-          itemKey$: itemKey$
+          isConfirm: true
         }"
       ></component-mapper>
     </div>
     <div *ngIf="!todo_showTodo$">
-      <component-mapper name="Assignment" [props]="{ pConn$, formGroup$, arChildren$, itemKey$ }"></component-mapper>
+      <component-mapper
+        *ngIf="pConnectOfActiveContainerItem"
+        name="Assignment"
+        [props]="{ pConn$: pConnectOfActiveContainerItem, formGroup$, arChildren$, itemKey$ }"
+      ></component-mapper>
     </div>
   </div>
   <div *ngIf="bHasCaseMessages$">
@@ -33,7 +38,7 @@
       </div>
     </mat-card>
   </div>
-  <div *ngIf="bShowBanner && bShowConfirm">
+  <div *ngIf="bShowBanner && bShowConfirm && confirm_pconn">
     <component-mapper name="View" [props]="{ formGroup$, pConn$: confirm_pconn }"></component-mapper>
   </div>
 </div>