@pega/angular-sdk-overrides 0.23.1

package/lib/template/confirmation/confirmation.component.ts

@@ -0,0 +1,91 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { getToDoAssignments } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface ConfirmationProps {
+  // If any, enter additional props that only exist on this component
+  datasource: { source: any };
+  label: string;
+  showLabel: boolean;
+  showTasks: boolean;
+}
+
+@Component({
+  selector: 'app-confirmation',
+  templateUrl: './confirmation.component.html',
+  styleUrls: ['./confirmation.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class ConfirmationComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: ConfirmationProps;
+
+  rootInfo: any;
+  datasource: any;
+  showTasks: any;
+  detailProps: any;
+  toDoList: any;
+  label: string;
+  CONSTS: typeof publicConstants;
+  showDetails: boolean;
+  showConfirmView = true;
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.CONSTS = PCore.getConstants();
+    const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(this.pConn$.getTarget());
+    this.rootInfo = PCore.getContainerUtils().getContainerItemData(this.pConn$.getTarget(), activeContainerItemID);
+    this.checkAndUpdate();
+  }
+
+  ngOnDestroy() {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  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();
+    }
+  }
+
+  updateSelf() {
+    const theConfigProps = this.pConn$.getConfigProps() as ConfirmationProps;
+    this.datasource = theConfigProps?.datasource;
+    this.showTasks = theConfigProps?.showTasks;
+    this.label = theConfigProps?.label;
+    // Get the inherited props from the parent to determine label settings
+    // Not using whatsNext at the moment, need to figure out the use of it
+    // const whatsNext = this.datasource?.source;
+    // const items = whatsNext?.length > 0 ? whatsNext.map((item) => item.label) : '';
+    // const todoProps = { ...theConfigProps, renderTodoInConfirm: true };
+    this.toDoList = getToDoAssignments(this.pConn$);
+    this.detailProps = { ...theConfigProps, showLabel: false };
+    this.showDetails = this.pConn$?.getChildren()?.[0]?.getPConnect()?.getChildren()?.length > 0;
+  }
+
+  onConfirmViewClose() {
+    this.showConfirmView = false;
+    PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW, this.rootInfo);
+  }
+}

package/lib/template/data-reference/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "DataReference",
+  "description": "Data Reference Template",
+  "type": "Template",
+  "icon": "DataReference.svg",
+  "subtype": "DATAVIEW",
+  "properties": []
+}

package/lib/template/data-reference/data-reference.component.html

@@ -0,0 +1,13 @@
+<div *ngIf="childrenToRender && childrenToRender.length > 0">
+  <div *ngIf="!displayMultiRef">
+    <div *ngFor="let kid of childrenToRender">
+      <component-mapper [name]="kid?.getPConnect().getComponentName()" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+    </div>
+  </div>
+  <div *ngIf="displaySingleRef">
+    <component-mapper name="SingleReferenceReadOnly" [props]="{ pConn$: firstChildPConnect() }"></component-mapper>
+  </div>
+  <div *ngIf="displayMultiRef">
+    <component-mapper name="MultiReferenceReadOnly" [props]="{ pConn$: firstChildPConnect() }"></component-mapper>
+  </div>
+</div>

