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

package/src/tasks/create/templates/Constellation/template/FORM-region/demo.stories.tsx.mustache

@@ -22,7 +22,7 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', key } = resolvedProps;
+  const { displayMode, value = '', label = '', key, readOnly } = resolvedProps;
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [inputValue, setInputValue] = useState(value);
@@ -131,6 +131,30 @@ const renderField = resolvedProps => {
       </Text>
     );
   }
+  if (readOnly) {
+    return {
+      getPConnect: () => {
+        return {
+          getRawMetadata: () => {
+            return {};
+          },
+          resolveConfigProps: props => {
+            return props;
+          },
+          getConfigProps: () => {
+            return {
+              value: '',
+              label,
+              displayMode: 'LABELS_LEFT'
+            };
+          },
+          getComponent: () => {
+            return val;
+          }
+        };
+      }
+    };
+  }
   return (
     <FieldValueList
       variant={variant}
@@ -144,7 +168,10 @@ const renderField = resolvedProps => {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  const { readOnly } = args;
+
   const props = {
+    readOnly,
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -157,39 +184,92 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           // eslint-disable-next-line default-case
           switch (config.config.value) {
             case '@P .FirstName':
-              return renderField(regionChildrenResolved[0]);
+              return renderField({
+                ...regionChildrenResolved[0],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .MiddleName':
-              return renderField(regionChildrenResolved[1]);
+              return renderField({
+                ...regionChildrenResolved[1],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .LastName':
-              return renderField(regionChildrenResolved[2]);
+              return renderField({
+                ...regionChildrenResolved[2],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .Email':
-              return renderField(regionChildrenResolved[3]);
+              return renderField({
+                ...regionChildrenResolved[3],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .PhoneNumber':
-              return renderField(regionChildrenResolved[4]);
+              return renderField({
+                ...regionChildrenResolved[4],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .ServiceDate':
-              return renderField(regionChildrenResolved[5]);
+              return renderField({
+                ...regionChildrenResolved[5],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
           }
         }
       };
     }
   };
 
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
+  const regionAChildren = readOnly
+    ? {
+        props: {
+          getPConnect: () => {
+            return {
+              getChildren: () => {
+                return pyReviewRaw.children[0].children.map(child => {
+                  return props.getPConnect().createComponent(child);
+                });
+              }
+            };
+          }
+        }
+      }
+    : pyReviewRaw.children[0].children.map(child => {
+        return props.getPConnect().createComponent(child);
+      });
+
+  const regionBChildren = readOnly
+    ? {
+        props: {
+          getPConnect: () => {
+            return {
+              getChildren: () => {
+                return pyReviewRaw.children[1].children.map(child => {
+                  return props.getPConnect().createComponent(child);
+                });
+              }
+            };
+          }
+        }
+      }
+    : pyReviewRaw.children[1].children.map(child => {
+        return props.getPConnect().createComponent(child);
+      });
 
   return (
     <{{COMPONENT_CLASS_NAME}} {...props} {...args}>
-      {regionAChildren}
-      {regionBChildren}
+      {[regionAChildren, regionBChildren]}
     </{{COMPONENT_CLASS_NAME}}>
   );
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
+  readOnly: false,
   showLabel: true,
   label: 'Form Region template',
 };

package/src/tasks/create/templates/Constellation/template/FORM-region/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import DetailsRender from './DetailsRender';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -11,19 +12,17 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   children: any;
 }
 
-// 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
 function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
 
-  const { children = [], label, showLabel, getPConnect } = props;
+  const { children = [], label, showLabel, getPConnect, readOnly, displayMode  } = props;
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
   const numRegions = children?.length;
   const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
-  const gridContainer = {"colGap" : 1};
+  const gridContainer = {"colGap" : 6};
   // @ts-ignore
   gridContainer.cols = gridRepeat;
   // @ts-ignore
@@ -33,10 +32,33 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // @ts-ignore
   flexContainer.gap = 2;
 
+  if (readOnly && readOnly === true || displayMode && displayMode === 'DISPLAY_ONLY') {
+    return (
+      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+        <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+          <Grid container={gridContainer} data-testid={`column-count-${numRegions}`}>
+            {children.map((child: any, i: number) => (
+              <Flex
+                // @ts-ignore
+                container={{ direction: 'column', alignItems: 'normal', colGap: 1, rowGap: 1.5 }}
+                key={`r-${i + 1}`}
+              >
+                <DetailsRender child={child} />
+              </Flex>
+            ))}
+          </Grid>
+        </FieldGroup>
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    );
+  }
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    {{! pick new delimiters for mustache }}
-    {{=<% %>=}}
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
       <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
         <Grid container={gridContainer}>
         {children.map((child: any, i: number) => (
@@ -47,7 +69,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         ))}
         </Grid>
       </FieldGroup>
-    <%={{ }}=%>     {{! revert delimiters for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 

package/src/tasks/create/templates/Constellation/template/PAGE/GetNextWork.tsx.mustache

@@ -18,6 +18,7 @@ export default function GetNextWork(props: {{COMPONENT_CLASS_NAME}}WorkProps) {
   const toasterCtx = useToaster();
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Case';
 
   const getNextWork = () => {
 
@@ -30,7 +31,7 @@ export default function GetNextWork(props: {{COMPONENT_CLASS_NAME}}WorkProps) {
         console.log(err);
         if (err[0].status === 404) {
           toasterCtx.push({
-            content: localizedVal('No task currently available')
+            content: localizedVal('No task currently available', localeCategory)
           });
         }
       });

package/src/tasks/create/templates/Constellation/template/PAGE/localizations.json.mustache

@@ -1,4 +1,6 @@
 {
-  "Get next work" : "Get next work",
-  "No task currently available" : "No task currently available"
+  "fields" : {
+    "Get next work" : "Get next work",
+    "No task currently available" : "No task currently available"
+  }
 }

package/src/tasks/create/templates/Constellation/widget/PAGE/demo.stories.tsx.mustache

@@ -17,17 +17,98 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+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'
+      }
+    ]
+  }
+};
+
+window.PCore.getDataApiUtils = () => {
+  return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    },
+    getDataAsync: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    }
+  };
+};
+
+
+
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
-    image: configProps.image
+    ...configProps,
+    getPConnect: () => {
+      return {
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
+      };
+    }
   };
 
-return (
-    <>
-      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
-    </>
-  );
+  return (
+      <>
+        <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
+      </>
+    );
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {

package/src/tasks/create/templates/Constellation/widget/PAGE/index.tsx.mustache

@@ -1,4 +1,5 @@
-import { withConfiguration } from '@pega/cosmos-react-core';
+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';
 
@@ -14,14 +15,17 @@ interface {{COMPONENT_CLASS_NAME}}Props 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
 function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
-  const { header, description, datasource = [], whatsnewlink, image } = props;
+  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();
+
   let details = [];
   // @ts-ignore
   if (datasource && datasource.source) {
@@ -30,6 +34,56 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       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 (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     <PegaAppAnnouncement
@@ -39,6 +93,14 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       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', '', '')}
+    />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.html.mustache

@@ -5,44 +5,45 @@
     [props]="{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
   ></component-mapper>
 </div>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
 <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>
         </span>
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
-        <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
         >
-<%={{ }}=%>     {{! revert delimiters for mustache }}
-      </div>
-      <mat-hint *ngIf="helperText">{{ helperText }}</mat-hint>
+        <p *ngIf="helperText">{{ helperText }}</p>
+      </ng-template>
       <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
     </div>
   </div>
 </ng-template>
+<%={{ }}=%>     {{! revert delimiters for mustache }}
 <ng-template #noEdit>
   <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>