@pega/react-sdk-components 0.23.17 → 0.23.19

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

@@ -1,6 +1,8 @@
 /* eslint-disable no-plusplus */
 /* eslint-disable guard-for-in */
 /* eslint-disable @typescript-eslint/no-use-before-define */
+/* 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';
@@ -37,6 +39,7 @@ import { Radio } from '@material-ui/core';
 import Checkbox from '@material-ui/core/Checkbox';
 import { filterData } from '../../helpers/simpleTableHelpers';
 import './ListView.css';
+import useInit from './hooks';
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 let myRows;
 let myDisplayColumnList;
@@ -44,14 +47,18 @@ let menuColumnId = '';
 let menuColumnType = '';
 let menuColumnLabel = '';
 let sortColumnId;
-// let dialogContainsFilter: string = "contains";
-// let dialogContainsValue: string = "";
-// let dialogDateFilter: string = "notequal";
-// let dialogDateValue: string = "";
 const filterByColumns = [];
 export default function ListView(props) {
     const { getPConnect, bInForm } = props;
-    const { globalSearch, presets, referenceList, rowClickAction, selectionMode, referenceType, payload, parameters, compositeKeys } = props;
+    const { globalSearch, referenceList, rowClickAction, selectionMode, referenceType, payload, parameters, compositeKeys, showDynamicFields, presets } = props;
+    const ref = useRef({}).current;
+    const cosmosTableRef = useRef();
+    // List component context
+    const [listContext, setListContext] = useState({});
+    const { meta } = listContext;
+    const xRayApis = PCore.getDebugger().getXRayRuntime();
+    const xRayUid = xRayApis.startXRay();
+    useInit({ ...props, setListContext, ref, showDynamicFields, xRayUid, cosmosTableRef });
     const thePConn = getPConnect();
     const componentConfig = thePConn.getComponentConfig();
     const resolvedConfigProps = thePConn.getConfigProps();
@@ -154,7 +161,6 @@ export default function ListView(props) {
     function stableSort(array, comparator) {
         const stabilizedThis = array.map((el, index) => [el, index]);
         stabilizedThis.sort((a, b) => {
-            // eslint-disable-next-line @typescript-eslint/no-shadow, no-shadow
             const order = comparator(a[0], b[0]);
             if (order !== 0)
                 return order;
@@ -171,25 +177,19 @@ export default function ListView(props) {
         setRowsPerPage(+event.target.value);
         setPage(0);
     };
-    // function getDisplayColumns(fields = []) {
-    //   let arReturn = fields.map(( field: any, colIndex) => {
-    //     let theField = field.config.value.substring(field.config.value.indexOf(" ")+1);
-    //     if (theField.indexOf(".") == 0) {
-    //       theField = theField.substring(1);
-    //     }
-    //     return theField;
-    //   });
-    //   return arReturn;
-    // }
-    function getHeaderCells(colFields, fields) {
-        const arReturn = colFields.map((field, colIndex) => {
+    const AssignDashObjects = ['Assign-Worklist', 'Assign-WorkBasket'];
+    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) {
                 theField = theField.substring(1);
             }
+            const colIndex = fields.findIndex(ele => ele.name === theField);
+            const displayAsLink = field.config.displayAsLink;
             const headerRow = {};
             headerRow.id = theField;
             headerRow.type = field.type;
+            headerRow.displayAsLink = displayAsLink;
             headerRow.numeric =
                 field.type === 'Decimal' ||
                     field.type === 'Integer' ||
@@ -197,19 +197,28 @@ export default function ListView(props) {
                     field.type === 'Currency' ||
                     false;
             headerRow.disablePadding = false;
-            headerRow.label = fields[colIndex].config.label;
+            headerRow.label = presetFields[index].config.label;
+            if (colIndex > -1) {
+                headerRow.classID = fields[colIndex].classID;
+            }
+            if (displayAsLink) {
+                headerRow.isAssignmentLink = AssignDashObjects.includes(headerRow.classID);
+                if (field.config.value?.startsWith('@CA')) {
+                    headerRow.isAssociation = true;
+                }
+            }
             return headerRow;
         });
         return arReturn;
     }
     function updateFields(arFields, theColumns) {
-        const arReturn = arFields;
-        arFields.forEach((field, index) => {
+        const arReturn = arFields.filter(ele => ele.type !== 'reference');
+        arReturn.forEach((field, index) => {
             arReturn[index].config.name = theColumns[index].id;
         });
         return arReturn;
     }
-    function getUsingData(arTableData, theColumns) {
+    function getUsingData(arTableData) {
         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)) {
@@ -218,21 +227,7 @@ export default function ListView(props) {
             }
         }
         const arReturn = arTableData?.map((data) => {
-            const row = {};
-            theColumns.forEach(col => {
-                row[col.id] = data[col.id];
-            });
-            row[rowID] = data[rowID];
-            // for (const field of theColumns) {
-            //   row[field.id] = data[field.id];
-            // }
-            // add in pxRefObjectClass and pzInsKey
-            if (data['pxRefObjectClass']) {
-                row['pxRefObjectClass'] = data['pxRefObjectClass'];
-            }
-            if (data['pzInsKey']) {
-                row['pzInsKey'] = data['pzInsKey'];
-            }
+            const row = data;
             return row;
         });
         return arReturn;
@@ -279,9 +274,6 @@ export default function ListView(props) {
         arCols.forEach(col => {
             myColList.push(col.id);
         });
-        // for (const col of arCols) {
-        //   myColList.push(col.id);
-        // }
         return myColList;
     }
     /** Will return field from a filter expression */
