@pega/custom-dx-components 0.0.1 → 0.8.2

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/index.jsx.mustache

@@ -0,0 +1,110 @@
+/* eslint-disable no-nested-ternary */
+import { Fragment } from 'react';
+import { DateTimeDisplay, Card, CardHeader, CardContent, Flex } from '@pega/cosmos-react-core';
+import PropTypes from 'prop-types';
+
+// includes in bundle
+import Operator from './Operator.jsx';
+
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+
+// 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 {{COMPONENT_CLASS_NAME}}(props) {
+
+  const {
+    getPConnect,
+    title,
+    label,
+    createLabel,
+    updateLabel,
+    createOperator,
+    updateOperator,
+    createDateTime,
+    updateDateTime,
+    resolveLabel,
+    resolveOperator,
+    resolveDateTime,
+    hideLabel
+  } = props;
+
+
+  const [_label, user, dateTimeValue] =
+    label === 'Create operator'
+      ? [createLabel, createOperator, createDateTime]
+      : label === 'Update operator'
+      ? [updateLabel, updateOperator, updateDateTime]
+      : [resolveLabel, resolveOperator, resolveDateTime];
+
+
+
+  return user.userId && user.userName ? (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <Card>
+      <CardHeader>{title}</CardHeader>
+      <CardContent>
+{{! pick new delimiteres for mustache }} {{=<% %>=}}
+      <Flex container={{ direction: 'row'}}>
+      <Operator label={hideLabel ? null : _label} name={user.userName} id={user.userId} getPConnect={getPConnect} />
+
+<%={{ }}=%>     {{! revert delimiteres for mustache }}
+      {dateTimeValue && (
+        <Fragment>
+          {' '}
+          <DateTimeDisplay value={dateTimeValue} variant='relative' />
+        </Fragment>
+      )}
+      </Flex>
+      </CardContent>
+      </Card>
+
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  ) : (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    defVal
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  );
+
+
+
+}
+
+{{COMPONENT_CLASS_NAME}}.defaultProps = {
+  "label": "Create operator",
+  "title": "Create operator",
+  createLabel: null,
+  updateLabel: null,
+  createOperator: null,
+  updateOperator: null,
+  createDateTime: null,
+  updateDateTime: null,
+  resolveLabel: null,
+  resolveOperator: null,
+  resolveDateTime: null,
+  hideLabel: false
+};
+
+{{COMPONENT_CLASS_NAME}}.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  title: PropTypes.string,
+  createLabel: PropTypes.string,
+  updateLabel: PropTypes.string,
+  resolveLabel: PropTypes.string,
+  createOperator: PropTypes.objectOf(PropTypes.any),
+  updateOperator: PropTypes.objectOf(PropTypes.any),
+  resolveOperator: PropTypes.objectOf(PropTypes.any),
+  createDateTime: PropTypes.string,
+  updateDateTime: PropTypes.string,
+  resolveDateTime: PropTypes.string,
+  hideLabel: PropTypes.bool
+};
+
+// as objects are there in props, shallow comparision fails & re-rendering of comp happens even with
+// same key value pairs in obj. hence using custom comparison function on when to re-render
+// const comparisonFn = (prevProps, nextProps) => {
+//   return prevProps.updateDateTime === nextProps.updateDateTime;
+// };

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/mock.stories.js.mustache

@@ -0,0 +1,51 @@
+export const configProps = {
+  label: 'Create operator',
+  createLabel: 'Created',
+  updateLabel: 'Updated',
+  updateDateTime: '2023-01-16T14:53:33.280Z',
+  createDateTime: '2023-01-16T14:53:33.198Z',
+  updateOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  createOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  hideLabel: true,
+  key: '_532zx1dah',
+  displayMode: 'LABELS_LEFT'
+};
+
+export const operatorDetails = {
+  data: {
+    pzLoadTime: 'January 18, 2023 10:33:19 AM EST',
+    pzPageNameHash: '_pa1519192551088960pz',
+    pyOperatorInfo: {
+      pyUserName: 'french DigV2',
+      pyPosition: '',
+      pyImageInsKey: '',
+      pySkills: [
+        {
+          pySkillName: '',
+          pzIndexOwnerKey: 'DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2',
+          pySkillRating: 0
+        }
+      ],
+      pyReportToUserName: '',
+      pyReportTo: '',
+      pyOrganization: 'DXIL',
+      pyTitle: '',
+      pyLabel: 'frenchTest.DigV2',
+      pyEmailAddress: 'User@DigV2',
+      pyTelephone: ''
+    }
+  },
+  status: 200,
+  statusText: '',
+  headers: {
+    'content-length': '435',
+    'content-type': 'application/json;charset=UTF-8'
+  },
+  request: {}
+};

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/styles.js.mustache

@@ -0,0 +1,14 @@
+// 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;
+//  `;
+// });

package/src/tasks/create/templates/Launchpad/Field/__components.md

