@pega/react-sdk-components 24.2.10 → 25.1.10

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

@@ -1,8 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable no-plusplus */
-/* eslint-disable @typescript-eslint/no-use-before-define */
-/* eslint-disable @typescript-eslint/no-shadow */
-import { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import createStyles from '@mui/styles/createStyles';
 import makeStyles from '@mui/styles/makeStyles';
 import Table from '@mui/material/Table';
@@ -19,7 +16,7 @@ import FilterListIcon from '@mui/icons-material/FilterList';
 import SubjectIcon from '@mui/icons-material/Subject';
 import SearchIcon from '@mui/icons-material/Search';
 import TextField from '@mui/material/TextField';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Dialog from '@mui/material/Dialog';
@@ -39,6 +36,7 @@ import { filterData } from '../../helpers/simpleTableHelpers';
 import './ListView.css';
 import { getDateFormatInfo } from '../../helpers/date-format-utils';
 import { getCurrencyOptions } from '../../field/Currency/currency-utils';
+import { getGenericFieldsLocalizedValue } from '../../helpers/common-utils';
 import { format } from '../../helpers/formatters';
 import useInit from './hooks';
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
@@ -52,24 +50,23 @@ export default function ListView(props) {
     const { getPConnect, bInForm = true } = props;
     const { globalSearch, referenceList, 
     /* rowClickAction, */
-    selectionMode, referenceType, payload, parameters, compositeKeys, showDynamicFields, readonlyContextList: selectedValues, value } = props;
+    selectionMode, referenceType, payload, parameters, compositeKeys, showDynamicFields, viewName, readonlyContextList: selectedValues, value, displayAs } = props;
+    let { showRecords } = 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();
+    const { current: uniqueId } = useRef(crypto.randomUUID());
     useInit({
         ...props,
         setListContext,
         ref,
         showDynamicFields,
-        xRayUid,
         cosmosTableRef
     });
+    useClearSelectionsAndUpdateTable({ getPConnect, uniqueId, viewName });
     const thePConn = getPConnect();
-    // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
     const componentConfig = thePConn.getComponentConfig();
     const resolvedConfigProps = thePConn.getConfigProps();
     /** By default, pyGUID is used for Data classes and pyID is for Work classes as row-id/key */
@@ -105,10 +102,9 @@ export default function ListView(props) {
             width: '100%',
             marginTop: theme.spacing(2),
             marginBottom: theme.spacing(2),
-            display: 'grid'
-        },
-        search: {
-            padding: '5px 5px'
+            display: 'grid',
+            borderRadius: 16,
+            padding: 20
         },
         table: {
             minWidth: 750
@@ -137,13 +133,35 @@ export default function ListView(props) {
             position: 'absolute',
             top: 20,
             width: 1
-        },
-        title: {
-            marginTop: theme.spacing(1),
-            marginLeft: theme.spacing(1)
         }
     }));
     const classes = useStyles();
