@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/template/SelfServiceCaseView/SelfServiceCaseView.tsx

@@ -0,0 +1,153 @@
+import { Avatar, Card, CardHeader, Divider, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import { prepareCaseSummaryData, filterUtilities } from '../utils';
+import { Utils } from '../../helpers/utils';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  caseViewHeader: {
+    backgroundColor: theme.palette.info.light,
+    color: theme.palette.getContrastText(theme.palette.info.light),
+    borderRadius: 'inherit'
+  },
+  caseViewIconBox: {
+    backgroundColor: theme.palette.info.dark,
+    width: theme.spacing(8),
+    height: theme.spacing(8),
+    padding: theme.spacing(1)
+  },
+  caseViewIconImage: {
+    filter: 'var(--svg-color)'
+  },
+  selfServiceCaseViewHeader: {
+    margin: '10px 8px 0px 8px',
+    height: '50px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: theme.palette.primary.light,
+    color: theme.palette.getContrastText(theme.palette.primary.light),
+    padding: '0 8px'
+  }
+}));
+
+export default function SelfServiceCaseView(props) {
+  const classes = useStyles();
+  const CaseViewActionsMenu = getComponentFromRegistry('CaseViewActionsMenu');
+  const CaseSummary = getComponentFromRegistry('CaseSummary');
+  const {
+    icon = '',
+    getPConnect,
+    header,
+    subheader,
+    showCaseLifecycle = true,
+    showSummaryRegion = true,
+    showUtilitiesRegion = true,
+    showCaseActions = true,
+    children,
+    caseClass,
+    caseInfo: { availableActions = [], availableProcesses = [], caseTypeID = '', caseTypeName = '' }
+  } = props;
+  const pConnect = getPConnect();
+  const [bShowCaseLifecycle, bShowSummaryRegion, bShowUtilitiesRegion, bShowCaseActions] = [
+    showCaseLifecycle,
+    showSummaryRegion,
+    showUtilitiesRegion,
+    showCaseActions
+  ].map((prop: boolean | string) => prop === true || prop === 'true');
+  const isObjectType: boolean = (PCore.getCaseUtils() as any).isObjectCaseType(caseClass);
+  const localeKey = pConnect?.getCaseLocaleReference();
+  const svgCase = Utils.getImageSrc(icon, Utils.getSDKStaticConentUrl());
+  const renderedRegions: any = isObjectType
+    ? {
+        caseSummary: children[0],
+        utilities: filterUtilities(children[2])
+      }
+    : {
+        caseSummary: children[0],
+        stages: children[1],
+        todo: children[2],
+        utilities: filterUtilities(children[4])
+      };
+  const { primarySummaryFields, secondarySummaryFields } = prepareCaseSummaryData(
+    renderedRegions.caseSummary,
+    (config: any) => config?.availableInChannel?.selfService === true
+  );
+
+  const isUtilitiesRegionNotEmpty: () => boolean = () => {
+    const utilitiesElement = renderedRegions.utilities;
+    if (utilitiesElement?.props?.getPConnect()?.getChildren()?.length > 0) {
+      return utilitiesElement.props
+        .getPConnect()
+        .getChildren()
+        .some((prop: { getPConnect: () => any }) => prop.getPConnect().getConfigProps().visibility !== false);
+    }
+    return false;
+  };
+
+  const showSummary = bShowSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0);
+  const showUtilities = bShowUtilitiesRegion && isUtilitiesRegionNotEmpty();
+
+  return (
+    <div>
+      <div className={classes.selfServiceCaseViewHeader}>
+        <div>{PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}</div>
+        {bShowCaseActions && (
+          <CaseViewActionsMenu
+            getPConnect={getPConnect}
+            availableActions={availableActions}
+            availableProcesses={availableProcesses}
+            caseTypeName={caseTypeName}
+            caseTypeID={caseTypeID}
+          />
+        )}
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'row' }}>
+        {showSummary && (
+          <div style={{ flex: '0 0 25%' }}>
+            <Card className={classes.root}>
+              <CardHeader
+                className={classes.caseViewHeader}
+                title={
+                  <Typography variant='h6' component='div' id='case-name'>
+                    {PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}
+                  </Typography>
+                }
+                subheader={
+                  <Typography variant='body1' component='div' id='caseId'>
+                    {subheader}
+                  </Typography>
+                }
+                avatar={
+                  <Avatar className={classes.caseViewIconBox} variant='square'>
+                    <img src={svgCase} className={classes.caseViewIconImage} />
+                  </Avatar>
+                }
+              />
+              <Divider />
+              <CaseSummary arPrimaryFields={primarySummaryFields} arSecondaryFields={secondarySummaryFields}></CaseSummary>
+              <Divider />
+            </Card>
+          </div>
+        )}
+
+        <div style={{ flex: 1 }}>
+          {bShowCaseLifecycle && renderedRegions.stages}
+          {renderedRegions.todo}
+        </div>
+
+        {showUtilities && <div style={{ flex: '0 0 25%' }}>{renderedRegions.utilities}</div>}
+      </div>
+    </div>
+  );
+}

package/templates/react-sdk-reference/src/components/template/SelfServiceCaseView/index.tsx

