@pega/dx-component-builder-sdk 0.242.9 → 0.242.11

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

@@ -1,10 +1,54 @@
-import { Component, OnInit, Input, NgZone, OnDestroy, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy } 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';
+import { updateWorkList } from '@pega/angular-sdk-components';
+
+const fetchMyWorkList = (datapage, fields, numberOfRecords, includeTotalCount, context) => {
+  return PCore.getDataPageUtils()
+    .getDataAsync(
+      datapage,
+      context,
+      {},
+      {
+        pageNumber: 1,
+        pageSize: numberOfRecords
+      },
+      {
+        select: Object.keys(fields).map(key => ({ field: PCore.getAnnotationUtils().getPropertyName(fields[key]) })),
+        sortBy: [
+          { field: 'pxUrgencyAssign', type: 'DESC' },
+          { field: 'pxDeadlineTime', type: 'ASC' },
+          { field: 'pxCreateDateTime', type: 'DESC' }
+        ]
+      },
+      {
+        invalidateCache: true,
+        additionalApiParams: {
+          includeTotalCount
+        }
+      }
+    )
+    .then(response => {
+      return {
+        ...response,
+        data: (Array.isArray(response?.data) ? response.data : []).map(row =>
+          Object.keys(fields).reduce((obj, key) => {
+            obj[key] = row[PCore.getAnnotationUtils().getPropertyName(fields[key])];
+            return obj;
+          }, {})
+        )
+      };
+    });
+};
+
+const getMappedValue = value => {
+  const mappedValue = PCore.getEnvironmentInfo().getKeyMapping(value);
+  return mappedValue === null ? value : mappedValue;
+};
 
 interface ToDoProps {
   // If any, enter additional props that only exist on this component
@@ -23,7 +67,7 @@ interface ToDoProps {
   standalone: true,
   imports: [CommonModule, MatButtonModule]
 })
-export class TodoComponent implements OnInit, OnDestroy, OnChanges {
+export class TodoComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() caseInfoID$: string;
   @Input() datasource$: any;
@@ -36,9 +80,8 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
   @Input() isConfirm;
 
   configProps$: ToDoProps;
-  currentUser$: string;
+  currentUser$: string | undefined;
   currentUserInitials$ = '--';
-  assignmentCount$: number;
   bShowMore$ = true;
   arAssignments$: any[];
   assignmentsSource$: any;
@@ -49,99 +92,62 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
   showlessLocalizedValue = this.localizedVal('show_less', 'CosmosFields');
   showMoreLocalizedValue = this.localizedVal('show_more', 'CosmosFields');
   canPerform: boolean;
+  count: number;
 
   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
-    );
+    const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED } = PCore.getEvents().getCaseEvent();
 
-    PCore.getPubSubUtils().subscribe(
-      CREATE_STAGE_DELETED,
-      () => {
-        this.updateList();
-      },
-      CREATE_STAGE_DELETED
-    );
+    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();
+    const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED } = 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)
-      .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');
+    const {
+      WORK_BASKET: {
+        DATA_PAGES: { D__PY_MY_WORK_LIST }
+      }
+    } = PCore.getConstants();
+    updateWorkList(getPConnect, getMappedValue(D__PY_MY_WORK_LIST));
   }
 
   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.headerText$ = this.headerText$ || this.configProps$.headerText;