@@ -0,0 +1,3 @@
+# The **Field** directory
+
+The **Lanchpad/Field** directory contains the template code for the field components you want to use with the **WebComponents SDK**.

package/src/tasks/create/templates/Launchpad/Template/__components.md

@@ -0,0 +1,3 @@
+# The **Template** directory
+
+The **Launchpad/Field** directory contains the template code for the field components you want to use with the **WebComponents SDK**.

package/src/tasks/create/templates/Launchpad/Widget/CASE/OneColumnPage.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1 col </title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="100" height="70"></rect>
+    </defs>
+    <g id="Concepts" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Templates" transform="translate(-98.000000, -108.000000)">
+            <g id="Change-template" transform="translate(42.000000, 36.000000)">
+                <g id="1-col-" transform="translate(56.000000, 72.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <rect stroke="#A5A8BC" stroke-width="0.5" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                    <g id="white" mask="url(#mask-2)" fill="#FFFFFF">
+                        <g transform="translate(3.000000, 3.000000)" id="Rectangle">
+                            <rect x="0" y="0" width="94" height="66.5"></rect>
+                        </g>
+                    </g>
+                    <g id="gray" mask="url(#mask-2)" fill="#8084A7">
+                        <g transform="translate(6.000000, 6.000000)" id="Rectangle">
+                            <rect x="0" y="-2.84217094e-14" width="88" height="77.8"></rect>
+                        </g>
+                    </g>
+                    <g id="labels" mask="url(#mask-2)" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500">
+                        <g transform="translate(44.000000, 17.000000)" id="A">
+                            <text>
+                                <tspan x="0.75" y="12" fill="#FFFFFF">A</tspan>
+                            </text>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/tasks/create/templates/Launchpad/Widget/CASE/config.json.mustache

@@ -0,0 +1,23 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "OneColumnPage.svg",
+  "properties": [
+   {
+      "name": "label",
+      "label": "Label value",
+      "format": "TEXT"
+    }
+  ],
+  "defaultConfig": {
+     "label": "@L $this.label"
+  }
+}

package/src/tasks/create/templates/Launchpad/Widget/CASE/demo.stories.jsx.mustache

@@ -0,0 +1,78 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+
+import historyData from './mock.stories';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getConstants = () => {
+  return {
+    CASE_INFO: {
+      CASE_INFO_ID: 'caseInfo.ID'
+    }
+  };
+};
+
+window.PCore.getLocaleUtils = () => {
+  return {
+    getLocaleValue: value => {
+      return value;
+    }
+  };
+};
+
+window.PCore.getDataApiUtils = () => {
+  return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(historyData);
+      });
+    }
+  };
+};
+
+export const base{{COMPONENT_CLASS_NAME}} = () => {
+
+  const props = {
+    label: 'Case history',
+
+    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} />
+    </>
+  );
+};

package/src/tasks/create/templates/Launchpad/Widget/CASE/index.jsx.mustache

@@ -0,0 +1,76 @@
+/* eslint-disable no-undef */
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Table, Text } from '@pega/cosmos-react-core';
+
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+
+// Code for Launchpad
+
+// 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 {{COMPONENT_CLASS_NAME}}(props) {
+  const { getPConnect, label } = props;
+  const pConn = getPConnect();
+  const [history, setHistory] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const caseID = pConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
+  const context = pConn.getContextName();
+
+  const columns = [
+    { renderer: 'date', label: pConn.getLocalizedValue('Date') },
+    { renderer: 'description', label: pConn.getLocalizedValue('Description') },
+    { renderer: 'user', label: pConn.getLocalizedValue('Performed by') }
+  ];
+
+  useEffect(() => {
+    const payload = { dataViewParameters: [{ ObjectID: caseID }] };
+    PCore.getDataApiUtils()
+      .getData('ObjectHistory', payload, context)
+      .then((response) => {
+        setIsLoading(false);
+        if (response.data.data !== null) {
+          setHistory(
+            response.data.data.map((entry, index) => {
+              {{! pick new delimiteres for mustache }}
+              {{=<% %>=}}
+              return {
+                date: new Date(entry.CreateDateTime).toLocaleString(),
+                description: <Text style={{ wordBreak: 'break-word' }}>{entry.MessageText}</Text>,
+                user: entry.PerformerID,
+                id: index
+              };
+              <%={{ }}=%>     {{! revert delimiteres for mustache }}
+            })
+          );
+        } else {
+          setHistory([]);
+        }
+      })
+      .catch(() => {
+        setHistory([]);
+        setIsLoading(false);
+      });
+  }, [caseID, context]);
+  return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    <Table
+      title={pConn.getLocalizedValue(label)}
+      columns={columns}
+      data={history}
+      loading={isLoading}
+      loadingMessage={pConn.getLocalizedValue('Loading case history')}
+    />
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  );
+
+}
+
+{{COMPONENT_CLASS_NAME}}.defaultProps = {
+
+};
+
+{{COMPONENT_CLASS_NAME}}.propTypes = {
+  getPConnect: PropTypes.func.isRequired
+};