@pega/custom-dx-components 0.23.20 → 0.23.21

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/date.js.mustache

@@ -0,0 +1,161 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import tzone from 'dayjs/plugin/timezone.js';
+import { formatDateTime, parseToDate } from '@pega/cosmos-react-core';
+
+import formatConstants from './format-constants.js';
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+dayjs.extend(utc);
+dayjs.extend(tzone);
+
+export const COSMOS_FORMAT_CONSTANTS = {
+  SHORT: 'short',
+  LONG: 'long'
+};
+
+export const COSMOS_VARIANT_CONSTANTS = {
+  DATE_TIME: 'datetime',
+  DATE: 'date',
+  RELATIVE: 'relative',
+  TIME: 'time'
+};
+
+export const DATE_TYPES = {
+  DATE: 'date',
+  DATE_TIME: 'datetime',
+  TIME: 'time'
+};
+
+const constellationToCosmosFormatterMap = new Map([
+  [
+    DATE_TYPES.DATE,
+    new Map([
+      [
+        formatConstants.DateTimeLong,
+        { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }
+      ],
+      [
+        formatConstants.DateTimeShort,
+        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE }
+      ],
+      [
+        formatConstants.DateTimeSince,
+        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.RELATIVE }
+      ],
+      [formatConstants.DateDefault, { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE }]
+    ])
+  ],
+  [
+    DATE_TYPES.TIME,
+    new Map([
+      [formatConstants.TimeDefault, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.TIME }],
+      [formatConstants.TimeOnly, { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.TIME }]
+    ])
+  ],
+  [
+    DATE_TYPES.DATE_TIME,
+    new Map([
+      [
+        formatConstants.DateTimeDefault,
+        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }
+      ],
+      [
+        formatConstants.DateTimeShort,
+        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE }
+      ],
+      [
+        formatConstants.DateTimeSince,
+        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.RELATIVE }
+      ],
+      [
+        formatConstants.DateTimeLong,
+        { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }
+      ],
+      [formatConstants.TimeOnly, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.TIME }]
+    ])
+  ]
+]);
+const types = ['fromNow', 'customFormat'];
+
+// value should be in ISO 8601 format.
+// eslint-disable-next-line no-shadow
+function DateFormatter(value, { type = types[1], format = 'DD/MM/YYYY', timezone, fieldType } = {}) {
+  if (!value) return value;
+  switch (type) {
+    case types[1]:
+      if (timezone && !(fieldType === 'Date' || fieldType === 'Date only'))
+        return dayjs(value).tz(timezone).format(format); // Date only value should be formatted without timezone
+      return dayjs(value).format(format);
+    case types[0]:
+      return dayjs(value).from(dayjs());
+    default:
+      return value;
+  }
+}
+// value should be in hh:mm:ss format (00:00:00 - 23:59:59).
+// function TimeFormatter(value, options) {
+//   if (!value) return value;
+//   const { locale = 'en-US' } = options;
+//   const timeOnlyRegex = /^(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)$/;
+//   if (value.length === 8 && timeOnlyRegex.test(value)) {
+//     const { timeOptions = {} } = options;
+//     const tempDate = new Date();
+//     const hours = parseInt(value.substr(0, 2), 10);
+//     const minutes = parseInt(value.substr(3, 2), 10);
+//     const seconds = parseInt(value.substr(6, 2), 10);
+//     tempDate.setHours(hours);
+//     tempDate.setMinutes(minutes);
+//     tempDate.setSeconds(seconds);
+//     return tempDate.toLocaleTimeString(locale, timeOptions);
+//   }
+//   return DateFormatter(value, options);
+// }
+
+// function DateTimeShortFormatter(value, options) {
+//   return DateFormatter(value, {
+//     ...options,
+//     type: 'customFormat',
+//     format: 'MMM DD, YYYY'
+//   });
+// }
+
+export function format(value, options) {
+  if (!value) return null;
+  const { type, locale, timezone, formatter, translate } = options;
+  // eslint-disable-next-line no-shadow
+  const { format, variant } = constellationToCosmosFormatterMap.get(type).get(formatter);
+  return formatDateTime(parseToDate(value), {
+    t: translate,
+    locale,
+    format,
+    variant,
+    timeZone: type === DATE_TYPES.DATE_TIME ? timezone : 'UTC'
+  });
+}
+
+export default {
+  'DateTime-Long': (value, options) => format(value, { ...options, formatter: 'DateTime-Long' }),
+  'DateTime-Short': (value, options) => format(value, { ...options, formatter: 'DateTime-Short' }),
+  'DateTime-Since': (value, options) => format(value, { ...options, formatter: 'DateTime-Since' }),
+  'Time-Only': (value, options) => format(value, { ...options, formatter: 'Time-Only' }),
+  convertToTimezone: (value, options) => {
+    return value && options && options.timezone
+      ? DateFormatter(value, {
+          ...options,
+          type: 'customFormat',
+          format: 'YYYY-MM-DDTHH:mm:ss'
+        })
+      : value;
+  },
+  convertFromTimezone: (value, timezone) =>
+    value && timezone ? dayjs.tz(value, timezone).utc().format('YYYY-MM-DDTHH:mm:ss[Z]') : value,
+  Date: (value, options) => DateFormatter(value, { type: 'customFormat', ...options }),
+  'Date-Default': (value, options) => format(value, { ...options, formatter: 'Date-Default' }),
+  'Date-Time-Default': (value, options) => format(value, { ...options, formatter: 'Date-Time-Default' }),
+  'Time-Default': (value, options) => format(value, { ...options, formatter: 'Time-Default' })
+};

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/demo.stories.jsx.mustache

