@pega/dx-component-builder-sdk 24.1.10 → 24.1.12

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/navbar/navbar.component.ts

@@ -51,7 +51,8 @@ export class NavbarComponent implements OnInit, OnDestroy {
   navIcon$: string;
   localizedVal: any;
   localeCategory = 'AppShell';
-
+  localeUtils = PCore.getLocaleUtils();
+  localeReference: any;
   constructor(
     private angularPConnect: AngularPConnectService,
     private chRef: ChangeDetectorRef,
@@ -119,7 +120,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
       this.navPages$.forEach(page => {
         page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
       });
-
+      this.localeReference = this.pConn$.getValue('.pyLocaleReference');
       this.actionsAPI = this.pConn$.getActionsApi();
       this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
       this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
@@ -163,7 +164,9 @@ export class NavbarComponent implements OnInit, OnDestroy {
       containerName: 'primary',
       flowType: sFlowType || 'pyStartCase'
     };
-    this.createWork(sCaseType, actionInfo);
+    this.createWork(sCaseType, actionInfo).then(() => {
+      console.log('createWork completed');
+    });
   }
 
   navPanelLogoutClick() {

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/preview-view-container/preview-view-container.component.html

@@ -0,0 +1 @@
+<div class="psdk-preview"></div>

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/preview-view-container/preview-view-container.component.spec.ts

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

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/preview-view-container/preview-view-container.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+/**
+ * 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.
+ */
+
+// Right this is a skeleton, as Preview hasn't been implemented
+
+@Component({
+  selector: 'app-preview-view-container',
+  templateUrl: './preview-view-container.component.html',
+  styleUrls: ['./preview-view-container.component.scss'],
+  standalone: true
+})
+export class PreviewViewContainerComponent implements OnInit {
+  @Input() pConn$: typeof PConnect;
+
+  ngOnInit(): void {
+    const containerMgr: any = this.pConn$.getContainerManager();
+
+    containerMgr.initializeContainers({
+      type: 'multiple'
+    });
+  }
+
+  buildName() {
+    const context = this.pConn$.getContextName();
+    let viewContainerName = this.pConn$.getComponentName();
+
+    if (!viewContainerName) viewContainerName = '';
+    return `${context.toUpperCase()}/${viewContainerName.toUpperCase()}`;
+  }
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/root-container/root-container.component.html

@@ -0,0 +1,36 @@
+<div class="progress-box" *ngIf="bIsProgress$">
+  <mat-spinner class="progress-spinner"></mat-spinner>
+</div>
+
+<div *ngIf="bShowRoot$">
+  <div [ngSwitch]="componentName$">
+    <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ pConn$, displayOnlyFA$ }"></component-mapper>
+    <!-- <app-reference *ngSwitchCase="'reference'" [pConn$]="pConn$" [displayOnlyFA$]="displayOnlyFA$"></app-reference> -->
+    <component-mapper
+      *ngSwitchCase="'ViewContainer'"
+      name="ViewContainer"
+      [props]="{ pConn$: displayOnlyFA$ ? viewContainerPConn$ : pConn$, displayOnlyFA$ }"
+    ></component-mapper>
+    <app-hybrid-view-container *ngSwitchCase="'HybridViewContainer'" [pConn$]="pConn$" [displayOnlyFA$]="displayOnlyFA$"></app-hybrid-view-container>
+    <app-modal-view-container
+      *ngSwitchCase="'ModalViewContainer'"
+      [pConn$]="pConn$"
+      [displayOnlyFA$]="displayOnlyFA$"
+      (modalVisibleChange)="modalVisibleChanged($event)"
+    ></app-modal-view-container>
+    <div *ngSwitchCase="''"></div>
+    <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>
+  </div>
+</div>
+
+<div *ngIf="pvConn$ != null">
+  <app-preview-view-container [pConn$]="pvConn$"></app-preview-view-container>
+</div>
+
+<div *ngIf="mConn$ != null">
+  <app-modal-view-container
+    [pConn$]="mConn$"
+    [displayOnlyFA$]="displayOnlyFA$"
+    (modalVisibleChange)="modalVisibleChanged($event)"
+  ></app-modal-view-container>
+</div>

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/root-container/root-container.component.scss

@@ -0,0 +1,18 @@
+.progress-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: var(--app-background-color);
+  position: fixed;
+  z-index: 99999;
+  top: 0rem;
+  left: 0rem;
+  opacity: 0.5;
+}
+
+.progress-spinner {
+  text-align: center;
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/root-container/root-container.component.spec.ts

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

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/root-container/root-container.component.ts

@@ -0,0 +1,256 @@
+import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { interval, Subscription } from 'rxjs';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ProgressSpinnerService } from '@pega/angular-sdk-components';
+import { ReferenceComponent } from '@pega/angular-sdk-components';
+import { PreviewViewContainerComponent } from '@pega/angular-sdk-components';
+import { ModalViewContainerComponent } from '@pega/angular-sdk-components';
+import { HybridViewContainerComponent } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+/**
+ * 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.
+ */
+
+const options = { context: 'app' };
+
+@Component({
+  selector: 'app-root-container',
+  templateUrl: './root-container.component.html',
+  styleUrls: ['./root-container.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatProgressSpinnerModule,
+    HybridViewContainerComponent,
+    ModalViewContainerComponent,
+    PreviewViewContainerComponent,
+    forwardRef(() => ComponentMapperComponent)
+  ]
+})
+export class RootContainerComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() displayOnlyFA$: boolean;
+  @Input() isMashup$: boolean;
+
+  // For interaction with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+
+  componentName$ = '';
+  bIsProgress$ = false;
+
+  // preview and modalview pConn
+  pvConn$: any = null;
+  mConn$: any = null;
+
+  bShowRoot$ = true;
+
+  progressSpinnerSubscription: Subscription;
+  spinnerTimer: any = null;
+  viewContainerPConn$: any = null;
+  localizedVal: any;
+  localeCategory = 'Messages';
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private psService: ProgressSpinnerService,
+    private ngZone: NgZone
+  ) {}
+
+  ngOnInit(): void {
+    const myContext = 'app';
+
+    const { containers } = PCore.getStore().getState();
+    const items = Object.keys(containers).filter(item => item.includes('root'));
+
+    (PCore.getContainerUtils().getContainerAPI() as any).addContainerItems(items);
+
+    // add preview and modalview containers to redux
+    // keep local copies of the the pConnect that is related
+
+    const configObjPreview = PCore.createPConnect({
+      meta: {
+        type: 'PreviewViewContainer',
+        config: {
+          name: 'preview'
+        }
+      },
+      options
+    });
+
+    this.pvConn$ = configObjPreview.getPConnect();
+
+    const configObjModal = PCore.createPConnect({
+      meta: {
+        type: 'ModalViewContainer',
+        config: {
+          name: 'modal'
+        }
+      },
+      options: {
+        pageReference: 'pyPortal',
+        context: myContext
+      }
+    });
+
+    // clear out hasViewContainer
+    sessionStorage.setItem('hasViewContainer', 'false');
+
+    this.mConn$ = configObjModal.getPConnect();
+
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    // handle showing and hiding the progress spinner
+    this.progressSpinnerSubscription = this.psService.getMessage().subscribe(message => {
+      this.showHideProgress(message.show);
+    });
+    this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  }
+
+  ngOnDestroy() {
+    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);
+
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  modalVisibleChanged(isVisible) {
+    if (this.displayOnlyFA$) {
+      if (isVisible) {
+        this.bShowRoot$ = false;
+      } else {
+        this.bShowRoot$ = true;
+      }
+    }
+  }
+
+  updateSelf() {
+    // need to call this.getCurrentCompleteProps (not this.thePConn.getConfigProps)
+    //  to get full set of props that affect this component in Redux
+    const myProps: any = this.angularPConnect.getCurrentCompleteProps(this);
+
+    const renderingModes = ['portal', 'view'];
+    const noPortalMode = 'noPortal';
+
+    const { renderingMode, children, skeleton, routingInfo } = myProps;
+
+    if (routingInfo && renderingModes.includes(renderingMode)) {
+      const { accessedOrder, items } = routingInfo;
+      if (accessedOrder && items) {
+        // bootstrap loadPortal resolves to here
+        const key = accessedOrder[accessedOrder.length - 1];
+        if (items[key] && items[key].view && Object.keys(items[key].view).length > 0) {
+          const itemView = items[key].view;
+
+          const rootObject: any = PCore.createPConnect({
+            meta: itemView,
+            options: {
+              context: items[key].context
+            }
+          });
+
+          setTimeout(() => {
+            // makes sure Angular tracks these changes
+            this.ngZone.run(() => {
+              // the new rootObject may be a 'reference'. So,
+              //  normalize it to get the referencedView if that's the case
+              const theNewPConn = ReferenceComponent.normalizePConn(rootObject.getPConnect());
+              // update ComponentName$ before we update pConn$ to make sure they're in sync
+              //  when rendering...
+              this.componentName$ = theNewPConn.getComponentName();
+
+              this.pConn$ = theNewPConn;
+              // this.pConn$ = rootObject.getPConnect();
+
+              console.log(`RootContainer updated pConn$ to be: ${this.componentName$}`);
+            });
+          });
+        }
+      }
+    } else if (renderingMode === noPortalMode) {
+      // console.log(`RootContainer: renderingMode === noPortalMode: ${noPortalMode}`);
+      this.generateViewContainerForNoPortal();
+    } else if (children && children.length > 0) {
+      // haven't resolved to here
+    } else if (skeleton !== undefined) {
+      // TODO: need to update once skeletons are available;
+    }
+  }
+
+  generateViewContainerForNoPortal() {
+    // bootstrap loadMashup resolves to here
+    const arChildren = this.pConn$.getChildren() as any[];
+    if (arChildren && arChildren.length == 1) {
+      // have to have a quick timeout or get an "expressions changed" angular error
+      setTimeout(() => {
+        this.ngZone.run(() => {
+          const localPConn = arChildren[0].getPConnect();
+
+          this.componentName$ = localPConn.getComponentName();
+          if (this.componentName$ === 'ViewContainer') {
+            const configProps: any = this.pConn$.getConfigProps();
+            const viewContConfig = {
+              meta: {
+                type: 'ViewContainer',
+                config: configProps
+              },
+              options
+            };
+
+            this.viewContainerPConn$ = PCore.createPConnect(viewContConfig).getPConnect();
+          }
+          this.bShowRoot$ = true;
+        });
+      });
+    }
+  }
+
+  showHideProgress(bShow: boolean) {
+    // only show spinner after 500ms wait, so if server fast, won't see
+    if (bShow) {
+      // eslint-disable-next-line sonarjs/no-collapsible-if
+      if (!this.bIsProgress$) {
+        // makes sure Angular tracks these changes
+        if (!this.spinnerTimer || this.spinnerTimer.isStopped) {
+          this.spinnerTimer = interval(500).subscribe(() => {
+            try {
+              this.spinnerTimer.unsubscribe();
+            } catch (ex) {
+              /* empty */
+            }
+
+            this.ngZone.run(() => {
+              this.bIsProgress$ = true;
+            });
+          });
+        }
+      }
+    } else {
+      if (this.spinnerTimer && !this.spinnerTimer.isStopped) {
+        this.spinnerTimer.unsubscribe();
+      }
+
+      // don't touch bIsProgress$ unless differnent
+      if (bShow != this.bIsProgress$) {
+        // makes sure Angular tracks these changes
+        this.ngZone.run(() => {
+          this.bIsProgress$ = bShow;
+        });
+      }
+    }
+  }
+}

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