+    this.datasource$ = this.datasource$ || this.configProps$.datasource;
+    this.myWorkList$ = this.myWorkList$ || this.configProps$.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$);
+      if (this.assignmentsSource$) {
+        this.count = this.assignmentsSource$ ? this.assignmentsSource$.length : 0;
+        this.arAssignments$ = this.topThreeAssignments(this.assignmentsSource$);
+      } else if (this.myWorkList$.datapage) {
+        fetchMyWorkList(this.myWorkList$.datapage, this.pConn$.getComponentConfig()?.myWorkList.fields, 3, true, this.context$).then(responseData => {
+          this.deferLoadWorklistItems(responseData);
+        });
+      } else {
+        this.arAssignments$ = [];
+      }
     } else {
       // get caseInfoId assignment.
       // eslint-disable-next-line no-lonely-if
@@ -153,7 +159,12 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
     this.canPerform = this.arAssignments$?.[0]?.canPerform === 'true' || this.arAssignments$?.[0]?.canPerform === true;
 
     this.currentUser$ = PCore.getEnvironmentInfo().getOperatorName();
-    this.currentUserInitials$ = this.utils.getInitials(this.currentUser$);
+    this.currentUserInitials$ = this.utils.getInitials(this.currentUser$ ?? '');
+  }
+
+  deferLoadWorklistItems(responseData) {
+    this.count = responseData.totalCount;
+    this.arAssignments$ = responseData.data;
   }
 
   getID(assignment: any) {
@@ -182,15 +193,6 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
     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) {
@@ -207,18 +209,26 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   _showMore() {
-    this.ngZone.run(() => {
-      this.bShowMore$ = false;
+    this.bShowMore$ = false;
+
+    const { WORKLIST } = PCore.getConstants();
+
+    if (this.type$ === WORKLIST && this.count && this.count > this.arAssignments$.length && !this.assignmentsSource$) {
+      fetchMyWorkList(this.myWorkList$.datapage, this.pConn$.getComponentConfig()?.myWorkList.fields, this.count, false, this.context$).then(
+        response => {
+          this.arAssignments$ = response.data;
+        }
+      );
+    } else {
       this.arAssignments$ = this.assignmentsSource$;
-    });
+    }
   }
 
   _showLess() {
-    this.ngZone.run(() => {
-      this.bShowMore$ = true;
+    this.bShowMore$ = true;
+    const { WORKLIST } = PCore.getConstants();
 
-      this.arAssignments$ = this.topThreeAssignments(this.assignmentsSource$);
-    });
+    this.arAssignments$ = this.type$ === WORKLIST ? this.arAssignments$.slice(0, 3) : this.topThreeAssignments(this.assignmentsSource$);
   }
 
   isChildCase(assignment) {

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/demo.stories.tsx

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -17,7 +16,7 @@ const meta: Meta<typeof PegaDxilMyBoolean> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyBoolean>;
 
-export const BasePegaDxilMyBoolean: Story = args => {
+export const BasePegaDxilMyBoolean: Story = (args: any) => {
 
   const [value, setValue] = useState(configProps.value);
 
@@ -31,7 +30,7 @@ export const BasePegaDxilMyBoolean: Story = args => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, theValue) => {
+            updateFieldValue: (propName: string, theValue: any) => {
               setValue(theValue);
             },
             triggerFieldChange: () => { /* nothing */}

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/index.tsx

@@ -87,7 +87,6 @@ function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
         handleEvent(actions, "changeNblur", propName, event.target.checked);
       }}
       onBlur={(event: { target: { checked: any; }; }) => {
-        // @ts-ignore
         pConn.getValidationApi().validate(event.target.checked);
       }}
       data-testid={testId}
@@ -98,15 +97,17 @@ function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
 
   let displayComponent;
   if (displayMode) {
-    // @ts-ignore
     displayComponent = (
-      // @ts-ignore
       <BooleanDisplay value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
     );
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return ( <StyledPegaDxilMyBooleanWrapper> {displayComponent} </StyledPegaDxilMyBooleanWrapper>);
+    return (
+      <StyledPegaDxilMyBooleanWrapper>
+       {displayComponent}
+      </StyledPegaDxilMyBooleanWrapper>
+    );
   }
 
   if (displayMode === "LABELS_LEFT") {

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/mock.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const configProps = {
   value: true,
   label: 'Boolean label',

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyCurrency/index.tsx

@@ -1,4 +1,3 @@
-
 import { useState, useEffect } from 'react';
 import {
   CurrencyInput as CosmosCurrency,
@@ -262,9 +261,8 @@ function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
         });
       }}
       onBlur={(enteredValue) => {
-        const parsedValue = enteredValue !== '' ? Number(enteredValue) : enteredValue;
+        const parsedValue = enteredValue !== '' ? Number(enteredValue).toString() : enteredValue;
         if (!readOnly && (!value || value !== parsedValue)) {
-           // @ts-ignore
           handleEvent(actions, 'changeNblur', propName, parsedValue);
           if (hasSuggestions) {
             pConn.ignoreSuggestion('');

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyDate/index.tsx

@@ -104,8 +104,7 @@ function PegaDxilMyDate (props: PegaDxilMyDateProps)  {
   }, [validatemessage, hasSuggestions, myStatus]);
 
   // calculate min and max range of calendar
-  // @ts-ignore
-  const currentYear = getFullYear();
+  const currentYear = getFullYear(null);
 
   const yearFromValue = getFullYear(value);
   const maxDate = getMaxDate(
@@ -161,7 +160,7 @@ function PegaDxilMyDate (props: PegaDxilMyDateProps)  {
      }
 
 
-    if (formatter !== "" && formatExists(formatter)){
+    if (formatter !== "" && formatExists(formatter)) {
         // @ts-ignore
         const {variantVal, formatVal} = datetimedisplayformatter(formatter);
         variantValue = variantVal;
@@ -225,8 +224,7 @@ function PegaDxilMyDate (props: PegaDxilMyDateProps)  {
           hideLabel={hideLabel}
           testId={testId}
           additionalProps={textAdditionalProps}
-          // @ts-ignore
-          customFormat={getDateFormat(locale)}
+          customFormat={getDateFormat(locale, null)}
         />
       </StyledPegaDxilMyDateWrapper>
     );

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyDecimal/index.tsx

@@ -88,9 +88,8 @@ function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
   }, [validatemessage, hasSuggestions, status]);
 
   const { decimalPrecision, currencyDecimalPrecision } = props;
-  let numberOfDecimals = parseInt(decimalPrecision, 10);
+  let numberOfDecimals: number | undefined = parseInt(decimalPrecision, 10);
   if (Number.isNaN(numberOfDecimals)) {
-    // @ts-ignore
     numberOfDecimals = decimalPrecision === '' ? undefined : 2;
   }
   let noOfFractionDigits = currencyDecimalPrecision === 'auto' ? undefined : parseInt(currencyDecimalPrecision, 10);
@@ -223,15 +222,13 @@ function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
         }
         setDecimalValue(enteredValue);
         if (value !== (enteredValue !== '' ? Number(enteredValue) : '')) {
-          // @ts-ignore
-          handleEvent(actions, 'change', propName, enteredValue !== '' ? Number(enteredValue) : '');
+          handleEvent(actions, 'change', propName, enteredValue !== '' ? Number(enteredValue).toString() : '');
           hasValueChange.current = true;
         }
       }}
       onBlur={() => {
         if (!value || hasValueChange.current) {
-          // @ts-ignore
-          handleEvent(actions, 'blur', propName, decimalValue !== '' ? Number(decimalValue) : '');
+          handleEvent(actions, 'blur', propName, decimalValue !== '' ? Number(decimalValue).toString() : '');
           if (hasSuggestions) {
             pConn.ignoreSuggestion("");
           }

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyInteger/demo.stories.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { stateProps, configProps, fieldMetadata } from './mock';
@@ -15,7 +14,7 @@ const meta: Meta<typeof PegaDxilMyInteger> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyInteger>;
 
-export const BasePegaDxilMyInteger: Story = args => {
+export const BasePegaDxilMyInteger: Story = (args: any) => {
 
   const props = {
     value: configProps.value,

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyInteger/event-utils.ts

@@ -1,4 +1,4 @@
-const handleEvent = (actions: any, eventType: string, propName: string, value: string) => {
+const handleEvent = (actions: any, eventType: string, propName: string, value: string | number) => {
   switch (eventType) {
     case 'change':
       actions.updateFieldValue(propName, value);

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyInteger/index.tsx

@@ -112,21 +112,17 @@ function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
 
   useEffect(() => {
     if (displayAs === 'slider' && value === '') {
-      // @ts-ignore
       handleEvent(actions, 'change', propName, sliderDefaultValue);
     }
   }, [actions, displayAs, propName, sliderDefaultValue, value]);
 
   const { decimalPrecision, currencyDecimalPrecision = 'auto', currencyISOCode = 'USD' } = props;
-  let noOfDecimals = parseInt(decimalPrecision, 10);
-  // @ts-ignore
+  let noOfDecimals : number | undefined = parseInt(decimalPrecision, 10);
   if (Number.isNaN(noOfDecimals)) noOfDecimals = undefined;
   let noOfFractionDigits = currencyDecimalPrecision === 'auto' ? undefined : parseInt(currencyDecimalPrecision, 10);
   let unit;
-  let unitPlacement;
 
-  // @ts-ignore
-  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode)) {
+  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode as string)) {
     switch (formatter) {
       case 'Decimal': {
         break;
@@ -134,7 +130,6 @@ function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
       case 'Percentage': {
         showGroupSeparators = false;
         unit = '%';
-        unitPlacement = 'after';
         break;
       }
       case 'Decimal-Auto': {
@@ -178,7 +173,6 @@ function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
             notation
           }}
           unit={unit}
-          unitPlacement={unitPlacement}
         />
       );
 
@@ -230,13 +224,11 @@ function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
     setIntegerValue(enteredValue);
     // const parsedValue = integerValue !== '' ? Number(integerValue) : '';
     if (value !== (enteredValue !== '' ? Number(enteredValue) : '')) {
-      // @ts-ignore
       handleEvent(actions, 'change', propName, enteredValue !== '' ? Number(enteredValue) : '');
       hasValueChange.current = true;
     }
     // In case of stepper variation there is no blur event as component is never focussed unless forced. Need to update redux on change.
     if (displayAs === 'stepper') {
-      // @ts-ignore
       handleEvent(actions, 'changeNblur', propName, enteredValue !== '' ? Number(enteredValue) : '');
     }
   }
@@ -268,7 +260,6 @@ function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
       ticks={showTicks && { [min]: `${min}`, [max]: `${max}` }}
       onChange={(selectedValue) => {
         onChangeHandler(selectedValue.toString());
-        // @ts-ignore
         handleEvent(actions, 'changeNblur', propName, selectedValue);
       }}
     />
@@ -295,7 +286,6 @@ function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
       }}
       onBlur={() => {
         if (!readOnly && (hasValueChange.current || !value)) {
-          // @ts-ignore
           handleEvent(actions, 'blur', propName, integerValue !== '' ? Number(integerValue) : '');
           if (hasSuggestions) {
             pConn.ignoreSuggestion('');

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyInteger/mock.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const configProps = {
   value: '',
   label: 'Integer Sample',
@@ -12,7 +11,9 @@ export const configProps = {
   required: false,
   disabled: false,
   status: '',
-  validatemessage: ''
+  validatemessage: '',
+  placeholder: '',
+  variant: ''
 };
 
 export const stateProps = {

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyPercentage/index.tsx

@@ -94,9 +94,8 @@ function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
     }
   }, [validatemessage, hasSuggestions, status]);
 
-  let numberOfDecimals = parseInt(decimalPrecision, 10);
+  let numberOfDecimals : number | undefined = parseInt(decimalPrecision, 10);
   if (Number.isNaN(numberOfDecimals)) {
-    // @ts-ignore
     numberOfDecimals = decimalPrecision === '' ? undefined : 2;
   }
 
@@ -241,15 +240,13 @@ function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
         }
         setPercentageValue(enteredValue);
         if (value !== enteredValue) {
-          // @ts-ignore
           handleEvent(actions, 'change', propName, enteredValue);
           hasValueChange.current = true;
         }
       }}
       onBlur={() => {
-        const parsedValue = percentageValue !== '' ? Number(percentageValue) : '';
+        const parsedValue = percentageValue !== '' ? Number(percentageValue).toString() : '';
         if (!value || hasValueChange.current) {
-          // @ts-ignore
           handleEvent(actions, 'blur', propName, parsedValue);
           if (hasSuggestions) {
             pConn.ignoreSuggestion("");