@@ -0,0 +1,90 @@
+
+/* eslint-disable storybook/prefer-pascal-case */
+/* eslint-disable react/jsx-no-useless-fragment */
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { configProps, rawMetadata, fieldMetadata, stateProps } from './mock.js';
+
+import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [value, setValue] = useState(configProps.value);
+  const datasourceMetadata = fieldMetadata;
+
+  const props = {
+    value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    helperText: configProps.helperText,
+    datasource: configProps.datasource,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+    columns: [],
+    isTableFormatter: false,
+    listType: 'associated',
+    parameters: {},
+    datasourceMetadata,
+    fieldMetadata,
+
+    getPConnect: () => {
+      return {
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: val => {
+          return val;
+        },
+        getLocaleRuleNameFromKeys: (localeClass, localeContext, localeName) => {
+          return `${localeClass}!${localeContext}!${localeName}`;
+        },
+        getCaseInfo: () => {
+          return {
+            getClassName: () => {
+              return 'DIXL-MediaCo-Work-NewService';
+            }
+          };
+        },
+        getRawMetadata: () => {
+          return rawMetadata;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        getValidationApi: () => {
+          return {
+            validate: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/embed-utils.js.mustache

@@ -0,0 +1,310 @@
+import { isEmbeddedField, isPageListInPath, PAGE, PAGELIST, buildAggOrCalcId } from './repeat-utils.js';
+
+export const AT_FILTEREDLIST = '@FILTERED_LIST';
+export const AT_PROPERTY = '@P';
+
+/**
+ * [getFieldNameFromEmbeddedFieldName]
+ * Description    -               converting embeddedField name starting with !P! or !PL! to normal field
+ * @ignore
+ * @param {string} propertyName   EmbeddedField name starting with !P! or !PL!
+ * @returns {string}              returns converted string without !P! or !PL! and :
+ *
+ * @example <caption>Example for getFieldNameFromEmbeddedFieldName </caption>
+ * getFieldNameFromEmbeddedFieldName('!P!Organisation:Name') return 'Organisation.Name'
+ * getFieldNameFromEmbeddedFieldName('!PL!Employees:Name') return 'Employees.Name'
+ */
+export function getFieldNameFromEmbeddedFieldName(propertyName) {
+  let value = propertyName;
+  if (value.startsWith(PAGE) || value.startsWith(PAGELIST)) {
+    value = value.substring(value.lastIndexOf('!') + 1);
+    value = value.replace(/:/g, '.');
+  }
+  return value;
+}
+/**
+ * [getEmbeddedFieldName]
+ * Description    -               converting normal field name to embedded field starting with !P! or !PL!
+ * @ignore
+ * @param {string} propertyName   Field name
+ * @param {string} classID        classID of datapage
+ * @returns {string}              returns converted string with !P! or !PL! and :
+ *
+ * @example <caption>Example for getEmbeddedFieldName </caption>
+ * For page property, getEmbeddedFieldName('Organisation.Name') return '!P!Organisation:Name'
+ * For pageList property, getEmbeddedFieldName('Employees.Name') return '!PL!Employees:Name'
+ */
+
+export function getEmbeddedFieldName(propertyName, classID) {
+  let value = propertyName;
+  if (isPageListInPath(value, classID)) {
+    value = `!PL!${value.replace(/\./g, ':')}`;
+  } else {
+    value = `!P!${value.replace(/\./g, ':')}`;
+  }
+  return value;
+}
+
+/**
+ * [updateMetaEmbeddedFieldID]
+ * Description    -           If the fieldID in meta starts with '!P!' or '!PL!' and contains ':' then replace them with .(dot)
+ * @ignore
+ * @param {Array} metaFields  Fields metadata Array. Contains metadata of all the fields.
+ */
+export function updateMetaEmbeddedFieldID(metaFields) {
+  return metaFields.forEach((metaField) => {
+    if (metaField.fieldID?.startsWith(PAGE) || metaField.fieldID?.startsWith(PAGELIST)) {
+      metaField.fieldID = getFieldNameFromEmbeddedFieldName(metaField.fieldID);
+    }
+  });
+}
+
+/**
+ * [getConfigEmbeddedFieldsMeta]
+ * Description    -           Get the metadata for configured embedded fields
+ * @ignore
+ * @param {Set} configFields  Set of config fields
+ * @param {string} classID    clasID of datapage
+ * @returns {Array}           Metadata of configured embedded fields
+ */
+export function getConfigEmbeddedFieldsMeta(configFields, classID) {
+  const configEmbeddedFieldsMeta = [];
+  configFields.forEach((field) => {
+    let value = field;
+    if (isEmbeddedField(value)) {
+      // conversion Page.PageList[].property => Page.PageList.property
+      if (value.includes('[')) {
+        value = value.substring(0, value.indexOf('[')) + value.substring(value.indexOf(']') + 1);
+      }
+      const meta = PCore.getMetadataUtils().getEmbeddedPropertyMetadata(value, classID);
+      meta.fieldID = field;
+      configEmbeddedFieldsMeta.push(meta);
+    }
+  });
+  return configEmbeddedFieldsMeta;
+}
+
+/**
+ * [mergeConfigEmbeddedFieldsMeta]
+ * Description    -           Get the metadata for configured embedded fields
+ * @ignore
+ * @param {Array} configEmbeddedFieldsMeta  config fields metadata.
+ * @param {Array} metaFields  Fields metadata Array. Contains metadata of all the fields
+ */
+export function mergeConfigEmbeddedFieldsMeta(configEmbeddedFieldsMeta, metaFields) {
+  const mergedMetaFields = [...metaFields];
+  configEmbeddedFieldsMeta.forEach((configFieldMeta) => {
+    const fieldMeta = metaFields.find((metaField) => metaField.fieldID === configFieldMeta.fieldID);
+    if (!fieldMeta) mergedMetaFields.push(configFieldMeta);
+  });
+  return mergedMetaFields;
+}
+
+/**
+ * [preparePropertyValue]
+ * Description    -        Preparing pageList value from FILTERED_LIST annotation to Property annotation
+ * @ignore
+ * @param {string} value   Pagelist value starts with FILTERED_LIST annotation
+ * @returns {string}       returns converted string starting with Property annotation
+ *
+ * @example <caption>Example for preparePropertyValue </caption>
+ * preparePropertyValue('@FILTERED_LIST .Employees[].Name') return '@P .Employees.Name'
+ */
+// FIXME #EmbeddedPropertyPatch
+// TODO: Remove this utility when we have nested response for queryable pageList and supports @FILTERED_LIST annotation
+export function preparePropertyValue(value) {
+  if (value.startsWith(AT_FILTEREDLIST)) {
+    value = value.substring(value.indexOf(' ') + 1);
+    value = value.substring(0, value.indexOf('[')) + value.substring(value.indexOf(']') + 1);
+    value = `${AT_PROPERTY} ${value}`;
+  }
+  return value;
+}
+
+/**
+ * [updatePageListFieldsConfig]
+ * Description    -        updating configured pageList property's type and value
+ * @ignore
+ * @param {Array} configFields  configured fields
+ *
+ * @example <caption>Modified config pageListField </caption>
+ *
+    {
+      "type": "ScalarList",
+      "config": {
+        "value": "@FILTERED_LIST .Employees[].Name",
+        "label": "@L Emp_Name",
+        "componentType": "TextInput",
+        "readOnly": true
+      }
+    }
+    modified to
+    {
+      "type": "TextInput",
+      "config": {
+        "value": "@P .Employees.Name",
+        "label": "@L Emp_Name",
+        "componentType": "TextInput",
+        "readOnly": true
+      }
+    }
+ */
+// FIXME #EmbeddedPropertyPatch
+// TODO: Remove this utility when we have nested response for queryable pageList and supports scalarList component
+export function updatePageListFieldsConfig(configFields) {
+  return configFields.forEach((item) => {
+    if (item.type === 'ScalarList') {
+      if (!item.config.originalValue) {
+        item.config.originalValue = item.config.value;
+      }
+      item.config.value = preparePropertyValue(item.config.value);
+    }
+  });
+}
+
+/**
+ * Update the renderer type for the properties of type Page.
+ */
+export function updatePageFieldsConfig(configFields, parentClassID) {
+  return configFields.forEach((item) => {
+    const {
+      type,
+      config: { value }
+    } = item;
+    const propertyName = PCore.getAnnotationUtils().getPropertyName(value);
+    if (isEmbeddedField(value) && !isPageListInPath(propertyName, parentClassID)) {
+      item.config.componentType = type;
+      item.type = 'PagePropertyRenderer';
+    }
+  });
+}
+
+export function updateChangeSetValueKeys(changeSetObj, getOriginalProperty) {
+  const newChangeSetObject = {};
+  for (const [key, value] of Object.entries(changeSetObj)) {
+    let newKey = key;
+    if (newKey.startsWith(PAGE)) {
+      newKey = `.${getOriginalProperty(newKey)}`;
+    }
+    newChangeSetObject[newKey] = value;
+  }
+  return newChangeSetObject;
+}
+
+/**
+ * [isPageListProperty]
+ * Description    -        checking if propertyName is pageList or not
+ * @ignore
+ * @param {string} propertyName   PropertyName
+ * @returns {boolean}  true if property is pageList else false
+ *
+ * @example <caption>Example for isPageListProperty </caption>
+ * isPageListProperty('!PL!Employees.Name') return true
+ * isPageListProperty('!P!Employees.Name') return false
+ * isPageListProperty('Name') return false
+ */
+export function isPageListProperty(propertyName) {
+  return propertyName.startsWith(PAGELIST);
+}
+
+/**
+ * [preparePropertyMaps]
+ * Description    -        preparing maps for property names and set it in dataApi context
+ * @ignore
+ * @param {Array} fields   fields array
+ * @param {string} classID  classID of datapage
+ * @param {string} context  dataApi context
+ * @returns {boolean} true if pageListProperty is present
+ */
+export function preparePropertyMaps(fields, classID, context) {
+  const { setPropertyMaps } = context;
+  const maps = fields.reduce(
+    (acc, field) => {
+      let { value } = field.config;
+      if (value.startsWith('@')) {
+        value = value.substring(value.indexOf(' ') + 1);
+        if (value[0] === '.') value = value.substring(1);
+      }
+      let name = value;
+      // Preparing name for embedded property
+      if (isEmbeddedField(name)) {
+        name = getEmbeddedFieldName(name, classID);
+      }
+      if (isPageListProperty(name) && !acc[2]) {
+        acc[2] = true;
+      }
+      acc[0][value] = name;
+      acc[1][name] = value;
+
+      return acc;
+    },
+    [{}, {}, false]
+  );
+  setPropertyMaps(maps[0], maps[1]);
+  return maps[2];
+}
+
+/**
+ * [getPageListFields]
+ * Description    -        getting pageListFields names from the fields
+ * @ignore
+ * @param {Array} fields   fields array
+ * @returns {Array} array of pageListFields name
+ */
+// FIXME #EmbeddedPropertyPatch
+// TODO: Remove this utility when we have nested response for queryable pageList property
+export function getPageListFields(fields) {
+  const parentPaths = new Set();
+  const pageListFields = [];
+  fields.forEach((field) => {
+    const { name } = field;
+    if (isPageListProperty(name)) {
+      const parentPath = name.substring(0, name.lastIndexOf(':'));
+      if (!parentPaths.has(parentPath)) {
+        parentPaths.add(parentPath);
+        pageListFields.push(name);
+      }
+    }
+  });
+  return pageListFields;
+}
+
+export function mergePageListFieldAggregation(pageListName, select, existingAggregations, existingAggregationsName) {
+  // Build a dummy genericAggregationId to check if any type of aggregation for that pagelist is included in existing aggregations.
+  const genericAggregationId = buildAggOrCalcId(pageListName, '');
+  if (existingAggregationsName.includes(genericAggregationId)) {
+    return;
+  }
+  const countAggregationId = buildAggOrCalcId(pageListName, 'COUNT');
+  select.push({ aggregation: countAggregationId });
+  existingAggregations[countAggregationId] = { field: pageListName, summaryFunction: 'COUNT' };
+}
+
+export function mergePageListFieldsAggregation(fields, select, existingAggregations) {
+  const parentPaths = new Set();
+  const existingAggregationsName = Object.keys(existingAggregations).toString();
+  const pageListFields = [];
+  fields.forEach((field) => {
+    const { name } = field;
+    if (isPageListProperty(name)) {
+      const parentPath = name.substring(0, name.lastIndexOf(':'));
+      if (!parentPaths.has(parentPath)) {
+        parentPaths.add(parentPath);
+        pageListFields.push(name);
+        mergePageListFieldAggregation(name, select, existingAggregations, existingAggregationsName);
+      }
+    }
+  });
+  return pageListFields;
+}
+
+/**
+ * [hasPageListProperty]
+ * Description    -        getting pageListFields names from the fields
+ * @ignore
+ * @param {Array} fieldDefs   fields array
+ * @returns {object | undefined} value of first pageListProperty found
+ */
+export function hasPageListProperty(fieldDefs) {
+  return fieldDefs?.find((field) => isPageListProperty(field.name));
+}

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/event-utils.ts.mustache

@@ -0,0 +1,18 @@
+const handleEvent = (actions: any, eventType: string, propName: string, value: string) => {
+  switch (eventType) {
+    case 'change':
+      actions.updateFieldValue(propName, value);
+      break;
+    case 'blur':
+      actions.triggerFieldChange(propName, value);
+      break;
+    case 'changeNblur':
+      actions.updateFieldValue(propName, value);
+      actions.triggerFieldChange(propName, value);
+      break;
+    default:
+      break;
+  }
+};
+
+export default handleEvent;

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/format-constants.js.mustache

@@ -0,0 +1,41 @@
+// Constellation standard formatters name to format a value of a given type(Eg. Date, Time, Email, Boolean etc.)
+export default {
+  DateTimeLong: 'DateTime-Long',
+  DateTimeShort: 'DateTime-Short',
+  DateTimeSince: 'DateTime-Since',
+  TimeOnly: 'Time-Only',
+  DateDefault: 'Date-Default',
+  DateTimeDefault: 'Date-Time-Default',
+  TimeDefault: 'Time-Default',
+  CheckCross: 'CheckCross',
+  YesNo: 'Yes/No',
+  TrueFalse: 'True/False',
+  TextInput: 'TextInput',
+  WorkStatus: 'WorkStatus',
+  Email: 'Email',
+  Phone: 'Phone',
+  URL: 'URL',
+  Integer: 'Integer',
+  Decimal: 'Decimal',
+  DecimalAuto: 'Decimal-Auto',
+  Currency: 'Currency',
+  CurrencyCode: 'Currency-Code',
+  CurrencyCompact: 'Currency-Compact',
+  Percentage: 'Percentage',
+  RichText: 'RichText',
+  Operator: 'Operator',
+  WorkLink: 'WorkLink',
+  UserReference: 'UserReference',
+  AssignmentLink: 'AssignmentLink',
+  RowActionMenu: 'RowActionMenu',
+  CellAction: 'CellAction',
+  RowSelectHandle: 'RowSelectHandle',
+  SelectAllCheckbox: 'selectAllCheckboxRenderer',
+  RowDragDropHandle: 'RowDragDropHandle',
+  NumberDefault: 'Number-Default',
+  TextDefault: 'Text-Default',
+  BooleanDefault: 'Boolean-Default',
+  OpenInModal: 'OpenInModal',
+  Address: 'Address',
+  ObjectReference: 'ObjectReference'
+};