@pega/dx-component-builder-sdk 0.23.1 → 0.23.3

package/tests/assets/components/SDK-React/create/override-sdk/infra/Assignment/Assignment.tsx

@@ -0,0 +1,326 @@
+import React, { useState, useEffect } from 'react';
+import AssignmentCard from '@pega/react-sdk-components/lib/components/infra/AssignmentCard';
+import MultiStep from '@pega/react-sdk-components/lib/components/infra/MultiStep';
+import Snackbar from '@material-ui/core/Snackbar';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+
+// import type { PConnProps } from '../../../types/PConnProps';
+
+// Can't use AssignmentProps until the following are NOT private
+//  getCaseInfo().isAssignmentInCreateStage()
+//  getCaseInfo().isLocalAction()
+// interface AssignmentProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   children: Array<any>,
+//   itemKey: string,
+//   isInModal: boolean,
+//   banners: Array<any>
+//   // eslint-disable-next-line react/no-unused-prop-types
+//   actionButtons: Array<any>,
+// }
+
+
+export default function Assignment(props /* : AssignmentProps */) {
+  const { getPConnect, children, itemKey = '', isInModal = false, banners = [] } = props;
+  const thePConn = getPConnect();
+
+  const [bHasNavigation, setHasNavigation] = useState(false);
+  const [actionButtons, setActionButtons] = useState([]);
+  const [bIsVertical, setIsVertical] = useState(false);
+  const [arCurrentStepIndicies, setArCurrentStepIndicies] = useState<Array<any>>([]);
+  const [arNavigationSteps, setArNavigationSteps] = useState<Array<any>>([]);
+
+  const actionsAPI = thePConn.getActionsApi();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Assignment';
+  const localeReference = `${getPConnect().getCaseInfo().getClassName()}!CASE!${getPConnect().getCaseInfo().getName()}`.toUpperCase();
+
+  // store off bound functions to above pointers
+  const finishAssignment = actionsAPI.finishAssignment.bind(actionsAPI);
+  const navigateToStep = actionsAPI.navigateToStep.bind(actionsAPI);
+  const cancelAssignment = actionsAPI.cancelAssignment.bind(actionsAPI);
+  const saveAssignment = actionsAPI.saveAssignment?.bind(actionsAPI);
+  const cancelCreateStageAssignment = actionsAPI.cancelCreateStageAssignment.bind(actionsAPI);
+  // const showPage = actionsAPI.showPage.bind(actionsAPI);
+
+  const [showSnackbar, setShowSnackbar] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState('');
+
+  function findCurrentIndicies(
+    arStepperSteps: Array<any>,
+    arIndicies: Array<number>,
+    depth: number
+  ): Array<number> {
+    let count = 0;
+    arStepperSteps.forEach(step => {
+      if (step.visited_status === 'current') {
+        arIndicies[depth] = count;
+
+        // add in
+        step['step_status'] = '';
+      } else if (step.visited_status === 'success') {
+        count += 1;
+        step.step_status = 'completed';
+      } else {
+        count += 1;
+        step.step_status = '';
+      }
+
+      if (step.steps) {
+        arIndicies = findCurrentIndicies(step.steps, arIndicies, depth + 1);
+      }
+    });
+
+    return arIndicies;
+  }
+
+  useEffect(() => {
+    if (children && children.length > 0) {
+      // debugger;
+
+      const oWorkItem = children[0].props.getPConnect();
+      const oWorkData = oWorkItem.getDataObject();
+      const oData = thePConn.getDataObject('');  // 1st arg empty string until typedefs allow it to be optional
+
+      if (oWorkData?.caseInfo && oWorkData.caseInfo.assignments !== null) {
+        const oCaseInfo = oData["caseInfo"];
+
+        if (oCaseInfo && oCaseInfo.actionButtons) {
+          setActionButtons(oCaseInfo.actionButtons);
+        }
+
+        if (oCaseInfo?.navigation /* was oCaseInfo.navigation != null */) {
+          setHasNavigation(true);
+
+          if (
+            oCaseInfo.navigation.template &&
+            oCaseInfo.navigation.template.toLowerCase() === 'standard'
+          ) {
+            setHasNavigation(false);
+          } else if (
+            oCaseInfo.navigation.template &&
+            oCaseInfo.navigation.template.toLowerCase() === 'vertical'
+          ) {
+            setIsVertical(true);
+          } else {
+            setIsVertical(false);
+          }
+          const steps = JSON.parse(JSON.stringify(oCaseInfo?.navigation?.steps));
+          steps.forEach(step => {
+            if (step.name) {
+              step.name = PCore.getLocaleUtils().getLocaleValue(step.name, undefined, localeReference);
+            }
+          });
+          setArNavigationSteps(steps);
+          setArCurrentStepIndicies(
+            findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0)
+          );
+        }
+      }
+    }
+  }, [children]);
+
+  function showToast(message: string) {
+    const theMessage = `Assignment: ${message}`;
+    // eslint-disable-next-line no-console
+    console.error(theMessage);
+    setSnackbarMessage(message);
+    setShowSnackbar(true);
+  }
+
+  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setShowSnackbar(false);
+  }
+
+  function onSaveActionSuccess(data) {
+    actionsAPI.cancelAssignment(itemKey).then(() => {
+      PCore.getPubSubUtils().publish(
+        PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CREATE_STAGE_SAVED,
+        data
+      );
+    });
+  }
+
+  function buttonPress(sAction: string, sButtonType: string) {
+    if (sButtonType === 'secondary') {
+      switch (sAction) {
+        case 'navigateToStep': {
+          const navigatePromise = navigateToStep('previous', itemKey);
+
+          navigatePromise
+            .then(() => {})
+            .catch(() => {
+              showToast(`${localizedVal('Navigation failed!', localeCategory)}`);
+            });
+
+          break;
+        }
+
+        case 'saveAssignment': {
+          const caseID = thePConn.getCaseInfo().getKey();
+          const assignmentID = thePConn.getCaseInfo().getAssignmentID();
+          const savePromise = saveAssignment(itemKey);
+
+          savePromise
+            .then(() => {
+              const caseType = thePConn
+                .getCaseInfo()
+                .c11nEnv.getValue(PCore.getConstants().CASE_INFO.CASE_TYPE_ID);
+              onSaveActionSuccess({ caseType, caseID, assignmentID });
+            })
+            .catch(() => {
+              showToast(`${localizedVal('Save failed', localeCategory)}`);
+            });
+
+          break;
+        }
+
+        case 'cancelAssignment': {
+          // check if create stage (modal)
+          const { PUB_SUB_EVENTS } = PCore.getConstants();
+          const { publish } = PCore.getPubSubUtils();
+          const isAssignmentInCreateStage = thePConn.getCaseInfo().isAssignmentInCreateStage();
+          const isLocalAction =
+            thePConn.getCaseInfo().isLocalAction() ||
+            (PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION &&
+              getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION, ''));// 2nd arg empty string until typedefs allow it to be optional
+          if (isAssignmentInCreateStage && isInModal && !isLocalAction) {
+            const cancelPromise = cancelCreateStageAssignment(itemKey);
+
+            cancelPromise
+              .then(data => {
+                publish(PUB_SUB_EVENTS.EVENT_CANCEL, data);
+              })
+              .catch(() => {
+                showToast(`${localizedVal('Cancel failed!', localeCategory)}`);
+              });
+          } else {
+            const cancelPromise = cancelAssignment(itemKey);
+
+            cancelPromise
+              .then(data => {
+                publish(PUB_SUB_EVENTS.EVENT_CANCEL, data);
+              })
+              .catch(() => {
+                showToast(`${localizedVal('Cancel failed!', localeCategory)}`);
+              });
+          }
+          break;
+        }
+
+        default:
+          break;
+      }
+    } else if (sButtonType === 'primary') {
+      // eslint-disable-next-line sonarjs/no-small-switch
+      switch (sAction) {
+        case 'finishAssignment': {
+          const finishPromise = finishAssignment(itemKey);
+
+          finishPromise
+            .then(() => {})
+            .catch(() => {
+              showToast(`${localizedVal('Submit failed!', localeCategory)}`);
+            });
+
+          break;
+        }
+
+        default:
+          break;
+      }
+    }
+  }
+
+  return (
+    <div id='Assignment'>
+      {banners}
+      {bHasNavigation ? (
+        <React.Fragment>
+          <MultiStep
+            getPConnect={getPConnect}
+            itemKey={itemKey}
+            actionButtons={actionButtons}
+            onButtonPress={buttonPress}
+            bIsVertical={bIsVertical}
+            arCurrentStepIndicies={arCurrentStepIndicies}
+            arNavigationSteps={arNavigationSteps}
+          >
+            {children}
+          </MultiStep>
+          <Snackbar
+            open={showSnackbar}
+            autoHideDuration={3000}
+            onClose={handleSnackbarClose}
+            message={snackbarMessage}
+            action={
+              <IconButton
+                size='small'
+                aria-label='close'
+                color='inherit'
+                onClick={handleSnackbarClose}
+              >
+                <CloseIcon fontSize='small' />
+              </IconButton>
+            }
+          />
+        </React.Fragment>
+      ) : (
+        <React.Fragment>
+          <AssignmentCard
+            getPConnect={getPConnect}
+            itemKey={itemKey}
+            actionButtons={actionButtons}
+            onButtonPress={buttonPress}
+          >
+            {children}
+          </AssignmentCard>
+          <Snackbar
+            open={showSnackbar}
+            autoHideDuration={3000}
+            onClose={handleSnackbarClose}
+            message={snackbarMessage}
+            action={
+              <IconButton
+                size='small'
+                aria-label='close'
+                color='inherit'
+                onClick={handleSnackbarClose}
+              >
+                <CloseIcon fontSize='small' />
+              </IconButton>
+            }
+          />
+        </React.Fragment>
+      )}
+    </div>
+  );
+}
+
+// From WC SDK
+// const aHtml = html`
+// ${this.bHasNavigation?
+//   html`
+//     <div class="psdk-stepper">
+//     <multi-step-component .pConn=${this.pConn} .arChildren=${this.arChildren} itemKey=${this.itemKey}
+//         .arMainButtons=${this.arMainButtons} .arSecondaryButtons=${this.arSecondaryButtons}
+//         .bIsVertical=${this.bIsVertical} .arCurrentStepIndicies=${this.arCurrentStepIndicies}
+//         .arNavigationSteps=${this.arNavigationSteps}
+//         @MultiStepActionButtonClick="${this._onActionButtonClick}">
+//     </multi-step-component>
+//     <lit-toast></lit-toast>
+//     </div>`
+//     :
+//   html`
+//     <div>
+//         <assignment-card-component .pConn=${this.pConn} .arChildren=${this.arChildren} itemKey=${this.itemKey}
+//           .arMainButtons=${this.arMainButtons} .arSecondaryButtons=${this.arSecondaryButtons}
+//           @AssignmentActionButtonClick="${this._onActionButtonClick}">
+//         </assignment-card-component>
+//         <lit-toast></lit-toast>
+//     </div>`}
+// `;

