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 navigate = useNavigate();
const pathParts = location.pathname.split("/");
const pathParts = location.pathname.replace(/\/+$/, "").split("/");
////////////////////////////////////////////
// look for defaults in the local storage //
@ -995,6 +995,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
<GridToolbarExportContainer>
<ExportMenuItem format="csv" />
<ExportMenuItem format="xlsx" />
<ExportMenuItem format="json" />
</GridToolbarExportContainer>
</div>
<div>
@ -1131,103 +1132,104 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
return (
<BaseLayout>
{/*
// see above code that would use this
<iframe id="exportIFrame" name="exportIFrame">
<form method="post" target="_self">
<input type="hidden" id="authorizationInput" name="Authorization" />
</form>
</iframe>
*/}
<Box my={3}>
{alertContent ? (
<Box mb={3}>
<Alert
severity="error"
onClose={() =>
{
setAlertContent(null);
}}
>
{alertContent}
</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>
<div className="recordQuery">
{/*
// see above code that would use this
<iframe id="exportIFrame" name="exportIFrame">
<form method="post" target="_self">
<input type="hidden" id="authorizationInput" name="Authorization" />
</form>
</iframe>
*/}
<Box my={3}>
{alertContent ? (
<Box mb={3}>
<Alert
severity="error"
onClose={() =>
{
setAlertContent(null);
}}
>
{alertContent}
</Alert>
</Box>
) : (
""
)}
{
table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission &&
<QCreateNewButton tablePath={metaData?.getTablePathByName(tableName)} />
(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 &&
<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>
</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>
}
<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>
</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>
);
}

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 navigate = useNavigate();
const pathParts = location.pathname.split("/");
const pathParts = location.pathname.replace(/\/+$/, "").split("/");
const tableName = table.name;
const [asyncLoadInited, setAsyncLoadInited] = useState(false);
@ -122,6 +122,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
setNonT1TableSections([]);
setTableProcesses([]);
setTableSections(null);
setShowAudit(false);
};
////////////////////////////////////////////////////////////////////////////////////////////////////
@ -458,6 +459,14 @@ function RecordView({table, launchProcess}: Props): JSX.Element
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 = (
<Menu
anchorEl={actionsMenu}
@ -473,6 +482,13 @@ function RecordView({table, launchProcess}: Props): JSX.Element
onClose={closeActionsMenu}
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 &&
<MenuItem onClick={() => navigate("edit")}>
@ -492,14 +508,14 @@ function RecordView({table, launchProcess}: Props): JSX.Element
Delete
</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) => (
<MenuItem key={process.name} onClick={() => processClicked(process)}>
<ListItemIcon><Icon>{process.iconName ?? "arrow_forward"}</Icon></ListItemIcon>
{process.label}
</MenuItem>
))}
{tableProcesses.length > 0 && <Divider />}
{(tableProcesses.length > 0 || hasEditOrDelete) && <Divider />}
<MenuItem onClick={() => navigate("dev")}>
<ListItemIcon><Icon>data_object</Icon></ListItemIcon>
Developer Mode

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

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