package/lib/template/data-reference/data-reference.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { DataReferenceComponent } from './data-reference.component';
+
+describe('DataReferenceComponent', () => {
+  let component: DataReferenceComponent;
+  let fixture: ComponentFixture<DataReferenceComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [DataReferenceComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DataReferenceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/lib/template/data-reference/data-reference.component.ts

@@ -0,0 +1,275 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
+
+@Component({
+  selector: 'app-data-reference',
+  templateUrl: './data-reference.component.html',
+  styleUrls: ['./data-reference.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class DataReferenceComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+
+  arFields$: any[] = [];
+  referenceType = '';
+  selectionMode = '';
+  parameters;
+  hideLabel = false;
+  childrenToRender: any[] = [];
+  dropDownDataSource = '';
+  isDisplayModeEnabled = false;
+  propsToUse: any = {};
+  rawViewMetadata: any = {};
+  viewName = '';
+  firstChildMeta: any = {};
+  canBeChangedInReviewMode = false;
+  propName = '';
+  firstChildPConnect;
+  children;
+  displaySingleRef: boolean;
+  displayMultiRef: boolean;
+  refList: any;
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.children = this.pConn$.getChildren() as any[];
+    this.updateSelf();
+    if (this.firstChildMeta?.type === 'Dropdown' && this.rawViewMetadata.config?.parameters) {
+      const { value, key, text } = this.firstChildMeta.config.datasource.fields;
+      (
+        PCore.getDataApiUtils().getData(
+          this.refList,
+          {
+            dataViewParameters: this.parameters
+          } as any,
+          ''
+        ) as Promise<any>
+      )
+        .then(res => {
+          if (res.data.data !== null) {
+            const ddDataSource = res.data.data
+              .map(listItem => ({
+                key: listItem[key.split(' .', 2)[1]],
+                text: listItem[text.split(' .', 2)[1]],
+                value: listItem[value.split(' .', 2)[1]]
+              }))
+              .filter(item => item.key);
+            // Filtering out undefined entries that will break preview
+            this.dropDownDataSource = ddDataSource;
+            this.updateSelf();
+          } else {
+            const ddDataSource: any = [];
+            this.dropDownDataSource = ddDataSource;
+          }
+        })
+        .catch(() => {
+          return Promise.resolve({
+            data: { data: [] }
+          });
+        });
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    // 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();
+    }
+  }
+
+  updateSelf() {
+    // Update properties based on configProps
+    const theConfigProps: any = this.pConn$.getConfigProps();
+    this.updatePropertiesFromProps(theConfigProps);
+
+    const displayAs = theConfigProps.displayAs;
+    const displayMode = theConfigProps.displayMode;
+    this.rawViewMetadata = this.pConn$.getRawMetadata();
+    this.viewName = this.rawViewMetadata.name;
+    this.firstChildMeta = this.rawViewMetadata.children[0];
+    this.refList = this.rawViewMetadata.config.referenceList;
+    this.canBeChangedInReviewMode = theConfigProps.allowAndPersistChangesInReviewMode && (displayAs === 'autocomplete' || displayAs === 'dropdown');
+    // this.childrenToRender = this.children;
+    this.isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL'].includes(displayMode);
+
+    if (this.firstChildMeta?.type !== 'Region') {
+      this.firstChildPConnect = this.pConn$.getChildren()[0].getPConnect;
+
+      /* remove refresh When condition from those old view so that it will not be used for runtime */
+      if (this.firstChildMeta.config?.readOnly) {
+        delete this.firstChildMeta.config.readOnly;
+      }
+      if (this.firstChildMeta?.type === 'Dropdown') {
+        this.firstChildMeta.config.datasource.source = this.rawViewMetadata.config?.parameters
+          ? this.dropDownDataSource
+          : '@DATASOURCE '.concat(this.refList).concat('.pxResults');
+      } else if (this.firstChildMeta?.type === 'AutoComplete') {
+        this.firstChildMeta.config.datasource = this.refList;
+
+        /* Insert the parameters to the component only if present */
+        if (this.rawViewMetadata.config?.parameters) {
+          this.firstChildMeta.config.parameters = this.parameters;
+        }
+      }
+      // set displayMode conditionally
+      if (!this.canBeChangedInReviewMode) {
+        this.firstChildMeta.config.displayMode = displayMode;
+      }
+      if (this.firstChildMeta.type === 'SimpleTableSelect' && this.selectionMode === SELECTION_MODE.MULTI) {
+        this.propName = PCore.getAnnotationUtils().getPropertyName(this.firstChildMeta.config.selectionList);
+      } else {
+        this.propName = PCore.getAnnotationUtils().getPropertyName(this.firstChildMeta.config.value);
+      }
+
+      this.generateChildrenToRender();
+    }
+  }
+
+  updatePropertiesFromProps(theConfigProps) {
+    const label = theConfigProps.label;
+    const showLabel = theConfigProps.showLabel;
+    this.referenceType = theConfigProps.referenceType;
+    this.selectionMode = theConfigProps.selectionMode;
+    this.parameters = theConfigProps.parameters;
+    this.hideLabel = theConfigProps.hideLabel;
+
+    this.propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
+    if (this.propsToUse.showLabel === false) {
+      this.propsToUse.label = '';
+    }
+  }
+
+  generateChildrenToRender() {
+    const theRecreatedFirstChild = this.recreatedFirstChild();
+    const viewsRegion = this.rawViewMetadata.children[1];
+    if (viewsRegion?.name === 'Views' && viewsRegion.children.length) {
+      this.childrenToRender = [theRecreatedFirstChild, ...this.children.slice(1)];
+    } else {
+      this.childrenToRender = [theRecreatedFirstChild];
+    }
+  }
+
+  handleSelection(event) {
+    const caseKey = this.pConn$.getCaseInfo().getKey();
+    const refreshOptions = { autoDetectRefresh: true };
+    // @ts-ignore - second parameter pageReference for getValue method should be optional
+    if (this.canBeChangedInReviewMode && this.pConn$.getValue('__currentPageTabViewName')) {
+      // @ts-ignore - second parameter pageReference for getValue method should be optional
+      this.pConn$.getActionsApi().refreshCaseView(caseKey, this.pConn$.getValue('__currentPageTabViewName'), null, refreshOptions);
+      PCore.getDeferLoadManager().refreshActiveComponents(this.pConn$.getContextName());
+    } else {
+      const pgRef = this.pConn$.getPageReference().replace('caseInfo.content', '');
+      this.pConn$.getActionsApi().refreshCaseView(caseKey, this.viewName, pgRef, refreshOptions);
+    }
+
+    // AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value
+    const propValue = event?.id || event?.target?.value;
+    if (propValue && this.canBeChangedInReviewMode && this.isDisplayModeEnabled) {
+      (PCore.getDataApiUtils().getCaseEditLock(caseKey, '') as Promise<any>).then(caseResponse => {
+        const pageTokens = this.pConn$.getPageReference().replace('caseInfo.content', '').split('.');
+        let curr = {};
+        const commitData = curr;
+
+        pageTokens.forEach(el => {
+          if (el !== '') {
+            curr[el] = {};
+            curr = curr[el];
+          }
+        });
+
+        // expecting format like {Customer: {pyID:"C-100"}}
+        const propArr = this.propName.split('.');
+        propArr.forEach((element, idx) => {
+          if (idx + 1 === propArr.length) {
+            curr[element] = propValue;
+          } else {
+            curr[element] = {};
+            curr = curr[element];
+          }
+        });
+
+        (
+          PCore.getCaseUtils().updateCaseEditFieldsData(
+            caseKey,
+            { [caseKey]: commitData },
+            caseResponse.headers.etag,
+            this.pConn$.getContextName()
+          ) as Promise<any>
+        ).then(response => {
+          PCore.getContainerUtils().updateParentLastUpdateTime(this.pConn$.getContextName(), response.data.data.caseInfo.lastUpdateTime);
+          PCore.getContainerUtils().updateRelatedContextEtag(this.pConn$.getContextName(), response.headers.etag);
+        });
+      });
+    }
+  }
+
+  // Re-create first child with overridden props
+  // Memoized child in order to stop unmount and remount of the child component when data reference
+  // rerenders without any actual change
+  recreatedFirstChild() {
+    const { type, config } = this.firstChildMeta;
+    if (this.firstChildMeta?.type !== 'Region') {
+      this.pConn$.clearErrorMessages({
+        property: this.propName,
+        category: '',
+        context: ''
+      } as any);
+      if (!this.canBeChangedInReviewMode && this.isDisplayModeEnabled && this.selectionMode === SELECTION_MODE.SINGLE) {
+        this.displaySingleRef = true;
+      }
+
+      if (this.isDisplayModeEnabled && this.selectionMode === SELECTION_MODE.MULTI) {
+        this.displayMultiRef = true;
+      }
+
+      // In the case of a datasource with parameters you cannot load the dropdown before the parameters
+      if (type === 'Dropdown' && this.rawViewMetadata.config?.parameters && this.dropDownDataSource === null) {
+        return null;
+      }
+
+      return this.firstChildPConnect().createComponent({
+        type,
+        config: {
+          ...config,
+          required: this.propsToUse.required,
+          visibility: this.propsToUse.visibility,
+          disabled: this.propsToUse.disabled,
+          label: this.propsToUse.label,
+          viewName: this.pConn$.getCurrentView(),
+          parameters: this.rawViewMetadata.config.parameters,
+          readOnly: false,
+          localeReference: this.rawViewMetadata.config.localeReference,
+          ...(this.selectionMode === SELECTION_MODE.SINGLE ? { referenceType: this.referenceType } : ''),
+          dataRelationshipContext:
+            this.rawViewMetadata.config.contextClass && this.rawViewMetadata.config.name ? this.rawViewMetadata.config.name : null,
+          hideLabel: this.hideLabel,
+          onRecordChange: this.handleSelection.bind(this)
+        }
+      });
+    }
+  }
+}

package/lib/template/default-form/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "DefaultForm",
+  "label": "Default form",
+  "description": "DefaultForm Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": []
+}

package/lib/template/default-form/default-form.component.html

@@ -0,0 +1,19 @@
+<!-- When adding a component here, add the same component in 'region' template as well -->
+<div *ngIf="!NO_HEADER_TEMPLATES.includes(template) && showLabel">
+  <div class="template-title-container">{{ label }}</div>
+</div>
+<div *ngIf="instructions" class="psdk-default-form-instruction-text">
+  <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
+</div>
+<div [className]="divClass$">
+  <div *ngFor="let kid of arChildren$" [ngClass]="{ 'grid-column': kid.getPConnect().getComponentName() === 'View' }">
+    <component-mapper
+      [name]="kid.getPConnect().getComponentName()"
+      [props]="{
+        pConn$: kid.getPConnect(),
+        formGroup$: formGroup$
+      }"
+      errorMsg="DefaultForm wants component not yet available: {{ kid.getPConnect().getComponentName() }}"
+    ></component-mapper>
+  </div>
+</div>

package/lib/template/default-form/default-form.component.scss

@@ -0,0 +1,38 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+.psdk-default-form-one-column {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: calc(1rem);
+}
+
+.psdk-default-form-two-column {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: calc(1rem);
+}
+
+.psdk-default-form-three-column {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: calc(1rem);
+}
+
+.psdk-default-form-two-column .grid-column {
+  grid-column: 1 / span 2;
+}
+
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
+}
+
+.template-title-container {
+  font-size: calc(0.9375rem);
+  font-weight: 600;
+  margin: 10px 0px;
+}
+
+.psdk-default-form-instruction-text {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}

package/lib/template/default-form/default-form.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { DefaultFormComponent } from './default-form.component';
+
+describe('DefaultFormComponent', () => {
+  let component: DefaultFormComponent;
+  let fixture: ComponentFixture<DefaultFormComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [DefaultFormComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DefaultFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/lib/template/default-form/default-form.component.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { ReferenceComponent } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { TemplateUtils } from '@pega/angular-sdk-components';
+
+interface DefaultFormProps {
+  // If any, enter additional props that only exist on this component
+  NumCols: string;
+  template: string;
+  instructions: string;
+}
+
+@Component({
+  selector: 'app-default-form',
+  templateUrl: './default-form.component.html',
+  styleUrls: ['./default-form.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class DefaultFormComponent implements OnInit {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  arChildren$: any[];
+  divClass$: string;
+  template: any;
+  showLabel: any;
+  label: any;
+  instructions: string;
+
+  NO_HEADER_TEMPLATES = [
+    'SubTabs',
+    'SimpleTable',
+    'Details',
+    'DetailsTwoColumn',
+    'DetailsThreeColumn',
+    'NarrowWideDetails',
+    'WideNarrowDetails',
+    'Confirmation'
+  ];
+
+  constructor(private templateUtils: TemplateUtils) {}
+
+  ngOnInit(): void {
+    const configProps = this.pConn$.getConfigProps() as DefaultFormProps;
+    this.template = configProps?.template;
+    const propToUse: any = { ...this.pConn$.getInheritedProps() };
+    this.showLabel = propToUse?.showLabel;
+    this.label = propToUse?.label;
+    const kids = this.pConn$.getChildren() as any[];
+    this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
+
+    const numCols = configProps.NumCols ? configProps.NumCols : '1';
+    switch (numCols) {
+      case '1':
+        this.divClass$ = 'psdk-default-form-one-column';
+        break;
+      case '2':
+        this.divClass$ = 'psdk-default-form-two-column';
+        break;
+      case '3':
+        this.divClass$ = 'psdk-default-form-three-column';
+        break;
+      default:
+        this.divClass$ = 'psdk-default-form-one-column';
+        break;
+    }
+
+    // repoint children before getting templateArray
+    // Children may contain 'reference' component, so we need to
+    //  normalize them
+    this.arChildren$ = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+  }
+}

package/lib/template/details/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "Details",
+  "label": "Details (One column)",
+  "description": "Details (One column)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "icon": "OneColumnDetails.svg",
+  "properties": []
+}

package/lib/template/details/details.component.html

@@ -0,0 +1,3 @@
+<div>
+  <component-mapper name="MaterialDetails" [props]="{ arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"></component-mapper>
+</div>

package/lib/template/details/details.component.scss

@@ -0,0 +1,7 @@
+.psdk-grid-filter {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}

package/lib/template/details/details.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailsComponent } from './details.component';
+
+describe('DetailsComponent', () => {
+  let component: DetailsComponent;
+  let fixture: ComponentFixture<DetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DetailsComponent]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});