@pega/dx-component-builder-sdk 23.1.11 → 23.1.12

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/list-utility/list-utility.component.html

@@ -0,0 +1,32 @@
+<div style="text-align: left">
+  <div class="psdk-utility">
+    <div class="header">
+      <div class="header-icon">
+        <img class="psdk-utility-svg-icon" src="{{ headerSvgIcon$ }}" />
+      </div>
+      <div class="header-text">{{ name$ }}</div>
+      <div class="psdk-utility-count" id="attachments-count">{{ count$ }}</div>
+      <div style="flex-grow: 1"></div>
+      <div class="header-icon">
+        <button mat-icon-button [matMenuTriggerFor]="utilityMenu">
+          <img class="psdk-utility-card-actions-svg-icon" src="{{ settingsSvgIcon$ }}" />
+        </button>
+        <mat-menu #utilityMenu="matMenu" overlapTrigger="false">
+          <ng-container *ngFor="let action of arActions$">
+            <button mat-menu-item (click)="action.onClick()">{{ action.text }}</button>
+          </ng-container>
+        </mat-menu>
+      </div>
+    </div>
+    <div class="psdk-utiltiy-divider"></div>
+    <br />
+    <mat-spinner *ngIf="bLoading$" class="progress-spinner" diameter="50"></mat-spinner>
+    <div *ngIf="count$ == 0" class="message">{{ noItemsMessage$ }}</div>
+    <div *ngIf="count$ > 0" class="psdk-utility-items">
+      <component-mapper name="SummaryList" [props]="{ arItems$, menuIconOverrideAction$ }"></component-mapper>
+    </div>
+    <div class="psdk-utility-view-all">
+      <button *ngIf="count$ > 3" mat-button color="primary" (click)="onViewAll$.onClick()">View all</button>
+    </div>
+  </div>
+</div>

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/list-utility/list-utility.component.scss

