@pega/react-sdk-overrides 8.8.21 → 8.23.11-debug

package/lib/template/ListView/ListView.tsx

@@ -4,7 +4,9 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 /* eslint-disable no-shadow */
 import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -37,27 +39,7 @@ import { Radio } from '@material-ui/core';
 import Checkbox from '@material-ui/core/Checkbox';
 import { filterData } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
 import './ListView.css';
-import useInit from './hooks';
-import { getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
-import { getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
-import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters/';
-// import type { PConnProps } from '../../../types/PConnProps';
-
-// ListViewProps can't be used until getComponentConfig is NOT private
-// interface ListViewProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   bInForm?: boolean,
-//   globalSearch?: boolean,
-//   referenceList?: Array<any>,
-//   rowClickAction?: any,
-//   selectionMode?: string,
-//   referenceType?: string,
-//   payload?: any,
-//   parameters?: any,
-//   compositeKeys?: any,
-//   showDynamicFields?: boolean,
-//   presets?: any
-// }
+import useInit from './hooks'
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
@@ -75,19 +57,9 @@ let sortColumnId: any;
 
 const filterByColumns: Array<any> = [];
 
-export default function ListView(props /* : ListViewProps */) {
-  const { getPConnect, bInForm = true } = props;
-  const {
-    globalSearch,
-    referenceList,
-    /* rowClickAction, */
-    selectionMode,
-    referenceType,
-    payload,
-    parameters,
-    compositeKeys,
-    showDynamicFields
-  } = props;
+export default function ListView(props) {
+  const { getPConnect, bInForm } = props;
+  const { globalSearch, referenceList, rowClickAction, selectionMode, referenceType, payload, parameters, compositeKeys, showDynamicFields, presets } = props;
   const ref = useRef({}).current;
   const cosmosTableRef = useRef();
   // List component context
@@ -127,8 +99,8 @@ export default function ListView(props /* : ListViewProps */) {
   const filters = useRef({});
 
   // Will contain the list of columns specific for an instance
-  const columnList: any = useRef([]);
-  const filterPayload: any = useRef();
+  let columnList: any = useRef([]);
+  let dashboardFilterPayload: any ;
   // Will be sent in the dashboardFilterPayload
   let selectParam: Array<any> = [];
 
@@ -243,7 +215,7 @@ export default function ListView(props /* : ListViewProps */) {
   };
 
   const AssignDashObjects = ['Assign-Worklist', 'Assign-WorkBasket'];
-  function getHeaderCells(colFields, fields) {
+  function getHeaderCells(colFields, fields, presetFields) {
     const arReturn = colFields.map((field: any, index) => {
       let theField = field.config.value.substring(field.config.value.indexOf(' ') + 1);
       if (theField.indexOf('.') === 0) {
@@ -252,7 +224,7 @@ export default function ListView(props /* : ListViewProps */) {
       const colIndex = fields.findIndex(ele => ele.name === theField);
       const displayAsLink = field.config.displayAsLink;
       const headerRow: any = {};
-      headerRow.id = fields[index].id;
+      headerRow.id = theField;
       headerRow.type = field.type;
       headerRow.displayAsLink = displayAsLink;
       headerRow.numeric =
@@ -262,7 +234,7 @@ export default function ListView(props /* : ListViewProps */) {
         field.type === 'Currency' ||
         false;
       headerRow.disablePadding = false;
-      headerRow.label =  fields[index].label;
+      headerRow.label =  presetFields[index].config.label;
       if (colIndex > -1) {
         headerRow.classID = fields[colIndex].classID;
       }
@@ -277,18 +249,25 @@ export default function ListView(props /* : ListViewProps */) {
     return arReturn;
   }
 
+  function updateFields(arFields, theColumns): Array<any> {
+    const arReturn = arFields.filter(ele => ele.type !== 'reference');
+    arReturn.forEach((field, index) => {
+      arReturn[index].config.name = theColumns[index].id;
+    });
+
+    return arReturn;
+  }
 
   function getUsingData(arTableData): Array<any> {
     if (selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) {
       const record = arTableData?.length > 0 ? arTableData[0] : '';
       if (typeof record === 'object' && !('pyGUID' in record) && !('pyID' in record)) {
         // eslint-disable-next-line no-console
-        console.error(
-          'pyGUID or pyID values are mandatory to select the required row from the list'
-        );
+        console.error('pyGUID or pyID values are mandatory to select the required row from the list');
       }
     }
     const arReturn = arTableData?.map((data: any) => {
+
       const row = data;
 
       return row;
@@ -297,6 +276,52 @@ export default function ListView(props /* : ListViewProps */) {
     return arReturn;
   }
 
+  function updateData(listData: Array<any>, fieldData: Array<any>): Array<any> {
+    const returnList: Array<any> = new Array<any>();
+    listData?.forEach(row => {
+      // copy
+      const rowData = JSON.parse(JSON.stringify(row));
+
+      fieldData.forEach(field => {
+        const config = field.config;
+        let fieldName;
+        let formattedDate;
+        let myFormat;
+
+        switch (field.type) {
+          case 'Date':
+            fieldName = config.name;
+            myFormat = config.formatter;
+            if (!myFormat) {
+              myFormat = 'Date';
+            }
+            formattedDate = Utils.generateDate(rowData[fieldName], myFormat);
+
+            rowData[fieldName] = formattedDate;
+            break;
+
+          case 'DateTime':
+            fieldName = config.name;
+            myFormat = config.formatter;
+            if (!myFormat) {
+              myFormat = 'DateTime-Long';
+            }
+            formattedDate = Utils.generateDateTime(rowData[fieldName], myFormat);
+
+            rowData[fieldName] = formattedDate;
+            break;
+
+          default:
+            break;
+        }
+      });
+
+      returnList.push(rowData);
+    });
+
+    return returnList;
+  }
+
   function getMyColumnList(arCols: Array<any>): Array<string> {
     const myColList: Array<string> = [];
 
@@ -321,7 +346,7 @@ export default function ListView(props /* : ListViewProps */) {
   // Will be triggered when EVENT_DASHBOARD_FILTER_CHANGE fires
   function processFilterChange(data) {
     const { filterId, filterExpression } = data;
-    let dashboardFilterPayload : any = {
+    dashboardFilterPayload = {
       query: {
         filter: {},
         select: []
@@ -337,14 +362,14 @@ export default function ListView(props /* : ListViewProps */) {
     let field = getFieldFromFilter(filterExpression, isDateRange);
     selectParam = [];
     // Constructing the select parameters list (will be sent in dashboardFilterPayload)
-    columnList.current?.forEach(col => {
+    columnList.forEach(col => {
       selectParam.push({
         field: col
       });
     });
 
     // Checking if the triggered filter is applicable for this list
-    if (data.filterExpression !== null && !(columnList.current?.length && columnList.current?.includes(field))) {
+    if (data.filterExpression !== null && !(columnList.length && columnList.includes(field))) {
       return;
     }
     // This is a flag which will be used to reset dashboardFilterPayload in case we don't find any valid filters
@@ -365,7 +390,7 @@ export default function ListView(props /* : ListViewProps */) {
       isDateRange = filter?.AND ? true : false;
       field = getFieldFromFilter(filter, isDateRange);
 
-      if (!(columnList.current?.length && columnList.current?.includes(field))) {
+      if (!(columnList.length && columnList.includes(field))) {
         // eslint-disable-next-line no-continue
         continue;
       }
@@ -373,7 +398,7 @@ export default function ListView(props /* : ListViewProps */) {
       validFilter = true;
       /** Below are the 2 cases for- Text & Date-Range filter types where we'll construct filter data which will be sent in the dashboardFilterPayload
        * In Constellation DX Components, through Repeating Structures they might be using several APIs to do it. We're doing it here
-       */
+      */
       if (isDateRange) {
         const dateRelationalOp = filter?.AND ? 'AND' : 'OR';
         dashboardFilterPayload.query.filter.filterConditions = {
@@ -382,13 +407,11 @@ export default function ListView(props /* : ListViewProps */) {
           [`T${index++}`]: { ...filter[relationalOp][1].condition }
         };
         if (dashboardFilterPayload.query.filter.logic) {
-          dashboardFilterPayload.query.filter.logic = `${
-            dashboardFilterPayload.query.filter.logic
-          } ${relationalOp} (T${index - 2} ${dateRelationalOp} T${index - 1})`;
+          dashboardFilterPayload.query.filter.logic = `${dashboardFilterPayload.query.filter.logic} ${relationalOp} (T${
+            index - 2
+          } ${dateRelationalOp} T${index - 1})`;
         } else {
-          dashboardFilterPayload.query.filter.logic = `(T${index - 2} ${relationalOp} T${
-            index - 1
-          })`;
+          dashboardFilterPayload.query.filter.logic = `(T${index - 2} ${relationalOp} T${index - 1})`;
         }
 
         dashboardFilterPayload.query.select = selectParam;
@@ -399,9 +422,9 @@ export default function ListView(props /* : ListViewProps */) {
         };
 
         if (dashboardFilterPayload.query.filter.logic) {
-          dashboardFilterPayload.query.filter.logic = `${
-            dashboardFilterPayload.query.filter.logic
-          } ${relationalOp} T${index - 1}`;
+          dashboardFilterPayload.query.filter.logic = `${dashboardFilterPayload.query.filter.logic} ${relationalOp} T${
+            index - 1
+          }`;
         } else {
           dashboardFilterPayload.query.filter.logic = `T${index - 1}`;
         }
@@ -414,40 +437,57 @@ export default function ListView(props /* : ListViewProps */) {
     if (!validFilter) {
       dashboardFilterPayload = undefined;
     }
-    filterPayload.current = dashboardFilterPayload;
+
     fetchDataFromServer();
   }
 
   // Will be triggered when EVENT_DASHBOARD_FILTER_CLEAR_ALL fires
   function processFilterClear() {
-    filterPayload.current = undefined;
+    dashboardFilterPayload = undefined;
     fetchDataFromServer();
   }
 
+  useEffect(() => {
+    setTimeout(() => {
+      PCore.getPubSubUtils().subscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
+        data => {
+          processFilterChange(data);
+        },
+        `dashboard-component-${'id'}`,
+        false,
+        getPConnect().getContextName()
+      );
+      PCore.getPubSubUtils().subscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL,
+        () => {
+          filters.current = {};
+          processFilterClear();
+        },
+        `dashboard-component-${'id'}`,
+        false,
+        getPConnect().getContextName()
+      );
+    }, 0);
+  }, []);
+
   function fetchAllData(fields) {
     let query: any = null;
     if (payload) {
       query = payload.query;
     } else if (fields?.length && meta.isQueryable) {
-      if (filterPayload.current) {
-        query = { select: fields, filter: filterPayload.current?.query?.filter };
-      } else {
-        query = { select: fields };
-      }
-    } else if (filterPayload.current) {
-      query = filterPayload.current?.query;
+      query = {select: fields};
+    } else if (dashboardFilterPayload) {
+      query = dashboardFilterPayload.query;
     }
     const context = getPConnect().getContextName();
-    // getDataAsync isn't returning correct data for the Page(i.e. ListView within a page) case
-    return !bInForm
-      ? PCore.getDataApiUtils().getData(referenceList, payload)
-      : PCore.getDataPageUtils().getDataAsync(
-          referenceList,
-          context,
-          payload ? payload.dataViewParameters : dataViewParameters,
-          null,
-          query
-        );
+    return PCore.getDataPageUtils().getDataAsync(
+      referenceList,
+      context,
+      payload ? payload.dataViewParameters : dataViewParameters,
+      null,
+      query
+    );
   }
 
   const buildSelect = (fieldDefs, colId, patchQueryFields = [], compositeKeys = []) => {
@@ -486,22 +526,18 @@ export default function ListView(props /* : ListViewProps */) {
     return listFields;
   };
 
-  const addItemKeyInSelect = (fieldDefs, itemKey, select, compositeKeys) => {
+  const addItemKeyInSelect = (
+    fieldDefs,
+    itemKey,
+    select,
+    compositeKeys
+  ) => {
     const elementFound = getField(fieldDefs, itemKey);
 
-    if (
-      itemKey &&
-      !elementFound &&
-      Array.isArray(select) &&
-      !(compositeKeys !== null && compositeKeys?.length) &&
-      !select.find(sel => sel.field === itemKey)
-    ) {
-      return [
-        ...select,
-        {
-          field: itemKey
-        }
-      ];
+    if (itemKey && !elementFound && Array.isArray(select) && !(compositeKeys !== null && compositeKeys?.length) && !select.find(sel => sel.field === itemKey)) {
+      return [...select, {
+        field: itemKey
+      }];
     }
 
     return select;
@@ -523,18 +559,19 @@ export default function ListView(props /* : ListViewProps */) {
   async function fetchDataFromServer() {
     let bCallSetRowsColumns = true;
     const { fieldDefs, itemKey, patchQueryFields } = meta;
-    let listFields = fieldDefs
-      ? buildSelect(fieldDefs, undefined, patchQueryFields, compositeKeys)
-      : [];
+    let listFields = fieldDefs ? buildSelect(fieldDefs, undefined, patchQueryFields, compositeKeys) : [];
     listFields = addItemKeyInSelect(fieldDefs, itemKey, listFields, compositeKeys);
     const workListJSON = await fetchAllData(listFields);
 
+    // don't update these fields until we return from promise
+    let fields = presets[0].children[0].children;
+
     // this is an unresovled version of this.fields$, need unresolved, so can get the property reference
     const columnFields = componentConfig.presets[0].children[0].children;
 
-    const tableDataResults = !bInForm ? workListJSON['data'].data : workListJSON['data'];
+    const tableDataResults = workListJSON['data'];
 
-    const myColumns = getHeaderCells(columnFields, fieldDefs);
+    const myColumns = getHeaderCells(columnFields, fieldDefs, fields);
 
     const selectParams: any = [];
 
@@ -550,14 +587,16 @@ export default function ListView(props /* : ListViewProps */) {
       colList.push(col.field);
     });
 
-    columnList.current = colList;
+    columnList = colList;
+
+    fields = updateFields(fields, myColumns);
 
     setResponse(tableDataResults);
 
     const usingDataResults = getUsingData(tableDataResults);
 
     // store globally, so can be searched, filtered, etc.
-    myRows = usingDataResults;
+    myRows = updateData(usingDataResults, fields);
     myDisplayColumnList = getMyColumnList(myColumns);
 
     // At this point, if we have data ready to render and haven't been asked
@@ -581,43 +620,6 @@ export default function ListView(props /* : ListViewProps */) {
   useEffect(() => {
     if (listContext.meta) {
       fetchDataFromServer();
-      setTimeout(() => {
-        PCore.getPubSubUtils().subscribe(
-          PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
-          data => {
-            processFilterChange(data);
-          },
-          `dashboard-component-${'id'}`,
-          false,
-          getPConnect().getContextName()
-        );
-        PCore.getPubSubUtils().subscribe(
-          PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL,
-          () => {
-            filters.current = {};
-            processFilterClear();
-          },
-          `dashboard-component-${'id'}`,
-          false,
-          getPConnect().getContextName()
-        );
-      }, 0);
-    }
-    return function cleanupSubscriptions() {
-
-      PCore.getPubSubUtils().unsubscribe(
-        PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
-        `dashboard-component-${'id'}`,
-        false,
-        getPConnect().getContextName()
-      );
-      PCore.getPubSubUtils().unsubscribe(
-        PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL,
-        `dashboard-component-${'id'}`,
-        false,
-        getPConnect().getContextName()
-      );
-
     }
   }, [listContext]);
 
@@ -667,7 +669,7 @@ export default function ListView(props /* : ListViewProps */) {
     const { pxRefObjectClass, pzInsKey } = row;
     const sTarget = thePConn.getContainerName();
 
-    const options = { containerName: sTarget, channelName: '' };
+    const options = { containerName: sTarget };
 
     thePConn
       .getActionsApi()
@@ -680,17 +682,17 @@ export default function ListView(props /* : ListViewProps */) {
       });
   }
 
-  // function _rowClick(row: any) {
-  //   // eslint-disable-next-line sonarjs/no-small-switch
-  //   switch (rowClickAction) {
-  //     case 'openAssignment':
-  //       openAssignment(row);
-  //       break;
+  function _rowClick(row: any) {
+    // eslint-disable-next-line sonarjs/no-small-switch
+    switch (rowClickAction) {
+      case 'openAssignment':
+        openAssignment(row);
+        break;
 
-  //     default:
-  //       break;
-  //   }
-  // }
+      default:
+        break;
+    }
+  }
 
   function openWork(row) {
     const { pxRefObjectKey } = row;
@@ -899,7 +901,7 @@ export default function ListView(props /* : ListViewProps */) {
   }
 
   function _listViewClick(row, column) {
-    const name = column.id;
+    const name = column.id
     if (column.displayAsLink) {
       const { pxObjClass } = row;
       let { pzInsKey } = row;
@@ -909,8 +911,7 @@ export default function ListView(props /* : ListViewProps */) {
       }
       if (column.isAssignmentLink) {
         thePConn.getActionsApi().openAssignment(pzInsKey, pxObjClass, {
-          containerName: 'primary',
-          channelName: ''
+          containerName: 'primary'
         });
       } else {
         thePConn.getActionsApi().openWorkByHandle(pzInsKey, pxObjClass);
@@ -929,12 +930,13 @@ export default function ListView(props /* : ListViewProps */) {
           break;
       }
     }
+
   }
 
   function _listTitle() {
     const defaultTitle = 'List';
-    let title = resolvedConfigProps.title || resolvedConfigProps?.label || defaultTitle;
-    const inheritedProps = resolvedConfigProps?.['inheritedProps'];
+    let title = resolvedConfigProps.title ? resolvedConfigProps.title : defaultTitle;
+    const inheritedProps = resolvedConfigProps?.inheritedProps;
 
     // Let any title in resolvedConfigProps that isn't the default take precedence
     //  but only look in inheritedProps if they exist
@@ -957,12 +959,14 @@ export default function ListView(props /* : ListViewProps */) {
       const index = response.findIndex(element => element[rowID] === value);
       const selectedRow = response[index];
       compositeKeys.forEach(element => {
-        reqObj[element] = selectedRow[element];
+        reqObj[element] = selectedRow[element]
       });
     } else {
       reqObj[rowID] = value;
     }
-    getPConnect()?.getListActions?.()?.setSelectedRows([reqObj]);
+    getPConnect()
+      ?.getListActions?.()
+      ?.setSelectedRows([reqObj]);
     setSelectedValue(value);
   };
 
@@ -974,42 +978,16 @@ export default function ListView(props /* : ListViewProps */) {
       const index = response.findIndex(element => element[rowID] === value);
       const selectedRow = response[index];
       compositeKeys.forEach(element => {
-        reqObj[element] = selectedRow[element];
+        reqObj[element] = selectedRow[element]
       });
       reqObj['$selected'] = checked;
     } else {
       reqObj[rowID] = value;
       reqObj['$selected'] = checked;
     }
-    getPConnect()?.getListActions()?.setSelectedRows([reqObj]);
-  };
-
-  const processColumnValue = (column, value) => {
-    let val;
-    const type = column.type;
-    let theDateFormatInfo;
-    let theFormat;
-    let theCurrencyOptions;
-    switch (type) {
-      case 'Date':
-      case 'DateTime':
-        theDateFormatInfo = getDateFormatInfo();
-        theFormat =
-          type === 'DateTime'
-            ? `${theDateFormatInfo.dateFormatStringLong} hh:mm a`
-            : theDateFormatInfo.dateFormatStringLong;
-        val = format(value, column.type, { format: theFormat });
-        break;
-
-      case 'Currency':
-        theCurrencyOptions = getCurrencyOptions(PCore?.getEnvironmentInfo()?.getLocale());
-        val = format(value, column.type, theCurrencyOptions);
-        break;
-
-      default:
-        val = column.format && typeof value === 'number' ? column.format(value) : value;
-    }
-    return val;
+    getPConnect()
+      ?.getListActions()
+      ?.setSelectedRows([reqObj]);
   };
 
   return (
@@ -1026,20 +1004,20 @@ export default function ListView(props /* : ListViewProps */) {
               </Grid>
               <Grid item>
                 <TextField
-                  label={PCore.getLocaleUtils().getLocaleValue('Search', 'Search')}
+                  label={ PCore.getLocaleUtils().getLocaleValue('Search', 'Search') }
                   fullWidth
                   variant='outlined'
                   placeholder=''
                   size='small'
-                  id='search'
+                  id="search"
                   onChange={_onSearch}
                 />
               </Grid>
             </Grid>
           )}
           <>
-            {!bInForm ? (
-              <TableContainer id="list-view" className={classes.tableInForm}>
+            {bInForm ? (
+              <TableContainer className={classes.tableInForm}>
                 <Table stickyHeader aria-label='sticky table'>
                   <TableHead>
                     <TableRow>
@@ -1081,7 +1059,12 @@ export default function ListView(props /* : ListViewProps */) {
                       .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                       .map(row => {
                         return (
-                          <TableRow key={row.pxRefObjectInsName || row.pyID}>
+                          <TableRow
+                            key={row.pxRefObjectInsName || row.pyID}
+                            onClick={() => {
+                              _rowClick(row);
+                            }}
+                          >
                             {arColumns.map(column => {
                               const value = row[column.id];
                               return (
@@ -1118,7 +1101,7 @@ export default function ListView(props /* : ListViewProps */) {
                 </Table>
               </TableContainer>
             ) : (
-              <TableContainer id="list-view">
+              <TableContainer>
                 <Table>
                   <TableHead>
                     <TableRow>
@@ -1155,7 +1138,12 @@ export default function ListView(props /* : ListViewProps */) {
                         .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                         .map(row => {
                           return (
-                            <TableRow key={row[rowID]}>
+                            <TableRow
+                              key={row[rowID]}
+                              onClick={() => {
+                                _rowClick(row);
+                              }}
+                            >
                               {selectionMode === SELECTION_MODE.SINGLE && (
                                 <TableCell>
                                   <Radio
@@ -1183,7 +1171,9 @@ export default function ListView(props /* : ListViewProps */) {
                                     key={column.id}
                                     align={column.align}
                                   >
-                                    {processColumnValue(column, value)}
+                                    {column.format && typeof value === 'number'
+                                      ? column.format(value)
+                                      : value}
                                   </TableCell>
                                 );
                               })}
@@ -1318,3 +1308,10 @@ export default function ListView(props /* : ListViewProps */) {
     </>
   );
 }
+
+ListView.defaultProps = {
+};
+
+ListView.propTypes = {
+  getPConnect: PropTypes.func.isRequired
+};