@pega/custom-dx-components 0.24.5 → 0.24.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.24.5",
+  "version": "0.24.6",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

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

@@ -17,10 +17,84 @@ 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: [
+    {
+      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.getDataPageUtils = () => {
+  return {
+    getDataAsync: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    }
+  };
+};
+
+
+
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
-    image: configProps.image
+    image: configProps.image,
+    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 (

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,13 @@ 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 PConnect = getPConnect();
   let details = [];
   // @ts-ignore
   if (datasource && datasource.source) {
@@ -30,6 +30,48 @@ 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(() => {
+    const dataViewName = 'D_pyMyWorkList';
+    const context = PConnect.getContextName();
+
+    PCore.getDataPageUtils()
+      .getDataAsync(dataViewName, context)
+      // @ts-ignore
+      .then((response: any) => {
+        // table requires an index or will get setExtraStackFrame error
+        setWorklist(
+          response.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
+            };
+          })
+        );
+      })
+      .catch((error: any) => {
+        console.log(error);
+      });
+  }, [PConnect]);
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     <PegaAppAnnouncement
@@ -39,6 +81,12 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       whatsNewLink={whatsnewlink}
       image={image.replace(/ /g, '+')}
     />
+    <br></br>
+    <Table
+      title={PConnect.getLocalizedValue('Work list', '', '')}
+      columns={columns}
+      data={worklist}
+    />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 

package/src/tasks/init/template/package.json.mustache

@@ -69,7 +69,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.6.0",
-    "@pega/custom-dx-components": "0.24.5",
+    "@pega/custom-dx-components": "0.24.6",
     "@pega/pcore-pconnect-typedefs": "~2.1.1",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.7",

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageWidget/demo.stories.tsx

@@ -17,10 +17,84 @@ const meta: Meta<typeof PegaDxilMyPageWidget> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyPageWidget>;
 
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+const worklistData = {
+  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.getDataPageUtils = () => {
+  return {
+    getDataAsync: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    }
+  };
+};
+
+
+
 export const BasePegaDxilMyPageWidget: Story = args => {
 
   const props = {
-    image: configProps.image
+    image: configProps.image,
+    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 (

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageWidget/index.tsx

@@ -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,13 @@ 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
 function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
 
-  const { header, description, datasource = [], whatsnewlink, image } = props;
+  const { header, description, datasource = [], whatsnewlink, image, getPConnect } = props;
+  const [worklist, setWorklist] = useState([]);
+  const PConnect = getPConnect();
   let details = [];
   // @ts-ignore
   if (datasource && datasource.source) {
@@ -30,6 +30,48 @@ 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(() => {
+    const dataViewName = 'D_pyMyWorkList';
+    const context = PConnect.getContextName();
+
+    PCore.getDataPageUtils()
+      .getDataAsync(dataViewName, context)
+      // @ts-ignore
+      .then((response: any) => {
+        // table requires an index or will get setExtraStackFrame error
+        setWorklist(
+          response.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
+            };
+          })
+        );
+      })
+      .catch((error: any) => {
+        console.log(error);
+      });
+  }, [PConnect]);
+
   return (
     <StyledPegaDxilMyPageWidgetWrapper>
     <PegaAppAnnouncement
@@ -39,6 +81,12 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
       whatsNewLink={whatsnewlink}
       image={image.replace(/ /g, '+')}
     />
+    <br></br>
+    <Table
+      title={PConnect.getLocalizedValue('Work list', '', '')}
+      columns={columns}
+      data={worklist}
+    />
     </StyledPegaDxilMyPageWidgetWrapper>
   );
 

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPageWidget/demo.stories.tsx

@@ -17,10 +17,84 @@ const meta: Meta<typeof PegaDxilMyPageWidget> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyPageWidget>;
 
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+const worklistData = {
+  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.getDataPageUtils = () => {
+  return {
+    getDataAsync: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    }
+  };
+};
+
+
+
 export const BasePegaDxilMyPageWidget: Story = args => {
 
   const props = {
-    image: configProps.image
+    image: configProps.image,
+    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 (

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPageWidget/index.tsx

@@ -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,13 @@ 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
 function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
 
-  const { header, description, datasource = [], whatsnewlink, image } = props;
+  const { header, description, datasource = [], whatsnewlink, image, getPConnect } = props;
+  const [worklist, setWorklist] = useState([]);
+  const PConnect = getPConnect();
   let details = [];
   // @ts-ignore
   if (datasource && datasource.source) {
@@ -30,6 +30,48 @@ 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(() => {
+    const dataViewName = 'D_pyMyWorkList';
+    const context = PConnect.getContextName();
+
+    PCore.getDataPageUtils()
+      .getDataAsync(dataViewName, context)
+      // @ts-ignore
+      .then((response: any) => {
+        // table requires an index or will get setExtraStackFrame error
+        setWorklist(
+          response.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
+            };
+          })
+        );
+      })
+      .catch((error: any) => {
+        console.log(error);
+      });
+  }, [PConnect]);
+
   return (
     <StyledPegaDxilMyPageWidgetWrapper>
     <PegaAppAnnouncement
@@ -39,6 +81,12 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
       whatsNewLink={whatsnewlink}
       image={image.replace(/ /g, '+')}
     />
+    <br></br>
+    <Table
+      title={PConnect.getLocalizedValue('Work list', '', '')}
+      columns={columns}
+      data={worklist}
+    />
     </StyledPegaDxilMyPageWidgetWrapper>
   );