@pega/dx-component-builder-sdk 0.8.1 → 0.8.3

package/tests/assets/components/SDK-Angular/createAll/override-sdk/infra/stages/stages.component.ts

@@ -0,0 +1,79 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { interval } from 'rxjs';
+import { AngularPConnectService } from '@pega/angular-sdk-library';
+import { Utils } from '@pega/angular-sdk-library';
+
+declare const window: any;
+
+@Component({
+  selector: 'app-stages',
+  templateUrl: './stages.component.html',
+  styleUrls: ['./stages.component.scss'],
+  standalone: true,
+  imports: [CommonModule]
+})
+export class StagesComponent implements OnInit {
+  @Input() pConn$: any;
+
+  // Used with AngularPConnect
+  angularPConnectData: any = {};
+  PCore$: any;
+  configProps$: Object;
+
+  arStageResults$: Array<any>;
+  lastStage$: any;
+  checkSvgIcon$: string;
+
+  constructor(private angularPConnect: AngularPConnectService, private utils: Utils) {}
+
+  ngOnInit(): void {
+    if (!this.PCore$) {
+      this.PCore$ = window.PCore;
+    }
+
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    const imagePath = this.utils.getIconPath(this.utils.getSDKStaticContentUrl());
+    this.checkSvgIcon$ = this.utils.getImageSrc('check', this.utils.getSDKStaticContentUrl());
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  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() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+
+    let timer = interval(50).subscribe(() => {
+      timer.unsubscribe();
+
+      let arStages = this.angularPConnect.getComponentProp(this, 'stages');
+
+      //this.stageResults$ = this.configProps$["stages"];
+      if (arStages != null) {
+        this.arStageResults$ = arStages;
+        this.lastStage$ = this.arStageResults$[this.arStageResults$.length - 1];
+      }
+    });
+  }
+}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/infra/view/view.component.html

@@ -0,0 +1,38 @@
+<div *ngIf="configProps$['visibility'] !== false" class="ng-view-top">
+  <div *ngIf="showLabel$ && label$ && templateName$ !== 'SimpleTable' && templateName$ !== 'DefaultForm'" class="template-title-container">
+    <span>{{ label$ }}</span>
+  </div>
+
+  <ng-container *ngIf="templateName$; else noTemplate">
+    <div>
+      <component-mapper
+        [name]="templateName$"
+        [props]="{formGroup$, pConn$, displayOnlyFA$}"
+        errorMsg="View template not recognized: [{{ templateName$ }}]"
+      ></component-mapper>
+    </div>
+  </ng-container>
+
+  <ng-template #noTemplate>
+    <div *ngIf="displayOnlyFA$; else displayAll">
+      <div *ngFor="let kid of arChildren$">
+        <div [ngSwitch]="kid.getPConnect().getComponentName()">
+          <component-mapper
+            [name]="kid.getPConnect().getComponentName()"
+            [props]="{ pConn$: kid.getPConnect() }"
+            errorMsg="View Missing (displayOnlyFA): {{ kid.getPConnect().getComponentName() }}"
+          ></component-mapper>
+        </div>
+      </div>
+    </div>
+    <ng-template #displayAll>
+      <div *ngFor="let kid of arChildren$">
+        <component-mapper
+          [name]="kid.getPConnect().getComponentName()"
+          [props]="{ pConn$: kid.getPConnect() }"
+          errorMsg="View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}"
+        ></component-mapper>
+      </div>
+    </ng-template>
+  </ng-template>
+</div>

package/tests/assets/components/SDK-Angular/createAll/override-sdk/infra/view/view.component.scss

@@ -0,0 +1,16 @@
+h3 {
+  margin-left: 0.8rem;
+}
+
+.ng-view-top {
+  padding: 0;
+}
+
+.template-title-container{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: calc(0.9375rem);
+  font-weight: 600;
+  margin-bottom: 1rem;
+}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/infra/view/view.component.spec.ts

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

package/tests/assets/components/SDK-Angular/createAll/override-sdk/infra/view/view.component.ts

