QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 13:20:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

CE-1955 - add support for child-record lists on process validation preview, via:

Browse Source 
- 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.
This commit is contained in:
darin.kelkhoff
2024-11-27 15:22:21 -06:00
parent 45be12c728
commit ee9cd5a5f6
1 changed files with 66 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/qqq/components/widgets/misc/RecordGridWidget.tsx
View File

@ -28,7 +28,7 @@ import Icon from "@mui/material/Icon";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip/Tooltip"; import Tooltip from "@mui/material/Tooltip/Tooltip";
import Typography from "@mui/material/Typography"; 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 Widget, {AddNewRecordButton, LabelComponent, WidgetData} from "qqq/components/widgets/Widget";
import DataGridUtils from "qqq/utils/DataGridUtils"; import DataGridUtils from "qqq/utils/DataGridUtils";
import HtmlUtils from "qqq/utils/HtmlUtils"; import HtmlUtils from "qqq/utils/HtmlUtils";
@ -60,18 +60,21 @@ interface Props
editRecordCallback?: (rowIndex: number) => void; editRecordCallback?: (rowIndex: number) => void;
allowRecordDelete: boolean; allowRecordDelete: boolean;
deleteRecordCallback?: (rowIndex: number) => void; deleteRecordCallback?: (rowIndex: number) => void;
gridOnly?: boolean;
gridDensity?: GridDensity;
} }
RecordGridWidget.defaultProps = RecordGridWidget.defaultProps =
{ {
disableRowClick: false, disableRowClick: false,
allowRecordEdit: false, allowRecordEdit: false,
allowRecordDelete: false allowRecordDelete: false,
gridOnly: false,
}; };
const qController = Client.getInstance(); 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 instance = useRef({timer: null});
const [rows, setRows] = useState([]); const [rows, setRows] = useState([]);
@ -93,12 +96,19 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
if (queryOutputRecords) if (queryOutputRecords)
{ {
for (let i = 0; i < queryOutputRecords.length; i++) for (let i = 0; i < queryOutputRecords.length; i++)
{
if(queryOutputRecords[i] instanceof QRecord)
{
records.push(queryOutputRecords[i] as QRecord);
}
else
{ {
records.push(new QRecord(queryOutputRecords[i])); 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); const rows = DataGridUtils.makeRows(records, tableMetaData, true);
///////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////
@ -296,16 +306,7 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
} }
return ( const grid = (
<Widget
widgetMetaData={widgetMetaData}
widgetData={data}
labelAdditionalElementsLeft={labelAdditionalElementsLeft}
labelAdditionalComponentsRight={labelAdditionalComponentsRight}
labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}}
>
<Box mx={-3} mb={-3}>
<Box>
<DataGridPro <DataGridPro
autoHeight autoHeight
sx={{ sx={{
@ -336,7 +337,7 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
rowCount={data && data.totalRows} rowCount={data && data.totalRows}
// onPageSizeChange={handleRowsPerPageChange} // onPageSizeChange={handleRowsPerPageChange}
// onStateChange={handleStateChange} // onStateChange={handleStateChange}
// density={density} density={gridDensity ?? "standard"}
// loading={loading} // loading={loading}
// filterModel={filterModel} // filterModel={filterModel}
// onFilterModelChange={handleFilterChange} // onFilterModelChange={handleFilterChange}
@ -348,6 +349,24 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
// sortingOrder={[ "asc", "desc" ]} // sortingOrder={[ "asc", "desc" ]}
// sortModel={columnSortModel} // sortModel={columnSortModel}
/> />
);
if(gridOnly)
{
return (grid);
}
return (
<Widget
widgetMetaData={widgetMetaData}
widgetData={data}
labelAdditionalElementsLeft={labelAdditionalElementsLeft}
labelAdditionalComponentsRight={labelAdditionalComponentsRight}
labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}}
>
<Box mx={-3} mb={-3}>
<Box>
{grid}
</Box> </Box>
</Box> </Box>
</Widget> </Widget>