@pega/sdk 0.0.12 → 0.0.14

package/templates/angular-sdk-reference/src/components/infra/assignment/assignment.component.ts

@@ -0,0 +1,206 @@
+/**
+ * Assignment — renders the current assignment step and its action buttons.
+ *
+ * Receives assignment children (the form to fill) and action buttons from the
+ * case's actionButtons metadata. Delegates form rendering to children and
+ * handles submit/cancel/save/navigate actions via the actionsAPI.
+ *
+ * In the component hierarchy, FlowContainer renders Assignment explicitly,
+ * passing routed view children and itemKey. Assignment wraps those children
+ * with action buttons below — matching the reference angular-sdk pattern.
+ *
+ * Pattern reference: angular-sdk-components AssignmentComponent + sdk-react Assignment
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, Input, ChangeDetectorRef, NgZone } from '@angular/core';
+import type { OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PConnectBridgeComponent } from '@pega/sdk-angular';
+
+@Component({
+  selector: 'pega-assignment',
+  standalone: true,
+  imports: [CommonModule, PConnectBridgeComponent],
+  template: `
+    <div *ngIf="bReady">
+      <!-- Render assignment children (the form) -->
+      <div *ngFor="let child of childGetters">
+        <pconnect-bridge [getPConnect]="child"></pconnect-bridge>
+      </div>
+
+      <!-- Action buttons -->
+      <div
+        *ngIf="arMainButtons.length > 0 || arSecondaryButtons.length > 0"
+        style="display: flex; gap: 0.5rem; margin-top: 1rem; justify-content: flex-end;"
+      >
+        <button
+          *ngFor="let btn of arSecondaryButtons"
+          (click)="buttonPress(btn.jsAction, 'secondary')"
+          style="padding: 0.5rem 1rem; border: 1px solid #d1d5db; border-radius: 0.375rem; background: white; cursor: pointer;"
+        >
+          {{ btn.name }}
+        </button>
+        <button
+          *ngFor="let btn of arMainButtons"
+          (click)="buttonPress(btn.jsAction, 'primary')"
+          style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #2563eb; color: white; cursor: pointer;"
+        >
+          {{ btn.name }}
+        </button>
+      </div>
+    </div>
+  `,
+})
+export class AssignmentComponent implements OnInit, OnDestroy {
+  @Input() props: any;
+
+  bReady = false;
+  childGetters: Array<() => typeof PConnect> = [];
+  arMainButtons: any[] = [];
+  arSecondaryButtons: any[] = [];
+
+  private pConn: any;
+  private actionsAPI: any;
+  private itemKey = '';
+  private storeUnsub: (() => void) | undefined;
+
+  constructor(
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.pConn = this.props.getPConnect();
+    this.itemKey = this.props.itemKey ?? '';
+
+    this.initComponent();
+
+    // Subscribe to store for updates (action buttons may change between steps)
+    this.storeUnsub = PCore.getStore().subscribe(() => {
+      this.updateSelf();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.storeUnsub?.();
+  }
+
+  private initComponent(): void {
+    const baseContext = this.pConn.getContextName?.() ?? '';
+    const acName = this.pConn.getContainerName?.() ?? '';
+    if (!this.itemKey) {
+      this.itemKey = `${baseContext}/${acName}`;
+    }
+
+    this.pConn.isBoundToState();
+    this.updateSelf();
+  }
+
+  private updateSelf(): void {
+    // Children come from FlowContainer's arChildren prop (the routed view PConnect),
+    // matching the reference pattern where FlowContainer passes arChildren$ to Assignment.
+    const arChildrenFromProps = this.props.arChildren;
+    if (arChildrenFromProps && arChildrenFromProps.length > 0) {
+      this.childGetters = arChildrenFromProps.map((child: any) => {
+        return child.getPConnect ?? (() => child);
+      });
+    } else {
+      // Fallback: get children from pConn
+      const children = this.pConn.getChildren?.() ?? [];
+      this.childGetters = children.map((child: any) => {
+        return child.getPConnect ?? (() => child);
+      });
+    }
+
+    // Update itemKey from props if changed
+    if (this.props.itemKey) {
+      this.itemKey = this.props.itemKey;
+    }
+
+    // Extract action buttons from case data.
+    // Reference pattern: Assignment gets caseInfo from its own pConn's data object,
+    // and actionsAPI from the first child work item's pConn.
+    this.extractActionButtons();
+
+    this.ngZone.run(() => {
+      this.bReady = true;
+      this.cdr.detectChanges();
+    });
+  }
+
+  private extractActionButtons(): void {
+    // Get action buttons from the Assignment's own pConn case data
+    const oData = this.pConn.getDataObject?.() ?? {};
+    const caseInfo = oData?.caseInfo;
+
+    if (caseInfo?.actionButtons) {
+      this.arMainButtons = caseInfo.actionButtons.main ?? [];
+      this.arSecondaryButtons = caseInfo.actionButtons.secondary ?? [];
+    }
+
+    // Get actionsAPI from the Assignment's own pConn (not from child).
+    // The Assignment pConn has the correct context for finishAssignment/cancelAssignment.
+    try {
+      this.actionsAPI = this.pConn.getActionsApi?.() ?? null;
+    } catch {
+      // actionsApi may not be available
+    }
+  }
+
+  buttonPress(sAction: string, sButtonType: string): void {
+    if (!this.actionsAPI) return;
+
+    const finishAssignment = this.actionsAPI.finishAssignment?.bind(
+      this.actionsAPI,
+    );
+    const cancelAssignment = this.actionsAPI.cancelAssignment?.bind(
+      this.actionsAPI,
+    );
+    const navigateToStep = this.actionsAPI.navigateToStep?.bind(
+      this.actionsAPI,
+    );
+    const saveAssignment = this.actionsAPI.saveAssignment?.bind(
+      this.actionsAPI,
+    );
+
+    if (sButtonType === 'secondary') {
+      switch (sAction) {
+        case 'navigateToStep':
+          navigateToStep?.('previous', this.itemKey)?.catch(() => {
+            console.error('Assignment: Navigation failed');
+          });
+          break;
+        case 'saveAssignment':
+          saveAssignment?.(this.itemKey)?.catch(() => {
+            console.error('Assignment: Save failed');
+          });
+          break;
+        case 'cancelAssignment': {
+          const { PUB_SUB_EVENTS } = PCore.getConstants() as any;
+          const { publish } = PCore.getPubSubUtils();
+          cancelAssignment?.(this.itemKey, false)
+            ?.then((data: any) => {
+              publish(PUB_SUB_EVENTS.EVENT_CANCEL, data);
+            })
+            ?.catch(() => {
+              console.error('Assignment: Cancel failed');
+            });
+          break;
+        }
+        default:
+          break;
+      }
+    } else if (sButtonType === 'primary') {
+      switch (sAction) {
+        case 'finishAssignment':
+          finishAssignment?.(this.itemKey)?.catch(() => {
+            console.error('Assignment: Submit failed');
+          });
+          break;
+        default:
+          break;
+      }
+    }
+  }
+}

package/templates/angular-sdk-reference/src/components/infra/case-summary/case-summary.component.ts

@@ -0,0 +1,76 @@
+/**
+ * CaseSummary — renders case summary header with status badge.
+ *
+ * Pattern reference: angular-sdk-components CaseSummaryComponent + sdk-react CaseSummary
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, Input, ChangeDetectorRef, NgZone } from '@angular/core';
+import type { OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import type { Unsubscribe } from '@pega/sdk-angular';
+
+@Component({
+  selector: 'pega-case-summary',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div
+      style="display: flex; justify-content: space-between; align-items: center;
+                padding: 0.75rem 1rem; background: #f9fafb; border-radius: 0.375rem; margin-bottom: 1rem;"
+    >
+      <span style="font-weight: 600; font-size: 0.875rem;">
+        {{ header || 'Case' }}
+      </span>
+      <span
+        *ngIf="status"
+        style="font-size: 0.75rem; padding: 0.25rem 0.5rem; background: #dbeafe; color: #1d4ed8; border-radius: 1rem;"
+      >
+        {{ status }}
+      </span>
+    </div>
+  `,
+})
+export class CaseSummaryComponent implements OnInit, OnDestroy {
+  @Input() props: any;
+
+  header = '';
+  status = '';
+
+  private pConn: any;
+  private observable: any;
+  private storeUnsub: Unsubscribe | undefined;
+
+  constructor(
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    // @ts-ignore
+    const { PConnectObservable } = PCore.getInitialiser().getSdkCore() as any;
+
+    this.pConn = this.props.getPConnect();
+    this.observable = new PConnectObservable(this.pConn);
+    this.updateSelf();
+
+    this.storeUnsub = this.observable.subscribe(() => {
+      this.updateSelf();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.storeUnsub?.();
+    this.observable?.destroy();
+  }
+
+  private updateSelf(): void {
+    const configProps = this.pConn.resolveConfigProps(this.pConn.getConfigProps());
+    this.header = configProps.header ?? '';
+    this.status = configProps.status ?? '';
+
+    this.ngZone.run(() => {
+      this.cdr.detectChanges();
+    });
+  }
+}

package/templates/angular-sdk-reference/src/components/infra/case-view/case-view.component.ts

@@ -0,0 +1,114 @@
+/**
+ * CaseView — renders the full case view with header, actions menu, and tabs/content.
+ *
+ * Simplified version that shows heading, status, and renders children.
+ *
+ * Pattern reference: angular-sdk-components CaseViewComponent + sdk-react CaseView
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, Input, ChangeDetectorRef, NgZone } from '@angular/core';
+import type { OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import type { Unsubscribe } from '@pega/sdk-angular';
+import { PConnectBridgeComponent } from '@pega/sdk-angular';
+
+@Component({
+  selector: 'pega-case-view',
+  standalone: true,
+  imports: [CommonModule, PConnectBridgeComponent],
+  template: `
+    <div>
+      <div *ngIf="heading" style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">
+        {{ heading }}
+      </div>
+      <div *ngIf="id" style="font-size: 0.75rem; color: #6b7280; margin-bottom: 1rem;">
+        {{ id }}
+      </div>
+
+      <!-- Case summary -->
+      <div *ngIf="caseSummaryGetPConnect">
+        <pconnect-bridge [getPConnect]="caseSummaryGetPConnect"></pconnect-bridge>
+      </div>
+
+      <!-- Children (tabs, stages, etc.) -->
+      <div *ngFor="let getter of childGetters">
+        <pconnect-bridge [getPConnect]="getter"></pconnect-bridge>
+      </div>
+    </div>
+  `,
+})
+export class CaseViewComponent implements OnInit, OnDestroy {
+  @Input() props: any;
+
+  heading = '';
+  id = '';
+  status = '';
+  caseSummaryGetPConnect: (() => typeof PConnect) | null = null;
+  childGetters: Array<() => typeof PConnect> = [];
+
+  private pConn: any;
+  private observable: any;
+  private storeUnsub: Unsubscribe | undefined;
+
+  constructor(
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.pConn = this.props.getPConnect();
+
+    // @ts-ignore
+    const { PConnectObservable } = PCore.getInitialiser().getSdkCore() as any;
+    this.observable = new PConnectObservable(this.pConn);
+    this.updateSelf();
+
+    this.storeUnsub = this.observable.subscribe(() => {
+      this.updateSelf();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.storeUnsub?.();
+    this.observable?.destroy();
+  }
+
+  private updateSelf(): void {
+    const configProps = this.pConn.resolveConfigProps(this.pConn.getConfigProps());
+
+    this.heading = configProps.header ?? '';
+    this.id = configProps.subheader ?? '';
+
+    const children = this.pConn.getChildren?.() ?? [];
+
+    // First child is typically the case summary (if applicable)
+    if (children.length > 0) {
+      const firstChild = children[0];
+      const firstPConn = firstChild.getPConnect?.() ?? firstChild;
+      const firstCompName = firstPConn.getComponentName?.() ?? '';
+
+      if (firstCompName === 'CaseSummary' || firstCompName === 'CaseSummaryFields') {
+        this.caseSummaryGetPConnect = firstChild.getPConnect ?? (() => firstChild);
+        this.childGetters = children.slice(1).map((child: any) => {
+          return child.getPConnect ?? (() => child);
+        });
+      } else {
+        this.caseSummaryGetPConnect = null;
+        this.childGetters = children.map((child: any) => {
+          return child.getPConnect ?? (() => child);
+        });
+      }
+    } else {
+      this.childGetters = [];
+      this.caseSummaryGetPConnect = null;
+    }
+
+    // Update okToInitFlowContainer
+    sessionStorage.setItem('okToInitFlowContainer', 'true');
+
+    this.ngZone.run(() => {
+      this.cdr.detectChanges();
+    });
+  }
+}