@@ -311,7 +303,7 @@ export default function ListView(props) {
         const relationalOp = 'AND';
         let field = getFieldFromFilter(filterExpression, isDateRange);
         selectParam = [];
-        // Constructing the select parameters list( will be sent in dashboardFilterPayload)
+        // Constructing the select parameters list (will be sent in dashboardFilterPayload)
         columnList.forEach(col => {
             selectParam.push({
                 field: col
@@ -343,7 +335,7 @@ export default function ListView(props) {
             // If we reach here that implies we've at least one valid filter, hence setting the flag
             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 Nebula, through Repeating Structures they might be using several APIs to do it, we're doing it here
+             * 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';
@@ -396,19 +388,87 @@ export default function ListView(props) {
             }, `dashboard-component-${'id'}`, false, getPConnect().getContextName());
         }, 0);
     }, []);
-    function fetchAllData() {
+    function fetchAllData(fields) {
+        let query = null;
+        if (payload) {
+            query = payload.query;
+        }
+        else if (fields?.length && meta.isQueryable) {
+            query = { select: fields };
+        }
+        else if (dashboardFilterPayload) {
+            query = dashboardFilterPayload.query;
+        }
         const context = getPConnect().getContextName();
-        return PCore.getDataPageUtils().getDataAsync(referenceList, context, payload ? payload.dataViewParameters : dataViewParameters, null, payload ? payload.query : dashboardFilterPayload && dashboardFilterPayload.query);
-    }
+        return PCore.getDataPageUtils().getDataAsync(referenceList, context, payload ? payload.dataViewParameters : dataViewParameters, null, query);
+    }
+    const buildSelect = (fieldDefs, colId, patchQueryFields = [], compositeKeys = []) => {
+        const listFields = [];
+        if (colId) {
+            const field = getField(fieldDefs, colId);
+            listFields.push({
+                field: field.name
+            });
+        }
+        else {
+            // NOTE: If we ever decide to not set up all the `fieldDefs` on select, ensure that the fields
+            //  corresponding to `state.groups` are set up. Needed in Client-mode grouping/pagination.
+            fieldDefs.forEach(field => {
+                if (!listFields.find(f => f.field === field.name)) {
+                    listFields.push({
+                        field: field.name
+                    });
+                }
+            });
+            patchQueryFields.forEach(k => {
+                if (!listFields.find(f => f.field === k)) {
+                    listFields.push({
+                        field: k
+                    });
+                }
+            });
+        }
+        compositeKeys.forEach(k => {
+            if (!listFields.find(f => f.field === k)) {
+                listFields.push({
+                    field: k
+                });
+            }
+        });
+        return listFields;
+    };
+    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
+                }];
+        }
+        return select;
+    };
+    const getField = (fieldDefs, columnId) => {
+        const fieldsMap = getFieldsMap(fieldDefs);
+        return fieldsMap.get(columnId);
+    };
+    const getFieldsMap = fieldDefs => {
+        const fieldsMap = new Map();
+        fieldDefs.forEach(element => {
+            fieldsMap.set(element.id, element);
+        });
+        return fieldsMap;
+    };
     async function fetchDataFromServer() {
         let bCallSetRowsColumns = true;
-        const workListJSON = await fetchAllData();
+        const { fieldDefs, itemKey, patchQueryFields } = meta;
+        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 = workListJSON['data'];
-        const myColumns = getHeaderCells(columnFields, fields);
+        const myColumns = getHeaderCells(columnFields, fieldDefs, fields);
         const selectParams = [];
         myColumns.forEach(column => {
             selectParams.push({
@@ -422,7 +482,7 @@ export default function ListView(props) {
         columnList = colList;
         fields = updateFields(fields, myColumns);
         setResponse(tableDataResults);
-        const usingDataResults = getUsingData(tableDataResults, myColumns);
+        const usingDataResults = getUsingData(tableDataResults);
         // store globally, so can be searched, filtered, etc.
         myRows = updateData(usingDataResults, fields);
         myDisplayColumnList = getMyColumnList(myColumns);
@@ -443,8 +503,10 @@ export default function ListView(props) {
         };
     }
     useEffect(() => {
-        fetchDataFromServer();
-    }, []);
+        if (listContext.meta) {
+            fetchDataFromServer();
+        }
+    }, [listContext]);
     function searchFilter(value, rows) {
         function filterArray(el) {
             const bReturn = false;
@@ -504,7 +566,8 @@ export default function ListView(props) {
         }
     }
     function openWork(row) {
-        const { pxRefObjectClass, pxRefObjectKey } = row;
+        const { pxRefObjectKey } = row;
+        const pxRefObjectClass = row.pxRefObjectClass || row.pxObjClass;
         if (pxRefObjectClass !== '' && pxRefObjectKey !== '') {
             thePConn.getActionsApi().openWorkByHandle(pxRefObjectKey, pxRefObjectClass);
         }
@@ -636,21 +699,6 @@ export default function ListView(props) {
         // move data to array and then sort
         setRows(theData);
         createSortHandler(sortColumnId);
-        // grouping here
-        // let reGroupData = this.addGroups(theData, this.groupByColumns$);
-        // this.repeatList$.data = [];
-        // this.repeatList$.data.push( ...reGroupData);
-        // if (this.searchFilter && this.searchFilter != "") {
-        //   this.repeatList$.filter = this.searchFilter;
-        // }
-        // else {
-        //   this.perfFilter = performance.now().toString();
-        //   this.repeatList$.filter = this.perfFilter;
-        // }
-        // this.repeatList$.filter = "";
-        // if (this.repeatList$.paginator) {
-        //   this.repeatList$.paginator.firstPage();
-        // }
     }
     function _dialogContainsFilter(event) {
         // dialogContainsFilter = event.target.value;
@@ -691,16 +739,35 @@ export default function ListView(props) {
         }
         return bReturn;
     }
-    function _listViewClick(name, row) {
-        switch (name) {
-            case 'pxTaskLabel':
-                openAssignment(row);
-                break;
-            case 'pxRefObjectInsName':
-                openWork(row);
-                break;
-            default:
-                break;
+    function _listViewClick(row, column) {
+        const name = column.id;
+        if (column.displayAsLink) {
+            const { pxObjClass } = row;
+            let { pzInsKey } = row;
+            if (column.isAssociation) {
+                const associationCategory = name.split(':')[0];
+                pzInsKey = row[`${associationCategory}:pzInsKey`];
+            }
+            if (column.isAssignmentLink) {
+                thePConn.getActionsApi().openAssignment(pzInsKey, pxObjClass, {
+                    containerName: 'primary'
+                });
+            }
+            else {
+                thePConn.getActionsApi().openWorkByHandle(pzInsKey, pxObjClass);
+            }
+        }
+        else {
+            switch (name) {
+                case 'pxTaskLabel':
+                    openAssignment(row);
+                    break;
+                case 'pxRefObjectInsName':
+                    openWork(row);
+                    break;
+                default:
+                    break;
+            }
         }
     }
     function _listTitle() {
@@ -764,7 +831,7 @@ export default function ListView(props) {
                 React.createElement(Grid, { item: true },
                     React.createElement(SearchIcon, null)),
                 React.createElement(Grid, { item: true },
-                    React.createElement(TextField, { label: 'Search', fullWidth: true, variant: 'outlined', placeholder: '', size: 'small', onChange: _onSearch })))),
+                    React.createElement(TextField, { label: '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,
@@ -785,8 +852,8 @@ export default function ListView(props) {
                                 _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) ? (React.createElement(Link, { component: 'button', onClick: () => {
-                                    _listViewClick(column.id, row);
+                            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);
                                 } }, column.format && typeof value === 'number'
                                 ? column.format(value)
                                 : value)) : (React.createElement(React.Fragment, null, column.format && typeof value === 'number'
@@ -858,11 +925,8 @@ export default function ListView(props) {
         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 = {
-// parameters: undefined
-};
+ListView.defaultProps = {};
 ListView.propTypes = {
     getPConnect: PropTypes.func.isRequired
-    // parameters: PropTypes.objectOf(PropTypes.any)
 };
 //# sourceMappingURL=ListView.js.map