From ee9cd5a5f68a766e59cc00d061f308b2abf9b6d4 Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Wed, 27 Nov 2024 15:22:21 -0600 Subject: [PATCH] CE-1955 - add support for child-record lists on process validation preview, via: - add properties: gridOnly and gridDensity; - allow the input query records and tableMetaData to come in as pre-typed TS objects, rather than POJSO's, that need to go through constructors. --- .../widgets/misc/RecordGridWidget.tsx | 113 ++++++++++-------- 1 file changed, 66 insertions(+), 47 deletions(-) diff --git a/src/qqq/components/widgets/misc/RecordGridWidget.tsx b/src/qqq/components/widgets/misc/RecordGridWidget.tsx index f4323fd..8611f68 100644 --- a/src/qqq/components/widgets/misc/RecordGridWidget.tsx +++ b/src/qqq/components/widgets/misc/RecordGridWidget.tsx @@ -28,7 +28,7 @@ import Icon from "@mui/material/Icon"; import IconButton from "@mui/material/IconButton"; import Tooltip from "@mui/material/Tooltip/Tooltip"; import Typography from "@mui/material/Typography"; -import {DataGridPro, GridCallbackDetails, GridEventListener, GridRenderCellParams, GridRowParams, GridToolbarContainer, MuiEvent, useGridApiContext, useGridApiEventHandler} from "@mui/x-data-grid-pro"; +import {DataGridPro, GridCallbackDetails, GridDensity, GridEventListener, GridRenderCellParams, GridRowParams, GridToolbarContainer, MuiEvent, useGridApiContext, useGridApiEventHandler} from "@mui/x-data-grid-pro"; import Widget, {AddNewRecordButton, LabelComponent, WidgetData} from "qqq/components/widgets/Widget"; import DataGridUtils from "qqq/utils/DataGridUtils"; import HtmlUtils from "qqq/utils/HtmlUtils"; @@ -60,18 +60,21 @@ interface Props editRecordCallback?: (rowIndex: number) => void; allowRecordDelete: boolean; deleteRecordCallback?: (rowIndex: number) => void; + gridOnly?: boolean; + gridDensity?: GridDensity; } RecordGridWidget.defaultProps = { disableRowClick: false, allowRecordEdit: false, - allowRecordDelete: false + allowRecordDelete: false, + gridOnly: false, }; const qController = Client.getInstance(); -function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRowClick, allowRecordEdit, editRecordCallback, allowRecordDelete, deleteRecordCallback}: Props): JSX.Element +function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRowClick, allowRecordEdit, editRecordCallback, allowRecordDelete, deleteRecordCallback, gridOnly, gridDensity}: Props): JSX.Element { const instance = useRef({timer: null}); const [rows, setRows] = useState([]); @@ -94,11 +97,18 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo { for (let i = 0; i < queryOutputRecords.length; i++) { - records.push(new QRecord(queryOutputRecords[i])); + if(queryOutputRecords[i] instanceof QRecord) + { + records.push(queryOutputRecords[i] as QRecord); + } + else + { + records.push(new QRecord(queryOutputRecords[i])); + } } } - const tableMetaData = new QTableMetaData(data.childTableMetaData); + const tableMetaData = data.childTableMetaData instanceof QTableMetaData ? data.childTableMetaData as QTableMetaData : new QTableMetaData(data.childTableMetaData); const rows = DataGridUtils.makeRows(records, tableMetaData, true); ///////////////////////////////////////////////////////////////////////////////// @@ -296,6 +306,56 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo } + const grid = ( + (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")} + onRowClick={handleRowClick} + getRowId={(row) => row.__rowIndex} + // getRowHeight={() => "auto"} // maybe nice? wraps values in cells... + components={{ + Toolbar: CustomToolbar + }} + // pinnedColumns={pinnedColumns} + // onPinnedColumnsChange={handlePinnedColumnsChange} + // pagination + // paginationMode="server" + // rowsPerPageOptions={[20]} + // sortingMode="server" + // filterMode="server" + // page={pageNumber} + // checkboxSelection + rowCount={data && data.totalRows} + // onPageSizeChange={handleRowsPerPageChange} + // onStateChange={handleStateChange} + density={gridDensity ?? "standard"} + // loading={loading} + // filterModel={filterModel} + // onFilterModelChange={handleFilterChange} + // columnVisibilityModel={columnVisibilityModel} + // onColumnVisibilityModelChange={handleColumnVisibilityChange} + // onColumnOrderChange={handleColumnOrderChange} + // onSelectionModelChange={selectionChanged} + // onSortModelChange={handleSortChange} + // sortingOrder={[ "asc", "desc" ]} + // sortModel={columnSortModel} + /> + ); + + if(gridOnly) + { + return (grid); + } + return ( - (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")} - onRowClick={handleRowClick} - getRowId={(row) => row.__rowIndex} - // getRowHeight={() => "auto"} // maybe nice? wraps values in cells... - components={{ - Toolbar: CustomToolbar - }} - // pinnedColumns={pinnedColumns} - // onPinnedColumnsChange={handlePinnedColumnsChange} - // pagination - // paginationMode="server" - // rowsPerPageOptions={[20]} - // sortingMode="server" - // filterMode="server" - // page={pageNumber} - // checkboxSelection - rowCount={data && data.totalRows} - // onPageSizeChange={handleRowsPerPageChange} - // onStateChange={handleStateChange} - // density={density} - // loading={loading} - // filterModel={filterModel} - // onFilterModelChange={handleFilterChange} - // columnVisibilityModel={columnVisibilityModel} - // onColumnVisibilityModelChange={handleColumnVisibilityChange} - // onColumnOrderChange={handleColumnOrderChange} - // onSelectionModelChange={selectionChanged} - // onSortModelChange={handleSortChange} - // sortingOrder={[ "asc", "desc" ]} - // sortModel={columnSortModel} - /> + {grid}