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

Merged feature/sticky-record-buttons into integration

Browse Source
This commit is contained in:
darin.kelkhoff
2025-06-19 14:43:38 -05:00
parent 99bdf2529a f0f09a8ff1
commit bf0db7526a
3 changed files with 60 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/qqq/components/forms/EntityForm.tsx
View File

@ -59,15 +59,17 @@ import * as Yup from "yup";
interface Props interface Props
{ {
id?: string; id?: string,
isModal: boolean; isModal: boolean,
table?: QTableMetaData; table?: QTableMetaData,
closeModalHandler?: (event: object, reason: string) => void; closeModalHandler?: (event: object, reason: string) => void,
defaultValues: { [key: string]: string }; defaultValues: { [key: string]: string },
disabledFields: { [key: string]: boolean } | string[]; disabledFields: { [key: string]: boolean } | string[],
isCopy?: boolean; isCopy?: boolean,
onSubmitCallback?: (values: any, tableName: string) => void; onSubmitCallback?: (values: any, tableName: string) => void,
overrideHeading?: string; overrideHeading?: string,
saveButtonLabel?: string,
saveButtonIcon?: string,
} }
EntityForm.defaultProps = { EntityForm.defaultProps = {
@ -79,6 +81,8 @@ EntityForm.defaultProps = {
disabledFields: {}, disabledFields: {},
isCopy: false, isCopy: false,
onSubmitCallback: null, onSubmitCallback: null,
saveButtonLabel: "Save",
saveButtonIcon: "save",
}; };
@ -1331,12 +1335,14 @@ function EntityForm(props: Props): JSX.Element
</Box> </Box>
)) : null} )) : null}
<Box component="div" p={3}> {formFields &&
<Grid container justifyContent="flex-end" spacing={3}> <Box component="div" p={3} className={props.isModal ? "modalBottomButtonBar" : "stickyBottomButtonBar"}>
<QCancelButton onClickHandler={props.isModal ? props.closeModalHandler : handleCancelClicked} disabled={isSubmitting} /> <Grid container justifyContent="flex-end" spacing={3}>
<QSaveButton disabled={isSubmitting} /> <QCancelButton onClickHandler={props.isModal ? props.closeModalHandler : handleCancelClicked} disabled={isSubmitting} />
</Grid> <QSaveButton disabled={isSubmitting} label={props.saveButtonLabel} iconName={props.saveButtonIcon} />
</Box> </Grid>
</Box>
}
</Form> </Form>
); );
@ -1355,6 +1361,8 @@ function EntityForm(props: Props): JSX.Element
disabledFields={showEditChildForm.disabledFields} disabledFields={showEditChildForm.disabledFields}
onSubmitCallback={props.onSubmitCallback ? props.onSubmitCallback : submitEditChildForm} onSubmitCallback={props.onSubmitCallback ? props.onSubmitCallback : submitEditChildForm}
overrideHeading={`${showEditChildForm.rowIndex != null ? "Editing" : "Creating New"} ${showEditChildForm.table.label}`} overrideHeading={`${showEditChildForm.rowIndex != null ? "Editing" : "Creating New"} ${showEditChildForm.table.label}`}
saveButtonLabel="OK"
saveButtonIcon="check"
/> />
</div> </div>
</Modal> </Modal>

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

@ -1081,16 +1081,19 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
</React.Fragment> </React.Fragment>
)) : null} )) : null}
</Grid> </Grid>
<Box component="form" p={3}> {
<Grid container justifyContent="flex-end" spacing={3}> tableMetaData && record && ((table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission) || (table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission)) &&
{ <Box component="div" p={3} className={"stickyBottomButtonBar"}>
table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission && <QDeleteButton onClickHandler={handleClickDeleteButton} /> <Grid container justifyContent="flex-end" spacing={3}>
} {
{ table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission && <QDeleteButton onClickHandler={handleClickDeleteButton} />
table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission && <QEditButton /> }
} {
</Grid> table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission && <QEditButton />
</Box> }
</Grid>
</Box>
}
</Grid> </Grid>
</Grid> </Grid>

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

@ -841,4 +841,27 @@ input[type="search"]::-webkit-search-results-decoration
max-width: 100% !important; max-width: 100% !important;
flex-grow: 1 !important; flex-grow: 1 !important;
} }
} }
.stickyBottomButtonBar
{
padding-bottom: 1rem !important;
padding-right: 0 !important;
margin-bottom: -4rem !important;
margin-top: -1.5rem !important;
position: sticky;
bottom: 0;
background: linear-gradient(to bottom, transparent 0, #f0f2f5 4px);
z-index: 10; /* have needed a little here, e.g. to get above MuiDataGrid-overlay and ACE */
}
.modalBottomButtonBar
{
padding-bottom: 0 !important;
padding-right: 0 !important;
}
.stickyBottomButtonBar>.MuiGrid-container
{
padding-top: 1rem;
}