package/tests/assets/components/SDK-React/create/override-sdk/infra/Assignment/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/infra/AssignmentCard/AssignmentCard.tsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from "react";
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+import ActionButtons from "@pega/react-sdk-components/lib/components/infra/ActionButtons";
+
+interface AssignmentCardProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  actionButtons: any,
+  onButtonPress: any,
+  // eslint-disable-next-line react/no-unused-prop-types
+  itemKey?: string
+}
+
+
+export default function AssignmentCard(props: AssignmentCardProps) {
+  const { children, actionButtons, onButtonPress} = props;
+
+  const [arMainButtons, setArMainButtons] = useState([]);
+  const [arSecondaryButtons, setArSecondaryButtons] = useState([]);
+
+  useEffect( ()=> {
+    if (actionButtons) {
+      setArMainButtons(actionButtons.main);
+      setArSecondaryButtons(actionButtons.secondary);
+    }
+  }, [actionButtons]);
+
+  function buttonPress(sAction, sType) {
+    onButtonPress(sAction, sType);
+  }
+
+  return (
+    <>
+      {children}
+      {
+        arMainButtons && arSecondaryButtons && <ActionButtons arMainButtons={arMainButtons} arSecondaryButtons={arSecondaryButtons} onButtonPress={buttonPress}></ActionButtons>
+      }
+    </>
+  )
+}