@@ -0,0 +1,144 @@
+import { Component, OnInit, Input, forwardRef, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { AngularPConnectService } from '@pega/angular-sdk-library';
+import { Utils } from '@pega/angular-sdk-library';
+import { getAllFields } from '@pega/angular-sdk-library';
+import { ReferenceComponent } from '@pega/angular-sdk-library';
+import { ComponentMapperComponent } from '@pega/angular-sdk-library';
+
+/**
+ * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
+ * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
+ * is totally at your own risk.
+ */
+
+@Component({
+  selector: 'app-view',
+  templateUrl: './view.component.html',
+  styleUrls: ['./view.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class ViewComponent implements OnInit {
+  @Input() pConn$: any;
+  @Input() formGroup$: FormGroup;
+  @Input() displayOnlyFA$: boolean;
+  //@Input() updateToken$: number;
+
+  angularPConnectData: any = {};
+
+  configProps$: Object;
+  inheritedProps$: Object;
+  arChildren$: Array<any>;
+  templateName$: string;
+  title$: string = '';
+  label$: string = '';
+  showLabel$: boolean = true;
+
+  constructor(private angularPConnect: AngularPConnectService, private utils: Utils) {}
+
+  ngOnInit() {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    this.checkAndUpdate();
+  }
+
+  // Callback passed when subscribing to store change
+  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();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    const { pConn$ } = changes;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.checkAndUpdate();
+    }
+  }
+
+  updateSelf() {
+    if (this.angularPConnect.getComponentID(this) === undefined) {
+      return;
+    }
+
+    //debugger;
+
+    // normalize this.pConn$ in case it contains a 'reference'
+    this.pConn$ = ReferenceComponent.normalizePConn(this.pConn$);
+
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    this.inheritedProps$ = this.pConn$.getInheritedProps();
+
+    // NOTE: this.configProps$['visibility'] is used in view.component.ts such that
+    //  the View will only be rendered when this.configProps$['visibility'] is false.
+    //  It WILL render if true or undefined.
+
+    this.templateName$ = 'template' in this.configProps$ ? (this.configProps$['template'] as string) : '';
+    this.title$ = 'title' in this.configProps$ ? (this.configProps$['title'] as string) : '';
+    this.label$ = 'label' in this.configProps$ ? (this.configProps$['label'] as string) : '';
+    this.showLabel$ = 'showLabel' in this.configProps$ ? (this.configProps$['showLabel'] as boolean) : this.showLabel$;
+    // label & showLabel within inheritedProps takes precedence over configProps
+    this.label$ = 'label' in this.inheritedProps$ ? (this.inheritedProps$['label'] as string) : this.label$;
+    this.showLabel$ = 'showLabel' in this.inheritedProps$ ? (this.inheritedProps$['showLabel'] as boolean) : this.showLabel$;
+    // children may have a 'reference' so normalize the children array
+    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+    // was:  this.arChildren$ = this.pConn$.getChildren();
+
+    // debug
+    // let  kidList: string = "";
+    // for (let i in this.arChildren$) {
+    //   kidList = kidList.concat(this.arChildren$[i].getPConnect().getComponentName()).concat(",");
+    // }
+    //console.log("-->view update: " + this.angularPConnect.getComponentID(this) + ", template: " + this.templateName$ + ", kids: " + kidList);
+  }
+
+  // JA - adapting additionalProps from Nebula/Constellation version which uses static methods
+  //    on the component classes stored in PComponents (that Angular doesn't have)...
+  additionalProps(state: any, getPConnect: any) {
+    let propObj = {};
+
+    // We already have the template name in this.templateName$
+    if (this.templateName$ !== '') {
+      let allFields = {};
+
+      // These uses are adapted from Nebula/Constellation CaseSummary.additionalProps
+      switch (this.templateName$) {
+        case 'CaseSummary':
+          allFields = getAllFields(getPConnect);
+          // eslint-disable-next-line no-case-declarations
+          const unresFields = {
+            primaryFields: allFields[0],
+            secondaryFields: allFields[1]
+          };
+          propObj = getPConnect.resolveConfigProps(unresFields);
+          break;
+
+        case 'Details':
+          allFields = getAllFields(getPConnect);
+          propObj = { fields: allFields[0] };
+          break;
+      }
+    }
+
+    return propObj;
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/_template.md

@@ -0,0 +1,6 @@
+# The **override-sdk/template** directory
+
+The **src/components/override-sdk/template** directory contains the code for **template** components for which you want to override the default implementation for use with the **Angular SDK**.
+
+When you run the **npm run  create** command to override the default implementation of a **template** component, the generated code that you can use as a
+starting point for your component development will be placed in type-specific and component-specific folders in **src/components/override-sdk/template**.

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/app-shell/app-shell.component.html

@@ -0,0 +1,10 @@
+<div class="appshell-top" *ngIf="bShowAppShell$">
+  <component-mapper name="NavBar" [props]="{ pConn$, appName$, pages$, caseTypes$ }"></component-mapper>
+  <div class="appshell-main">
+    <div *ngFor="let kid of arChildren$">
+      <div *ngIf="kid.getPConnect().getComponentName() == 'ViewContainer'">
+        <component-mapper name="ViewContainer" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+      </div>
+    </div>
+  </div>
+</div>

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/app-shell/app-shell.component.scss

@@ -0,0 +1,42 @@
+@import '@pega/angular-sdk-library/_shared/styles.scss';
+
+.appshell-top {
+  display: flex;
+  background-color: $app-background-color;
+}
+
+.appshell-main {
+  position: relative;
+  margin-left: $app-nav-width;
+  min-height: 100vh;
+  display: block;
+  width: 100%;
+}
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}
+
+.progress-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: whitesmoke;
+  position: fixed;
+  z-index: 999;
+  top: 0rem;
+  left: 0rem;
+  opacity: 0.5;
+}
+
+.progress-spinner {
+  text-align: center;
+}
+
+::ng-deep snack-bar-container.snackbar-newline {
+  white-space: pre-line;
+}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/app-shell/app-shell.component.spec.ts

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

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/app-shell/app-shell.component.ts

@@ -0,0 +1,163 @@
+import { Component, OnInit, Input, NgZone, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
+import { Subscription } from 'rxjs';
+import { AngularPConnectService } from '@pega/angular-sdk-library';
+import { ErrorMessagesService } from '@pega/angular-sdk-library';
+import { ComponentMapperComponent } from '@pega/angular-sdk-library';
+
+@Component({
+  selector: 'app-app-shell',
+  templateUrl: './app-shell.component.html',
+  styleUrls: ['./app-shell.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatSnackBarModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class AppShellComponent implements OnInit {
+  @Input() pConn$: any;
+
+  // For interaction with AngularPConnect
+  angularPConnectData: any = {};
+  configProps$: Object;
+
+  pages$: Array<any>;
+  caseTypes$: Array<any>;
+  arChildren$: Array<any>;
+  bShowAppShell$: boolean = false;
+  appName$: string = 'PEGA';
+  errorMessage: any;
+  errorMessagesSubscription: Subscription;
+  sErrorMessages: string = '';
+  snackBarRef: any;
+  bOkDisplayError: boolean = false;
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private erService: ErrorMessagesService,
+    private snackBar: MatSnackBar,
+    private ngZone: NgZone
+  ) {}
+
+  ngOnInit() {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    // Then, continue on with other initialization
+
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+
+    // making a copy, so can add info
+    this.pages$ = this.configProps$['pages'];
+
+    if (this.pages$) {
+      this.bShowAppShell$ = true;
+    }
+    this.caseTypes$ = this.configProps$['caseTypes'];
+
+    this.arChildren$ = this.pConn$.getChildren();
+
+    // handle showing and hiding the progress spinner
+    this.errorMessagesSubscription = this.erService.getMessage().subscribe((message) => {
+      this.errorMessage = message;
+
+      this.showDismissErrorMessages(this.errorMessage);
+    });
+
+    // cannot call checkAndUpdate becasue first time through, will call updateSelf and that is incorrect (causes issues).
+    // however, need angularPConnect to be initialized with currentProps for future updates, so calling shouldComponentUpdate directly
+    // without checking to update here in init, will initialize and this is correct
+    this.angularPConnect.shouldComponentUpdate(this);
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  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() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+
+    this.ngZone.run(() => {
+      // making a copy, so can add info
+      this.pages$ = this.configProps$['pages'];
+
+      if (this.pages$) {
+        this.bShowAppShell$ = true;
+      }
+
+      this.caseTypes$ = this.configProps$['caseTypes'];
+      this.arChildren$ = this.pConn$.getChildren();
+    });
+  }
+
+  // fpr show/hiding error messages in the SnackBar component
+  showDismissErrorMessages(errorMessages: any) {
+    switch (errorMessages.action) {
+      case 'update':
+        // won't show unless publish is turned on
+        // eslint-disable-next-line @typescript-eslint/prefer-includes
+        if (this.sErrorMessages.indexOf(errorMessages.actionMessage) < 0) {
+          this.sErrorMessages = this.sErrorMessages.concat(errorMessages.actionMessage).concat('\n');
+
+          if (this.bOkDisplayError) {
+            let config = { panelClass: ['snackbar-newline'] };
+            this.snackBarRef = this.snackBar.open(this.sErrorMessages, 'Ok', config);
+          }
+        }
+        break;
+      case 'show':
+        // add error message if not in the list
+        // won't show unless publish is turned on
+        // eslint-disable-next-line @typescript-eslint/prefer-includes
+        if (this.sErrorMessages.indexOf(errorMessages.actionMessage) < 0) {
+          this.sErrorMessages = this.sErrorMessages.concat(errorMessages.actionMessage).concat('\n');
+        }
+
+        if (this.bOkDisplayError) {
+          let config = { panelClass: ['snackbar-newline'] };
+          this.snackBarRef = this.snackBar.open(this.sErrorMessages, 'Ok', config);
+        }
+        // this.snackBarRef.afterDismissed().subscribe( info => {
+        //     this.sErrorMessages = "";
+        //   }
+        // )
+        break;
+      case 'dismiss':
+        // closes snack bar
+        // turns publish off
+        // clears out errors
+        // should be called to dimiss and at "cancel"
+        if (this.snackBarRef != null) {
+          this.snackBarRef.dismiss();
+          this.sErrorMessages = '';
+          this.bOkDisplayError = false;
+        }
+        break;
+      case 'publish':
+        // allows errors to be shown, clears out existing ones
+        // should be turned on at "submit" (finishAssignment, nextAssignment, etc.)
+
+        this.bOkDisplayError = true;
+        this.sErrorMessages = '';
+
+        break;
+    }
+  }
+}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/case-summary/case-summary.component.html

@@ -0,0 +1 @@
+<component-mapper name="CaseSummaryFields" [props]="{ status$, bShowStatus$, primaryFields$, secondaryFields$ }"></component-mapper>

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/case-summary/case-summary.component.scss

@@ -0,0 +1,44 @@
+@import '@pega/angular-sdk-library/_shared/styles.scss';
+
+.psdk-case-summary-info-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+.psdk-case-summary-data {
+  flex: 1;
+}
+
+.psdk-case-view-label {
+  font-size: 1rem;
+  display: block;
+  transform: translateY(0.2em) scale(0.75) perspective(100px) translateZ(0.001px);
+  -ms-transform: translateY(0.2em) scale(0.75);
+  width: 133.33333%;
+}
+
+.psdk-label-readonly {
+  font-size: 1rem;
+  display: block;
+  transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
+  -ms-transform: translateY(-1.28125em) scale(0.75);
+  width: 133.33333%;
+}
+
+.psdk-data-readonly {
+  padding-top: 0.625rem;
+  width: 100%;
+}
+
+.psdk-status {
+  background-color: $app-primary-color;
+  color: white;
+  padding: 0;
+  margin-top: 0.625rem;
+  width: fit-content;
+}
+
+::ng-deep .mat-mdc-form-field-infix {
+  width: auto;
+}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/case-summary/case-summary.component.spec.ts

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