@@ -159,7 +159,7 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
      * The resolution lies in transferring this responsibility to the Reference component, eliminating the need for this code when Reference
      * component is able to handle it.
      */
-    if (this.pConn$.getPageReference().length > 'caseInfo.content'.length) {
+    if (!this.configProps$.visibility && this.pConn$.getPageReference().length > 'caseInfo.content'.length) {
       this.visibility$ = evaluateVisibility(this.pConn$);
     }
 

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/view-container/view-container.component.html

@@ -0,0 +1,31 @@
+<div class="psdk-view-container-top" id="{{ buildName$ }}">
+  <div *ngIf="isViewContainer$; else isReference">
+    <h3 *ngIf="title$ !== ''">{{ title$ }}</h3>
+    <div *ngIf="templateName$; else showChildren">
+      <component-mapper
+        [name]="templateName$"
+        [props]="{
+          pConn$: createdViewPConn$,
+          formGroup$: formGroup$,
+          displayOnlyFA$: displayOnlyFA$
+        }"
+        errorMsg="View Container missing Template {{ templateName$ }}"
+      ></component-mapper>
+    </div>
+    <ng-template #showChildren>
+      <div *ngFor="let kid of arChildren$">
+        <component-mapper
+          [name]="kid.getPConnect().getComponentName()"
+          [props]="{
+            pConn$: kid.getPConnect(),
+            displayOnlyFA$: displayOnlyFA$
+          }"
+          errorMsg="ViewContainer Missing (no template): {{ kid.getPConnect().getComponentName() }}"
+        ></component-mapper>
+      </div>
+    </ng-template>
+  </div>
+  <ng-template #isReference>
+    <component-mapper name="View" [props]="{ pConn$: viewPConn$, displayOnlyFA$ }"></component-mapper>
+  </ng-template>
+</div>

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/view-container/view-container.component.scss

@@ -0,0 +1 @@
+/* moved the view-container component styles to containerStyles file */

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/view-container/view-container.component.spec.ts

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