+    // Hook to clear the selections and update table in AdvancedSearch template when switching between search views
+    function useClearSelectionsAndUpdateTable({ getPConnect, uniqueId, viewName }) {
+        const clearSelectionsAndRefreshList = useCallback(({ viewName: name, clearSelections }) => {
+            if (name === viewName) {
+                const { selectionMode } = getPConnect().getRawConfigProps();
+                if (!selectionMode) {
+                    return;
+                }
+                if (clearSelections) {
+                    if (selectionMode === 'single') {
+                        getPConnect().getListActions().setSelectedRows({});
+                    }
+                    else {
+                        getPConnect().getListActions().clearSelectedRows();
+                    }
+                }
+            }
+        }, [getPConnect, viewName]);
+        useEffect(() => {
+            const identifier = `clear-and-update-advanced-search-selections-${uniqueId}`;
+            PCore.getPubSubUtils().subscribe('update-advanced-search-selections', clearSelectionsAndRefreshList, identifier);
+            return () => {
+                PCore.getPubSubUtils().unsubscribe('update-advanced-search-selections', identifier);
+            };
+        }, [uniqueId, clearSelectionsAndRefreshList]);
+    }
     const handleRequestSort = (event, property) => {
         const isAsc = orderBy === property && order === 'asc';
         setOrder(isAsc ? 'desc' : 'asc');
@@ -192,18 +210,24 @@ export default function ListView(props) {
                 theField = theField.substring(1);
             }
             const colIndex = fields.findIndex(ele => ele.name === theField);
-            const displayAsLink = field.config.displayAsLink;
+            // const displayAsLink = field.config.displayAsLink;
+            const { additionalDetails = {} } = field.config;
+            let shouldDisplayAsSemanticLink = additionalDetails.type === 'DISPLAY_LINK';
+            // TODO: This "if" check has been added for backward compatibility, to be removed once the users are notified about the changes in view metadata of US-517164
+            if (!shouldDisplayAsSemanticLink) {
+                shouldDisplayAsSemanticLink = 'displayAsLink' in field.config && field.config.displayAsLink;
+            }
             const headerRow = {};
             headerRow.id = fields[index].id;
             headerRow.type = field.type;
-            headerRow.displayAsLink = displayAsLink;
+            headerRow.displayAsLink = shouldDisplayAsSemanticLink;
             headerRow.numeric = field.type === 'Decimal' || field.type === 'Integer' || field.type === 'Percentage' || field.type === 'Currency' || false;
             headerRow.disablePadding = false;
             headerRow.label = fields[index].label;
             if (colIndex > -1) {
                 headerRow.classID = fields[colIndex].classID;
             }
-            if (displayAsLink) {
+            if (shouldDisplayAsSemanticLink) {
                 headerRow.isAssignmentLink = AssignDashObjects.includes(headerRow.classID);
                 if (field.config.value?.startsWith('@CA')) {
                     headerRow.isAssociation = true;
@@ -216,7 +240,6 @@ export default function ListView(props) {
         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');
             }
         }
@@ -237,29 +260,43 @@ export default function ListView(props) {
     }
     // Will be triggered when EVENT_DASHBOARD_FILTER_CHANGE fires
     function processFilterChange(data) {
-        const { filterId, filterExpression } = data;
+        let filterId;
+        let filterExpression;
+        let isDateRange;
+        let field;
         let dashboardFilterPayload = {
             query: {
                 filter: {},
                 select: []
             }
         };
-        filters.current[filterId] = filterExpression;
-        let isDateRange = data.filterExpression?.AND;
-        // Will be AND by default but making it dynamic in case we support dynamic relational ops in future
-        const relationalOp = 'AND';
-        let field = getFieldFromFilter(filterExpression, isDateRange);
-        selectParam = [];
-        // Constructing the select parameters list (will be sent in dashboardFilterPayload)
-        columnList.current.forEach(col => {
-            selectParam.push({
-                field: col
+        if (displayAs === 'advancedSearch') {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            Object.entries(data).reduce((acc, [item, value]) => {
+                const { filterId, filterExpression } = value;
+                filters.current[filterId] = filterExpression;
+                return acc; // Ensure the accumulator is returned
+            }, {});
+        }
+        else {
+            ({ filterId, filterExpression } = data);
+            filters.current[filterId] = filterExpression;
+            isDateRange = data.filterExpression?.AND;
+            field = getFieldFromFilter(filterExpression, isDateRange);
+            selectParam = [];
+            // Constructing the select parameters list (will be sent in dashboardFilterPayload)
+            columnList.current.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))) {
-            return;
+            // Checking if the triggered filter is applicable for this list
+            if (data.filterExpression !== null && !(columnList.current?.length && columnList.current?.includes(field))) {
+                return;
+            }
         }
+        // Will be AND by default but making it dynamic in case we support dynamic relational ops in future
+        const relationalOp = 'AND';
         // This is a flag which will be used to reset dashboardFilterPayload in case we don't find any valid filters
         let validFilter = false;
         let index = 1;
@@ -268,14 +305,12 @@ export default function ListView(props) {
             const filter = filters.current[filterExp];
             // If the filter is null then we can skip this iteration
             if (filter === null) {
-                // eslint-disable-next-line no-continue
                 continue;
             }
             // Checking if the filter is of type- Date Range
             isDateRange = filter?.AND;
             field = getFieldFromFilter(filter, isDateRange);
             if (!(columnList.current.length && columnList.current.includes(field))) {
-                // eslint-disable-next-line no-continue
                 continue;
             }
             // If we reach here that implies we've at least one valid filter, hence setting the flag
@@ -301,7 +336,7 @@ export default function ListView(props) {
             else {
                 dashboardFilterPayload.query.filter.filterConditions = {
                     ...dashboardFilterPayload.query.filter.filterConditions,
-                    [`T${index++}`]: { ...filter.condition, ignoreCase: true }
+                    [`T${index++}`]: { ...filter.condition, ...(filter.condition.comparator === 'CONTAINS' ? { ignoreCase: true } : {}) }
                 };
                 if (dashboardFilterPayload.query.filter.logic) {
                     dashboardFilterPayload.query.filter.logic = `${dashboardFilterPayload.query.filter.logic} ${relationalOp} T${index - 1}`;
@@ -325,6 +360,9 @@ export default function ListView(props) {
         fetchDataFromServer();
     }
     function fetchAllData(fields) {
+        if (displayAs === 'advancedSearch' && !showRecords) {
+            return Promise.resolve({ data: null });
+        }
         let query = null;
         if (payload) {
             query = payload.query;
@@ -455,8 +493,35 @@ export default function ListView(props) {
             bCallSetRowsColumns = false;
         };
     }
+    function prepareFilters(data) {
+        return Object.entries(data.payload).reduce((acc, [field, value]) => {
+            if (value) {
+                let comparator = 'EQ';
+                const filterRecord = listContext.meta.fieldDefs.filter(item => item.id === field);
+                if (filterRecord?.[0]?.meta.type === 'TextInput') {
+                    comparator = 'CONTAINS';
+                }
+                acc[field] = {
+                    filterExpression: {
+                        condition: {
+                            lhs: {
+                                field
+                            },
+                            comparator,
+                            rhs: {
+                                value
+                            }
+                        }
+                    },
+                    filterId: field
+                };
+            }
+            return acc;
+        }, {});
+    }
     useEffect(() => {
         if (listContext.meta) {
+            const identifier = `promoted-filters-queryable-${uniqueId}`;
             fetchDataFromServer();
             setTimeout(() => {
                 PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, data => {
@@ -466,10 +531,16 @@ export default function ListView(props) {
                     filters.current = {};
                     processFilterClear();
                 }, `dashboard-component-${'id'}`, false, getPConnect().getContextName());
+                PCore.getPubSubUtils().subscribe(PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS, data => {
+                    showRecords = data.showRecords;
+                    const filterData = prepareFilters(data);
+                    processFilterChange(filterData);
+                }, identifier);
             }, 0);
             return function cleanupSubscriptions() {
                 PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, `dashboard-component-${'id'}`, getPConnect().getContextName());
                 PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL, `dashboard-component-${'id'}`, getPConnect().getContextName());
+                PCore.getPubSubUtils().unsubscribe(PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS, identifier);
             };
         }
     }, [listContext]);
@@ -500,7 +571,6 @@ export default function ListView(props) {
     }
     function showToast(message) {
         const theMessage = `Assignment: ${message}`;
-        // eslint-disable-next-line no-console
         console.error(theMessage);
         setSnackbarMessage(message);
         setShowSnackbar(true);
@@ -511,7 +581,6 @@ export default function ListView(props) {
         const options = { containerName: sTarget, channelName: '' };
         thePConn
             .getActionsApi()
-            // @ts-ignore
             .openAssignment(pzInsKey, pxRefObjectClass, options)
             .then(() => {
             // console.log("openAssignment successful");
@@ -612,7 +681,6 @@ export default function ListView(props) {
     function _showFilteredIcon(columnId) {
         for (const filterObj of filterByColumns) {
             if (filterObj.ref === columnId) {
-                // eslint-disable-next-line sonarjs/prefer-single-boolean-return
                 if (filterObj.containsFilterValue !== '') {
                     return true;
                 }
@@ -712,7 +780,6 @@ export default function ListView(props) {
                 pzInsKey = row[`${associationCategory}:pzInsKey`];
             }
             if (column.isAssignmentLink) {
-                // @ts-ignore
                 thePConn.getActionsApi().openAssignment(pzInsKey, pxObjClass, {
                     containerName: 'primary',
                     channelName: ''
@@ -807,31 +874,31 @@ export default function ListView(props) {
         }
         return val;
     };
-    return (_jsxs(_Fragment, { children: [arColumns && arColumns.length > 0 && (_jsxs(Paper, { className: classes.paper, children: [_jsx(Typography, { className: classes.title, variant: 'h6', color: 'textPrimary', gutterBottom: true, children: _listTitle() }), globalSearch && (_jsxs(Grid, { container: true, spacing: 1, alignItems: 'flex-end', className: classes.search, children: [_jsx(Grid, { item: true, children: _jsx(SearchIcon, {}) }), _jsx(Grid, { item: true, children: _jsx(TextField, { label: PCore.getLocaleUtils().getLocaleValue('Search', 'Search'), fullWidth: true, variant: 'outlined', placeholder: '', size: 'small', id: 'search', onChange: _onSearch }) })] })), _jsx(_Fragment, { children: !bInForm ? (_jsx(TableContainer, { id: 'list-view', className: classes.tableInForm, children: _jsxs(Table, { stickyHeader: true, "aria-label": 'sticky table', children: [_jsx(TableHead, { children: _jsx(TableRow, { children: arColumns.map(column => {
-                                                return (_jsxs(TableCell, { className: classes.cell, sortDirection: orderBy === column.id ? order : false, children: [_jsxs(TableSortLabel, { active: orderBy === column.id, direction: orderBy === column.id ? order : 'asc', onClick: createSortHandler(column.id), children: [column.label, _showFilteredIcon(column.id) && _jsx(FilterListIcon, { className: classes.filteredIcon }), orderBy === column.id ? (_jsx("span", { className: classes.visuallyHidden, children: order === 'desc' ? 'sorted descending' : 'sorted ascending' })) : null] }), _jsx(MoreIcon, { className: classes.moreIcon, onClick: event => {
-                                                                _menuClick(event, column.id, column.type, column.label);
-                                                            } })] }, column.id));
-                                            }) }) }), _jsx(TableBody, { children: arRows &&
+    return (_jsxs(_Fragment, { children: [arColumns && arColumns.length > 0 && (_jsxs(Paper, { className: classes.paper, children: [_jsxs(Grid2, { container: true, justifyContent: 'space-between', children: [_jsx(Typography, { variant: 'h6', color: 'textPrimary', gutterBottom: true, children: _listTitle() }), globalSearch && (_jsxs(Grid2, { container: true, spacing: 1, alignItems: 'flex-end', children: [_jsx(Grid2, { children: _jsx(SearchIcon, {}) }), _jsx(Grid2, { children: _jsx(TextField, { label: PCore.getLocaleUtils().getLocaleValue('Search', 'Search'), fullWidth: true, variant: 'outlined', placeholder: '', size: 'small', id: 'search', onChange: _onSearch }) })] }))] }), !bInForm ? (_jsx(TableContainer, { id: 'list-view', className: classes.tableInForm, children: _jsxs(Table, { stickyHeader: true, "aria-label": 'sticky table', children: [_jsx(TableHead, { children: _jsx(TableRow, { children: arColumns.map(column => {
+                                            return (_jsxs(TableCell, { className: classes.cell, sortDirection: orderBy === column.id ? order : false, children: [_jsxs(TableSortLabel, { active: orderBy === column.id, direction: orderBy === column.id ? order : 'asc', onClick: createSortHandler(column.id), children: [column.label, _showFilteredIcon(column.id) && _jsx(FilterListIcon, { className: classes.filteredIcon }), orderBy === column.id ? (_jsx("span", { className: classes.visuallyHidden, children: order === 'desc' ? 'sorted descending' : 'sorted ascending' })) : null] }), _jsx(MoreIcon, { className: classes.moreIcon, onClick: event => {
+                                                            _menuClick(event, column.id, column.type, column.label);
+                                                        } })] }, column.id));
+                                        }) }) }), _jsx(TableBody, { children: arRows &&
+                                        stableSort(arRows, getComparator(order, orderBy))
+                                            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                                            .map(row => {
+                                            return (_jsx(TableRow, { children: arColumns.map(column => {
+                                                    const value = row[column.id];
+                                                    return (_jsx(TableCell, { align: column.align, className: classes.cell, children: _showButton(column.id, row) || column.displayAsLink ? (_jsx(Link, { component: 'button', onClick: () => {
+                                                                _listViewClick(row, column);
+                                                            }, underline: 'hover', children: column.format && typeof value === 'number' ? column.format(value) : value })) : (_jsx(_Fragment, { children: column.format && typeof value === 'number' ? column.format(value) : value || '---' })) }, column.id));
+                                                }) }, row.pxRefObjectInsName || row.pyID));
+                                        }) })] }) })) : (_jsxs(TableContainer, { id: 'list-view', children: [_jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && _jsx(TableCell, {}), arColumns.map(column => {
+                                                    return (_jsx(TableCell, { className: classes.cell, sortDirection: orderBy === column.id ? order : false, children: _jsxs(TableSortLabel, { active: orderBy === column.id, direction: orderBy === column.id ? order : 'asc', onClick: createSortHandler(column.id), children: [column.label, orderBy === column.id ? (_jsx("span", { className: classes.visuallyHidden, children: order === 'desc' ? 'sorted descending' : 'sorted ascending' })) : null] }) }, column.id));
+                                                })] }) }), _jsx(TableBody, { children: arRows &&
+                                            arRows.length > 0 &&
                                             stableSort(arRows, getComparator(order, orderBy))
                                                 .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                                                 .map(row => {
-                                                return (_jsx(TableRow, { children: arColumns.map(column => {
-                                                        const value = row[column.id];
-                                                        return (_jsx(TableCell, { align: column.align, className: classes.cell, children: _showButton(column.id, row) || column.displayAsLink ? (_jsx(Link, { component: 'button', onClick: () => {
-                                                                    _listViewClick(row, column);
-                                                                }, underline: 'hover', children: column.format && typeof value === 'number' ? column.format(value) : value })) : (_jsx(_Fragment, { children: column.format && typeof value === 'number' ? column.format(value) : value || '---' })) }, column.id));
-                                                    }) }, row.pxRefObjectInsName || row.pyID));
-                                            }) })] }) })) : (_jsxs(TableContainer, { id: 'list-view', children: [_jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && _jsx(TableCell, {}), arColumns.map(column => {
-                                                        return (_jsx(TableCell, { className: classes.cell, sortDirection: orderBy === column.id ? order : false, children: _jsxs(TableSortLabel, { active: orderBy === column.id, direction: orderBy === column.id ? order : 'asc', onClick: createSortHandler(column.id), children: [column.label, orderBy === column.id ? (_jsx("span", { className: classes.visuallyHidden, children: order === 'desc' ? 'sorted descending' : 'sorted ascending' })) : null] }) }, column.id));
-                                                    })] }) }), _jsx(TableBody, { children: arRows &&
-                                                arRows.length > 0 &&
-                                                stableSort(arRows, getComparator(order, orderBy))
-                                                    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                                                    .map(row => {
-                                                    return (_jsxs(TableRow, { children: [selectionMode === SELECTION_MODE.SINGLE && (_jsx(TableCell, { children: _jsx(Radio, { onChange: handleChange, value: row[rowID], name: 'radio-buttons', inputProps: { 'aria-label': 'A' }, checked: selectedValue === row[rowID] }) })), selectionMode === SELECTION_MODE.MULTI && (_jsx(TableCell, { children: _jsx(Checkbox, { onChange: onCheckboxClick, checked: selectedValues.some(selectedValue => selectedValue[rowID] === row[rowID]), value: row[rowID] }) })), arColumns.map(column => {
-                                                                const value = row[column.id];
-                                                                return (_jsx(TableCell, { className: classes.cell, align: column.align, children: processColumnValue(column, value) }, column.id));
-                                                            })] }, row[rowID]));
-                                                }) })] }), arRows && arRows.length === 0 && _jsx("div", { className: 'no-records', children: "No records found." })] })) }), arRows && arRows.length > 0 && (_jsx(TablePagination, { id: 'pagination', rowsPerPageOptions: [10, 25, 100], component: 'div', count: arRows.length, rowsPerPage: rowsPerPage, page: page, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage }))] })), _jsxs(Menu, { id: 'simple-menu', anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: _menuClose, children: [_jsxs(MenuItem, { onClick: _filterMenu, children: [_jsx(FilterListIcon, {}), " Filter"] }), _jsxs(MenuItem, { onClick: _groupMenu, children: [_jsx(SubjectIcon, {}), " Group"] })] }), _jsxs(Dialog, { open: open, onClose: _closeDialog, "aria-labelledby": 'form-dialog-title', children: [_jsxs(DialogTitle, { id: 'form-dialog-title', children: ["Filter: ", filterBy] }), _jsx(DialogContent, { children: containsDateOrTime ? (_jsxs(_Fragment, { children: [_jsxs(Select, { variant: 'standard', value: displayDialogDateFilter, onChange: _dialogDateFilter, fullWidth: true, children: [_jsx(MenuItem, { value: 'notequal', children: "is not equal to" }), _jsx(MenuItem, { value: 'after', children: "after" }), _jsx(MenuItem, { value: 'before', children: "before" }), _jsx(MenuItem, { value: 'null', children: "is null" }), _jsx(MenuItem, { value: 'notnull', children: "is not null" })] }), filterType === 'Date' && (_jsx(TextField, { variant: 'standard', autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'date', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })), filterType === 'DateTime' && (_jsx(TextField, { variant: 'standard', autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'datetime-local', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })), filterType === 'Time' && (_jsx(TextField, { variant: 'standard', autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'time', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Select, { variant: 'standard', fullWidth: true, onChange: _dialogContainsFilter, value: displayDialogContainsFilter, children: [_jsx(MenuItem, { value: 'contains', children: "Contains" }), _jsx(MenuItem, { value: 'equals', children: "Equals" }), _jsx(MenuItem, { value: 'startswith', children: "Starts with" })] }), _jsx(TextField, { variant: 'standard', autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'text', fullWidth: true, value: displayDialogContainsValue, onChange: _dialogContainsValue })] })) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: _closeDialog, color: 'secondary', children: "Cancel" }), _jsx(Button, { onClick: _submitFilter, color: 'primary', children: "Submit" })] })] }), _jsx(Snackbar, { open: showSnackbar, autoHideDuration: 3000, onClose: handleSnackbarClose, message: snackbarMessage, action: _jsx(IconButton, { size: 'small', "aria-label": 'close', color: 'inherit', onClick: handleSnackbarClose, children: _jsx(CloseIcon, { fontSize: 'small' }) }) })] }));
+                                                return (_jsxs(TableRow, { children: [selectionMode === SELECTION_MODE.SINGLE && (_jsx(TableCell, { children: _jsx(Radio, { onChange: handleChange, value: row[rowID], name: 'radio-buttons', inputProps: { 'aria-label': 'A' }, checked: selectedValue === row[rowID] }) })), selectionMode === SELECTION_MODE.MULTI && (_jsx(TableCell, { children: _jsx(Checkbox, { onChange: onCheckboxClick, checked: selectedValues.some(selectedValue => selectedValue[rowID] === row[rowID]), value: row[rowID] }) })), arColumns.map(column => {
+                                                            const value = row[column.id];
+                                                            return (_jsx(TableCell, { className: classes.cell, align: column.align, children: processColumnValue(column, value) }, column.id));
+                                                        })] }, row[rowID]));
+                                            }) })] }), (!arRows || arRows.length === 0) && (_jsx("div", { className: 'no-records', children: getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }))] })), arRows && arRows.length > 0 && (_jsx(TablePagination, { id: 'pagination', rowsPerPageOptions: [10, 25, 100], component: 'div', count: arRows.length, rowsPerPage: rowsPerPage, page: page, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage }))] })), _jsxs(Menu, { id: 'simple-menu', anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: _menuClose, children: [_jsxs(MenuItem, { onClick: _filterMenu, children: [_jsx(FilterListIcon, {}), " Filter"] }), _jsxs(MenuItem, { onClick: _groupMenu, children: [_jsx(SubjectIcon, {}), " Group"] })] }), _jsxs(Dialog, { open: open, onClose: _closeDialog, "aria-labelledby": 'form-dialog-title', children: [_jsxs(DialogTitle, { id: 'form-dialog-title', children: ["Filter: ", filterBy] }), _jsx(DialogContent, { children: containsDateOrTime ? (_jsxs(_Fragment, { children: [_jsxs(Select, { variant: 'standard', value: displayDialogDateFilter, onChange: _dialogDateFilter, fullWidth: true, children: [_jsx(MenuItem, { value: 'notequal', children: "is not equal to" }), _jsx(MenuItem, { value: 'after', children: "after" }), _jsx(MenuItem, { value: 'before', children: "before" }), _jsx(MenuItem, { value: 'null', children: "is null" }), _jsx(MenuItem, { value: 'notnull', children: "is not null" })] }), filterType === 'Date' && (_jsx(TextField, { variant: 'standard', autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'date', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })), filterType === 'DateTime' && (_jsx(TextField, { variant: 'standard', autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'datetime-local', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })), filterType === 'Time' && (_jsx(TextField, { variant: 'standard', autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'time', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Select, { variant: 'standard', fullWidth: true, onChange: _dialogContainsFilter, value: displayDialogContainsFilter, children: [_jsx(MenuItem, { value: 'contains', children: "Contains" }), _jsx(MenuItem, { value: 'equals', children: "Equals" }), _jsx(MenuItem, { value: 'startswith', children: "Starts with" })] }), _jsx(TextField, { variant: 'standard', autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'text', fullWidth: true, value: displayDialogContainsValue, onChange: _dialogContainsValue })] })) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: _closeDialog, color: 'secondary', children: "Cancel" }), _jsx(Button, { onClick: _submitFilter, color: 'primary', children: "Submit" })] })] }), _jsx(Snackbar, { open: showSnackbar, autoHideDuration: 3000, onClose: handleSnackbarClose, message: snackbarMessage, action: _jsx(IconButton, { size: 'small', "aria-label": 'close', color: 'inherit', onClick: handleSnackbarClose, children: _jsx(CloseIcon, { fontSize: 'small' }) }) })] }));
 }
 //# sourceMappingURL=ListView.js.map