@@ -0,0 +1 @@
+export { default } from './SelfServiceCaseView';

package/templates/react-sdk-reference/src/components/template/SimpleTable/SimpleTable/SimpleTable.tsx

@@ -0,0 +1,126 @@
+import { useRef } from 'react';
+
+import { buildMetaForListView, getContext } from '../../../helpers/simpleTableHelpers';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+
+import type { PConnProps } from '@pega/sdk-react';
+
+// Can't use SimpleTableProps until getComponentConfig() and getFieldMetadata() are NOT private
+interface SimpleTableProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  multiRecordDisplayAs: string;
+  allowTableEdit: boolean;
+  contextClass: any;
+  label: string;
+  propertyLabel?: string;
+  displayMode?: string;
+  fieldMetadata?: any;
+  hideLabel?: boolean;
+  parameters?: any;
+  isDataObject?: boolean;
+  type?: string;
+  ruleClass?: string;
+  authorContext?: string;
+  name?: string;
+}
+
+export default function SimpleTable(props: SimpleTableProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ListView = getComponentFromRegistry('ListView');
+  const FieldGroupTemplate = getComponentFromRegistry('FieldGroupTemplate');
+  const SimpleTableManual = getComponentFromRegistry('SimpleTableManual');
+
+  const {
+    getPConnect,
+    multiRecordDisplayAs,
+    allowTableEdit,
+    label: labelProp,
+    propertyLabel,
+    displayMode,
+    fieldMetadata,
+    hideLabel,
+    parameters,
+    isDataObject,
+    type,
+    ruleClass,
+    authorContext,
+    name
+  } = props;
+
+  let { contextClass } = props;
+  if (!contextClass) {
+    let listName = getPConnect().getComponentConfig().referenceList;
+    listName = PCore.getAnnotationUtils().getPropertyName(listName);
+    // was... contextClass = getPConnect().getFieldMetadata(listName)?.pageClass;
+    const theFieldMetadata = getPConnect().getFieldMetadata(listName);
+    if (theFieldMetadata) {
+      contextClass = theFieldMetadata.pageClass;
+    } else {
+      contextClass = undefined;
+    }
+  }
+  if (multiRecordDisplayAs === 'fieldGroup') {
+    const fieldGroupProps = { ...props, contextClass };
+    return <FieldGroupTemplate {...fieldGroupProps} />;
+  }
+
+  const label = labelProp || propertyLabel;
+  const propsToUse = { label, ...getPConnect().getInheritedProps() };
+  const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
+
+  if (fieldMetadata && fieldMetadata.type === 'Page List' && fieldMetadata.dataRetrievalType === 'refer') {
+    const {
+      children: [{ children: rawFields }],
+      parameters: rawParams
+    } = (getPConnect().getRawMetadata() as any).config;
+    if (isDisplayModeEnabled && hideLabel) {
+      propsToUse.label = '';
+    }
+
+    const metaForListView = buildMetaForListView(
+      fieldMetadata,
+      rawFields,
+      type,
+      ruleClass,
+      name,
+      propsToUse.label,
+      isDataObject,
+      parameters // resolved params
+    );
+
+    const metaForPConnect = JSON.parse(JSON.stringify(metaForListView));
+    // @ts-expect-error - PCore.getMetadataUtils().getPropertyMetadata - An argument for 'currentClassID' was not provided.
+    metaForPConnect.config.parameters = rawParams ?? PCore.getMetadataUtils().getPropertyMetadata(name)?.datasource?.parameters;
+
+    const { referenceListStr: referenceList } = getContext(getPConnect());
+    let requiredContextForQueryInDisplayMode = {};
+    if (isDisplayModeEnabled) {
+      requiredContextForQueryInDisplayMode = {
+        referenceList
+      };
+    }
+    const options = {
+      context: getPConnect().getContextName(),
+      pageReference: getPConnect().getPageReference(),
+      ...requiredContextForQueryInDisplayMode
+    };
+
+    const refToPConnect = useRef(PCore.createPConnect({ meta: metaForPConnect, options }).getPConnect).current; // getPConnect should be created only once.
+    /* BUG-637178 : need to send context */
+    const listViewProps = {
+      ...metaForListView.config,
+      getPConnect: refToPConnect,
+      displayMode,
+      fieldName: authorContext,
+      bInForm: true
+    };
+    return <ListView {...listViewProps} />;
+  }
+  const simpleTableManualProps: any = { ...props, contextClass };
+  if (allowTableEdit === false) {
+    simpleTableManualProps.hideAddRow = true;
+    simpleTableManualProps.hideDeleteRow = true;
+    simpleTableManualProps.disableDragDrop = true;
+  }
+  return <SimpleTableManual {...simpleTableManualProps} />;
+}

package/templates/react-sdk-reference/src/components/template/SimpleTable/SimpleTable/config-ext.json

@@ -0,0 +1,7 @@
+{
+  "name": "SimpleTable",
+  "description": "Datatype List Template",
+  "type": "Template",
+  "subtype": "DATAVIEW",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/template/SimpleTable/SimpleTable/index.tsx

@@ -0,0 +1 @@
+export { default } from './SimpleTable';