@pega/dx-component-builder-sdk 0.24.2 → 0.24.4

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/mock.ts.mustache

@@ -21,3 +21,28 @@ export const configProps = {
     fields: {}
   }
 };
+
+export const worklistData = {
+  data: {
+    data: [
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-8002',
+        pyAssignmentStatus: 'New',
+        pxTaskLabel: 'Details'
+      },
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-7001',
+        pyAssignmentStatus: 'Open',
+        pxTaskLabel: 'Info'
+      },
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-9000',
+        pyAssignmentStatus: 'Open',
+        pxTaskLabel: 'Amount'
+      }
+    ]
+  }
+};

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/page.component.html.mustache

@@ -14,4 +14,14 @@
   </div>
   <a *ngIf="configProps$.whatsnewlink != ''" mat-raised-button color="primary" [href]="configProps$.whatsnewlink">See what's new</a>
 </article>
+<br />
+<table mat-table [dataSource]="workList">
+  <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.fieldName">
+    <th mat-header-cell *matHeaderCellDef>{{ dCol.label }}</th>
+    <td mat-cell *matCellDef="let element">{{ element[dCol.fieldName] }}</td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+</table>
 <%={{ }}=%>     {{! revert delimiters for mustache }}

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/page.component.ts.mustache

@@ -1,6 +1,8 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { Utils } from '@pega/angular-sdk-components';
 
 interface {{COMPONENT_CLASS_NAME}}Props {
   // If any, enter additional props that only exist on this component
@@ -16,13 +18,20 @@ interface {{COMPONENT_CLASS_NAME}}Props {
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
   standalone: true,
-  imports: [CommonModule, MatButtonModule]
+  imports: [CommonModule, MatButtonModule, MatTableModule]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
   @Input() pConn$: typeof PConnect;
 
   configProps$: {{COMPONENT_CLASS_NAME}}Props;
   details$: any[];
+  fields$: any[];
+  displayedColumns: any[];
+
+  workList: MatTableDataSource<any>;
+  waitingForData = false;
+
+  constructor(private utils: Utils) {}
 
   ngOnInit(): void {
     this.configProps$ = this.pConn$.getConfigProps();
@@ -31,5 +40,88 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
     if (datasource?.source) {
       this.details$ = datasource.source.map(item => item.name);
     }
+
+    // going to get data for worklist to put into a table
+    // data comes from calling a PCore function to get
+    // get data from a data page and a PConnect function
+    // to get getContextName
+
+    const dataViewName = 'D_pyMyWorkList';
+    const context = this.pConn$.getContextName();
+    this.waitingForData = true;
+    const workListData = PCore.getDataApiUtils().getData(dataViewName, {}, context) as Promise<any>;
+
+    workListData
+      .then((response: any) => {
+        if (response.data.data !== null) {
+          this.fields$ = [
+            {
+              label: this.pConn$.getLocalizedValue('Case type', '', ''),
+              type: 'TextInput',
+              fieldName: 'pxProcessName'
+            }, // 2nd and 3rd args empty string until typedef marked correctly
+            {
+              label: this.pConn$.getLocalizedValue('Key', '', ''),
+              type: 'TextInput',
+              fieldName: 'pxRefObjectInsName'
+            }, // 2nd and 3rd args empty string until typedef marked correctly
+            {
+              label: this.pConn$.getLocalizedValue('Status', '', ''),
+              type: 'TextInput',
+              fieldName: 'pyAssignmentStatus'
+            }, // 2nd and 3rd args empty string until typedef marked correctly
+            {
+              label: this.pConn$.getLocalizedValue('Stage', '', ''),
+              type: 'TextInput',
+              fieldName: 'pxTaskLabel'
+            } // 2nd and 3rd args empty string until typedef marked correctly
+          ];
+          const tableDataResults = this.updateData(response.data.data, this.fields$);
+          this.displayedColumns = this.getDisplayColumns(this.fields$);
+          this.workList = new MatTableDataSource(tableDataResults);
+          this.waitingForData = false;
+        } else {
+          this.workList = new MatTableDataSource();
+          this.waitingForData = false;
+        }
+      })
+      .catch((error: any) => {
+        this.workList = new MatTableDataSource();
+        this.waitingForData = false;
+        console.log(error);
+      });
+  }
+
+  updateData(listData: any[], fieldData: any[]): any[] {
+    const returnList: any[] = new Array<any>();
+    listData.forEach(row => {
+      const rowData = JSON.parse(JSON.stringify(row));
+
+      for (const field of fieldData) {
+        const fieldName = field.fieldName;
+        let formattedDate;
+
+        switch (field.type) {
+          case 'Date':
+            formattedDate = this.utils.generateDate(rowData[fieldName], 'Date-Short-YYYY');
+            rowData[fieldName] = formattedDate;
+            break;
+          case 'DateTime':
+            formattedDate = this.utils.generateDateTime(rowData[fieldName], 'DateTime-Short-YYYY');
+            rowData[fieldName] = formattedDate;
+            break;
+          default:
+            break;
+        }
+      }
+      returnList.push(rowData);
+    });
+    return returnList;
+  }
+
+  getDisplayColumns(fields: any[] = []) {
+    return fields.map(field => {
+      return field.fieldName;
+    });
   }
 }

package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/config.json.mustache

@@ -58,6 +58,34 @@
         }
       ]
     },