package/tests/assets/components/SDK-React/create/override-sdk/infra/AssignmentCard/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/infra/DashboardFilter/DashboardFilter.tsx

@@ -0,0 +1,176 @@
+/* eslint-disable no-shadow */
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable operator-assignment */
+import { useRef, useEffect, useState, Fragment, forwardRef } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { debounce } from 'throttle-debounce';
+import { createFilter, combineFilters, getFormattedDate } from './filterUtils';
+import { getFilterExpression } from './filterUtils';
+import { TextField } from '@material-ui/core';
+import React from 'react';
+import DatePicker from 'react-datepicker';
+
+import 'react-datepicker/dist/react-datepicker.css';
+
+// import type { PConnProps } from '../../../types/PConnProps';
+
+// Can't use DashboardFilter props until createComponent typedefs properly allow optional args
+// interface DashboardFilterProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   children?: Array<any>,
+//   name: string,
+//   filterProp: string,
+//   type?: string,
+//   metadata?: any
+// }
+
+
+export default function DashboardFilter(props /* : DashboardFilterProps */) {
+  const { children = [], name, filterProp, type = '', metadata = null, getPConnect } = props;
+  const { current: filterId } = useRef(uuidv4());
+
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+
+  useEffect(() => {
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL,
+      () => {
+        if (type === 'Dropdown') {
+          getPConnect().getActionsApi().updateFieldValue(filterProp, '');
+        } else if (type === 'RadioButtons') {
+          const reference = getPConnect().getFullReference() + filterProp;
+          const radList = document.getElementsByName(reference);
+          for (let i = 0; i < radList.length; i = i + 1) {
+            if ((radList[i] as HTMLInputElement).value === '') {
+              (radList[i] as HTMLInputElement).checked = true;
+            } else {
+              (radList[i] as HTMLInputElement).checked = false;
+            }
+          }
+        } else {
+          getPConnect().getActionsApi().updateFieldValue(filterProp, undefined);
+          if (type === 'DateTime') {
+            setStartDate(null);
+            setEndDate(null);
+          }
+        }
+      },
+      filterId,
+      false,
+      getPConnect().getContextName()
+    );
+    return function cleanup() {
+      PCore.getPubSubUtils().unsubscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL,
+        filterId,
+        getPConnect().getContextName()
+      );
+    };
+  });
+
+  const fireFilterChange = filterValue => {
+    const filterData = {
+      filterId,
+      filterExpression: getFilterExpression(filterValue, name, metadata)
+    };
+
+    PCore.getPubSubUtils().publish(
+      PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
+      filterData
+    );
+  };
+
+  const fireFilterChangeDebounced = debounce(500, fireFilterChange);
+  const dateRangeChangeHandler = value => {
+    const { start, end } = value;
+
+    let startDate = getFormattedDate(start);
+    let endDate = getFormattedDate(end);
+
+    if (startDate && endDate) {
+      startDate = `${startDate}T00:00:00`;
+      endDate = `${endDate}T00:00:00`;
+      const startFilter = createFilter(startDate, name, 'GT');
+      const endFilter = createFilter(endDate, name, 'LT');
+
+      const filterData = {
+        filterId,
+        filterExpression: combineFilters([startFilter, endFilter], null)
+      };
+      PCore.getPubSubUtils().publish(
+        PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
+        filterData
+      );
+    }
+  };
+
+  const renderAutoComplete = () => {
+    metadata.config.onRecordChange = e => {
+      fireFilterChange(e.id);
+    };
+    return getPConnect().createComponent(metadata);
+  };
+
+  const onChange = dates => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+    dateRangeChangeHandler({ start, end });
+  };
+
+  type TextProps = React.HTMLProps<HTMLInputElement>;
+
+  const label = metadata.config.label.substring(3);
+
+  const CustomDateInput = forwardRef<HTMLInputElement, TextProps>(
+    ({ value, onClick }, ref: any) => (
+      <TextField
+        label={label}
+        variant='outlined'
+        fullWidth
+        value={value}
+        size='small'
+        onClick={onClick}
+        ref={ref}
+      >
+        {value}
+      </TextField>
+    )
+  );
+
+  return (
+    <Fragment>
+      {type === 'DateTime' && (
+        <DatePicker
+          onChange={onChange}
+          startDate={startDate}
+          endDate={endDate}
+          selectsRange
+          enableTabLoop={false}
+          customInput={<CustomDateInput />}
+        />
+      )}
+      {type === 'AutoComplete' && (
+        <span
+          onChange={event => {
+            if (event && event.target && !(event.target as HTMLInputElement).value) {
+              fireFilterChange('ALL');
+            }
+          }}
+        >
+          {renderAutoComplete()}
+        </span>
+      )}
+      {children && (
+        <span
+          onChange={event => {
+            fireFilterChangeDebounced((event.target as HTMLInputElement).value);
+          }}
+        >
+          {children}
+        </span>
+      )}
+    </Fragment>
+  );
+}