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

package/tests/assets/sdk-a/components/createAll/custom-constellation/widget/Pega_DXIL_MyPageWidget/index.tsx

@@ -1,6 +1,8 @@
-import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
+import { withConfiguration, Table } from '@pega/cosmos-react-core';
 import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import StyledPegaDxilMyPageWidgetWrapper from './styles';
 
@@ -14,14 +16,17 @@ interface PegaDxilMyPageWidgetProps extends PConnFieldProps {
     image: string;
 }
 
-
-// Duplicated runtime code from Constellation Design System Component
-
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
-export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
+function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
+
+  const { header, description, datasource = [], whatsnewlink, image, getPConnect } = props;
+  const [worklist, setWorklist] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const PConnect = getPConnect();
+  const dataViewName = 'D_pyMyWorkList';
+  const context = PConnect.getContextName();
 
-  const { header, description, datasource, whatsnewlink, image } = props;
   let details = [];
   // @ts-ignore
   if (datasource && datasource.source) {
@@ -30,6 +35,56 @@ export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
       return item.name;
     });
   }
+
+  // setting up columns for the work list table
+  const columns = [
+    { renderer: 'caseType', label: PConnect.getLocalizedValue('Case type', '', '') },
+    { renderer: 'insKey', label: PConnect.getLocalizedValue('Key', '', '') },
+    { renderer: 'status', label: PConnect.getLocalizedValue('Status', '', '') },
+    { renderer: 'stage', label: PConnect.getLocalizedValue('Stage', '', '') }
+  ];
+
+  // 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
+  useEffect(() => {
+
+    PCore.getDataApiUtils()
+      .getData(dataViewName, {}, context)
+      // @ts-ignore
+      .then((response: any) => {
+        setIsLoading(false);
+        if (response.data.data !== null) {
+          // table requires an index or will get setExtraStackFrame error
+          setWorklist(
+            response.data.data.map((entry: any, index: number) => {
+              // mapping the data into the column names
+              // MUST have an id/index or will get a setExtraStackFrame error
+              // put a key in the table
+              return {
+                caseType: entry.pxProcessName,
+                insKey: entry.pxRefObjectInsName,
+                status: entry.pyAssignmentStatus,
+                stage: entry.pxTaskLabel,
+                id: index
+              };
+            })
+          );
+        }
+        else {
+          setWorklist([]);
+          setIsLoading(false);
+        }
+
+      })
+      .catch((error: any) => {
+        setWorklist([]);
+        setIsLoading(false);
+        console.log(error);
+      });
+  }, [context]);
+
   return (
     <StyledPegaDxilMyPageWidgetWrapper>
     <PegaAppAnnouncement
@@ -39,23 +94,17 @@ export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
       whatsNewLink={whatsnewlink}
       image={image.replace(/ /g, '+')}
     />
+    <br />
+    <Table
+      title={PConnect.getLocalizedValue('Work list', '', '')}
+      columns={columns}
+      data={worklist}
+      loading={isLoading}
+      loadingMessage={PConnect.getLocalizedValue('Loading Work list', '', '')}
+    />
     </StyledPegaDxilMyPageWidgetWrapper>
   );
 
 }
 
-PegaDxilMyPageWidget.defaultProps = {
-  header: '',
-  description: '',
-  image: '',
-  datasource: [],
-  whatsnewlink: ''
-};
-
-PegaDxilMyPageWidget.propTypes = {
-  header: PropTypes.string,
-  description: PropTypes.string,
-  datasource: PropTypes.instanceOf(Object),
-  whatsnewlink: PropTypes.string,
-  image: PropTypes.string
-};
+export default withConfiguration(PegaDxilMyPageWidget);

package/tests/assets/sdk-a/components/createAll/custom-constellation/widget/Pega_DXIL_MyPageWidget/styles.ts

@@ -1,15 +1,8 @@
-
-// utilizing theming, comment out, if want individual style
-import styled from 'styled-components';
-import { Configuration } from '@pega/cosmos-react-core';
-
-export default styled(Configuration)``;
-
 // individual style, comment out above, and uncomment here and add styles
-// import styled, { css } from 'styled-components';
-//
-// export default styled.div(() => {
-//  return css`
-//    margin: 0px 0;
-//  `;
-// });
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-boolean/demo.stories.tsx

