put cancel & save (on insert/edit) and delete & edit (on view) buttons into a sticky-bottom footer. also change modal edit forms from other edit forms to say OK rather than save.

This commit is contained in:
2025-06-19 14:43:17 -05:00
parent 4d30eb3060
commit f0f09a8ff1
3 changed files with 60 additions and 26 deletions

View File

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

View File

@ -1046,16 +1046,19 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
</React.Fragment>
)) : null}
</Grid>
<Box component="form" p={3}>
<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>
</Box>
{
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"}>
<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>
</Box>
}
</Grid>
</Grid>

View File

@ -836,4 +836,27 @@ input[type="search"]::-webkit-search-results-decoration
max-width: 100% !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;
}