@@ -0,0 +1,133 @@
+.progress-spinner {
+  text-align: center;
+  position: absolute;
+  top: 40%;
+  left: 40%;
+}
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}
+
+.psdk-utility-divider {
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
+}
+
+.psdk-utility-view-all {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.psdk-utility-count {
+  background: var(--app-primary-light-color);
+  border-radius: calc(1.125 * 0.5rem);
+  color: var(--app-inverse-form-color);
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: bold;
+  text-align: center;
+  width: 1.125rem;
+
+  vertical-align: top;
+  margin: 0 0 0.313rem 1rem;
+}
+
+.psdk-utility .header-text {
+  font-size: 1rem;
+  font-weight: bold;
+  padding-bottom: 0.3125rem;
+  text-align: left;
+  display: inline-block;
+}
+
+.psdk-utility .header-icon {
+  display: inline-block;
+}
+
+.psdk-utility {
+  width: 100%;
+  padding: 0.625rem 0rem;
+  text-align: left;
+  background-color: var(--app-form-color);
+  border-radius: 0.6125rem;
+  margin: 0.3125rem 0rem;
+  position: relative;
+}
+.psdk-utility .header {
+  text-align: left;
+  display: flex;
+  align-items: center;
+}
+
+.psdk-utility-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+}
+
+.psdk-settings-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  filter: var(--app-primary-color-filter);
+}
+
+.psdk-utility .message {
+  text-align: center;
+}
+
+.psdk-utility-card {
+  display: flex;
+  flex-direction: row;
+  padding: 0.25rem 0rem 0.25rem 0.25rem;
+}
+
+.psdk-utility-card-icon {
+  flex-grow: 1;
+  max-width: 2.813rem;
+}
+
+.psdk-utility-card-svg-icon {
+  width: 2.5rem;
+  display: inline-block;
+}
+
+.psdk-utility-card-main {
+  flex-grow: 2;
+  max-width: 16.563rem;
+}
+
+.psdk-utility-card-main-primary-url {
+  color: var(--app-primary-color);
+}
+
+.psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary {
+  padding-left: 0px;
+}
+
+.psdk-utility-card-main-primary-label {
+  font-weight: bold;
+}
+
+.psdk-utility-card-actions {
+  flex-grow: 1;
+  text-align: right;
+}
+
+.psdk-utility-card-action-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+}
+
+.psdk-utility-card-actions-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  vertical-align: middle;
+  filter: var(--app-primary-color-filter);
+}
+
+.psdk-utility-card-action-actions-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  vertical-align: bottom;
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/list-utility/list-utility.component.spec.ts

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

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/list-utility/list-utility.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { Utils } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-list-utility',
+  templateUrl: './list-utility.component.html',
+  styleUrls: ['./list-utility.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, MatMenuModule, MatProgressSpinnerModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class ListUtilityComponent implements OnInit {
+  @Input() name$ = '';
+  @Input() icon$ = '';
+  @Input() bLoading$ = false;
+  @Input() count$ = 0;
+  @Input() arActions$: any[] = [];
+  @Input() arItems$: any[] = [];
+  @Input() menuIconOverrideAction$: any[] = [];
+
+  // function to all
+  @Input() onViewAll$: any;
+
+  headerSvgIcon$: string;
+  settingsSvgIcon$: string;
+
+  noItemsMessage$ = 'No Items';
+
+  imagePath$ = '';
+
+  constructor(private utils: Utils) {}
+
+  ngOnInit(): void {
+    this.imagePath$ = this.getIconPath();
+
+    this.headerSvgIcon$ = this.utils.getImageSrc(this.icon$, this.utils.getSDKStaticContentUrl());
+    this.settingsSvgIcon$ = this.utils.getImageSrc('more', this.utils.getSDKStaticContentUrl());
+  }
+
+  getIconPath(): string {
+    return `${this.utils.getSDKStaticContentUrl()}assets/icons/`;
+  }
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/todo/todo.component.html

@@ -0,0 +1,47 @@
+<div class="psdk-todo">
+  <div class="psdk-todo-header">
+    <div *ngIf="showTodoList$" class="psdk-avatar">{{ this.currentUserInitials$ }}</div>
+    <div id="worklist" class="psdk-todo-text">{{ headerText$ }}</div>
+    <div *ngIf="showTodoList$" class="psdk-assignment-count">{{ assignmentCount$ }}</div>
+  </div>
+  <br /><br />
+  <div *ngIf="showTodoList$" class="psdk-display-divider"></div>
+
+  <div class="psdk-todo-assignments">
+    <div *ngFor="let assignment of arAssignments$">
+      <div class="psdk-todo-assignment">
+        <div class="psdk-avatar">{{ this.currentUserInitials$ }}</div>
+        <div class="psdk-todo-card">
+          <div class="psdk-todo-assignment-title">{{ getAssignmentName(assignment) }}</div>
+          <div class="psdk-todo-assignment-data">
+            <div class="psdk-todo-assignment-task">
+              Task in
+              <button class="psdk-todo-id" style="cursor: pointer" (click)="clickGo(assignment)">
+                {{ assignment.name }} {{ getID(assignment) }}
+              </button>
+              <span *ngIf="assignment.status != undefined">
+                &bull; <span class="psdk-todo-assignment-status">{{ assignment?.status }}</span>
+              </span>
+              &bull; {{ localizedVal('Urgency', localeCategory) }} {{ getPriority(assignment) }}
+            </div>
+          </div>
+        </div>
+        <div class="psdk-todo-assignment-action">
+          <button mat-flat-button color="primary" (click)="clickGo(assignment)">{{ localizedVal('Go', localeCategory) }}</button>
+        </div>
+      </div>
+      <div class="psdk-display-divider"></div>
+    </div>
+  </div>
+</div>
+
+<div *ngIf="assignmentCount$ > 3">
+  <div *ngIf="bShowMore$; else showLess" class="psdk-todo-show-more">
+    <button mat-stroked-button (click)="_showMore()">Show more</button>
+  </div>
+  <ng-template #showLess>
+    <div class="psdk-todo-show-more">
+      <button mat-stroked-button (click)="_showLess()">Show less</button>
+    </div>
+  </ng-template>
+</div>

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/todo/todo.component.scss

@@ -0,0 +1,96 @@
+.psdk-display-divider {
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
+}
+
+.psdk-todo {
+  padding: 1rem;
+  background-color: var(--app-form-color);
+  border-radius: 0.6125rem;
+  border-left: 6px solid;
+  border-left-color: var(--app-primary-color);
+}
+
+.psdk-todo-header {
+  display: inline-flex;
+}
+
+.psdk-todo-text {
+  padding: 0.5rem 0.625rem;
+  font-size: 1.1rem;
+  font-weight: bold;
+}
+
+.psdk-assignment-count {
+  background-color: var(--app-primary-light-color);
+  margin: 0.5rem;
+  border-radius: 45%;
+  padding: 0.15rem 0.4rem;
+}
+
+.psdk-todo-id {
+  color: var(--app-primary-color);
+  padding: 0;
+  cursor: pointer;
+  border: 0;
+  background-color: transparent;
+  align-items: center;
+}
+
+.psdk-avatar {
+  margin: 0rem;
+  padding: 0rem;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  max-width: 2.5rem;
+  max-height: 2.5rem;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  background: var(--app-primary-color);
+  color: var(--app-form-color);
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+
+.psdk-todo-assignment {
+  display: inline-flex;
+  width: 100%;
+  padding: 0.625rem 0rem;
+}
+
+.psdk-todo-assignment-data {
+  display: inline-flex;
+}
+
+.psdk-todo-assignment-status {
+  background-color: var(--app-neutral-light-color);
+  border-radius: 0.125rem;
+  color: var(--app-assignment-status-color);
+  font-size: 0.75rem;
+  font-weight: bold;
+  line-height: calc(0.5rem * 2.5);
+  height: calc(0.5rem * 2.5);
+  padding: 0 0.5rem;
+  text-transform: uppercase;
+}
+
+.psdk-todo-assignment-task {
+  color: var(--app-neutral-color);
+}
+
+.psdk-todo-assignment-action {
+  display: inline-flex;
+}
+
+.psdk-todo-card {
+  width: 100%;
+  padding-left: 0.625rem;
+}
+
+.psdk-todo-show-more {
+  width: 100%;
+  text-align: center;
+  margin-top: 0.625rem;
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/todo/todo.component.spec.ts

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

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/todo/todo.component.ts

@@ -0,0 +1,265 @@
+import { Component, OnInit, Input, NgZone, OnDestroy, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
+import { ProgressSpinnerService } from '@pega/angular-sdk-components';
+import { ErrorMessagesService } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+
+interface ToDoProps {
+  // If any, enter additional props that only exist on this component
+  datasource?: any;
+  headerText?: string;
+  myWorkList?: any;
+  label?: string;
+  readOnly?: boolean;
+}
+
+@Component({
+  selector: 'app-todo',
+  templateUrl: './todo.component.html',
+  styleUrls: ['./todo.component.scss'],
+  providers: [Utils],
+  standalone: true,
+  imports: [CommonModule, MatButtonModule]
+})
+export class TodoComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() caseInfoID$: string;
+  @Input() datasource$: any;
+  @Input() headerText$?: string;
+  @Input() showTodoList$ = true;
+  @Input() target$: string;
+  @Input() type$ = 'worklist';
+  @Input() context$: string;
+  @Input() myWorkList$: any;
+  @Input() isConfirm;
+
+  configProps$: ToDoProps;
+  currentUser$: string;
+  currentUserInitials$ = '--';
+  assignmentCount$: number;
+  bShowMore$ = true;
+  arAssignments$: any[];
+  assignmentsSource$: any;
+  CONSTS: typeof publicConstants;
+  bLogging = true;
+  localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  localeCategory = 'Todo';
+  showlessLocalizedValue = this.localizedVal('show_less', 'CosmosFields');
+  showMoreLocalizedValue = this.localizedVal('show_more', 'CosmosFields');
+
+  constructor(
+    private psService: ProgressSpinnerService,
+    private erService: ErrorMessagesService,
+    private ngZone: NgZone,
+    private utils: Utils
+  ) {}
+
+  ngOnInit() {
+    this.CONSTS = PCore.getConstants();
+    const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED }: any = PCore.getEvents().getCaseEvent();
+
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL,
+      () => {
+        this.updateToDo();
+      },
+      'updateToDo'
+    );
+
+    PCore.getPubSubUtils().subscribe(
+      CREATE_STAGE_SAVED,
+      () => {
+        this.updateList();
+      },
+      CREATE_STAGE_SAVED
+    );
+
+    PCore.getPubSubUtils().subscribe(
+      CREATE_STAGE_DELETED,
+      () => {
+        this.updateList();
+      },
+      CREATE_STAGE_DELETED
+    );
+
+    this.updateToDo();
+  }
+
+  ngOnDestroy() {
+    const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED }: any = PCore.getEvents().getCaseEvent();
+
+    PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, 'updateToDo');
+
+    PCore.getPubSubUtils().unsubscribe(CREATE_STAGE_SAVED, CREATE_STAGE_SAVED);
+
+    PCore.getPubSubUtils().unsubscribe(CREATE_STAGE_DELETED, CREATE_STAGE_DELETED);
+  }
+
+  ngOnChanges() {
+    // don't update until we'va had an init
+    if (PCore) {
+      this.updateToDo();
+    }
+  }
+
+  updateWorkList(key) {
+    (
+      PCore.getDataApiUtils()
+        // @ts-ignore - 2nd parameter "payload" and 3rd parameter "context" should be optional in getData method
+        .getData(key) as Promise<any>
+    )
+      .then(responseData => {
+        const dataObject = {};
+        dataObject[key] = {
+          pxResults: responseData.data.data
+        };
+
+        this.pConn$.updateState(dataObject);
+        this.updateToDo();
+      })
+      .catch(err => {
+        console.error(err?.stack);
+      });
+  }
+
+  updateList() {
+    this.updateWorkList('D_pyMyWorkList');
+  }
+
+  updateToDo() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ToDoProps;
+
+    if (this.headerText$ == undefined) {
+      this.headerText$ = this.configProps$.headerText;
+    }
+
+    this.datasource$ = this.configProps$.datasource ? this.configProps$.datasource : this.datasource$;
+    this.myWorkList$ = this.configProps$.myWorkList ? this.configProps$.myWorkList : this.myWorkList$;
+
+    this.assignmentsSource$ = this.datasource$?.source || this.myWorkList$?.source;
+
+    if (this.showTodoList$) {
+      this.assignmentCount$ = this.assignmentsSource$ != null ? this.assignmentsSource$.length : 0;
+      this.arAssignments$ = this.topThreeAssignments(this.assignmentsSource$);
+    } else {
+      // get caseInfoId assignment.
+      // eslint-disable-next-line no-lonely-if
+      if (this.caseInfoID$ != undefined) {
+        this.arAssignments$ = this.getCaseInfoAssignment(this.assignmentsSource$, this.caseInfoID$);
+      }
+    }
+
+    this.currentUser$ = PCore.getEnvironmentInfo().getOperatorName();
+    this.currentUserInitials$ = this.utils.getInitials(this.currentUser$);
+  }
+
+  getID(assignment: any) {
+    if (assignment.value) {
+      const refKey = assignment.value;
+      return refKey.substring(refKey.lastIndexOf(' ') + 1);
+    }
+    const refKey = assignment.ID;
+    const arKeys = refKey.split('!')[0].split(' ');
+    return arKeys[2];
+  }
+
+  topThreeAssignments(assignmentsSource: any[]): any[] {
+    return Array.isArray(assignmentsSource) ? assignmentsSource.slice(0, 3) : [];
+  }
+
+  getAssignmentId(assignment) {
+    return this.type$ === this.CONSTS.TODO ? assignment.ID : assignment.id;
+  }
+
+  getPriority(assignment) {
+    return this.type$ === this.CONSTS.TODO ? assignment.urgency : assignment.priority;
+  }
+
+  getAssignmentName(assignment) {
+    return this.type$ === this.CONSTS.TODO ? assignment.name : assignment.stepName;
+  }
+
+  initAssignments(): any[] {
+    if (this.assignmentsSource$) {
+      this.assignmentCount$ = this.assignmentsSource$.length;
+      return this.topThreeAssignments(this.assignmentsSource$);
+    }
+    // turn off todolist
+    return [];
+  }
+
+  getCaseInfoAssignment(assignmentsSource: any[], caseInfoID: string) {
+    const result: any[] = [];
+    for (const source of assignmentsSource) {
+      if (source.ID.indexOf(caseInfoID) >= 0) {
+        const listRow = JSON.parse(JSON.stringify(source));
+        // urgency becomes priority
+        listRow.priority = listRow.urgency || undefined;
+        // mimic regular list
+        listRow.id = listRow.ID || undefined;
+        result.push(listRow);
+      }
+    }
+    return result;
+  }
+
+  _showMore() {
+    this.ngZone.run(() => {
+      this.bShowMore$ = false;
+      this.arAssignments$ = this.assignmentsSource$;
+    });
+  }
+
+  _showLess() {
+    this.ngZone.run(() => {
+      this.bShowMore$ = true;
+
+      this.arAssignments$ = this.topThreeAssignments(this.assignmentsSource$);
+    });
+  }
+
+  isChildCase(assignment) {
+    return assignment.isChild;
+  }
+
+  clickGo(assignment) {
+    const id = this.getAssignmentId(assignment);
+    let { classname = '' } = assignment;
+    const sTarget = this.pConn$.getContainerName();
+    const sTargetContainerName = sTarget;
+
+    const options: any = { containerName: sTargetContainerName };
+
+    if (classname === null || classname === '') {
+      classname = this.pConn$.getCaseInfo().getClassName();
+    }
+
+    if (sTarget === 'workarea') {
+      options.isActionFromToDoList = true;
+      options.target = '';
+      options.context = null;
+      options.isChild = this.isChildCase(assignment);
+    } else {
+      options.isActionFromToDoList = false;
+      options.target = sTarget;
+    }
+
+    this.psService.sendMessage(true);
+
+    this.pConn$
+      .getActionsApi()
+      .openAssignment(id, classname, options)
+      .then(() => {
+        this.psService.sendMessage(false);
+        if (this.bLogging) {
+          console.log(`openAssignment completed`);
+        }
+      })
+      .catch(() => {
+        this.psService.sendMessage(false);
+        this.erService.sendMessage('show', 'Failed to open');
+      });
+  }
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/utility/utility.component.html

@@ -0,0 +1 @@
+<component-mapper name="MaterialUtility" [props]="{ headerText$, headerIcon$, headerIconUrl$, noItemsMessage$ }"></component-mapper>

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/utility/utility.component.spec.ts

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