@@ -18,6 +18,16 @@ const meta: Meta<PegaDxilMyBooleanComponent> = {
         resolveConfigProps: props => props,
         getConfigProps: () => {
           return configProps;
+        },
+         getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
         },
         getStateProps: () => {
           return stateProps;

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-boolean/pega-dxil-my-boolean.component.html

@@ -6,37 +6,38 @@
   ></component-mapper>
 </div>
 <ng-template #noDisplayMode>
-  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+  <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
       <div class="mat-form-field-infix" *ngIf="showLabel$">
         <span>
-          <label class="mat-form-field-label psdk-label-readonly"></label>
+          <label class="mat-form-field-label psdk-label-readonly">{{ label$ }}</label>
         </span>
-        <mat-checkbox
-          [labelPosition]="'after'"
-          [checked]="isChecked$"
-          [disabled]="bDisabled$"
-          [attr.data-test-id]="testId"
-          [formControl]="fieldControl"
-          (change)="fieldOnChange($event)"
-          (blur)="fieldOnBlur($event)"
-          >{{ caption$ }}</mat-checkbox
-        >
       </div>
-      <div class="mat-form-field-infix" *ngIf="!bReadonly$ && !showLabel$">
+      <div *ngIf="selectionMode === 'multi'; else single">
+        <mat-option *ngFor="let item of listOfCheckboxes" (click)="handleChangeMultiMode($event, item)">
+          <mat-checkbox
+            [labelPosition]="'after'"
+            [checked]="item.selected"
+            [attr.data-test-id]="testId + ':' + item.value"
+            (change)="handleChangeMultiMode($event, item)"
+            (blur)="fieldOnBlur($event)"
+            >{{ item.text ?? item.value }}
+          </mat-checkbox>
+        </mat-option>
+      </div>
+      <ng-template #single>
         <mat-checkbox
           [labelPosition]="'after'"
           [checked]="isChecked$"
-          [disabled]="bDisabled$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
           >{{ caption$ }}</mat-checkbox
         >
-      </div>
-      <mat-hint *ngIf="helperText"></mat-hint>
-      <mat-error *ngIf="fieldControl.invalid"></mat-error>
+        <p *ngIf="helperText">{{ helperText }}</p>
+      </ng-template>
+      <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
     </div>
   </div>
 </ng-template>

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-boolean/pega-dxil-my-boolean.component.scss

@@ -8,10 +8,10 @@
   top: 0rem;
   margin-top: 0.625rem;
   font-size: 0.875rem;
-  display: block;
   transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
   -ms-transform: translateY(-1.28125em) scale(0.75);
   width: 133.33333%;
+  color: rgba(0, 0, 0, 0.6);
 }
 
 .psdk-data-readonly {
@@ -22,3 +22,16 @@
 ::ng-deep .mat-mdc-form-field-infix {
   width: auto;
 }
+
+p {
+  font-size: 0.75rem;
+  color: rgba(0, 0, 0, 0.58);
+}
+
+mat-checkbox {
+  margin-left: -11px;
+}
+
+.mat-mdc-option {
+  margin-left: -16px;
+}

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-boolean/pega-dxil-my-boolean.component.ts

@@ -3,10 +3,14 @@ import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatOptionModule } from '@angular/material/core';
+import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { deleteInstruction, insertInstruction, updateNewInstructions } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface PegaDxilMyBooleanProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Checkbox here
@@ -15,6 +19,13 @@ interface PegaDxilMyBooleanProps extends Omit<PConnFieldProps, 'value'> {
   caption?: string;
   trueLabel?: string;
   falseLabel?: string;
+  selectionMode?: string;
+  datasource?: any;
+  selectionKey?: string;
+  selectionList?: any;
+  primaryField: string;
+  readonlyContextList: any;
+  referenceList: string;
 }
 
 @Component({
@@ -22,7 +33,7 @@ interface PegaDxilMyBooleanProps extends Omit<PConnFieldProps, 'value'> {
   templateUrl: './pega-dxil-my-boolean.component.html',
   styleUrls: ['./pega-dxil-my-boolean.component.scss'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule, MatOptionModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class PegaDxilMyBooleanComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
@@ -50,6 +61,17 @@ export class PegaDxilMyBooleanComponent implements OnInit, OnDestroy {
   trueLabel$?: string;
   falseLabel$?: string;
 
+  selectionMode?: string;
+  datasource?: any;
+  selectionKey?: string;
+  selectionList?: any;
+  primaryField: string;
+  selectedvalues: any;
+  referenceList: string;
+  listOfCheckboxes: any[] = [];
+  actionsApi: any;
+  propName: any;
+
   fieldControl = new FormControl('', null);
 
   constructor(
@@ -69,6 +91,11 @@ export class PegaDxilMyBooleanComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
+    if (this.selectionMode === 'multi' && this.referenceList?.length > 0) {
+      this.pConn$.setReferenceList(this.selectionList);
+      updateNewInstructions(this.pConn$, this.selectionList);
+    }
+
     if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
@@ -111,68 +138,123 @@ export class PegaDxilMyBooleanComponent implements OnInit, OnDestroy {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as PegaDxilMyBooleanProps;
 
-    if (this.configProps$.value != undefined) {
-      this.value$ = this.configProps$.value;
-    }
     this.testId = this.configProps$.testId;
-    this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
+    this.label$ = this.configProps$.label;
+    if (this.label$ != '') {
+      this.showLabel$ = true;
+    }
 
-    this.caption$ = this.configProps$.caption;
-    this.helperText = this.configProps$.helperText;
-    this.trueLabel$ = this.configProps$.trueLabel;
-    this.falseLabel$ = this.configProps$.falseLabel;
-
-    // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
-    setTimeout(() => {
-      if (this.configProps$.required != null) {
-        this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = (this.pConn$.getStateProps() as any).value;
+
+    // multi case
+    this.selectionMode = this.configProps$.selectionMode;
+    if (this.selectionMode === 'multi') {
+      this.referenceList = this.configProps$.referenceList;
+      this.selectionList = this.configProps$.selectionList;
+      this.selectedvalues = this.configProps$.readonlyContextList;
+      this.primaryField = this.configProps$.primaryField;
+
+      this.datasource = this.configProps$.datasource;
+      this.selectionKey = this.configProps$.selectionKey;
+      const listSourceItems = this.datasource?.source ?? [];
+      const dataField: any = this.selectionKey?.split?.('.')[1];
+      const listToDisplay: any[] = [];
+      listSourceItems.forEach(element => {
+        element.selected = this.selectedvalues?.some?.(data => data[dataField] === element.key);
+        listToDisplay.push(element);
+      });
+      this.listOfCheckboxes = listToDisplay;
+    } else {
+      if (this.configProps$.value != undefined) {
+        this.value$ = this.configProps$.value;
       }
-      this.cdRef.detectChanges();
-    });
-
-    if (this.configProps$.visibility != null) {
-      this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
-    }
 
-    // disabled
-    if (this.configProps$.disabled != undefined) {
-      this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
-    }
+      this.caption$ = this.configProps$.caption;
+      this.helperText = this.configProps$.helperText;
+      this.trueLabel$ = this.configProps$.trueLabel;
+      this.falseLabel$ = this.configProps$.falseLabel;
+
+      // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
+      setTimeout(() => {
+        if (this.configProps$.required != null) {
+          this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+        }
+        this.cdRef.detectChanges();
+      });
+
+      if (this.configProps$.visibility != null) {
+        this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
+      }
 
-    if (this.bDisabled$) {
-      this.fieldControl.disable();
-    } else {
-      this.fieldControl.enable();
-    }
+      // disabled
+      if (this.configProps$.disabled != undefined) {
+        this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
+      }
 
-    if (this.configProps$.readOnly != null) {
-      this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
-    }
+      if (this.configProps$.readOnly != null) {
+        this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
+      }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+      if (this.bDisabled$ || this.bReadonly$) {
+        this.fieldControl.disable();
+      } else {
+        this.fieldControl.enable();
+      }
 
-    if (this.label$ != '') {
-      this.showLabel$ = true;
-    }
+      this.componentReference = (this.pConn$.getStateProps() as any).value;
 
-    // eslint-disable-next-line sonarjs/no-redundant-boolean
-    if (this.value$ === 'true' || this.value$ == true) {
-      this.isChecked$ = true;
-    } else {
-      this.isChecked$ = false;
+      // eslint-disable-next-line sonarjs/no-redundant-boolean
+      if (this.value$ === 'true' || this.value$ == true) {
+        this.isChecked$ = true;
+      } else {
+        this.isChecked$ = false;
+      }
+      // trigger display of error message with field control
+      if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
+        const timer = interval(100).subscribe(() => {
+          this.fieldControl.setErrors({ message: true });
+          this.fieldControl.markAsTouched();
+
+          timer.unsubscribe();
+        });
+      }
     }
   }
 
   fieldOnChange(event: any) {
     event.value = event.checked;
 
-    this.angularPConnectData.actions?.onChange(this, event);
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, event.checked);
   }
 
   fieldOnBlur(event: any) {
-    event.value = event.checked;
-    this.angularPConnectData.actions?.onBlur(this, event);
+    if (this.selectionMode === 'multi') {
+      this.pConn$.getValidationApi().validate(this.selectedvalues, this.selectionList);
+    } else {
+      event.value = event.checked;
+      this.angularPConnectData.actions?.onBlur(this, event);
+    }
+  }
+
+  handleChangeMultiMode(event, element) {
+    if (!element.selected) {
+      insertInstruction(this.pConn$, this.selectionList, this.selectionKey, this.primaryField, {
+        id: element.key,
+        primary: element.text ?? element.value
+      });
+    } else {
+      deleteInstruction(this.pConn$, this.selectionList, this.selectionKey, {
+        id: element.key,
+        primary: element.text ?? element.value
+      });
+    }
+    this.pConn$.clearErrorMessages({
+      property: this.selectionList,
+      category: '',
+      context: ''
+    });
   }
 
   getErrorMessage() {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-currency/config.json

@@ -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",