+    {
+      "label": "Column settings",
+      "format": "GROUP",
+      "visibility": "@VIEWTYPE == 'MultiRecordDisplayAsTable'",
+      "properties": [
+        {
+          "name": "columnWidth",
+          "label": "Column width",
+          "format": "SELECT",
+          "source": [
+            {
+              "key": "auto",
+              "value": "Auto"
+            },
+            {
+              "key": "custom",
+              "value": "Custom"
+            }
+          ]
+        },
+        {
+          "name": "width",
+          "label": "Width (px)",
+          "format": "NUMBER",
+          "visibility": "$this.columnWidth == 'custom'"
+        }
+      ]
+    },
     {
       "label": "Input settings",
       "format": "GROUP",
@@ -69,6 +97,12 @@
           "format": "BOOLEAN",
           "defaultValue": true
         },
+        {
+          "name": "alwaysShowISOCode",
+          "label": "Show ISO Code",
+          "format": "BOOLEAN",
+          "defaultValue": false
+        },
         {
           "name": "placeholder",
           "label": "Placeholder",
@@ -81,6 +115,138 @@
         }
       ]
     },
+    {
+      "label": "Read-only settings",
+      "format": "GROUP",
+      "properties": [
+        {
+          "format": "SELECT",
+          "name": "formatter",
+          "label": "Format",
+          "defaultValue": "defaultCurrency",
+          "source": [
+            {
+              "key": "defaultCurrency",
+              "value": "Default"
+            },
+            {
+              "key": "Integer",
+              "value": "Integer"
+            },
+            {
+              "key": "Decimal",
+              "value": "Decimal"
+            },
+            {
+              "key": "Percentage",
+              "value": "Percentage"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "currencyDisplay",
+      "label": "Currency display",
+      "visibility": "(!formatter = Integer)&&(!formatter = Decimal)&&(!formatter = Percentage)",
+      "defaultValue": "symbol",
+      "source": [
+        {
+          "key": "symbol",
+          "value": "Auto"
+        },
+        {
+          "key": "code",
+          "value": "Code"
+        },
+        {
+          "key": "name",
+          "value": "Name"
+        }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "negative",
+      "label": "Negative number display",
+      "defaultValue": "minus-sign",
+      "visibility": "(!formatter = Integer)&&(!formatter = Decimal)&&(!formatter = Percentage)",
+      "source": [
+        {
+          "key": "minus-sign",
+          "value": "Standard"
+        },
+        {
+          "key": "parentheses",
+          "value": "Accounting"
+        }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "notation",
+      "label": "Notation",
+      "visibility": "(!negative = parentheses)&&(!formatter = Percentage)",
+      "defaultValue": "standard",
+      "source": [
+        {
+          "key": "standard",
+          "value": "Standard"
+        },
+        {
+          "key": "compact",
+          "value": "Compact"
+        }
+      ]
+    },
+    {
+      "format": "NUMBER",
+      "name": "decimalPrecision",
+      "label": "Decimal places",
+      "visibility": "(formatter = Decimal)||(formatter = Percentage)",
+      "min": 0,
+      "max": 20
+    },
+    {
+      "format": "SELECT",
+      "name": "currencyDecimalPrecision",
+      "label": "Decimal places shown",
+      "visibility": "(!formatter = Integer)&&(!formatter = Decimal)&&(!formatter = Percentage)",
+      "defaultValue": "auto",
+      "source": [
+        {
+          "key": "auto",
+          "value": "Auto"
+        },
+        {
+          "key": "0",
+          "value": "None"
+        },
+        {
+          "key": "1",
+          "value": "1"
+        },
+        {
+          "key": "2",
+          "value": "2"
+        },
+        {
+          "key": "3",
+          "value": "3"
+        },
+        {
+          "key": "4",
+          "value": "4"
+        }
+      ]
+    },
+    {
+      "name": "showGroupSeparators",
+      "label": "Show thousands separator",
+      "format": "BOOLEAN",
+      "visibility": "(formatter = Decimal)||(formatter = Integer)"
+    },
     {
       "label": "Conditions",
       "format": "GROUP",

package/src/tasks/create/templates/SDK-React/field/Text-Phone/index.tsx.mustache

@@ -1,7 +1,9 @@
 import MuiPhoneNumber from 'material-ui-phone-number';
+import { useEffect, useState } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -17,6 +19,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
@@ -24,7 +27,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     validatemessage,
     status,
     onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -32,6 +34,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     hideLabel,
     placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  const [inputValue, setInputValue] = useState(value);
+  useEffect(() => setInputValue(value), [value]);
+
   const helperTextToDisplay = validatemessage || helperText;
 
   let testProp = {};
@@ -79,15 +89,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   }
 
   const handleChange = inputVal => {
-    let phoneValue = inputVal && inputVal.replace(/\D+/g, '');
-    phoneValue = `+${phoneValue}`;
-    onChange({ value: phoneValue });
+    setInputValue(inputVal);
   };
 
   const handleBlur = event => {
     const phoneValue = event?.target?.value;
-    event.target.value = `+${phoneValue && phoneValue.replace(/\D+/g, '')}`;
-    onBlur(event);
+    let phoneNumber = phoneValue.split(' ').slice(1).join();
+    phoneNumber = phoneNumber ? `+${phoneValue && phoneValue.replace(/\D+/g, '')}` : '';
+    handleEvent(actions, 'changeNblur', propName, phoneNumber);
   };
 
   return (
@@ -105,7 +114,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         onBlur={!readOnly ? handleBlur : undefined}
         error={status === 'error'}
         label={label}
-        value={value}
+        value={inputValue}
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
         InputProps={{ ...testProp }}

package/src/tasks/create/templates/SDK-React/template/DETAILS/mock.ts.mustache

@@ -190,7 +190,24 @@ export const pyReviewRaw = {
           value: '+16397975093',
           label: 'Phone',
           displayMode: 'LABELS_LEFT',
-          hasSuggestions: false
+          hasSuggestions: false,
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {
+                return {
+                  updateFieldValue: () => {
+                    /* nothing */
+                  },
+                  triggerFieldChange: () => {
+                    /* nothing */
+                  }
+                };
+              },
+              getStateProps: () => {
+                return { value: '' };
+              }
+            };
+          }
         },
         {
           readOnly: undefined,

package/src/tasks/create/templates/SDK-React/template/FORM/demo.stories.tsx.mustache

@@ -182,6 +182,19 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
                           return {
                             getComputedVisibility: () => {
                               return true;
+                            },
+                            getActionsApi: () => {
+                              return {
+                                updateFieldValue: () => {
+                                  /* nothing */
+                                },
+                                triggerFieldChange: () => {
+                                  /* nothing */
+                                }
+                              };
+                            },
+                            getStateProps: () => {
+                              return { value: '' };
                             }
                           };
                         }

package/src/tasks/create/templates/SDK-React/widget/CASE/demo.stories.tsx.mustache

@@ -3,26 +3,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import {{COMPONENT_CLASS_NAME}} from './index';
 import { historyData } from './mock';
 
-window.PCore = {
-  ...window.PCore,
-  getDataApiUtils: (): any => {
-    return {
-      getData: (): any => {
-        return new Promise(resolve => {
-          resolve(historyData);
-        });
-      }
-    };
-  },
-  getConstants: (): any => {
-    return {
-      CASE_INFO: {
-        CASE_INFO_ID: 'caseInfo.ID'
-      }
-    };
-  }
-};
-
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}},
@@ -33,6 +13,26 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  window.PCore = {
+    ...window.PCore,
+    getDataApiUtils: (): any => {
+      return {
+        getData: (): any => {
+          return new Promise(resolve => {
+            resolve(historyData);
+          });
+        }
+      };
+    },
+    getConstants: (): any => {
+      return {
+        CASE_INFO: {
+          CASE_INFO_ID: 'caseInfo.ID'
+        }
+      };
+    }
+  };
+
   const props = {
     label: 'Case history',
 

package/src/tasks/create/templates/SDK-React/widget/PAGE/demo.stories.tsx.mustache

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
-import { configProps } from './mock';
+import { configProps, worklistData } from './mock';
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -13,9 +13,52 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+    window.PCore = {
+    ...window.PCore,
+    getDataApiUtils: (): any => {
+      return {
+        getData: () => {
+          return new Promise(resolve => {
+            resolve(worklistData);
+          });
+        }
+      };
+    },
+    getConstants: (): any => {
+      return {
+        CASE_INFO: {
+          INSTRUCTIONS: 'caseInfo.assignments[0].instructions'
+        }
+      };
+    },
+  };
+
   const props = {
     datasource: configProps.datasource,
-    whatsnewlink: configProps.whatsnewlink
+    whatsnewlink: configProps.whatsnewlink,
+    getPConnect: () => {
+      return {
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        }
+      };
+    }
   };
 
   return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;