@pega/react-sdk-components 0.23.0

package/lib/components/templates/ListView/ListView.js

@@ -0,0 +1,842 @@
+/* eslint-disable no-plusplus */
+/* eslint-disable guard-for-in */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+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';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TablePagination from '@material-ui/core/TablePagination';
+import TableRow from '@material-ui/core/TableRow';
+import TableSortLabel from '@material-ui/core/TableSortLabel';
+import Paper from '@material-ui/core/Paper';
+import MoreIcon from '@material-ui/icons/MoreVert';
+import FilterListIcon from '@material-ui/icons/FilterList';
+import SubjectIcon from '@material-ui/icons/Subject';
+import SearchIcon from '@material-ui/icons/Search';
+import TextField from '@material-ui/core/TextField';
+import Grid from '@material-ui/core/Grid';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Select from '@material-ui/core/Select';
+import Button from '@material-ui/core/Button';
+import Link from '@material-ui/core/Link';
+import Typography from '@material-ui/core/Typography';
+import Snackbar from '@material-ui/core/Snackbar';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import { Radio } from '@material-ui/core';
+import Checkbox from '@material-ui/core/Checkbox';
+import { filterData } from '../../templates/SimpleTable/helpers';
+import './ListView.css';
+const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
+let myRows;
+let myDisplayColumnList;
+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 thePConn = getPConnect();
+    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 */
+    const defRowID = referenceType === 'Case' ? 'pyID' : 'pyGUID';
+    /** If compositeKeys is defined, use dynamic value, else fallback to pyID or pyGUID. */
+    const rowID = compositeKeys && compositeKeys[0] ? compositeKeys[0] : defRowID;
+    const [arRows, setRows] = useState([]);
+    const [arColumns, setColumns] = useState([]);
+    const [order, setOrder] = useState('asc');
+    const [orderBy, setOrderBy] = useState('');
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [open, setOpen] = useState(false);
+    const [showSnackbar, setShowSnackbar] = useState(false);
+    const [snackbarMessage, setSnackbarMessage] = useState('');
+    const [selectedValue, setSelectedValue] = useState('');
+    // This basically will hold the list of all current filters
+    const filters = useRef({});
+    // Will contain the list of columns specific for an instance
+    let columnList = useRef([]);
+    let dashboardFilterPayload;
+    // Will be sent in the dashboardFilterPayload
+    let selectParam = [];
+    // dataview parameters coming from the ListPage
+    // This constant will also be used for parameters coming from from other components/utility fnctions in future
+    const dataViewParameters = parameters;
+    const useStyles = makeStyles((theme) => createStyles({
+        root: {
+            width: '100%'
+        },
+        paper: {
+            width: '100%',
+            marginTop: theme.spacing(2),
+            marginBottom: theme.spacing(2)
+        },
+        search: {
+            padding: '5px 5px'
+        },
+        table: {
+            minWidth: 750
+        },
+        tableInForm: {
+            minWidth: 750,
+            maxHeight: 550,
+            overflow: 'auto'
+        },
+        moreIcon: {
+            verticalAlign: 'bottom'
+        },
+        filteredIcon: {
+            verticalAlign: 'bottom'
+        },
+        cell: {
+            whiteSpace: 'nowrap'
+        },
+        visuallyHidden: {
+            border: 0,
+            clip: 'rect(0 0 0 0)',
+            height: 1,
+            margin: -1,
+            overflow: 'hidden',
+            padding: 0,
+            position: 'absolute',
+            top: 20,
+            width: 1
+        },
+        title: {
+            marginTop: theme.spacing(1),
+            marginLeft: theme.spacing(1)
+        }
+    }));
+    const classes = useStyles();
+    const handleRequestSort = (event, property) => {
+        const isAsc = orderBy === property && order === 'asc';
+        setOrder(isAsc ? 'desc' : 'asc');
+        setOrderBy(property);
+    };
+    const createSortHandler = (property) => (event) => {
+        sortColumnId = property;
+        handleRequestSort(event, property);
+    };
+    function descendingComparator(a, b, orderedBy) {
+        if (b[orderedBy] < a[orderedBy]) {
+            return -1;
+        }
+        if (b[orderedBy] > a[orderedBy]) {
+            return 1;
+        }
+        return 0;
+    }
+    function getComparator(theOrder, orderedBy
+    // eslint-disable-next-line no-unused-vars
+    ) {
+        return theOrder === 'desc'
+            ? (a, b) => descendingComparator(a, b, orderedBy)
+            : (a, b) => -descendingComparator(a, b, orderedBy);
+    }
+    // eslint-disable-next-line no-unused-vars
+    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;
+            return a[1] - b[1];
+        });
+        return stabilizedThis.map(el => el[0]);
+    }
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(10);
+    const handleChangePage = (event, newPage) => {
+        setPage(newPage);
+    };
+    const handleChangeRowsPerPage = (event) => {
+        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) => {
+            let theField = field.config.value.substring(field.config.value.indexOf(' ') + 1);
+            if (theField.indexOf('.') === 0) {
+                theField = theField.substring(1);
+            }
+            const headerRow = {};
+            headerRow.id = theField;
+            headerRow.type = field.type;
+            headerRow.numeric =
+                field.type === 'Decimal' ||
+                    field.type === 'Integer' ||
+                    field.type === 'Percentage' ||
+                    field.type === 'Currency' ||
+                    false;
+            headerRow.disablePadding = false;
+            headerRow.label = fields[colIndex].config.label;
+            return headerRow;
+        });
+        return arReturn;
+    }
+    function updateFields(arFields, theColumns) {
+        const arReturn = arFields;
+        arFields.forEach((field, index) => {
+            arReturn[index].config.name = theColumns[index].id;
+        });
+        return arReturn;
+    }
+    function getUsingData(arTableData, theColumns) {
+        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');
+            }
+        }
+        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'];
+            }
+            return row;
+        });
+        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 => {
+            myColList.push(col.id);
+        });
+        // for (const col of arCols) {
+        //   myColList.push(col.id);
+        // }
+        return myColList;
+    }
+    /** Will return field from a filter expression */
+    function getFieldFromFilter(filter, dateRange = false) {
+        let fieldValue;
+        if (dateRange) {
+            fieldValue = filter?.AND[0]?.condition.lhs.field;
+        }
+        else {
+            fieldValue = filter?.condition.lhs.field;
+        }
+        return fieldValue;
+    }
+    // Will be triggered when EVENT_DASHBOARD_FILTER_CHANGE fires
+    function processFilterChange(data) {
+        const { filterId, filterExpression } = data;
+        dashboardFilterPayload = {
+            query: {
+                filter: {},
+                select: []
+            }
+        };
+        filters.current[filterId] = filterExpression;
+        // eslint-disable-next-line no-unneeded-ternary
+        let isDateRange = data.filterExpression?.AND ? true : false;
+        // 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.forEach(col => {
+            selectParam.push({
+                field: col
+            });
+        });
+        // Checking if the triggered filter is applicable for this list
+        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
+        let validFilter = false;
+        let index = 1;
+        // Iterating over the current filters list to create filter data which will be POSTed
+        for (const filterExp in filters.current) {
+            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
+            // eslint-disable-next-line no-unneeded-ternary
+            isDateRange = filter?.AND ? true : false;
+            field = getFieldFromFilter(filter, isDateRange);
+            if (!(columnList.length && columnList.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
+            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
+            */
+            if (isDateRange) {
+                const dateRelationalOp = filter?.AND ? 'AND' : 'OR';
+                dashboardFilterPayload.query.filter.filterConditions = {
+                    ...dashboardFilterPayload.query.filter.filterConditions,
+                    [`T${index++}`]: { ...filter[relationalOp][0].condition },
+                    [`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})`;
+                }
+                else {
+                    dashboardFilterPayload.query.filter.logic = `(T${index - 2} ${relationalOp} T${index - 1})`;
+                }
+                dashboardFilterPayload.query.select = selectParam;
+            }
+            else {
+                dashboardFilterPayload.query.filter.filterConditions = {
+                    ...dashboardFilterPayload.query.filter.filterConditions,
+                    [`T${index++}`]: { ...filter.condition, ignoreCase: true }
+                };
+                if (dashboardFilterPayload.query.filter.logic) {
+                    dashboardFilterPayload.query.filter.logic = `${dashboardFilterPayload.query.filter.logic} ${relationalOp} T${index - 1}`;
+                }
+                else {
+                    dashboardFilterPayload.query.filter.logic = `T${index - 1}`;
+                }
+                dashboardFilterPayload.query.select = selectParam;
+            }
+        }
+        // Reset the dashboardFilterPayload if we end up with no valid filters for the list
+        if (!validFilter) {
+            dashboardFilterPayload = undefined;
+        }
+        fetchDataFromServer();
+    }
+    // Will be triggered when EVENT_DASHBOARD_FILTER_CLEAR_ALL fires
+    function processFilterClear() {
+        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() {
+        const context = getPConnect().getContextName();
+        return PCore.getDataPageUtils().getDataAsync(referenceList, context, payload ? payload.dataViewParameters : dataViewParameters, null, payload ? payload.query : dashboardFilterPayload && dashboardFilterPayload.query);
+    }
+    async function fetchDataFromServer() {
+        let bCallSetRowsColumns = true;
+        const workListJSON = await fetchAllData();
+        // 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 selectParams = [];
+        myColumns.forEach(column => {
+            selectParams.push({
+                field: column.id
+            });
+        });
+        const colList = [];
+        selectParams.forEach(col => {
+            colList.push(col.field);
+        });
+        columnList = colList;
+        fields = updateFields(fields, myColumns);
+        const usingDataResults = getUsingData(tableDataResults, myColumns);
+        // store globally, so can be searched, filtered, etc.
+        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
+        if (bCallSetRowsColumns) {
+            setRows(myRows);
+            setColumns(myColumns);
+        }
+        return () => {
+            // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription
+            // The useEffect closure lets us have access to the bCallSetRowsColumns
+            //  variable inside the useEffect and inside the "then" clause of the
+            //  workListData promise
+            //  So, if this cleanup code gets run before the promise .then is called,
+            //  we can avoid calling the useState setters which would otherwise show a warning
+            bCallSetRowsColumns = false;
+        };
+    }
+    useEffect(() => {
+        fetchDataFromServer();
+    }, []);
+    function searchFilter(value, rows) {
+        function filterArray(el) {
+            const bReturn = false;
+            for (const key in el) {
+                // only search columsn that are displayed (pzInsKey and pxRefObjectClass are added and may or may not be displayed)
+                if (myDisplayColumnList.includes(key)) {
+                    let myVal = el[key];
+                    if (myVal !== null) {
+                        if (typeof myVal !== 'string') {
+                            myVal = myVal.toString();
+                        }
+                        if (myVal.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
+                            return true;
+                        }
+                    }
+                }
+            }
+            return bReturn;
+        }
+        rows = rows.filter(filterArray);
+        return rows;
+    }
+    function _onSearch(event) {
+        const searchValue = event.target.value;
+        const filteredRows = searchFilter(searchValue, myRows.slice());
+        setRows(filteredRows);
+    }
+    function showToast(message) {
+        const theMessage = `Assignment: ${message}`;
+        // eslint-disable-next-line no-console
+        console.error(theMessage);
+        setSnackbarMessage(message);
+        setShowSnackbar(true);
+    }
+    function openAssignment(row) {
+        const { pxRefObjectClass, pzInsKey } = row;
+        const sTarget = thePConn.getContainerName();
+        const options = { containerName: sTarget };
+        thePConn
+            .getActionsApi()
+            .openAssignment(pzInsKey, pxRefObjectClass, options)
+            .then(() => {
+            // console.log("openAssignment successful");
+        })
+            .catch(() => {
+            showToast(`openAssignment failed!`);
+        });
+    }
+    function _rowClick(row) {
+        // eslint-disable-next-line sonarjs/no-small-switch
+        switch (rowClickAction) {
+            case 'openAssignment':
+                openAssignment(row);
+                break;
+            default:
+                break;
+        }
+    }
+    function openWork(row) {
+        const { pxRefObjectClass, pxRefObjectKey } = row;
+        if (pxRefObjectClass !== '' && pxRefObjectKey !== '') {
+            thePConn.getActionsApi().openWorkByHandle(pxRefObjectKey, pxRefObjectClass);
+        }
+    }
+    function handleSnackbarClose(event, reason) {
+        if (reason === 'clickaway') {
+            return;
+        }
+        setShowSnackbar(false);
+    }
+    function _menuClick(event, columnId, columnType, label) {
+        menuColumnId = columnId;
+        menuColumnType = columnType;
+        menuColumnLabel = label;
+        setAnchorEl(event.currentTarget);
+    }
+    function _menuClose() {
+        setAnchorEl(null);
+    }
+    const [filterBy, setFilterBy] = useState();
+    const [containsDateOrTime, setContainsDateOrTime] = useState(false);
+    const [filterType, setFilterType] = useState('string');
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+    const [displayDialogFilterName, setDisplayDialogFilterName] = useState('');
+    const [displayDialogContainsFilter, setDisplayDialogContainsFilter] = useState('contains');
+    const [displayDialogContainsValue, setDisplayDialogContainsValue] = useState('');
+    const [displayDialogDateFilter, setDisplayDialogDateFilter] = useState('notequal');
+    const [displayDialogDateValue, setDisplayDialogDateValue] = useState('');
+    function _filterMenu() {
+        setAnchorEl(null);
+        let bFound = false;
+        for (const filterObj of filterByColumns) {
+            if (filterObj.ref === menuColumnId) {
+                setFilterBy(menuColumnLabel);
+                if (filterObj.type === 'Date' ||
+                    filterObj.type === 'DateTime' ||
+                    filterObj.type === 'Time') {
+                    setContainsDateOrTime(true);
+                    setFilterType(filterObj.type);
+                    setDisplayDialogDateFilter(filterObj.containsFilter);
+                    setDisplayDialogDateValue(filterObj.containsFilterValue);
+                }
+                else {
+                    setContainsDateOrTime(false);
+                    setFilterType('string');
+                    setDisplayDialogContainsFilter(filterObj.containsFilter);
+                    setDisplayDialogContainsValue(filterObj.containsFilterValue);
+                }
+                bFound = true;
+                break;
+            }
+        }
+        if (!bFound) {
+            setFilterBy(menuColumnLabel);
+            setDisplayDialogFilterName(menuColumnId);
+            setDisplayDialogContainsValue('');
+            switch (menuColumnType) {
+                case 'Date':
+                case 'DateTime':
+                case 'Time':
+                    setContainsDateOrTime(true);
+                    setFilterType(menuColumnType);
+                    break;
+                default:
+                    setContainsDateOrTime(false);
+                    setFilterType('string');
+                    break;
+            }
+        }
+        // open dialog
+        setOpen(true);
+    }
+    function _groupMenu() {
+        setAnchorEl(null);
+    }
+    function _closeDialog() {
+        setOpen(false);
+    }
+    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;
+                }
+                return false;
+            }
+        }
+        return false;
+    }
+    function updateFilterWithInfo() {
+        let bFound = false;
+        for (const filterObj of filterByColumns) {
+            if (filterObj['ref'] === menuColumnId) {
+                filterObj['type'] = filterType;
+                if (containsDateOrTime) {
+                    filterObj['containsFilter'] = displayDialogDateFilter;
+                    filterObj['containsFilterValue'] = displayDialogDateValue;
+                }
+                else {
+                    filterObj['containsFilter'] = displayDialogContainsFilter;
+                    filterObj['containsFilterValue'] = displayDialogContainsValue;
+                }
+                bFound = true;
+                break;
+            }
+        }
+        if (!bFound) {
+            // add in
+            const filterObj = {};
+            filterObj.ref = menuColumnId;
+            filterObj['type'] = filterType;
+            if (containsDateOrTime) {
+                filterObj['containsFilter'] = displayDialogDateFilter;
+                filterObj['containsFilterValue'] = displayDialogDateValue;
+            }
+            else {
+                filterObj['containsFilter'] = displayDialogContainsFilter;
+                filterObj['containsFilterValue'] = displayDialogContainsValue;
+            }
+            filterByColumns.push(filterObj);
+        }
+    }
+    function filterSortGroupBy() {
+        // get original data set
+        let theData = myRows.slice();
+        // last filter config data is global
+        theData = theData.filter(filterData(filterByColumns));
+        // 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;
+        setDisplayDialogContainsFilter(event.target.value);
+    }
+    function _dialogContainsValue(event) {
+        // dialogContainsValue = event.target.value;
+        setDisplayDialogContainsValue(event.target.value);
+    }
+    function _dialogDateFilter(event) {
+        // dialogDateFilter = event.target.value;
+        setDisplayDialogDateFilter(event.target.value);
+    }
+    function _dialogDateValue(event) {
+        setDisplayDialogDateValue(event.target.value);
+    }
+    function _submitFilter() {
+        updateFilterWithInfo();
+        filterSortGroupBy();
+        setOpen(false);
+    }
+    function _showButton(name, row) {
+        let bReturn = false;
+        const { pxRefObjectClass, pzInsKey, pxRefObjectKey } = row;
+        switch (name) {
+            case 'pxTaskLabel':
+                if (pxRefObjectClass !== '' && pzInsKey !== '') {
+                    bReturn = true;
+                }
+                break;
+            case 'pxRefObjectInsName':
+                if (pxRefObjectClass !== '' && pxRefObjectKey !== '') {
+                    bReturn = true;
+                }
+                break;
+            default:
+                break;
+        }
+        return bReturn;
+    }
+    function _listViewClick(name, row) {
+        switch (name) {
+            case 'pxTaskLabel':
+                openAssignment(row);
+                break;
+            case 'pxRefObjectInsName':
+                openWork(row);
+                break;
+            default:
+                break;
+        }
+    }
+    function _listTitle() {
+        const defaultTitle = 'List';
+        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) {
+            for (const inheritedProp of inheritedProps) {
+                if (inheritedProp?.prop === 'label') {
+                    title = inheritedProp?.value;
+                    break;
+                }
+            }
+        }
+        return title;
+    }
+    const handleChange = (event) => {
+        const value = event.target.value;
+        getPConnect()
+            ?.getListActions?.()
+            ?.setSelectedRows([{ [rowID]: value }]);
+        setSelectedValue(value);
+    };
+    const onCheckboxClick = event => {
+        const value = event?.target?.value;
+        const checked = event?.target?.checked;
+        getPConnect()
+            ?.getListActions()
+            ?.setSelectedRows([{ [rowID]: value, $selected: checked }]);
+    };
+    return (React.createElement(React.Fragment, null,
+        arColumns && arColumns.length > 0 && (React.createElement(Paper, { className: classes.paper },
+            React.createElement(Typography, { className: classes.title, variant: 'h6', color: 'textPrimary', gutterBottom: true }, _listTitle()),
+            globalSearch && (React.createElement(Grid, { container: true, spacing: 1, alignItems: 'flex-end', className: classes.search },
+                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(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 => {
+                            return (React.createElement(TableCell, { className: classes.cell, key: column.id, sortDirection: orderBy === column.id ? order : false },
+                                React.createElement(TableSortLabel, { active: orderBy === column.id, direction: orderBy === column.id ? order : 'asc', onClick: createSortHandler(column.id) },
+                                    column.label,
+                                    _showFilteredIcon(column.id) && (React.createElement(FilterListIcon, { className: classes.filteredIcon })),
+                                    orderBy === column.id ? (React.createElement("span", { className: classes.visuallyHidden }, order === 'desc' ? 'sorted descending' : 'sorted ascending')) : null),
+                                React.createElement(MoreIcon, { className: classes.moreIcon, onClick: event => {
+                                        _menuClick(event, column.id, column.type, column.label);
+                                    } })));
+                        }))),
+                    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, 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) ? (React.createElement(Link, { component: 'button', onClick: () => {
+                                    _listViewClick(column.id, row);
+                                } }, column.format && typeof value === 'number'
+                                ? column.format(value)
+                                : value)) : (React.createElement(React.Fragment, null, column.format && typeof value === 'number'
+                                ? column.format(value)
+                                : value))));
+                        })));
+                    }))))) : (React.createElement(TableContainer, null,
+                React.createElement(Table, null,
+                    React.createElement(TableHead, null,
+                        React.createElement(TableRow, null,
+                            (selectionMode === SELECTION_MODE.SINGLE ||
+                                selectionMode === SELECTION_MODE.MULTI) && React.createElement(TableCell, null),
+                            arColumns.map(column => {
+                                return (React.createElement(TableCell, { className: classes.cell, key: column.id, sortDirection: orderBy === column.id ? order : false },
+                                    React.createElement(TableSortLabel, { active: orderBy === column.id, direction: orderBy === column.id ? order : 'asc', onClick: createSortHandler(column.id) },
+                                        column.label,
+                                        orderBy === column.id ? (React.createElement("span", { className: classes.visuallyHidden }, order === 'desc' ? 'sorted descending' : 'sorted ascending')) : null)));
+                            }))),
+                    React.createElement(TableBody, null, arRows &&
+                        arRows.length > 0 &&
+                        stableSort(arRows, getComparator(order, orderBy))
+                            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                            .map(row => {
+                            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 }, column.format && typeof value === 'number'
+                                        ? column.format(value)
+                                        : value));
+                                })));
+                        }))),
+                arRows && arRows.length === 0 && (React.createElement("div", { className: 'no-records' }, "No records found."))))),
+            arRows && arRows.length > 0 && (React.createElement(TablePagination, { rowsPerPageOptions: [10, 25, 100], component: 'div', count: arRows.length, rowsPerPage: rowsPerPage, page: page, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage })))),
+        React.createElement(Menu, { id: 'simple-menu', anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: _menuClose },
+            React.createElement(MenuItem, { onClick: _filterMenu },
+                React.createElement(FilterListIcon, null),
+                " Filter"),
+            React.createElement(MenuItem, { onClick: _groupMenu },
+                React.createElement(SubjectIcon, null),
+                " Group")),
+        React.createElement(Dialog, { open: open, onClose: _closeDialog, "aria-labelledby": 'form-dialog-title' },
+            React.createElement(DialogTitle, { id: 'form-dialog-title' },
+                "Filter: ",
+                filterBy),
+            React.createElement(DialogContent, null, containsDateOrTime ? (React.createElement(React.Fragment, null,
+                React.createElement(Select, { value: displayDialogDateFilter, onChange: _dialogDateFilter, fullWidth: true },
+                    React.createElement(MenuItem, { value: 'notequal' }, "is not equal to"),
+                    React.createElement(MenuItem, { value: 'after' }, "after"),
+                    React.createElement(MenuItem, { value: 'before' }, "before"),
+                    React.createElement(MenuItem, { value: 'null' }, "is null"),
+                    React.createElement(MenuItem, { value: 'notnull' }, "is not null")),
+                filterType === 'Date' && (React.createElement(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'date', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })),
+                filterType === 'DateTime' && (React.createElement(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'datetime-local', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })),
+                filterType === 'Time' && (React.createElement(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'time', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })))) : (React.createElement(React.Fragment, null,
+                React.createElement(Select, { fullWidth: true, onChange: _dialogContainsFilter, value: displayDialogContainsFilter },
+                    React.createElement(MenuItem, { value: 'contains' }, "Contains"),
+                    React.createElement(MenuItem, { value: 'equals' }, "Equals"),
+                    React.createElement(MenuItem, { value: 'startswith' }, "Starts with")),
+                React.createElement(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'text', fullWidth: true, value: displayDialogContainsValue, onChange: _dialogContainsValue })))),
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { onClick: _closeDialog, color: 'secondary' }, "Cancel"),
+                React.createElement(Button, { onClick: _submitFilter, color: 'primary' }, "Submit"))),
+        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.propTypes = {
+    getPConnect: PropTypes.func.isRequired
+    // parameters: PropTypes.objectOf(PropTypes.any)
+};
+//# sourceMappingURL=ListView.js.map