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

Set min height on record query table; fix some url bugs in query & view; add create to action menu on view.

Browse Source
This commit is contained in:
darin.kelkhoff
2023-02-10 09:56:57 -06:00
parent 19d0d362aa
commit 6215e58e23
3 changed files with 119 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/qqq/pages/records/query/RecordQuery.tsx
View File

@ -89,7 +89,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const pathParts = location.pathname.split("/"); const pathParts = location.pathname.replace(/\/+$/, "").split("/");
//////////////////////////////////////////// ////////////////////////////////////////////
// look for defaults in the local storage // // look for defaults in the local storage //
@ -995,6 +995,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
<GridToolbarExportContainer> <GridToolbarExportContainer>
<ExportMenuItem format="csv" /> <ExportMenuItem format="csv" />
<ExportMenuItem format="xlsx" /> <ExportMenuItem format="xlsx" />
<ExportMenuItem format="json" />
</GridToolbarExportContainer> </GridToolbarExportContainer>
</div> </div>
<div> <div>
@ -1131,103 +1132,104 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
return ( return (
<BaseLayout> <BaseLayout>
{/* <div className="recordQuery">
// see above code that would use this {/*
<iframe id="exportIFrame" name="exportIFrame"> // see above code that would use this
<form method="post" target="_self"> <iframe id="exportIFrame" name="exportIFrame">
<input type="hidden" id="authorizationInput" name="Authorization" /> <form method="post" target="_self">
</form> <input type="hidden" id="authorizationInput" name="Authorization" />
</iframe> </form>
*/} </iframe>
<Box my={3}> */}
{alertContent ? ( <Box my={3}>
<Box mb={3}> {alertContent ? (
<Alert <Box mb={3}>
severity="error" <Alert
onClose={() => severity="error"
{ onClose={() =>
setAlertContent(null); {
}} setAlertContent(null);
> }}
{alertContent} >
</Alert> {alertContent}
</Box> </Alert>
) : ( </Box>
"" ) : (
)} ""
{ )}
(tableLabel && showSuccessfullyDeletedAlert) ? (
<Alert color="success" sx={{mb: 3}} onClose={() =>
{
setShowSuccessfullyDeletedAlert(false);
}}>
{`${tableLabel} successfully deleted`}
</Alert>
) : null
}
<Box display="flex" justifyContent="flex-end" alignItems="flex-start" mb={2}>
<Box display="flex" marginRight="auto">
<SavedFilters qController={qController} metaData={metaData} tableMetaData={tableMetaData} currentSavedFilter={currentSavedFilter} filterModel={filterModel} columnSortModel={columnSortModel} filterOnChangeCallback={handleSavedFilterChange}/>
</Box>
<Box display="flex" width="150px">
<QActionsMenuButton isOpen={actionsMenu} onClickHandler={openActionsMenu} />
{renderActionsMenu}
</Box>
{ {
table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission && (tableLabel && showSuccessfullyDeletedAlert) ? (
<QCreateNewButton tablePath={metaData?.getTablePathByName(tableName)} /> <Alert color="success" sx={{mb: 3}} onClose={() =>
{
setShowSuccessfullyDeletedAlert(false);
}}>
{`${tableLabel} successfully deleted`}
</Alert>
) : null
} }
<Box display="flex" justifyContent="flex-end" alignItems="flex-start" mb={2}>
<Box display="flex" marginRight="auto">
<SavedFilters qController={qController} metaData={metaData} tableMetaData={tableMetaData} currentSavedFilter={currentSavedFilter} filterModel={filterModel} columnSortModel={columnSortModel} filterOnChangeCallback={handleSavedFilterChange}/>
</Box>
<Box display="flex" width="150px">
<QActionsMenuButton isOpen={actionsMenu} onClickHandler={openActionsMenu} />
{renderActionsMenu}
</Box>
{
table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission &&
<QCreateNewButton tablePath={metaData?.getTablePathByName(tableName)} />
}
</Box>
<Card>
<Box height="100%">
<DataGridPro
components={{Toolbar: CustomToolbar, Pagination: CustomPagination, LoadingOverlay: Loading}}
pinnedColumns={pinnedColumns}
onPinnedColumnsChange={handlePinnedColumnsChange}
pagination
paginationMode="server"
sortingMode="server"
filterMode="server"
page={pageNumber}
checkboxSelection
disableSelectionOnClick
autoHeight
rows={rows}
// getRowHeight={() => "auto"} // maybe nice? wraps values in cells...
columns={columnsModel}
rowBuffer={10}
rowCount={totalRecords === null || totalRecords === undefined ? 0 : totalRecords}
onPageSizeChange={handleRowsPerPageChange}
onRowClick={handleRowClick}
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}
getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
/>
</Box> </Box>
</Card> <Card>
</Box> <Box height="100%">
<DataGridPro
{ components={{Toolbar: CustomToolbar, Pagination: CustomPagination, LoadingOverlay: Loading}}
activeModalProcess && pinnedColumns={pinnedColumns}
<Modal open={activeModalProcess !== null} onClose={(event, reason) => closeModalProcess(event, reason)}> onPinnedColumnsChange={handlePinnedColumnsChange}
<div className="modalProcess"> pagination
<ProcessRun process={activeModalProcess} isModal={true} recordIds={recordIdsForProcess} closeModalHandler={closeModalProcess} /> paginationMode="server"
</div> sortingMode="server"
</Modal> filterMode="server"
} page={pageNumber}
checkboxSelection
disableSelectionOnClick
autoHeight
rows={rows}
// getRowHeight={() => "auto"} // maybe nice? wraps values in cells...
columns={columnsModel}
rowBuffer={10}
rowCount={totalRecords === null || totalRecords === undefined ? 0 : totalRecords}
onPageSizeChange={handleRowsPerPageChange}
onRowClick={handleRowClick}
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}
getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
/>
</Box>
</Card>
</Box>
{
activeModalProcess &&
<Modal open={activeModalProcess !== null} onClose={(event, reason) => closeModalProcess(event, reason)}>
<div className="modalProcess">
<ProcessRun process={activeModalProcess} isModal={true} recordIds={recordIdsForProcess} closeModalHandler={closeModalProcess} />
</div>
</Modal>
}
</div>
</BaseLayout> </BaseLayout>
); );
} }

