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

package/lib/components/template/ListView/ListView.js

@@ -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 } from '@material-ui/core/styles';
+import { Utils } from '../../helpers/utils';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -38,25 +40,6 @@ import Checkbox from '@material-ui/core/Checkbox';
 import { filterData } from '../../helpers/simpleTableHelpers';
 import './ListView.css';
 import useInit from './hooks';
-import { getDateFormatInfo } from '../../helpers/date-format-utils';
-import { getCurrencyOptions } from '../../field/Currency/currency-utils';
-import { format } from '../../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
-// }
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 let myRows;
 let myDisplayColumnList;
@@ -65,11 +48,9 @@ let menuColumnType = '';
 let menuColumnLabel = '';
 let sortColumnId;
 const filterByColumns = [];
-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
@@ -98,8 +79,8 @@ export default function ListView(props /* : ListViewProps */) {
     // This basically will hold the list of all current filters
     const filters = useRef({});
     // Will contain the list of columns specific for an instance
-    const columnList = useRef([]);
-    const filterPayload = useRef();
+    let columnList = useRef([]);
+    let dashboardFilterPayload;
     // Will be sent in the dashboardFilterPayload
     let selectParam = [];
     // dataview parameters coming from the ListPage
@@ -197,7 +178,7 @@ export default function ListView(props /* : ListViewProps */) {
         setPage(0);
     };
     const AssignDashObjects = ['Assign-Worklist', 'Assign-WorkBasket'];
-    function getHeaderCells(colFields, fields) {
+    function getHeaderCells(colFields, fields, presetFields) {
         const arReturn = colFields.map((field, index) => {
             let theField = field.config.value.substring(field.config.value.indexOf(' ') + 1);
             if (theField.indexOf('.') === 0) {
@@ -206,7 +187,7 @@ export default function ListView(props /* : ListViewProps */) {
             const colIndex = fields.findIndex(ele => ele.name === theField);
             const displayAsLink = field.config.displayAsLink;
             const headerRow = {};
-            headerRow.id = fields[index].id;
+            headerRow.id = theField;
             headerRow.type = field.type;
             headerRow.displayAsLink = displayAsLink;
             headerRow.numeric =
@@ -216,7 +197,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;
             }
@@ -230,6 +211,13 @@ export default function ListView(props /* : ListViewProps */) {
         });
         return arReturn;
     }
+    function updateFields(arFields, theColumns) {
+        const arReturn = arFields.filter(ele => ele.type !== 'reference');
+        arReturn.forEach((field, index) => {
+            arReturn[index].config.name = theColumns[index].id;
+        });
+        return arReturn;
+    }
     function getUsingData(arTableData) {
         if (selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) {
             const record = arTableData?.length > 0 ? arTableData[0] : '';
@@ -244,6 +232,43 @@ export default function ListView(props /* : ListViewProps */) {
         });
         return arReturn;
     }
+    function updateData(listData, fieldData) {
+        const returnList = new Array();
+        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) {
         const myColList = [];
         arCols.forEach(col => {
@@ -265,7 +290,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 = {
+        dashboardFilterPayload = {
             query: {
                 filter: {},
                 select: []
@@ -279,13 +304,13 @@ 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
@@ -303,7 +328,7 @@ export default function ListView(props /* : ListViewProps */) {
             // eslint-disable-next-line no-unneeded-ternary
             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;
             }
@@ -311,7 +336,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 = {
@@ -345,35 +370,37 @@ 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 = 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 };
-            }
+            query = { select: fields };
         }
-        else if (filterPayload.current) {
-            query = filterPayload.current?.query;
+        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 = []) => {
         const listFields = [];
@@ -412,17 +439,10 @@ export default function ListView(props /* : ListViewProps */) {
     };
     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,
-                {
+        if (itemKey && !elementFound && Array.isArray(select) && !(compositeKeys !== null && compositeKeys?.length) && !select.find(sel => sel.field === itemKey)) {
+            return [...select, {
                     field: itemKey
-                }
-            ];
+                }];
         }
         return select;
     };
@@ -440,15 +460,15 @@ 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 myColumns = getHeaderCells(columnFields, fieldDefs);
+        const tableDataResults = workListJSON['data'];
+        const myColumns = getHeaderCells(columnFields, fieldDefs, fields);
         const selectParams = [];
         myColumns.forEach(column => {
             selectParams.push({
@@ -459,11 +479,12 @@ export default function ListView(props /* : ListViewProps */) {
         selectParams.forEach(col => {
             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
         //  to NOT call setRows and setColumns, call them
@@ -484,20 +505,7 @@ 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]);
     function searchFilter(value, rows) {
         function filterArray(el) {
@@ -536,7 +544,7 @@ export default function ListView(props /* : ListViewProps */) {
     function openAssignment(row) {
         const { pxRefObjectClass, pzInsKey } = row;
         const sTarget = thePConn.getContainerName();
-        const options = { containerName: sTarget, channelName: '' };
+        const options = { containerName: sTarget };
         thePConn
             .getActionsApi()
             .openAssignment(pzInsKey, pxRefObjectClass, options)
@@ -547,16 +555,16 @@ export default function ListView(props /* : ListViewProps */) {
             showToast(`openAssignment failed!`);
         });
     }
-    // function _rowClick(row: any) {
-    //   // eslint-disable-next-line sonarjs/no-small-switch
-    //   switch (rowClickAction) {
-    //     case 'openAssignment':
-    //       openAssignment(row);
-    //       break;
-    //     default:
-    //       break;
-    //   }
-    // }
+    function _rowClick(row) {
+        // eslint-disable-next-line sonarjs/no-small-switch
+        switch (rowClickAction) {
+            case 'openAssignment':
+                openAssignment(row);
+                break;
+            default:
+                break;
+        }
+    }
     function openWork(row) {
         const { pxRefObjectKey } = row;
         const pxRefObjectClass = row.pxRefObjectClass || row.pxObjClass;
@@ -742,8 +750,7 @@ export default function ListView(props /* : ListViewProps */) {
             }
             if (column.isAssignmentLink) {
                 thePConn.getActionsApi().openAssignment(pzInsKey, pxObjClass, {
-                    containerName: 'primary',
-                    channelName: ''
+                    containerName: 'primary'
                 });
             }
             else {
@@ -765,8 +772,8 @@ export default function ListView(props /* : ListViewProps */) {
     }
     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
         if (title === defaultTitle && inheritedProps) {
@@ -792,7 +799,9 @@ export default function ListView(props /* : ListViewProps */) {
         else {
             reqObj[rowID] = value;
         }
-        getPConnect()?.getListActions?.()?.setSelectedRows([reqObj]);
+        getPConnect()
+            ?.getListActions?.()
+            ?.setSelectedRows([reqObj]);
         setSelectedValue(value);
     };
     const onCheckboxClick = event => {
@@ -811,32 +820,9 @@ export default function ListView(props /* : ListViewProps */) {
             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 (React.createElement(React.Fragment, null,
         arColumns && arColumns.length > 0 && (React.createElement(Paper, { className: classes.paper },
@@ -845,8 +831,8 @@ export default function ListView(props /* : ListViewProps */) {
                 React.createElement(Grid, { item: true },
                     React.createElement(SearchIcon, null)),
                 React.createElement(Grid, { item: true },
-                    React.createElement(TextField, { label: PCore.getLocaleUtils().getLocaleValue('Search', 'Search'), fullWidth: true, variant: 'outlined', placeholder: '', size: 'small', id: 'search', onChange: _onSearch })))),
-            React.createElement(React.Fragment, null, !bInForm ? (React.createElement(TableContainer, { id: "list-view", className: classes.tableInForm },
+                    React.createElement(TextField, { label: PCore.getLocaleUtils().getLocaleValue('Search', 'Search'), fullWidth: true, variant: 'outlined', placeholder: '', size: 'small', id: "search", onChange: _onSearch })))),
+            React.createElement(React.Fragment, null, bInForm ? (React.createElement(TableContainer, { className: classes.tableInForm },
                 React.createElement(Table, { stickyHeader: true, "aria-label": 'sticky table' },
                     React.createElement(TableHead, null,
                         React.createElement(TableRow, null, arColumns.map(column => {
@@ -862,7 +848,9 @@ export default function ListView(props /* : ListViewProps */) {
                     React.createElement(TableBody, null, stableSort(arRows, getComparator(order, orderBy))
                         .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                         .map(row => {
-                        return (React.createElement(TableRow, { key: row.pxRefObjectInsName || row.pyID }, arColumns.map(column => {
+                        return (React.createElement(TableRow, { key: row.pxRefObjectInsName || row.pyID, onClick: () => {
+                                _rowClick(row);
+                            } }, arColumns.map(column => {
                             const value = row[column.id];
                             return (React.createElement(TableCell, { key: column.id, align: column.align, className: classes.cell }, _showButton(column.id, row) || column.displayAsLink ? (React.createElement(Link, { component: 'button', onClick: () => {
                                     _listViewClick(row, column);
@@ -872,7 +860,7 @@ export default function ListView(props /* : ListViewProps */) {
                                 ? column.format(value)
                                 : value))));
                         })));
-                    }))))) : (React.createElement(TableContainer, { id: "list-view" },
+                    }))))) : (React.createElement(TableContainer, null,
                 React.createElement(Table, null,
                     React.createElement(TableHead, null,
                         React.createElement(TableRow, null,
@@ -889,14 +877,18 @@ export default function ListView(props /* : ListViewProps */) {
                         stableSort(arRows, getComparator(order, orderBy))
                             .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                             .map(row => {
-                            return (React.createElement(TableRow, { key: row[rowID] },
+                            return (React.createElement(TableRow, { key: row[rowID], onClick: () => {
+                                    _rowClick(row);
+                                } },
                                 selectionMode === SELECTION_MODE.SINGLE && (React.createElement(TableCell, null,
                                     React.createElement(Radio, { onChange: handleChange, value: row[rowID], name: 'radio-buttons', inputProps: { 'aria-label': 'A' }, checked: selectedValue === row[rowID] }))),
                                 selectionMode === SELECTION_MODE.MULTI && (React.createElement(TableCell, null,
                                     React.createElement(Checkbox, { onChange: onCheckboxClick, value: row[rowID] }))),
                                 arColumns.map(column => {
                                     const value = row[column.id];
-                                    return (React.createElement(TableCell, { className: classes.cell, key: column.id, align: column.align }, processColumnValue(column, value)));
+                                    return (React.createElement(TableCell, { className: classes.cell, key: column.id, align: column.align }, column.format && typeof value === 'number'
+                                        ? column.format(value)
+                                        : value));
                                 })));
                         }))),
                 arRows && arRows.length === 0 && (React.createElement("div", { className: 'no-records' }, "No records found."))))),
@@ -933,4 +925,8 @@ export default function ListView(props /* : ListViewProps */) {
         React.createElement(Snackbar, { open: showSnackbar, autoHideDuration: 3000, onClose: handleSnackbarClose, message: snackbarMessage, action: React.createElement(IconButton, { size: 'small', "aria-label": 'close', color: 'inherit', onClick: handleSnackbarClose },
                 React.createElement(CloseIcon, { fontSize: 'small' })) })));
 }
+ListView.defaultProps = {};
+ListView.propTypes = {
+    getPConnect: PropTypes.func.isRequired
+};
 //# sourceMappingURL=ListView.js.map