mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 12:50:43 +00:00
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:
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
Reference in New Issue
Block a user