22
src/qqq/pages/records/view/RecordView.tsx
View File

@ -81,7 +81,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const pathParts = location.pathname.split("/"); const pathParts = location.pathname.replace(/\/+$/, "").split("/");
const tableName = table.name; const tableName = table.name;
const [asyncLoadInited, setAsyncLoadInited] = useState(false); const [asyncLoadInited, setAsyncLoadInited] = useState(false);
@ -122,6 +122,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
setNonT1TableSections([]); setNonT1TableSections([]);
setTableProcesses([]); setTableProcesses([]);
setTableSections(null); setTableSections(null);
setShowAudit(false);
}; };
//////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////
@ -458,6 +459,14 @@ function RecordView({table, launchProcess}: Props): JSX.Element
openModalProcess(process); openModalProcess(process);
} }
let hasEditOrDelete = (table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission) || (table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission);
function gotoCreate()
{
const path = `${pathParts.slice(0, -1).join("/")}/create`;
navigate(path);
}
const renderActionsMenu = ( const renderActionsMenu = (
<Menu <Menu
anchorEl={actionsMenu} anchorEl={actionsMenu}
@ -473,6 +482,13 @@ function RecordView({table, launchProcess}: Props): JSX.Element
onClose={closeActionsMenu} onClose={closeActionsMenu}
keepMounted keepMounted
> >
{
table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission &&
<MenuItem onClick={() => gotoCreate()}>
<ListItemIcon><Icon>add</Icon></ListItemIcon>
Create New
</MenuItem>
}
{ {
table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission && table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission &&
<MenuItem onClick={() => navigate("edit")}> <MenuItem onClick={() => navigate("edit")}>
@ -492,14 +508,14 @@ function RecordView({table, launchProcess}: Props): JSX.Element
Delete Delete
</MenuItem> </MenuItem>
} }
{tableProcesses.length > 0 && ((table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission) || (table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission)) && <Divider />} {tableProcesses.length > 0 && hasEditOrDelete && <Divider />}
{tableProcesses.map((process) => ( {tableProcesses.map((process) => (
<MenuItem key={process.name} onClick={() => processClicked(process)}> <MenuItem key={process.name} onClick={() => processClicked(process)}>
<ListItemIcon><Icon>{process.iconName ?? "arrow_forward"}</Icon></ListItemIcon> <ListItemIcon><Icon>{process.iconName ?? "arrow_forward"}</Icon></ListItemIcon>
{process.label} {process.label}
</MenuItem> </MenuItem>
))} ))}
{tableProcesses.length > 0 && <Divider />} {(tableProcesses.length > 0 || hasEditOrDelete) && <Divider />}
<MenuItem onClick={() => navigate("dev")}> <MenuItem onClick={() => navigate("dev")}>
<ListItemIcon><Icon>data_object</Icon></ListItemIcon> <ListItemIcon><Icon>data_object</Icon></ListItemIcon>
Developer Mode Developer Mode

5
src/qqq/styles/qqq-override-styles.css
View File

@ -24,6 +24,11 @@
white-space: normal; white-space: normal;
} }
.recordQuery .MuiDataGrid-virtualScrollerContent
{
min-height: calc(100vh - 450px) !important;
}
/* Disable red outlines on clicked cells */ /* Disable red outlines on clicked cells */
.MuiDataGrid-cell:focus, .MuiDataGrid-cell:focus,
.MuiDataGrid-columnHeader:focus, .MuiDataGrid-columnHeader:focus,